Skip to content

import redo/undo icon files and add to default export#4709

Open
michaelchadwick wants to merge 1 commit intoslab:mainfrom
michaelchadwick:add-redo-undo-icons-to-default-set
Open

import redo/undo icon files and add to default export#4709
michaelchadwick wants to merge 1 commit intoslab:mainfrom
michaelchadwick:add-redo-undo-icons-to-default-set

Conversation

@michaelchadwick
Copy link
Copy Markdown

Description
This adds the existing Redo and Undo icon svg templates to the default set of available toolbar icons.

Why Change?
This feature belongs in Quill core because of three things:

  1. The assets are already available alongside other included icons in the default set.
  2. The function hooks for Redo and Undo in the History API are already included alongside the other default Toolbar icons' function hooks.
  3. Redo and Undo are foundational functions to using a text editor and can be found in default toolbars for full word processing applications like Microsoft Word and Google Docs, and other embedded text editors like TinyMCE and CKEditor.

How I'm Using Quill
We are currently attempting to convert from using the paid-for, closed-source Froala to the free, open-source Quill. We will use this embedded text editor in many places in our app where users need to enter long-form data.

Use Case
Our app uses EmberJS, and in order to offer a Redo/Undo button combo in the toolbar, and make sure we avoid a hard-coded practice of copying and pasting the svg icons from our node_modules directory (which would make any future updates to Quill more difficult), we are "hacking" in the relevant svg templates into QuillEditor.import('ui/icons'):

ember-cli-build.js

...
module: {
  rules: [
    {
      test: /\.svg$/,
      type: 'asset/source', // This will import SVG files as text
    },
  ],
},
...
load-quill-editor.js

export async function loadQuillEditor() {
  const { default: QuillEditor } = await import('quill');
  const undoIcon = await import('quill/assets/icons/undo.svg');
  const redoIcon = await import('quill/assets/icons/redo.svg');

  // Quill doesn't include redo/undo icons by default,
  // so have to include from `quill/assets/icons/[undo|redo].svg`
  // https://github.com/slab/quill/issues/885#issuecomment-609384079
  const icons = QuillEditor.import('ui/icons');
  icons['undo'] = undoIcon.default;
  icons['redo'] = redoIcon.default;

  return {
    QuillEditor,
  };
}

This works, but feels unnecessary when the icons are already there and could just be added to the default set.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant