js-draw 1.21.2 → 1.22.0

package/dist/mjs/tools/BaseTool.mjs

@@ -0,0 +1,179 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _BaseTool_enabled, _BaseTool_group, _BaseTool_inputMapper, _BaseTool_readOnlyEditorChangeListener;
+import  { EditorEventType }  from '../types.mjs';
+import  { InputEvtType, }  from '../inputEvents.mjs';
+import  { ReactiveValue }  from '../util/ReactiveValue.mjs';
+class BaseTool {
+    constructor(notifier, description) {
+        this.notifier = notifier;
+        this.description = description;
+        _BaseTool_enabled.set(this, void 0);
+        _BaseTool_group.set(this, null);
+        _BaseTool_inputMapper.set(this, null);
+        _BaseTool_readOnlyEditorChangeListener.set(this, null);
+        __classPrivateFieldSet(this, _BaseTool_enabled, ReactiveValue.fromInitialValue(true), "f");
+        __classPrivateFieldGet(this, _BaseTool_enabled, "f").onUpdate((enabled) => {
+            // Ensure that at most one tool in the group is enabled.
+            if (enabled) {
+                __classPrivateFieldGet(this, _BaseTool_group, "f")?.notifyEnabled(this);
+                this.notifier.dispatch(EditorEventType.ToolEnabled, {
+                    kind: EditorEventType.ToolEnabled,
+                    tool: this,
+                });
+            }
+            else {
+                this.notifier.dispatch(EditorEventType.ToolDisabled, {
+                    kind: EditorEventType.ToolDisabled,
+                    tool: this,
+                });
+            }
+        });
+    }
+    /** Override this to allow this tool to be enabled in a read-only editor */
+    canReceiveInputInReadOnlyEditor() {
+        return false;
+    }
+    setInputMapper(mapper) {
+        __classPrivateFieldSet(this, _BaseTool_inputMapper, mapper, "f");
+        if (mapper) {
+            mapper.setEmitListener((event) => this.dispatchEventToCallback(event));
+        }
+    }
+    getInputMapper() {
+        return __classPrivateFieldGet(this, _BaseTool_inputMapper, "f");
+    }
+    dispatchEventToCallback(event) {
+        let exhaustivenessCheck;
+        switch (event.kind) {
+            case InputEvtType.PointerDownEvt:
+                return this.onPointerDown(event);
+            case InputEvtType.PointerMoveEvt:
+                this.onPointerMove(event);
+                break;
+            case InputEvtType.PointerUpEvt:
+                return this.onPointerUp(event) ?? false;
+            case InputEvtType.GestureCancelEvt:
+                this.onGestureCancel(event);
+                break;
+            case InputEvtType.WheelEvt:
+                return this.onWheel(event);
+            case InputEvtType.KeyPressEvent:
+                return this.onKeyPress(event);
+            case InputEvtType.KeyUpEvent:
+                return this.onKeyUp(event);
+            case InputEvtType.CopyEvent:
+                return this.onCopy(event);
+            case InputEvtType.PasteEvent:
+                return this.onPaste(event);
+            case InputEvtType.ContextMenu:
+                return this.onContextMenu(event);
+            default:
+                exhaustivenessCheck = event;
+                return exhaustivenessCheck;
+        }
+        return true;
+    }
+    // @internal
+    onEvent(event) {
+        if (__classPrivateFieldGet(this, _BaseTool_inputMapper, "f")) {
+            return __classPrivateFieldGet(this, _BaseTool_inputMapper, "f").onEvent(event);
+        }
+        return this.dispatchEventToCallback(event);
+    }
+    /**
+     * Returns true iff the tool handled the event and thus should receive additional
+     * events.
+     */
+    onPointerDown(_event) {
+        return false;
+    }
+    onPointerMove(_event) { }
+    /**
+     * Returns true iff there are additional pointers down and the tool should
+     * remain active to handle the additional events.
+     *
+     * For most purposes, this should return `false` or nothing.
+     */
+    onPointerUp(_event) { }
+    onGestureCancel(_event) { }
+    onWheel(_event) {
+        return false;
+    }
+    onCopy(_event) {
+        return false;
+    }
+    onPaste(_event) {
+        return false;
+    }
+    onKeyPress(_event) {
+        return false;
+    }
+    onKeyUp(_event) {
+        return false;
+    }
+    onContextMenu(_event) {
+        return false;
+    }
+    /**
+     * Return true if, while this tool is active, `_event` can be delivered to
+     * another tool that is higher priority than this.
+     * @internal May be renamed
+     */
+    eventCanBeDeliveredToNonActiveTool(_event) {
+        return true;
+    }
+    setEnabled(enabled) {
+        __classPrivateFieldGet(this, _BaseTool_enabled, "f").set(enabled);
+    }
+    isEnabled() {
+        return __classPrivateFieldGet(this, _BaseTool_enabled, "f").get();
+    }
+    /**
+     * Returns a {@link ReactiveValue} that updates based on whether this tool is
+     * enabled.
+     *
+     * @example
+     * ```ts
+     * const tool = new SomeTool();
+     *
+     * // Watch for changes in enabled status
+     * tool.enabledValue().onUpdate(enabled => doSomething(enabled));
+     * ```
+     */
+    enabledValue() {
+        return __classPrivateFieldGet(this, _BaseTool_enabled, "f");
+    }
+    // Connect this tool to a set of other tools, ensuring that at most one
+    // of the tools in the group is enabled.
+    setToolGroup(group) {
+        if (this.isEnabled()) {
+            group.notifyEnabled(this);
+        }
+        __classPrivateFieldSet(this, _BaseTool_group, group, "f");
+    }
+    getToolGroup() {
+        if (__classPrivateFieldGet(this, _BaseTool_group, "f")) {
+            return __classPrivateFieldGet(this, _BaseTool_group, "f");
+        }
+        return null;
+    }
+    // Called when the tool is removed/when the editor is destroyed.
+    // Subclasses that override this method **must call super.onDestroy()**.
+    onDestroy() {
+        __classPrivateFieldGet(this, _BaseTool_readOnlyEditorChangeListener, "f")?.remove();
+        __classPrivateFieldSet(this, _BaseTool_readOnlyEditorChangeListener, null, "f");
+        __classPrivateFieldSet(this, _BaseTool_group, null, "f");
+    }
+}
+_BaseTool_enabled = new WeakMap(), _BaseTool_group = new WeakMap(), _BaseTool_inputMapper = new WeakMap(), _BaseTool_readOnlyEditorChangeListener = new WeakMap();
+export default BaseTool;

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

