js-draw 0.3.1 → 0.3.2

package/dist/src/tools/BaseTool.js

@@ -13,6 +13,12 @@ export default class BaseTool {
     onWheel(_event) {
         return false;
     }
+    onCopy(_event) {
+        return false;
+    }
+    onPaste(_event) {
+        return false;
+    }
     onKeyPress(_event) {
         return false;
     }

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

@@ -0,0 +1,16 @@
+/**
+ * A tool that handles paste events.
+ * @packageDocumentation
+ */
+import Editor from '../Editor';
+import { PasteEvent } from '../types';
+import BaseTool from './BaseTool';
+export default class PasteHandler extends BaseTool {
+    private editor;
+    constructor(editor: Editor);
+    onPaste(event: PasteEvent): boolean;
+    private addComponentsFromPaste;
+    private doSVGPaste;
+    private doTextPaste;
+    private doImagePaste;
+}

package/dist/src/tools/PasteHandler.js

@@ -0,0 +1,142 @@
+/**
+ * A tool that handles paste events.
+ * @packageDocumentation
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { TextComponent } from '../components/lib';
+import { uniteCommands } from '../commands/lib';
+import SVGLoader from '../SVGLoader';
+import { Mat33, Vec2 } from '../math/lib';
+import BaseTool from './BaseTool';
+import EditorImage from '../EditorImage';
+import SelectionTool from './SelectionTool';
+import TextTool from './TextTool';
+import Color4 from '../Color4';
+import ImageComponent from '../components/ImageComponent';
+// { @inheritDoc PasteHandler! }
+export default class PasteHandler extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.pasteHandler);
+        this.editor = editor;
+    }
+    onPaste(event) {
+        const mime = event.mime.toLowerCase();
+        if (mime === 'image/svg+xml') {
+            void this.doSVGPaste(event.data);
+            return true;
+        }
+        else if (mime === 'text/plain') {
+            void this.doTextPaste(event.data);
+            return true;
+        }
+        else if (mime === 'image/png' || mime === 'image/jpeg') {
+            void this.doImagePaste(event.data);
+            return true;
+        }
+        return false;
+    }
+    addComponentsFromPaste(components) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let bbox = null;
+            for (const component of components) {
+                if (bbox) {
+                    bbox = bbox.union(component.getBBox());
+                }
+                else {
+                    bbox = component.getBBox();
+                }
+            }
+            if (!bbox) {
+                return;
+            }
+            // Find a transform that scales/moves bbox onto the screen.
+            const visibleRect = this.editor.viewport.visibleRect;
+            const scaleRatioX = visibleRect.width / bbox.width;
+            const scaleRatioY = visibleRect.height / bbox.height;
+            let scaleRatio = scaleRatioX;
+            if (bbox.width * scaleRatio > visibleRect.width || bbox.height * scaleRatio > visibleRect.height) {
+                scaleRatio = scaleRatioY;
+            }
+            scaleRatio *= 2 / 3;
+            const transfm = Mat33.translation(visibleRect.center.minus(bbox.center)).rightMul(Mat33.scaling2D(scaleRatio, bbox.center));
+            const commands = [];
+            for (const component of components) {
+                // To allow deserialization, we need to add first, then transform.
+                commands.push(EditorImage.addElement(component));
+                commands.push(component.transformBy(transfm));
+            }
+            const applyChunkSize = 100;
+            this.editor.dispatch(uniteCommands(commands, applyChunkSize), true);
+            for (const selectionTool of this.editor.toolController.getMatchingTools(SelectionTool)) {
+                selectionTool.setEnabled(true);
+                selectionTool.setSelection(components);
+            }
+        });
+    }
+    doSVGPaste(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const sanitize = true;
+            const loader = SVGLoader.fromString(data, sanitize);
+            const components = [];
+            yield loader.start((component) => {
+                components.push(component);
+            }, (_countProcessed, _totalToProcess) => null);
+            yield this.addComponentsFromPaste(components);
+        });
+    }
+    doTextPaste(text) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            const textTools = this.editor.toolController.getMatchingTools(TextTool);
+            textTools.sort((a, b) => {
+                if (!a.isEnabled() && b.isEnabled()) {
+                    return -1;
+                }
+                if (!b.isEnabled() && a.isEnabled()) {
+                    return 1;
+                }
+                return 0;
+            });
+            const defaultTextStyle = { size: 12, fontFamily: 'sans', renderingStyle: { fill: Color4.red } };
+            const pastedTextStyle = (_b = (_a = textTools[0]) === null || _a === void 0 ? void 0 : _a.getTextStyle()) !== null && _b !== void 0 ? _b : defaultTextStyle;
+            const lines = text.split('\n');
+            let lastComponent = null;
+            const components = [];
+            for (const line of lines) {
+                let position = Vec2.zero;
+                if (lastComponent) {
+                    const lineMargin = Math.floor(pastedTextStyle.size);
+                    position = lastComponent.getBBox().bottomLeft.plus(Vec2.unitY.times(lineMargin));
+                }
+                const component = new TextComponent([line], Mat33.translation(position), pastedTextStyle);
+                components.push(component);
+                lastComponent = component;
+            }
+            if (components.length === 1) {
+                yield this.addComponentsFromPaste([components[0]]);
+            }
+            else {
+                // Wrap the existing `TextComponent`s --- dragging one component should drag all.
+                yield this.addComponentsFromPaste([
+                    new TextComponent(components, Mat33.identity, pastedTextStyle)
+                ]);
+            }
+        });
+    }
+    doImagePaste(dataURL) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const image = new Image();
+            image.src = dataURL;
+            const component = yield ImageComponent.fromImage(image, Mat33.identity);
+            yield this.addComponentsFromPaste([component]);
+        });
+    }
+}

package/dist/src/tools/SelectionTool.d.ts

@@ -1,9 +1,10 @@
 import Command from '../commands/Command';
+import AbstractComponent from '../components/AbstractComponent';
 import Editor from '../Editor';
 import Mat33 from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import { Point2, Vec2 } from '../math/Vec2';
-import { KeyPressEvent, KeyUpEvent, PointerEvt } from '../types';
+import { CopyEvent, KeyPressEvent, KeyUpEvent, PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 declare class Selection {
     startPoint: Point2;
@@ -27,6 +28,8 @@ declare class Selection {
     appendBackgroundBoxTo(elem: HTMLElement): void;
     setToPoint(point: Point2): void;
     cancelSelection(): void;
+    setSelectedObjects(objects: AbstractComponent[], bbox: Rect2): void;
+    getSelectedObjects(): AbstractComponent[];
     resolveToObjects(): boolean;
     recomputeRegion(): boolean;
     getMinCanvasSize(): number;
@@ -43,6 +46,7 @@ export default class SelectionTool extends BaseTool {
     private prevSelectionBox;
     private selectionBox;
     constructor(editor: Editor, description: string);
+    private makeSelectionBox;
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;
     private onGestureEnd;
@@ -52,8 +56,10 @@ export default class SelectionTool extends BaseTool {
     private static handleableKeys;
     onKeyPress(event: KeyPressEvent): boolean;
     onKeyUp(evt: KeyUpEvent): boolean;
+    onCopy(event: CopyEvent): boolean;
     setEnabled(enabled: boolean): void;
     getSelection(): Selection | null;
+    setSelection(objects: AbstractComponent[]): void;
     clearSelection(): void;
 }
 export {};

package/dist/src/tools/SelectionTool.js

@@ -20,6 +20,7 @@ import { EditorEventType } from '../types';
 import Viewport from '../Viewport';
 import BaseTool from './BaseTool';
 import SerializableCommand from '../commands/SerializableCommand';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
 const handleScreenSize = 30;
 const styles = `
 	.handleOverlay {
@@ -262,6 +263,14 @@ class Selection {
         }
         this.region = Rect2.empty;
     }
+    setSelectedObjects(objects, bbox) {
+        this.region = bbox;
+        this.selectedElems = objects;
+        this.updateUI();
+    }
+    getSelectedObjects() {
+        return this.selectedElems;
+    }
     // Find the objects corresponding to this in the document,
     // select them.
     // Returns false iff nothing was selected.
@@ -427,13 +436,16 @@ export default class SelectionTool extends BaseTool {
         });
         this.editor.handleKeyEventsFrom(this.handleOverlay);
     }
+    makeSelectionBox(selectionStartPos) {
+        this.prevSelectionBox = this.selectionBox;
+        this.selectionBox = new Selection(selectionStartPos, this.editor);
+        // Remove any previous selection rects
+        this.handleOverlay.replaceChildren();
+        this.selectionBox.appendBackgroundBoxTo(this.handleOverlay);
+    }
     onPointerDown(event) {
         if (event.allPointers.length === 1 && event.current.isPrimary) {
-            this.prevSelectionBox = this.selectionBox;
-            this.selectionBox = new Selection(event.current.canvasPos, this.editor);
-            // Remove any previous selection rects
-            this.handleOverlay.replaceChildren();
-            this.selectionBox.appendBackgroundBoxTo(this.handleOverlay);
+            this.makeSelectionBox(event.current.canvasPos);
             return true;
         }
         return false;
@@ -542,6 +554,11 @@ export default class SelectionTool extends BaseTool {
             Math.max(0.5, scaledSize.x / region.size.x), Math.max(0.5, scaledSize.y / region.size.y)), region.topLeft).rightMul(Mat33.zRotation(rotationSteps * rotateStepSize, region.center)).rightMul(Mat33.translation(Vec2.of(xTranslateSteps, yTranslateSteps).times(translateStepSize)));
             this.selectionBox.transformPreview(transform);
         }
+        if (this.selectionBox && !handled && (event.key === 'Delete' || event.key === 'Backspace')) {
+            this.editor.dispatch(this.selectionBox.deleteSelectedObjects());
+            this.clearSelection();
+            handled = true;
+        }
         return handled;
     }
     onKeyUp(evt) {
@@ -551,6 +568,28 @@ export default class SelectionTool extends BaseTool {
         }
         return false;
     }
+    onCopy(event) {
+        if (!this.selectionBox) {
+            return false;
+        }
+        const selectedElems = this.selectionBox.getSelectedObjects();
+        const bbox = this.selectionBox.region;
+        if (selectedElems.length === 0) {
+            return false;
+        }
+        const exportViewport = new Viewport(this.editor.notifier);
+        exportViewport.updateScreenSize(Vec2.of(bbox.w, bbox.h));
+        exportViewport.resetTransform(Mat33.translation(bbox.topLeft));
+        const svgNameSpace = 'http://www.w3.org/2000/svg';
+        const exportElem = document.createElementNS(svgNameSpace, 'svg');
+        const sanitize = true;
+        const renderer = new SVGRenderer(exportElem, exportViewport, sanitize);
+        for (const elem of selectedElems) {
+            elem.render(renderer);
+        }
+        event.setData('image/svg+xml', exportElem.outerHTML);
+        return true;
+    }
     setEnabled(enabled) {
         super.setEnabled(enabled);
         // Clear the selection
@@ -569,6 +608,25 @@ export default class SelectionTool extends BaseTool {
     getSelection() {
         return this.selectionBox;
     }
+    setSelection(objects) {
+        let bbox = null;
+        for (const object of objects) {
+            if (bbox) {
+                bbox = bbox.union(object.getBBox());
+            }
+            else {
+                bbox = object.getBBox();
+            }
+        }
+        if (!bbox) {
+            return;
+        }
+        this.clearSelection();
+        if (!this.selectionBox) {
+            this.makeSelectionBox(bbox.topLeft);
+        }
+        this.selectionBox.setSelectedObjects(objects, bbox);
+    }
     clearSelection() {
         this.handleOverlay.replaceChildren();
         this.prevSelectionBox = this.selectionBox;

package/dist/src/tools/ToolController.js

@@ -9,6 +9,7 @@ import UndoRedoShortcut from './UndoRedoShortcut';
 import TextTool from './TextTool';
 import PipetteTool from './PipetteTool';
 import ToolSwitcherShortcut from './ToolSwitcherShortcut';
+import PasteHandler from './PasteHandler';
 export default class ToolController {
     /** @internal */
     constructor(editor, localization) {
@@ -35,6 +36,7 @@ export default class ToolController {
             keyboardPanZoomTool,
             new UndoRedoShortcut(editor),
             new ToolSwitcherShortcut(editor),
+            new PasteHandler(editor),
         ];
         primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));
         panZoomTool.setEnabled(true);
