@aicayzer/inkkit 0.0.15 → 0.0.16

package/NOTICE

@@ -1,7 +1,3 @@
-InkKit includes editor behavior and source from PadPad and Memos.
-Copyright (c) 2026 August Cayzer. Licensed under the MIT License.
-Sources: https://github.com/aicayzer/padpad and https://github.com/aicayzer/memos
-
 The scoped table styles in src/style.css are adapted from prosemirror-tables.
 Source: https://github.com/ProseMirror/prosemirror-tables
 

package/README.md

@@ -1,33 +1,31 @@
 # InkKit
 
-InkKit is a reusable Markdown editor for simple writing tools and richer document apps. It provides formatted editing, source preservation, portable clipboard content and optional host-managed images, while your app controls its appearance, files and interface.
+A Markdown editor for the web and for apps that host a web view. It edits formatted text and keeps your Markdown as you wrote it: a document you open and leave is saved unchanged, and an edit rewrites only the blocks it touches.
 
-Write in formatted or source mode with shared undo/redo. Edit tables, task lists, footnotes, reference links, highlights and callouts. Preview bounded Mermaid diagrams offline. Copy readable text and semantic HTML, explicitly copy Markdown source, or capture a complete printable document. Native hosts can use scoped readable-text ranges and demand-driven geometry with their own search controls and viewport insets. Unsupported syntax remains editable literal Markdown.
+- Formatted and source editing, with one undo history
+- Tables, task lists, footnotes, callouts, highlights and reference links
+- Mermaid diagram previews, offline
+- Copy as readable text or HTML, or copy the Markdown itself
+- Images and files through your own storage adapter
+- Your app owns the toolbar, menus, files and appearance
 
