@aicayzer/inkkit 0.0.13 → 0.0.15

package/dist/images.js

@@ -3,6 +3,7 @@ import { closeHistory } from '@milkdown/kit/prose/history';
 import { $view } from '@milkdown/kit/utils';
 import { FileResolution } from './files.js';
 import { fileReference } from './linked-syntax.js';
+import { imageBlockSchema } from './image-blocks.js';
 /** A width rides in the alt text, as `![a picture|400](images/….png)`. Other Markdown readers
  *  show the picture and keep the number without requiring a private extension. */
 export function splitAlt(alt) {
@@ -23,6 +24,8 @@ class ImageView {
     runtime;
     canMutate;
     dom;
+    /** The card or picture, which a standalone image's block row holds. */
+    element;
     image;
     media;
     pdf;
@@ -37,8 +40,15 @@ class ImageView {
         this.adapter = adapter;
         this.runtime = runtime;
         this.canMutate = canMutate;
-        this.dom = document.createElement('span');
-        this.dom.className = 'image';
+        this.element = document.createElement('span');
+        this.element.className = 'image';
+        if (node.isBlock) {
+            this.dom = document.createElement('div');
+            this.dom.className = 'inkkit-image-block';
+            this.dom.append(this.element);
+        }
+        else
+            this.dom = this.element;
         this.view.dom.addEventListener('inkkit-cancel-resize', this.cancelResize);
         this.view.dom.addEventListener('inkkit-media-policy', this.mediaPolicy);
         if (runtime) {
@@ -143,19 +153,34 @@ 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 name = document.createElement('span');
+        name.className = 'inkkit-file-name';
         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);
-        if (retry && this.runtime)
-            this.dom.append(this.button(this.runtime.labels.fileRetry, () => this.resolution?.retry()));
+        text.textContent = label;
+        text.title = label;
+        name.append(text);
         if (this.runtime?.adapter.open) {
-            const open = this.button(this.runtime.labels.fileOpen, this.activate);
+            const open = this.button('', this.activate);
+            open.classList.add('inkkit-file-open');
             open.setAttribute('aria-label', `${this.runtime.labels.fileOpen} ${label}`);
-            this.dom.append(open);
+            open.title = this.runtime.labels.fileOpen;
+            open.append(openArrow());
+            name.append(open);
         }
+        footer.append(name);
+        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)
+            footer.append(this.button(this.runtime.labels.fileRetry, () => this.resolution?.retry()));
+        this.element.append(footer);
     }
     failPreview() {
         this.previewFailed = true;
@@ -174,11 +199,11 @@ class ImageView {
             }
             : splitAlt(String(this.node.attrs.alt ?? ''));
         this.width = width;
-        this.dom.textContent = '';
+        this.element.textContent = '';
         this.image = undefined;
         if (this.runtime) {
-            this.dom.classList.add('inkkit-file');
-            this.dom.oncontextmenu = (event) => {
+            this.element.classList.add('inkkit-file');
+            this.element.oncontextmenu = (event) => {
                 if (!this.runtime?.adapter.contextMenu || !this.active())
                     return;
                 const captured = this.runtime.capture();
@@ -196,11 +221,11 @@ class ImageView {
             const label = state.status === 'resolved'
                 ? state.presentation.label || alt || reference.reference
                 : alt || reference.reference;
-            this.dom.setAttribute('aria-label', label);
-            this.dom.dataset.inkkitFileState = this.previewFailed
+            this.element.setAttribute('aria-label', label);
+            this.element.dataset.inkkitFileState = this.previewFailed
                 ? 'error'
                 : state.status;
-            this.dom.dataset.inkkitFileKind =
+            this.element.dataset.inkkitFileKind =
                 state.status === 'resolved' ? state.presentation.kind : 'file';
             if (this.previewFailed) {
                 this.card(label, this.runtime.labels.filePreviewUnavailable, true);
@@ -238,7 +263,7 @@ class ImageView {
                 });
                 media.src = presentation.url;
                 this.media = media;
-                this.dom.append(media);
+                this.element.append(media);
                 this.card(label);
             }
             else if (presentation.kind === 'pdf') {
@@ -254,7 +279,7 @@ class ImageView {
                 });
                 pdf.src = presentation.url;
                 this.pdf = pdf;
-                this.dom.append(pdf);
+                this.element.append(pdf);
                 this.card(label, this.runtime.labels.filePDFPreview);
             }
             else
@@ -263,11 +288,11 @@ class ImageView {
         }
         const presentation = this.adapter?.presentation(String(this.node.attrs.src ?? ''));
         if (!presentation) {
-            this.dom.classList.add('image-absent');
-            this.dom.textContent = alt || String(this.node.attrs.src ?? '');
+            this.element.classList.add('image-absent');
+            this.element.textContent = alt || String(this.node.attrs.src ?? '');
             return;
         }
-        this.dom.classList.remove('image-absent');
+        this.element.classList.remove('image-absent');
         this.renderImage(presentation.url, alt, width);
     }
     renderImage(url, alt, width) {
@@ -284,10 +309,14 @@ class ImageView {
             });
         image.src = url;
         this.image = image;
+        const preview = document.createElement('span');
+        preview.className = 'inkkit-image-preview';
+        preview.append(image);
+        // The grip sits on the whole card, so it centres on the picture and its name together.
         const handle = document.createElement('span');
         handle.className = 'image-handle';
         handle.addEventListener('pointerdown', this.startResize);
-        this.dom.append(image, handle);
+        this.element.append(preview, handle);
     }
     startResize = (event) => {
         event.preventDefault();
@@ -352,6 +381,18 @@ class ImageView {
         return this.view.editable && !this.view.composing && this.canMutate();
     }
 }
+const svg = 'http://www.w3.org/2000/svg';
+function openArrow() {
+    const icon = document.createElementNS(svg, 'svg');
+    icon.setAttribute('viewBox', '0 0 12 12');
+    icon.setAttribute('aria-hidden', 'true');
+    icon.setAttribute('focusable', 'false');
+    const path = document.createElementNS(svg, 'path');
+    path.setAttribute('d', 'M4 2.5h5.5V8M9.5 2.5 2.5 9.5');
+    icon.append(path);
+    return icon;
+}
 export function imageView(adapter, runtime, canMutate = () => true) {
-    return $view(imageSchema.node, () => (node, view, getPos) => new ImageView(node, view, getPos, adapter, runtime, canMutate));
+    const view = (schema) => $view(schema.node, () => (node, view, getPos) => new ImageView(node, view, getPos, adapter, runtime, canMutate));
+    return [view(imageSchema), view(imageBlockSchema)];
 }

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

@@ -3,11 +3,13 @@ import { DOMParser as ProseParser, DOMSerializer, Fragment, Slice, } from '@milk
 import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
 import { $prose } from '@milkdown/kit/utils';
 import { pasteSpreadsheet } from './spreadsheet.js';
+import { isImage } from './image-blocks.js';
 import { avoidReferenceCollisions, markdownFromHTML, } from './reference-clipboard.js';
 import { InkKitError, } from './types.js';
 export class PasteController {
     options;
     active;
+    key = new PluginKey('inkkitPaste');
     dead = false;
     get pending() {
         return this.active != null;
@@ -16,16 +18,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 +72,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 +135,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;
                 }
@@ -327,14 +335,18 @@ export class PasteController {
                     const parsed = ctx.get(parserCtx)(markdown);
                     let imageIndex = 0;
                     const hydrate = (node) => {
-                        if (node.type.name === 'image') {
+                        if (isImage(node)) {
                             const slot = /^inkkit-clipboard-image:(\d+)$/.exec(String(node.attrs.src));
                             const position = slot ? Number(slot[1]) : imageIndex++;
                             const element = elements.some((element) => element.hasAttribute('data-inkkit-image-slot'))
                                 ? elements.find((element) => Number(element.getAttribute('data-inkkit-authored-image-slot') ?? element.getAttribute('data-inkkit-image-slot')) === position)
                                 : elements[position];
-                            if (!element || !container.contains(element))
-                                return schema.text(`[${node.attrs.alt || 'Image'}: image unavailable]`);
+                            if (!element || !container.contains(element)) {
+                                const text = schema.text(`[${node.attrs.alt || 'Image'}: image unavailable]`);
+                                return node.isBlock
+                                    ? schema.nodes.paragraph.create(null, text)
+                                    : text;
+                            }
                             return node.type.create({ ...node.attrs, src: element.getAttribute('src') }, null, node.marks);
                         }
                         if (node.isText)
@@ -389,8 +401,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 +414,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/search.d.ts

@@ -1,4 +1,4 @@
-import type { Node as ProseNode } from '@milkdown/kit/prose/model';
+import { type Transaction } from '@milkdown/kit/prose/state';
 import type { EditorView } from '@milkdown/kit/prose/view';
 export interface TextMatch {
     from: number;
@@ -11,5 +11,5 @@ export interface LiteralReplacement extends TextMatch {
 export declare function findLiteral(text: string, search: string, from?: number): TextMatch | undefined;
 export declare function replaceLiteral(text: string, search: string, replacement: string, selection: TextMatch, all?: boolean): LiteralReplacement;
 export declare function findFormatted(view: EditorView, text: string): boolean;
-export declare function replaceFormatted(view: EditorView, search: string, replacement: string, preflight: (doc: ProseNode) => void, all?: boolean): number;
-export declare function replaceFormattedRange(view: EditorView, from: number, to: number, replacement: string, preflight: (doc: ProseNode) => void): boolean;
+export declare function replaceFormatted(view: EditorView, search: string, replacement: string, preflight: (tr: Transaction) => void, all?: boolean): number;
+export declare function replaceFormattedRange(view: EditorView, from: number, to: number, replacement: string, preflight: (tr: Transaction) => void): boolean;

package/dist/search.js

@@ -162,7 +162,7 @@ export function replaceFormatted(view, search, replacement, preflight, all = fal
         tr = tr.setSelection(TextSelection.create(tr.doc, match.from, tr.mapping.map(match.to, 1)));
     }
     try {
-        preflight(tr.doc);
+        preflight(tr);
     }
     catch (error) {
         if (error instanceof InkKitError)
@@ -189,7 +189,7 @@ export function replaceFormattedRange(view, from, to, replacement, preflight) {
     const tr = closeHistory(view.state.tr.replace(from, to, replacementSlice(view.state, from, to, value)));
     tr.setSelection(TextSelection.create(tr.doc, from, tr.mapping.map(to, 1)));
     try {
-        preflight(tr.doc);
+        preflight(tr);
     }
     catch (error) {
         if (error instanceof InkKitError)