@@ -0,0 +1,60 @@
+import { GestureCancelEvt, KeyPressEvent, PointerEvt } from '../inputEvents';
+import BaseTool from './BaseTool';
+import Editor from '../Editor';
+import { MutableReactiveValue } from '../util/ReactiveValue';
+export declare enum EraserMode {
+    PartialStroke = "partial-stroke",
+    FullStroke = "full-stroke"
+}
+export interface InitialEraserOptions {
+    thickness?: number;
+    mode?: EraserMode;
+}
+/**
+ * A tool that allows a user to erase parts of an image.
+ */
+export default class Eraser extends BaseTool {
+    private editor;
+    private lastPoint;
+    private isFirstEraseEvt;
+    private thickness;
+    private thicknessValue;
+    private modeValue;
+    private toRemove;
+    private toAdd;
+    private eraseCommands;
+    private addCommands;
+    constructor(editor: Editor, description: string, options?: InitialEraserOptions);
+    /**
+     * @returns a tool that briefly enables the eraser when a physical eraser is used.
+     * This tool should be added to the tool list after the primary tools.
+     */
+    makeEraserSwitcherTool(): BaseTool;
+    private clearPreview;
+    private getSizeOnCanvas;
+    private drawPreviewAt;
+    /**
+     * @returns the eraser rectangle in canvas coordinates.
+     *
+     * For now, all erasers are rectangles or points.
+     */
+    private getEraserRect;
+    /** Erases in a line from the last point to the current. */
+    private eraseTo;
+    onPointerDown(event: PointerEvt): boolean;
+    onPointerMove(event: PointerEvt): void;
+    onPointerUp(event: PointerEvt): void;
+    onGestureCancel(_event: GestureCancelEvt): void;
+    onKeyPress(event: KeyPressEvent): boolean;
+    /** Returns the side-length of the tip of this eraser. */
+    getThickness(): number;
+    /** Sets the side-length of this' tip. */
+    setThickness(thickness: number): void;
+    /**
+     * Returns a {@link MutableReactiveValue} that can be used to watch
+     * this tool's thickness.
+     */
+    getThicknessValue(): MutableReactiveValue<number>;
+    /** @returns An object that allows switching between a full stroke and a partial stroke eraser. */
+    getModeValue(): MutableReactiveValue<EraserMode>;
+}

