Skip to content

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

Open
michaelchadwick wants to merge 2 commits into
slab: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 2 commits into
slab: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.

@0xLeif

0xLeif commented Jul 23, 2026

Copy link
Copy Markdown

Review: Small, well-scoped change — registers the existing redo.svg/undo.svg assets under the redo/undo keys in ui/icons.ts, matching the handler keys the toolbar already dispatches. Additive and backwards compatible. Nit: a small unit test asserting the default icon set includes undo/redo would be nice; also worth documenting that the buttons still require the history module.

@michaelchadwick

Copy link
Copy Markdown
Author

@0xLeif Thanks for the vote of confidence! I've added a unit test to check both for key length and key names in the Icons object. Not sure where to add more documentation, as the undo/redo buttons are already mentioned in the History module documentation.

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.

2 participants