@aicayzer/inkkit 0.0.12 → 0.0.14

package/dist/editor.d.ts

@@ -181,6 +181,7 @@ export declare class InkKitEditor {
     }): void;
     replaceTextRange(range: TextRange, text: string): boolean;
     textRangeRects(range: TextRange): readonly TextRect[];
+    textRangesRects(ranges: readonly TextRange[]): readonly (readonly TextRect[])[];
     visibleTextRanges(snapshotId: string): readonly TextRange[];
     revealTextRange(range: TextRange): void;
     private revealRects;

package/dist/editor.js

@@ -25,7 +25,7 @@ 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 { readableProjection, projectionPosition, projectionOffset, validateOffsets, formattedRects, literalRangesRects, literalVisibleRanges, intersectsViewport, textRect, } from './text-ranges.js';
 import { highlightKeymap, toggleHighlightCommand } from './inline-highlight.js';
 import { commentSelectionContent, setCommentVisibility } from './comments.js';
 import { PasteController } from './paste.js';
@@ -1089,6 +1089,24 @@ export class InkKitEditor {
             unbind(orderedListKeymap);
             ctx.update(editorViewOptionsCtx, (options) => ({
                 ...options,
+                dispatchTransaction: function (tr) {
+                    const next = this.state.apply(tr);
+                    if (!instance.loading &&
+                        instance.preservation &&
+                        !instance.literalSurface &&
+                        !next.doc.eq(this.state.doc)) {
+                        try {
+                            // Validate the final state, including dialect normalisation transactions.
+                            instance.currentText(next.doc);
+                        }
+                        catch (error) {
+                            this.updateState(this.state);
+                            instance.events.error?.(new InkKitError('preservation', `The edit was not applied because its Markdown could not be preserved: ${error instanceof Error ? error.message : String(error)}`));
+                            return;
+                        }
+                    }
+                    this.updateState(next);
+                },
                 handleScrollToSelection: () => {
                     if (!instance.loading && instance.ready)
                         instance.revealCurrentSelection();
@@ -1374,9 +1392,10 @@ export class InkKitEditor {
         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();
+        const active = this.root.ownerDocument.activeElement;
+        if (active === this.plain ||
+            active === this.editor.ctx.get(editorViewCtx).dom)
+            active.blur();
         this.ready = false;
         this.cancelExports();
         this.mediaPolicy();
@@ -1401,12 +1420,6 @@ export class InkKitEditor {
         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
@@ -1623,11 +1636,17 @@ export class InkKitEditor {
         });
     }
     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)));
+        return this.textRangesRects([range])[0];
+    }
+    textRangesRects(ranges) {
+        this.assertCurrent();
+        const projections = ranges.map((range) => this.validateTextRange(range));
+        if (!ranges.length)
+            return Object.freeze([]);
+        const results = this.literalSurface
+            ? literalRangesRects(this.plain, ranges)
+            : ranges.map((range, index) => formattedRects(this.editor.ctx.get(editorViewCtx), projections[index], range.from, range.to));
+        return Object.freeze(results.map((rects) => Object.freeze(rects.map((rect) => Object.freeze(rect)))));
     }
     visibleTextRanges(snapshotId) {
         const snapshot = this.textSnapshot();
@@ -1763,7 +1782,12 @@ export class InkKitEditor {
         });
     }
     revealLiteralSelection() {
-        this.revealRects(literalRects(this.plain, this.plain.selectionStart, this.plain.selectionEnd));
+        this.revealRects(literalRangesRects(this.plain, [
+            {
+                from: this.plain.selectionStart,
+                to: this.plain.selectionEnd,
+            },
+        ])[0]);
     }
     load(markdown, generation) {
         this.generation = generation;

package/dist/images.js

@@ -143,19 +143,28 @@ class ImageView {
         this.runtime?.error?.(error instanceof Error ? error : new Error(String(error)));
     }
     card(label, status, retry = false) {
+        const footer = document.createElement('span');
+        footer.className = 'inkkit-file-footer';
         const text = document.createElement('span');
         text.className = 'inkkit-file-label';
-        text.textContent = status ? `${label}: ${status}` : label;
-        if (status)
-            text.setAttribute('role', 'status');
-        this.dom.append(text);
+        text.textContent = label;
+        text.title = label;
+        footer.append(text);
+        if (status) {
+            const description = document.createElement('span');
+            description.className = 'inkkit-file-status';
+            description.setAttribute('role', 'status');
+            description.textContent = status;
+            footer.append(description);
+        }
         if (retry && this.runtime)
-            this.dom.append(this.button(this.runtime.labels.fileRetry, () => this.resolution?.retry()));
+            footer.append(this.button(this.runtime.labels.fileRetry, () => this.resolution?.retry()));
         if (this.runtime?.adapter.open) {
             const open = this.button(this.runtime.labels.fileOpen, this.activate);
             open.setAttribute('aria-label', `${this.runtime.labels.fileOpen} ${label}`);
-            this.dom.append(open);
+            footer.append(open);
         }
+        this.dom.append(footer);
     }
     failPreview() {
         this.previewFailed = true;
@@ -284,10 +293,13 @@ class ImageView {
             });
         image.src = url;
         this.image = image;
+        const preview = document.createElement('span');
+        preview.className = 'inkkit-image-preview';
         const handle = document.createElement('span');
         handle.className = 'image-handle';
         handle.addEventListener('pointerdown', this.startResize);
-        this.dom.append(image, handle);
+        preview.append(image, handle);
+        this.dom.append(preview);
     }
     startResize = (event) => {
         event.preventDefault();

package/dist/paste.d.ts

@@ -12,11 +12,13 @@ export interface PasteControllerOptions {
 export declare class PasteController {
     private readonly options;
     private active?;
+    private readonly key;
     private dead;
     get pending(): boolean;
     readonly plugin: import("@milkdown/kit/utils").$Prose;
     constructor(options: PasteControllerOptions);
     paste(input: ClipboardInput): Promise<void>;
+    private anchor;
     cancelPending(): void;
     destroy(): void;
     private assertContext;

package/dist/paste.js

@@ -8,6 +8,7 @@ import { InkKitError, } from './types.js';
 export class PasteController {
     options;
     active;
+    key = new PluginKey('inkkitPaste');
     dead = false;
     get pending() {
         return this.active != null;
@@ -16,16 +17,18 @@ export class PasteController {
     constructor(options) {
         this.options = options;
         this.plugin = $prose(() => new Plugin({
-            key: new PluginKey('inkkitPaste'),
+            key: this.key,
             state: {
                 init: () => null,
-                apply: (transaction) => {
-                    if (this.active) {
-                        const empty = this.active.from === this.active.to;
-                        this.active.from = transaction.mapping.map(this.active.from, 1);
-                        this.active.to = transaction.mapping.map(this.active.to, empty ? 1 : -1);
-                    }
-                    return null;
+                apply: (transaction, previous) => {
+                    if (!this.active)
+                        return null;
+                    const anchor = previous?.operation === this.active ? previous : this.active;
+                    return {
+                        operation: this.active,
+                        from: transaction.mapping.map(anchor.from, 1),
+                        to: transaction.mapping.map(anchor.to, anchor.from === anchor.to ? 1 : -1),
+                    };
                 },
             },
             props: {
@@ -68,6 +71,10 @@ export class PasteController {
     paste(input) {
         return this.run(input);
     }
+    anchor(operation) {
+        const mapped = this.key.getState(this.options.ctx().get(editorViewCtx).state);
+        return mapped?.operation === operation ? mapped : operation;
+    }
     cancelPending() {
         this.active = undefined;
         this.options.onPendingChanged?.();
@@ -127,7 +134,7 @@ export class PasteController {
                     (input.html ? markdownFromHTML(input.html) : undefined));
             if (plainText) {
                 if (view.state.selection.$from.parent.type.spec.code) {
-                    const anchor = operation;
+                    const anchor = this.anchor(operation);
                     view.dispatch(view.state.tr.insertText(input.text, anchor.from, anchor.to));
                     return;
                 }
@@ -389,8 +396,8 @@ export class PasteController {
                     !selection.empty &&
                     /^https?:\/\/\S+$/.test(text) &&
                     schema.marks.link) {
-                    const anchor = operation;
-                    const mark = schema.marks.link.create({ href: text, title: '' });
+                    const anchor = this.anchor(operation);
+                    const mark = schema.marks.link.create({ href: text });
                     view.dispatch(view.state.tr
                         .addMark(anchor.from, anchor.to, mark)
                         .removeStoredMark(mark));
@@ -402,7 +409,7 @@ export class PasteController {
             this.assertContext(context, operation);
             if (!view.editable || this.options.editable?.() === false)
                 return;
-            const anchor = operation;
+            const anchor = this.anchor(operation);
             if (!plainText) {
                 const valid = slice.content.firstChild?.isInline
                     ? Fragment.from(schema.nodes.paragraph.create(null, slice.content))

package/dist/preserve.d.ts

@@ -10,7 +10,11 @@ export declare class Preservation {
     private readonly baseline;
     private readonly blocks;
     private readonly lineEnding;
+    private readonly originalForms;
     private readonly forms;
+    private readonly textBlockEdits;
     constructor(ctx: Ctx, source: string);
+    private retainBlock;
+    private independentTextBlocks;
     serialize(doc: ProseNode): string;
 }

package/dist/preserve.js

@@ -317,6 +317,12 @@ function semanticSignature(doc) {
         : value));
     return JSON.stringify(clean(json));
 }
+// Milkdown derives heading DOM IDs; Markdown stores the level and content.
+function withoutHeadingId(node) {
+    return node.type.name === 'heading' && node.attrs.id
+        ? node.type.create({ ...node.attrs, id: '' }, node.content, node.marks)
+        : node;
+}
 // Edit distance distinguishes replacements from insertions, so replacing a block
 // retains its surrounding whitespace without assigning it a neighbour's source.
 function correspondence(before, after) {
@@ -337,32 +343,52 @@ function correspondence(before, after) {
     }
     const rows = endBefore - head + 1;
     const columns = endAfter - head + 1;
-    if (rows * columns > 1_000_000)
-        throw new PreservationError('The edit changes too many blocks to preserve safely');
-    const costs = Array.from({ length: rows }, () => new Uint32Array(columns));
-    for (let i = 0; i < rows; i++)
-        costs[i][0] = i;
-    for (let j = 0; j < columns; j++)
-        costs[0][j] = j;
-    for (let i = 1; i < rows; i++) {
-        for (let j = 1; j < columns; j++) {
-            const change = before[head + i - 1] === after[head + j - 1] ? 0 : 1;
-            costs[i][j] = Math.min(costs[i - 1][j] + 1, costs[i][j - 1] + 1, costs[i - 1][j - 1] + change);
+    let budget = 1_000_000;
+    let width = Math.max(1, Math.abs(rows - columns));
+    for (;;) {
+        const costs = [];
+        const get = (i, j) => i < 0 || j < 0 || Math.abs(i - j) > width
+            ? width + 1
+            : (costs[i]?.[j - Math.max(0, i - width)] ?? width + 1);
+        for (let i = 0; i < rows; i++) {
+            const from = Math.max(0, i - width);
+            const to = Math.min(columns - 1, i + width);
+            budget -= to - from + 1;
+            if (budget < 0)
+                throw new PreservationError('The edit changes too many blocks to preserve safely');
+            const row = new Uint32Array(to - from + 1);
+            costs.push(row);
+            for (let j = from; j <= to; j++) {
+                const change = before[head + i - 1] === after[head + j - 1] ? 0 : 1;
+                row[j - from] =
+                    i === 0
+                        ? j
+                        : j === 0
+                            ? i
+                            : Math.min(get(i - 1, j) + 1, get(i, j - 1) + 1, get(i - 1, j - 1) + change);
+            }
         }
-    }
-    let i = rows - 1;
-    let j = columns - 1;
-    while (i || j) {
-        const change = i && j && before[head + i - 1] === after[head + j - 1] ? 0 : 1;
-        if (i && j && costs[i][j] === costs[i - 1][j - 1] + change) {
-            result[head + j - 1] = head + i - 1;
-            i--;
-            j--;
+        // A path with at most width edits cannot leave this diagonal band.
+        // Widen only when needed, charging every attempt to the same work budget.
+        if (get(rows - 1, columns - 1) > width) {
+            width *= 2;
+            continue;
         }
-        else if (i && costs[i][j] === costs[i - 1][j] + 1)
-            i--;
-        else
-            j--;
+        let i = rows - 1;
+        let j = columns - 1;
+        while (i || j) {
+            const change = i && j && before[head + i - 1] === after[head + j - 1] ? 0 : 1;
+            if (i && j && get(i, j) === get(i - 1, j - 1) + change) {
+                result[head + j - 1] = head + i - 1;
+                i--;
+                j--;
+            }
+            else if (i && get(i, j) === get(i - 1, j) + 1)
+                i--;
+            else
+                j--;
+        }
+        break;
     }
     return result;
 }
@@ -373,7 +399,9 @@ export class Preservation {
     baseline;
     blocks = [];
     lineEnding;
+    originalForms = new Set();
     forms = new WeakMap();
+    textBlockEdits = new WeakMap();
     constructor(ctx, source) {
         this.ctx = ctx;
         this.source = source;
@@ -414,6 +442,8 @@ export class Preservation {
                     ast: positionalNode(rawTree, node),
                 });
             }
+            for (const block of this.blocks)
+                this.originalForms.add(block.form);
         }
         catch (cause) {
             if (cause instanceof PreservationError)
@@ -423,10 +453,79 @@ export class Preservation {
             });
         }
     }
+    retainBlock(block, after, canonical) {
+        const offset = this.source.startsWith('\uFEFF') ? 1 : 0;
+        const start = block.ast.position?.start.offset;
+        if (start == null)
+            throw new PreservationError('A source block has no location');
+        return (this.source.slice(block.start, start + offset) +
+            retainSource(block.ast, after, this.source.slice(offset), canonical, this.lineEnding));
+    }
+    independentTextBlocks(doc) {
+        if (this.baseline.childCount !== this.blocks.length ||
+            doc.childCount !== this.blocks.length ||
+            !doc.sameMarkup(this.baseline))
+            return undefined;
+        let output = '', previous = 0;
+        for (let index = 0; index < doc.childCount; index++) {
+            const node = doc.child(index);
+            const before = this.baseline.child(index);
+            const block = this.blocks[index];
+            if (node.eq(before))
+                continue;
+            let retained = this.textBlockEdits.get(node);
+            if (retained?.index !== index) {
+                const raw = this.source.slice(block.start, block.end);
+                const expected = withoutHeadingId(node);
+                // References and HTML/comments can depend on other blocks. Restrict
+                // local validation to text blocks without these context-sensitive forms.
+                const contextual = /[\[<]|%%/;
+                const textOnly = (block) => {
+                    let valid = true;
+                    block.forEach((child) => {
+                        if (!child.isText)
+                            valid = false;
+                    });
+                    return valid;
+                };
+                if (!['paragraph', 'heading'].includes(node.type.name) ||
+                    !expected.sameMarkup(withoutHeadingId(before)) ||
+                    !textOnly(node) ||
+                    !textOnly(before) ||
+                    contextual.test(raw) ||
+                    (index > 0 &&
+                        !/\r?\n[ \t]*\r?\n/.test(this.source.slice(this.blocks[index - 1].end, block.start))) ||
+                    (index + 1 < this.blocks.length &&
+                        !/\r?\n[ \t]*\r?\n/.test(this.source.slice(block.end, this.blocks[index + 1].start))))
+                    return undefined;
+                const canonical = blockForm(this.ctx, node);
+                if (contextual.test(canonical) ||
+                    (canonical !== block.form && this.originalForms.has(canonical)))
+                    return undefined;
+                const tree = this.ctx.get(remarkCtx).parse(canonical);
+                if (tree.children.length !== 1)
+                    return undefined;
+                const text = this.retainBlock(block, tree.children[0], canonical);
+                const reopened = this.ctx.get(parserCtx)(text);
+                if (reopened.childCount !== 1)
+                    return undefined;
+                if (!withoutHeadingId(reopened.firstChild).eq(expected))
+                    return undefined;
+                retained = { index, text };
+                this.textBlockEdits.set(node, retained);
+            }
+            output += this.source.slice(previous, block.start) + retained.text;
+            previous = block.end;
+        }
+        return output + this.source.slice(previous);
+    }
     serialize(doc) {
         if (doc.eq(this.baseline))
             return this.source;
         try {
+            const independent = this.independentTextBlocks(doc);
+            if (independent !== undefined)
+                return independent;
             const canonical = serialize(this.ctx, doc);
             if (canonical === '')
                 return this.source.startsWith('\uFEFF') ? '\uFEFF' : '';
@@ -445,7 +544,6 @@ export class Preservation {
             const currentTree = processor.runSync(structuredClone(currentRawTree), {
                 value: canonical,
             });
-            const body = this.source.replace(/^\uFEFF/, '');
             let output = '';
             let previous;
             current.forEach((text, index) => {
@@ -465,7 +563,7 @@ export class Preservation {
                 if (block && block.form === text)
                     output += this.source.slice(block.start, block.end);
                 else if (block && currentTree.children.length === current.length) {
-                    output += retainSource(block.ast, positionalNode(currentRawTree, currentTree.children[index]), body, canonical, this.lineEnding);
+                    output += this.retainBlock(block, positionalNode(currentRawTree, currentTree.children[index]), canonical);
                 }
                 else
                     output += restoreCodeEndings(this.ctx, doc.type.create(null, [doc.child(index)]), text.replaceAll('\n', this.lineEnding));
@@ -477,10 +575,16 @@ export class Preservation {
                 output += finalCodeEnding(doc) ?? this.lineEnding;
             const parse = this.ctx.get(parserCtx);
             const reopened = parse(output);
-            if (serialize(this.ctx, reopened).replace(/\r\n?/g, '\n') ===
-                canonical.replace(/\r\n?/g, '\n') &&
-                semanticSignature(reopened) === semanticSignature(doc))
-                return output;
+            const normalized = (text) => text.replace(/\r\n?/g, '\n');
+            if (semanticSignature(reopened) === semanticSignature(doc)) {
+                const actual = normalized(serialize(this.ctx, reopened));
+                if (actual === normalized(canonical))
+                    return output;
+                // Parsing may normalize loose-list spacing. Compare both reconstructed
+                // source and intended canonical source after that same normalization.
+                if (actual === normalized(serialize(this.ctx, parse(canonical))))
+                    return output;
+            }
             throw new PreservationError('The edited Markdown cannot be reopened without changing its content');
         }
         catch (cause) {

package/dist/style.css

@@ -207,16 +207,26 @@
   height: auto;
   border-radius: 6px;
 }
+.inkkit-root .ProseMirror .inkkit-image-preview {
+  position: relative;
+  display: block;
+  width: fit-content;
+  max-width: 100%;
+  line-height: 0;
+}
 .inkkit-root .ProseMirror .image-absent {
   color: var(--_inkkit-muted);
   font-style: italic;
 }
 .inkkit-root .ProseMirror .image-handle {
   position: absolute;
-  right: -3px;
-  top: 0;
-  width: 10px;
-  height: 100%;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 32px;
+  max-height: 100%;
+  touch-action: none;
   cursor: col-resize;
   opacity: 0;
 }
@@ -227,22 +237,41 @@
 .inkkit-root .ProseMirror .image-handle::after {
   content: '';
   position: absolute;
-  right: 3px;
-  top: 25%;
-  height: 50%;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 20px;
+  max-height: 100%;
   width: 4px;
   border-radius: 2px;
   background: var(--_inkkit-accent);
 }
+.inkkit-root .ProseMirror[contenteditable='false'] .image-handle {
+  display: none;
+}
 
 .inkkit-root .ProseMirror .inkkit-file {
+  box-sizing: border-box;
   vertical-align: middle;
   border: 1px solid var(--_inkkit-rule);
-  border-radius: 4px;
-  padding: 4px;
+  border-radius: 6px;
+  padding: 8px;
   white-space: normal;
 }
 
+.inkkit-root .ProseMirror .inkkit-file-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5em;
+  font-size: 0.9em;
+  line-height: 1.4;
+  color: var(--_inkkit-muted);
+}
+.inkkit-root .ProseMirror .inkkit-file-footer:not(:first-child) {
+  margin-block-start: 0.5em;
+}
+
 .inkkit-root .ProseMirror .inkkit-file audio,
 .inkkit-root .ProseMirror .inkkit-file video,
 .inkkit-root .ProseMirror .inkkit-file iframe {
@@ -261,12 +290,23 @@
 }
 
 .inkkit-root .ProseMirror .inkkit-file-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.inkkit-root .ProseMirror .inkkit-file-status {
+  flex-basis: 100%;
   overflow-wrap: anywhere;
 }
 
 .inkkit-root .ProseMirror .inkkit-file-control {
-  margin-inline-start: 0.5em;
+  flex: none;
+  padding: 0.25em 0.5em;
   font: inherit;
+  line-height: 1.4;
+  white-space: nowrap;
   color: var(--_inkkit-text);
   background: var(--_inkkit-code-bg);
   border: 1px solid var(--_inkkit-rule);

package/dist/text-ranges.d.ts

@@ -18,7 +18,10 @@ export declare function projectionOffset(projection: TextProjection, position: n
 export declare function validateOffsets(text: string, from: number, to: number): void;
 export declare function textRect(rect: Pick<TextRect, 'left' | 'top' | 'right' | 'bottom'>): TextRect;
 export declare function formattedRects(view: EditorView, projection: TextProjection, from: number, to: number): TextRect[];
-export declare function literalRects(plain: HTMLTextAreaElement, from: number, to: number): TextRect[];
+export declare function literalRangesRects(plain: HTMLTextAreaElement, ranges: readonly {
+    from: number;
+    to: number;
+}[]): TextRect[][];
 export declare function intersectsViewport(rect: Pick<TextRect, 'top' | 'right' | 'bottom' | 'left'>, viewport: TextRect): boolean;
 export declare function literalVisibleRanges(plain: HTMLTextAreaElement, viewport: TextRect): {
     from: number;

package/dist/text-ranges.js

@@ -110,8 +110,20 @@ export function formattedRects(view, projection, from, to) {
         return [textRect(view.coordsAtPos(position))];
     }
     const rects = [];
-    for (const span of projection.spans) {
-        if (span.to <= from || span.from >= to || span.kind === 'separator')
+    let low = 0;
+    let high = projection.spans.length;
+    while (low < high) {
+        const middle = (low + high) >>> 1;
+        if (projection.spans[middle].to <= from)
+            low = middle + 1;
+        else
+            high = middle;
+    }
+    for (let index = low; index < projection.spans.length; index++) {
+        const span = projection.spans[index];
+        if (span.from >= to)
+            break;
+        if (span.kind === 'separator')
             continue;
         if (span.kind === 'embed' || span.kind === 'break') {
             const node = view.nodeDOM(span.start);
@@ -180,18 +192,20 @@ function withLiteralLayout(plain, measure) {
         mirror.remove();
     }
 }
-export function literalRects(plain, from, to) {
+export function literalRangesRects(plain, ranges) {
     return (withLiteralLayout(plain, (text) => {
         const range = plain.ownerDocument.createRange();
-        range.setStart(text, from);
-        range.setEnd(text, from === to ? Math.min(to + 1, text.length) : to);
-        return Array.from(range.getClientRects(), (rect) => textRect({
-            left: rect.left,
-            right: from === to ? rect.left : rect.right,
-            top: rect.top,
-            bottom: rect.bottom,
-        }));
-    }) ?? []);
+        return ranges.map(({ from, to }) => {
+            range.setStart(text, from);
+            range.setEnd(text, from === to ? Math.min(to + 1, text.length) : to);
+            return Array.from(range.getClientRects(), (rect) => textRect({
+                left: rect.left,
+                right: from === to ? rect.left : rect.right,
+                top: rect.top,
+                bottom: rect.bottom,
+            }));
+        });
+    }) ?? ranges.map(() => []));
 }
 export function intersectsViewport(rect, viewport) {
     return (viewport.width > 0 &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aicayzer/inkkit",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "A preserving Markdown editor for offline web views and the web",
   "license": "MIT",
   "type": "module",