Working with the Quill editor

I’ve been playing around with the Quill editor recently. Although I’m usually more of a plain text person, I kind of like what this non-markdown editor has to offer. It’s WYSIWYG with a few nice features.

• First, it provides checkable task lists, so you create the task and check it off when you’re done with it, with no need to open the file for editing.
• Second, it has builtin highlighting and changing of text colors.
• Third, it has bullet points with indentation/outdentation on by default.
• Fourth, it uses a JSON-style text format for the data, but you can also get an html format if you want to export as a static page.
• Fifth, you can directly query the WYSIWYG HTML using Javascript. You can, for instance, grab all unchecked tasks with the tag #research with this simple query: Array.from(document.querySelectorAll("li[data-list='unchecked']")).filter(el => el.innerText.includes('#notfood')). On a widescreen monitor, you can have the text of the document on one side and the query output on the other.
• Sixth, it’s really easy to customize and add new features. Changing the available highlighting colors, for instance, is nothing more than changing the configuration used on page load: { 'background': ['yellow','pink', 'springgreen', 'black', 'white'] }. More generally, you’re embedding the editor inside your own HTML file, so you can use it however you want. One thing you can do is add buttons that do things with the API. It’s even easy to modify the Javascript file.

I’m not saying there’s anything unique about Quill with respect to any of the individual items. In my playing with it, however, it seems to offer the best combination of these features that I’ve found. The critical thing for me is that I don’t have to spend a lot of time learning things. To contrast with Obsidian, I don’t know Typescript. That means I’d have to invest in learning how Typescript works and do a build or whatever you do with Typescript in order to write an extension. My “extension” with Quill is searching up how to do something in Javascript and adding that to the HTML file.

Rating: 5/5

True minimal theme