@aicayzer/inkkit 0.0.2 → 0.0.4

package/dist/editor.js

@@ -20,10 +20,13 @@ import { imageView } from './images.js';
 import { tablePlugins, tableCommand } from './tables.js';
 import { InkKitError, } from './types.js';
 import { highlightPlugin } from './highlight.js';
+import { highlightKeymap, toggleHighlightCommand } from './inline-highlight.js';
+import { commentSelectionContent, setCommentVisibility } from './comments.js';
 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],
@@ -32,6 +35,7 @@ const shortcutCommands = {
     bold: ['bold'],
     italic: ['italic'],
     strikethrough: ['strikethrough'],
+    highlight: ['highlight'],
     code: ['code'],
     codeBlock: ['codeBlock'],
     quote: ['quote'],
@@ -43,6 +47,7 @@ const markNames = {
     strong: 'bold',
     emphasis: 'italic',
     strike_through: 'strikethrough',
+    highlight: 'highlight',
     inlineCode: 'code',
     link: 'link',
 };
@@ -338,10 +343,27 @@ 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 content = all ? doc.content : selection.content().content;
+        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);
         const valid = content.firstChild?.isInline
             ? Fragment.from(schema.nodes.paragraph.create(null, content))
             : content;
@@ -349,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);
@@ -365,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) {
@@ -375,6 +401,10 @@ export class InkKitEditor {
         }
         await this.pasteController.paste(input);
     }
