@aicayzer/inkkit 0.0.8 → 0.0.10

package/dist/editor.js

@@ -17,19 +17,22 @@ import { codeCopyPlugin, placeholderPlugin } from './decorations.js';
 import { labelsCtx, defaultLabels } from './labels.js';
 import { createDialect, stringifyOptions } from './dialect.js';
 import { Preservation } from './preserve.js';
-import { sourceAttribute, cleanSourceDoc, editedPlainSource, sourceSelection, revealSourceCaret, rawOffset, normalizedOffset, } from './source.js';
+import { sourceAttribute, cleanSourceDoc, editedPlainSource, sourceSelection, rawOffset, normalizedOffset, } from './source.js';
 import { normaliseLabel, referenceDefinitions, footnoteDefinitions, } from './references.js';
 import { selectionMarkdown, selectionContent, referenceMetadata, withReferenceMetadata, } from './reference-clipboard.js';
 import { imageView } from './images.js';
+import { wikiLinkView } from './wiki-view.js';
+import { withFileSignal } from './files.js';
 import { tablePlugins, tableCommand, tableCommands, tableAvailability, tableContext, configureTableMovement, } from './tables.js';
 import { InkKitError, } from './types.js';
+import { readableProjection, projectionPosition, projectionOffset, validateOffsets, formattedRects, literalRects, literalVisibleRanges, intersectsViewport, textRect, } from './text-ranges.js';
 import { highlightPlugin } from './highlight.js';
 import { highlightKeymap, toggleHighlightCommand } from './inline-highlight.js';
 import { commentSelectionContent, setCommentVisibility } from './comments.js';
 import { PasteController } from './paste.js';
 import { selectionPlugin } from './selection.js';
 import { search, SearchQuery, setSearchState } from 'prosemirror-search';
-import { findFormatted, findLiteral, replaceFormatted, replaceLiteral, } from './search.js';
+import { findFormatted, findLiteral, replaceFormatted, replaceLiteral, replaceFormattedRange, } from './search.js';
 import { collectFormattedHeadings, collectSourceHeadings, navigateFormattedHeading, sourceHeadingPosition, } from './outline.js';
 import { taskListPlugin, toggleTaskList } from './tasks.js';
 import { isMermaid, mermaidPreview } from './mermaid.js';
@@ -239,6 +242,7 @@ function joinLists(tr, start, index) {
     if (before && after && isList(before) && after.type === before.type)
         tr.join($start.posAtIndex(index));
 }