@@ -97,42 +99,49 @@ export default class ToolController {
             this.activeTool = null;
             handled = true;
         }
-        else if (event.kind === InputEvtType.WheelEvt || event.kind === InputEvtType.KeyPressEvent || event.kind === InputEvtType.KeyUpEvent) {
-            const isKeyPressEvt = event.kind === InputEvtType.KeyPressEvent;
-            const isKeyReleaseEvt = event.kind === InputEvtType.KeyUpEvent;
-            const isWheelEvt = event.kind === InputEvtType.WheelEvt;
+        else if (event.kind === InputEvtType.PointerMoveEvt) {
+            if (this.activeTool !== null) {
+                this.activeTool.onPointerMove(event);
+                handled = true;
+            }
+        }
+        else if (event.kind === InputEvtType.GestureCancelEvt) {
+            if (this.activeTool !== null) {
+                this.activeTool.onGestureCancel();
+                this.activeTool = null;
+            }
+        }
+        else {
+            let allCasesHandledGuard;
             for (const tool of this.tools) {
                 if (!tool.isEnabled()) {
                     continue;
                 }
-                const wheelResult = isWheelEvt && tool.onWheel(event);
-                const keyPressResult = isKeyPressEvt && tool.onKeyPress(event);
-                const keyReleaseResult = isKeyReleaseEvt && tool.onKeyUp(event);
-                handled = keyPressResult || wheelResult || keyReleaseResult;
+                switch (event.kind) {
+                    case InputEvtType.KeyPressEvent:
+                        handled = tool.onKeyPress(event);
+                        break;
+                    case InputEvtType.KeyUpEvent:
+                        handled = tool.onKeyUp(event);
+                        break;
+                    case InputEvtType.WheelEvt:
+                        handled = tool.onWheel(event);
+                        break;
+                    case InputEvtType.CopyEvent:
+                        handled = tool.onCopy(event);
+                        break;
+                    case InputEvtType.PasteEvent:
+                        handled = tool.onPaste(event);
+                        break;
+                    default:
+                        allCasesHandledGuard = event;
+                        return allCasesHandledGuard;
+                }
                 if (handled) {
                     break;
                 }
             }
         }
-        else if (this.activeTool !== null) {
-            let allCasesHandledGuard;
-            switch (event.kind) {
-                case InputEvtType.PointerMoveEvt:
-                    this.activeTool.onPointerMove(event);
-                    break;
-                case InputEvtType.GestureCancelEvt:
-                    this.activeTool.onGestureCancel();
-                    this.activeTool = null;
-                    break;
-                default:
-                    allCasesHandledGuard = event;
-                    return allCasesHandledGuard;
-            }
-            handled = true;
-        }
-        else {
-            handled = false;
-        }
         return handled;
     }
     getMatchingTools(type) {

package/dist/src/tools/lib.d.ts

@@ -11,3 +11,4 @@ export { default as PenTool, PenStyle } from './Pen';
 export { default as TextTool } from './TextTool';
 export { default as SelectionTool } from './SelectionTool';
 export { default as EraserTool } from './Eraser';
+export { default as PasteHandler } from './PasteHandler';

package/dist/src/tools/lib.js

@@ -11,3 +11,4 @@ export { default as PenTool } from './Pen';
 export { default as TextTool } from './TextTool';
 export { default as SelectionTool } from './SelectionTool';
 export { default as EraserTool } from './Eraser';
+export { default as PasteHandler } from './PasteHandler';

package/dist/src/tools/localization.d.ts

@@ -11,6 +11,9 @@ export interface ToolLocalization {
     textTool: string;
     enterTextToInsert: string;
     changeTool: string;
+    pasteHandler: string;
+    copied: (count: number, description: string) => string;
+    pasted: (count: number, description: string) => string;
     toolEnabledAnnouncement: (toolName: string) => string;
     toolDisabledAnnouncement: (toolName: string) => string;
 }

package/dist/src/tools/localization.js

@@ -11,6 +11,9 @@ export const defaultToolLocalization = {
     textTool: 'Text',
     enterTextToInsert: 'Text to insert',
     changeTool: 'Change tool',
+    pasteHandler: 'Copy paste handler',
+    copied: (count, description) => `Copied ${count} ${description}`,
+    pasted: (count, description) => `Pasted ${count} ${description}`,
     toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
     toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,
 };

package/dist/src/types.d.ts

@@ -22,7 +22,9 @@ export declare enum InputEvtType {
     GestureCancelEvt = 3,
     WheelEvt = 4,
     KeyPressEvent = 5,
-    KeyUpEvent = 6
+    KeyUpEvent = 6,
+    CopyEvent = 7,
+    PasteEvent = 8
 }
 export interface WheelEvt {
     readonly kind: InputEvtType.WheelEvt;
@@ -39,6 +41,15 @@ export interface KeyUpEvent {
     readonly key: string;
     readonly ctrlKey: boolean;
 }
+export interface CopyEvent {
+    readonly kind: InputEvtType.CopyEvent;
+    setData(mime: string, data: string): void;
+}
+export interface PasteEvent {
+    readonly kind: InputEvtType.PasteEvent;
+    readonly data: string;
+    readonly mime: string;
+}
 export interface GestureCancelEvt {
     readonly kind: InputEvtType.GestureCancelEvt;
 }
@@ -56,7 +67,7 @@ export interface PointerUpEvt extends PointerEvtBase {
     readonly kind: InputEvtType.PointerUpEvt;
 }
 export declare type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
-export declare type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt;
+export declare type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent;
 export declare type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
 export declare enum EditorEventType {
     ToolEnabled = 0,

package/dist/src/types.js

@@ -8,6 +8,8 @@ export var InputEvtType;
     InputEvtType[InputEvtType["WheelEvt"] = 4] = "WheelEvt";
     InputEvtType[InputEvtType["KeyPressEvent"] = 5] = "KeyPressEvent";
     InputEvtType[InputEvtType["KeyUpEvent"] = 6] = "KeyUpEvent";
+    InputEvtType[InputEvtType["CopyEvent"] = 7] = "CopyEvent";
+    InputEvtType[InputEvtType["PasteEvent"] = 8] = "PasteEvent";
 })(InputEvtType || (InputEvtType = {}));
 export var EditorEventType;
 (function (EditorEventType) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.3.1",
+	"version": "0.3.2",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",

package/src/Editor.ts

@@ -118,6 +118,7 @@ export class Editor {
 	private loadingWarning: HTMLElement;
 	private accessibilityAnnounceArea: HTMLElement;
 	private accessibilityControlArea: HTMLTextAreaElement;
+	private eventListenerTargets: HTMLElement[] = [];
 
 	private settings: EditorSettings;
 
@@ -435,6 +436,121 @@ export class Editor {
 		this.accessibilityControlArea.addEventListener('input', () => {
 			this.accessibilityControlArea.value = '';
 		});
+
+		document.addEventListener('copy', evt => {
+			if (!this.isEventSink(document.querySelector(':focus'))) {
+				return;
+			}
+
+			const clipboardData = evt.clipboardData;
+
+			if (this.toolController.dispatchInputEvent({
+				kind: InputEvtType.CopyEvent,
+				setData: (mime, data) => {
+					clipboardData?.setData(mime, data);
+				},
+			})) {
+				evt.preventDefault();
+			}
+		});
+
+		document.addEventListener('paste', evt => {
+			this.handlePaste(evt);
+		});
+	}
+
+	private isEventSink(evtTarget: Element|EventTarget|null) {
+		let currentElem: Element|null = evtTarget as Element|null;
+		while (currentElem !== null) {
+			for (const elem of this.eventListenerTargets) {
+				if (elem === currentElem) {
+					return true;
+				}
+			}
+
+			currentElem = (currentElem as Element).parentElement;
+		}
+		return false;
+	}
+
+	private async handlePaste(evt: DragEvent|ClipboardEvent) {
+		const target = document.querySelector(':focus') ?? evt.target;
+		if (!this.isEventSink(target)) {
+			return;
+		}
+
+		const clipboardData: DataTransfer = (evt as any).dataTransfer ?? (evt as any).clipboardData;
+		if (!clipboardData) {
+			return;
+		}
+
+		// Handle SVG files (prefer to PNG/JPEG)
+		for (const file of clipboardData.files) {
+			if (file.type.toLowerCase() === 'image/svg+xml') {
+				const text = await file.text();
+				if (this.toolController.dispatchInputEvent({
+					kind: InputEvtType.PasteEvent,
+					mime: file.type,
+					data: text,
+				})) {
+					evt.preventDefault();
+					return;
+				}
+			}
+		}
+
+		// Handle image files.
+		for (const file of clipboardData.files) {
+			const fileType = file.type.toLowerCase();
+			if (fileType === 'image/png' || fileType === 'image/jpg') {
+				const reader = new FileReader();
+
+				this.showLoadingWarning(0);
+				try {
+					const data = await new Promise((resolve: (result: string|null)=>void, reject) => {
+						reader.onload = () => resolve(reader.result as string|null);
+						reader.onerror = reject;
+						reader.onabort = reject;
+						reader.onprogress = (evt) => {
+							this.showLoadingWarning(evt.loaded / evt.total);
+						};
+
+						reader.readAsDataURL(file);
+					});
+					if (data && this.toolController.dispatchInputEvent({
+						kind: InputEvtType.PasteEvent,
+						mime: fileType,
+						data: data,
+					})) {
+						evt.preventDefault();
+						this.hideLoadingWarning();
+						return;
+					}
+				} catch (e) {
+					console.error('Error reading image:', e);
+				}
+				this.hideLoadingWarning();
+			}
+		}
+
+		// Supported MIMEs for text data, in order of preference
+		const supportedMIMEs = [
+			'image/svg+xml',
+			'text/plain',
+		];
+
+		for (const mime of supportedMIMEs) {
+			const data = clipboardData.getData(mime);
+
+			if (data && this.toolController.dispatchInputEvent({
+				kind: InputEvtType.PasteEvent,
+				mime,
+				data,
+			})) {
+				evt.preventDefault();
+				return;
+			}
+		}
 	}
 
 	/** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
@@ -463,6 +579,18 @@ export class Editor {
 				evt.preventDefault();
 			}
 		});
+
+		// Allow drop.
+		elem.ondragover = evt => {
+			evt.preventDefault();
+		};
+
+		elem.ondrop = evt => {
+			evt.preventDefault();
+			this.handlePaste(evt);
+		};
+
+		this.eventListenerTargets.push(elem);
 	}
 
 	/** `apply` a command. `command` will be announced for accessibility. */
@@ -509,6 +637,7 @@ export class Editor {
 	public async asyncApplyOrUnapplyCommands(
 		commands: Command[], apply: boolean, updateChunkSize: number
 	) {
+		console.assert(updateChunkSize > 0);
 		this.display.setDraftMode(true);
 		for (let i = 0; i < commands.length; i += updateChunkSize) {
 			this.showLoadingWarning(i / commands.length);
@@ -739,8 +868,8 @@ export class Editor {
 	 * This is particularly useful when accessing a bundled version of the editor,
 	 * where `SVGLoader.fromString` is unavailable.
 	 */
-	public async loadFromSVG(svgData: string) {
-		const loader = SVGLoader.fromString(svgData);
+	public async loadFromSVG(svgData: string, sanitize: boolean = false) {
+		const loader = SVGLoader.fromString(svgData, sanitize);
 		await this.loadFrom(loader);
 	}
 }