js-draw 1.4.1 → 1.6.0

package/dist/mjs/SVGLoader.mjs

@@ -18,6 +18,12 @@ export const svgLoaderAttributeContainerID = 'svgContainerID';
 // If present in the exported SVG's class list, the image will be
 // autoresized when components are added/removed.
 export const svgLoaderAutoresizeClassName = 'js-draw--autoresize';
+// @internal
+export var SVGLoaderLoadMethod;
+(function (SVGLoaderLoadMethod) {
+    SVGLoaderLoadMethod["IFrame"] = "iframe";
+    SVGLoaderLoadMethod["DOMParser"] = "domparser";
+})(SVGLoaderLoadMethod || (SVGLoaderLoadMethod = {}));
 const supportedStrokeFillStyleAttrs = ['stroke', 'fill', 'stroke-width'];
 // Handles loading images from SVG.
 export default class SVGLoader {
@@ -39,7 +45,7 @@ export default class SVGLoader {
         let fill = Color4.transparent;
         let stroke;
         // If possible, use computedStyles (allows property inheritance).
-        const fillAttribute = node.getAttribute('fill') ?? computedStyles?.fill ?? node.style.fill;
+        const fillAttribute = node.getAttribute('fill') ?? computedStyles?.fill ?? node.style?.fill;
         if (fillAttribute) {
             try {
                 fill = Color4.fromString(fillAttribute);
@@ -48,8 +54,8 @@ export default class SVGLoader {
                 console.error('Unknown fill color,', fillAttribute);
             }
         }
-        const strokeAttribute = node.getAttribute('stroke') ?? computedStyles?.stroke ?? node.style.stroke;
-        const strokeWidthAttr = node.getAttribute('stroke-width') ?? computedStyles?.strokeWidth ?? node.style.strokeWidth;
+        const strokeAttribute = node.getAttribute('stroke') ?? computedStyles?.stroke ?? node.style?.stroke ?? '';
+        const strokeWidthAttr = node.getAttribute('stroke-width') ?? computedStyles?.strokeWidth ?? node.style?.strokeWidth ?? '';
         if (strokeAttribute && strokeWidthAttr) {
             try {
                 let width = parseFloat(strokeWidthAttr ?? '1');
@@ -208,6 +214,16 @@ export default class SVGLoader {
             await this.addUnknownNode(node);
         }
     }
+    getComputedStyle(element) {
+        try {
+            // getComputedStyle may fail in jsdom when using a DOMParser.
+            return window.getComputedStyle(element);
+        }
+        catch (error) {
+            console.warn('Error computing style', error);
+            return undefined;
+        }
+    }
     // If given, 'supportedAttrs' will have x, y, etc. attributes that were used in computing the transform added to it,
     // to prevent storing duplicate transform information when saving the component.
     getTransform(elem, supportedAttrs, computedStyles) {
@@ -225,10 +241,10 @@ export default class SVGLoader {
             }
         }
         if (!transform) {
-            computedStyles ??= window.getComputedStyle(elem);
-            let transformProperty = computedStyles.transform;
-            if (transformProperty === '' || transformProperty === 'none') {
-                transformProperty = elem.style.transform || 'none';
+            computedStyles ??= this.getComputedStyle(elem);
+            let transformProperty = computedStyles?.transform;
+            if (!transformProperty || transformProperty === 'none') {
+                transformProperty = elem.style?.transform || 'none';
             }
             // Prefer the actual .style.transform
             // to the computed stylesheet -- in some browsers, the computedStyles version
@@ -278,18 +294,18 @@ export default class SVGLoader {
             contentList.push('');
         }
         // Compute styles.
-        const computedStyles = window.getComputedStyle(elem);
+        const computedStyles = this.getComputedStyle(elem);
         const fontSizeExp = /^([-0-9.e]+)px/i;
         // In some environments, computedStyles.fontSize can be increased by the system.
         // Thus, to prevent text from growing on load/save, prefer .style.fontSize.
-        let fontSizeMatch = fontSizeExp.exec(elem.style.fontSize);
+        let fontSizeMatch = fontSizeExp.exec(elem.style?.fontSize ?? '');
         if (!fontSizeMatch && elem.tagName.toLowerCase() === 'tspan' && elem.parentElement) {
             // Try to inherit the font size of the parent text element.
-            fontSizeMatch = fontSizeExp.exec(elem.parentElement.style.fontSize);
+            fontSizeMatch = fontSizeExp.exec(elem.parentElement.style?.fontSize ?? '');
         }
         // If we still couldn't find a font size, try to use computedStyles (which can be
         // wrong).
-        if (!fontSizeMatch) {
+        if (!fontSizeMatch && computedStyles) {
             fontSizeMatch = fontSizeExp.exec(computedStyles.fontSize);
         }
         const supportedStyleAttrs = [
@@ -304,9 +320,9 @@ export default class SVGLoader {
         }
         const style = {
             size: fontSize,
-            fontFamily: computedStyles.fontFamily || elem.style.fontFamily || 'sans-serif',
-            fontWeight: computedStyles.fontWeight || elem.style.fontWeight || undefined,
-            fontStyle: computedStyles.fontStyle || elem.style.fontStyle || undefined,
+            fontFamily: computedStyles?.fontFamily || elem.style?.fontFamily || 'sans-serif',
+            fontWeight: computedStyles?.fontWeight || elem.style?.fontWeight || undefined,
+            fontStyle: computedStyles?.fontStyle || elem.style?.fontStyle || undefined,
             renderingStyle: this.getStyle(elem, computedStyles),
         };
         const supportedAttrs = [];
@@ -513,43 +529,74 @@ export default class SVGLoader {
      * @param options - if `true` or `false`, treated as the `sanitize` option -- don't store unknown attributes.
      */
     static fromString(text, options = false) {
-        const sandbox = document.createElement('iframe');
-        sandbox.src = 'about:blank';
-        sandbox.setAttribute('sandbox', 'allow-same-origin');
-        sandbox.setAttribute('csp', 'default-src \'about:blank\'');
-        sandbox.style.display = 'none';
-        // Required to access the frame's DOM. See https://stackoverflow.com/a/17777943/17055750
-        document.body.appendChild(sandbox);
-        if (!sandbox.hasAttribute('sandbox')) {
-            sandbox.remove();
-            throw new Error('SVG loading iframe is not sandboxed.');
-        }
-        const sandboxDoc = sandbox.contentWindow?.document ?? sandbox.contentDocument;
-        if (sandboxDoc == null)
-            throw new Error('Unable to open a sandboxed iframe!');
-        sandboxDoc.open();
-        sandboxDoc.write(`
-			<!DOCTYPE html>
-			<html>
-				<head>
-					<title>SVG Loading Sandbox</title>
-					<meta name='viewport' conent='width=device-width,initial-scale=1.0'/>
-					<meta charset='utf-8'/>
-				</head>
-				<body style='font-size: 12px;'>
-					<script>
-						console.error('JavaScript should not be able to run here!');
-						throw new Error(
-							'The SVG sandbox is broken! Please double-check the sandboxing setting.'
-						);
-					</script>
-				</body>
-			</html>
-		`);
-        sandboxDoc.close();
-        const svgElem = sandboxDoc.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svgElem.innerHTML = text;
-        sandboxDoc.body.appendChild(svgElem);
+        const domParserLoad = typeof options !== 'boolean' && options?.loadMethod === 'domparser';
+        const { svgElem, cleanUp } = (() => {
+            // If the user requested an iframe load (the default) try to load with an iframe.
+            // There are some cases (e.g. in a sandboxed iframe) where this doesn't work.
+            if (!domParserLoad) {
+                try {
+                    const sandbox = document.createElement('iframe');
+                    sandbox.src = 'about:blank';
+                    // allow-same-origin is necessary for how we interact with the sandbox. As such,
+                    // DO NOT ENABLE ALLOW-SCRIPTS.
+                    sandbox.setAttribute('sandbox', 'allow-same-origin');
+                    sandbox.setAttribute('csp', 'default-src \'about:blank\'');
+                    sandbox.style.display = 'none';
+                    // Required to access the frame's DOM. See https://stackoverflow.com/a/17777943/17055750
+                    document.body.appendChild(sandbox);
+                    if (!sandbox.hasAttribute('sandbox')) {
+                        sandbox.remove();
+                        throw new Error('SVG loading iframe is not sandboxed.');
+                    }
+                    const sandboxDoc = sandbox.contentWindow?.document ?? sandbox.contentDocument;
+                    if (sandboxDoc == null)
+                        throw new Error('Unable to open a sandboxed iframe!');
+                    sandboxDoc.open();
+                    sandboxDoc.write(`
+						<!DOCTYPE html>
+						<html>
+							<head>
+								<title>SVG Loading Sandbox</title>
+								<meta name='viewport' conent='width=device-width,initial-scale=1.0'/>
+								<meta charset='utf-8'/>
+							</head>
+							<body style='font-size: 12px;'>
+								<script>
+									console.error('JavaScript should not be able to run here!');
+									throw new Error(
+										'The SVG sandbox is broken! Please double-check the sandboxing setting.'
+									);
+								</script>
+							</body>
+						</html>
+					`);
+                    sandboxDoc.close();
+                    const svgElem = sandboxDoc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                    svgElem.innerHTML = text;
+                    sandboxDoc.body.appendChild(svgElem);
+                    const cleanUp = () => {
+                        svgElem.remove();
+                        sandbox.remove();
+                    };
+                    return { svgElem, cleanUp };
+                }
+                catch (error) {
+                    console.warn('Failed loading SVG via a sandboxed iframe. Some styles may not be loaded correctly. Error: ', error);
+                }
+            }
+            // Fall back to creating a DOMParser
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(`<svg xmlns="http://www.w3.org/2000/svg">${text}</svg>`, 'text/html');
+            const svgElem = doc.querySelector('svg');
+            // Handle error messages reported while parsing. See
+            // https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML
+            const errorReportNode = doc.querySelector('parsererror');
+            if (errorReportNode) {
+                throw new Error('Parse error: ' + errorReportNode.textContent);
+            }
+            const cleanUp = () => { };
+            return { svgElem, cleanUp };
+        })();
         // Handle options
         let sanitize;
         let disableUnknownObjectWarnings;
@@ -561,10 +608,7 @@ export default class SVGLoader {
             sanitize = options.sanitize ?? false;
             disableUnknownObjectWarnings = options.disableUnknownObjectWarnings ?? false;
         }
-        return new SVGLoader(svgElem, () => {
-            svgElem.remove();
-            sandbox.remove();
-        }, {
+        return new SVGLoader(svgElem, cleanUp, {
             sanitize, disableUnknownObjectWarnings,
         });
     }

package/dist/mjs/commands/Erase.d.ts

@@ -30,5 +30,11 @@ export default class Erase extends SerializableCommand {
     unapply(editor: Editor): void;
     onDrop(editor: Editor): void;
     description(_editor: Editor, localizationTable: EditorLocalization): string;
-    protected serializeToJSON(): string[];
+    protected serializeToJSON(): {
+        name: string;
+        zIndex: number;
+        id: string;
+        loadSaveData: import("../components/AbstractComponent").LoadSaveDataTable;
+        data: string | number | any[] | Record<string, any>;
+    }[];
 }

package/dist/mjs/commands/Erase.mjs

@@ -1,3 +1,4 @@
+import  AbstractComponent  from '../components/AbstractComponent.mjs';
 import  describeComponentList  from '../components/util/describeComponentList.mjs';
 import  EditorImage  from '../image/EditorImage.mjs';
 import  SerializableCommand  from './SerializableCommand.mjs';
@@ -63,15 +64,23 @@ class Erase extends SerializableCommand {
         return localizationTable.eraseAction(description, this.toRemove.length);
     }
     serializeToJSON() {
-        const elemIds = this.toRemove.map(elem => elem.getId());
-        return elemIds;
+        // If applied, the elements can't be fetched from the image because they're
+        // erased. Serialize and return the elements themselves.
+        const elems = this.toRemove.map(elem => elem.serialize());
+        return elems;
     }
 }
 (() => {
     SerializableCommand.register('erase', (json, editor) => {
+        if (!Array.isArray(json)) {
+            throw new Error('seralized erase data must be an array');
+        }
         const elems = json
-            .map((elemId) => editor.image.lookupElement(elemId))
-            .filter((elem) => elem !== null);
+            .map((elemData) => {
+            const componentId = typeof elemData === 'string' ? elemData : `${elemData.id}`;
+            const component = editor.image.lookupElement(componentId) ?? AbstractComponent.deserialize(elemData);
+            return component;
+        });
         return new Erase(elems);
     });
 })();

package/dist/mjs/commands/invertCommand.mjs

@@ -13,7 +13,7 @@ const invertCommand = (command) => {
                 command.unapply(editor);
             }
             unapply(editor) {
-                command.unapply(editor);
+                command.apply(editor);
             }
             onDrop(editor) {
                 command.onDrop(editor);

package/dist/mjs/components/Stroke.d.ts

@@ -39,7 +39,7 @@ export default class Stroke extends AbstractComponent implements RestyleableComp
      *
      * const stroke = new Stroke([
      *     // Fill with red
-     *     path.toRenderable({ fill: Color4.red })
+     *     pathToRenderable({ fill: Color4.red })
      * ]);
      * ```
      */

package/dist/mjs/components/Stroke.mjs

@@ -32,7 +32,7 @@ export default class Stroke extends AbstractComponent {
      *
      * const stroke = new Stroke([
      *     // Fill with red
-     *     path.toRenderable({ fill: Color4.red })
+     *     pathToRenderable({ fill: Color4.red })
      * ]);
      * ```
      */

package/dist/mjs/image/EditorImage.mjs

@@ -28,7 +28,7 @@ class EditorImage {
         this.settingExportRect = false;
         this.root = new RootImageNode();
         this.background = new RootImageNode();
-        this.componentsById = {};
+        this.componentsById = Object.create(null);
         this.notifier = new EventDispatcher();
         this.importExportViewport = new Viewport(() => {
             this.onExportViewportChanged();

package/dist/mjs/toolbar/AbstractToolbar.d.ts

@@ -124,24 +124,30 @@ export default abstract class AbstractToolbar {
      * toolbar.addDefaults();
      * toolbar.addSaveButton(() => alert('save clicked!'));
      * ```
+     *
+     * `labelOverride` can optionally be used to change the `label` or `icon` of the button.
      */
-    addSaveButton(saveCallback: () => void): BaseWidget;
+    addSaveButton(saveCallback: () => void, labelOverride?: Partial<ActionButtonIcon>): BaseWidget;
     /**
      * Adds an "Exit" button that, when clicked, calls `exitCallback`.
      *
-     * **Note**: This is equivalent to
+     * **Note**: This is roughly equivalent to
      * ```ts
      * toolbar.addTaggedActionButton([ ToolbarWidgetTag.Exit ], {
      *   label: this.editor.localization.exit,
      *   icon: this.editor.icons.makeCloseIcon(),
+     *
+     *   // labelOverride can be used to override label or icon.
+     *   ...labelOverride,
      * }, () => {
      *   exitCallback();
      * });
      * ```
+     * with some additional configuration.
      *
      * @final
      */
-    addExitButton(exitCallback: () => void): BaseWidget;
+    addExitButton(exitCallback: () => void, labelOverride?: Partial<ActionButtonIcon>): BaseWidget;
     /**
      * Adds undo and redo buttons that trigger the editor's built-in undo and redo
      * functionality.
@@ -156,7 +162,10 @@ export default abstract class AbstractToolbar {
      * Adds both the default tool widgets and action buttons.
      */
     abstract addDefaults(): void;
-    /** Remove this toolbar from its container and clean up listeners. */
+    /**
+     * Remove this toolbar from its container and clean up listeners.
+     * This should only be called **once** for a given toolbar.
+     */
     remove(): void;
     /**
      * Removes `listener` when {@link remove} is called.

package/dist/mjs/toolbar/AbstractToolbar.mjs

@@ -287,9 +287,11 @@ class AbstractToolbar {
      * toolbar.addDefaults();
      * toolbar.addSaveButton(() => alert('save clicked!'));
      * ```
+     *
+     * `labelOverride` can optionally be used to change the `label` or `icon` of the button.
      */
-    addSaveButton(saveCallback) {
-        const widget = new SaveActionWidget(this.editor, this.localizationTable, saveCallback);
+    addSaveButton(saveCallback, labelOverride = {}) {
+        const widget = new SaveActionWidget(this.editor, this.localizationTable, saveCallback, labelOverride);
         widget.setTags([ToolbarWidgetTag.Save]);
         this.addWidget(widget);
         return widget;
@@ -297,22 +299,27 @@ class AbstractToolbar {
     /**
      * Adds an "Exit" button that, when clicked, calls `exitCallback`.
      *
-     * **Note**: This is equivalent to
+     * **Note**: This is roughly equivalent to
      * ```ts
      * toolbar.addTaggedActionButton([ ToolbarWidgetTag.Exit ], {
      *   label: this.editor.localization.exit,
      *   icon: this.editor.icons.makeCloseIcon(),
+     *
+     *   // labelOverride can be used to override label or icon.
+     *   ...labelOverride,
      * }, () => {
      *   exitCallback();
      * });
      * ```
+     * with some additional configuration.
      *
      * @final
      */
-    addExitButton(exitCallback) {
+    addExitButton(exitCallback, labelOverride = {}) {
         return this.addTaggedActionButton([ToolbarWidgetTag.Exit], {
             label: this.editor.localization.exit,
             icon: this.editor.icons.makeCloseIcon(),
+            ...labelOverride,
         }, () => {
             exitCallback();
         }, {
@@ -392,7 +399,10 @@ class AbstractToolbar {
     addDefaultActionButtons() {
         this.addUndoRedoButtons();
     }
-    /** Remove this toolbar from its container and clean up listeners. */
+    /**
+     * Remove this toolbar from its container and clean up listeners.
+     * This should only be called **once** for a given toolbar.
+     */
     remove() {
         this.closeColorPickerOverlay?.remove();
         for (const listener of __classPrivateFieldGet(this, _AbstractToolbar_listeners, "f")) {
@@ -400,6 +410,9 @@ class AbstractToolbar {
         }
         __classPrivateFieldSet(this, _AbstractToolbar_listeners, [], "f");
         this.onRemove();
+        for (const widget of __classPrivateFieldGet(this, _AbstractToolbar_widgetList, "f")) {
+            widget.remove();
+        }
     }
     /**
      * Removes `listener` when {@link remove} is called.

package/dist/mjs/toolbar/AbstractToolbar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/toolbar/EdgeToolbar.mjs

@@ -228,11 +228,11 @@ export default class EdgeToolbar extends AbstractToolbar {
         widget.removeCSSClassFromContainer('label-right');
         if (tags.includes(ToolbarWidgetTag.Save)) {
             widget.addCSSClassToContainer('label-inline');
-            widget.addCSSClassToContainer('label-right');
+            widget.addCSSClassToContainer('label-left');
         }
         if (tags.includes(ToolbarWidgetTag.Exit)) {
             widget.addCSSClassToContainer('label-inline');
-            widget.addCSSClassToContainer('label-left');
+            widget.addCSSClassToContainer('label-right');
         }
     }
     addWidgetInternal(widget) {

package/dist/mjs/toolbar/widgets/BaseToolWidget.mjs

@@ -1,4 +1,3 @@
-import  { EditorEventType }  from '../../types.mjs';
 import  BaseWidget  from './BaseWidget.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
 const isToolWidgetFocused = () => {
@@ -9,11 +8,8 @@ export default class BaseToolWidget extends BaseWidget {
     constructor(editor, targetTool, id, localizationTable) {
         super(editor, id, localizationTable);
         this.targetTool = targetTool;
-        editor.notifier.on(EditorEventType.ToolEnabled, toolEvt => {
-            if (toolEvt.kind !== EditorEventType.ToolEnabled) {
-                throw new Error('Incorrect event type! (Expected ToolEnabled)');
-            }
-            if (toolEvt.tool === targetTool) {
+        this.targetTool.enabledValue().onUpdateAndNow(enabled => {
+            if (enabled) {
                 this.setSelected(true);
                 // Transfer focus to the current button, only if another toolbar button is
                 // focused.
@@ -23,12 +19,7 @@ export default class BaseToolWidget extends BaseWidget {
                     this.focus();
                 }
             }
-        });
-        editor.notifier.on(EditorEventType.ToolDisabled, toolEvt => {
-            if (toolEvt.kind !== EditorEventType.ToolDisabled) {
-                throw new Error('Incorrect event type! (Expected ToolDisabled)');
-            }
-            if (toolEvt.tool === targetTool) {
+            else {
                 this.setSelected(false);
                 this.setDropdownVisible(false);
             }
@@ -52,7 +43,7 @@ export default class BaseToolWidget extends BaseWidget {
         }
     }
     onKeyPress(event) {
-        if (this.isSelected() && event.key === ' ' && this.hasDropdown) {
+        if (this.isSelected() && event.code === 'Space' && this.hasDropdown) {
             this.handleClick();
             return true;
         }

package/dist/mjs/toolbar/widgets/BaseToolWidget.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/toolbar/widgets/BaseWidget.d.ts

@@ -81,13 +81,17 @@ export default abstract class BaseWidget {
      * @internal
      */
     addTo(parent: HTMLElement): HTMLElement;
+    /**
+     * Remove this. This allows the widget to be added to a toolbar again
+     * in the future using {@link addTo}.
+     */
+    remove(): void;
     focus(): void;
     /**
      * @internal
      */
     addCSSClassToContainer(className: string): void;
     removeCSSClassFromContainer(className: string): void;
-    remove(): void;
     protected updateIcon(): void;
     setDisabled(disabled: boolean): void;
     setSelected(selected: boolean): void;

package/dist/mjs/toolbar/widgets/BaseWidget.mjs

@@ -9,7 +9,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _BaseWidget_hasDropdown, _BaseWidget_disabledDueToReadOnlyEditor, _BaseWidget_tags, _BaseWidget_readOnlyListener;
+var _BaseWidget_instances, _BaseWidget_hasDropdown, _BaseWidget_disabledDueToReadOnlyEditor, _BaseWidget_tags, _BaseWidget_removeEditorListeners, _BaseWidget_addEditorListeners;
 import  ToolbarShortcutHandler  from '../../tools/ToolbarShortcutHandler.mjs';
 import  { keyPressEventFromHTMLEvent, keyUpEventFromHTMLEvent }  from '../../inputEvents.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
@@ -26,6 +26,7 @@ export var ToolbarWidgetTag;
 })(ToolbarWidgetTag || (ToolbarWidgetTag = {}));
 class BaseWidget {
     constructor(editor, id, localizationTable) {
+        _BaseWidget_instances.add(this);
         this.editor = editor;
         this.id = id;
         this.dropdown = null;
@@ -38,8 +39,7 @@ class BaseWidget {
         // Maps subWidget IDs to subWidgets.
         this.subWidgets = {};
         this.toplevel = true;
-        // Listens for changes in whether the editor is read-only
-        _BaseWidget_readOnlyListener.set(this, null);
+        _BaseWidget_removeEditorListeners.set(this, null);
         this.localizationTable = localizationTable ?? editor.localization;
         // Default layout manager
         const defaultLayoutManager = new DropdownLayoutManager((text) => this.editor.announceForAccessibility(text), this.localizationTable);
@@ -60,12 +60,6 @@ class BaseWidget {
         this.button.oncontextmenu = event => {
             event.preventDefault();
         };
-        const toolbarShortcutHandlers = this.editor.toolController.getMatchingTools(ToolbarShortcutHandler);
-        // If the onKeyPress function has been extended and the editor is configured to send keypress events to
-        // toolbar widgets,
-        if (toolbarShortcutHandlers.length > 0 && this.onKeyPress !== BaseWidget.prototype.onKeyPress) {
-            toolbarShortcutHandlers[0].registerListener(event => this.onKeyPress(event));
-        }
     }
     /**
      * Should return a constant true or false value. If true (the default),
@@ -268,22 +262,18 @@ class BaseWidget {
         if (this.container.parentElement) {
             this.container.remove();
         }
-        __classPrivateFieldSet(this, _BaseWidget_readOnlyListener, this.editor.isReadOnlyReactiveValue().onUpdateAndNow(readOnly => {
-            if (readOnly && this.shouldAutoDisableInReadOnlyEditor() && !this.disabled) {
-                this.setDisabled(true);
-                __classPrivateFieldSet(this, _BaseWidget_disabledDueToReadOnlyEditor, true, "f");
-                if (__classPrivateFieldGet(this, _BaseWidget_hasDropdown, "f")) {
-                    this.dropdown?.requestHide();
-                }
-            }
-            else if (!readOnly && __classPrivateFieldGet(this, _BaseWidget_disabledDueToReadOnlyEditor, "f")) {
-                __classPrivateFieldSet(this, _BaseWidget_disabledDueToReadOnlyEditor, false, "f");
-                this.setDisabled(false);
-            }
-        }), "f");
+        __classPrivateFieldGet(this, _BaseWidget_instances, "m", _BaseWidget_addEditorListeners).call(this);
         parent.appendChild(this.container);
         return this.container;
     }
+    /**
+     * Remove this. This allows the widget to be added to a toolbar again
+     * in the future using {@link addTo}.
+     */
+    remove() {
+        this.container.remove();
+        __classPrivateFieldGet(this, _BaseWidget_removeEditorListeners, "f")?.call(this);
+    }
     focus() {
         this.button.focus();
     }
@@ -296,11 +286,6 @@ class BaseWidget {
     removeCSSClassFromContainer(className) {
         this.container.classList.remove(className);
     }
-    remove() {
-        this.container.remove();
-        __classPrivateFieldGet(this, _BaseWidget_readOnlyListener, "f")?.remove();
-        __classPrivateFieldSet(this, _BaseWidget_readOnlyListener, null, "f");
-    }
     updateIcon() {
         let newIcon = this.createIcon();
         if (!newIcon) {
@@ -437,5 +422,37 @@ class BaseWidget {
         }
     }
 }
-_BaseWidget_hasDropdown = new WeakMap(), _BaseWidget_disabledDueToReadOnlyEditor = new WeakMap(), _BaseWidget_tags = new WeakMap(), _BaseWidget_readOnlyListener = new WeakMap();
+_BaseWidget_hasDropdown = new WeakMap(), _BaseWidget_disabledDueToReadOnlyEditor = new WeakMap(), _BaseWidget_tags = new WeakMap(), _BaseWidget_removeEditorListeners = new WeakMap(), _BaseWidget_instances = new WeakSet(), _BaseWidget_addEditorListeners = function _BaseWidget_addEditorListeners() {
+    __classPrivateFieldGet(this, _BaseWidget_removeEditorListeners, "f")?.call(this);
+    const toolbarShortcutHandlers = this.editor.toolController.getMatchingTools(ToolbarShortcutHandler);
+    let removeKeyPressListener = null;
+    // If the onKeyPress function has been extended and the editor is configured to send keypress events to
+    // toolbar widgets,
+    if (toolbarShortcutHandlers.length > 0 && this.onKeyPress !== BaseWidget.prototype.onKeyPress) {
+        const keyPressListener = (event) => this.onKeyPress(event);
+        const handler = toolbarShortcutHandlers[0];
+        handler.registerListener(keyPressListener);
+        removeKeyPressListener = () => {
+            handler.removeListener(keyPressListener);
+        };
+    }
+    const readOnlyListener = this.editor.isReadOnlyReactiveValue().onUpdateAndNow(readOnly => {
+        if (readOnly && this.shouldAutoDisableInReadOnlyEditor() && !this.disabled) {
+            this.setDisabled(true);
+            __classPrivateFieldSet(this, _BaseWidget_disabledDueToReadOnlyEditor, true, "f");
+            if (__classPrivateFieldGet(this, _BaseWidget_hasDropdown, "f")) {
+                this.dropdown?.requestHide();
+            }
+        }
+        else if (!readOnly && __classPrivateFieldGet(this, _BaseWidget_disabledDueToReadOnlyEditor, "f")) {
+            __classPrivateFieldSet(this, _BaseWidget_disabledDueToReadOnlyEditor, false, "f");
+            this.setDisabled(false);
+        }
+    });
+    __classPrivateFieldSet(this, _BaseWidget_removeEditorListeners, () => {
+        readOnlyListener.remove();
+        removeKeyPressListener?.();
+        __classPrivateFieldSet(this, _BaseWidget_removeEditorListeners, null, "f");
+    }, "f");
+};
 export default BaseWidget;

package/dist/mjs/toolbar/widgets/BaseWidget.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/toolbar/widgets/SaveActionWidget.d.ts

@@ -2,8 +2,9 @@ import { KeyPressEvent } from '../../inputEvents';
 import Editor from '../../Editor';
 import { ToolbarLocalization } from '../localization';
 import ActionButtonWidget from './ActionButtonWidget';
+import { ActionButtonIcon } from '../types';
 declare class SaveActionWidget extends ActionButtonWidget {
-    constructor(editor: Editor, localization: ToolbarLocalization, saveCallback: () => void);
+    constructor(editor: Editor, localization: ToolbarLocalization, saveCallback: () => void, labelOverride?: Partial<ActionButtonIcon>);
     protected shouldAutoDisableInReadOnlyEditor(): boolean;
     protected onKeyPress(event: KeyPressEvent): boolean;
     mustBeInToplevelMenu(): boolean;