Creating a Quill.js theme

Question

How do we create new themes in Quill.js? Do we have to extend an existing one?

I'm only looking to update the look, not the functionality so theoretically I could just add a bunch of overrides for the default Snow theme but that's not ideal.

So - how and where do we go about creating and registering a new Quill.js theme?

Answer 1

I'm only looking to update the look, not the functionality so theoretically I could just add a bunch of overrides for the default Snow theme but that's not ideal.

I'm not sure re-defining all classes (there's plenty of them!) is a better solution rather than overriding the one you want.

Defining and registering a new theme won't magically solve your problem. A new theme would allow you to modify deeper the toolbar template, buttons icons and some behaviours.

BUT that being said, If you really want to create your custom theme, I would strongly suggest to extend snow or bubble existing ones, this is pretty straightforward.

(NB: at Wisembly Jam we do both: we created a new Theme to handle Bubble theme icons and replace them by ours, and we heavily override the desired classes)

NewTheme.js

// thx SO https://stackoverflow.com/questions/44625868/es6-babel-class-constructor-cannot-be-invoked-without-new
import BubbleTheme, { BubbleTooltip } from 'quilljs/themes/bubble'
import icons from 'quilljs/ui/icons'

class NewTheme extends BubbleTheme {
  extendToolbar (toolbar) {
    this.tooltip = new LoopTooltip(this.quill, this.options.bounds)
    this.tooltip.root.appendChild(toolbar.container)

    // you could override Quill's icons here with yours if you want
    this.buildButtons([].slice.call(toolbar.container.querySelectorAll('button')), icons)
    this.buildPickers([].slice.call(toolbar.container.querySelectorAll('select')), icons)
  }
}

class NewThemeTooltip extends BubbleTooltip {
}

NewThemeTooltip.TEMPLATE = [
  '<a class="ql-close"></a>',
  '<div class="ql-tooltip-editor">',
  '<input type="text" data-formula="e=mc^2" data-link="https://yoururl.com" data-video="Embed URL">',
  '</div>',
  '<span class="ql-tooltip-arrow"></span>'
].join('')

export { NewThemeTooltip, NewTheme as default }

App.js

import Quill from 'quill'
import NewTheme from './themes/NewTheme'
Quill.register('themes/newTheme', NewTheme, true)

const quill = new Quill(editorNode,{theme: 'newTheme'})