@aseity/idocs-preview 0.3.0 → 0.5.0

package/dist/view/editor.js

@@ -0,0 +1,1485 @@
+import { canvasFont, CANVAS_TEXT_LANGUAGE } from '../core/fonts.js';
+import { EditDocumentIndex, orderedAnchors } from './edit-selection.js';
+import { createFindBar } from './find-bar.js';
+import { Finder } from './find.js';
+import { createImeBridge } from './ime.js';
+import { decodeImages, paintPage } from './index.js';
+import { paintHighlightBoxes } from './selection-layer.js';
+import { TextIndex, turnedToPage } from './selection.js';
+import { anchorAt, canvasResolution, currentPage, fitWidthZoom, layoutPages, pagesToKeep, PX_PER_PT, revealScroll, scrollTopFor, } from './viewport.js';
+const SPACING = { gap: 16, padding: 16 };
+const SELECTION_HIGHLIGHT = 'rgba(37, 99, 235, 0.22)';
+const MATCH_HIGHLIGHT = 'rgba(255, 200, 0, 0.4)';
+const CURRENT_MATCH_HIGHLIGHT = 'rgba(255, 130, 0, 0.55)';
+const READONLY_FILL = 'rgba(217, 119, 6, 0.16)';
+const READONLY_STROKE = '#d97706';
+const DEFAULT_TEXT_COLOR = '#000';
+const DRAG_EDGE = 16;
+function clampZoom(zoom) {
+    return Number.isFinite(zoom) && zoom > 0 ? Math.min(10, Math.max(0.1, zoom)) : 1;
+}
+function element(tag, className) {
+    const node = document.createElement(tag);
+    node.className = className;
+    return node;
+}
+function freeCanvas(canvas) {
+    canvas.width = 0;
+    canvas.height = 0;
+    canvas.remove();
+}
+function isCollapsedRange(range) {
+    return range.start.flow === range.end.flow && range.start.offset === range.end.offset;
+}
+function sameAnchorValue(a, b) {
+    return a.session === b.session && a.flow === b.flow && a.offset === b.offset && a.affinity === b.affinity;
+}
+function sameSelection(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    return (a.revision === b.revision &&
+        a.reversed === b.reversed &&
+        a.range.revision === b.range.revision &&
+        sameAnchorValue(a.range.start, b.range.start) &&
+        sameAnchorValue(a.range.end, b.range.end));
+}
+function activeHead(selection) {
+    return selection.reversed ? selection.range.start : selection.range.end;
+}
+function anchorPoint(selection) {
+    return selection.reversed ? selection.range.end : selection.range.start;
+}
+function sameImageList(a, b) {
+    if (!a || a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i += 1) {
+        if (a[i].missing !== b[i].missing ||
+            a[i].format !== b[i].format ||
+            a[i].washout !== b[i].washout ||
+            a[i].bytes !== b[i].bytes) {
+            return false;
+        }
+    }
+    return true;
+}
+function boxPageBounds(box) {
+    if (!box.turn)
+        return { left: box.left, right: box.right, top: box.top, bottom: box.bottom };
+    const [x1, y1] = turnedToPage(box.turn, box.left, box.top);
+    const [x2, y2] = turnedToPage(box.turn, box.right, box.bottom);
+    return {
+        left: Math.min(x1, x2),
+        right: Math.max(x1, x2),
+        top: Math.min(y1, y2),
+        bottom: Math.max(y1, y2),
+    };
+}
+function caretPageBounds(caret) {
+    if (!caret.turn)
+        return { left: caret.x, right: caret.x, top: caret.top, bottom: caret.bottom };
+    const [x1, y1] = turnedToPage(caret.turn, caret.x, caret.top);
+    const [x2, y2] = turnedToPage(caret.turn, caret.x, caret.bottom);
+    return {
+        left: Math.min(x1, x2),
+        right: Math.max(x1, x2),
+        top: Math.min(y1, y2),
+        bottom: Math.max(y1, y2),
+    };
+}
+function roundedPath(ctx, x, y, w, h, r) {
+    const radius = Math.min(r, w / 2, h / 2);
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + w - radius, y);
+    ctx.quadraticCurveTo(x + w, y, x + w, y + radius);
+    ctx.lineTo(x + w, y + h - radius);
+    ctx.quadraticCurveTo(x + w, y + h, x + w - radius, y + h);
+    ctx.lineTo(x + radius, y + h);
+    ctx.quadraticCurveTo(x, y + h, x, y + h - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+}
+function paintReadOnlyBox(ctx, box) {
+    ctx.save();
+    if (box.turn)
+        ctx.transform(0, 1, -1, 0, box.turn[0], box.turn[1]);
+    const w = Math.max(4, box.right - box.left);
+    const h = Math.max(4, box.bottom - box.top);
+    roundedPath(ctx, box.left, box.top, w, h, 2);
+    ctx.fillStyle = READONLY_FILL;
+    ctx.fill();
+    ctx.strokeStyle = READONLY_STROKE;
+    ctx.lineWidth = 0.9;
+    ctx.setLineDash([3, 2]);
+    ctx.stroke();
+    ctx.restore();
+}
+function paintSelectedImageBox(ctx, box) {
+    ctx.save();
+    ctx.strokeStyle = '#0071e3';
+    ctx.lineWidth = 1.5;
+    ctx.strokeRect(box.x, box.y, Math.max(4, box.width), Math.max(4, box.height));
+    const handle = 5;
+    const corners = [
+        [box.x, box.y],
+        [box.x + box.width, box.y],
+        [box.x, box.y + box.height],
+        [box.x + box.width, box.y + box.height],
+    ];
+    ctx.fillStyle = '#ffffff';
+    for (const [cx, cy] of corners) {
+        ctx.fillRect(cx - handle / 2, cy - handle / 2, handle, handle);
+        ctx.strokeRect(cx - handle / 2, cy - handle / 2, handle, handle);
+    }
+    ctx.restore();
+}
+function intersectRect(a, b) {
+    if (!a)
+        return b;
+    const left = Math.max(a.x, b.x);
+    const top = Math.max(a.y, b.y);
+    const right = Math.min(a.x + a.width, b.x + b.width);
+    const bottom = Math.min(a.y + a.height, b.y + b.height);
+    return {
+        x: left,
+        y: top,
+        width: Math.max(0, right - left),
+        height: Math.max(0, bottom - top),
+    };
+}
+function isSelectableBlockImagePath(path) {
+    return path.length > 0 && !path.includes('.text.');
+}
+function hitImageInItems(items, x, y, clip) {
+    for (let i = items.length - 1; i >= 0; i -= 1) {
+        const item = items[i];
+        if (item.kind === 'clip') {
+            const nextClip = intersectRect(clip, item.rect);
+            if (x < nextClip.x || x > nextClip.x + nextClip.width || y < nextClip.y || y > nextClip.y + nextClip.height) {
+                continue;
+            }
+            const nested = hitImageInItems(item.items, x, y, nextClip);
+            if (nested)
+                return nested;
+        }
+        else if (item.kind === 'image' && isSelectableBlockImagePath(item.path)) {
+            const box = intersectRect(clip, item);
+            if (x >= box.x && x <= box.x + box.width && y >= box.y && y <= box.y + box.height) {
+                return { path: item.path, box };
+            }
+        }
+    }
+    return null;
+}
+function findImageBoxByPath(items, path, clip) {
+    for (let i = items.length - 1; i >= 0; i -= 1) {
+        const item = items[i];
+        if (item.kind === 'clip') {
+            const nested = findImageBoxByPath(item.items, path, intersectRect(clip, item.rect));
+            if (nested)
+                return nested;
+        }
+        else if (item.kind === 'image' && item.path === path) {
+            return intersectRect(clip, item);
+        }
+    }
+    return null;
+}
+function paintCaretBar(ctx, caret) {
+    ctx.save();
+    if (caret.turn)
+        ctx.transform(0, 1, -1, 0, caret.turn[0], caret.turn[1]);
+    ctx.fillStyle = caret.style?.color ?? DEFAULT_TEXT_COLOR;
+    ctx.fillRect(caret.x - 0.5, caret.top, 1, caret.height);
+    ctx.restore();
+}
+function paintImePreview(ctx, caret, text) {
+    ctx.save();
+    if (caret.turn)
+        ctx.transform(0, 1, -1, 0, caret.turn[0], caret.turn[1]);
+    ctx.font = caret.style ? canvasFont(caret.style) : `${caret.height}px system-ui, sans-serif`;
+    Object.assign(ctx, { lang: CANVAS_TEXT_LANGUAGE });
+    ctx.fontKerning = 'none';
+    ctx.textBaseline = 'alphabetic';
+    ctx.textAlign = 'left';
+    const textWidth = text ? ctx.measureText(text).width : 0;
+    const padX = 2;
+    const boxWidth = Math.max(4, textWidth + padX * 2);
+    const boxHeight = caret.height;
+    roundedPath(ctx, caret.x, caret.top, boxWidth, boxHeight, 2);
+    ctx.fillStyle = 'rgba(255, 255, 255, 0.96)';
+    ctx.fill();
+    ctx.strokeStyle = 'rgba(37, 99, 235, 0.35)';
+    ctx.lineWidth = 0.75;
+    ctx.stroke();
+    if (text) {
+        ctx.fillStyle = caret.style?.color ?? DEFAULT_TEXT_COLOR;
+        ctx.fillText(text, caret.x + padX, caret.baseline);
+        ctx.beginPath();
+        ctx.moveTo(caret.x + padX, caret.baseline + 1.5);
+        ctx.lineTo(caret.x + padX + textWidth, caret.baseline + 1.5);
+        ctx.strokeStyle = caret.style?.color ?? DEFAULT_TEXT_COLOR;
+        ctx.lineWidth = 1;
+        ctx.setLineDash([2, 1.5]);
+        ctx.stroke();
+        ctx.setLineDash([]);
+    }
+    ctx.fillStyle = caret.style?.color ?? DEFAULT_TEXT_COLOR;
+    ctx.fillRect(caret.x + padX + textWidth - 0.5, caret.top, 1, boxHeight);
+    ctx.restore();
+}
+function detectMarkInRuns(doc, index, range, mark) {
+    const path = index.flowPath(range.start.flow);
+    if (!path)
+        return undefined;
+    let sawGlyph = false;
+    for (let p = 0; p < doc.pages.length; p += 1) {
+        const boxes = index.highlightsForRange(range, p);
+        if (boxes.length === 0)
+            continue;
+        for (const item of doc.pages[p].items) {
+            if (item.kind !== 'glyphs' || item.path !== path)
+                continue;
+            const run = item;
+            for (const box of boxes) {
+                if (run.baseline < box.top - 2 || run.baseline > box.bottom + 2)
+                    continue;
+                const firstX = run.glyphs[0]?.x ?? 0;
+                const lastGlyph = run.glyphs[run.glyphs.length - 1];
+                const lastX = lastGlyph ? lastGlyph.x + lastGlyph.width : firstX;
+                if (lastX < box.left - 0.5 || firstX > box.right + 0.5)
+                    continue;
+                sawGlyph = true;
+                if (!run[mark])
+                    return false;
+            }
+        }
+    }
+    return sawGlyph ? true : undefined;
+}
+export function mountEditor(container, session, options = {}) {
+    let zoom = clampZoom(options.zoom);
+    let isReadOnly = options.readOnly === true;
+    const bottomInset = Math.max(0, options.bottomInset ?? 0);
+    const effectiveBottomInset = () => (isReadOnly ? 0 : bottomInset);
+    let doc;
+    let docRevision;
+    let editIndex;
+    let layout = layoutPages([], zoom, SPACING);
+    let current = -1;
+    let frame = 0;
+    let destroyed = false;
+    let images = [];
+    let lastImages;
+    const slots = new Map();
+    let activeSelection = null;
+    let readOnlyTarget = null;
+    let selectedImageTarget = null;
+    let lastCaret = null;
+    let preferredX;
+    let drag;
+    let dragFrame = 0;
+    let lastDragPoint;
+    let autoscroll = 0;
+    let caretVisible = true;
+    let solidTimer;
+    let blinkTimer;
+    let pendingScrollReveal = false;
+    let readyWaiters = [];
+    const markToggleHints = new Map();
+    const view = element('div', 'idocs-editor-view');
+    Object.assign(view.style, { height: '100%', position: 'relative' });
+    const scroller = element('div', 'idocs-preview-scroller');
+    Object.assign(scroller.style, { height: '100%', overflow: 'auto', position: 'relative' });
+    scroller.tabIndex = 0;
+    const content = element('div', 'idocs-preview-pages');
+    Object.assign(content.style, { position: 'relative', userSelect: 'none', cursor: 'text' });
+    scroller.append(content);
+    view.append(scroller);
+    container.append(view);
+    const currentRevision = () => session.state().revision;
+    const resolveCaret = () => {
+        if (!activeSelection || !editIndex)
+            return lastCaret;
+        const box = editIndex.caretForAnchor(activeHead(activeSelection));
+        if (box) {
+            lastCaret = box;
+            return box;
+        }
+        return lastCaret;
+    };
+    const repaintOverlays = () => {
+        for (const [index, slot] of slots)
+            paintOverlay(index, slot.overlay, slot.pixelsPerPoint);
+    };
+    const clearBlinkTimers = () => {
+        if (solidTimer !== undefined) {
+            clearTimeout(solidTimer);
+            solidTimer = undefined;
+        }
+        if (blinkTimer !== undefined) {
+            clearInterval(blinkTimer);
+            blinkTimer = undefined;
+        }
+    };
+    const resetBlink = () => {
+        clearBlinkTimers();
+        caretVisible = true;
+        repaintOverlays();
+        if (destroyed || !ime.focused || isReadOnly)
+            return;
+        if (!activeSelection || !isCollapsedRange(activeSelection.range))
+            return;
+        solidTimer = setTimeout(() => {
+            solidTimer = undefined;
+            if (destroyed || !ime.focused)
+                return;
+            blinkTimer = setInterval(() => {
+                if (destroyed || !ime.focused) {
+                    clearBlinkTimers();
+                    return;
+                }
+                caretVisible = !caretVisible;
+                repaintOverlays();
+            }, 530);
+        }, 500);
+    };
+    const buildViewSelection = () => {
+        if (!activeSelection || !editIndex)
+            return null;
+        const range = activeSelection.range;
+        const index = editIndex;
+        const canQuote = range.revision === docRevision;
+        const path = editIndex.flowPath(range.start.flow) ?? '';
+        let page = 0;
+        let pageBounds = { left: 0, right: 0, top: 0, bottom: 0 };
+        if (isCollapsedRange(range)) {
+            const caret = editIndex.caretForAnchor(range.start);
+            if (!caret)
+                return null;
+            page = caret.page;
+            pageBounds = caretPageBounds(caret);
+        }
+        else {
+            const found = editIndex.selectionPageBounds(range);
+            if (!found) {
+                const caret = editIndex.caretForAnchor(activeHead(activeSelection));
+                if (!caret)
+                    return null;
+                page = caret.page;
+                pageBounds = caretPageBounds(caret);
+            }
+            else {
+                page = found.page;
+                pageBounds = found.bounds;
+            }
+        }
+        let clientRect = null;
+        const placed = layout.pages[page];
+        if (placed && view.isConnected) {
+            const scrollerRect = scroller.getBoundingClientRect();
+            const scale = PX_PER_PT * zoom;
+            const contentWidth = Math.max(scroller.clientWidth, content.clientWidth, layout.width);
+            const pageLeft = contentWidth / 2 - placed.width / 2;
+            const left = scrollerRect.left + pageLeft - scroller.scrollLeft + pageBounds.left * scale;
+            const right = scrollerRect.left + pageLeft - scroller.scrollLeft + pageBounds.right * scale;
+            const top = scrollerRect.top + placed.top - scroller.scrollTop + pageBounds.top * scale;
+            const bottom = scrollerRect.top + placed.top - scroller.scrollTop + pageBounds.bottom * scale;
+            clientRect = {
+                left,
+                top,
+                right,
+                bottom,
+                width: right - left,
+                height: bottom - top,
+            };
+        }
+        return {
+            selection: activeSelection,
+            text: isCollapsedRange(range) ? '' : editIndex.selectedText(range),
+            get excerpt() {
+                return canQuote ? index.selectedText(range, 'quote') : '';
+            },
+            path,
+            page,
+            pageBounds,
+            clientRect,
+        };
+    };
+    const emitSelectionChange = () => {
+        options.onSelectionChange?.(buildViewSelection());
+    };
+    const setSelectionLocal = (next, reveal = false) => {
+        if (!reveal && sameSelection(activeSelection, next) && !readOnlyTarget && !selectedImageTarget) {
+            return;
+        }
+        activeSelection = next;
+        if (next) {
+            if (readOnlyTarget) {
+                readOnlyTarget = null;
+                options.onReadOnlyTarget?.(null);
+            }
+            if (selectedImageTarget) {
+                selectedImageTarget = null;
+                options.onImageSelect?.(null);
+            }
+        }
+        const caret = next ? (editIndex?.caretForAnchor(activeHead(next)) ?? null) : null;
+        if (caret)
+            lastCaret = caret;
+        ime.position(caret);
+        resetBlink();
+        if (reveal)
+            revealCaret();
+        emitSelectionChange();
+    };
+    const setReadOnlyLocal = (target) => {
+        readOnlyTarget = target;
+        if (target) {
+            activeSelection = null;
+            lastCaret = null;
+            ime.position(null);
+            emitSelectionChange();
+            if (selectedImageTarget) {
+                selectedImageTarget = null;
+                options.onImageSelect?.(null);
+            }
+        }
+        repaintOverlays();
+        options.onReadOnlyTarget?.(target);
+    };
+    const setSelectedImageLocal = (target) => {
+        selectedImageTarget = target;
+        if (target) {
+            activeSelection = null;
+            readOnlyTarget = null;
+            lastCaret = null;
+            ime.position(null);
+            emitSelectionChange();
+            options.onReadOnlyTarget?.(null);
+        }
+        repaintOverlays();
+        options.onImageSelect?.(target);
+    };
+    const revealCaret = () => {
+        const caret = resolveCaret();
+        if (!caret)
+            return;
+        const bounds = caretPageBounds(caret);
+        const { top, left } = revealScroll(layout, zoom, {
+            page: caret.page,
+            left: bounds.left - 4,
+            right: bounds.right + 4,
+            top: bounds.top - 4,
+            bottom: bounds.bottom + 4,
+        }, { top: scroller.scrollTop, left: scroller.scrollLeft }, { width: scroller.clientWidth, height: Math.max(40, scroller.clientHeight - effectiveBottomInset()) });
+        scroller.scrollTop = top;
+        scroller.scrollLeft = left;
+        ime.position(caret);
+    };
+    const waitForLatestIndex = () => {
+        const targetRev = currentRevision();
+        if (docRevision === targetRev && editIndex)
+            return Promise.resolve(editIndex);
+        if (destroyed)
+            return Promise.resolve(undefined);
+        return new Promise((resolve) => {
+            readyWaiters.push(resolve);
+        });
+    };
+    const flushWaiters = (index) => {
+        if (readyWaiters.length === 0)
+            return;
+        const waiters = readyWaiters;
+        readyWaiters = [];
+        for (const resolve of waiters)
+            resolve(index);
+    };
+    const makeSelectionFromAnchors = (revision, a, b) => {
+        const ordered = orderedAnchors(a, b);
+        return {
+            revision,
+            range: { revision, start: ordered.start, end: ordered.end },
+            reversed: ordered.reversed,
+        };
+    };
+    const applyRangeText = async (base, range, text) => {
+        if (destroyed || isReadOnly)
+            return null;
+        pendingScrollReveal = true;
+        const commit = await session.apply({
+            base,
+            edit: { kind: 'replaceText', range, text },
+        });
+        return commit;
+    };
+    const replaceSelection = async (text) => {
+        if (destroyed || isReadOnly || !activeSelection)
+            return null;
+        const base = currentRevision();
+        const range = activeSelection.range.revision === base
+            ? activeSelection.range
+            : { revision: base, start: activeSelection.range.start, end: activeSelection.range.end };
+        preferredX = undefined;
+        return applyRangeText(base, range, text);
+    };
+    const performDeleteBackward = async () => {
+        if (destroyed || isReadOnly || !activeSelection)
+            return null;
+        preferredX = undefined;
+        if (!isCollapsedRange(activeSelection.range)) {
+            return replaceSelection('');
+        }
+        const index = await waitForLatestIndex();
+        if (destroyed || isReadOnly || !index || !activeSelection)
+            return null;
+        const base = currentRevision();
+        const anchor = activeSelection.range.start;
+        if (anchor.offset === 0) {
+            pendingScrollReveal = true;
+            return session.apply({ base, edit: { kind: 'mergeBackward', at: anchor } });
+        }
+        const prev = index.neighborStop(anchor, 'backward');
+        if (!prev) {
+            pendingScrollReveal = true;
+            return session.apply({ base, edit: { kind: 'mergeBackward', at: anchor } });
+        }
+        return applyRangeText(base, { revision: base, start: prev, end: anchor }, '');
+    };
+    const performDeleteForward = async () => {
+        if (destroyed || isReadOnly || !activeSelection)
+            return null;
+        preferredX = undefined;
+        if (!isCollapsedRange(activeSelection.range)) {
+            return replaceSelection('');
+        }
+        const index = await waitForLatestIndex();
+        if (destroyed || isReadOnly || !index || !activeSelection)
+            return null;
+        const base = currentRevision();
+        const anchor = activeSelection.range.start;
+        const next = index.neighborStop(anchor, 'forward');
+        if (!next)
+            return null;
+        return applyRangeText(base, { revision: base, start: anchor, end: next }, '');
+    };
+    const performSplitBlock = async () => {
+        if (destroyed || isReadOnly || !activeSelection)
+            return null;
+        preferredX = undefined;
+        pendingScrollReveal = true;
+        let base = currentRevision();
+        let splitAt = activeSelection.range.start;
+        if (!isCollapsedRange(activeSelection.range)) {
+            const range = activeSelection.range.revision === base
+                ? activeSelection.range
+                : { revision: base, start: activeSelection.range.start, end: activeSelection.range.end };
+            const deleted = await session.apply({
+                base,
+                edit: { kind: 'replaceText', range, text: '' },
+            });
+            base = deleted.revision;
+            if (deleted.selection)
+                splitAt = deleted.selection.range.start;
+        }
+        return session.apply({ base, edit: { kind: 'splitBlock', at: splitAt } });
+    };
+    const performToggleMark = async (mark, enabled) => {
+        if (destroyed || isReadOnly || !activeSelection || isCollapsedRange(activeSelection.range))
+            return null;
+        const base = currentRevision();
+        const range = activeSelection.range.revision === base
+            ? activeSelection.range
+            : { revision: base, start: activeSelection.range.start, end: activeSelection.range.end };
+        const hintKey = `${range.start.flow}:${range.start.offset}:${range.end.offset}:${mark}`;
+        let desired;
+        if (enabled !== undefined) {
+            desired = enabled;
+        }
+        else if (markToggleHints.has(hintKey)) {
+            desired = !markToggleHints.get(hintKey);
+        }
+        else if ((mark === 'bold' || mark === 'italic') && doc && editIndex) {
+            const detected = detectMarkInRuns(doc, editIndex, range, mark);
+            desired = detected === undefined ? true : !detected;
+        }
+        else {
+            desired = true;
+        }
+        const commit = await session.apply({
+            base,
+            edit: { kind: 'setMark', range, mark, enabled: desired },
+        });
+        if (enabled === undefined && commit.revision === base) {
+            const flipped = !desired;
+            const retry = await session.apply({
+                base,
+                edit: { kind: 'setMark', range, mark, enabled: flipped },
+            });
+            markToggleHints.set(hintKey, flipped);
+            return retry;
+        }
+        markToggleHints.set(hintKey, desired);
+        return commit;
+    };
+    const performUndo = async () => {
+        if (destroyed || isReadOnly || !session.state().canUndo)
+            return null;
+        preferredX = undefined;
+        pendingScrollReveal = true;
+        return session.undo({ base: currentRevision() });
+    };
+    const performRedo = async () => {
+        if (destroyed || isReadOnly || !session.state().canRedo)
+            return null;
+        preferredX = undefined;
+        pendingScrollReveal = true;
+        return session.redo({ base: currentRevision() });
+    };
+    const moveHorizontal = async (direction, granularity, extend) => {
+        const index = await waitForLatestIndex();
+        if (destroyed || !index || !activeSelection)
+            return;
+        preferredX = undefined;
+        const rev = currentRevision();
+        if (!extend && !isCollapsedRange(activeSelection.range)) {
+            const target = direction === 'backward' ? activeSelection.range.start : activeSelection.range.end;
+            setSelectionLocal(makeSelectionFromAnchors(rev, target, target), true);
+            return;
+        }
+        const head = activeHead(activeSelection);
+        const nextHead = index.moveHorizontal(head, direction, granularity);
+        if (extend) {
+            const fixed = anchorPoint(activeSelection);
+            setSelectionLocal(makeSelectionFromAnchors(rev, fixed, nextHead), true);
+        }
+        else {
+            setSelectionLocal(makeSelectionFromAnchors(rev, nextHead, nextHead), true);
+        }
+    };
+    const moveVertical = async (direction, extend) => {
+        const index = await waitForLatestIndex();
+        if (destroyed || !index || !activeSelection)
+            return;
+        const rev = currentRevision();
+        const head = activeHead(activeSelection);
+        const moved = index.moveVertical(head, direction, preferredX);
+        preferredX = moved.preferredX;
+        if (extend) {
+            const fixed = anchorPoint(activeSelection);
+            setSelectionLocal(makeSelectionFromAnchors(rev, fixed, moved.anchor), true);
+        }
+        else {
+            setSelectionLocal(makeSelectionFromAnchors(rev, moved.anchor, moved.anchor), true);
+        }
+    };
+    const moveLineBoundary = async (edge, extend) => {
+        const index = await waitForLatestIndex();
+        if (destroyed || !index || !activeSelection)
+            return;
+        preferredX = undefined;
+        const rev = currentRevision();
+        const head = activeHead(activeSelection);
+        const nextHead = index.moveLineBoundary(head, edge);
+        if (extend) {
+            const fixed = anchorPoint(activeSelection);
+            setSelectionLocal(makeSelectionFromAnchors(rev, fixed, nextHead), true);
+        }
+        else {
+            setSelectionLocal(makeSelectionFromAnchors(rev, nextHead, nextHead), true);
+        }
+    };
+    const finder = new Finder(new TextIndex([]));
+    const find = createFindBar({
+        frame: view,
+        finder,
+        currentPage: () => current,
+        reveal: (bounds) => {
+            const { top, left } = revealScroll(layout, zoom, bounds, { top: scroller.scrollTop, left: scroller.scrollLeft }, { width: scroller.clientWidth, height: Math.max(40, scroller.clientHeight - effectiveBottomInset()) });
+            scroller.scrollTop = top;
+            scroller.scrollLeft = left;
+        },
+        repaint: repaintOverlays,
+        closed: () => {
+            ime.focus();
+        },
+    });
+    const ime = createImeBridge({
+        frame: view,
+        scroller,
+        content,
+        layout: () => layout,
+        zoom: () => zoom,
+        isFindOpen: () => find.isOpen,
+        openFind: () => find.open(),
+        closeFind: () => find.close(),
+        currentRevision,
+        currentSelection: () => activeSelection,
+        currentCaret: resolveCaret,
+        selectedText: () => {
+            if (!activeSelection || !editIndex || isCollapsedRange(activeSelection.range))
+                return '';
+            return editIndex.selectedText(activeSelection.range);
+        },
+        hasReadOnlyTarget: () => readOnlyTarget !== null,
+        clearReadOnlyTarget: () => setReadOnlyLocal(null),
+        collapseSelection: () => {
+            if (!activeSelection)
+                return;
+            const head = activeHead(activeSelection);
+            setSelectionLocal(makeSelectionFromAnchors(currentRevision(), head, head));
+        },
+        selectAllInFlow: () => {
+            if (!editIndex)
+                return;
+            const flow = activeSelection?.range.start.flow ?? editIndex.firstFlow();
+            if (!flow)
+                return;
+            const bounds = editIndex.flowBounds(flow);
+            if (!bounds)
+                return;
+            setSelectionLocal(makeSelectionFromAnchors(currentRevision(), bounds.start, bounds.end));
+        },
+        moveHorizontal,
+        moveVertical,
+        moveLineBoundary,
+        replaceSelection,
+        applyRangeText,
+        deleteBackward: performDeleteBackward,
+        deleteForward: performDeleteForward,
+        splitBlock: performSplitBlock,
+        toggleMark: performToggleMark,
+        undo: performUndo,
+        redo: performRedo,
+        onFocusChange: (focused) => {
+            if (focused) {
+                if (!activeSelection && !readOnlyTarget && editIndex) {
+                    const flow = editIndex.firstFlow();
+                    const bounds = flow !== undefined ? editIndex.flowBounds(flow) : undefined;
+                    if (bounds) {
+                        setSelectionLocal(makeSelectionFromAnchors(currentRevision(), bounds.start, bounds.start));
+                        return;
+                    }
+                }
+                resetBlink();
+            }
+            else {
+                clearBlinkTimers();
+                caretVisible = false;
+                repaintOverlays();
+            }
+        },
+        onModeChange: (mode) => {
+            if (mode.kind === 'composing') {
+                clearBlinkTimers();
+            }
+            else {
+                resetBlink();
+            }
+            repaintOverlays();
+        },
+    });
+    const paintOverlay = (index, overlay, pixelsPerPoint) => {
+        const ctx = overlay.getContext('2d');
+        if (!ctx)
+            return;
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.clearRect(0, 0, overlay.width, overlay.height);
+        ctx.setTransform(pixelsPerPoint, 0, 0, pixelsPerPoint, 0, 0);
+        const marks = finder.marks(index);
+        paintHighlightBoxes(ctx, marks.matches, MATCH_HIGHLIGHT);
+        paintHighlightBoxes(ctx, marks.current, CURRENT_MATCH_HIGHLIGHT);
+        if (activeSelection && editIndex && !isCollapsedRange(activeSelection.range)) {
+            const boxes = editIndex.highlightsForRange(activeSelection.range, index);
+            paintHighlightBoxes(ctx, boxes, SELECTION_HIGHLIGHT);
+        }
+        if (readOnlyTarget && readOnlyTarget.page === index) {
+            paintReadOnlyBox(ctx, readOnlyTarget.box);
+        }
+        if (selectedImageTarget && selectedImageTarget.page === index) {
+            paintSelectedImageBox(ctx, selectedImageTarget.box);
+        }
+        if (ime.mode.kind === 'composing' && !isReadOnly) {
+            if (ime.mode.caret.page === index) {
+                paintImePreview(ctx, ime.mode.caret, ime.mode.text);
+            }
+        }
+        else if (!isReadOnly && ime.focused && activeSelection && isCollapsedRange(activeSelection.range) && caretVisible) {
+            const caret = resolveCaret();
+            if (caret && caret.page === index) {
+                paintCaretBar(ctx, caret);
+            }
+        }
+    };
+    const sizeContent = () => {
+        content.style.width = `max(100%, ${layout.width}px)`;
+        content.style.height = `${layout.height + effectiveBottomInset()}px`;
+    };
+    const paintSlot = (index, slot) => {
+        if (!doc)
+            return;
+        const placed = layout.pages[index];
+        const pageData = doc.pages[index];
+        if (!placed || !pageData)
+            return;
+        Object.assign(slot.box.style, {
+            top: `${placed.top}px`,
+            left: `calc(50% - ${placed.width / 2}px)`,
+            width: `${placed.width}px`,
+            height: `${placed.height}px`,
+        });
+        slot.box.dataset.page = String(pageData.number);
+        const res = canvasResolution(placed.width, placed.height, globalThis.devicePixelRatio || 1, options.maxCanvasPixels);
+        const { canvas, overlay } = slot;
+        canvas.width = res.width;
+        canvas.height = res.height;
+        canvas.style.width = `${res.width / res.scale}px`;
+        canvas.style.height = `${res.height / res.scale}px`;
+        const ctx = canvas.getContext('2d');
+        slot.pixelsPerPoint = PX_PER_PT * zoom * res.scale;
+        if (ctx)
+            paintPage(ctx, pageData, slot.pixelsPerPoint, images, doc.glyphOutlines);
+        overlay.width = res.width;
+        overlay.height = res.height;
+        overlay.style.width = canvas.style.width;
+        overlay.style.height = canvas.style.height;
+        paintOverlay(index, overlay, slot.pixelsPerPoint);
+    };
+    const mountSlot = (index) => {
+        const placed = layout.pages[index];
+        const box = element('div', 'idocs-preview-page');
+        Object.assign(box.style, {
+            position: 'absolute',
+            top: `${placed.top}px`,
+            left: `calc(50% - ${placed.width / 2}px)`,
+            width: `${placed.width}px`,
+            height: `${placed.height}px`,
+            overflow: 'hidden',
+            background: '#fff',
+        });
+        const canvas = element('canvas', 'idocs-preview-content');
+        canvas.style.display = 'block';
+        const overlay = element('canvas', 'idocs-preview-selection');
+        Object.assign(overlay.style, { position: 'absolute', left: '0', top: '0', pointerEvents: 'none' });
+        box.append(canvas, overlay);
+        const slot = { box, canvas, overlay, pixelsPerPoint: 1 };
+        paintSlot(index, slot);
+        content.append(box);
+        return slot;
+    };
+    const releaseSlot = (index) => {
+        const slot = slots.get(index);
+        if (!slot)
+            return;
+        freeCanvas(slot.canvas);
+        freeCanvas(slot.overlay);
+        slot.box.remove();
+        slots.delete(index);
+    };
+    const releaseAll = () => {
+        for (const index of [...slots.keys()])
+            releaseSlot(index);
+    };
+    const updateViewport = (repaintExisting = false) => {
+        frame = 0;
+        if (destroyed || !doc)
+            return;
+        const { scrollTop, clientHeight } = scroller;
+        const keep = pagesToKeep(layout, scrollTop, clientHeight);
+        for (const index of [...slots.keys()]) {
+            if (index < keep.first || index > keep.last)
+                releaseSlot(index);
+        }
+        for (let index = keep.first; index <= keep.last; index += 1) {
+            const existing = slots.get(index);
+            if (existing) {
+                if (repaintExisting)
+                    paintSlot(index, existing);
+            }
+            else {
+                slots.set(index, mountSlot(index));
+            }
+        }
+        const now = currentPage(layout, scrollTop, clientHeight);
+        if (now !== current) {
+            current = now;
+            if (now >= 0)
+                options.onPageChange?.(now, doc);
+        }
+        ime.position(resolveCaret());
+    };
+    const scheduleViewport = () => {
+        if (!frame && !destroyed)
+            frame = requestAnimationFrame(() => updateViewport(false));
+    };
+    const zoomAround = (next, x, y) => {
+        next = clampZoom(next);
+        if (next === zoom || !doc)
+            return false;
+        const anchor = anchorAt(layout, scroller.scrollTop + y);
+        const across = (scroller.scrollLeft + x) / Math.max(content.offsetWidth, 1);
+        zoom = next;
+        layout = layoutPages(doc.pages, zoom, SPACING);
+        releaseAll();
+        sizeContent();
+        scroller.scrollTop = scrollTopFor(layout, anchor) - y;
+        scroller.scrollLeft = across * content.offsetWidth - x;
+        updateViewport(false);
+        return true;
+    };
+    const pointAt = (clientX, clientY) => {
+        const { pages } = layout;
+        if (pages.length === 0)
+            return undefined;
+        const rect = content.getBoundingClientRect();
+        const y = clientY - rect.top;
+        let index = pages.findIndex((p) => y < p.top + p.height);
+        if (index < 0)
+            index = pages.length - 1;
+        if (index > 0 && y < pages[index].top) {
+            const above = pages[index - 1];
+            if (y - (above.top + above.height) < pages[index].top - y)
+                index -= 1;
+        }
+        const placed = pages[index];
+        const left = rect.width / 2 - placed.width / 2;
+        const scale = PX_PER_PT * zoom;
+        return { page: index, x: (clientX - rect.left - left) / scale, y: (y - placed.top) / scale };
+    };
+    const startDrag = (state, event) => {
+        drag = state;
+        lastDragPoint = { x: event.clientX, y: event.clientY };
+        addEventListener('mousemove', onMouseMove);
+        addEventListener('mouseup', onMouseUp);
+        addEventListener('blur', onMouseUp);
+    };
+    const followDrag = () => {
+        if (!drag || !lastDragPoint || !editIndex)
+            return;
+        const point = pointAt(lastDragPoint.x, lastDragPoint.y);
+        if (!point)
+            return;
+        const rev = currentRevision();
+        if (drag.mode === 'word') {
+            const range = editIndex.wordRangeInFlow(drag.flow, point);
+            if (!range)
+                return;
+            if (range.start.offset < drag.originStart.offset) {
+                setSelectionLocal({
+                    revision: rev,
+                    range: { revision: rev, start: range.start, end: drag.originEnd },
+                    reversed: true,
+                });
+            }
+            else {
+                const end = range.end.offset > drag.originEnd.offset ? range.end : drag.originEnd;
+                setSelectionLocal({
+                    revision: rev,
+                    range: { revision: rev, start: drag.originStart, end },
+                    reversed: false,
+                });
+            }
+            return;
+        }
+        const targetAnchor = editIndex.locatePointInFlow(drag.flow, point);
+        if (targetAnchor) {
+            setSelectionLocal(makeSelectionFromAnchors(rev, drag.originStart, targetAnchor));
+        }
+    };
+    const stepAutoscroll = () => {
+        autoscroll = 0;
+        if (!drag || !lastDragPoint)
+            return;
+        const rect = scroller.getBoundingClientRect();
+        const top = rect.top + DRAG_EDGE;
+        const bottom = rect.bottom - DRAG_EDGE;
+        const out = lastDragPoint.y < top ? lastDragPoint.y - top : lastDragPoint.y > bottom ? lastDragPoint.y - bottom : 0;
+        if (out === 0)
+            return;
+        scroller.scrollTop += Math.max(-60, Math.min(60, out / 2));
+        autoscroll = requestAnimationFrame(stepAutoscroll);
+    };
+    const onMouseDown = (event) => {
+        if (event.button !== 0 || !editIndex)
+            return;
+        const point = pointAt(event.clientX, event.clientY);
+        if (!point)
+            return;
+        event.preventDefault();
+        ime.focus();
+        preferredX = undefined;
+        const rev = currentRevision();
+        const clicks = event.detail || 1;
+        if (event.shiftKey && activeSelection) {
+            const fixed = anchorPoint(activeSelection);
+            const targetAnchor = editIndex.locatePointInFlow(fixed.flow, point);
+            if (targetAnchor) {
+                startDrag({
+                    mode: 'character',
+                    flow: fixed.flow,
+                    originStart: fixed,
+                    originEnd: fixed,
+                }, event);
+                setSelectionLocal(makeSelectionFromAnchors(rev, fixed, targetAnchor));
+            }
+            return;
+        }
+        if (clicks >= 3) {
+            const range = editIndex.flowRangeAt(point);
+            if (range) {
+                setSelectionLocal(makeSelectionFromAnchors(rev, range.start, range.end));
+            }
+            return;
+        }
+        if (clicks === 2) {
+            const range = editIndex.wordRangeAt(point);
+            if (range) {
+                startDrag({
+                    mode: 'word',
+                    flow: range.start.flow,
+                    originStart: range.start,
+                    originEnd: range.end,
+                }, event);
+                setSelectionLocal(makeSelectionFromAnchors(rev, range.start, range.end));
+            }
+            return;
+        }
+        if (clicks === 1 && doc) {
+            const pageItems = doc.pages[point.page]?.items;
+            const imgHit = pageItems ? hitImageInItems(pageItems, point.x, point.y) : null;
+            if (imgHit) {
+                setSelectedImageLocal({ page: point.page, path: imgHit.path, box: imgHit.box });
+                return;
+            }
+        }
+        const hit = editIndex.locatePoint(point);
+        if (hit.kind === 'editable') {
+            startDrag({
+                mode: 'character',
+                flow: hit.anchor.flow,
+                originStart: hit.anchor,
+                originEnd: hit.anchor,
+            }, event);
+            setSelectionLocal(makeSelectionFromAnchors(rev, hit.anchor, hit.anchor));
+        }
+        else if (hit.kind === 'readOnly') {
+            setReadOnlyLocal(hit.target);
+        }
+        else {
+            setReadOnlyLocal(null);
+            if (selectedImageTarget)
+                setSelectedImageLocal(null);
+            setSelectionLocal(null);
+        }
+    };
+    const onMouseMove = (event) => {
+        if (!drag)
+            return;
+        lastDragPoint = { x: event.clientX, y: event.clientY };
+        if (!dragFrame) {
+            dragFrame = requestAnimationFrame(() => {
+                dragFrame = 0;
+                followDrag();
+            });
+        }
+        if (!autoscroll)
+            stepAutoscroll();
+    };
+    const onMouseUp = () => {
+        removeEventListener('mousemove', onMouseMove);
+        removeEventListener('mouseup', onMouseUp);
+        removeEventListener('blur', onMouseUp);
+        if (dragFrame) {
+            cancelAnimationFrame(dragFrame);
+            dragFrame = 0;
+            followDrag();
+        }
+        if (!drag)
+            return;
+        drag = undefined;
+        if (autoscroll) {
+            cancelAnimationFrame(autoscroll);
+            autoscroll = 0;
+        }
+        emitSelectionChange();
+    };
+    const onScroll = () => {
+        followDrag();
+        scheduleViewport();
+        ime.position(resolveCaret());
+    };
+    const onViewKeyDown = (event) => {
+        if (event.defaultPrevented || event.isComposing)
+            return;
+        if ((event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === 'f') {
+            event.preventDefault();
+            find.open();
+        }
+        else if (event.key === 'Escape' && find.isOpen) {
+            event.preventDefault();
+            find.close();
+        }
+    };
+    let wheelFrame = 0;
+    let wheelDelta = 0;
+    let wheelPoint = { x: 0, y: 0 };
+    const onWheel = (event) => {
+        if (!event.ctrlKey)
+            return;
+        event.preventDefault();
+        const unit = event.deltaMode === WheelEvent.DOM_DELTA_LINE
+            ? 16
+            : event.deltaMode === WheelEvent.DOM_DELTA_PAGE
+                ? scroller.clientHeight
+                : 1;
+        wheelDelta += event.deltaY * unit;
+        const box = scroller.getBoundingClientRect();
+        wheelPoint = { x: event.clientX - box.left, y: event.clientY - box.top };
+        if (wheelFrame)
+            return;
+        wheelFrame = requestAnimationFrame(() => {
+            wheelFrame = 0;
+            const delta = wheelDelta;
+            wheelDelta = 0;
+            if (!destroyed && zoomAround(zoom * Math.exp(-delta / 500), wheelPoint.x, wheelPoint.y)) {
+                options.onZoomChange?.(zoom);
+            }
+        });
+    };
+    let resolution;
+    const watchResolution = () => {
+        resolution?.removeEventListener('change', onResolution);
+        resolution = globalThis.matchMedia?.(`(resolution: ${globalThis.devicePixelRatio || 1}dppx)`);
+        resolution?.addEventListener('change', onResolution);
+    };
+    function onResolution() {
+        watchResolution();
+        releaseAll();
+        updateViewport(false);
+    }
+    const applyFrameDocument = (nextDoc, nextRev, nextSelection) => {
+        if (doc === nextDoc)
+            return;
+        const prevDoc = doc;
+        const prevCount = prevDoc?.pageCount ?? 0;
+        doc = nextDoc;
+        docRevision = nextRev;
+        editIndex = new EditDocumentIndex(nextDoc.pages);
+        const findInput = view.querySelector('.idocs-preview-find input');
+        finder.setIndex(new TextIndex(nextDoc.pages), find.isOpen ? findInput?.value : undefined, Math.max(current, 0));
+        layout = layoutPages(nextDoc.pages, zoom, SPACING);
+        sizeContent();
+        if (!sameImageList(lastImages, nextDoc.images)) {
+            lastImages = nextDoc.images;
+            for (const bitmap of images)
+                bitmap?.close();
+            images = [];
+            if (nextDoc.images.length > 0) {
+                const expectedDoc = nextDoc;
+                void decodeImages(nextDoc.images).then((decoded) => {
+                    if (destroyed || doc !== expectedDoc) {
+                        for (const bitmap of decoded)
+                            bitmap?.close();
+                        return;
+                    }
+                    images = decoded;
+                    updateViewport(true);
+                });
+            }
+        }
+        let selectionChanged = false;
+        if (readOnlyTarget) {
+            readOnlyTarget = null;
+            options.onReadOnlyTarget?.(null);
+        }
+        if (nextSelection && nextSelection.revision === nextRev) {
+            activeSelection = nextSelection;
+            selectionChanged = true;
+        }
+        else if (activeSelection && activeSelection.revision !== nextRev) {
+            const startCaret = editIndex.caretForAnchor(activeSelection.range.start);
+            if (startCaret) {
+                activeSelection = {
+                    revision: nextRev,
+                    range: {
+                        revision: nextRev,
+                        start: activeSelection.range.start,
+                        end: activeSelection.range.end,
+                    },
+                    reversed: activeSelection.reversed,
+                };
+                selectionChanged = true;
+            }
+            else {
+                activeSelection = null;
+                selectionChanged = true;
+            }
+        }
+        if (selectedImageTarget) {
+            let nextTarget = null;
+            for (let p = 0; p < nextDoc.pages.length; p += 1) {
+                const box = findImageBoxByPath(nextDoc.pages[p].items, selectedImageTarget.path);
+                if (box) {
+                    nextTarget = { page: p, path: selectedImageTarget.path, box };
+                    break;
+                }
+            }
+            selectedImageTarget = nextTarget;
+            options.onImageSelect?.(nextTarget);
+        }
+        const caret = activeSelection ? (editIndex.caretForAnchor(activeHead(activeSelection)) ?? null) : null;
+        if (caret)
+            lastCaret = caret;
+        updateViewport(true);
+        if (prevCount === 0 && nextDoc.pageCount > 0) {
+            current = currentPage(layout, scroller.scrollTop, scroller.clientHeight);
+            if (current >= 0)
+                options.onPageChange?.(current, nextDoc);
+        }
+        if (pendingScrollReveal) {
+            pendingScrollReveal = false;
+            revealCaret();
+        }
+        if (selectionChanged) {
+            emitSelectionChange();
+        }
+        if (ime.focused)
+            resetBlink();
+        flushWaiters(editIndex);
+    };
+    const adoptState = (state) => {
+        if (destroyed)
+            return;
+        if (state.layout.kind === 'ready') {
+            applyFrameDocument(state.layout.frame.document, state.layout.frame.revision, state.selection);
+            return;
+        }
+        if (state.layout.kind === 'pending') {
+            if (!doc && state.layout.previous) {
+                applyFrameDocument(state.layout.previous.document, state.layout.previous.revision, state.selection);
+            }
+            else if (state.selection && state.selection.revision === state.revision) {
+                activeSelection = state.selection;
+                readOnlyTarget = null;
+            }
+            return;
+        }
+        if (state.layout.kind === 'failed') {
+            if (!doc && state.layout.previous) {
+                applyFrameDocument(state.layout.previous.document, state.layout.previous.revision, state.selection);
+            }
+            flushWaiters(undefined);
+        }
+    };
+    const resize = new ResizeObserver(scheduleViewport);
+    resize.observe(scroller);
+    watchResolution();
+    content.addEventListener('mousedown', onMouseDown);
+    scroller.addEventListener('scroll', onScroll, { passive: true });
+    scroller.addEventListener('wheel', onWheel, { passive: false });
+    view.addEventListener('keydown', onViewKeyDown);
+    const unsubscribe = session.subscribe(adoptState);
+    adoptState(session.state());
+    return {
+        get canvases() {
+            return [...slots.entries()].sort((a, b) => a[0] - b[0]).map(([, slot]) => slot.canvas);
+        },
+        get zoom() {
+            return zoom;
+        },
+        get currentPage() {
+            return current;
+        },
+        get fitWidthZoom() {
+            return doc ? fitWidthZoom(doc.pages, scroller.clientWidth, SPACING) : 1;
+        },
+        find,
+        get focused() {
+            return ime.focused;
+        },
+        get readOnly() {
+            return isReadOnly;
+        },
+        get dragging() {
+            return drag !== undefined;
+        },
+        selection: buildViewSelection,
+        readOnlyTarget: () => readOnlyTarget,
+        clearReadOnlyTarget() {
+            if (readOnlyTarget)
+                setReadOnlyLocal(null);
+        },
+        selectedImage: () => selectedImageTarget,
+        clearSelectedImage() {
+            if (selectedImageTarget)
+                setSelectedImageLocal(null);
+        },
+        composingText: () => (ime.mode.kind === 'composing' ? ime.mode.text : null),
+        focus() {
+            ime.focus();
+        },
+        setReadOnly(next) {
+            if (destroyed || isReadOnly === next)
+                return;
+            isReadOnly = next;
+            sizeContent();
+            if (isReadOnly) {
+                clearBlinkTimers();
+                caretVisible = false;
+            }
+            else if (ime.focused) {
+                resetBlink();
+            }
+            repaintOverlays();
+        },
+        setZoom(next) {
+            if (destroyed)
+                return;
+            zoomAround(next, scroller.clientWidth / 2, 0);
+        },
+        goToPage(index, scrollOptions) {
+            if (destroyed || layout.pages.length === 0)
+                return;
+            const page = Math.min(Math.max(0, Math.trunc(index)), layout.pages.length - 1);
+            scroller.scrollTo({
+                top: scrollTopFor(layout, { page, fraction: 0, above: SPACING.padding }),
+                behavior: scrollOptions?.behavior,
+            });
+        },
+        selectAnchors(start, end = start, reversed = false) {
+            return ime.enqueue(async () => {
+                if (destroyed)
+                    return;
+                const rev = currentRevision();
+                const ordered = orderedAnchors(start, end);
+                const range = await session.range({ revision: rev, start: ordered.start, end: ordered.end });
+                if (destroyed)
+                    return;
+                const isReversed = start.offset === end.offset ? false : reversed || ordered.reversed;
+                setSelectionLocal({ revision: range.revision, range, reversed: isReversed }, true);
+            });
+        },
+        insertText(text) {
+            return ime.enqueue(() => replaceSelection(text));
+        },
+        toggleMark(mark, enabled) {
+            return ime.enqueue(() => performToggleMark(mark, enabled));
+        },
+        splitBlock() {
+            return ime.enqueue(() => performSplitBlock());
+        },
+        setBlockStyle(style) {
+            return ime.enqueue(async () => {
+                if (destroyed || isReadOnly || !activeSelection)
+                    return null;
+                pendingScrollReveal = true;
+                return session.apply({
+                    base: currentRevision(),
+                    edit: { kind: 'setBlockStyle', at: activeSelection.range.start, style },
+                });
+            });
+        },
+        setAlignment(align) {
+            return ime.enqueue(async () => {
+                if (destroyed || isReadOnly || !activeSelection)
+                    return null;
+                pendingScrollReveal = true;
+                return session.apply({
+                    base: currentRevision(),
+                    edit: { kind: 'setAlignment', at: activeSelection.range.start, align },
+                });
+            });
+        },
+        insertBlock(block, after) {
+            return ime.enqueue(async () => {
+                if (destroyed || isReadOnly)
+                    return null;
+                pendingScrollReveal = true;
+                return session.apply({
+                    base: currentRevision(),
+                    edit: {
+                        kind: 'insertBlock',
+                        after: after ?? activeSelection?.range.start,
+                        block,
+                    },
+                });
+            });
+        },
+        editTable(action, at) {
+            return ime.enqueue(async () => {
+                if (destroyed || isReadOnly)
+                    return null;
+                const target = at ?? activeSelection?.range.start;
+                if (!target)
+                    return null;
+                pendingScrollReveal = true;
+                return session.apply({
+                    base: currentRevision(),
+                    edit: { kind: 'editTable', at: target, action },
+                });
+            });
+        },
+        editImage(path, patch) {
+            return ime.enqueue(async () => {
+                if (destroyed || isReadOnly)
+                    return null;
+                return session.apply({
+                    base: currentRevision(),
+                    edit: {
+                        kind: 'editImage',
+                        path,
+                        widthRatio: patch.widthRatio,
+                        align: patch.align,
+                        src: patch.src,
+                        alt: patch.alt,
+                    },
+                });
+            });
+        },
+        undo() {
+            return ime.enqueue(() => performUndo());
+        },
+        redo() {
+            return ime.enqueue(() => performRedo());
+        },
+        destroy() {
+            if (destroyed)
+                return;
+            destroyed = true;
+            clearBlinkTimers();
+            if (frame)
+                cancelAnimationFrame(frame);
+            frame = 0;
+            if (dragFrame)
+                cancelAnimationFrame(dragFrame);
+            dragFrame = 0;
+            if (wheelFrame)
+                cancelAnimationFrame(wheelFrame);
+            wheelFrame = 0;
+            if (autoscroll)
+                cancelAnimationFrame(autoscroll);
+            autoscroll = 0;
+            flushWaiters(undefined);
+            unsubscribe();
+            content.removeEventListener('mousedown', onMouseDown);
+            removeEventListener('mousemove', onMouseMove);
+            removeEventListener('mouseup', onMouseUp);
+            removeEventListener('blur', onMouseUp);
+            scroller.removeEventListener('scroll', onScroll);
+            scroller.removeEventListener('wheel', onWheel);
+            view.removeEventListener('keydown', onViewKeyDown);
+            resize.disconnect();
+            resolution?.removeEventListener('change', onResolution);
+            find.destroy();
+            ime.destroy();
+            releaseAll();
+            for (const bitmap of images)
+                bitmap?.close();
+            images = [];
+            view.remove();
+        },
+    };
+}