js-draw 1.20.3 → 1.21.2

package/dist/mjs/inputEvents.d.ts

@@ -17,7 +17,8 @@ export declare enum InputEvtType {
     KeyPressEvent = 5,
     KeyUpEvent = 6,
     CopyEvent = 7,
-    PasteEvent = 8
+    PasteEvent = 8,
+    ContextMenu = 9
 }
 export interface WheelEvt {
     readonly kind: InputEvtType.WheelEvt;
@@ -76,18 +77,25 @@ export interface PointerMoveEvt extends PointerEvtBase {
 export interface PointerUpEvt extends PointerEvtBase {
     readonly kind: InputEvtType.PointerUpEvt;
 }
+export interface ContextMenuEvt {
+    readonly kind: InputEvtType.ContextMenu;
+    readonly screenPos: Point2;
+    readonly canvasPos: Point2;
+}
 /**
  * An internal `js-draw` pointer event type.
  *
  * This **is not** the same as a DOM pointer event.
  */
 export type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
+/** The type of any internal {@link PointerEvt} record. */
+export type PointerEvtType = InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt;
 /**
  * An internal `js-draw` input event type.
  *
  * These are not DOM events.
  */
-export type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent;
+export type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent | ContextMenuEvt;
 export declare const keyUpEventFromHTMLEvent: (event: KeyboardEvent) => KeyUpEvent;
 export declare const keyPressEventFromHTMLEvent: (event: KeyboardEvent) => KeyPressEvent;
 export declare const isPointerEvt: (event: InputEvt) => event is PointerEvt;

package/dist/mjs/inputEvents.mjs

@@ -9,6 +9,7 @@ export var InputEvtType;
     InputEvtType[InputEvtType["KeyUpEvent"] = 6] = "KeyUpEvent";
     InputEvtType[InputEvtType["CopyEvent"] = 7] = "CopyEvent";
     InputEvtType[InputEvtType["PasteEvent"] = 8] = "PasteEvent";
+    InputEvtType[InputEvtType["ContextMenu"] = 9] = "ContextMenu";
 })(InputEvtType || (InputEvtType = {}));
 // Constructor
 const keyEventFromHTMLEvent = (kind, event) => {

package/dist/mjs/localizations/es.mjs

@@ -41,6 +41,9 @@ const localization = {
     filledRectanglePen: 'Rectángulo sin borde',
     lockRotation: 'Bloquea rotación',
     paste: 'Pegar',
+    selectionMenu__paste: 'Pegar',
+    selectionMenu__delete: 'Eliminar',
+    selectionMenu__duplicate: 'Duplicar',
     closeSidebar: (toolName) => `Close sidebar for ${toolName}`,
     dropdownShown: (toolName) => `Menú por ${toolName} es visible`,
     dropdownHidden: (toolName) => { return `Menú por ${toolName} fue ocultado`; },

package/dist/mjs/rendering/Display.d.ts

@@ -37,6 +37,7 @@ export default class Display {
      * in the DOM).
      */
     get width(): number;
+    /** @returns the visible height of the display. See {@link width}. */
     get height(): number;
     /** @internal */
     getCache(): RenderingCache;

package/dist/mjs/rendering/Display.mjs

@@ -94,6 +94,7 @@ export default class Display {
     get width() {
         return this.dryInkRenderer.displaySize().x;
     }
+    /** @returns the visible height of the display. See {@link width}. */
     get height() {
         return this.dryInkRenderer.displaySize().y;
     }

package/dist/mjs/rendering/TextRenderingStyle.d.ts

@@ -22,10 +22,11 @@ export declare const cloneTextStyle: (style: TextRenderingStyle) => {
     };
     size: number;
     fontFamily: string;
-    fontWeight?: string | undefined;
-    fontStyle?: string | undefined;
-    fontVariant?: string | undefined;
+    fontWeight?: string;
+    fontStyle?: string;
+    fontVariant?: string;
 };
+/** `json` can either be a `string` or an `object`. */
 export declare const textStyleFromJSON: (json: any) => TextRenderingStyle;
 export declare const textStyleToJSON: (style: TextRenderingStyle) => {
     renderingStyle: {
@@ -37,7 +38,7 @@ export declare const textStyleToJSON: (style: TextRenderingStyle) => {
     };
     size: number;
     fontFamily: string;
-    fontWeight?: string | undefined;
-    fontStyle?: string | undefined;
-    fontVariant?: string | undefined;
+    fontWeight?: string;
+    fontStyle?: string;
+    fontVariant?: string;
 };

package/dist/mjs/rendering/TextRenderingStyle.mjs

@@ -5,6 +5,7 @@ export const cloneTextStyle = (style) => {
         renderingStyle: cloneStyle(style.renderingStyle),
     };
 };
+/** `json` can either be a `string` or an `object`. */
 export const textStyleFromJSON = (json) => {
     if (typeof json === 'string') {
         json = JSON.parse(json);

package/dist/mjs/rendering/renderers/CanvasRenderer.d.ts

@@ -8,9 +8,15 @@ import RenderablePathSpec from '../RenderablePathSpec';
  * Renders onto a `CanvasRenderingContext2D`.
  *
  * @example
- * ```ts
- * const editor = new Editor(document.body);
+ * ```ts,runnable
+ * import {Editor,CanvasRenderer} from 'js-draw';
  *
+ * // Create an editor and load initial data -- don't add to the body (hidden editor).
+ * const editor = new Editor(document.createElement('div'));
+ * await editor.loadFromSVG('<svg><path d="m0,0 l100,5 l-50,60 l30,20 z" fill="green"/></svg>');
+ * ---visible---
+ * // Given some editor.
+ * // Set up the canvas to be drawn onto.
  * const canvas = document.createElement('canvas');
  * const ctx = canvas.getContext('2d');
  *
@@ -22,6 +28,9 @@ import RenderablePathSpec from '../RenderablePathSpec';
  * // Render editor.image onto the renderer
  * const renderer = new CanvasRenderer(ctx, viewport);
  * editor.image.render(renderer, viewport);
+ *
+ * // Add the rendered canvas to the document.
+ * document.body.appendChild(canvas);
  * ```
  */
 export default class CanvasRenderer extends AbstractRenderer {
@@ -39,7 +48,7 @@ export default class CanvasRenderer extends AbstractRenderer {
      */
     constructor(ctx: CanvasRenderingContext2D, viewport: Viewport);
     private transformBy;
-    canRenderFromWithoutDataLoss(other: AbstractRenderer): boolean;
+    canRenderFromWithoutDataLoss(other: AbstractRenderer): other is CanvasRenderer;
     renderFromOtherOfSameType(transformBy: Mat33, other: AbstractRenderer): void;
     setDraftMode(draftMode: boolean): void;
     displaySize(): Vec2;

package/dist/mjs/rendering/renderers/CanvasRenderer.mjs

@@ -6,9 +6,15 @@ import  { visualEquivalent }  from '../RenderablePathSpec.mjs';
  * Renders onto a `CanvasRenderingContext2D`.
  *
  * @example
- * ```ts
- * const editor = new Editor(document.body);
+ * ```ts,runnable
+ * import {Editor,CanvasRenderer} from 'js-draw';
  *
+ * // Create an editor and load initial data -- don't add to the body (hidden editor).
+ * const editor = new Editor(document.createElement('div'));
+ * await editor.loadFromSVG('<svg><path d="m0,0 l100,5 l-50,60 l30,20 z" fill="green"/></svg>');
+ * ---visible---
+ * // Given some editor.
+ * // Set up the canvas to be drawn onto.
  * const canvas = document.createElement('canvas');
  * const ctx = canvas.getContext('2d');
  *
@@ -20,6 +26,9 @@ import  { visualEquivalent }  from '../RenderablePathSpec.mjs';
  * // Render editor.image onto the renderer
  * const renderer = new CanvasRenderer(ctx, viewport);
  * editor.image.render(renderer, viewport);
+ *
+ * // Add the rendered canvas to the document.
+ * document.body.appendChild(canvas);
  * ```
  */
 export default class CanvasRenderer extends AbstractRenderer {
@@ -171,6 +180,10 @@ export default class CanvasRenderer extends AbstractRenderer {
         this.ctx.restore();
     }
     drawImage(image) {
+        // .drawImage can fail for zero-size images.
+        if (image.image.width === 0 || image.image.height === 0) {
+            return;
+        }
         this.ctx.save();
         const transform = this.getCanvasToScreenTransform().rightMul(image.transform);
         this.transformBy(transform);

package/dist/mjs/rendering/renderers/DummyRenderer.d.ts

@@ -27,7 +27,7 @@ export default class DummyRenderer extends AbstractRenderer {
     startObject(boundingBox: Rect2, _clip: boolean): void;
     endObject(): void;
     isTooSmallToRender(_rect: Rect2): boolean;
-    canRenderFromWithoutDataLoss(other: AbstractRenderer): boolean;
+    canRenderFromWithoutDataLoss(other: AbstractRenderer): other is DummyRenderer;
     renderFromOtherOfSameType(transform: Mat33, other: AbstractRenderer): void;
     toString(): string;
 }

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

@@ -1,3 +1,3 @@
-/** Returns the first ancestor of the given node that is an HTMLElement */
+/** Returns the first ancestor of the given node (or the node itself) that is an HTMLElement */
 declare const firstElementAncestorOfNode: (node: Node | null) => HTMLElement | null;
 export default firstElementAncestorOfNode;

package/dist/mjs/testing/firstElementAncestorOfNode.mjs

@@ -1,4 +1,4 @@
-/** Returns the first ancestor of the given node that is an HTMLElement */
+/** Returns the first ancestor of the given node (or the node itself) that is an HTMLElement */
 const firstElementAncestorOfNode = (node) => {
     if (node instanceof HTMLElement) {
         return node;

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

@@ -1,12 +1,12 @@
 import Editor from '../Editor';
 import { Point2 } from '@js-draw/math';
 import Pointer, { PointerDevice } from '../Pointer';
-import { InputEvtType } from '../inputEvents';
+import { PointerEvtType } from '../inputEvents';
 /**
  * Dispatch a pen event to the currently selected tool.
  * Intended for unit tests.
  *
  * @see {@link sendTouchEvent}
  */
-declare const sendPenEvent: (editor: Editor, eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[], deviceType?: PointerDevice) => Pointer;
+declare const sendPenEvent: (editor: Editor, eventType: PointerEvtType, point: Point2, allPointers?: Pointer[], deviceType?: PointerDevice) => Pointer;
 export default sendPenEvent;

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

@@ -1,7 +1,7 @@
 import Editor from '../Editor';
 import { Vec2 } from '@js-draw/math';
 import Pointer from '../Pointer';
-import { InputEvtType } from '../inputEvents';
+import { PointerEvtType } from '../inputEvents';
 /**
  * Dispatch a touch event to the currently selected tool. Intended for unit tests.
  *
@@ -38,5 +38,5 @@ import { InputEvtType } from '../inputEvents';
  * }
  * ```
  */
-declare const sendTouchEvent: (editor: Editor, eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, screenPos: Vec2, allOtherPointers?: Pointer[]) => Pointer;
+declare const sendTouchEvent: (editor: Editor, eventType: PointerEvtType, screenPos: Vec2, allOtherPointers?: Pointer[]) => Pointer;
 export default sendTouchEvent;

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

@@ -13,6 +13,11 @@ export type ToolbarActionButtonOptions = {
     mustBeToplevel?: boolean;
     autoDisableInReadOnlyEditors?: boolean;
 };
+/**
+ * Abstract base class for js-draw editor toolbars.
+ *
+ * See {@link Editor.addToolbar}, {@link makeDropdownToolbar}, and {@link makeEdgeToolbar}.
+ */
 export default abstract class AbstractToolbar {
     #private;
     protected editor: Editor;
@@ -82,7 +87,7 @@ export default abstract class AbstractToolbar {
      * Called by `serializeState` to attach any additional JSONifyable data
      * to the serialized result.
      *
-     * @reutrns an object that can be converted to JSON with `JSON.stringify`.
+     * @returns an object that can be converted to JSON with `JSON.stringify`.
      */
     protected serializeInternal(): any;
     /**

package/dist/mjs/toolbar/AbstractToolbar.mjs

@@ -31,6 +31,11 @@ import { Color4 } from '@js-draw/math';
 import  { toolbarCSSPrefix }  from './constants.mjs';
 import  SaveActionWidget  from './widgets/SaveActionWidget.mjs';
 import  ExitActionWidget  from './widgets/ExitActionWidget.mjs';
+/**
+ * Abstract base class for js-draw editor toolbars.
+ *
+ * See {@link Editor.addToolbar}, {@link makeDropdownToolbar}, and {@link makeEdgeToolbar}.
+ */
 class AbstractToolbar {
     /** @internal */
     constructor(editor, localizationTable = defaultToolbarLocalization) {
@@ -217,7 +222,7 @@ class AbstractToolbar {
      * Called by `serializeState` to attach any additional JSONifyable data
      * to the serialized result.
      *
-     * @reutrns an object that can be converted to JSON with `JSON.stringify`.
+     * @returns an object that can be converted to JSON with `JSON.stringify`.
      */
     serializeInternal() { }
     /**

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

@@ -63,7 +63,7 @@ export default class IconProvider {
     /** Renamed to {@link makeResizeImageToSelectionIcon} @deprecated */
     makeResizeViewportIcon(): IconElemType;
     makeDuplicateSelectionIcon(): IconElemType;
-    /** Unused. @deprecated */
+    makeCopyIcon(): IconElemType;
     makePasteIcon(): IconElemType;
     makeDeleteSelectionIcon(): IconElemType;
     makeCloseIcon(): IconElemType;

package/dist/mjs/toolbar/IconProvider.mjs

@@ -705,7 +705,12 @@ class IconProvider {
 			M 10,25 10,90 70,90 70,60 40,60 40,25 10,25 z 
 		`);
     }
-    /** Unused. @deprecated */
+    makeCopyIcon() {
+        return this.makeIconFromPath(`
+			M 45,10 45,55 90,55 90,10 45,10 z
+			M 10,25 10,90 70,90 70,60 40,60 40,25 10,25 z 
+		`);
+    }
     makePasteIcon() {
         const icon = this.makeIconFromPath(`
 			M 50 0 L 50 5 L 35 5 L 40 24.75 L 20 25 L 20 100 L 85 100 L 100 90 L 100 24 L 75.1 24.3 L 80 5 L 65 5 L 65 0 L 50 0 z

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

@@ -13,6 +13,14 @@ export declare enum ToolbarWidgetTag {
     Undo = "undo",
     Redo = "redo"
 }
+/**
+ * The `abstract` base class for items that can be shown in a `js-draw` toolbar. See also {@link AbstractToolbar.addWidget}.
+ *
+ * See [the custom tool example](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/examples/example-custom-tools/example.ts)
+ * for how to create a custom toolbar widget for a tool.
+ *
+ * For custom action buttons, {@link AbstractToolbar.addActionButton} may be sufficient for most use cases.
+ */
 export default abstract class BaseWidget {
     #private;
     protected editor: Editor;

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

@@ -26,6 +26,14 @@ export var ToolbarWidgetTag;
     ToolbarWidgetTag["Undo"] = "undo";
     ToolbarWidgetTag["Redo"] = "redo";
 })(ToolbarWidgetTag || (ToolbarWidgetTag = {}));
+/**
+ * The `abstract` base class for items that can be shown in a `js-draw` toolbar. See also {@link AbstractToolbar.addWidget}.
+ *
+ * See [the custom tool example](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/examples/example-custom-tools/example.ts)
+ * for how to create a custom toolbar widget for a tool.
+ *
+ * For custom action buttons, {@link AbstractToolbar.addActionButton} may be sufficient for most use cases.
+ */
 class BaseWidget {
     constructor(editor, id, localizationTable) {
         _BaseWidget_instances.add(this);

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

@@ -4,6 +4,7 @@ import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 import { SavedToolbuttonState } from './BaseWidget';
 import HelpDisplay from '../utils/HelpDisplay';
+/** This toolbar widget allows controlling the editor's {@link PanZoom} tool(s). */
 export default class HandToolWidget extends BaseToolWidget {
     private allowTogglingBaseTool;
     protected overridePanZoomTool: PanZoom;

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

@@ -102,6 +102,7 @@ class HandModeWidget extends BaseWidget {
         return this.helpText;
     }
 }
+/** This toolbar widget allows controlling the editor's {@link PanZoom} tool(s). */
 export default class HandToolWidget extends BaseToolWidget {
     constructor(editor, 
     // Can either be the primary pan/zoom tool (in the primary tools list) or

package/dist/mjs/toolbar/widgets/InsertImageWidget/ImageWrapper.d.ts

@@ -1,4 +1,4 @@
-import { RenderableImage } from 'js-draw/src/rendering/renderers/AbstractRenderer';
+import { RenderableImage } from '../../../rendering/renderers/AbstractRenderer';
 /** Handles filtering and other operations on an image. */
 export declare class ImageWrapper {
     private imageBase64Url;

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

@@ -6,12 +6,18 @@ import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 import { SavedToolbuttonState } from './BaseWidget';
 import HelpDisplay from '../utils/HelpDisplay';
+/** Represents a style that can be applied to a pen tool. */
 export interface PenTypeRecord {
     name: string;
     id: string;
     isShapeBuilder?: boolean;
     factory: ComponentBuilderFactory;
 }
+/**
+ * This toolbar widget allows a user to control a single {@link Pen} tool.
+ *
+ * See also {@link AbstractToolbar.addDefaultToolWidgets}.
+ */
 export default class PenToolWidget extends BaseToolWidget {
     private tool;
     private updateInputs;

package/dist/mjs/toolbar/widgets/PenToolWidget.mjs

@@ -13,6 +13,11 @@ import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  makeThicknessSlider  from './components/makeThicknessSlider.mjs';
 import  makeGridSelector  from './components/makeGridSelector.mjs';
 import  { makePolylineBuilder }  from '../../components/builders/PolylineBuilder.mjs';
+/**
+ * This toolbar widget allows a user to control a single {@link Pen} tool.
+ *
+ * See also {@link AbstractToolbar.addDefaultToolWidgets}.
+ */
 class PenToolWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
         super(editor, tool, 'pen', localization);

package/dist/mjs/types.d.ts

@@ -4,7 +4,12 @@ import type BaseTool from './tools/BaseTool';
 import type AbstractComponent from './components/AbstractComponent';
 import type Command from './commands/Command';
 import type { WidgetContentLayoutManager } from './toolbar/widgets/layout/types';
+/**
+ * The type of the {@link Editor.notifier}, which provides notifications for
+ * various editor-related events.
+ */
 export type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
+/** @see {@link EditorNotifier} */
 export declare enum EditorEventType {
     ToolEnabled = 0,
     ToolDisabled = 1,

package/dist/mjs/types.mjs

@@ -1,4 +1,5 @@
 // Types related to the image editor
+/** @see {@link EditorNotifier} */
 export var EditorEventType;
 (function (EditorEventType) {
     EditorEventType[EditorEventType["ToolEnabled"] = 0] = "ToolEnabled";

package/dist/mjs/util/ClipboardHandler.d.ts

@@ -1,4 +1,8 @@
 import { Editor } from '../Editor';
+interface Callbacks {
+    onPasteError(error: Error | unknown): void;
+    onCopyError(error: Error | unknown): void;
+}
 /**
  * Handles conversion between the browser clipboard APIs and internal
  * js-draw clipboard events.
@@ -6,7 +10,8 @@ import { Editor } from '../Editor';
 export default class ClipboardHandler {
     #private;
     private editor;
-    constructor(editor: Editor);
+    private callbacks?;
+    constructor(editor: Editor, callbacks?: Callbacks | undefined);
     /**
      * Pastes data from the clipboard into the editor associated with
      * this handler.
@@ -16,6 +21,7 @@ export default class ClipboardHandler {
      * @returns true if the paste event was handled by the editor.
      */
     paste(event?: DragEvent | ClipboardEvent): Promise<boolean>;
+    private pasteInternal;
     /**
      * Copies text from the editor associated with this.
      *
@@ -24,4 +30,6 @@ export default class ClipboardHandler {
      * images.
      */
     copy(event?: ClipboardEvent): Promise<void>;
+    private copyInternal;
 }
+export {};

package/dist/mjs/util/ClipboardHandler.mjs

@@ -20,8 +20,9 @@ mime.endsWith('+xml') || mime.startsWith('text/');
  * js-draw clipboard events.
  */
 class ClipboardHandler {
-    constructor(editor) {
+    constructor(editor, callbacks) {
         this.editor = editor;
+        this.callbacks = callbacks;
         _ClipboardHandler_preferClipboardEvents.set(this, false);
     }
     /**
@@ -32,7 +33,27 @@ class ClipboardHandler {
      * 				`navigator.clipboard` will be used instead.
      * @returns true if the paste event was handled by the editor.
      */
-    async paste(event) {
+    paste(event) {
+        const onError = (error) => {
+            if (this.callbacks?.onPasteError) {
+                this.callbacks.onPasteError(error);
+                return Promise.resolve(false);
+            }
+            else {
+                throw error;
+            }
+        };
+        try {
+            // Use .catch rather than `async` to prevent future modifications from
+            // moving clipboard handling logic out of user event handlers.
+            // In the past, `await`s have caused permissions issues in some browsers.
+            return this.pasteInternal(event).catch(onError);
+        }
+        catch (error) {
+            return onError(error);
+        }
+    }
+    async pasteInternal(event) {
         const editor = this.editor;
         const clipboardData = event?.dataTransfer ?? event?.clipboardData ?? null;
         const hasEvent = !!clipboardData;
@@ -131,45 +152,82 @@ class ClipboardHandler {
      * images.
      */
     copy(event) {
-        const mimeToData = Object.create(null);
+        const onError = (error) => {
+            if (this.callbacks?.onCopyError) {
+                this.callbacks.onCopyError(error);
+                return Promise.resolve();
+            }
+            else {
+                throw error;
+            }
+        };
+        try {
+            // As above, use `.catch` to be certain that certain copyInternal
+            // is run now, before returning.
+            return this.copyInternal(event).catch(onError);
+        }
+        catch (error) {
+            return onError(error);
+        }
+    }
+    copyInternal(event) {
+        const mimeToData = new Map();
         if (this.editor.toolController.dispatchInputEvent({
             kind: InputEvtType.CopyEvent,
             setData: (mime, data) => {
-                mimeToData[mime] = data;
+                mimeToData.set(mime, data);
             },
         })) {
             event?.preventDefault();
         }
-        const mimeTypes = Object.keys(mimeToData);
+        const mimeTypes = [...mimeToData.keys()];
         const hasNonTextMimeTypes = mimeTypes.some(mime => !isTextMimeType(mime));
-        const copyToEvent = () => {
+        const copyToEvent = (reason) => {
             if (!event) {
-                throw new Error('Unable to paste -- no event provided.');
+                throw new Error(`Unable to copy -- no event provided${reason ? `. Original error: ${reason}` : ''}`);
             }
-            for (const key in mimeToData) {
-                const value = mimeToData[key];
+            for (const [key, value] of mimeToData.entries()) {
                 if (typeof value === 'string') {
                     event.clipboardData?.setData(key, value);
                 }
             }
         };
         const copyToClipboardApi = () => {
-            const mappedMimeToData = Object.create(null);
-            const mimeMapping = {
-                // image/svg+xml is unsupported in Chrome.
-                'image/svg+xml': 'text/html',
-            };
-            for (const key in mimeToData) {
-                const data = mimeToData[key];
-                const mappedKey = mimeMapping[key] || key;
-                if (typeof data === 'string') {
-                    mappedMimeToData[mappedKey] = new Blob([new TextEncoder().encode(data)], { type: mappedKey });
+            const mapInternalDataToBrowserData = (originalMimeToData) => {
+                const mappedMimeToData = Object.create(null);
+                for (const [key, data] of originalMimeToData.entries()) {
+                    if (typeof data === 'string') {
+                        const loadedData = new Blob([new TextEncoder().encode(data)], { type: key });
+                        mappedMimeToData[key] = loadedData;
+                    }
+                    else {
+                        mappedMimeToData[key] = data;
+                    }
+                    // Different platforms have varying support for different clipboard MIME types:
+                    // - As of September 2024, image/svg+xml is unsupported on iOS
+                    // - text/html is unsupported on Chrome/Android (and perhaps Chrome on other platforms).
+                    //    - See https://issues.chromium.org/issues/40851502
+                    if (key === 'image/svg+xml') {
+                        mappedMimeToData['text/html'] ??= mappedMimeToData[key];
+                    }
                 }
-                else {
-                    mappedMimeToData[mappedKey] = data;
+                return mappedMimeToData;
+            };
+            const removeUnsupportedMime = (originalMimeToData) => {
+                const filteredMimeToData = Object.create(null);
+                for (const [key, data] of Object.entries(originalMimeToData)) {
+                    // Browser support for ClipboardItem.supports is limited as of mid 2024. However, some browsers
+                    // that do support `.supports` throw an exception when attempting to copy an unsupported MIME type
+                    // (e.g. Firefox).
+                    const unsupported = 'supports' in ClipboardItem && typeof ClipboardItem.supports === 'function' && !ClipboardItem.supports(key);
+                    if (!unsupported) {
+                        filteredMimeToData[key] = data;
+                    }
                 }
-            }
-            return navigator.clipboard.write([new ClipboardItem(mappedMimeToData)]);
+                return filteredMimeToData;
+            };
+            const browserMimeToData = removeUnsupportedMime(mapInternalDataToBrowserData(mimeToData));
+            return navigator.clipboard.write([new ClipboardItem(browserMimeToData)]);
         };
         const supportsClipboardApi = (typeof ClipboardItem !== 'undefined'
             && typeof navigator?.clipboard?.write !== 'undefined');
@@ -178,7 +236,7 @@ class ClipboardHandler {
             const fallBackToCopyEvent = (reason) => {
                 console.warn('Unable to copy to the clipboard API. Future calls to .copy will use ClipboardEvents if possible.', reason);
                 __classPrivateFieldSet(this, _ClipboardHandler_preferClipboardEvents, true, "f");
-                copyToEvent();
+                copyToEvent(reason);
             };
             try {
                 clipboardApiPromise = copyToClipboardApi();

package/dist/mjs/version.mjs

@@ -4,5 +4,5 @@
  * @internal
  */
 export default {
-    number: '1.20.3',
+    number: '1.21.2',
 };