@aicayzer/inkkit 0.0.14 → 0.0.16

package/dist/preserve.js

@@ -323,27 +323,89 @@ function withoutHeadingId(node) {
         ? 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) {
+const MATCHING_BUDGET = 1_000_000;
+// Unchanged blocks are anchored first, so a long document with many scattered
+// edits is matched as many short gaps rather than one wide span.
+export function correspondence(before, after) {
     const result = new Array(after.length);
-    let head = 0;
-    while (head < before.length &&
-        head < after.length &&
-        before[head] === after[head]) {
-        result[head] = head;
-        head++;
+    const work = { budget: MATCHING_BUDGET };
+    const spans = [{ b: 0, a: 0, bEnd: before.length, aEnd: after.length }];
+    for (let span = spans.pop(); span; span = spans.pop()) {
+        let { b, a, bEnd, aEnd } = span;
+        while (b < bEnd && a < aEnd && before[b] === after[a])
+            result[a++] = b++;
+        while (b < bEnd && a < aEnd && before[bEnd - 1] === after[aEnd - 1])
+            result[--aEnd] = --bEnd;
+        if (b === bEnd || a === aEnd)
+            continue;
+        work.budget -= bEnd - b + (aEnd - a);
+        if (work.budget < 0)
+            throw tooManyBlocks();
+        const anchors = uniqueAnchors(before, after, b, bEnd, a, aEnd);
+        if (!anchors.length) {
+            align(before, after, b, bEnd, a, aEnd, result, work);
+            continue;
+        }
+        for (const anchor of anchors) {
+            result[anchor.a] = anchor.b;
+            spans.push({ b, a, bEnd: anchor.b, aEnd: anchor.a });
+            b = anchor.b + 1;
+            a = anchor.a + 1;
+        }
+        spans.push({ b, a, bEnd, aEnd });
+    }
+    return result;
+}
+function tooManyBlocks() {
+    return new PreservationError('The edit changes too many blocks to preserve safely');
+}
+// Blocks that occur exactly once on each side, in the longest subsequence whose
+// order the two sides share. A repeated block is never an anchor: which copy it
+// belongs to is not known until its neighbours are placed.
+function uniqueAnchors(before, after, b, bEnd, a, aEnd) {
+    const once = (list, from, to) => {
+        const at = new Map();
+        for (let i = from; i < to; i++)
+            at.set(list[i], at.has(list[i]) ? -1 : i);
+        return at;
+    };
+    const beforeAt = once(before, b, bEnd);
+    const afterAt = once(after, a, aEnd);
+    const pairs = [];
+    for (let i = a; i < aEnd; i++) {
+        const match = beforeAt.get(after[i]);
+        if (match != null && match >= 0 && afterAt.get(after[i]) === i)
+            pairs.push({ b: match, a: i });
+    }
+    // Patience sorting: tails[k] ends the best increasing subsequence of length k + 1.
+    const tails = [];
+    const previous = new Array(pairs.length);
+    for (const [index, pair] of pairs.entries()) {
+        let low = 0;
+        let high = tails.length;
+        while (low < high) {
+            const middle = (low + high) >> 1;
+            if (pairs[tails[middle]].b < pair.b)
+                low = middle + 1;
+            else
+                high = middle;
+        }
+        previous[index] = low ? tails[low - 1] : -1;
+        tails[low] = index;
     }
-    let endBefore = before.length;
-    let endAfter = after.length;
-    while (endBefore > head &&
-        endAfter > head &&
-        before[endBefore - 1] === after[endAfter - 1]) {
-        result[--endAfter] = --endBefore;
+    const anchors = [];
+    let at = tails.length ? tails[tails.length - 1] : -1;
+    while (at >= 0) {
+        anchors.push(pairs[at]);
+        at = previous[at];
     }
-    const rows = endBefore - head + 1;
-    const columns = endAfter - head + 1;
-    let budget = 1_000_000;
+    return anchors.reverse();
+}
+// Edit distance distinguishes replacements from insertions, so replacing a block
+// retains its surrounding whitespace without assigning it a neighbour's source.
+function align(before, after, b, bEnd, a, aEnd, result, work) {
+    const rows = bEnd - b + 1;
+    const columns = aEnd - a + 1;
     let width = Math.max(1, Math.abs(rows - columns));
     for (;;) {
         const costs = [];
@@ -353,13 +415,13 @@ function correspondence(before, after) {
         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');
+            work.budget -= to - from + 1;
+            if (work.budget < 0)
+                throw tooManyBlocks();
             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;
+                const change = before[b + i - 1] === after[a + j - 1] ? 0 : 1;
                 row[j - from] =
                     i === 0
                         ? j
@@ -377,9 +439,9 @@ function correspondence(before, after) {
         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;
+            const change = i && j && before[b + i - 1] === after[a + j - 1] ? 0 : 1;
             if (i && j && get(i, j) === get(i - 1, j - 1) + change) {
-                result[head + j - 1] = head + i - 1;
+                result[a + j - 1] = b + i - 1;
                 i--;
                 j--;
             }
@@ -388,9 +450,8 @@ function correspondence(before, after) {
             else
                 j--;
         }
-        break;
+        return;
     }
-    return result;
 }
 /** Retains the loaded source of blocks the edit leaves alone. */
 export class Preservation {

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)

package/dist/style.css

@@ -201,6 +201,54 @@
   max-width: 100%;
   vertical-align: bottom;
 }
+/* A standalone image is its own block; the row is full width so a click beside the card lands on it. */
+.inkkit-root .ProseMirror .inkkit-image-block {
+  display: block;
+  margin: 0 0
+    var(--inkkit-paragraph-spacing, calc(var(--inkkit-font-size, 15px) * 0.667));
+  line-height: 0;
+}
+.inkkit-root .ProseMirror .inkkit-image-block > .image {
+  line-height: normal;
+}
+/* A card that shares its paragraph with text sits on its own line within it. */
+.inkkit-root .ProseMirror :not(.inkkit-image-block) > .image.inkkit-file {
+  display: block;
+  width: fit-content;
+}
+.inkkit-root .ProseMirror .inkkit-image-block.ProseMirror-selectednode {
+  outline: none;
+}
+.inkkit-root
+  .ProseMirror
+  .inkkit-image-block.ProseMirror-selectednode
+  > .image {
+  outline: 2px solid color-mix(in srgb, var(--_inkkit-accent) 60%, transparent);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+.inkkit-root .ProseMirror-gapcursor {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+}
+.inkkit-root .ProseMirror-gapcursor::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 2px solid var(--_inkkit-accent);
+  animation: inkkit-gapcursor-blink 1.1s steps(2, start) infinite;
+}
+@keyframes inkkit-gapcursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+.inkkit-root .ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}
 .inkkit-root .ProseMirror .image img {
   display: block;
   max-width: 100%;
@@ -222,6 +270,7 @@
   position: absolute;
   right: 0;
   top: 50%;
+  z-index: 1;
   transform: translateY(-50%);
   width: 20px;
   height: 32px;
@@ -255,7 +304,7 @@
   vertical-align: middle;
   border: 1px solid var(--_inkkit-rule);
   border-radius: 6px;
-  padding: 8px;
+  padding: 6px;
   white-space: normal;
 }
 
@@ -263,13 +312,30 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.5em;
+  gap: 0.25em 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;
+  margin-block-start: 0.25em;
+}
+/* Below a picture, the name takes the picture's width rather than widening the card, so the grip
+   stays at the picture's edge; a short picture still leaves room for a few characters. */
+.inkkit-root .ProseMirror .inkkit-image-preview ~ .inkkit-file-footer {
+  width: 0;
+  min-width: 100%;
+}
+.inkkit-root .ProseMirror .image.inkkit-file:has(> .inkkit-image-preview) {
+  min-width: min(100%, 8em);
+}
+/* The name truncates; the open arrow stays visible right after it. */
+.inkkit-root .ProseMirror .inkkit-file-name {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 0.25em;
+  min-width: 0;
 }
 
 .inkkit-root .ProseMirror .inkkit-file audio,
@@ -290,7 +356,7 @@
 }
 
 .inkkit-root .ProseMirror .inkkit-file-label {
-  flex: 1 1 auto;
+  flex: 0 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -313,6 +379,34 @@
   border-radius: 3px;
   cursor: pointer;
 }
+.inkkit-root .ProseMirror .inkkit-file-open {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5em;
+  min-height: 1.5em;
+  padding: 0;
+  color: var(--_inkkit-muted);
+  background: transparent;
+  border-color: transparent;
+}
+.inkkit-root .ProseMirror .inkkit-file-open:hover {
+  color: var(--_inkkit-text);
+  background: var(--_inkkit-code-bg);
+}
+.inkkit-root .ProseMirror .inkkit-file-open:focus-visible {
+  outline: 2px solid var(--_inkkit-accent);
+  outline-offset: 1px;
+}
+.inkkit-root .ProseMirror .inkkit-file-open svg {
+  width: 0.85em;
+  height: 0.85em;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
 
 .inkkit-root .ProseMirror {
   /* The viewport, not the wrapper Milkdown adds, so a click below the text still places the caret. */

package/dist/text-ranges.js

@@ -1,5 +1,6 @@
 import { InkKitError } from './types.js';
 import { fileReference } from './linked-syntax.js';
+import { imageBlockName } from './image-blocks.js';
 export function readableProjection(doc) {
     const result = { text: '', spans: [] };
     let blocks = 0;
@@ -24,6 +25,11 @@ export function readableProjection(doc) {
                 String(node.attrs.kind).replace(/^./, (value) => value.toUpperCase()), position, position + 1, 'embed');
             return true;
         }
+        if (name === imageBlockName) {
+            block(position);
+            append(fileReference(node).label || 'Image', position, position + node.nodeSize, 'embed');
+            return false;
+        }
         if (node.isTextblock) {
             block(position + 1);
             if (!node.content.size)
@@ -128,9 +134,12 @@ export function formattedRects(view, projection, from, to) {
         if (span.kind === 'embed' || span.kind === 'break') {
             const node = view.nodeDOM(span.start);
             if (node instanceof Element) {
+                // A standalone image's node is its full-width row; the card is what shows.
                 const label = node.matches('.inkkit-callout')
                     ? (node.querySelector(':scope > .inkkit-callout-header > .inkkit-callout-title') ?? node)
-                    : node;
+                    : node.matches('.inkkit-image-block')
+                        ? (node.firstElementChild ?? node)
+                        : node;
                 rects.push(...Array.from(label.getClientRects(), textRect));
             }
             continue;

package/package.json

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