js-draw 1.24.2 → 1.26.0

package/dist/cjs/tools/SelectionTool/Selection.js

@@ -110,13 +110,13 @@ class Selection {
             side: math_1.Vec2.of(0.5, 0),
             icon: this.editor.icons.makeRotateIcon(),
         }, this, this.editor.viewport, (startPoint) => this.transformers.rotate.onDragStart(startPoint), (currentPoint) => this.transformers.rotate.onDragUpdate(currentPoint), () => this.transformers.rotate.onDragEnd());
-        const menuToggleButton = new SelectionMenuShortcut_1.default(this, this.editor.viewport, showContextMenu, this.editor.localization);
+        const menuToggleButton = new SelectionMenuShortcut_1.default(this, this.editor.viewport, this.editor.icons.makeOverflowIcon(), showContextMenu, this.editor.localization);
         this.childwidgets = [
+            menuToggleButton,
             resizeBothHandle,
             ...resizeHorizontalHandles,
             resizeVerticalHandle,
             rotationHandle,
-            menuToggleButton,
         ];
         for (const widget of this.childwidgets) {
             widget.addTo(this.backgroundElem);
@@ -492,6 +492,7 @@ class Selection {
         if (!wasTransforming) {
             this.runSelectionDuplicatedAnimation();
         }
+        let command;
         if (wasTransforming) {
             // Don't update the selection's focus when redoing/undoing
             const selectionToUpdate = null;
@@ -501,16 +502,20 @@ class Selection {
             await tmpApplyCommand.apply(this.editor);
             // Show items again
             this.addRemoveSelectionFromImage(true);
-        }
-        const duplicateCommand = new Duplicate_1.default(this.selectedElems);
-        if (wasTransforming) {
+            // With the transformation applied, create the duplicates
+            command = (0, uniteCommands_1.default)(this.selectedElems.map((elem) => {
+                return EditorImage_1.default.addElement(elem.clone());
+            }));
             // Move the selected objects back to the correct location.
             await tmpApplyCommand?.unapply(this.editor);
             this.addRemoveSelectionFromImage(false);
             this.previewTransformCmds();
             this.updateUI();
         }
-        return duplicateCommand;
+        else {
+            command = new Duplicate_1.default(this.selectedElems);
+        }
+        return command;
     }
     setHandlesVisible(showHandles) {
         if (!showHandles) {

package/dist/cjs/tools/SelectionTool/SelectionMenuShortcut.d.ts

@@ -11,10 +11,12 @@ type OnShowContextMenu = (anchor: Point2) => void;
 export default class SelectionMenuShortcut implements SelectionBoxChild {
     private readonly parent;
     private readonly viewport;
+    private readonly icon;
     private localization;
     private element;
+    private button;
     private onClick;
-    constructor(parent: Selection, viewport: Viewport, showContextMenu: OnShowContextMenu, localization: ToolLocalization);
+    constructor(parent: Selection, viewport: Viewport, icon: Element, showContextMenu: OnShowContextMenu, localization: ToolLocalization);
     private initUI;
     addTo(container: HTMLElement): void;
     remove(): void;

package/dist/cjs/tools/SelectionTool/SelectionMenuShortcut.js

@@ -4,15 +4,17 @@ const math_1 = require("@js-draw/math");
 const SelectionTool_1 = require("./SelectionTool");
 const verticalOffset = 40;
 class SelectionMenuShortcut {
-    constructor(parent, viewport, showContextMenu, localization) {
+    constructor(parent, viewport, icon, showContextMenu, localization) {
         this.parent = parent;
         this.viewport = viewport;
+        this.icon = icon;
         this.localization = localization;
         this.lastDragPointer = null;
         this.element = document.createElement('div');
         this.element.classList.add(`${SelectionTool_1.cssPrefix}handle`, `${SelectionTool_1.cssPrefix}selection-menu`);
         this.element.style.setProperty('--vertical-offset', `${verticalOffset}px`);
         this.onClick = () => {
+            this.button?.focus({ preventScroll: true });
             const anchor = this.getBBoxCanvasCoords().center;
             showContextMenu(anchor);
         };
@@ -21,16 +23,22 @@ class SelectionMenuShortcut {
     }
     initUI() {
         const button = document.createElement('button');
-        button.textContent = '...';
+        this.icon.classList.add('icon');
+        button.replaceChildren(this.icon);
         button.ariaLabel = this.localization.selectionMenu__show;
         button.title = button.ariaLabel;
+        this.button = button;
         // To prevent editor event handlers from conflicting with those for the button,
         // don't register a [click] handler. An onclick handler can be fired incorrectly
         // in this case (in Chrome) after onClick is fired in onDragEnd, leading to a double
         // on-click action.
         button.onkeydown = (event) => {
-            if (event.key === 'Enter')
+            if (event.key === 'Enter') {
+                // .preventDefault prevents [Enter] from activating the first item in the
+                // selection menu.
+                event.preventDefault();
                 this.onClick();
+            }
         };
         this.element.appendChild(button);
         // Update the bounding box of this in response to the new button.
@@ -60,7 +68,8 @@ class SelectionMenuShortcut {
         const contentCanvasSize = this.getElementScreenSize().times(toCanvasScale);
         const handleSizeCanvas = verticalOffset / this.viewport.getScaleFactor();
         const topLeft = math_1.Vec2.of(parentCanvasRect.x, parentCanvasRect.y - handleSizeCanvas);
-        return new math_1.Rect2(topLeft.x, topLeft.y, contentCanvasSize.x, contentCanvasSize.y);
+        const minSize = math_1.Vec2.of(48, 48).times(toCanvasScale);
+        return new math_1.Rect2(topLeft.x, topLeft.y, contentCanvasSize.x, contentCanvasSize.y).grownToSize(minSize);
     }
     updatePosition() {
         const bbox = this.getBBoxParentCoords();

package/dist/cjs/tools/TextTool.js

@@ -163,17 +163,24 @@ class TextTool extends BaseTool_1.default {
             }
         };
         this.textInputElem.onblur = () => {
+            const input = this.textInputElem;
             // Delay removing the input -- flushInput may be called within a blur()
             // event handler
             const removeInput = false;
-            const input = this.textInputElem;
             this.flushInput(removeInput);
             this.textInputElem = null;
+            if (input) {
+                input.classList.add('-hiding');
+            }
             setTimeout(() => {
                 input?.remove();
             }, 0);
         };
         this.textInputElem.onkeyup = (evt) => {
+            // In certain input modes, the <enter> key is used to select characters.
+            // When in this mode, prevent <enter> from submitting:
+            if (evt.isComposing)
+                return;
             if (evt.key === 'Enter' && !evt.shiftKey) {
                 this.flushInput();
                 this.editor.focus();
@@ -204,7 +211,7 @@ class TextTool extends BaseTool_1.default {
         if (allPointers.length === 1) {
             // Are we clicking on a text node?
             const canvasPos = current.canvasPos;
-            const halfTestRegionSize = math_1.Vec2.of(2.5, 2.5).times(this.editor.viewport.getSizeOfPixelOnCanvas());
+            const halfTestRegionSize = math_1.Vec2.of(4, 4).times(this.editor.viewport.getSizeOfPixelOnCanvas());
             const testRegion = math_1.Rect2.fromCorners(canvasPos.minus(halfTestRegionSize), canvasPos.plus(halfTestRegionSize));
             const targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
             let targetTextNodes = targetNodes.filter((node) => node instanceof TextComponent_1.default);

package/dist/cjs/util/ClipboardHandler.js

@@ -75,6 +75,7 @@ class ClipboardHandler {
         const supportedMIMEs = ['image/svg+xml', 'text/html', 'image/png', 'image/jpeg', 'text/plain'];
         let files = [];
         const textData = new Map();
+        const editorSettings = editor.getCurrentSettings();
         if (hasEvent) {
             // NOTE: On some browsers, .getData and .files must be used before any async operations.
             files = [...clipboardData.files];
@@ -85,6 +86,21 @@ class ClipboardHandler {
                 }
             }
         }
+        else if (editorSettings.clipboardApi) {
+            const clipboardData = await editorSettings.clipboardApi.read();
+            for (const [type, data] of clipboardData.entries()) {
+                if (typeof data === 'string') {
+                    textData.set(type, data);
+                }
+                else {
+                    let blob = data;
+                    if (blob.type !== type) {
+                        blob = new Blob([blob], { type });
+                    }
+                    files.push(blob);
+                }
+            }
+        }
         else {
             const clipboardData = await navigator.clipboard.read();
             for (const item of clipboardData) {
@@ -238,7 +254,13 @@ class ClipboardHandler {
             return navigator.clipboard.write([new ClipboardItem(browserMimeToData)]);
         };
         const supportsClipboardApi = typeof ClipboardItem !== 'undefined' && typeof navigator?.clipboard?.write !== 'undefined';
-        if (!__classPrivateFieldGet(this, _ClipboardHandler_preferClipboardEvents, "f") && supportsClipboardApi && (hasNonTextMimeTypes || !event)) {
+        const prefersClipboardApi = !__classPrivateFieldGet(this, _ClipboardHandler_preferClipboardEvents, "f") && supportsClipboardApi && (hasNonTextMimeTypes || !event);
+        const editorSettings = this.editor.getCurrentSettings();
+        if (prefersClipboardApi && editorSettings.clipboardApi) {
+            const writeResult = editorSettings.clipboardApi.write(mimeToData);
+            return writeResult ?? Promise.resolve();
+        }
+        else if (prefersClipboardApi) {
             let clipboardApiPromise = null;
             const fallBackToCopyEvent = (reason) => {
                 console.warn('Unable to copy to the clipboard API. Future calls to .copy will use ClipboardEvents if possible.', reason);

package/dist/cjs/util/assertions.d.ts

@@ -2,7 +2,7 @@
  * Compile-time assertion that a branch of code is unreachable.
  * @internal
  */
-export declare const assertUnreachable: (key: never) => never;
+export declare function assertUnreachable(key: never): never;
 /**
  * Throws an exception if the typeof given value is not a number or `value` is NaN.
  *
@@ -13,15 +13,16 @@ export declare const assertUnreachable: (key: never) => never;
  *
  * assertIsNumber('hello, world'); // throws an Error.
  * ```
- *
- *
  */
-export declare const assertIsNumber: (value: any, allowNaN?: boolean) => value is number;
+export declare function assertIsNumber(value: unknown, allowNaN?: boolean): asserts value is number;
+export declare function assertIsArray(values: unknown): asserts values is unknown[];
 /**
  * Throws if any of `values` is not of type number.
  */
-export declare const assertIsNumberArray: (values: any[], allowNaN?: boolean) => values is number[];
+export declare function assertIsNumberArray(values: unknown, allowNaN?: boolean): asserts values is number[];
 /**
  * Throws an exception if `typeof value` is not a boolean.
  */
-export declare const assertIsBoolean: (value: any) => value is boolean;
+export declare function assertIsBoolean(value: unknown): asserts value is boolean;
+export declare function assertTruthy<T>(value: T | null | undefined | false | 0): asserts value is T;
+export declare function assertIsObject(value: unknown): asserts value is Record<string, unknown>;

package/dist/cjs/util/assertions.js

@@ -1,15 +1,22 @@
 "use strict";
+// Note: Arrow functions cannot be used for type assertions. See
+// https://github.com/microsoft/TypeScript/issues/34523
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.assertIsBoolean = exports.assertIsNumberArray = exports.assertIsNumber = exports.assertUnreachable = void 0;
+exports.assertUnreachable = assertUnreachable;
+exports.assertIsNumber = assertIsNumber;
+exports.assertIsArray = assertIsArray;
+exports.assertIsNumberArray = assertIsNumberArray;
+exports.assertIsBoolean = assertIsBoolean;
+exports.assertTruthy = assertTruthy;
+exports.assertIsObject = assertIsObject;
 /**
  * Compile-time assertion that a branch of code is unreachable.
  * @internal
  */
-const assertUnreachable = (key) => {
+function assertUnreachable(key) {
     // See https://stackoverflow.com/a/39419171/17055750
     throw new Error(`Should be unreachable. Key: ${key}.`);
-};
-exports.assertUnreachable = assertUnreachable;
+}
 /**
  * Throws an exception if the typeof given value is not a number or `value` is NaN.
  *
@@ -20,43 +27,42 @@ exports.assertUnreachable = assertUnreachable;
  *
  * assertIsNumber('hello, world'); // throws an Error.
  * ```
- *
- *
  */
-const assertIsNumber = (value, allowNaN = false) => {
+function assertIsNumber(value, allowNaN = false) {
     if (typeof value !== 'number' || (!allowNaN && isNaN(value))) {
         throw new Error('Given value is not a number');
-        // return false;
     }
-    return true;
-};
-exports.assertIsNumber = assertIsNumber;
+}
+function assertIsArray(values) {
+    if (!Array.isArray(values)) {
+        throw new Error('Asserting isArray: Given entity is not an array');
+    }
+}
 /**
  * Throws if any of `values` is not of type number.
  */
-const assertIsNumberArray = (values, allowNaN = false) => {
-    if (typeof values !== 'object') {
-        throw new Error('Asserting isNumberArray: Given entity is not an array');
-    }
-    if (!(0, exports.assertIsNumber)(values['length'])) {
-        return false;
-    }
+function assertIsNumberArray(values, allowNaN = false) {
+    assertIsArray(values);
+    assertIsNumber(values.length);
     for (const value of values) {
-        if (!(0, exports.assertIsNumber)(value, allowNaN)) {
-            return false;
-        }
+        assertIsNumber(value, allowNaN);
     }
-    return true;
-};
-exports.assertIsNumberArray = assertIsNumberArray;
+}
 /**
  * Throws an exception if `typeof value` is not a boolean.
  */
-const assertIsBoolean = (value) => {
+function assertIsBoolean(value) {
     if (typeof value !== 'boolean') {
         throw new Error('Given value is not a boolean');
-        // return false;
     }
-    return true;
-};
-exports.assertIsBoolean = assertIsBoolean;
+}
+function assertTruthy(value) {
+    if (!value) {
+        throw new Error(`${JSON.stringify(value)} is not truthy`);
+    }
+}
+function assertIsObject(value) {
+    if (typeof value !== 'object') {
+        throw new Error(`AssertIsObject: Given entity is not an object (type = ${typeof value})`);
+    }
+}

package/dist/cjs/version.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * @internal
  */
 exports.default = {
-    number: '1.24.2',
+    number: '1.26.0',
 };

package/dist/mjs/Editor.d.ts

@@ -121,6 +121,18 @@ export interface EditorSettings {
          */
         showImagePicker?: ShowCustomFilePickerCallback;
     } | null;
+    /**
+     * Allows changing how js-draw interacts with the clipboard.
+     *
+     * **Note**: Even when a custom `clipboardApi` is specified, if a `ClipboardEvent` is available
+     * (e.g. from when a user pastes with ctrl+v), the `ClipboardEvent` will be preferred.
+     */
+    clipboardApi: {
+        /** Called to read data to the clipboard. Keys in the result are MIME types. Values are the data associated with that type. */
+        read(): Promise<Map<string, Blob | string>>;
+        /** Called to write data to the clipboard. Keys in `data` are MIME types. Values are the data associated with that type. */
+        write(data: Map<string, Blob | Promise<Blob> | string>): void | Promise<void>;
+    } | null;
 }
 /**
  * The main entrypoint for the full editor.

package/dist/mjs/Editor.mjs

@@ -120,6 +120,7 @@ export class Editor {
             image: {
                 showImagePicker: settings.image?.showImagePicker ?? undefined,
             },
+            clipboardApi: settings.clipboardApi ?? null,
         };
         // Validate settings
         if (this.settings.minZoom > this.settings.maxZoom) {
@@ -1319,7 +1320,7 @@ export class Editor {
                 '',
                 '',
                 '== js-draw ==',
-                mitLicenseAttribution('2023-2024 Henry Heino'),
+                mitLicenseAttribution('2023-2025 Henry Heino'),
                 '',
             ].join('\n'),
             minimized: true,

package/dist/mjs/bundle/bundled.mjs

@@ -1,4 +1,5 @@
-// Main entrypoint for Webpack when building a bundle for release.
+// Main entrypoint for the bundler (ESBuild/Webpack/etc.) when creating the bundled
+// portion of a release.
 import '../styles';
 import  Editor  from '../Editor.mjs';
 export  *  from '../lib.mjs';

package/dist/mjs/commands/invertCommand.test.d.ts

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

package/dist/mjs/image/EditorImage.d.ts

@@ -225,7 +225,7 @@ export declare class ImageNode {
     getContent(): AbstractComponent | null;
     getParent(): ImageNode | null;
     protected getChildrenIntersectingRegion(region: Rect2, isTooSmallFilter?: TooSmallToRenderCheck): ImageNode[];
-    getChildrenOrSelfIntersectingRegion(region: Rect2): ImageNode[];
+    getChildrenOrSelfIntersectingRegion(region: Rect2, isTooSmall?: TooSmallToRenderCheck): ImageNode[];
     /**
      * Returns a list of `ImageNode`s with content (and thus no children).
      * Override getChildrenIntersectingRegion to customize how this method
@@ -258,6 +258,7 @@ export declare class RootImageNode extends ImageNode {
     private fullscreenChildren;
     private dataComponents;
     protected getChildrenIntersectingRegion(region: Rect2, _isTooSmall?: TooSmallToRenderCheck): ImageNode[];
+    getChildrenOrSelfIntersectingRegion(region: Rect2, _isTooSmall?: TooSmallToRenderCheck): ImageNode[];
     getLeaves(): ImageNode[];
     removeChild(child: ImageNode): void;
     getChildWithContent(target: AbstractComponent): ImageNode | null;

package/dist/mjs/image/EditorImage.mjs

@@ -538,11 +538,11 @@ export class ImageNode {
             return !isTooSmallFilter?.(bbox) && bbox.intersects(region);
         });
     }
-    getChildrenOrSelfIntersectingRegion(region) {
-        if (this.content) {
+    getChildrenOrSelfIntersectingRegion(region, isTooSmall) {
+        if (this.content && this.bbox.intersects(region) && !isTooSmall?.(this.bbox)) {
             return [this];
         }
-        return this.getChildrenIntersectingRegion(region);
+        return this.getChildrenIntersectingRegion(region, isTooSmall);
     }
     /**
      * Returns a list of `ImageNode`s with content (and thus no children).
@@ -560,10 +560,17 @@ export class ImageNode {
         workList.push(this);
         while (workList.length > 0) {
             const current = workList.pop();
-            if (current.content !== null) {
-                result.push(current);
+            // Split the children into leaves and non-leaves
+            const processed = current.getChildrenOrSelfIntersectingRegion(region, isTooSmall);
+            for (const item of processed) {
+                if (item.content) {
+                    result.push(item);
+                }
+                else {
+                    // Non-leaves need to be processed
+                    workList.push(item);
+                }
             }
-            workList.push(...current.getChildrenIntersectingRegion(region, isTooSmall));
         }
         return result;
     }
@@ -917,6 +924,14 @@ export class RootImageNode extends ImageNode {
         }
         return result;
     }
+    getChildrenOrSelfIntersectingRegion(region, _isTooSmall) {
+        const content = this.getContent();
+        // Fullscreen components always intersect/contain
+        if (content && content.getSizingMode() === ComponentSizingMode.FillScreen) {
+            return [this];
+        }
+        return super.getChildrenOrSelfIntersectingRegion(region, _isTooSmall);
+    }
     getLeaves() {
         const leaves = super.getLeaves();
         // Add fullscreen/data components — this method should

package/dist/mjs/testing/fillHtmlInput.d.ts

@@ -0,0 +1,6 @@
+interface Options {
+    clear?: boolean;
+}
+/** Sets the content of the given `input` or textarea to be `text`. */
+declare const fillInput: (input: HTMLInputElement | HTMLTextAreaElement, text: string, { clear }?: Options) => void;
+export default fillInput;

package/dist/mjs/testing/fillHtmlInput.mjs

@@ -0,0 +1,17 @@
+import  sendKeyPressRelease  from './sendKeyPressRelease.mjs';
+/** Sets the content of the given `input` or textarea to be `text`. */
+const fillInput = (input, text, { clear = false } = {}) => {
+    const dispatchUpdate = () => {
+        input.dispatchEvent(new InputEvent('input'));
+    };
+    if (clear) {
+        input.value = '';
+        dispatchUpdate();
+    }
+    for (const character of text.split('')) {
+        input.value += character;
+        sendKeyPressRelease(input, character);
+        dispatchUpdate();
+    }
+};
+export default fillInput;

package/dist/mjs/testing/sendKeyPressRelease.d.ts

@@ -1,3 +1,3 @@
-import type Editor from '../Editor';
-declare const sendKeyPressRelease: (editor: Editor, key: string) => void;
+import Editor from '../Editor';
+declare const sendKeyPressRelease: (target: Editor | HTMLElement, key: string) => void;
 export default sendKeyPressRelease;

package/dist/mjs/testing/sendKeyPressRelease.mjs

@@ -1,6 +1,15 @@
+import  Editor  from '../Editor.mjs';
 import  { InputEvtType }  from '../inputEvents.mjs';
-const sendKeyPressRelease = (editor, key) => {
-    editor.sendKeyboardEvent(InputEvtType.KeyPressEvent, key);
-    editor.sendKeyboardEvent(InputEvtType.KeyUpEvent, key);
+import  guessKeyCodeFromKey  from '../util/guessKeyCodeFromKey.mjs';
+const sendKeyPressRelease = (target, key) => {
+    if (target instanceof Editor) {
+        target.sendKeyboardEvent(InputEvtType.KeyPressEvent, key);
+        target.sendKeyboardEvent(InputEvtType.KeyUpEvent, key);
+    }
+    else {
+        const code = guessKeyCodeFromKey(key);
+        target.dispatchEvent(new KeyboardEvent('keydown', { key, code }));
+        target.dispatchEvent(new KeyboardEvent('keyup', { key, code }));
+    }
 };
 export default sendKeyPressRelease;

package/dist/mjs/toolbar/AbstractToolbar.mjs

@@ -31,6 +31,7 @@ import { Color4 } from '@js-draw/math';
 import  { toolbarCSSPrefix }  from './constants.mjs';
 import  SaveActionWidget  from './widgets/SaveActionWidget.mjs';
 import  ExitActionWidget  from './widgets/ExitActionWidget.mjs';
+import  { assertIsObject, assertTruthy }  from '../util/assertions.mjs';
 /**
  * Abstract base class for js-draw editor toolbars.
  *
@@ -205,8 +206,12 @@ class AbstractToolbar {
      */
     deserializeState(state) {
         const data = JSON.parse(state);
+        assertIsObject(data);
+        assertTruthy(data);
         const rootId = AbstractToolbar.rootToolbarId;
-        this.deserializeInternal(data[rootId]);
+        if (rootId in data && typeof data[rootId] !== 'undefined') {
+            this.deserializeInternal(data[rootId]);
+        }
         for (const widgetId in data) {
             if (widgetId === rootId) {
                 continue;
@@ -215,7 +220,9 @@ class AbstractToolbar {
                 console.warn(`Unable to deserialize widget ${widgetId} ­— no such widget.`);
                 continue;
             }
-            __classPrivateFieldGet(this, _AbstractToolbar_widgetsById, "f")[widgetId].deserializeFrom(data[widgetId]);
+            if (typeof data[widgetId] === 'object' && data[widgetId]) {
+                __classPrivateFieldGet(this, _AbstractToolbar_widgetsById, "f")[widgetId].deserializeFrom(data[widgetId]);
+            }
         }
     }
     /**

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

@@ -16,6 +16,7 @@ import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  DropdownLayoutManager  from './layout/DropdownLayoutManager.mjs';
 import  addLongPressOrHoverCssClasses  from '../../util/addLongPressOrHoverCssClasses.mjs';
 import  HelpDisplay  from '../utils/HelpDisplay.mjs';
+import  { assertIsObject }  from '../../util/assertions.mjs';
 /**
  * A set of labels that allow toolbar themes to treat buttons differently.
  */
@@ -446,10 +447,14 @@ class BaseWidget {
      */
     deserializeFrom(state) {
         if (state.subwidgetState) {
+            assertIsObject(state.subwidgetState);
             // Deserialize all subwidgets.
             for (const subwidgetId in state.subwidgetState) {
                 if (subwidgetId in this.subWidgets) {
-                    this.subWidgets[subwidgetId].deserializeFrom(state.subwidgetState[subwidgetId]);
+                    const serializedSubwidgetState = state.subwidgetState[subwidgetId];
+                    if (serializedSubwidgetState) {
+                        this.subWidgets[subwidgetId].deserializeFrom(serializedSubwidgetState);
+                    }
                 }
             }
         }

package/dist/mjs/toolbar/widgets/HandToolWidget.mjs

@@ -28,7 +28,7 @@ const makeZoomControl = (localizationTable, editor, helpDisplay) => {
             zoomLevel = Math.round(zoomLevel * 1000) / 1000;
         }
         if (zoomLevel !== lastZoom) {
-            zoomLevelDisplay.innerText = localizationTable.zoomLevel(zoomLevel);
+            zoomLevelDisplay.textContent = localizationTable.zoomLevel(zoomLevel);
             lastZoom = zoomLevel;
         }
     };
@@ -189,10 +189,10 @@ export default class HandToolWidget extends BaseToolWidget {
     }
     deserializeFrom(state) {
         if (state.touchPanning !== undefined) {
-            this.overridePanZoomTool.setModeEnabled(PanZoomMode.OneFingerTouchGestures, state.touchPanning);
+            this.overridePanZoomTool.setModeEnabled(PanZoomMode.OneFingerTouchGestures, !!state.touchPanning);
         }
         if (state.rotationLocked !== undefined) {
-            this.overridePanZoomTool.setModeEnabled(PanZoomMode.RotationLocked, state.rotationLocked);
+            this.overridePanZoomTool.setModeEnabled(PanZoomMode.RotationLocked, !!state.rotationLocked);
         }
         super.deserializeFrom(state);
     }

package/dist/mjs/tools/PasteHandler.d.ts

@@ -15,7 +15,7 @@ import BaseTool from './BaseTool';
 export default class PasteHandler extends BaseTool {
     private editor;
     constructor(editor: Editor);
-    onPaste(event: PasteEvent): boolean;
+    onPaste(event: PasteEvent, onComplete?: () => void): boolean;
     private addComponentsFromPaste;
     private doSVGPaste;
     private doTextPaste;

package/dist/mjs/tools/PasteHandler.mjs

@@ -21,12 +21,20 @@ export default class PasteHandler extends BaseTool {
         this.editor = editor;
     }
     // @internal
-    onPaste(event) {
+    onPaste(event, onComplete) {
         const mime = event.mime.toLowerCase();
         const svgData = (() => {
             if (mime === 'image/svg+xml') {
                 return event.data;
             }
+            // In some environments, it isn't possible to write non-text data to the
+            // clipboard. To support these cases, auto-detect text/plain SVG data.
+            if (mime === 'text/plain') {
+                const trimmedData = event.data.trim();
+                if (trimmedData.startsWith('<svg') && trimmedData.endsWith('</svg>')) {
+                    return trimmedData;
+                }
+            }
             if (mime !== 'text/html') {
                 return false;
             }
@@ -44,15 +52,15 @@ export default class PasteHandler extends BaseTool {
             return event.data.substring(event.data.search(/<svg/i), svgEnd);
         })();
         if (svgData) {
-            void this.doSVGPaste(svgData);
+            void this.doSVGPaste(svgData).then(onComplete);
             return true;
         }
         else if (mime === 'text/plain') {
-            void this.doTextPaste(event.data);
+            void this.doTextPaste(event.data).then(onComplete);
             return true;
         }
         else if (mime === 'image/png' || mime === 'image/jpeg') {
-            void this.doImagePaste(event.data);
+            void this.doImagePaste(event.data).then(onComplete);
             return true;
         }
         return false;

package/dist/mjs/tools/PasteHandler.test.d.ts

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