Todo: Evaluate TinyMCE as a replacement for Quill

[knadh]

Quill has a lot of rough edges but is very light weight compared to TinyMCE which is polished, but very heavy. Nonetheless, evaluate TinyMCE as a viable replacement for Quill as the usability benefits may outweigh size.

Context:
#416 (comment)
#204

[scmmishra]

@knadh Since you're considering evaluating TinyMCE, I'd suggest evaluating TipTap as well, which IMO is a better candidate. It's lighter (60.7kb vs 132kb, minified + gzipped) with treeshaking enabled.

It also has better support for VueJS and is completely renderless, allowing it to fit into any theme easily.

I can give it a shot, maybe build a PoC over the weekend if you're interested

[henk23]

TipTap looks super good too, I had never heard of it before. Your bundlephobia links lead me to look at Slate, which is even smaller, 17.9kb, but looks good nonetheless.

The 132kb of tinymce is probably calculated without a theme (+ another ~130kb) and plugins. It's huge, but it might be worth it. Also, it's already translated into many languages.

Let's evaluate :)

[knadh]

@scmmishra a PoC would be great, something that shows parity with the current listmonk Quill implementation.

The 132kb of tinymce is probably calculated without a theme (+ another ~130kb) and plugins. It's huge, but it might me worth it. Also, it's already translated into many languages. Let's evaluate :)

@henk23 +1

[scmmishra]

@knadh @henk23 Here's a PR with tiptap setup to test drive. Take it for a spin.

[henk23]

@knadh @scmmishra Here is the corresponding PR for TinyMCE: #472

Especially the size was a concern, so here is a direct comparison:
With Quill: binary size is 15276.15 KB and stuffed zip size is 597.59 KB
With TinyMCE: binary size is 13452.98 KB and stuffed zip size is 911.56 KB

Unfortunately, the binary size does not seem very consistent between builds? For every make dist the binary gains an additional ~1MB.

[knadh]

Sweet! Will check out both the PRs shortly.

zip size is 597.59 KB vs. 911.56 KB

Yep, this was my original concern as well, TinyMCE is being as big as the entire app. But yes, could be worth the tradeoff.

Unfortunately, the binary size does not seem very consistent between builds? For every make dist the binary gains an additional ~1MB.

hm, this shouldn't happen unless there are new files being appended to the frontend/dist folder, which otherwise gets cleared automatically on every build.

[knadh]

Thank you for the PRs @scmmishra @henk23.

I think we can just go all-in and bundle TinyMCE with a full fledged toolbar like this.

Quill has been quite painful to setup (the tiny filesize trade-off didn't pay off) and is too rudimentary as an editor. TipTap is nice and tiny, but again, is a lib like Quill than an out-of-the-box editor like TinyMCE.

@henk23 I'm hoping the image resizing features (the demo link above) are are available in the FOSS version.

If you're interested in finishing this PR, I think these are the next steps:

• rebase with the latest updates from master.
• Flesh out the editor toolbar with as many useful options as possible, making the big TinyMCE bundle worth it!
• Integrate the media component for image insertion. (I can work on this)

PS: We can ship this with the upcoming 2.0 release, which almost ready.

[henk23]

@knadh I'll be happy to work on that (including the media component), just cannot promise a timing. Hope to get to this during the coming week :) Do you have a timeline for release 2.0?

[henk23]

@knadh I had some time and just fixed a few things:

• Media insertion now works
• Lots of tools added to the toolbar

There are still some TODOs in Editor.vue, maybe you can have a look at some of them.

[knadh]

#472 is merged.