@aicayzer/inkkit 0.0.14 → 0.0.16

package/dist/image-blocks.js

@@ -0,0 +1,286 @@
+import { keydownHandler } from '@milkdown/kit/prose/keymap';
+import { GapCursor } from '@milkdown/kit/prose/gapcursor';
+import { Fragment, } from '@milkdown/kit/prose/model';
+import { NodeSelection, Plugin, PluginKey, Selection, TextSelection, } from '@milkdown/kit/prose/state';
+import { $nodeSchema, $prose } from '@milkdown/kit/utils';
+export const imageBlockName = 'image_block';
+/** Attributes shared by an inline image and a standalone image block. */
+export const imageAttrs = {
+    src: { default: '', validate: 'string' },
+    alt: { default: '', validate: 'string' },
+    title: { default: '', validate: 'string' },
+    inkkitFileRaw: { default: null },
+    inkkitFileTarget: { default: null },
+    inkkitFileFragment: { default: null },
+    inkkitFileWidth: { default: null },
+    inkkitFileInTable: { default: false },
+};
+// Remark represents a missing title as null; the image schema accepts strings.
+export function markdownImageAttrs(node) {
+    return {
+        src: String(node.url ?? ''),
+        alt: String(node.alt ?? ''),
+        title: String(node.title ?? ''),
+        inkkitFileRaw: node.inkkitFileRaw ?? null,
+        inkkitFileTarget: node.inkkitFileTarget ?? null,
+        inkkitFileFragment: node.inkkitFileFragment ?? null,
+        inkkitFileWidth: node.inkkitFileWidth ?? null,
+        inkkitFileInTable: node.inkkitFileInTable ?? false,
+    };
+}
+/** Whether a node displays an authored image, inline or as its own block. */
+export function isImage(node) {
+    return node.type.name === 'image' || node.type.name === imageBlockName;
+}
+export function isImageBlock(node) {
+    return node?.type.name === imageBlockName;
+}
+function accepts(parent, index, type) {
+    return parent.canReplaceWith(index, index + 1, type);
+}
+/** The image a paragraph holds as its only content, without marks, which makes the paragraph a
+ *  standalone image block. A linked or emphasised image stays inline so its marks are kept. */
+export function standaloneImage(children) {
+    const [image] = children;
+    return children.length === 1 &&
+        image.type.name === 'image' &&
+        !image.marks.length
+        ? image
+        : undefined;
+}
+/** Reads a Markdown paragraph, as an image block when it holds a standalone image and the enclosing
+ *  block accepts one. */
+export function readParagraph(state, node, paragraph) {
+    state.openNode(paragraph);
+    if (node.children)
+        state.next(node.children);
+    else
+        state.addText(String(node.value ?? ''));
+    const type = state.schema.nodes[imageBlockName];
+    const element = state.top();
+    const image = standaloneImage(element.content);
+    state.close();
+    const parent = state.top();
+    if (image &&
+        type &&
+        parent?.type.contentMatch
+            .matchFragment(Fragment.fromArray(parent.content))
+            ?.matchType(type))
+        state.addNode(type, image.attrs);
+    else {
+        state.openNode(paragraph);
+        for (const child of element.content)
+            state.top().push(child);
+        state.closeNode();
+    }
+}
+// A standalone image is a block with no inside, so no edit can put text beside it. In Markdown it
+// remains a paragraph holding the image, which is how it is read and written.
+export const imageBlockSchema = $nodeSchema(imageBlockName, () => ({
+    group: 'block',
+    atom: true,
+    selectable: true,
+    draggable: true,
+    marks: '',
+    attrs: imageAttrs,
+    toDOM: (node) => [
+        'p',
+        { class: 'inkkit-image-block' },
+        [
+            'img',
+            {
+                src: String(node.attrs.src),
+                alt: String(node.attrs.alt),
+                title: String(node.attrs.title),
+            },
+        ],
+    ],
+    parseMarkdown: { match: () => false, runner: () => undefined },
+    toMarkdown: {
+        match: (node) => node.type.name === imageBlockName,
+        runner: (state, node) => {
+            state.openNode('paragraph');
+            state.next(node.type.schema.nodes.image.create(node.attrs));
+            state.closeNode();
+        },
+    },
+}));
+// An edit can leave a paragraph holding only an image, which reading its Markdown again would give
+// as an image block. The caret keeps its side of the image.
+const normalise = $prose(() => new Plugin({
+    key: new PluginKey('inkkitImageBlockNormalise'),
+    appendTransaction(transactions, old, state) {
+        const type = state.schema.nodes[imageBlockName];
+        if (!type || !transactions.some((tr) => tr.docChanged))
+            return null;
+        // Compare the documents, as mark and attribute steps change no positions.
+        const start = old.doc.content.findDiffStart(state.doc.content);
+        const end = old.doc.content.findDiffEnd(state.doc.content);
+        if (start == null || !end)
+            return null;
+        const found = new Map();
+        state.doc.nodesBetween(Math.min(start, end.b), Math.max(start, end.b), (node, pos, parent, index) => {
+            if (!node.isTextblock)
+                return true;
+            const children = [];
+            node.forEach((child) => children.push(child));
+            if (node.type.name === 'paragraph' &&
+                standaloneImage(children) &&
+                parent &&
+                accepts(parent, index, type))
+                found.set(pos, node);
+            return false;
+        });
+        if (!found.size)
+            return null;
+        const tr = state.tr;
+        const { head } = state.selection;
+        let caret;
+        for (const [pos, node] of [...found].sort(([a], [b]) => b - a)) {
+            const end = pos + node.nodeSize;
+            if (head > pos && head < end)
+                caret = head > pos + 1 ? { pos: end, side: 1 } : { pos, side: -1 };
+            tr.replaceWith(pos, end, type.create(node.firstChild.attrs));
+        }
+        if (caret)
+            tr.setSelection(new GapCursor(tr.doc.resolve(tr.mapping.map(caret.pos, caret.side))));
+        return tr;
+    },
+}));
+/** The image block a selection rests beside or selects, as the position for a new paragraph. */
+function newParagraphAt(state) {
+    const { selection } = state;
+    if (selection instanceof NodeSelection && isImageBlock(selection.node))
+        return selection.to;
+    if (selection instanceof GapCursor &&
+        (isImageBlock(selection.$head.nodeBefore) ||
+            isImageBlock(selection.$head.nodeAfter)))
+        return selection.head;
+    return undefined;
+}
+/** Opens an empty paragraph beside a selected image block, or at a gap beside one. */
+function openParagraph(state) {
+    const pos = newParagraphAt(state);
+    const paragraph = state.schema.nodes.paragraph;
+    if (pos == null || !paragraph)
+        return undefined;
+    const $pos = state.doc.resolve(pos);
+    if (!accepts($pos.parent, $pos.index(), paragraph))
+        return undefined;
+    const tr = state.tr.insert(pos, paragraph.create());
+    return tr.setSelection(TextSelection.create(tr.doc, pos + 1));
+}
+const enter = (state, dispatch) => {
+    const tr = openParagraph(state);
+    if (!tr)
+        return false;
+    dispatch?.(tr.scrollIntoView());
+    return true;
+};
+/** Backspace or Delete toward an image block selects it before anything is deleted; from a gap beside
+ *  one toward text, the caret moves into the text. An empty paragraph next to one is removed. */
+function towardImage(dir) {
+    return (state, dispatch) => {
+        const { selection, doc } = state;
+        if (!selection.empty)
+            return false;
+        const $head = selection.$head;
+        if (selection instanceof GapCursor) {
+            const node = dir < 0 ? $head.nodeBefore : $head.nodeAfter;
+            const other = dir < 0 ? $head.nodeAfter : $head.nodeBefore;
+            if (!node || !(isImageBlock(other) || isImageBlock(node)))
+                return false;
+            const next = isImageBlock(node)
+                ? NodeSelection.create(doc, dir < 0 ? $head.pos - 1 : $head.pos)
+                : Selection.findFrom($head, dir, true);
+            if (!next)
+                return false;
+            dispatch?.(state.tr.setSelection(next).scrollIntoView());
+            return true;
+        }
+        if (!$head.parent.isTextblock || $head.depth === 0)
+            return false;
+        const atEdge = dir < 0
+            ? $head.parentOffset === 0
+            : $head.parentOffset === $head.parent.content.size;
+        if (!atEdge)
+            return false;
+        const index = $head.index(-1) + dir;
+        const parent = $head.node(-1);
+        const neighbour = index >= 0 && index < parent.childCount ? parent.child(index) : undefined;
+        if (!isImageBlock(neighbour))
+            return false;
+        const block = dir < 0 ? $head.before() - 1 : $head.after();
+        // An empty paragraph goes, unless its parent needs it, such as a list item's first line.
+        if ($head.parent.content.size === 0 &&
+            $head.parent.type.name === 'paragraph' &&
+            parent.canReplace($head.index(-1), $head.index(-1) + 1)) {
+            const tr = state.tr.delete($head.before(), $head.after());
+            dispatch?.(tr
+                .setSelection(new GapCursor(tr.doc.resolve($head.before())))
+                .scrollIntoView());
+            return true;
+        }
+        if (!dispatch)
+            return true;
+        dispatch(state.tr.setSelection(NodeSelection.create(doc, block)).scrollIntoView());
+        return true;
+    };
+}
+const keys = keydownHandler({
+    Enter: enter,
+    'Shift-Enter': enter,
+    Backspace: towardImage(-1),
+    Delete: towardImage(1),
+});
+const interaction = $prose(() => new Plugin({
+    key: new PluginKey('inkkitImageBlocks'),
+    props: {
+        handleKeyDown: (view, event) => !view.composing && view.editable && keys(view, event),
+        handleTextInput(view, _from, _to, text) {
+            const tr = openParagraph(view.state);
+            if (!tr)
+                return false;
+            view.dispatch(tr.insertText(text).scrollIntoView());
+            return true;
+        },
+        // A click beside an image card, not on it, puts the caret after the image.
+        handleClickOn(view, _pos, node, nodePos, event, direct) {
+            if (!direct ||
+                !view.editable ||
+                !isImageBlock(node) ||
+                !(event.target instanceof Element) ||
+                event.target.closest('.image'))
+                return false;
+            view.dispatch(view.state.tr.setSelection(new GapCursor(view.state.doc.resolve(nodePos + node.nodeSize))));
+            return true;
+        },
+        handleDOMEvents: {
+            // ProseMirror replaces a selection when composition starts; a selected image is kept and
+            // the composed text goes after it.
+            compositionstart(view) {
+                const { selection } = view.state;
+                if (view.editable &&
+                    selection instanceof NodeSelection &&
+                    isImageBlock(selection.node))
+                    view.dispatch(view.state.tr.setSelection(new GapCursor(view.state.doc.resolve(selection.to))));
+                return false;
+            },
+            // Composed text needs a paragraph to land in before the browser writes it, as the gap
+            // cursor plugin does for its own gaps.
+            beforeinput(view, event) {
+                if (event.inputType !== 'insertCompositionText' || !view.editable)
+                    return false;
+                const tr = openParagraph(view.state);
+                if (tr)
+                    view.dispatch(tr);
+                return false;
+            },
+        },
+    },
+}));
+export const imageBlocks = [
+    imageBlockSchema,
+    normalise,
+    interaction,
+].flat();