-Host controls, read-only and text-input policies, command availability, scoped appearance, labels and shortcuts are available from 0.0.8. Check the [releases](https://github.com/aicayzer/inkkit/releases) for published versions and verification evidence.
+## Install
 
 ```sh
 npm install @aicayzer/inkkit
 ```
 
+## Use
+
 ```ts
 import { InkKitEditor } from '@aicayzer/inkkit'
 import '@aicayzer/inkkit/style.css'
 
-const root = document.getElementById('editor')!
-const editor = await InkKitEditor.mount(root, {
-  changed(text, generation) {
-    // Notify the host; capture a fresh snapshot when saving.
-  },
-  stateChanged(state) {
-    // Update the host's formatting controls.
-  },
-  openLink(href) {
-    // Open through the host.
-  },
-  copy(text) {
-    // Write code-block text to the clipboard.
-  },
+const editor = await InkKitEditor.mount(document.getElementById('editor')!, {
+  changed(markdown, generation) {},
+  stateChanged(state) {},
+  openLink(href) {},
+  copy(text) {},
 })
 
 editor.loadDocument({
@@ -36,17 +34,22 @@ editor.loadDocument({
   format: 'md',
   text: '# Hello\n\nStart writing.\n',
 })
-const snapshot = editor.snapshot(1)
+
+const { text } = editor.snapshot(1)
 ```
 
-InkKit runs on the web and in offline web views. Hosts use its public TypeScript facade and own toolbars, menus, persistence, clipboard bridges, Print/PDF actions and image storage. Images require an adapter; private references stay opaque. TXT stays literal. RTF document editing is outside current support.
+## Built with InkKit
 
-Start with the [feature guide](docs/supported-syntax.md) and [simple and rich integration examples](docs/integration.md). The [documentation index](docs/README.md) links to precise API, preservation, playground, verification and publication guidance.
+- [Memos](https://github.com/aicayzer/memos): a small Mac app for memos, in one floating window
+- [PadPad](https://github.com/aicayzer/padpad): a small Mac app for quick text and files
 
-Scope and release status live in the [InkKit Project](https://github.com/users/aicayzer/projects/3) and [version milestones](https://github.com/aicayzer/inkkit/milestones). Only documented, released features form the supported package contract.
+## Learn more
 
-MIT licensed. InkKit builds on the public PadPad and Memos editors; see [NOTICE](NOTICE).
+- [Supported syntax](docs/supported-syntax.md)
+- [Integration guide](docs/integration.md)
+- [API reference](docs/api.md)
+- [All documentation](docs/README.md)
 
-Optional wiki links and a host-owned asynchronous file adapter support named/path images, audio, video, PDFs and file cards. Authored source and sizing are preserved; portable copy/print uses validated images or documented descriptive fallbacks. See [linked syntax](docs/supported-syntax.md#linked-syntax) and [adapter contracts](docs/api.md#optional-wiki-links-and-files).
+## License
 
-From 0.0.11, minimal hosts can mount with `rendering: { codeHighlighting: false, diagramPreview: false }` to skip optional presentation work. Source, shared history and explicit portable exports retain their contracts. Mermaid loads on first actual render. Single-file offline bundles still contain the rendering code; see [performance measurements](docs/performance.md).
+[MIT](LICENSE). Third-party notices are in [NOTICE](NOTICE).

package/dist/highlight.js

@@ -5,41 +5,128 @@ import { $prose } from '@milkdown/kit/utils';
 const lowlight = createLowlight(common);
 // Colors are decorations over the plain text, so the markdown is untouched;
 // a block without a known language stays plain.
+function blockDecorations(node, pos) {
+    const language = String(node.attrs.language ?? '').toLowerCase();
+    const found = [];
+    if (!language || !lowlight.registered(language))
+        return found;
+    let offset = pos + 1;
+    const walk = (children, classes) => {
+        for (const child of children) {
+            if (child.type === 'text') {
+                const end = offset + child.value.length;
+                if (classes.length > 0)
+                    found.push(Decoration.inline(offset, end, { class: classes.join(' ') }));
+                offset = end;
+            }
+            else if (child.type === 'element') {
+                const own = child.properties?.className ?? [];
+                walk(child.children, [...classes, ...own]);
+            }
+        }
+    };
+    walk(lowlight.highlight(language, node.textContent).children, []);
+    return found;
+}
 function decorations(doc) {
     const found = [];
     doc.descendants((node, pos) => {
-        if (node.type.name !== 'code_block')
+        if (!node.isTextblock)
             return true;
-        const language = String(node.attrs.language ?? '').toLowerCase();
-        if (!language || !lowlight.registered(language))
-            return false;
-        let offset = pos + 1;
-        const walk = (children, classes) => {
-            for (const child of children) {
-                if (child.type === 'text') {
-                    const end = offset + child.value.length;
-                    if (classes.length > 0)
-                        found.push(Decoration.inline(offset, end, { class: classes.join(' ') }));
-                    offset = end;
-                }
-                else if (child.type === 'element') {
-                    const own = child.properties?.className ?? [];
-                    walk(child.children, [...classes, ...own]);
-                }
-            }
-        };
-        walk(lowlight.highlight(language, node.textContent).children, []);
+        if (node.type.name === 'code_block')
+            for (const decoration of blockDecorations(node, pos))
+                found.push(decoration);
         return false;
     });
     return DecorationSet.create(doc, found);
 }
+// Every range of the new document an update may have touched: each step's own
+// range, plus the whole span where the two documents differ, which also covers
+// steps that change a node without changing its size.
+function touched(tr) {
+    const ranges = [];
+    tr.mapping.maps.forEach((map, index) => {
+        const rest = tr.mapping.slice(index + 1);
+        map.forEach((_, __, from, to) => ranges.push([rest.map(from, -1), rest.map(to, 1)]));
+    });
+    const start = tr.before.content.findDiffStart(tr.doc.content);
+    if (start != null) {
+        const end = tr.before.content.findDiffEnd(tr.doc.content);
+        // The scans overlap when inserted or deleted text repeats its neighbours.
+        if (end)
+            ranges.push([start, end.b + Math.max(0, start - Math.min(end.a, end.b))]);
+    }
+    return ranges;
+}
+// Mapping carries colors of unchanged blocks to their new positions without
+// reading them, but leaves stale colors inside any block that was edited. Those
+// blocks are highlighted again; no other block is. Stale colors are dropped by
+// rebuilding the set: DecorationSet.remove compares every removed decoration
+// with every other in its block, which is quadratic in a large block.
+function update(mapped, tr) {
+    const stale = [];
+    const fresh = [];
+    const seen = new Set();
+    for (const [from, to] of touched(tr)) {
+        let start = from;
+        let end = to;
+        const blocks = [];
+        tr.doc.nodesBetween(from, to, (node, pos) => {
+            if (!node.isTextblock)
+                return true;
+            start = Math.min(start, pos);
+            end = Math.max(end, pos + node.nodeSize);
+            if (node.type.name === 'code_block' && !seen.has(pos)) {
+                seen.add(pos);
+                blocks.push([node, pos]);
+            }
+            return false;
+        });
+        stale.push([start, end]);
+        for (const [node, pos] of blocks)
+            for (const decoration of blockDecorations(node, pos))
+                fresh.push(decoration);
+    }
+    const found = [];
+    for (const [start, end] of stale)
+        for (const decoration of mapped.find(start, end))
+            found.push(decoration);
+    if (found.length === 0)
+        return mapped.add(tr.doc, fresh);
+    // remove is quadratic in the decorations it removes, so only a large block takes the rebuild below.
+    if (found.length <= 256)
+        return mapped.remove(found).add(tr.doc, fresh);
+    stale.sort((a, b) => a[0] - b[0]);
+    const merged = [];
+    for (const range of stale) {
+        const last = merged.at(-1);
+        if (last && range[0] <= last[1])
+            last[1] = Math.max(last[1], range[1]);
+        else
+            merged.push([range[0], range[1]]);
+    }
+    const kept = mapped.find().filter((decoration) => {
+        let low = 0;
+        let high = merged.length;
+        while (low < high) {
+            const middle = (low + high) >> 1;
+            if (merged[middle][0] < decoration.to)
+                low = middle + 1;
+            else
+                high = middle;
+        }
+        const range = merged[low - 1];
+        return !range || range[1] <= decoration.from;
+    });
+    return DecorationSet.create(tr.doc, kept.concat(fresh));
+}
 export const highlightPlugin = $prose(() => new Plugin({
     key: new PluginKey('highlight'),
     state: {
         init: (_, state) => decorations(state.doc),
         apply: (tr, previous) => tr.docChanged
-            ? decorations(tr.doc)
-            : previous.map(tr.mapping, tr.doc),
+            ? update(previous.map(tr.mapping, tr.doc), tr)
+            : previous,
     },
     props: {
         decorations(state) {

package/dist/mermaid.js

@@ -7,15 +7,107 @@ import { InkKitError } from './types.js';
 export function isMermaid(node) {
     return node.type.name === 'code_block' && node.attrs.language === 'mermaid';
 }
+const refusal = 'HTML, styles, actions, resources and diagram configuration are disabled. The source is retained.';
+// CSS functions that can load an image or display another element. Mermaid's
+// own styles use none of them apart from url() for in-document markers.
+const cssResource = /url\s*\(\s*[^#\s]|(?:image-set|cross-fade|image|element|src)\s*\(/i;
 export function validateDiagram(source) {
     if (source.length > 30000)
         throw new Error('The diagram exceeds the 30,000 character rendering limit.');
     if (!/^\s*(?:%%[^\n]*\n\s*)*(?:flowchart|graph|sequenceDiagram|classDiagram|stateDiagram(?:-v2)?|erDiagram|pie)\b/.test(source))
         throw new Error('This diagram type is not supported. The source is retained.');
-    // Mermaid can load image bytes before sanitising its result. Reject resource
-    // and configuration syntax before calling the renderer, including entities.
-    if (/%%\{|^\s*---|<\s*[a-z!/?]|&(?:#\w+|[a-z]+);|@\{|\$\$|(?:https?|data|file|javascript|vbscript|blob):|\/\/|\b(?:click|callback|href|link|image|icon|fontawesome|style|classDef|linkStyle)\b|url\s*\(|@import|\\/im.test(source))
-        throw new Error('HTML, actions, resources and diagram configuration are disabled. The source is retained.');
+    // Mermaid can load image bytes before sanitising its result, so resource and
+    // configuration syntax is refused anywhere in the source, labels included.
+    // Statements are checked separately, in Mermaid's parse result.
+    if (/%%\{|^\s*---|<\s*[a-z!/?]|&(?:#\w+|[a-z]+);|@\{|\$\$|(?:https?|data|file|javascript|vbscript|blob):|\/\/|url\s*\(|image-set\s*\(|cross-fade\s*\(|@import|\\/im.test(source))
+        throw new Error(refusal);
+}
+const entries = (value) => value instanceof Map ? [...value.values()] : Array.isArray(value) ? value : [];
+const filled = (value) => value instanceof Map
+    ? value.size > 0
+    : Array.isArray(value)
+        ? value.length > 0
+        : typeof value === 'object' && value !== null
+            ? Object.keys(value).length > 0
+            : Boolean(value);
+// In strict mode a flowchart records a click handler only as this class.
+const clickable = (classes) => (Array.isArray(classes) ? classes : String(classes ?? '').split(/\s+/))
+    .map(String)
+    .includes('clickable');
+function statementIn(node, kinds, seen = new Set()) {
+    if (typeof node !== 'object' || node === null || seen.has(node))
+        return false;
+    seen.add(node);
+    if (kinds.includes(String(node.stmt)))
+        return true;
+    return Object.values(node).some((value) => statementIn(value, kinds, seen));
+}
+// Refuses styles, class definitions, link styles, links, click handlers,
+// tooltips, icons and images wherever the grammar accepted them. The names are
+// those of the pinned Mermaid's diagram databases; if one is missing, the
+// diagram is refused rather than passed unchecked.
+function refuseDirectives({ type, db }) {
+    const store = db;
+    const field = (name) => {
+        if (!(name in store))
+            throw new Error('The diagram could not be checked. The source is retained.');
+        return store[name];
+    };
+    const read = (name) => {
+        const accessor = field(name);
+        if (typeof accessor !== 'function')
+            throw new Error('The diagram could not be checked. The source is retained.');
+        return accessor.call(db);
+    };
+    let found;
+    switch (type) {
+        case 'flowchart-v2': {
+            const edges = read('getEdges');
+            found =
+                filled(read('getClasses')) ||
+                    filled(field('tooltips')) ||
+                    filled(edges.defaultStyle) ||
+                    edges.defaultInterpolate !== undefined ||
+                    entries(read('getVertices')).some((vertex) => filled(vertex.styles) ||
+                        Boolean(vertex.link || vertex.haveCallback || vertex.icon || vertex.img) ||
+                        clickable(vertex.classes)) ||
+                    entries(edges).some((edge) => filled(edge.style) ||
+                        edge.interpolate !== undefined ||
+                        clickable(edge.classes)) ||
+                    entries(read('getSubGraphs')).some((graph) => clickable(graph.classes));
+            break;
+        }
+        case 'stateDiagram':
+            found =
+                statementIn(field('rootDoc'), ['style', 'classDef', 'click']) ||
+                    filled(read('getClasses')) ||
+                    filled(read('getLinks')) ||
+                    entries(read('getStates')).some((state) => filled(state.styles) || filled(state.textStyles));
+            break;
+        case 'classDiagram':
+            found =
+                filled(field('styleClasses')) ||
+                    entries(read('getClasses')).some((node) => filled(node.styles) ||
+                        Boolean(node.link || node.haveCallback || node.tooltip) ||
+                        clickable(node.cssClasses));
+            break;
+        case 'er':
+            found =
+                filled(read('getClasses')) ||
+                    entries(read('getEntities')).some((entity) => filled(entity.cssStyles)) ||
+                    entries(read('getSubGraphs')).some((graph) => filled(graph.cssStyles));
+            break;
+        case 'sequence':
+            found = entries(read('getActors')).some((actor) => filled(actor.links) || filled(actor.properties));
+            break;
+        case 'pie':
+            found = false;
+            break;
+        default:
+            throw new Error('This diagram type is not supported. The source is retained.');
+    }
+    if (found)
+        throw new Error(refusal);
 }
 let sequence = 0;
 let queue = Promise.resolve();
@@ -34,11 +126,13 @@ export function safeDiagramSVG(svg) {
     for (const element of [root, ...root.querySelectorAll('*')]) {
         for (const attribute of [...element.attributes]) {
             if (/^on/i.test(attribute.name) ||
-                /(?:https?|data|file|javascript|blob):|@import|url\s*\(\s*[^#]|\\/i.test(attribute.value))
+                /(?:https?|data|file|javascript|blob):|@import|\\/i.test(attribute.value) ||
+                cssResource.test(attribute.value))
                 element.removeAttribute(attribute.name);
         }
         if (element.tagName.toLowerCase() === 'style' &&
-            /@import|(?:https?|data|file):|url\s*\(\s*[^#]|\\/i.test(element.textContent ?? ''))
+            (/@import|(?:https?|data|file):|\\/i.test(element.textContent ?? '') ||
+                cssResource.test(element.textContent ?? '')))
             element.remove();
     }
     root.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
@@ -98,6 +192,14 @@ export function renderDiagram(source) {
                 'suppressErrorRendering',
             ],
         });
+        // getDiagramFromText is the pinned Mermaid's own parser, which render runs
+        // again on the same text; the public parse does not return the diagram. It
+        // skips render's configuration step, so the two parse alike only because
+        // the source check refuses %%{ directives and front matter.
+        refuseDirectives(await mermaid.mermaidAPI.getDiagramFromText(source));
+        // Mermaid measures text while laying out, so the holder must be attached
+        // and rendered. Such a holder can load CSS resources before sanitising,
+        // which is why the source and the parse result are checked first.
         const holder = document.createElement('div');
         holder.style.cssText =
             'position:fixed;left:-100000px;top:0;width:1200px;pointer-events:none';

package/dist/paste-html.d.ts

@@ -0,0 +1,23 @@
+export declare function isRichElement(element: Element): boolean;
+/** Whether normalisation enters the element, so its content may be rewritten. */
+export declare function isRewrittenElement(element: Element): boolean;
+/**
+ * Whether the element's own inline style makes a browser keep the whitespace
+ * of its content, as copied editor code does with `white-space: pre`. The
+ * declarations are parsed, so case, spacing, comments, quoted text and
+ * `!important` do not matter. Style sheets are not consulted.
+ */
+export declare function keepsWhitespace(element: Element): boolean;
+/**
+ * Rewrites common web-page elements to ones the importer already understands.
+ * Elements that will stay literal source are not entered, so their content is
+ * preserved exactly.
+ */
+export declare function normalizeClipboardHTML(root: Node): void;
+/**
+ * Collapses source whitespace the way a browser renders it: runs become one
+ * space, and none remains at the edges of a block or beside a line break.
+ * `pre`, `code`, elements that stay literal source and elements whose style
+ * keeps whitespace are not entered.
+ */
+export declare function collapseClipboardWhitespace(root: Node): void;

package/dist/paste-html.js

@@ -0,0 +1,441 @@
+// Elements the HTML paste path hands to ProseMirror's parser. Anything else
+// is kept as literal source, so a tag must be listed here or rewritten by
+// `normalizeClipboardHTML` to avoid becoming a raw-HTML block.
+const rich = new Set([
+    'P',
+    'H1',
+    'H2',
+    'H3',
+    'H4',
+    'H5',
+    'H6',
+    'STRONG',
+    'MARK',
+    'B',
+    'EM',
+    'I',
+    'S',
+    'DEL',
+    'STRIKE',
+    'CODE',
+    'PRE',
+    'BLOCKQUOTE',
+    'A',
+    'BR',
+    'HR',
+    'UL',
+    'OL',
+    'LI',
+    'TABLE',
+    'THEAD',
+    'TBODY',
+    'TFOOT',
+    'TR',
+    'TH',
+    'TD',
+    'IMG',
+    'SPAN',
+    'SUP',
+    'DIV',
+    'FONT',
+    'SECTION',
+    'ARTICLE',
+    'MAIN',
+    'HEADER',
+    'FOOTER',
+]);
+// Document furniture and form inputs hold no content of their own. A
+// template never keeps `head`, so it is not listed.
+const dropped = new Set(['STYLE', 'META', 'LINK', 'TITLE', 'SOURCE', 'INPUT']);
+// The dialect has no underline, subscript or similar marks, so these keep
+// their children and lose only the wrapper.
+const unwrapped = new Set([
+    'U',
+    'SUB',
+    'SMALL',
+    'TIME',
+    'ABBR',
+    'CITE',
+    'DFN',
+    'VAR',
+    'INS',
+    'BDI',
+    'BDO',
+    'LABEL',
+]);
+const blockWrappers = new Set(['FIGURE', 'FIGCAPTION', 'DL', 'DD']);
+const handled = new Set([
+    ...dropped,
+    ...unwrapped,
+    ...blockWrappers,
+    'DT',
+    'PICTURE',
+]);
+export function isRichElement(element) {
+    return rich.has(element.tagName);
+}
+/** Whether normalisation enters the element, so its content may be rewritten. */
+export function isRewrittenElement(element) {
+    return rich.has(element.tagName) || handled.has(element.tagName);
+}
+// `white-space` and its longhand `white-space-collapse` keep source spaces with
+// these keywords. `pre-line` and `preserve-breaks` collapse spaces, so they are
+// collapsed here too.
+const keepingWhitespace = new Set([
+    'pre',
+    'pre-wrap',
+    'break-spaces',
+    'preserve',
+    'preserve-spaces',
+]);
+/**
+ * Whether the element's own inline style makes a browser keep the whitespace
+ * of its content, as copied editor code does with `white-space: pre`. The
+ * declarations are parsed, so case, spacing, comments, quoted text and
+ * `!important` do not matter. Style sheets are not consulted.
+ */
+export function keepsWhitespace(element) {
+    const style = element.getAttribute('style');
+    if (!style)
+        return false;
+    const winning = new Map();
+    for (const declaration of declarations(style)) {
+        const colon = declaration.indexOf(':');
+        if (colon < 0)
+            continue;
+        const name = declaration.slice(0, colon).trim().toLowerCase();
+        if (name !== 'white-space' && name !== 'white-space-collapse')
+            continue;
+        let value = declaration.slice(colon + 1).trim();
+        const important = /!\s*important$/i.test(value);
+        if (important)
+            value = value.replace(/!\s*important$/i, '');
+        const earlier = winning.get(name);
+        if (!earlier?.important || important)
+            winning.set(name, { value: value.trim().toLowerCase(), important });
+    }
+    return [...winning.values()].some(({ value }) => value.split(/\s+/).some((keyword) => keepingWhitespace.has(keyword)));
+}
+// Splits a style attribute at the semicolons that end declarations, ignoring
+// those inside comments, quoted strings and parentheses such as `url(...)`.
+function declarations(style) {
+    const result = [];
+    let current = '';
+    let quote = '';
+    let depth = 0;
+    for (let index = 0; index < style.length; index++) {
+        const character = style[index];
+        if (quote) {
+            current += character;
+            if (character === '\\' && index + 1 < style.length)
+                current += style[++index];
+            else if (character === quote)
+                quote = '';
+        }
+        else if (character === '/' && style[index + 1] === '*') {
+            const end = style.indexOf('*/', index + 2);
+            index = end < 0 ? style.length : end + 1;
+        }
+        else if (character === '"' || character === "'") {
+            quote = character;
+            current += character;
+        }
+        else if (character === '(') {
+            depth++;
+            current += character;
+        }
+        else if (character === ')') {
+            depth = Math.max(0, depth - 1);
+            current += character;
+        }
+        else if (character === ';' && depth === 0) {
+            result.push(current);
+            current = '';
+        }
+        else
+            current += character;
+    }
+    result.push(current);
+    return result;
+}
+/**
+ * Rewrites common web-page elements to ones the importer already understands.
+ * Elements that will stay literal source are not entered, so their content is
+ * preserved exactly.
+ */
+export function normalizeClipboardHTML(root) {
+    for (const node of [...root.childNodes]) {
+        if (node.nodeType === Node.COMMENT_NODE) {
+            // Windows and some native apps leave the CF_HTML fragment markers in.
+            if (/^\s*(?:Start|End)Fragment\s*$/.test(node.data))
+                node.parentNode?.removeChild(node);
+            continue;
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE)
+            continue;
+        const element = node;
+        const tag = element.tagName;
+        if (!rich.has(tag) && !handled.has(tag))
+            continue;
+        if (dropped.has(tag)) {
+            const parent = element.parentElement;
+            element.remove();
+            if (parent)
+                removeEmptyParagraph(parent);
+        }
+        else if (tag === 'PICTURE') {
+            const image = element.querySelector('img');
+            if (image)
+                element.replaceWith(image);
+            else
+                element.remove();
+        }
+        else if (unwrapped.has(tag)) {
+            normalizeClipboardHTML(element);
+            element.replaceWith(...element.childNodes);
+        }
+        else if (tag === 'DT') {
+            normalizeClipboardHTML(element);
+            // Markdown has no definition lists. A bold term over its definition
+            // keeps which text names the other.
+            const term = element.ownerDocument.createElement('div');
+            boldInto(term, [...element.childNodes]);
+            element.replaceWith(term);
+        }
+        else if (blockWrappers.has(tag)) {
+            normalizeClipboardHTML(element);
+            const block = element.ownerDocument.createElement('div');
+            block.append(...element.childNodes);
+            element.replaceWith(block);
+        }
+        else {
+            if (tag === 'LI')
+                markTask(element);
+            normalizeClipboardHTML(element);
+        }
+    }
+}
+// A paragraph whose only content was a dropped element would otherwise import
+// as a blank paragraph.
+function removeEmptyParagraph(from) {
+    let node = from;
+    while (node &&
+        ['SPAN', 'FONT', 'STRONG', 'B', 'EM', 'I'].includes(node.tagName))
+        node = node.parentElement;
+    if (node?.tagName === 'P' &&
+        !node.textContent?.trim() &&
+        !node.querySelector('img,br,hr'))
+        node.remove();
+}
+const termBlocks = new Set(['P', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6']);
+const blocks = new Set([
+    ...termBlocks,
+    'BLOCKQUOTE',
+    'PRE',
+    'UL',
+    'OL',
+    'LI',
+    'TABLE',
+    'THEAD',
+    'TBODY',
+    'TFOOT',
+    'TR',
+    'TH',
+    'TD',
+    'SECTION',
+    'ARTICLE',
+    'MAIN',
+    'HEADER',
+    'FOOTER',
+    'HR',
+]);
+// Bolds the inline content of a term. Paragraphs, headings and divisions
+// inside it each become one bold paragraph; other blocks are kept as they are.
+function boldInto(target, nodes) {
+    const document = target.ownerDocument;
+    let run;
+    const paragraph = (content) => {
+        if (!content.some((node) => node.textContent?.trim() || isImage(node)))
+            return undefined;
+        const block = document.createElement('p');
+        const strong = document.createElement('strong');
+        strong.append(...content);
+        block.append(strong);
+        target.append(block);
+        return strong;
+    };
+    for (const node of nodes) {
+        const element = node.nodeType === Node.ELEMENT_NODE ? node : null;
+        if (element && blocks.has(element.tagName)) {
+            run = undefined;
+            if (element.tagName === 'P' || /^H[1-6]$/.test(element.tagName))
+                paragraph([...element.childNodes]);
+            else if (element.tagName === 'DIV')
+                boldInto(target, [...element.childNodes]);
+            else
+                target.append(element);
+        }
+        else if (run)
+            run.append(node);
+        else if (node.textContent?.trim() || isImage(node)) {
+            run = paragraph([node]);
+        }
+    }
+}
+function isImage(node) {
+    return (node.nodeType === Node.ELEMENT_NODE &&
+        (node.tagName === 'IMG' ||
+            !!node.querySelector('img')));
+}
+// GitHub, Notion and similar pages render a task as a checkbox leading its
+// list item, optionally inside a paragraph or label.
+function leadingCheckbox(item) {
+    let node = item;
+    for (;;) {
+        const first = [...node.childNodes].find((child) => child.nodeType !== Node.COMMENT_NODE &&
+            !(child.nodeType === Node.TEXT_NODE && !child.textContent?.trim()));
+        if (first?.nodeType !== Node.ELEMENT_NODE)
+            return undefined;
+        const element = first;
+        if (element.tagName === 'INPUT')
+            return element.getAttribute('type')?.toLowerCase() === 'checkbox'
+                ? element
+                : undefined;
+        if (!['P', 'LABEL', 'DIV', 'SPAN'].includes(element.tagName))
+            return undefined;
+        node = element;
+    }
+}
+function markTask(item) {
+    const checkbox = leadingCheckbox(item);
+    if (!checkbox)
+        return;
+    item.setAttribute('data-item-type', 'task');
+    item.setAttribute('data-checked', String(checkbox.hasAttribute('checked')));
+    checkbox.remove();
+}
+const inline = new Set([
+    'STRONG',
+    'MARK',
+    'B',
+    'EM',
+    'I',
+    'S',
+    'DEL',
+    'STRIKE',
+    'A',
+    'SPAN',
+    'SUP',
+    'FONT',
+]);
+const space = /[ \t\r\n\f]+/g;
+/**
+ * Collapses source whitespace the way a browser renders it: runs become one
+ * space, and none remains at the edges of a block or beside a line break.
+ * `pre`, `code`, elements that stay literal source and elements whose style
+ * keeps whitespace are not entered.
+ */
+export function collapseClipboardWhitespace(root) {
+    hoistEdgeSpace(root);
+    let trailing;
+    let start = true;
+    const trim = () => {
+        if (!trailing)
+            return;
+        trailing.data = trailing.data.slice(0, -1);
+        if (!trailing.data)
+            trailing.remove();
+        trailing = undefined;
+    };
+    const visit = (node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node;
+            let data = text.data.replace(space, ' ');
+            if ((start || trailing) && data.startsWith(' '))
+                data = data.slice(1);
+            if (!data)
+                return text.remove();
+            text.data = data;
+            start = false;
+            trailing = data.endsWith(' ') ? text : undefined;
+            return;
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE)
+            return;
+        const element = node;
+        const tag = element.tagName;
+        if (keepsWhitespace(element)) {
+            // Treated like `code` inside a line and like `pre` as a block.
+            if (inline.has(tag) || tag === 'CODE' || tag === 'IMG') {
+                trailing = undefined;
+                start = false;
+            }
+            else {
+                trim();
+                start = true;
+            }
+        }
+        else if (inline.has(tag)) {
+            for (const child of [...element.childNodes])
+                visit(child);
+        }
+        else if (tag === 'BR') {
+            trim();
+            start = true;
+        }
+        else if (tag === 'CODE' || tag === 'IMG') {
+            trailing = undefined;
+            start = false;
+        }
+        else {
+            trim();
+            start = true;
+            if (blocks.has(tag) && tag !== 'PRE' && tag !== 'HR')
+                for (const child of [...element.childNodes])
+                    visit(child);
+            trim();
+            start = true;
+        }
+    };
+    for (const child of [...root.childNodes])
+        visit(child);
+    trim();
+}
+// Whitespace inside emphasis, links and similar wrappers cannot be written in
+// Markdown, so it moves outside them.
+function hoistEdgeSpace(node) {
+    for (const child of [...node.childNodes]) {
+        if (child.nodeType !== Node.ELEMENT_NODE)
+            continue;
+        const element = child;
+        if (keepsWhitespace(element))
+            continue;
+        if (inline.has(element.tagName)) {
+            hoistEdgeSpace(element);
+            const lead = edgeText(element, 'start');
+            const leading = lead?.data.match(/^[ \t\r\n\f]+/)?.[0];
+            if (lead && leading) {
+                lead.data = lead.data.slice(leading.length);
+                element.before(leading);
+            }
+            const tail = edgeText(element, 'end');
+            const trailing = tail?.data.match(/[ \t\r\n\f]+$/)?.[0];
+            if (tail && trailing) {
+                tail.data = tail.data.slice(0, -trailing.length);
+                element.after(trailing);
+            }
+        }
+        else if (blocks.has(element.tagName) && element.tagName !== 'PRE')
+            hoistEdgeSpace(element);
+    }
+}
+function edgeText(element, side) {
+    let node = side === 'start' ? element.firstChild : element.lastChild;
+    while (node && node.nodeType === Node.ELEMENT_NODE) {
+        if (!inline.has(node.tagName) ||
+            keepsWhitespace(node))
+            return undefined;
+        node = side === 'start' ? node.firstChild : node.lastChild;
+    }
+    return node?.nodeType === Node.TEXT_NODE ? node : undefined;
+}

package/dist/paste.js

@@ -4,6 +4,7 @@ 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 { collapseClipboardWhitespace, isRewrittenElement, isRichElement, normalizeClipboardHTML, } from './paste-html.js';
 import { avoidReferenceCollisions, markdownFromHTML, } from './reference-clipboard.js';
 import { InkKitError, } from './types.js';
 export class PasteController {
@@ -156,8 +157,25 @@ export class PasteController {
                 for (const table of [...container.querySelectorAll('table')]) {
                     if (table.parentElement?.closest('table'))
                         continue;
-                    if (schema.nodes.table && !unsupportedClipboardTable(table))
+                    // Inside an element that stays literal source, the whole element is
+                    // kept as written, so its tables are not rewritten or judged here.
+                    if (!insideRewrittenContent(table))
                         continue;
+                    if (schema.nodes.table) {
+                        // Judge the table as it will import, so wrappers such as `u` or
+                        // `label` in a cell do not make it literal. A table that is still
+                        // unsupported keeps its original source. An input in a cell would
+                        // be dropped with its state, so that table stays source too.
+                        const trial = table.cloneNode(true);
+                        const holder = table.ownerDocument.createDocumentFragment();
+                        holder.append(trial);
+                        normalizeClipboardHTML(holder);
+                        if (!table.querySelector('td input,th input') &&
+                            !unsupportedClipboardTable(trial)) {
+                            table.replaceWith(trial);
+                            continue;
+                        }
+                    }
                     const preserved = ctx.get(parserCtx)(table.outerHTML);
                     table.replaceWith(DOMSerializer.fromSchema(schema).serializeFragment(preserved.content));
                 }
@@ -193,10 +211,10 @@ export class PasteController {
                             element.removeAttribute(name);
                     }
                 }
-                // Native HTML clipboards add encoding metadata. Obsidian's reading
-                // view also copies its title and collapse controls with document HTML.
-                for (const metadata of container.querySelectorAll('meta[charset]'))
-                    metadata.remove();
+                // Native HTML clipboards add encoding metadata and fragment markers.
+                normalizeClipboardHTML(container);
+                // Obsidian's reading view also copies its title and collapse controls
+                // with document HTML.
                 for (const control of container.querySelectorAll('div.mod-header.mod-ui,div.mod-footer.mod-ui')) {
                     if (control.querySelector('.inline-title[contenteditable],.embedded-backlinks'))
                         control.remove();
@@ -212,51 +230,8 @@ export class PasteController {
                     if (control.querySelector('svg.svg-icon'))
                         control.remove();
                 }
-                const supported = new Set([
-                    'P',
-                    'H1',
-                    'H2',
-                    'H3',
-                    'H4',
-                    'H5',
-                    'H6',
-                    'STRONG',
-                    'MARK',
-                    'B',
-                    'EM',
-                    'I',
-                    'S',
-                    'DEL',
-                    'STRIKE',
-                    'CODE',
-                    'PRE',
-                    'BLOCKQUOTE',
-                    'A',
-                    'BR',
-                    'HR',
-                    'UL',
-                    'OL',
-                    'LI',
-                    'TABLE',
-                    'THEAD',
-                    'TBODY',
-                    'TFOOT',
-                    'TR',
-                    'TH',
-                    'TD',
-                    'IMG',
-                    'SPAN',
-                    'SUP',
-                    'DIV',
-                    'FONT',
-                    'SECTION',
-                    'ARTICLE',
-                    'MAIN',
-                    'HEADER',
-                    'FOOTER',
-                ]);
                 for (const element of [...container.querySelectorAll('*')]) {
-                    if (!container.contains(element) || supported.has(element.tagName))
+                    if (!container.contains(element) || isRichElement(element))
                         continue;
                     const literal = document.createElement('pre');
                     literal.className = 'literal-markdown';
@@ -294,6 +269,7 @@ export class PasteController {
                         table.replaceWith(literal);
                     }
                 }
+                collapseClipboardWhitespace(container);
                 const imported = new Map();
                 const elements = [...container.querySelectorAll('img')];
                 const uniqueSources = new Set(elements.map((element) => element.getAttribute('src') ?? ''));
@@ -449,6 +425,12 @@ export class PasteController {
         }
     }
 }
+function insideRewrittenContent(element) {
+    for (let parent = element.parentElement; parent; parent = parent.parentElement)
+        if (!isRewrittenElement(parent))
+            return false;
+    return true;
+}
 function unsupportedClipboardTable(table) {
     const rows = [...table.querySelectorAll('tr')];
     const widths = rows.map((row) => row.querySelectorAll(':scope > th,:scope > td').length);

package/dist/preserve.d.ts

@@ -3,6 +3,7 @@ import type { Node as ProseNode } from '@milkdown/kit/prose/model';
 export declare class PreservationError extends Error {
     constructor(message: string, options?: ErrorOptions);
 }
+export declare function correspondence(before: string[], after: string[]): Array<number | undefined>;
 /** Retains the loaded source of blocks the edit leaves alone. */
 export declare class Preservation {
     private readonly ctx;

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/package.json

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