package/dist/mjs/tools/Eraser.mjs

@@ -0,0 +1,297 @@
+import  { EditorEventType }  from '../types.mjs';
+import  BaseTool  from './BaseTool.mjs';
+import { Vec2, LineSegment2, Color4, Rect2, Path } from '@js-draw/math';
+import  Erase  from '../commands/Erase.mjs';
+import  { PointerDevice }  from '../Pointer.mjs';
+import  { decreaseSizeKeyboardShortcutId, increaseSizeKeyboardShortcutId }  from './keybindings.mjs';
+import  { ReactiveValue }  from '../util/ReactiveValue.mjs';
+import  EditorImage  from '../image/EditorImage.mjs';
+import  uniteCommands  from '../commands/uniteCommands.mjs';
+import  { pathToRenderable }  from '../rendering/RenderablePathSpec.mjs';
+export var EraserMode;
+(function (EraserMode) {
+    EraserMode["PartialStroke"] = "partial-stroke";
+    EraserMode["FullStroke"] = "full-stroke";
+})(EraserMode || (EraserMode = {}));
+/** Handles switching from other primary tools to the eraser and back */
+class EraserSwitcher extends BaseTool {
+    constructor(editor, eraser) {
+        super(editor.notifier, editor.localization.changeTool);
+        this.editor = editor;
+        this.eraser = eraser;
+    }
+    onPointerDown(event) {
+        if (event.allPointers.length === 1 && event.current.device === PointerDevice.Eraser) {
+            const toolController = this.editor.toolController;
+            const enabledPrimaryTools = toolController
+                .getPrimaryTools()
+                .filter((tool) => tool.isEnabled());
+            if (enabledPrimaryTools.length) {
+                this.previousEnabledTool = enabledPrimaryTools[0];
+            }
+            else {
+                this.previousEnabledTool = null;
+            }
+            this.previousEraserEnabledState = this.eraser.isEnabled();
+            this.eraser.setEnabled(true);
+            if (this.eraser.onPointerDown(event)) {
+                return true;
+            }
+            else {
+                this.restoreOriginalTool();
+            }
+        }
+        return false;
+    }
+    onPointerMove(event) {
+        this.eraser.onPointerMove(event);
+    }
+    restoreOriginalTool() {
+        this.eraser.setEnabled(this.previousEraserEnabledState);
+        if (this.previousEnabledTool) {
+            this.previousEnabledTool.setEnabled(true);
+        }
+    }
+    onPointerUp(event) {
+        this.eraser.onPointerUp(event);
+        this.restoreOriginalTool();
+    }
+    onGestureCancel(event) {
+        this.eraser.onGestureCancel(event);
+        this.restoreOriginalTool();
+    }
+}
+/**
+ * A tool that allows a user to erase parts of an image.
+ */
+export default class Eraser extends BaseTool {
+    constructor(editor, description, options) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.lastPoint = null;
+        this.isFirstEraseEvt = true;
+        this.toAdd = new Set();
+        // Commands that each remove one element
+        this.eraseCommands = [];
+        this.addCommands = [];
+        this.thickness = options?.thickness ?? 10;
+        this.thicknessValue = ReactiveValue.fromInitialValue(this.thickness);
+        this.thicknessValue.onUpdate((value) => {
+            this.thickness = value;
+            this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+                kind: EditorEventType.ToolUpdated,
+                tool: this,
+            });
+        });
+        this.modeValue = ReactiveValue.fromInitialValue(options?.mode ?? EraserMode.FullStroke);
+        this.modeValue.onUpdate((_value) => {
+            this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+                kind: EditorEventType.ToolUpdated,
+                tool: this,
+            });
+        });
+    }
+    /**
+     * @returns a tool that briefly enables the eraser when a physical eraser is used.
+     * This tool should be added to the tool list after the primary tools.
+     */
+    makeEraserSwitcherTool() {
+        return new EraserSwitcher(this.editor, this);
+    }
+    clearPreview() {
+        this.editor.clearWetInk();
+    }
+    getSizeOnCanvas() {
+        return this.thickness / this.editor.viewport.getScaleFactor();
+    }
+    drawPreviewAt(point) {
+        this.clearPreview();
+        const size = this.getSizeOnCanvas();
+        const renderer = this.editor.display.getWetInkRenderer();
+        const rect = this.getEraserRect(point);
+        const rect2 = this.getEraserRect(this.lastPoint ?? point);
+        const fill = {
+            fill: Color4.transparent,
+            stroke: { width: size / 10, color: Color4.gray },
+        };
+        renderer.drawPath(pathToRenderable(Path.fromConvexHullOf([...rect.corners, ...rect2.corners]), fill));
+    }
+    /**
+     * @returns the eraser rectangle in canvas coordinates.
+     *
+     * For now, all erasers are rectangles or points.
+     */
+    getEraserRect(centerPoint) {
+        const size = this.getSizeOnCanvas();
+        const halfSize = Vec2.of(size / 2, size / 2);
+        return Rect2.fromCorners(centerPoint.minus(halfSize), centerPoint.plus(halfSize));
+    }
+    /** Erases in a line from the last point to the current. */
+    eraseTo(currentPoint) {
+        if (!this.isFirstEraseEvt && currentPoint.distanceTo(this.lastPoint) === 0) {
+            return;
+        }
+        this.isFirstEraseEvt = false;
+        // Currently only objects within eraserRect or that intersect a straight line
+        // from the center of the current rect to the previous are erased. TODO: Erase
+        // all objects as if there were pointerMove events between the two points.
+        const eraserRect = this.getEraserRect(currentPoint);
+        const line = new LineSegment2(this.lastPoint, currentPoint);
+        const region = Rect2.union(line.bbox, eraserRect);
+        const intersectingElems = this.editor.image
+            .getElementsIntersectingRegion(region)
+            .filter((component) => {
+            return component.intersects(line) || component.intersectsRect(eraserRect);
+        });
+        // Only erase components that could be selected (and thus interacted with)
+        // by the user.
+        const eraseableElems = intersectingElems.filter((elem) => elem.isSelectable());
+        if (this.modeValue.get() === EraserMode.FullStroke) {
+            // Remove any intersecting elements.
+            this.toRemove.push(...eraseableElems);
+            // Create new Erase commands for the now-to-be-erased elements and apply them.
+            const newPartialCommands = eraseableElems.map((elem) => new Erase([elem]));
+            newPartialCommands.forEach((cmd) => cmd.apply(this.editor));
+            this.eraseCommands.push(...newPartialCommands);
+        }
+        else {
+            const toErase = [];
+            const toAdd = [];
+            for (const targetElem of eraseableElems) {
+                toErase.push(targetElem);
+                // Completely delete items that can't be divided.
+                if (!targetElem.withRegionErased) {
+                    continue;
+                }
+                // Completely delete items that are completely or almost completely
+                // contained within the eraser.
+                const grownRect = eraserRect.grownBy(eraserRect.maxDimension / 3);
+                if (grownRect.containsRect(targetElem.getExactBBox())) {
+                    continue;
+                }
+                // Join the current and previous rectangles so that points between events are also
+                // erased.
+                const erasePath = Path.fromConvexHullOf([
+                    ...eraserRect.corners,
+                    ...this.getEraserRect(this.lastPoint ?? currentPoint).corners,
+                ].map((p) => this.editor.viewport.roundPoint(p)));
+                toAdd.push(...targetElem.withRegionErased(erasePath, this.editor.viewport));
+            }
+            const eraseCommand = new Erase(toErase);
+            const newAddCommands = toAdd.map((elem) => EditorImage.addElement(elem));
+            eraseCommand.apply(this.editor);
+            newAddCommands.forEach((command) => command.apply(this.editor));
+            const finalToErase = [];
+            for (const item of toErase) {
+                if (this.toAdd.has(item)) {
+                    this.toAdd.delete(item);
+                }
+                else {
+                    finalToErase.push(item);
+                }
+            }
+            this.toRemove.push(...finalToErase);
+            for (const item of toAdd) {
+                this.toAdd.add(item);
+            }
+            this.eraseCommands.push(new Erase(finalToErase));
+            this.addCommands.push(...newAddCommands);
+        }
+        this.drawPreviewAt(currentPoint);
+        this.lastPoint = currentPoint;
+    }
+    onPointerDown(event) {
+        if (event.allPointers.length === 1 || event.current.device === PointerDevice.Eraser) {
+            this.lastPoint = event.current.canvasPos;
+            this.toRemove = [];
+            this.toAdd.clear();
+            this.isFirstEraseEvt = true;
+            this.drawPreviewAt(event.current.canvasPos);
+            return true;
+        }
+        return false;
+    }
+    onPointerMove(event) {
+        const currentPoint = event.current.canvasPos;
+        this.eraseTo(currentPoint);
+    }
+    onPointerUp(event) {
+        this.eraseTo(event.current.canvasPos);
+        const commands = [];
+        if (this.addCommands.length > 0) {
+            this.addCommands.forEach((cmd) => cmd.unapply(this.editor));
+            // Remove items from toAdd that are also present in toRemove -- adding, then
+            // removing these does nothing, and can break undo/redo.
+            for (const item of this.toAdd) {
+                if (this.toRemove.includes(item)) {
+                    this.toAdd.delete(item);
+                    this.toRemove = this.toRemove.filter((other) => other !== item);
+                }
+            }
+            for (const item of this.toRemove) {
+                if (this.toAdd.has(item)) {
+                    this.toAdd.delete(item);
+                    this.toRemove = this.toRemove.filter((other) => other !== item);
+                }
+            }
+            commands.push(...[...this.toAdd].map((a) => EditorImage.addElement(a)));
+            this.addCommands = [];
+        }
+        if (this.eraseCommands.length > 0) {
+            // Undo commands for each individual component and unite into a single command.
+            this.eraseCommands.forEach((cmd) => cmd.unapply(this.editor));
+            this.eraseCommands = [];
+            const command = new Erase(this.toRemove);
+            commands.push(command);
+        }
+        if (commands.length === 1) {
+            this.editor.dispatch(commands[0]); // dispatch: Makes undo-able.
+        }
+        else {
+            this.editor.dispatch(uniteCommands(commands));
+        }
+        this.clearPreview();
+    }
+    onGestureCancel(_event) {
+        this.addCommands.forEach((cmd) => cmd.unapply(this.editor));
+        this.eraseCommands.forEach((cmd) => cmd.unapply(this.editor));
+        this.eraseCommands = [];
+        this.addCommands = [];
+        this.clearPreview();
+    }
+    onKeyPress(event) {
+        const shortcuts = this.editor.shortcuts;
+        let newThickness;
+        if (shortcuts.matchesShortcut(decreaseSizeKeyboardShortcutId, event)) {
+            newThickness = (this.getThickness() * 2) / 3;
+        }
+        else if (shortcuts.matchesShortcut(increaseSizeKeyboardShortcutId, event)) {
+            newThickness = (this.getThickness() * 3) / 2;
+        }
+        if (newThickness !== undefined) {
+            newThickness = Math.min(Math.max(1, newThickness), 200);
+            this.setThickness(newThickness);
+            return true;
+        }
+        return false;
+    }
+    /** Returns the side-length of the tip of this eraser. */
+    getThickness() {
+        return this.thickness;
+    }
+    /** Sets the side-length of this' tip. */
+    setThickness(thickness) {
+        this.thicknessValue.set(thickness);
+    }
+    /**
+     * Returns a {@link MutableReactiveValue} that can be used to watch
+     * this tool's thickness.
+     */
+    getThicknessValue() {
+        return this.thicknessValue;
+    }
+    /** @returns An object that allows switching between a full stroke and a partial stroke eraser. */
+    getModeValue() {
+        return this.modeValue;
+    }
+}

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

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

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

