slab / quill

Quill is a modern WYSIWYG editor built for compatibility and extensibility
https://quilljs.com
BSD 3-Clause "New" or "Revised" License
43.97k stars 3.41k forks source link

Add the ability to customise the controls of custom toolbar containers without needing to write the HTML manually #1226

Closed fuzzyfox closed 7 years ago

fuzzyfox commented 7 years ago

It would be great to be able to use methods already inside the toolbar module to create the DOM for the toolbar even when using a custom container for it.

Right now when you create a toolbar, if you want to use a custom container for it you loose the default controls create by the editors theme when a custom container is not used. This means that to simply move the toolbar you must also manually create the controls too.

I have a use case right now where I'm creating a Vue.js component for quill that will be reused throughout the wider application I'm working on, in some cases we just want the default configuration, in others we want to move the toolbar (with the same default controls). To do this now, we must manually create the controls in each instance we want to move the toolbar, however with a few minimal changes this could be negated. (link to my WIP PR included)

My proposal is to add an additional option to the toolbar module (controls) which is used to set the controls of the toolbar separate from the toolbars container, while maintaining the support for the current shorthand, and backwards compatible support for existing themes that do not recognize the new property (backwards in the sense of maintaining the current behavior)

Steps for Reproduction

  1. Create a new Quill instance without a custom container for the toolbar, and get a toolbar with default controls set by the theme.
  2. Create a second instance with an empty custom container get an empty toolbar.

Expected behavior:

  1. Create a new Quill instance without a custom container (using any of the currently accepted configurations), get a toolbar with the default controls set by the theme.
  2. Create a new Quill instance with a custom container that has got children in the DOM, keep the current behavior for a toolbar with custom container + custom controls.
  3. [new] Create a new Quill instance with a custom container that has not got children in the DOM, get a toolbar with custom container + default controls from the theme.

Actual behavior: Expected 1 + 2

Platforms: All

New configuration object for toolbar module:

{
    container: HTMLElement | Array | String,
    controls: Array,
    handlers: Object
}
jhchen commented 7 years ago

There does not seem to be much community support for this and in my view expands Quill beyond its charter. Quill is not meant to be a toolbar HTML generator and already has very reasonable options for customizing its toolbar. Now the code happens to be conveniently written but I would rather not entangle them with the outside world given Semantic Versioning.