@aicayzer/inkkit 0.0.3 → 0.0.5

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

@@ -0,0 +1,7 @@
+import type { Fragment, Schema } from '@milkdown/kit/prose/model';
+import { type DocumentContext, type ImageAdapter, type PrintableDocument } from './types.js';
+type PrintableContent = Pick<PrintableDocument, 'html' | 'styles' | 'assets' | 'warnings'>;
+export declare function printableText(text: string): PrintableContent;
+export declare function hasAuthoredImagesInLiterals(content: Fragment, parse: (source: string) => unknown): boolean;
+export declare function printableMarkdown(content: Fragment, schema: Schema, adapter: ImageAdapter | undefined, context: DocumentContext): Promise<PrintableContent>;
+export {};