js-draw 1.21.3 → 1.23.1

package/dist/mjs/toolbar/IconProvider.mjs

@@ -10,31 +10,32 @@ import  Viewport  from '../Viewport.mjs';
 import  { makeFreehandLineBuilder }  from '../components/builders/FreehandLineBuilder.mjs';
 import  { makePolylineBuilder }  from '../components/builders/PolylineBuilder.mjs';
 import  { EraserMode }  from '../tools/Eraser.mjs';
+import  { createSvgElement, createSvgElements, createSvgPaths }  from '../util/createElement.mjs';
 const svgNamespace = 'http://www.w3.org/2000/svg';
-const iconColorFill = `
-	style='fill: var(--icon-color);'
-`;
-const iconColorStrokeFill = `
-	style='fill: var(--icon-color); stroke: var(--icon-color);'
-`;
 let checkerboardIdCounter = 0;
 const makeCheckerboardPattern = () => {
     const id = `checkerboard-${checkerboardIdCounter++}`;
-    const patternDef = `
-		<pattern
-			id='${id}'
-			viewBox='0,0,10,10'
-			width='20%'
-			height='20%'
-			patternUnits='userSpaceOnUse'
-		>
-			<rect x='0' y='0' width='10' height='10' fill='white'/>
-			<rect x='0' y='0' width='5' height='5' fill='gray'/>
-			<rect x='5' y='5' width='5' height='5' fill='gray'/>
-		</pattern>
-	`;
+    const patternElement = createSvgElement('pattern', {
+        id: id,
+        viewBox: '0,0,10,10',
+        width: '20%',
+        height: '20%',
+        patternUnits: 'userSpaceOnUse',
+        children: createSvgElements('rect', [
+            { x: 0, y: 0, width: 10, height: 10, fill: 'white' },
+            { x: 0, y: 0, width: 5, height: 5, fill: 'gray' },
+            { x: 5, y: 5, width: 5, height: 5, fill: 'gray' },
+        ]),
+    });
     const patternRef = `url(#${id})`;
-    return { patternDef, patternRef };
+    return {
+        patternDefElement: patternElement,
+        // @deprecated use patternDefElement
+        get patternDef() {
+            return patternElement.innerHTML;
+        },
+        patternRef,
+    };
 };
 const makeRedoIcon = (mirror) => {
     const icon = document.createElementNS(svgNamespace, 'svg');
@@ -50,11 +51,14 @@ const makeRedoIcon = (mirror) => {
 				transform-origin: center;
 			}
 		</style>
-		<path
-			d='M20,20 A15,15 0 0 1 70,80 L80,90 L60,70 L65,90 L87,90 L65,80'
-			class='toolbar-svg-undo-redo-icon'
-			style='${mirror ? 'transform: scale(-1, 1);' : ''}'/>
 	`;
+    const path = document.createElementNS(svgNamespace, 'path');
+    path.setAttribute('d', 'M20,20 A15,15 0 0 1 70,80 L80,90 L60,70 L65,90 L87,90 L65,80');
+    path.classList.add('toolbar-svg-undo-redo-icon');
+    if (mirror) {
+        path.style.transform = 'scale(-1, 1)';
+    }
+    icon.appendChild(path);
     icon.setAttribute('viewBox', '0 0 100 100');
     return icon;
 };
@@ -102,65 +106,62 @@ class IconProvider {
         return makeRedoIcon(false);
     }
     makeDropdownIcon() {
-        const icon = document.createElementNS(svgNamespace, 'svg');
-        icon.innerHTML = `
-		<g>
-			<path
-				d='M5,10 L50,90 L95,10 Z'
-				${iconColorFill}
-			/>
-		</g>
-		`;
+        const icon = this.makeIconFromPath('M5,10 L50,90 L95,10 Z');
         icon.setAttribute('viewBox', '-10 -10 110 110');
         return icon;
     }
     makeEraserIcon(eraserSize, mode) {
-        const icon = document.createElementNS(svgNamespace, 'svg');
         eraserSize ??= 10;
         const scaledSize = eraserSize / 4;
         const eraserColor = '#ff70af';
         // Draw an eraser-like shape. Created with Inkscape
-        icon.innerHTML = `
-		<defs>
-			<linearGradient id="dash-pattern">
-				<stop offset="80%" stop-color="${eraserColor}"/>
-				<stop offset="85%" stop-color="white"/>
-				<stop offset="90%" stop-color="${eraserColor}"/>
-			</linearGradient>
-		</defs>
-		<g>
-			<path
-				style="fill:${mode === EraserMode.PartialStroke ? 'url(#dash-pattern)' : eraserColor}"
-				stroke="black"
-				transform="rotate(41.35)"
-				d="M 52.5 27
-					C 50 28.9 48.9 31.7 48.9 34.8
-					L 48.9 39.8
-					C 48.9 45.3 53.4 49.8 58.9 49.8
-					L 103.9 49.8
-					C 105.8 49.8 107.6 49.2 109.1 48.3
-					L 110.2 ${scaledSize + 49.5} L 159.7 ${scaledSize + 5}
-					L 157.7 ${-scaledSize + 5.2} L 112.4 ${49.5 - scaledSize}
-					C 113.4 43.5 113.9 41.7 113.9 39.8
-					L 113.9 34.8
-					C 113.9 29.3 109.4 24.8 103.9 24.8
-					L 58.9 24.8
-					C 56.5 24.8 54.3 25.7 52.5 27
-					z "
-				id="path438" />
-
-			<rect
-				stroke="#cc8077"
-				${iconColorFill}
-				id="rect218"
-				width="65"
-				height="75"
-				x="48.9"
-				y="-38.7"
-				transform="rotate(41.35)" />
-		</g>
-		`;
-        icon.setAttribute('viewBox', '0 0 120 120');
+        const icon = createSvgElement('svg', {
+            viewBox: '0 0 120 120',
+            children: [
+                createSvgElement('defs', {
+                    children: [
+                        createSvgElement('linearGradient', {
+                            id: 'dash-pattern',
+                            children: createSvgElements('stop', [
+                                { offset: '80%', 'stop-color': eraserColor },
+                                { offset: '85%', 'stop-color': 'white' },
+                                { offset: '90%', 'stop-color': eraserColor },
+                            ]),
+                        }),
+                    ],
+                }),
+                createSvgElement('path', {
+                    fill: mode === EraserMode.PartialStroke ? 'url(#dash-pattern)' : eraserColor,
+                    stroke: 'black',
+                    transform: 'rotate(41.35)',
+                    d: `
+						M 52.5 27
+						C 50 28.9 48.9 31.7 48.9 34.8
+						L 48.9 39.8
+						C 48.9 45.3 53.4 49.8 58.9 49.8
+						L 103.9 49.8
+						C 105.8 49.8 107.6 49.2 109.1 48.3
+						L 110.2 ${scaledSize + 49.5} L 159.7 ${scaledSize + 5}
+						L 157.7 ${-scaledSize + 5.2} L 112.4 ${49.5 - scaledSize}
+						C 113.4 43.5 113.9 41.7 113.9 39.8
+						L 113.9 34.8
+						C 113.9 29.3 109.4 24.8 103.9 24.8
+						L 58.9 24.8
+						C 56.5 24.8 54.3 25.7 52.5 27
+						z
+					`,
+                }),
+                createSvgElement('rect', {
+                    stroke: '#cc8077',
+                    fill: 'var(--icon-color)',
+                    width: 65,
+                    height: 75,
+                    x: 48.9,
+                    y: -38.7,
+                    transform: 'rotate(41.35)',
+                }),
+            ],
+        });
         return icon;
     }
     makeSelectionIcon() {
@@ -168,8 +169,8 @@ class IconProvider {
         // Draw a cursor-like shape
         icon.innerHTML = `
 		<g>
-			<rect x=10 y=10 width=70 height=70 fill='pink' stroke='black'/>
-			<rect x=75 y=75 width=10 height=10 fill='white' stroke='black'/>
+			<rect x="10" y="10" width="70" height="70" fill="pink" stroke="black"/>
+			<rect x="75" y="75" width="10" height="10" fill="white" stroke="black"/>
 		</g>
 		`;
         icon.setAttribute('viewBox', '0 0 100 100');
@@ -432,8 +433,6 @@ class IconProvider {
         const strokeSize = Math.round(Math.sqrt(penStyle.thickness) * 4);
         const color = penStyle.color;
         const rounded = this.isRoundedTipPen(penStyle);
-        const icon = document.createElementNS(svgNamespace, 'svg');
-        icon.setAttribute('viewBox', '0 0 100 100');
         const tipThickness = strokeSize / 2;
         const inkTipPath = `
 			M ${15 - tipThickness},${80 - tipThickness}
@@ -466,71 +465,35 @@ class IconProvider {
         const pencilTipColor = Color4.fromHex('#f4d7d7');
         const tipColor = pencilTipColor.mix(color, tipThickness / 40 - 0.1).toHexString();
         const checkerboardPattern = makeCheckerboardPattern();
-        const ink = `
-			<path
-				fill="${checkerboardPattern.patternRef}"
-				d="${inkTipPath}"
-			/>
-			<path
-				fill="${checkerboardPattern.patternRef}"
-				d="${inkTrailPath}"
-			/>
-			<path
-				fill="${color}"
-				d="${inkTipPath}"
-			/>
-			<path
-				fill="${color}"
-				d="${inkTrailPath}"
-			/>
-		`;
-        const penTip = `
-			<path
-				fill="${checkerboardPattern.patternRef}"
-				d="${penTipPath}"
-			/>
-			<path
-				fill="${tipColor}"
-				stroke="${color}"
-				d="${penTipPath}"
-			/>
-		`;
-        const grip = `
-			<path
-				${iconColorStrokeFill}
-				d="${gripMainPath}"
-			/>
-
-			<!-- shadows -->
-			<path
-				fill="rgba(150, 150, 150, 0.3)"
-				d="${gripShadow1Path}"
-			/>
-			<path
-				fill="rgba(100, 100, 100, 0.2)"
-				d="${gripShadow2Path}"
-			/>
-
-			<!-- color bubble -->
-			<path
-				fill="${checkerboardPattern.patternRef}"
-				d="${colorBubblePath}"
-			/>
-			<path
-				fill="${color}"
-				d="${colorBubblePath}"
-			/>
-		`;
-        icon.innerHTML = `
-		<defs>
-			${checkerboardPattern.patternDef}
-		</defs>
-		<g>
-			${ink}
-			${penTip}
-			${grip}
-		</g>
-		`;
+        const colorString = color.toHexString();
+        const ink = createSvgPaths({
+            fill: checkerboardPattern.patternRef,
+            d: inkTipPath,
+        }, {
+            fill: checkerboardPattern.patternRef,
+            d: inkTrailPath,
+        }, {
+            fill: colorString,
+            d: inkTipPath,
+        }, {
+            fill: colorString,
+            d: inkTrailPath,
+        });
+        const penTip = createSvgPaths({ fill: checkerboardPattern.patternRef, d: penTipPath }, { fill: tipColor, stroke: colorString, d: penTipPath });
+        const grip = createSvgPaths({ fill: 'var(--icon-color)', stroke: 'var(--icon-color)', d: gripMainPath }, 
+        // Shadows
+        { fill: 'rgba(150, 150, 150, 0.3)', d: gripShadow1Path }, { fill: 'rgba(100, 100, 100, 0.2)', d: gripShadow2Path }, 
+        // Color bubble
+        { fill: checkerboardPattern.patternRef, d: colorBubblePath }, { fill: colorString, d: colorBubblePath });
+        const icon = document.createElementNS(svgNamespace, 'svg');
+        icon.setAttribute('viewBox', '0 0 100 100');
+        const iconMainContent = createSvgElement('g', {
+            children: [ink, penTip, grip].flat(),
+        });
+        const defs = createSvgElement('defs', {
+            children: [checkerboardPattern.patternDefElement],
+        });
+        icon.replaceChildren(defs, iconMainContent);
         return icon;
     }
     makeIconFromFactory(penStyle) {
@@ -562,11 +525,11 @@ class IconProvider {
         if (includeTransparencyGrid) {
             const checkerboardPattern = makeCheckerboardPattern();
             const defs = document.createElementNS(svgNamespace, 'defs');
-            defs.innerHTML = checkerboardPattern.patternDef;
+            defs.appendChild(checkerboardPattern.patternDefElement);
             icon.appendChild(defs);
             const background = document.createElementNS(svgNamespace, 'g');
             icon.appendChild(background);
-            renderer = new class extends SVGRenderer {
+            renderer = new (class extends SVGRenderer {
                 constructor() {
                     super(icon, viewport);
                 }
@@ -588,7 +551,7 @@ class IconProvider {
                     }
                     return addedPath;
                 }
-            }();
+            })();
         }
         else {
             renderer = new SVGRenderer(icon, viewport);
@@ -636,7 +599,7 @@ class IconProvider {
         if (color) {
             const checkerboardPattern = makeCheckerboardPattern();
             const defs = document.createElementNS(svgNamespace, 'defs');
-            defs.innerHTML = checkerboardPattern.patternDef;
+            defs.appendChild(checkerboardPattern.patternDefElement);
             icon.appendChild(defs);
             const fluidBackground = document.createElementNS(svgNamespace, 'path');
             const fluid = document.createElementNS(svgNamespace, 'path');
@@ -841,6 +804,9 @@ class IconProvider {
      * @returns An object with both the definition of a checkerboard pattern and the syntax to
      * reference that pattern. The defs provided by this function should be wrapped within a
      * `<defs></defs>` element.
+     *
+     * **Note**: This function's return value includes both `patternDefElement` (which returns
+     * an Element) and a (deprecated) `patternDef` string. Avoid using the `patternDef` result.
      */
     makeCheckerboardPattern() {
         return makeCheckerboardPattern();
@@ -855,7 +821,9 @@ class IconProvider {
         return penStyle.factory === makePolylineBuilder;
     }
     /** Must be overridden by icon packs that need attribution. */
-    licenseInfo() { return null; }
+    licenseInfo() {
+        return null;
+    }
 }
 _IconProvider_instances = new WeakSet(), _IconProvider_makeXIcon = function _IconProvider_makeXIcon() {
     const strokeWidth = '6px';

package/dist/mjs/toolbar/localization.mjs

@@ -45,7 +45,7 @@ export const defaultToolbarLocalization = {
     about: 'About',
     inputStabilization: 'Stabilization',
     strokeAutocorrect: 'Autocorrect',
-    touchPanning: 'Touchscreen panning',
+    touchPanning: 'Scroll with touch',
     roundedTipPen: 'Round',
     roundedTipPen2: 'Polyline',
     flatTipPen: 'Flat',
@@ -62,7 +62,7 @@ export const defaultToolbarLocalization = {
     fileInput__andNMoreFiles: (n) => `(...${n} more)`,
     // Help text
     penDropdown__baseHelpText: 'This tool draws shapes or freehand lines.',
-    penDropdown__colorHelpText: 'Changes the pen\'s color',
+    penDropdown__colorHelpText: "Changes the pen's color",
     penDropdown__thicknessHelpText: 'Changes the thickness of strokes drawn by the pen.',
     penDropdown__penTypeHelpText: 'Changes the pen style.\n\nEither a “pen” style or “shape” can be chosen. Choosing a “pen” style draws freehand lines. Choosing a “shape” draws shapes.',
     penDropdown__autocorrectHelpText: 'Converts approximate freehand lines and rectangles to perfect ones.\n\nThe pen must be held stationary at the end of a stroke to trigger a correction.',
@@ -72,17 +72,17 @@ export const defaultToolbarLocalization = {
     handDropdown__zoomOutHelpText: 'Zooms out.',
     handDropdown__resetViewHelpText: 'Resets the zoom level to 100% and resets scroll.',
     handDropdown__zoomDisplayHelpText: 'Shows the current zoom level. 100% shows the image at its actual size.',
-    handDropdown__touchPanningHelpText: 'When enabled, touch gestures move the image rather than select or draw.',
+    handDropdown__touchPanningHelpText: 'When enabled, touchscreen gestures move the image rather than select or draw.',
     handDropdown__lockRotationHelpText: 'When enabled, prevents touch gestures from rotating the screen.',
     eraserDropdown__baseHelpText: 'This tool removes strokes, images, and text under the cursor.',
     eraserDropdown__thicknessHelpText: 'Changes the size of the eraser.',
     eraserDropdown__fullStrokeEraserHelpText: 'When in full-stroke mode, entire shapes are erased.\n\nWhen not in full-stroke mode, shapes can be partially erased.',
     selectionDropdown__baseHelpText: 'Selects content and manipulates the selection',
-    selectionDropdown__resizeToHelpText: 'Crops the drawing to the size of what\'s currently selected.\n\nIf auto-resize is enabled, it will be disabled.',
+    selectionDropdown__resizeToHelpText: "Crops the drawing to the size of what's currently selected.\n\nIf auto-resize is enabled, it will be disabled.",
     selectionDropdown__deleteHelpText: 'Erases selected items.',
     selectionDropdown__duplicateHelpText: 'Makes a copy of selected items.',
     selectionDropdown__changeColorHelpText: 'Changes the color of selected items.',
-    pageDropdown__baseHelpText: 'Controls the drawing canvas\' background color, pattern, and size.',
+    pageDropdown__baseHelpText: "Controls the drawing canvas' background color, pattern, and size.",
     pageDropdown__backgroundColorHelpText: 'Changes the background color of the drawing canvas.',
     pageDropdown__gridCheckboxHelpText: 'Enables/disables a background grid pattern.',
     pageDropdown__autoresizeCheckboxHelpText: 'When checked, the page grows to fit the drawing.\n\nWhen unchecked, the page is visible and its size can be set manually.',

package/dist/mjs/toolbar/utils/HelpDisplay.mjs

@@ -41,7 +41,7 @@ const createHelpPage = (helpItems, onItemClick, onBackgroundClick, context) => {
     let clonedElementContainers = [];
     // Clicking on the background of the help area should send an event (e.g. to allow the
     // help container to be closed).
-    container.addEventListener('click', event => {
+    container.addEventListener('click', (event) => {
         // If clicking directly on the container (and not on a child)
         if (event.target === container) {
             onBackgroundClick();
@@ -53,7 +53,7 @@ const createHelpPage = (helpItems, onItemClick, onBackgroundClick, context) => {
         if (!currentItem) {
             return Rect2.empty;
         }
-        const itemBoundingBoxes = currentItem.targetElements.map(element => Rect2.of(element.getBoundingClientRect()));
+        const itemBoundingBoxes = currentItem.targetElements.map((element) => Rect2.of(element.getBoundingClientRect()));
         return Rect2.union(...itemBoundingBoxes);
     };
     // Updates each cloned element's click listener and CSS classes based on whether
@@ -218,7 +218,9 @@ class HelpDisplay {
             const label = this.context.localization.close;
             closeButton.setAttribute('aria-label', label);
             closeButton.setAttribute('title', label);
-            closeButton.onclick = () => { closeOverlay(); };
+            closeButton.onclick = () => {
+                closeOverlay();
+            };
             return closeButton;
         };
         // Wraps the label and clickable help elements
@@ -226,7 +228,7 @@ class HelpDisplay {
             const currentPage = MutableReactiveValue.fromInitialValue(0);
             const content = document.createElement('div');
             content.classList.add('navigation-content');
-            const helpPage = createHelpPage(__classPrivateFieldGet(this, _HelpDisplay_helpData, "f"), newPageIndex => currentPage.set(newPageIndex), onBackgroundClick, this.context);
+            const helpPage = createHelpPage(__classPrivateFieldGet(this, _HelpDisplay_helpData, "f"), (newPageIndex) => currentPage.set(newPageIndex), onBackgroundClick, this.context);
             helpPage.addToParent(content);
             const showPage = (pageIndex) => {
                 if (pageIndex >= __classPrivateFieldGet(this, _HelpDisplay_helpData, "f").length || pageIndex < 0) {
@@ -375,12 +377,12 @@ class HelpDisplay {
         // Close the overlay when clicking on the background (*directly* on any of the
         // elements in closeOverlayTriggers).
         const closeOverlayTriggers = [navigation.content, navigationButtons, overlay];
-        overlay.onclick = event => {
+        overlay.onclick = (event) => {
             if (closeOverlayTriggers.includes(event.target)) {
                 onBackgroundClick();
             }
         };
-        overlay.onkeyup = event => {
+        overlay.onkeyup = (event) => {
             if (event.code === 'Escape') {
                 closeOverlay();
                 event.preventDefault();

package/dist/mjs/toolbar/utils/makeDraggable.mjs

@@ -1,9 +1,6 @@
 import { Vec2 } from '@js-draw/math';
 const makeDraggable = (dragElement, options) => {
-    const dragElements = [
-        ...options.draggableChildElements,
-        dragElement,
-    ];
+    const dragElements = [...options.draggableChildElements, dragElement];
     let lastX = 0;
     let lastY = 0;
     let startX = 0;
@@ -49,7 +46,7 @@ const makeDraggable = (dragElement, options) => {
         return Math.hypot(lastX - startX, lastY - startY) < clickThreshold;
     };
     let startedDragging = false;
-    addEventListener('pointerdown', event => {
+    addEventListener('pointerdown', (event) => {
         if (event.defaultPrevented || !isDraggableElement(event.target)) {
             return;
         }
@@ -80,7 +77,7 @@ const makeDraggable = (dragElement, options) => {
         pointerDown = false;
         startedDragging = false;
     };
-    addEventListener('pointermove', event => {
+    addEventListener('pointermove', (event) => {
         if (!event.isPrimary || !pointerDown) {
             return undefined;
         }
@@ -108,7 +105,7 @@ const makeDraggable = (dragElement, options) => {
             startedDragging = true;
         }
     });
-    addEventListener('pointerleave', event => {
+    addEventListener('pointerleave', (event) => {
         // Capture the pointer if it exits the container while dragging.
         if (capturedPointerId === null && pointerDown && event.isPrimary) {
             dragElement.setPointerCapture(event.pointerId);

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

@@ -2,13 +2,14 @@ import  BaseWidget  from './BaseWidget.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
 const isToolWidgetFocused = () => {
     const currentFocus = [...document.querySelectorAll('*:focus')];
-    return currentFocus.length && currentFocus.some(elem => elem.classList.contains(`${toolbarCSSPrefix}button`));
+    return (currentFocus.length &&
+        currentFocus.some((elem) => elem.classList.contains(`${toolbarCSSPrefix}button`)));
 };
 export default class BaseToolWidget extends BaseWidget {
     constructor(editor, targetTool, id, localizationTable) {
         super(editor, id, localizationTable);
         this.targetTool = targetTool;
-        this.targetTool.enabledValue().onUpdateAndNow(enabled => {
+        this.targetTool.enabledValue().onUpdateAndNow((enabled) => {
             if (enabled) {
                 this.setSelected(true);
                 // Transfer focus to the current button, only if another toolbar button is

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

@@ -98,7 +98,7 @@ export default abstract class BaseWidget {
     addTo(parent: HTMLElement): HTMLElement;
     /**
      * Remove this. This allows the widget to be added to a toolbar again
-     * in the future using {@link addTo}.
+     * in the future using `addTo`.
      */
     remove(): void;
     focus(): void;

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

@@ -11,7 +11,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _BaseWidget_instances, _a, _BaseWidget_hasDropdown, _BaseWidget_disabledDueToReadOnlyEditor, _BaseWidget_tags, _BaseWidget_removeEditorListeners, _BaseWidget_addEditorListeners;
 import  ToolbarShortcutHandler  from '../../tools/ToolbarShortcutHandler.mjs';
-import  { keyPressEventFromHTMLEvent, keyUpEventFromHTMLEvent }  from '../../inputEvents.mjs';
+import  { keyPressEventFromHTMLEvent, keyUpEventFromHTMLEvent, }  from '../../inputEvents.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  DropdownLayoutManager  from './layout/DropdownLayoutManager.mjs';
 import  addLongPressOrHoverCssClasses  from '../../util/addLongPressOrHoverCssClasses.mjs';
@@ -67,7 +67,7 @@ class BaseWidget {
         this.button.tabIndex = 0;
         // Disable the context menu. This allows long-press gestures to trigger the button's
         // tooltip instead.
-        this.button.oncontextmenu = event => {
+        this.button.oncontextmenu = (event) => {
             event.preventDefault();
         };
         addLongPressOrHoverCssClasses(this.button);
@@ -165,7 +165,7 @@ class BaseWidget {
         return this.setUpButtonEventListeners(button);
     }
     setUpButtonEventListeners(button) {
-        const clickTriggers = { Enter: true, ' ': true, };
+        const clickTriggers = { Enter: true, ' ': true };
         button.onkeydown = (evt) => {
             let handled = false;
             if (evt.key in clickTriggers) {
@@ -183,7 +183,7 @@ class BaseWidget {
                 evt.preventDefault();
             }
         };
-        button.onkeyup = htmlEvent => {
+        button.onkeyup = (htmlEvent) => {
             if (htmlEvent.key in clickTriggers) {
                 return;
             }
@@ -199,7 +199,7 @@ class BaseWidget {
             }
         };
         // Prevent double-click zoom on some devices.
-        button.ondblclick = event => {
+        button.ondblclick = (event) => {
             event.preventDefault();
         };
     }
@@ -251,7 +251,7 @@ class BaseWidget {
         this.container.replaceChildren();
         this.button.replaceChildren(this.icon, this.label);
         this.container.appendChild(this.button);
-        const helpDisplay = new HelpDisplay(content => this.editor.createHTMLOverlay(content), this.editor);
+        const helpDisplay = new HelpDisplay((content) => this.editor.createHTMLOverlay(content), this.editor);
         const helpText = this.getHelpText();
         if (helpText) {
             helpDisplay.registerTextHelpForElement(this.dropdownContent, [this.getTitle(), helpText].join('\n\n'));
@@ -271,7 +271,7 @@ class BaseWidget {
                 getTitle: () => this.getTitle(),
                 isToplevel: () => this.toplevel,
             });
-            this.dropdown.visible.onUpdate(visible => {
+            this.dropdown.visible.onUpdate((visible) => {
                 if (visible) {
                     this.container.classList.add('dropdownVisible');
                 }
@@ -300,7 +300,7 @@ class BaseWidget {
     }
     /**
      * Remove this. This allows the widget to be added to a toolbar again
-     * in the future using {@link addTo}.
+     * in the future using `addTo`.
      */
     remove() {
         this.container.remove();
@@ -469,7 +469,7 @@ _a = BaseWidget, _BaseWidget_hasDropdown = new WeakMap(), _BaseWidget_disabledDu
             handler.removeListener(keyPressListener);
         };
     }
-    const readOnlyListener = this.editor.isReadOnlyReactiveValue().onUpdateAndNow(readOnly => {
+    const readOnlyListener = this.editor.isReadOnlyReactiveValue().onUpdateAndNow((readOnly) => {
         if (readOnly && this.shouldAutoDisableInReadOnlyEditor() && !this.disabled) {
             this.setDisabled(true);
             __classPrivateFieldSet(this, _BaseWidget_disabledDueToReadOnlyEditor, true, "f");

package/dist/mjs/toolbar/widgets/DocumentPropertiesWidget.mjs

@@ -101,7 +101,7 @@ class DocumentPropertiesWidget extends BaseWidget {
             const backgroundColorRow = document.createElement('div');
             const backgroundColorLabel = document.createElement('label');
             backgroundColorLabel.innerText = this.localizationTable.backgroundColor;
-            const { input: colorInput, container: backgroundColorInputContainer, setValue: setBgColorInputValue, registerWithHelpTextDisplay: registerHelpForInputs, } = makeColorInput(this.editor, color => {
+            const { input: colorInput, container: backgroundColorInputContainer, setValue: setBgColorInputValue, registerWithHelpTextDisplay: registerHelpForInputs, } = makeColorInput(this.editor, (color) => {
                 if (!color.eq(this.getBackgroundColor())) {
                     this.setBackgroundColor(color);
                 }
@@ -116,7 +116,7 @@ class DocumentPropertiesWidget extends BaseWidget {
                 helpDisplay?.registerTextHelpForElement(backgroundColorRow, this.localizationTable.pageDropdown__backgroundColorHelpText);
                 registerHelpForInputs(helpDisplay);
             };
-            return { setBgColorInputValue, backgroundColorRow, registerWithHelp, };
+            return { setBgColorInputValue, backgroundColorRow, registerWithHelp };
         };
         const { backgroundColorRow, setBgColorInputValue, registerWithHelp: registerBackgroundRowWithHelp, } = makeBackgroundColorInput();
         const makeCheckboxRow = (labelText, onChange) => {

package/dist/mjs/toolbar/widgets/EraserToolWidget.mjs

@@ -8,7 +8,7 @@ class EraserToolWidget extends BaseToolWidget {
         super(editor, tool, 'eraser-tool-widget', localizationTable);
         this.tool = tool;
         this.updateInputs = () => { };
-        this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+        this.editor.notifier.on(EditorEventType.ToolUpdated, (toolEvt) => {
             if (toolEvt.kind === EditorEventType.ToolUpdated && toolEvt.tool === this.tool) {
                 this.updateInputs();
                 this.updateIcon();
@@ -36,7 +36,9 @@ class EraserToolWidget extends BaseToolWidget {
         labelElement.innerText = this.localizationTable.fullStrokeEraser;
         checkboxElement.type = 'checkbox';
         checkboxElement.oninput = () => {
-            this.tool.getModeValue().set(checkboxElement.checked ? EraserMode.FullStroke : EraserMode.PartialStroke);
+            this.tool
+                .getModeValue()
+                .set(checkboxElement.checked ? EraserMode.FullStroke : EraserMode.PartialStroke);
         };
         const updateValue = () => {
             checkboxElement.checked = this.tool.getModeValue().get() === EraserMode.FullStroke;
@@ -53,7 +55,7 @@ class EraserToolWidget extends BaseToolWidget {
     fillDropdown(dropdown, helpDisplay) {
         const container = document.createElement('div');
         container.classList.add(`${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}nonbutton-controls-main-list`);
-        const thicknessSlider = makeThicknessSlider(this.editor, thickness => {
+        const thicknessSlider = makeThicknessSlider(this.editor, (thickness) => {
             this.tool.setThickness(thickness);
         });
         thicknessSlider.setBounds(10, 55);