@aicayzer/inkkit 0.0.15 → 0.0.17

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/dialect.js

@@ -99,6 +99,16 @@ function remarkDialect() {
                     ? value.replace(/^[ \t]+|[ \t]+$/g, (spaces) => spaces.replaceAll(' ', ' ').replaceAll('\t', '	'))
                     : value;
             },
+            thematicBreak(node, parent, state) {
+                const value = defaultHandlers.thematicBreak(node, parent, state);
+                // A document opening with `---` reads back as front matter when
+                // another `---` line follows.
+                return parent?.type === 'root' &&
+                    parent.children.length > 1 &&
+                    parent.children[0] === node
+                    ? value.replaceAll('-', '*')
+                    : value;
+            },
         },
     });
     add('toMarkdownExtensions', { handlers: { link, code: fencedCodeHandler } });

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;