+    setCommentsVisible(visible) {
+        this.assertAlive();
+        setCommentVisibility(this.editor.ctx.get(editorViewCtx), visible);
+    }
     pasteAsPlainText(text) {
         this.assertCurrent();
         if (this.formatType === 'txt') {
@@ -485,6 +515,7 @@ export class InkKitEditor {
             unbind(emphasisKeymap);
             unbind(inlineCodeKeymap);
             unbind(strikethroughKeymap);
+            unbind(highlightKeymap);
             unbind(headingKeymap, ['DowngradeHeading']);
             unbind(paragraphKeymap);
             unbind(blockquoteKeymap);
@@ -516,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) : [])
@@ -580,11 +612,11 @@ export class InkKitEditor {
             if (instance.formatType === 'txt')
                 return;
             const view = instance.editor.ctx.get(editorViewCtx);
-            const fragment = view.state.selection.content().content;
+            const fragment = commentSelectionContent(view.state.doc, view.state.selection.from, view.state.selection.to, view.state.selection.content().content);
             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) {
@@ -622,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();
@@ -640,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);
@@ -1011,6 +1045,9 @@ export class InkKitEditor {
             case 'strikethrough':
                 run(toggleStrikethroughCommand.key);
                 break;
+            case 'highlight':
+                run(toggleHighlightCommand.key);
+                break;
             case 'code':
                 this.toggleInlineCode();
                 break;

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/inline-highlight.d.ts

@@ -0,0 +1,6 @@
+export declare const remarkInlineHighlightPlugin: import("@milkdown/kit/utils").$Remark<"inkkitInlineHighlight", unknown>;
+export declare const highlightSchema: import("@milkdown/kit/utils").$MarkSchema<"highlight">;
+export declare const toggleHighlightCommand: import("@milkdown/kit/utils").$Command<unknown>;
+export declare const highlightInputRule: import("@milkdown/kit/utils").$InputRule;
+export declare const highlightKeymap: import("@milkdown/kit/utils").$UserKeymap<"highlightKeymap", "ToggleHighlight">;
+export declare const inlineHighlight: (import("@milkdown/kit/utils").$Command<unknown> | import("@milkdown/kit/utils").$Ctx<unknown, "inkkitInlineHighlight"> | import("@milkdown/kit/utils").$Ctx<import("@milkdown/kit/utils").GetMarkSchema, "highlight"> | import("@milkdown/kit/utils").$Ctx<import("@milkdown/kit/utils").KeymapConfig<"ToggleHighlight">, "highlightKeymapKeymap"> | import("@milkdown/kit/utils").$InputRule | import("@milkdown/kit/utils").$Mark | import("@milkdown/kit/utils").$Shortcut | import("@milkdown/kit/ctx").MilkdownPlugin)[];

package/dist/inline-highlight.js

@@ -0,0 +1,112 @@
+import { commandsCtx, remarkCtx } from '@milkdown/kit/core';
+import { markRule } from '@milkdown/kit/prose';
+import { toggleMark } from '@milkdown/kit/prose/commands';
+import { InputRule } from '@milkdown/kit/prose/inputrules';
+import { EditorState, TextSelection } from '@milkdown/kit/prose/state';
+import { $command, $inputRule, $markSchema, $remark, $useKeymap, } from '@milkdown/kit/utils';
+import { highlightMark } from 'micromark-extension-highlight-mark';
+import { highlightMarkFromMarkdown, highlightMarkToMarkdown, } from 'mdast-util-highlight-mark';
+// The current serializer's attention handling encodes ambiguous whitespace and
+// punctuation boundaries; the highlight provider predates that API.
+const highlight = (node, _parent, state, info) => {
+    const exit = state.enter('phrasing');
+    const value = state.containerPhrasing({ type: 'root', children: [node] }, info);
+    exit();
+    return value;
+};
+highlight.attention = () => ({
+    construct: 'highlight',
+    markers: ['='],
+    sizes: [2],
+});
+highlight.peek = () => '=';
+function remarkInlineHighlight() {
+    const data = this.data();
+    (data.micromarkExtensions ??= []).push(highlightMark());
+    (data.fromMarkdownExtensions ??= []).push(highlightMarkFromMarkdown);
+    (data.toMarkdownExtensions ??= []).push({
+        ...highlightMarkToMarkdown,
+        handlers: { highlight },
+    });
+}
+export const remarkInlineHighlightPlugin = $remark('inkkitInlineHighlight', () => remarkInlineHighlight);
+export const highlightSchema = $markSchema('highlight', () => ({
+    priority: 45,
+    parseDOM: [{ tag: 'mark' }],
+    toDOM: () => ['mark', 0],
+    parseMarkdown: {
+        match: (node) => node.type === 'highlight',
+        runner(state, node, type) {
+            state.openMark(type);
+            state.next(node.children);
+            state.closeMark(type);
+        },
+    },
+    toMarkdown: {
+        match: (mark) => mark.type.name === 'highlight',
+        runner(state, mark, node) {
+            if (node.isText && /^\s*$/.test(node.text ?? '')) {
+                return;
+            }
+            state.withMark(mark, 'highlight');
+        },
+    },
+}));
+export const toggleHighlightCommand = $command('ToggleHighlight', (ctx) => () => toggleMark(highlightSchema.type(ctx)));
+export const highlightInputRule = $inputRule((ctx) => {
+    const pattern = /==([^\n]+)==$/;
+    const rule = markRule(pattern, highlightSchema.type(ctx));
+    const apply = rule.handler;
+    return new InputRule(pattern, (state, match, start, end) => {
+        const parentStart = state.selection.$from.start();
+        const prefix = state.selection.$from.parent.textBetween(0, start - parentStart);
+        const source = prefix + match[0];
+        const tree = ctx.get(remarkCtx).parse(source);
+        let valid = false;
+        const walk = (node) => {
+            if (node.type === 'highlight' &&
+                node.position?.start.offset === prefix.length &&
+                node.position.end.offset === source.length)
+                valid = true;
+            if ('children' in node)
+                node.children.forEach(walk);
+        };
+        walk(tree);
+        if (!valid)
+            return null;
+        const { from, to } = state.selection;
+        const typed = match[0].slice(from - start);
+        if (typed.length <= 1 && state.selection.empty)
+            return apply(state, match, start, end);
+        // Milkdown's mark rule expects only the final character to be absent.
+        // Prepare buffered input without applying plugins or dispatching twice.
+        const tr = state.tr.insertText(typed.slice(0, -1), from, to);
+        const preparedEnd = from + typed.length - 1;
+        const prepared = EditorState.create({
+            schema: state.schema,
+            doc: tr.doc,
+            selection: TextSelection.create(tr.doc, preparedEnd),
+            storedMarks: state.storedMarks,
+        });
+        const transformed = apply(prepared, match, start, preparedEnd);
+        if (!transformed)
+            return null;
+        transformed.steps.forEach((step) => tr.step(step));
+        tr.setSelection(TextSelection.create(tr.doc, transformed.selection.from, transformed.selection.to));
+        tr.setStoredMarks(transformed.storedMarks);
+        return tr;
+    });
+});
+export const highlightKeymap = $useKeymap('highlightKeymap', {
+    ToggleHighlight: {
+        shortcuts: ['Mod-Shift-h'],
+        command: (ctx) => () => ctx.get(commandsCtx).call(toggleHighlightCommand.key),
+    },
+});
+export const inlineHighlight = [
+    remarkInlineHighlightPlugin,
+    highlightSchema,
+    toggleHighlightCommand,
+    highlightInputRule,
+    highlightKeymap,
+].flat();

package/dist/literals.d.ts

@@ -1,6 +1,8 @@
 import type { Literal } from 'mdast';
+import { type CommentSpan } from './comments.js';
 interface InkKitLiteral extends Literal {
     type: 'inkkitLiteral';
+    comments?: CommentSpan[];
 }
 declare module 'mdast' {
     interface BlockContentMap {

package/dist/literals.js

@@ -1,4 +1,5 @@
 import { $node, $remark } from '@milkdown/kit/utils';
+import { commentSource, literalCommentSpans, } from './comments.js';
 const unsupported = new Set(['html', 'image', 'imageReference']);
 function restoreInlineBreaks(node) {
     if ((node.type === 'paragraph' || node.type === 'heading') &&
@@ -68,7 +69,12 @@ export function createLiteralPreservation(images) {
             // Definition indentation is restored by the footnote serializer.
             for (let index = 0; index < depth; index++)
                 raw = raw.replace(/\r?\n(?: {4}|\t)/g, '\n');
-            return { type: 'inkkitLiteral', value: raw, position: node.position };
+            return {
+                type: 'inkkitLiteral',
+                value: raw,
+                comments: literalCommentSpans(raw),
+                position: node.position,
+            };
         };
         const blocks = [];
         if (frontmatter)
@@ -105,6 +111,8 @@ export function createLiteralPreservation(images) {
                     });
                 continue;
             }
+            if (node.type === 'inkkitLiteral')
+                node.comments = literalCommentSpans(node.value);
             blocks.push(preserveBlock(node));
         }
         tree.children = blocks;
@@ -113,7 +121,7 @@ export function createLiteralPreservation(images) {
 export const preserveLiterals = createLiteralPreservation(false);
 export const literalBlock = $node('literal_markdown', () => ({
     group: 'block',
-    content: 'text*',
+    content: '(text | comment_inline)*',
     marks: '',
     code: true,
     defining: true,
@@ -129,14 +137,33 @@ export const literalBlock = $node('literal_markdown', () => ({
         match: (node) => node.type === 'inkkitLiteral',
         runner: (state, node, type) => {
             state.openNode(type);
-            state.addText(String(node.value ?? ''));
+            const value = String(node.value ?? '');
+            let cursor = 0;
+            for (const span of node.comments ?? []) {
+                if (span.start > cursor)
+                    state.addText(value.slice(cursor, span.start));
+                state.openNode(state.schema.nodes.comment_inline, {
+                    syntax: span.syntax,
+                    block: Boolean(span.block),
+                });
+                if (span.value)
+                    state.addText(span.value);
+                state.closeNode();
+                cursor = span.end;
+            }
+            if (cursor < value.length)
+                state.addText(value.slice(cursor));
             state.closeNode();
         },
     },
     toMarkdown: {
         match: (node) => node.type.name === 'literal_markdown',
         runner: (state, node) => {
-            state.addNode('html', undefined, node.textContent);
+            let source = '';
+            node.forEach((child) => {
+                source += child.isText ? child.text : commentSource(child);
+            });
+            state.addNode('html', undefined, source);
         },
     },
 }));

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.
@@ -179,6 +196,7 @@ export class PasteController {
                     'H5',
                     'H6',
                     'STRONG',
+                    'MARK',
                     'B',
                     'EM',
                     'I',
@@ -300,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]`);