+let editorSequence = 0;
 export class InkKitEditor {
     events;
     options;
@@ -249,6 +253,7 @@ export class InkKitEditor {
     revision = 0;
     documentEpoch = 0;
     operationSequence = 0;
+    exportControllers = new Set();
     plainComposing = false;
     plainSearch = '';
     literalMatch;
@@ -270,6 +275,15 @@ export class InkKitEditor {
     generation = 0;
     reportingSuppressed = false;
     loading = false;
+    textIdentity = ++editorSequence;
+    textScope;
+    viewportContainer;
+    viewportInsets = {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+    };
     writable = true;
     inputPreferences = {};
     policyEpoch = 0;
@@ -283,6 +297,8 @@ export class InkKitEditor {
                 if (this.loading || view.state.doc.eq(previous.doc))
                     return;
                 this.revision += 1;
+                this.cancelExports();
+                this.mediaPolicy();
                 this.literalMatch = undefined;
                 let markdown;
                 try {
@@ -300,7 +316,7 @@ export class InkKitEditor {
                         this.plain.value = markdown;
                     if (!this.plainComposing) {
                         this.plain.setSelectionRange(Math.min(from, this.plain.value.length), Math.min(to, this.plain.value.length));
-                        revealSourceCaret(this.plain);
+                        this.revealLiteralSelection();
                     }
                 }
                 if (markdown === this.lastMarkdown)
@@ -324,6 +340,36 @@ export class InkKitEditor {
             operationId: `${this.documentEpoch}:${this.generation}:${++this.operationSequence}`,
         };
     }
+    cancelExports() {
+        for (const controller of this.exportControllers)
+            controller.abort();
+        this.exportControllers.clear();
+    }
+    async exportContent(snapshot, operation) {
+        const epoch = this.documentEpoch;
+        const mode = this.editingMode;
+        const controller = new AbortController();
+        this.exportControllers.add(controller);
+        try {
+            return await withFileSignal(operation(controller.signal), controller.signal);
+        }
+        finally {
+            this.exportControllers.delete(controller);
+            this.assertCurrent(snapshot.generation);
+            if (controller.signal.aborted ||
+                epoch !== this.documentEpoch ||
+                snapshot.documentId !== this.documentId ||
+                snapshot.revision !== this.revision ||
+                mode !== this.editingMode)
+                throw new InkKitError('stale-document', 'Document changed while preparing output');
+        }
+    }
+    mediaPolicy() {
+        if (this.editor && this.root)
+            this.editor.ctx
+                .get(editorViewCtx)
+                .dom.dispatchEvent(new Event('inkkit-media-policy'));
+    }
     assertAlive() {
         if (this.destroyed)
             throw new InkKitError('destroyed', 'The editor has been destroyed');
@@ -372,6 +418,7 @@ export class InkKitEditor {
                 .get(editorViewCtx)
                 .dom.dispatchEvent(new Event('inkkit-cancel-resize'));
             this.applyInputPolicy();
+            this.mediaPolicy();
         }
         finally {
             this.reportingSuppressed = suppressed;
@@ -574,8 +621,15 @@ export class InkKitEditor {
             throw new RangeError('Editing mode must be source or formatted');
         if (this.formatType === 'txt' || this.mode === mode)
             return false;
+        const view = this.editor.ctx.get(editorViewCtx);
+        const focused = this.literalSurface
+            ? this.plain.ownerDocument.activeElement === this.plain
+            : view.hasFocus();
+        const container = this.viewportContainer ?? this.root;
+        const top = container.scrollTop, left = container.scrollLeft;
         const text = this.snapshot().text;
         this.mode = mode;
+        this.cancelExports();
         this.outlineEpoch += 1;
         this.plainSearch = '';
         this.literalMatch = undefined;
@@ -591,6 +645,14 @@ export class InkKitEditor {
         finally {
             this.reportingSuppressed = suppressed;
         }
+        if (focused) {
+            if (this.literalSurface)
+                this.plain.focus({ preventScroll: true });
+            else
+                view.focus();
+        }
+        container.scrollTop = top;
+        container.scrollLeft = left;
         this.events.stateChanged(this.literalSurface
             ? { marks: [], block: { type: 'paragraph' }, quoted: false }
             : caretState(this.editor.ctx.get(editorViewCtx).state));
@@ -606,6 +668,7 @@ export class InkKitEditor {
             : (this.options.labels?.sourceEditor ?? defaultLabels.sourceEditor));
         this.editor.ctx.get(editorViewCtx).dom.parentElement.hidden =
             this.literalSurface;
+        this.mediaPolicy();
     }
     replaceSource(text, expectedGeneration) {
         this.assertMutation(expectedGeneration);
@@ -710,26 +773,17 @@ export class InkKitEditor {
     }
     async printableSnapshot(expectedGeneration) {
         const snapshot = this.snapshot(expectedGeneration);
-        const epoch = this.documentEpoch;
         const state = this.editor.ctx.get(editorViewCtx).state;
-        let output;
-        try {
+        const output = await this.exportContent(snapshot, async (signal) => {
             if (snapshot.format === 'md' &&
                 !this.options.images &&
+                !this.options.files &&
                 hasAuthoredImagesInLiterals(state.doc.content, (source) => this.editor.ctx.get(remarkCtx).parse(source)))
                 throw new InkKitError('image-unavailable', 'No image adapter is configured for the authored images.');
-            output =
-                snapshot.format === 'txt'
-                    ? printableText(snapshot.text)
-                    : await printableMarkdown(state.doc.content, state.schema, this.options.images, this.context());
-        }
-        finally {
-            this.assertCurrent(snapshot.generation);
-            if (snapshot.documentId !== this.documentId ||
-                epoch !== this.documentEpoch ||
-                snapshot.revision !== this.revision)
-                throw new InkKitError('stale-document', 'Document changed while preparing printable content');
-        }
+            return snapshot.format === 'txt'
+                ? printableText(snapshot.text)
+                : printableMarkdown(state.doc.content, state.schema, this.options.images, this.context(), this.options.files, signal);
+        });
         return Object.freeze({
             documentId: snapshot.documentId,
             generation: snapshot.generation,
@@ -802,7 +856,7 @@ export class InkKitEditor {
                 ? error.message
                 : 'Cannot copy the selected Markdown');
         }
-        const result = await portableClipboard(all || selectedDoc ? content : selectionContent(doc, content), schema, markdown, this.options.images, this.context(), completeDiagrams);
+        const result = await this.exportContent(snapshot, (signal) => portableClipboard(all || selectedDoc ? content : selectionContent(doc, content), schema, markdown, this.options.images, this.context(), completeDiagrams, this.options.files, signal));
         const metadata = referenceMetadata(this.editor.ctx, selectedDoc ?? doc, content);
         if (metadata != null)
             result.html = withReferenceMetadata(result.html, metadata);
@@ -881,6 +935,8 @@ export class InkKitEditor {
             return;
         this.destroyed = true;
         this.ready = false;
+        this.cancelExports();
+        this.mediaPolicy();
         this.pasteController.destroy();
         if (this.clickHandler)
             this.root.removeEventListener('click', this.clickHandler);
@@ -1013,11 +1069,13 @@ export class InkKitEditor {
             unbind(codeBlockKeymap);
             unbind(bulletListKeymap);
             unbind(orderedListKeymap);
-            // The caret is kept above the fade under the formatting bar.
             ctx.update(editorViewOptionsCtx, (options) => ({
                 ...options,
-                scrollThreshold: { top: 8, right: 0, bottom: 24, left: 0 },
-                scrollMargin: { top: 8, right: 0, bottom: 24, left: 0 },
+                handleScrollToSelection: () => {
+                    if (!instance.loading && instance.ready)
+                        instance.revealCurrentSelection();
+                    return true;
+                },
             }));
         })
             .use(labelsCtx)
@@ -1025,7 +1083,7 @@ export class InkKitEditor {
             .use(instance.pasteController.plugin)
             .use(visibleClipboard)
             .use(instance.keymapPlugin)
-            .use(createDialect(Boolean(options.images)))
+            .use(createDialect(Boolean(options.images || options.files), Boolean(options.wikiLinks), Boolean(options.files)))
             .use(tablePlugins)
             .use(instance.changePlugin)
             .use(history)
@@ -1043,7 +1101,57 @@ export class InkKitEditor {
             .use(selectionPlugin)
             .use($prose(() => search()))
             .use(instance.policyPlugin)
-            .use(options.images ? imageView(options.images) : [])
+            .use(options.wikiLinks
+            ? wikiLinkView(options.wikiLinks, {
+                capture: () => {
+                    const epoch = instance.documentEpoch;
+                    const context = instance.context();
+                    return {
+                        context,
+                        isCurrent: () => !instance.destroyed &&
+                            epoch === instance.documentEpoch &&
+                            context.documentId === instance.documentId &&
+                            context.generation === instance.generation,
+                    };
+                },
+                active: () => instance.ready &&
+                    !instance.destroyed &&
+                    !instance.literalSurface,
+                labels: { ...defaultLabels, ...options.labels },
+                error: (error) => events.error?.(error),
+            })
+            : [])
+            .use(options.images || options.files
+            ? imageView(options.images, options.files
+                ? {
+                    adapter: options.files,
+                    capture: () => {
+                        const epoch = instance.documentEpoch;
+                        const context = instance.context();
+                        return {
+                            context,
+                            isCurrent: () => !instance.destroyed &&
+                                epoch === instance.documentEpoch &&
+                                context.documentId === instance.documentId &&
+                                context.generation === instance.generation,
+                        };
+                    },
+                    active: () => instance.ready &&
+                        !instance.destroyed &&
+                        !instance.literalSurface,
+                    labels: { ...defaultLabels, ...options.labels },
+                    error: (error) => events.error?.(error),
+                }
+                : undefined, () => {
+                try {
+                    instance.assertMutation();
+                    return true;
+                }
+                catch {
+                    return false;
+                }
+            })
+            : [])
             .create();
         configureTableMovement(instance.editor.ctx, () => {
             try {
@@ -1242,7 +1350,14 @@ export class InkKitEditor {
     }
     loadDocument(input) {
         this.assertAlive();
+        const container = this.viewportContainer ?? this.root;
+        const top = container.scrollTop, left = container.scrollLeft;
+        const focused = this.literalSurface
+            ? this.plain.ownerDocument.activeElement === this.plain
+            : this.editor.ctx.get(editorViewCtx).hasFocus();
         this.ready = false;
+        this.cancelExports();
+        this.mediaPolicy();
         this.pasteController.cancelPending();
         this.documentEpoch += 1;
         this.outlineEpoch += 1;
@@ -1256,11 +1371,21 @@ export class InkKitEditor {
         this.formatType = input.format;
         this.revision = 0;
         this.plain.value = input.text;
+        this.plain.setSelectionRange(this.plain.value.length, this.plain.value.length);
         this.load(input.format === 'txt' ? '' : input.text, input.generation);
         this.originalSource = input.text;
         this.lastMarkdown = input.text;
         this.updateSurface();
         this.ready = true;
+        this.mediaPolicy();
+        if (focused) {
+            if (this.literalSurface)
+                this.plain.focus({ preventScroll: true });
+            else
+                this.editor.ctx.get(editorViewCtx).focus();
+        }
+        container.scrollTop = top;
+        container.scrollLeft = left;
         this.events.stateChanged(this.literalSurface
             ? { marks: [], block: { type: 'paragraph' }, quoted: false }
             : caretState(this.editor.ctx.get(editorViewCtx).state));
@@ -1272,11 +1397,19 @@ export class InkKitEditor {
         const wasLiteral = this.literalSurface;
         const previousMode = this.editingMode;
         const previousFormat = this.formatType;
+        const selectedNode = !wasLiteral && view.state.selection instanceof NodeSelection
+            ? view.state.selection.node
+            : undefined;
         const at = wasLiteral
             ? this.plain.selectionStart
-            : view.state.selection.from;
-        const end = wasLiteral ? this.plain.selectionEnd : at;
-        const top = this.root.scrollTop;
+            : view.state.selection.anchor;
+        const end = wasLiteral ? this.plain.selectionEnd : view.state.selection.head;
+        const direction = this.plain.selectionDirection;
+        const container = this.viewportContainer ?? this.root;
+        const top = container.scrollTop, left = container.scrollLeft;
+        const focused = wasLiteral
+            ? document.activeElement === this.plain
+            : view.hasFocus();
         const plainTop = this.plain.scrollTop, plainLeft = this.plain.scrollLeft;
         this.reportingSuppressed = true;
         try {
@@ -1286,10 +1419,24 @@ export class InkKitEditor {
                 previousMode === 'source')
                 this.setEditingMode('source', input.generation);
             if (this.literalSurface)
-                this.plain.setSelectionRange(Math.min(at, this.plain.value.length), Math.min(end, this.plain.value.length));
-            else
-                view.dispatch(view.state.tr.setSelection(Selection.near(view.state.doc.resolve(Math.min(at, view.state.doc.content.size)))));
-            this.root.scrollTop = top;
+                this.plain.setSelectionRange(Math.min(at, this.plain.value.length), Math.min(end, this.plain.value.length), direction);
+            else {
+                const anchor = Math.min(at, view.state.doc.content.size);
+                const node = view.state.doc.nodeAt(anchor);
+                view.dispatch(view.state.tr.setSelection(selectedNode &&
+                    node?.type === selectedNode.type &&
+                    NodeSelection.isSelectable(node)
+                    ? NodeSelection.create(view.state.doc, anchor)
+                    : TextSelection.between(view.state.doc.resolve(anchor), view.state.doc.resolve(Math.min(end, view.state.doc.content.size)))));
+            }
+            if (focused) {
+                if (this.literalSurface)
+                    this.plain.focus({ preventScroll: true });
+                else
+                    view.focus();
+            }
+            container.scrollTop = top;
+            container.scrollLeft = left;
             if (wasLiteral && this.literalSurface) {
                 this.plain.scrollTop = plainTop;
                 this.plain.scrollLeft = plainLeft;
@@ -1300,6 +1447,301 @@ export class InkKitEditor {
             this.publishCommandState();
         }
     }
+    setViewport(options) {
+        this.assertAlive();
+        const container = options.scrollContainer ?? this.root;
+        if (container !== this.root && !container.contains(this.root))
+            throw new RangeError('The scroll container must be the editor root or an ancestor');
+        const insets = { top: 0, right: 0, bottom: 0, left: 0, ...options.insets };
+        if (Object.values(insets).some((value) => !Number.isFinite(value) || value < 0))
+            throw new RangeError('Viewport insets must be finite non-negative CSS pixel values');
+        this.viewportContainer = container;
+        this.viewportInsets = insets;
+    }
+    viewport() {
+        this.assertAlive();
+        const container = this.viewportContainer ?? this.root;
+        const bounds = container.getBoundingClientRect();
+        const root = this.root.getBoundingClientRect();
+        const insets = this.viewportInsets;
+        const window = this.root.ownerDocument.defaultView;
+        const left = Math.max(bounds.left + container.clientLeft, root.left, 0);
+        const top = Math.max(bounds.top + container.clientTop, root.top, 0);
+        const right = Math.max(left, Math.min(bounds.left + container.clientLeft + container.clientWidth, root.right, window.innerWidth));
+        const bottom = Math.max(top, Math.min(bounds.top + container.clientTop + container.clientHeight, root.bottom, window.innerHeight));
+        let rect = textRect({ left, top, right, bottom });
+        if (this.literalSurface) {
+            const plain = this.plain.getBoundingClientRect();
+            const literalLeft = Math.max(rect.left, plain.left + this.plain.clientLeft);
+            const literalTop = Math.max(rect.top, plain.top + this.plain.clientTop);
+            rect = textRect({
+                left: literalLeft,
+                top: literalTop,
+                right: Math.max(literalLeft, Math.min(rect.right, plain.left + this.plain.clientLeft + this.plain.clientWidth)),
+                bottom: Math.max(literalTop, Math.min(rect.bottom, plain.top + this.plain.clientTop + this.plain.clientHeight)),
+            });
+        }
+        const insetLeft = Math.min(rect.right, rect.left + insets.left);
+        const insetTop = Math.min(rect.bottom, rect.top + insets.top);
+        rect = textRect({
+            left: insetLeft,
+            top: insetTop,
+            right: Math.max(insetLeft, rect.right - insets.right),
+            bottom: Math.max(insetTop, rect.bottom - insets.bottom),
+        });
+        return Object.freeze({
+            rect: Object.freeze(rect),
+            insets: Object.freeze({ ...insets }),
+            scrollTop: container.scrollTop + (this.literalSurface ? this.plain.scrollTop : 0),
+            scrollLeft: container.scrollLeft +
+                (this.literalSurface ? this.plain.scrollLeft : 0),
+        });
+    }
+    readableScope() {
+        const key = `${this.documentEpoch}:${this.revision}:${this.outlineEpoch}:${this.editingMode}`;
+        if (this.textScope?.key !== key)
+            this.textScope = {
+                key,
+                id: `${this.textIdentity}:${key}`,
+                projection: this.literalSurface
+                    ? { text: this.plain.value, spans: [] }
+                    : readableProjection(this.editor.ctx.get(editorViewCtx).state.doc),
+            };
+        return this.textScope;
+    }
+    textSnapshot(expectedGeneration) {
+        this.assertCurrent(expectedGeneration);
+        const scope = this.readableScope();
+        const selection = this.editor.ctx.get(editorViewCtx).state.selection;
+        return Object.freeze({
+            snapshotId: scope.id,
+            documentId: this.documentId,
+            generation: this.generation,
+            revision: this.revision,
+            format: this.formatType,
+            mode: this.editingMode,
+            text: scope.projection.text,
+            selection: Object.freeze({
+                snapshotId: scope.id,
+                from: this.literalSurface
+                    ? this.plain.selectionStart
+                    : projectionOffset(scope.projection, selection.from),
+                to: this.literalSurface
+                    ? this.plain.selectionEnd
+                    : projectionOffset(scope.projection, selection.to),
+            }),
+        });
+    }
+    validateTextRange(range) {
+        this.assertCurrent();
+        const scope = this.readableScope();
+        if (range.snapshotId !== scope.id)
+            throw new InkKitError('stale-document', 'The readable text snapshot changed');
+        validateOffsets(scope.projection.text, range.from, range.to);
+        return scope.projection;
+    }
+    selectTextRange(range, options = {}) {
+        const projection = this.validateTextRange(range);
+        if (this.literalSurface)
+            this.plain.setSelectionRange(range.from, range.to);
+        else {
+            for (const span of projection.spans)
+                if (span.kind === 'embed' &&
+                    ((range.from > span.from && range.from < span.to) ||
+                        (range.to > span.from && range.to < span.to)))
+                    throw new InkKitError('invalid-range', 'Embedded labels must be selected as complete ranges');
+            const view = this.editor.ctx.get(editorViewCtx);
+            const from = projectionPosition(projection, range.from, 1);
+            const to = projectionPosition(projection, range.to, range.from === range.to ? 1 : -1);
+            const embed = projection.spans.find((span) => span.kind === 'embed' &&
+                span.from === range.from &&
+                span.to === range.to);
+            view.dispatch(view.state.tr.setSelection(embed && view.state.doc.nodeAt(embed.start)
+                ? NodeSelection.create(view.state.doc, embed.start)
+                : TextSelection.between(view.state.doc.resolve(from), view.state.doc.resolve(to))));
+        }
+        if (options.focus) {
+            if (this.literalSurface)
+                this.plain.focus({ preventScroll: true });
+            else
+                this.editor.ctx.get(editorViewCtx).focus();
+        }
+        if (options.reveal)
+            this.revealTextRange(range);
+        this.publishCommandState();
+    }
+    replaceTextRange(range, text) {
+        const projection = this.validateTextRange(range);
+        this.assertMutation();
+        if (typeof text !== 'string')
+            throw new TypeError('Replacement must be a string');
+        if (this.literalSurface) {
+            const raw = this.currentText();
+            const from = rawOffset(raw, range.from), to = rawOffset(raw, range.to);
+            const ending = /\r\n|\r|\n/.exec(raw)?.[0] ?? '\n';
+            const value = text.replace(/\r\n?/g, '\n');
+            const replaced = raw.slice(0, from) + value.replaceAll('\n', ending) + raw.slice(to);
+            return this.applySource(replaced, true, range.from, range.from + value.length);
+        }
+        if (projection.spans.some((span) => (span.kind === 'embed' &&
+            range.from > span.from &&
+            range.from < span.to) ||
+            (span.kind === 'embed' &&
+                range.to > span.from &&
+                range.to < span.to) ||
+            (span.to > range.from &&
+                span.from < range.to &&
+                span.kind !== 'text')))
+            throw new InkKitError('invalid-range', 'Replacement cannot remove embedded content or structural separators');
+        const from = projectionPosition(projection, range.from, 1);
+        const to = projectionPosition(projection, range.to, range.from === range.to ? 1 : -1);
+        return replaceFormattedRange(this.editor.ctx.get(editorViewCtx), from, to, text, (doc) => {
+            this.currentText(doc);
+        });
+    }
+    textRangeRects(range) {
+        const projection = this.validateTextRange(range);
+        const rects = this.literalSurface
+            ? literalRects(this.plain, range.from, range.to)
+            : formattedRects(this.editor.ctx.get(editorViewCtx), projection, range.from, range.to);
+        return Object.freeze(rects.map((rect) => Object.freeze(rect)));
+    }
+    visibleTextRanges(snapshotId) {
+        const snapshot = this.textSnapshot();
+        this.validateTextRange({ snapshotId, from: 0, to: 0 });
+        const viewport = this.viewport().rect;
+        if (this.literalSurface)
+            return Object.freeze(literalVisibleRanges(this.plain, viewport).map((range) => Object.freeze({ snapshotId, ...range })));
+        const visible = (rect) => intersectsViewport(rect, viewport);
+        const ranges = [];
+        const projection = this.readableScope().projection;
+        const view = this.editor.ctx.get(editorViewCtx);
+        for (const span of projection.spans) {
+            const current = { text: projection.text, spans: [span] };
+            if (span.kind === 'separator' ||
+                !formattedRects(view, current, span.from, span.to).some(visible))
+                continue;
+            for (let from = span.from; from < span.to;) {
+                const to = from + (snapshot.text.codePointAt(from) > 0xffff ? 2 : 1);
+                if (formattedRects(view, current, from, to).some(visible)) {
+                    const previous = ranges.at(-1);
+                    if (previous?.to === from)
+                        previous.to = to;
+                    else
+                        ranges.push({ snapshotId, from, to });
+                }
+                from = to;
+            }
+        }
+        return Object.freeze(ranges.map((range) => Object.freeze(range)));
+    }
+    revealTextRange(range) {
+        const projection = this.validateTextRange(range);
+        if (!this.literalSurface) {
+            const view = this.editor.ctx.get(editorViewCtx);
+            const position = projectionPosition(projection, range.from, 1);
+            const at = view.domAtPos(position).node;
+            let element = at instanceof Element ? at : at.parentElement;
+            while (element && this.root.contains(element)) {
+                if (element.matches('.inkkit-callout[data-inkkit-folded="true"]'))
+                    element
+                        .querySelector(':scope > .inkkit-callout-header [data-inkkit-callout-toggle]')
+                        ?.click();
+                element = element.parentElement;
+            }
+        }
+        this.revealRects(this.textRangeRects(range));
+    }
+    revealRects(rects) {
+        if (!rects.length)
+            return;
+        const viewport = this.viewport().rect;
+        const leading = rects[0];
+        const envelope = {
+            top: leading.top,
+            bottom: leading.bottom,
+            left: leading.left,
+            right: leading.right,
+        };
+        for (const rect of rects) {
+            envelope.top = Math.min(envelope.top, rect.top);
+            envelope.bottom = Math.max(envelope.bottom, rect.bottom);
+            envelope.left = Math.min(envelope.left, rect.left);
+            envelope.right = Math.max(envelope.right, rect.right);
+        }
+        const fitsHeight = envelope.bottom - envelope.top <= viewport.height;
+        const fitsWidth = envelope.right - envelope.left <= viewport.width;
+        const rect = {
+            top: fitsHeight ? envelope.top : leading.top,
+            bottom: fitsHeight
+                ? envelope.bottom
+                : Math.min(leading.bottom, leading.top + viewport.height),
+            left: fitsWidth ? envelope.left : leading.left,
+            right: fitsWidth
+                ? envelope.right
+                : Math.min(leading.right, leading.left + viewport.width),
+        };
+        const vertical = viewport.height <= 0
+            ? 0
+            : rect.top < viewport.top
+                ? rect.top - viewport.top
+                : rect.bottom > viewport.bottom
+                    ? rect.bottom - viewport.bottom
+                    : 0;
+        const horizontal = viewport.width <= 0
+            ? 0
+            : rect.left < viewport.left
+                ? rect.left - viewport.left
+                : rect.right > viewport.right
+                    ? rect.right - viewport.right
+                    : 0;
+        let remainingTop = vertical, remainingLeft = horizontal;
+        if (this.literalSurface) {
+            const top = this.plain.scrollTop, left = this.plain.scrollLeft;
+            this.plain.scrollTop += vertical;
+            this.plain.scrollLeft += horizontal;
+            remainingTop -= this.plain.scrollTop - top;
+            remainingLeft -= this.plain.scrollLeft - left;
+        }
+        let container = this.viewportContainer ?? this.root;
+        const document = this.root.ownerDocument;
+        while (container &&
+            container !== document.body &&
+            container !== document.documentElement) {
+            const top = container.scrollTop, left = container.scrollLeft;
+            container.scrollTop += remainingTop;
+            container.scrollLeft += remainingLeft;
+            remainingTop -= container.scrollTop - top;
+            remainingLeft -= container.scrollLeft - left;
+            container = container.parentElement;
+        }
+        if (remainingTop || remainingLeft)
+            document.defaultView.scrollBy(remainingLeft, remainingTop);
+    }
+    revealCurrentSelection() {
+        if (this.loading || !this.ready)
+            return;
+        if (this.literalSurface) {
+            this.revealLiteralSelection();
+            return;
+        }
+        const view = this.editor.ctx.get(editorViewCtx);
+        const projection = this.readableScope().projection;
+        const from = projectionOffset(projection, view.state.selection.from);
+        const to = projectionOffset(projection, view.state.selection.to);
+        if (this.composing || this.pasteController.pending) {
+            this.revealRects(formattedRects(view, projection, from, to));
+            return;
+        }
+        this.revealTextRange({
+            snapshotId: this.readableScope().id,
+            from,
+            to,
+        });
+    }
+    revealLiteralSelection() {
+        this.revealRects(literalRects(this.plain, this.plain.selectionStart, this.plain.selectionEnd));
+    }
     load(markdown, generation) {
         this.generation = generation;
         this.originalSource = markdown;
@@ -1319,7 +1761,7 @@ export class InkKitEditor {
         const { doc } = view.state;
         const end = Selection.findFrom(doc.resolve(doc.content.size), -1, true) ??
             Selection.atEnd(doc);
-        view.dispatch(setSearchState(view.state.tr.setSelection(end).scrollIntoView(), new SearchQuery({ search: '' })));
+        view.dispatch(setSearchState(view.state.tr.setSelection(end), new SearchQuery({ search: '' })));
     }
     find(text, expectedGeneration) {
         this.assertCurrent(expectedGeneration);
@@ -1349,10 +1791,11 @@ export class InkKitEditor {
             else if (this.plainSearch)
                 this.plain.setSelectionRange(this.plain.selectionEnd, this.plain.selectionEnd);
             this.plainSearch = text;
-            revealSourceCaret(this.plain);
+            this.revealLiteralSelection();
             return;
         }
-        findFormatted(this.editor.ctx.get(editorViewCtx), text);
+        if (findFormatted(this.editor.ctx.get(editorViewCtx), text))
+            this.revealCurrentSelection();
     }
     replace(search, replacement, expectedGeneration) {
         this.assertMutation(expectedGeneration);
@@ -1417,7 +1860,7 @@ export class InkKitEditor {
             const position = sourceHeadingPosition(this.editor.ctx, this.plain.value, heading, this.outlineContext());
             this.plain.setSelectionRange(position, position);
             this.plain.focus({ preventScroll: true });
-            revealSourceCaret(this.plain);
+            this.revealLiteralSelection();
             return true;
         }
         return navigateFormattedHeading(this.editor.ctx.get(editorViewCtx), heading, this.outlineContext());