@aicayzer/inkkit 0.0.3 → 0.0.4

package/dist/clipboard.d.ts

@@ -8,4 +8,4 @@ export declare function clipboardText(content: Fragment, missingImages?: Readonl
 export declare function clipboardContent(content: Fragment, schema: Schema): ClipboardContent;
 export declare const visibleClipboard: import("@milkdown/kit/utils").$Prose;
 /** Export a frozen document fragment; presentation URLs never enter the clipboard. */
-export declare function portableClipboard(content: Fragment, schema: Schema, markdown: string, adapter: ImageAdapter | undefined, context: DocumentContext): Promise<ClipboardOutput>;
+export declare function portableClipboard(content: Fragment, schema: Schema, markdown: string, adapter: ImageAdapter | undefined, context: DocumentContext, completeDiagrams?: ReadonlySet<string>): Promise<ClipboardOutput>;

package/dist/clipboard.js

@@ -2,6 +2,7 @@ import { DOMSerializer, } from '@milkdown/kit/prose/model';
 import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
 import { $prose } from '@milkdown/kit/utils';
 import { shareableFragment } from './comments.js';
+import { diagramImage } from './mermaid.js';
 // Clipboard text is the visible document, not Markdown serialization: escaping
 // punctuation or trailing spaces here leaks source syntax into other apps.
 export function clipboardText(content, missingImages = new Set()) {
@@ -110,7 +111,7 @@ export const visibleClipboard = $prose(() => new Plugin({
     },
 }));
 /** Export a frozen document fragment; presentation URLs never enter the clipboard. */
-export async function portableClipboard(content, schema, markdown, adapter, context) {
+export async function portableClipboard(content, schema, markdown, adapter, context, completeDiagrams) {
     content = shareableFragment(content);
     const base = clipboardContent(content, schema);
     const container = document.createElement('div');
@@ -130,6 +131,7 @@ export async function portableClipboard(content, schema, markdown, adapter, cont
     });
     await Promise.all(captured.map(async ({ element, reference, alt }, index) => {
         element.setAttribute('data-inkkit-image-slot', String(index));
+        element.setAttribute('data-inkkit-authored-image-slot', String(index));
         try {
             if (!adapter)
                 throw new Error('The image is unavailable.');
@@ -152,6 +154,55 @@ export async function portableClipboard(content, schema, markdown, adapter, cont
             images[index] = { reference, alt, error: message };
         }
     }));
+    const diagrams = [];
+    for (const code of container.querySelectorAll('pre[data-language="mermaid"] > code')) {
+        const source = code.textContent ?? '';
+        if (completeDiagrams && !completeDiagrams.has(source))
+            continue;
+        const result = { source };
+        diagrams.push(result);
+        try {
+            const image = await diagramImage(source);
+            let binary = '';
+            for (const byte of image.bytes)
+                binary += String.fromCharCode(byte);
+            const figure = document.createElement('figure');
+            figure.setAttribute('data-inkkit-mermaid', source);
+            const fence = code.parentElement.getAttribute('data-inkkit-fence');
+            if (fence)
+                figure.setAttribute('data-inkkit-fence', fence);
+            const element = document.createElement('img');
+            element.src = `data:image/png;base64,${btoa(binary)}`;
+            element.alt = `Mermaid diagram: ${source}`;
+            figure.append(element);
+            code.parentElement.replaceWith(figure);
+            result.image = image;
+        }
+        catch (error) {
+            result.error =
+                error instanceof Error
+                    ? error.message
+                    : 'The diagram could not be exported.';
+            const warning = document.createElement('p');
+            warning.setAttribute('data-inkkit-diagram-error', '');
+            warning.textContent = `Diagram unavailable: ${result.error}`;
+            code.parentElement.before(warning);
+        }
+    }
+    // Native attachment slots follow DOM order, including generated diagrams.
+    const orderedImages = [];
+    for (const element of container.querySelectorAll('img')) {
+        const diagram = element.closest('[data-inkkit-mermaid]');
+        const item = diagram
+            ? {
+                reference: '',
+                alt: element.alt,
+                image: diagrams.find((entry) => entry.source === diagram.getAttribute('data-inkkit-mermaid')).image,
+            }
+            : images[Number(element.getAttribute('data-inkkit-image-slot'))];
+        element.setAttribute('data-inkkit-image-slot', String(orderedImages.length));
+        orderedImages.push(item);
+    }
     // Scriptable links and event attributes are not part of semantic rich text.
     for (const element of container.querySelectorAll('*')) {
         for (const attribute of [...element.attributes])
@@ -165,6 +216,7 @@ export async function portableClipboard(content, schema, markdown, adapter, cont
         text: clipboardText(content, missing),
         html: container.innerHTML,
         markdown,
-        images,
+        images: [...orderedImages, ...images.filter((image) => image.error)],
+        diagrams,
     };
 }

package/dist/code-fences.d.ts

@@ -0,0 +1,8 @@
+import { type Options } from 'mdast-util-to-markdown';
+import type { Ctx } from '@milkdown/kit/ctx';
+import type { Node as ProseNode } from '@milkdown/kit/prose/model';
+export declare const remarkCodeFences: import("@milkdown/kit/utils").$Remark<"codeFences", unknown>;
+export declare const preservingCodeBlocks: import("@milkdown/kit/utils").$NodeSchema<"code_block">;
+export declare const fencedCodeHandler: NonNullable<Options['handlers']>['code'];
+export declare function restoreCodeEndings(ctx: Ctx, doc: ProseNode, markdown: string): string;
+export declare function finalCodeEnding(doc: ProseNode): string | undefined;

package/dist/code-fences.js

@@ -0,0 +1,166 @@
+import { codeBlockSchema } from '@milkdown/kit/preset/commonmark';
+import { $remark } from '@milkdown/kit/utils';
+import { defaultHandlers } from 'mdast-util-to-markdown';
+import { remarkCtx } from '@milkdown/kit/core';
+function readFence(value) {
+    if (typeof value !== 'object' || value == null)
+        return null;
+    const fence = value;
+    return typeof fence.marker === 'string' &&
+        /^(?:`{3,}|~{3,})$/.test(fence.marker) &&
+        fence.marker.length <= 30000 &&
+        typeof fence.info === 'string' &&
+        !/[\r\n]/.test(fence.info) &&
+        typeof fence.close === 'string' &&
+        (!fence.close ||
+            new RegExp(`^${fence.marker[0]}{${fence.marker.length},}$`).test(fence.close)) &&
+        typeof fence.trailing === 'string' &&
+        /^[ \t]*$/.test(fence.trailing) &&
+        ['\n', '\r\n'].includes(fence.ending)
+        ? fence
+        : null;
+}
+export const remarkCodeFences = $remark('codeFences', () => () => (tree, file) => {
+    const source = String(file.value).replace(/^\uFEFF/, '');
+    const visit = (node) => {
+        if (node.type === 'code') {
+            const raw = source.slice(node.position?.start.offset, node.position?.end.offset);
+            const opening = /^(`{3,}|~{3,})([^\r\n]*)(\r?\n)/.exec(raw);
+            if (opening) {
+                const close = /(?:^|\n)[ \t>]*(`{3,}|~{3,})([ \t]*)\r?$/.exec(raw);
+                const matching = close &&
+                    close[1][0] === opening[1][0] &&
+                    close[1].length >= opening[1].length;
+                node.data = {
+                    ...node.data,
+                    inkkitFence: {
+                        marker: opening[1],
+                        info: opening[2],
+                        close: matching ? close[1] : '',
+                        trailing: matching ? close[2] : '',
+                        ending: opening[3],
+                    },
+                };
+            }
+        }
+        if ('children' in node)
+            node.children.forEach(visit);
+    };
+    visit(tree);
+});
+export const preservingCodeBlocks = codeBlockSchema.extendSchema((base) => (ctx) => {
+    const schema = base(ctx);
+    return {
+        ...schema,
+        attrs: { ...schema.attrs, authoredFence: { default: null } },
+        parseDOM: [
+            {
+                tag: 'pre',
+                preserveWhitespace: 'full',
+                getAttrs: (dom) => {
+                    let authoredFence = null;
+                    try {
+                        authoredFence = readFence(JSON.parse(dom.getAttribute('data-inkkit-fence') ?? 'null'));
+                    }
+                    catch {
+                        /* Ordinary code stays usable without provenance. */
+                    }
+                    return { language: dom.dataset.language ?? '', authoredFence };
+                },
+            },
+        ],
+        toDOM: (node) => [
+            'pre',
+            {
+                'data-language': node.attrs.language,
+                ...(node.attrs.authoredFence
+                    ? { 'data-inkkit-fence': JSON.stringify(node.attrs.authoredFence) }
+                    : {}),
+            },
+            ['code', 0],
+        ],
+        parseMarkdown: {
+            match: (node) => node.type === 'code',
+            runner: (state, node, type) => {
+                state.openNode(type, {
+                    language: node.lang ?? '',
+                    authoredFence: readFence(node.data?.inkkitFence),
+                });
+                if (node.value)
+                    state.addText(String(node.value).replace(/\r\n?/g, '\n'));
+                state.closeNode();
+            },
+        },
+        toMarkdown: {
+            match: (node) => node.type.name === 'code_block',
+            runner: (state, node) => {
+                state.addNode('code', undefined, node.textContent, {
+                    lang: node.attrs.language,
+                    data: { inkkitFence: node.attrs.authoredFence },
+                });
+            },
+        },
+    };
+});
+export const fencedCodeHandler = (node, parent, state, info) => {
+    const fence = readFence(node.data?.inkkitFence);
+    if (!fence)
+        return defaultHandlers.code(node, parent, state, info);
+    const character = fence.marker[0];
+    let length = fence.marker.length;
+    const body = node.value.replace(/\r\n?/g, '\n');
+    for (const line of body.split('\n')) {
+        const run = new RegExp(`^ {0,3}(${character}+)[ \\t]*$`).exec(line);
+        if (run)
+            length = Math.max(length, run[1].length + 1);
+    }
+    const close = fence.close
+        ? character.repeat(Math.max(length, fence.close.length)) + fence.trailing
+        : '';
+    return (character.repeat(length) +
+        fence.info +
+        fence.ending +
+        body.replaceAll('\n', fence.ending) +
+        (close ? (body ? fence.ending : '') + close : ''));
+};
+export function restoreCodeEndings(ctx, doc, markdown) {
+    const endings = [];
+    doc.descendants((node) => {
+        if (node.type.name === 'code_block')
+            endings.push(readFence(node.attrs.authoredFence)?.ending ?? '\n');
+    });
+    const patches = [];
+    let index = 0;
+    const visit = (node) => {
+        if (node.type === 'code') {
+            const ending = endings[index++];
+            const from = node.position?.start.offset, to = node.position?.end.offset;
+            if (ending === '\r\n' && from != null && to != null)
+                patches.push({
+                    from,
+                    to,
+                    text: markdown
+                        .slice(from, to)
+                        .replace(/\r\n?/g, '\n')
+                        .replaceAll('\n', ending),
+                });
+        }
+        if ('children' in node)
+            node.children.forEach(visit);
+    };
+    const processor = ctx.get(remarkCtx);
+    visit(processor.runSync(processor.parse(markdown), { value: markdown }));
+    for (const patch of patches.reverse())
+        markdown =
+            markdown.slice(0, patch.from) + patch.text + markdown.slice(patch.to);
+    return markdown;
+}
+export function finalCodeEnding(doc) {
+    let last = doc.lastChild;
+    while (last) {
+        if (last.type.name === 'code_block')
+            return readFence(last.attrs.authoredFence)?.ending;
+        last = last.lastChild;
+    }
+    return undefined;
+}

package/dist/dialect.js

@@ -3,6 +3,7 @@ import { commonmark, hardbreakSchema, imageSchema, paragraphSchema, remarkInline
 import { extendListItemSchemaForTask, strikethroughAttr, strikethroughInputRule, strikethroughKeymap, strikethroughSchema, toggleStrikethroughCommand, wrapInTaskListInputRule, tableSchema, tableHeaderRowSchema, tableHeaderSchema, tableRowSchema, tableCellSchema, tableEditingPlugin, tableKeymap, goToNextTableCellCommand, goToPrevTableCellCommand, insertTableCommand, addRowBeforeCommand, addRowAfterCommand, addColBeforeCommand, addColAfterCommand, selectRowCommand, selectColCommand, deleteSelectedCellsCommand, setAlignCommand, exitTable, } from '@milkdown/kit/preset/gfm';
 import { $remark } from '@milkdown/kit/utils';
 import { autolinkInputRule } from './autolink.js';
+import { preservingCodeBlocks, remarkCodeFences, fencedCodeHandler, } from './code-fences.js';
 import { literalBlock, createLiteralPreservation } from './literals.js';
 import { references, remarkReferencesPlugin } from './references.js';
 import { callouts, remarkCalloutsPlugin } from './callouts.js';
@@ -85,7 +86,7 @@ function remarkDialect() {
     add('toMarkdownExtensions', gfmTaskListItemToMarkdown());
     add('toMarkdownExtensions', gfmAutolinkLiteralToMarkdown());
     add('toMarkdownExtensions', gfmTableToMarkdown());
-    add('toMarkdownExtensions', { handlers: { link } });
+    add('toMarkdownExtensions', { handlers: { link, code: fencedCodeHandler } });
 }
 export const remarkDialectPlugin = $remark('remarkDialect', () => remarkDialect);
 // Reference links retain their authored form instead of expanding to inline links.
@@ -254,6 +255,7 @@ export const tables = [
 ].flat();
 export function createDialect(images) {
     return [
+        remarkCodeFences,
         remarkReferencesPlugin,
         remarkCalloutsPlugin,
         remarkCommentsPlugin,
@@ -264,6 +266,7 @@ export function createDialect(images) {
         callouts,
         comments,
         inlineHighlight,
+        preservingCodeBlocks,
         preserveSpacerParagraphs,
         visibleSoftbreaks,
         normalizedImages,

package/dist/editor.js

@@ -26,6 +26,7 @@ import { PasteController } from './paste.js';
 import { selectionPlugin } from './selection.js';
 import { search, SearchQuery, getSearchState, setSearchState, } from 'prosemirror-search';
 import { taskListPlugin, toggleTaskList } from './tasks.js';
+import { isMermaid, mermaidPreview } from './mermaid.js';
 const shortcutCommands = {
     heading1: ['heading', 1],
     heading2: ['heading', 2],
@@ -342,9 +343,24 @@ export class InkKitEditor {
                 : this.plain.value.slice(this.plain.selectionStart, this.plain.selectionEnd);
             const pre = document.createElement('pre');
             pre.textContent = text;
-            return { text, html: pre.outerHTML, markdown: text, images: [] };
+            return {
+                text,
+                html: pre.outerHTML,
+                markdown: text,
+                images: [],
+                diagrams: [],
+            };
         }
         const { doc, schema, selection } = this.editor.ctx.get(editorViewCtx).state;
+        const completeDiagrams = new Set();
+        doc.descendants((node, pos) => {
+            if (isMermaid(node) &&
+                (all ||
+                    (selection.from <= pos + 1 &&
+                        selection.to >= pos + node.nodeSize - 1))) {
+                completeDiagrams.add(node.textContent.replace(/\r\n?/g, '\n'));
+            }
+        });
         const content = all
             ? doc.content
             : commentSelectionContent(doc, selection.from, selection.to, selection.content().content);
@@ -355,14 +371,16 @@ export class InkKitEditor {
         try {
             markdown = all
                 ? snapshot.text
-                : selectionMarkdown(this.editor.ctx, doc, valid);
+                : completeDiagrams.size
+                    ? new Preservation(this.editor.ctx, snapshot.text).serialize(doc.type.create(null, selectionContent(doc, valid)))
+                    : selectionMarkdown(this.editor.ctx, doc, valid);
         }
         catch (error) {
             throw new InkKitError('preservation', error instanceof Error
                 ? error.message
                 : 'Cannot copy the selected Markdown');
         }
-        const result = await portableClipboard(all ? content : selectionContent(doc, content), schema, markdown, this.options.images, this.context());
+        const result = await portableClipboard(all ? content : selectionContent(doc, content), schema, markdown, this.options.images, this.context(), completeDiagrams);
         const metadata = referenceMetadata(this.editor.ctx, doc, content);
         if (metadata != null)
             result.html = withReferenceMetadata(result.html, metadata);
@@ -371,6 +389,8 @@ export class InkKitEditor {
             throw new InkKitError('stale-document', 'Document changed');
         if (result.images.some((image) => image.error))
             this.events.error?.(new InkKitError('image-unavailable', 'Some copied images were unavailable; their descriptions were retained'));
+        if (result.diagrams?.some((diagram) => diagram.error))
+            this.events.error?.(new InkKitError('diagram-unavailable', 'Some diagrams could not be exported; their source was retained'));
         return result;
     }
     async paste(input) {
@@ -527,6 +547,7 @@ export class InkKitEditor {
             .use(codeCopyPlugin((text) => events.copy(text)))
             .use(placeholderPlugin)
             .use(highlightPlugin)
+            .use(mermaidPreview((error) => events.error?.(error)))
             .use(selectionPlugin)
             .use($prose(() => search()))
             .use(options.images ? imageView(options.images) : [])
@@ -595,7 +616,7 @@ export class InkKitEditor {
             const expanded = selectionContent(view.state.doc, fragment);
             let hasImages = false;
             expanded.descendants((node) => {
-                if (node.type.name === 'image')
+                if (node.type.name === 'image' || isMermaid(node))
                     hasImages = true;
             });
             if (!hasImages) {
@@ -633,8 +654,10 @@ export class InkKitEditor {
                 void instance
                     .clipboardSnapshot(false)
                     .then(async (content) => {
-                    if (cut && content.images.some((image) => image.error))
-                        throw new InkKitError('image-unavailable', 'The selected images could not be cut safely');
+                    if (cut &&
+                        (content.images.some((image) => image.error) ||
+                            content.diagrams?.some((diagram) => diagram.error)))
+                        throw new InkKitError('image-unavailable', 'The selected content could not be cut safely');
                     await events.clipboard(content);
                     if (cut) {
                         instance.assertCurrent();
@@ -651,7 +674,7 @@ export class InkKitEditor {
                 container.textContent = clipboardText(expanded);
                 event.clipboardData?.setData('text/plain', container.textContent ?? '');
                 event.clipboardData?.setData('text/html', container.outerHTML);
-                events.error?.(new InkKitError('image-unavailable', 'The host must provide a clipboard handler to copy images'));
+                events.error?.(new InkKitError('image-unavailable', 'The host must provide a clipboard handler for portable images and diagrams'));
             }
         };
         root.addEventListener('copy', instance.copyHandler, true);

package/dist/index.d.ts

@@ -2,4 +2,4 @@ export { InkKitEditor } from './editor.js';
 export type { EditorEvents, CaretState, Mark, Block, FormatCommand, Keymap, } from './editor.js';
 export type { TableCommand } from './tables.js';
 export { InkKitError } from './types.js';
-export type { DocumentFormat, DocumentContext, DocumentInput, DocumentSnapshot, EditorErrorCode, ImageAdapter, CapturedImage, PortableImage, ClipboardInput, ClipboardOutput, ClipboardImage, } from './types.js';
+export type { DocumentFormat, DocumentContext, DocumentInput, DocumentSnapshot, EditorErrorCode, ImageAdapter, CapturedImage, PortableImage, ClipboardInput, ClipboardOutput, ClipboardImage, ClipboardDiagram, } from './types.js';

package/dist/mermaid.d.ts

@@ -0,0 +1,8 @@
+import type { Node as ProseNode } from '@milkdown/kit/prose/model';
+import { type PortableImage } from './types.js';
+export declare function isMermaid(node: ProseNode): boolean;
+export declare function validateDiagram(source: string): void;
+export declare function safeDiagramSVG(svg: string): string;
+export declare function renderDiagram(source: string): Promise<string>;
+export declare function diagramImage(source: string): Promise<PortableImage>;
+export declare function mermaidPreview(onError: (error: Error) => void): import("@milkdown/kit/utils").$Prose;

package/dist/mermaid.js

@@ -0,0 +1,216 @@
+import mermaid from 'mermaid';
+import DOMPurify from 'dompurify';
+import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
+import { Decoration, DecorationSet } from '@milkdown/kit/prose/view';
+import { $prose } from '@milkdown/kit/utils';
+import { InkKitError } from './types.js';
+export function isMermaid(node) {
+    return node.type.name === 'code_block' && node.attrs.language === 'mermaid';
+}
+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.');
+}
+let sequence = 0;
+let queue = Promise.resolve();
+const cache = new Map();
+export function safeDiagramSVG(svg) {
+    const clean = DOMPurify.sanitize(svg, {
+        USE_PROFILES: { svg: true, svgFilters: true },
+        FORBID_TAGS: ['foreignObject', 'image', 'a', 'script', 'animate', 'set'],
+        FORBID_ATTR: ['href', 'xlink:href'],
+    });
+    const template = document.createElement('template');
+    template.innerHTML = clean;
+    const root = template.content.querySelector('svg');
+    if (!root)
+        throw new Error('The renderer did not produce a diagram.');
+    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))
+                element.removeAttribute(attribute.name);
+        }
+        if (element.tagName.toLowerCase() === 'style' &&
+            /@import|(?:https?|data|file):|url\s*\(\s*[^#]|\\/i.test(element.textContent ?? ''))
+            element.remove();
+    }
+    root.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    return root.outerHTML;
+}
+export function renderDiagram(source) {
+    try {
+        validateDiagram(source);
+    }
+    catch (error) {
+        return Promise.reject(error);
+    }
+    const previous = cache.get(source);
+    if (previous)
+        return previous;
+    const rendered = queue.then(async () => {
+        mermaid.initialize({
+            startOnLoad: false,
+            securityLevel: 'strict',
+            htmlLabels: false,
+            suppressErrorRendering: true,
+            fontFamily: 'Arial, sans-serif',
+            altFontFamily: 'Arial, sans-serif',
+            layout: 'dagre',
+            look: 'classic',
+            theme: 'default',
+            maxTextSize: 30000,
+            maxEdges: 500,
+            flowchart: { htmlLabels: false },
+            sequence: {
+                actorFontFamily: 'Arial, sans-serif',
+                noteFontFamily: 'Arial, sans-serif',
+                messageFontFamily: 'Arial, sans-serif',
+            },
+            secure: [
+                'securityLevel',
+                'htmlLabels',
+                'theme',
+                'themeCSS',
+                'themeVariables',
+                'fontFamily',
+                'dompurifyConfig',
+                'flowchart',
+                'startOnLoad',
+                'maxTextSize',
+                'maxEdges',
+                'secure',
+                'altFontFamily',
+                'layout',
+                'look',
+                'sequence',
+                'class',
+                'state',
+                'er',
+                'pie',
+                'suppressErrorRendering',
+            ],
+        });
+        const holder = document.createElement('div');
+        holder.style.cssText =
+            'position:fixed;left:-100000px;top:0;width:1200px;pointer-events:none';
+        holder.setAttribute('aria-hidden', 'true');
+        document.body.append(holder);
+        try {
+            const result = await mermaid.render(`inkkitDiagram${++sequence}`, source, holder);
+            return safeDiagramSVG(result.svg);
+        }
+        finally {
+            holder.remove();
+        }
+    });
+    queue = rendered.catch(() => undefined);
+    cache.set(source, rendered);
+    void rendered.catch(() => {
+        if (cache.get(source) === rendered)
+            cache.delete(source);
+    });
+    if (cache.size > 64)
+        cache.delete(cache.keys().next().value);
+    return rendered;
+}
+export async function diagramImage(source) {
+    const svg = await renderDiagram(source);
+    const parsed = new DOMParser().parseFromString(svg, 'image/svg+xml').documentElement;
+    const bounds = (parsed.getAttribute('viewBox') ?? '')
+        .split(/[\s,]+/)
+        .map(Number);
+    const width = bounds[2] || Number.parseFloat(parsed.getAttribute('width') ?? '');
+    const height = bounds[3] || Number.parseFloat(parsed.getAttribute('height') ?? '');
+    if (!(width > 0 && height > 0 && Number.isFinite(width + height)))
+        throw new Error('The rendered diagram has no usable dimensions.');
+    const scale = Math.min(2, 4096 / width, 4096 / height);
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.max(1, Math.ceil(width * scale));
+    canvas.height = Math.max(1, Math.ceil(height * scale));
+    const context = canvas.getContext('2d');
+    if (!context)
+        throw new Error('Portable diagram output is unavailable.');
+    parsed.setAttribute('width', String(width));
+    parsed.setAttribute('height', String(height));
+    const image = new Image();
+    const url = URL.createObjectURL(new Blob([new XMLSerializer().serializeToString(parsed)], {
+        type: 'image/svg+xml',
+    }));
+    try {
+        await new Promise((resolve, reject) => {
+            image.onload = () => resolve();
+            image.onerror = () => reject(new Error('The diagram image could not be rendered.'));
+            image.src = url;
+        });
+        context.fillStyle = '#ffffff';
+        context.fillRect(0, 0, canvas.width, canvas.height);
+        context.drawImage(image, 0, 0, canvas.width, canvas.height);
+        const data = canvas.toDataURL('image/png').split(',')[1];
+        if (!data)
+            throw new Error('The diagram image could not be exported.');
+        return {
+            bytes: Uint8Array.from(atob(data), (character) => character.charCodeAt(0)),
+            mimeType: 'image/png',
+            filename: 'diagram.png',
+        };
+    }
+    finally {
+        URL.revokeObjectURL(url);
+    }
+}
+export function mermaidPreview(onError) {
+    return $prose(() => new Plugin({
+        key: new PluginKey('mermaidPreview'),
+        props: {
+            decorations(state) {
+                const widgets = [];
+                state.doc.descendants((node, pos) => {
+                    if (!isMermaid(node))
+                        return true;
+                    const source = node.textContent;
+                    widgets.push(Decoration.widget(pos + node.nodeSize, () => {
+                        const preview = document.createElement('div');
+                        preview.className = 'inkkit-mermaid-preview';
+                        preview.contentEditable = 'false';
+                        preview.textContent = 'Rendering diagram…';
+                        let active = true;
+                        preview.cancel =
+                            () => {
+                                active = false;
+                            };
+                        void renderDiagram(source).then((svg) => {
+                            if (active) {
+                                preview.innerHTML = svg;
+                                preview.dataset.state = 'ready';
+                            }
+                        }, (error) => {
+                            if (!active)
+                                return;
+                            const message = error instanceof Error
+                                ? error.message
+                                : 'The diagram could not be rendered.';
+                            preview.textContent = `Diagram unavailable: ${message}`;
+                            preview.dataset.state = 'error';
+                            onError(new InkKitError('diagram-unavailable', message));
+                        });
+                        return preview;
+                    }, {
+                        key: `mermaid:${source}`,
+                        side: -1,
+                        ignoreSelection: true,
+                        destroy: (node) => node.cancel?.(),
+                    }));
+                    return false;
+                });
+                return DecorationSet.create(state.doc, widgets);
+            },
+        },
+    }));
+}

package/dist/paste.js

@@ -136,6 +136,23 @@ export class PasteController {
                 const template = document.createElement('template');
                 template.innerHTML = input.html;
                 const container = template.content;
+                for (const warning of container.querySelectorAll('[data-inkkit-diagram-error]'))
+                    warning.remove();
+                for (const diagram of container.querySelectorAll('figure[data-inkkit-mermaid]')) {
+                    const source = diagram.getAttribute('data-inkkit-mermaid') ?? '';
+                    if (source.length > 30000)
+                        continue;
+                    const pre = document.createElement('pre');
+                    pre.dataset.language = 'mermaid';
+                    const fence = diagram.getAttribute('data-inkkit-fence');
+                    if (fence)
+                        pre.setAttribute('data-inkkit-fence', fence);
+                    const code = document.createElement('code');
+                    code.className = 'language-mermaid';
+                    code.textContent = source;
+                    pre.append(code);
+                    diagram.replaceWith(pre);
+                }
                 if (markdown == null) {
                     // Native destinations can keep node metadata after dropping the
                     // Markdown wrapper and its definitions. Import their visible HTML.
@@ -301,8 +318,7 @@ export class PasteController {
                             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-image-slot')) ===
-                                    position)
+                                ? 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]`);

package/dist/preserve.js

@@ -1,5 +1,6 @@
 import { parserCtx, remarkCtx } from '@milkdown/kit/core';
 import { serialize } from './dialect.js';
+import { restoreCodeEndings, finalCodeEnding } from './code-fences.js';
 function signature(node) {
     return JSON.stringify(node, (key, value) => ['position', 'data', 'url', 'title', 'marker'].includes(key)
         ? undefined
@@ -115,6 +116,40 @@ function retainSource(before, after, source, canonical, lineEnding) {
     if (start == null || end == null || newStart == null || newEnd == null)
         throw new PreservationError('A source token has no location');
     const raw = source.slice(start, end);
+    if (before.type === 'code' &&
+        after.type === 'code' &&
+        before.lang === after.lang) {
+        const opening = /^([ \t>]*)(`{3,}|~{3,})([^\r\n]*)(\r?\n)/.exec(raw);
+        if (opening) {
+            const lines = raw.slice(opening[0].length).split(/\r?\n/);
+            const closing = /^([ \t>]*)(`{3,}|~{3,})([ \t]*)$/.exec(lines.at(-1) ?? '');
+            const originalLine = (before.value ?? '').replace(/\r\n?/g, '\n').split('\n')[0] ?? '';
+            const first = lines[0] ?? '';
+            const gutter = first.endsWith(originalLine)
+                ? first.slice(0, first.length - originalLine.length)
+                : opening[1];
+            const body = (after.value ?? '').replace(/\r\n?/g, '\n').split('\n');
+            const character = opening[2][0];
+            let length = opening[2].length;
+            for (const line of body) {
+                const run = new RegExp(`^ {0,3}(${character}+)[ \\t]*$`).exec(line);
+                if (run)
+                    length = Math.max(length, run[1].length + 1);
+            }
+            const fence = character.repeat(length);
+            return (opening[1] +
+                fence +
+                opening[3] +
+                lineEnding +
+                body.map((line) => gutter + line).join(lineEnding) +
+                (closing
+                    ? lineEnding +
+                        closing[1] +
+                        character.repeat(Math.max(length, closing[2].length)) +
+                        closing[3]
+                    : ''));
+        }
+    }
     if (before.type === 'definition' &&
         after.type === 'definition' &&
         before.label === after.label &&
@@ -193,7 +228,7 @@ export class PreservationError extends Error {
     }
 }
 function form(text) {
-    return text.replace(/\n+$/, '');
+    return text.replace(/\r\n?/g, '\n').replace(/\n+$/, '');
 }
 function blockForm(ctx, node) {
     // An empty document is empty Markdown, but an empty block inside a document
@@ -219,7 +254,7 @@ function semanticSignature(doc) {
                     continue;
                 const token = {
                     ...child,
-                    text,
+                    text: text.replace(/\r\n?/g, '\n'),
                     marks: index === 1 ? child.marks : undefined,
                 };
                 const previous = tokens.at(-1);
@@ -242,6 +277,7 @@ function semanticSignature(doc) {
         'id',
         'label',
         'spread',
+        'authoredFence',
     ].includes(key)
         ? undefined
         : value));
@@ -398,16 +434,17 @@ export class Preservation {
                     output += retainSource(block.ast, positionalNode(currentRawTree, currentTree.children[index]), body, canonical, this.lineEnding);
                 }
                 else
-                    output += text.replaceAll('\n', this.lineEnding);
+                    output += restoreCodeEndings(this.ctx, doc.type.create(null, [doc.child(index)]), text.replaceAll('\n', this.lineEnding));
                 previous = position;
             });
             if (previous === this.blocks.length - 1 && this.blocks.length)
                 output += this.source.slice(this.blocks[previous].end);
             else if (output)
-                output += this.lineEnding;
+                output += finalCodeEnding(doc) ?? this.lineEnding;
             const parse = this.ctx.get(parserCtx);
             const reopened = parse(output);
-            if (serialize(this.ctx, reopened) === canonical &&
+            if (serialize(this.ctx, reopened).replace(/\r\n?/g, '\n') ===
+                canonical.replace(/\r\n?/g, '\n') &&
                 semanticSignature(reopened) === semanticSignature(doc))
                 return output;
             throw new PreservationError('The edited Markdown cannot be reopened without changing its content');

package/dist/style.css

@@ -652,3 +652,19 @@ body {
     display: block !important;
   }
 }
+/* Diagram previews are presentation; the authored code remains editable. */
+.inkkit-mermaid-preview {
+  padding: 16px;
+  overflow: auto;
+  background: #fff;
+  color: #222;
+}
+.inkkit-mermaid-preview svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+.inkkit-mermaid-preview[data-state='error'] {
+  color: #9b2424;
+  font-size: 0.9em;
+}

package/dist/types.d.ts

@@ -14,7 +14,7 @@ export interface DocumentSnapshot extends DocumentInput {
     revision: number;
     dirty: boolean;
 }
-export type EditorErrorCode = 'not-ready' | 'stale-document' | 'composition' | 'operation-pending' | 'destroyed' | 'preservation' | 'image-unavailable';
+export type EditorErrorCode = 'not-ready' | 'stale-document' | 'composition' | 'operation-pending' | 'destroyed' | 'preservation' | 'image-unavailable' | 'diagram-unavailable';
 export declare class InkKitError extends Error {
     readonly code: EditorErrorCode;
     constructor(code: EditorErrorCode, message: string);
@@ -57,4 +57,10 @@ export interface ClipboardOutput {
     html: string;
     markdown: string;
     images: ClipboardImage[];
+    diagrams?: ClipboardDiagram[];
+}
+export interface ClipboardDiagram {
+    source: string;
+    image?: PortableImage;
+    error?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aicayzer/inkkit",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A preserving Markdown editor for offline web views and the web",
   "license": "MIT",
   "type": "module",
@@ -46,6 +46,7 @@
   },
   "dependencies": {
     "@milkdown/kit": "7.22.1",
+    "dompurify": "3.4.16",
     "lowlight": "^3.3.0",
     "mdast-util-from-markdown": "^2.1.0",
     "mdast-util-gfm-autolink-literal": "^2.0.1",
@@ -55,6 +56,7 @@
     "mdast-util-gfm-task-list-item": "^2.0.0",
     "mdast-util-highlight-mark": "1.2.2",
     "mdast-util-to-markdown": "2.2.0",
+    "mermaid": "12.1.0",
     "micromark-extension-gfm-autolink-literal": "^2.1.0",
     "micromark-extension-gfm-footnote": "^2.1.0",
     "micromark-extension-gfm-strikethrough": "^2.1.0",