@@ -0,0 +1,21 @@
+import Editor from '../Editor';
+import { KeyPressEvent } from '../inputEvents';
+import BaseTool from './BaseTool';
+export default class FindTool extends BaseTool {
+    private editor;
+    private overlay;
+    private searchInput;
+    private currentMatchIdx;
+    constructor(editor: Editor);
+    canReceiveInputInReadOnlyEditor(): boolean;
+    private getMatches;
+    private focusCurrentMatch;
+    private toNextMatch;
+    private toPrevMatch;
+    private fillOverlay;
+    private isVisible;
+    private setVisible;
+    private toggleVisible;
+    onKeyPress(event: KeyPressEvent): boolean;
+    setEnabled(enabled: boolean): void;
+}

package/dist/mjs/tools/FindTool.mjs

@@ -0,0 +1,131 @@
+// Displays a find dialog that allows the user to search for and focus text.
+//
+// @packageDocumentation
+import  TextComponent  from '../components/TextComponent.mjs';
+import  ImageComponent  from '../components/ImageComponent.mjs';
+import  BaseTool  from './BaseTool.mjs';
+import  { toggleFindVisibleShortcutId }  from './keybindings.mjs';
+const cssPrefix = 'find-tool';
+export default class FindTool extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.findLabel);
+        this.editor = editor;
+        this.currentMatchIdx = 0;
+        this.overlay = document.createElement('div');
+        this.fillOverlay();
+        editor.createHTMLOverlay(this.overlay);
+        this.overlay.style.display = 'none';
+        this.overlay.classList.add(`${cssPrefix}-overlay`);
+    }
+    canReceiveInputInReadOnlyEditor() {
+        return true;
+    }
+    getMatches(searchFor) {
+        const lowerSearchFor = searchFor.toLocaleLowerCase();
+        const matchingComponents = this.editor.image.getAllElements().filter((component) => {
+            let text = '';
+            if (component instanceof TextComponent) {
+                text = component.getText();
+            }
+            else if (component instanceof ImageComponent) {
+                text = component.getAltText() ?? '';
+            }
+            else {
+                return false;
+            }
+            const hasLowercaseMatch = text.toLocaleLowerCase().indexOf(lowerSearchFor) !== -1;
+            const hasSameCaseMatch = text.indexOf(searchFor) !== -1;
+            return hasLowercaseMatch || hasSameCaseMatch;
+        });
+        return matchingComponents.map((match) => match.getBBox());
+    }
+    focusCurrentMatch() {
+        const matches = this.getMatches(this.searchInput.value);
+        let matchIdx = this.currentMatchIdx % matches.length;
+        if (matchIdx < 0) {
+            matchIdx = matches.length + matchIdx;
+        }
+        if (matchIdx < matches.length) {
+            const undoable = false;
+            void this.editor.dispatch(this.editor.viewport.zoomTo(matches[matchIdx], true, true), undoable);
+            this.editor.announceForAccessibility(this.editor.localization.focusedFoundText(matchIdx + 1, matches.length));
+        }
+    }
+    toNextMatch() {
+        this.currentMatchIdx++;
+        this.focusCurrentMatch();
+    }
+    toPrevMatch() {
+        this.currentMatchIdx--;
+        this.focusCurrentMatch();
+    }
+    fillOverlay() {
+        const label = document.createElement('label');
+        this.searchInput = document.createElement('input');
+        const nextBtn = document.createElement('button');
+        const closeBtn = document.createElement('button');
+        // Math.random() ensures that the ID is unique (to allow us to refer to it
+        // with an htmlFor).
+        this.searchInput.setAttribute('id', `${cssPrefix}-searchInput-${Math.random()}`);
+        label.htmlFor = this.searchInput.getAttribute('id');
+        label.innerText = this.editor.localization.findLabel;
+        nextBtn.innerText = this.editor.localization.toNextMatch;
+        closeBtn.innerText = this.editor.localization.closeDialog;
+        this.searchInput.onkeydown = (ev) => {
+            if (ev.key === 'Enter') {
+                if (ev.shiftKey) {
+                    this.toPrevMatch();
+                }
+                else {
+                    this.toNextMatch();
+                }
+            }
+            else if (ev.key === 'Escape') {
+                this.setVisible(false);
+            }
+            else if (this.editor.shortcuts.matchesShortcut(toggleFindVisibleShortcutId, ev)) {
+                ev.preventDefault();
+                this.toggleVisible();
+            }
+        };
+        nextBtn.onclick = () => {
+            this.toNextMatch();
+        };
+        closeBtn.onclick = () => {
+            this.setVisible(false);
+        };
+        this.overlay.replaceChildren(label, this.searchInput, nextBtn, closeBtn);
+    }
+    isVisible() {
+        return this.overlay.style.display !== 'none';
+    }
+    setVisible(visible) {
+        if (visible !== this.isVisible()) {
+            this.overlay.style.display = visible ? 'block' : 'none';
+            if (visible) {
+                this.searchInput.focus();
+                this.editor.announceForAccessibility(this.editor.localization.findDialogShown);
+            }
+            else {
+                this.editor.focus();
+                this.editor.announceForAccessibility(this.editor.localization.findDialogHidden);
+            }
+        }
+    }
+    toggleVisible() {
+        this.setVisible(!this.isVisible());
+    }
+    onKeyPress(event) {
+        if (this.editor.shortcuts.matchesShortcut(toggleFindVisibleShortcutId, event)) {
+            this.toggleVisible();
+            return true;
+        }
+        return false;
+    }
+    setEnabled(enabled) {
+        super.setEnabled(enabled);
+        if (this.isEnabled()) {
+            this.setVisible(false);
+        }
+    }
+}

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

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