package/dist/images.d.ts

@@ -17,6 +17,8 @@ declare class ImageView implements NodeView {
     private readonly runtime?;
     private readonly canMutate;
     dom: HTMLElement;
+    /** The card or picture, which a standalone image's block row holds. */
+    private element;
     private image?;
     private media?;
     private pdf?;
@@ -45,5 +47,5 @@ declare class ImageView implements NodeView {
     private commit;
     private canResize;
 }
-export declare function imageView(adapter?: ImageAdapter, runtime?: FileViewRuntime, canMutate?: () => boolean): import("@milkdown/kit/utils").$View<import("@milkdown/kit/utils").$Node, (node: ProseNode, view: EditorView, getPos: () => number | undefined) => ImageView>;
+export declare function imageView(adapter?: ImageAdapter, runtime?: FileViewRuntime, canMutate?: () => boolean): import("@milkdown/kit/utils").$View<import("@milkdown/kit/utils").$Node, (node: ProseNode, view: EditorView, getPos: () => number | undefined) => ImageView>[];
 export {};

package/dist/images.js

@@ -3,6 +3,7 @@ import { closeHistory } from '@milkdown/kit/prose/history';
 import { $view } from '@milkdown/kit/utils';
 import { FileResolution } from './files.js';
 import { fileReference } from './linked-syntax.js';
+import { imageBlockSchema } from './image-blocks.js';
 /** A width rides in the alt text, as `![a picture|400](images/….png)`. Other Markdown readers
  *  show the picture and keep the number without requiring a private extension. */
 export function splitAlt(alt) {
@@ -23,6 +24,8 @@ class ImageView {
     runtime;
     canMutate;
     dom;
+    /** The card or picture, which a standalone image's block row holds. */
+    element;
     image;
     media;
     pdf;
@@ -37,8 +40,15 @@ class ImageView {
         this.adapter = adapter;
         this.runtime = runtime;
         this.canMutate = canMutate;
-        this.dom = document.createElement('span');
-        this.dom.className = 'image';
+        this.element = document.createElement('span');
+        this.element.className = 'image';
+        if (node.isBlock) {
+            this.dom = document.createElement('div');
+            this.dom.className = 'inkkit-image-block';
+            this.dom.append(this.element);
+        }
+        else
+            this.dom = this.element;
         this.view.dom.addEventListener('inkkit-cancel-resize', this.cancelResize);
         this.view.dom.addEventListener('inkkit-media-policy', this.mediaPolicy);
         if (runtime) {
@@ -145,11 +155,22 @@ class ImageView {
     card(label, status, retry = false) {
         const footer = document.createElement('span');
         footer.className = 'inkkit-file-footer';
+        const name = document.createElement('span');
+        name.className = 'inkkit-file-name';
         const text = document.createElement('span');
         text.className = 'inkkit-file-label';
         text.textContent = label;
         text.title = label;
-        footer.append(text);
+        name.append(text);
+        if (this.runtime?.adapter.open) {
+            const open = this.button('', this.activate);
+            open.classList.add('inkkit-file-open');
+            open.setAttribute('aria-label', `${this.runtime.labels.fileOpen} ${label}`);
+            open.title = this.runtime.labels.fileOpen;
+            open.append(openArrow());
+            name.append(open);
+        }
+        footer.append(name);
         if (status) {
             const description = document.createElement('span');
             description.className = 'inkkit-file-status';
@@ -159,12 +180,7 @@ class ImageView {
         }
         if (retry && this.runtime)
             footer.append(this.button(this.runtime.labels.fileRetry, () => this.resolution?.retry()));
-        if (this.runtime?.adapter.open) {
-            const open = this.button(this.runtime.labels.fileOpen, this.activate);
-            open.setAttribute('aria-label', `${this.runtime.labels.fileOpen} ${label}`);
-            footer.append(open);
-        }
-        this.dom.append(footer);
+        this.element.append(footer);
     }
     failPreview() {
         this.previewFailed = true;
@@ -183,11 +199,11 @@ class ImageView {
             }
             : splitAlt(String(this.node.attrs.alt ?? ''));
         this.width = width;
-        this.dom.textContent = '';
+        this.element.textContent = '';
         this.image = undefined;
         if (this.runtime) {
-            this.dom.classList.add('inkkit-file');
-            this.dom.oncontextmenu = (event) => {
+            this.element.classList.add('inkkit-file');
+            this.element.oncontextmenu = (event) => {
                 if (!this.runtime?.adapter.contextMenu || !this.active())
                     return;
                 const captured = this.runtime.capture();
@@ -205,11 +221,11 @@ class ImageView {
             const label = state.status === 'resolved'
                 ? state.presentation.label || alt || reference.reference
                 : alt || reference.reference;
-            this.dom.setAttribute('aria-label', label);
-            this.dom.dataset.inkkitFileState = this.previewFailed
+            this.element.setAttribute('aria-label', label);
+            this.element.dataset.inkkitFileState = this.previewFailed
                 ? 'error'
                 : state.status;
-            this.dom.dataset.inkkitFileKind =
+            this.element.dataset.inkkitFileKind =
                 state.status === 'resolved' ? state.presentation.kind : 'file';
             if (this.previewFailed) {
                 this.card(label, this.runtime.labels.filePreviewUnavailable, true);
@@ -247,7 +263,7 @@ class ImageView {
                 });
                 media.src = presentation.url;
                 this.media = media;
-                this.dom.append(media);
+                this.element.append(media);
                 this.card(label);
             }
             else if (presentation.kind === 'pdf') {
@@ -263,7 +279,7 @@ class ImageView {
                 });
                 pdf.src = presentation.url;
                 this.pdf = pdf;
-                this.dom.append(pdf);
+                this.element.append(pdf);
                 this.card(label, this.runtime.labels.filePDFPreview);
             }
             else
@@ -272,11 +288,11 @@ class ImageView {
         }
         const presentation = this.adapter?.presentation(String(this.node.attrs.src ?? ''));
         if (!presentation) {
-            this.dom.classList.add('image-absent');
-            this.dom.textContent = alt || String(this.node.attrs.src ?? '');
+            this.element.classList.add('image-absent');
+            this.element.textContent = alt || String(this.node.attrs.src ?? '');
             return;
         }
-        this.dom.classList.remove('image-absent');
+        this.element.classList.remove('image-absent');
         this.renderImage(presentation.url, alt, width);
     }
     renderImage(url, alt, width) {
@@ -295,11 +311,12 @@ class ImageView {
         this.image = image;
         const preview = document.createElement('span');
         preview.className = 'inkkit-image-preview';
+        preview.append(image);
+        // The grip sits on the whole card, so it centres on the picture and its name together.
         const handle = document.createElement('span');
         handle.className = 'image-handle';
         handle.addEventListener('pointerdown', this.startResize);
-        preview.append(image, handle);
-        this.dom.append(preview);
+        this.element.append(preview, handle);
     }
     startResize = (event) => {
         event.preventDefault();
@@ -364,6 +381,18 @@ class ImageView {
         return this.view.editable && !this.view.composing && this.canMutate();
     }
 }
+const svg = 'http://www.w3.org/2000/svg';
+function openArrow() {
+    const icon = document.createElementNS(svg, 'svg');
+    icon.setAttribute('viewBox', '0 0 12 12');
+    icon.setAttribute('aria-hidden', 'true');
+    icon.setAttribute('focusable', 'false');
+    const path = document.createElementNS(svg, 'path');
+    path.setAttribute('d', 'M4 2.5h5.5V8M9.5 2.5 2.5 9.5');
+    icon.append(path);
+    return icon;
+}
 export function imageView(adapter, runtime, canMutate = () => true) {
-    return $view(imageSchema.node, () => (node, view, getPos) => new ImageView(node, view, getPos, adapter, runtime, canMutate));
+    const view = (schema) => $view(schema.node, () => (node, view, getPos) => new ImageView(node, view, getPos, adapter, runtime, canMutate));
+    return [view(imageSchema), view(imageBlockSchema)];
 }

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;