tutorial quill tiptap presenta

Farewell Quill.js, Welcome TipTap!

ā€¢ 3 min read

PRESENTA internal text editor was implemented using Quill.js library.

At that time, it was, by far, the most interesting option, with a generic internal document format, a plugin system and a good documentation.

PRESENTA text editor is not based on Quill.js anymore. Right now, it uses the wonderful TipTap, based on ProseMirror.

The reasons why Iā€™ve migrated to another option were several, here the most importants:

  • Quill.js customization is far from perfection, to say the least.
  • Overriding some internal style defaults is not clean and easy, leading to a lot of hacks.
  • The complete lack of support for the shift-enter, the soft new line (without alternatives, even hackish) brought me to the hard decision.

Of course, I donā€™t want to blame Quill.js. Itā€™s just a matter of fact. Iā€™ve discovered a better option and I decide to spend time for the migration.

I couldnā€™t be happier of the choice!

Iā€™ve migrated the component in half day including all the custom features I had to implement as TipTap plugins, not to mentioning the way more better experience of the editor since Iā€™m able to customize, so far, everything.

If you need a text editor for Vue.js, truly fully costomizable, I can stress enough: TipTap!

What Iā€™ve learned #

The experience with Quill.js, of course, made me learn tons of stuff, Quill-related.

I want to say goodbye to Quill.js leaving here a couple of tips that might be useful to someone else.

First, here a very minimal Vue.js component that initialize Quill.js (with default setting) and handles the common interaction between Quill and Vue:

Then, if you need to introduce a custom tag in Quill.js, here the sample code, found it in tons of online searches.

Here the code to allow the mark HTML tag:

const Inline = Quill.import('blots/inline')

class MarkBlot extends Inline { }
MarkBlot.blotName = 'mark'
MarkBlot.tagName = 'mark'
Quill.register(MarkBlot)

Remember to make it available in the Quill.js options object:

var options = {
  formats: [
    'bold',
    ...
    'mark'
  ]...

And here the way to add a custom icon to the newly introduced tag:

var icons = Quill.import('ui/icons')

icons.mark = '<svg viewBox="0 0 8.3 8.1"><path d="..."/></svg>'

Thatā€™s all, not much I know.