@aicayzer/inkkit 0.0.9 → 0.0.11

package/dist/linked-syntax.js

@@ -0,0 +1,308 @@
+import { $node, $remark } from '@milkdown/kit/utils';
+import { defaultHandlers } from 'mdast-util-to-markdown';
+const fromTable = (raw) => raw.replace(/(\\*)\|/g, (_match, escapes) => `${'\\'.repeat(Math.floor(escapes.length / 2))}|`);
+const toTable = (raw) => raw.replace(/(\\*)\|/g, (_match, escapes) => `${'\\'.repeat(escapes.length * 2 + 1)}|`);
+export function parseLinkedSyntax(raw, inTable = false) {
+    const source = inTable ? fromTable(raw) : raw;
+    const embed = source.startsWith('!');
+    const prefix = embed ? '![[' : '[[';
+    if (!source.startsWith(prefix) || !source.endsWith(']]'))
+        return undefined;
+    const content = source.slice(prefix.length, -2);
+    const parts = { target: '', fragment: '', alias: '' };
+    let section = 'target', hasFragment = false, hasAlias = false;
+    for (let index = 0; index < content.length; index++) {
+        const character = content[index];
+        if (character === '\\') {
+            const escaped = content[++index];
+            if (!escaped || !'[]|#\\'.includes(escaped))
+                return undefined;
+            parts[section] += escaped;
+        }
+        else if (character === '|') {
+            if (hasAlias)
+                return undefined;
+            hasAlias = true;
+            section = 'alias';
+        }
+        else if (character === '#' && section !== 'alias') {
+            if (hasFragment)
+                return undefined;
+            hasFragment = true;
+            section = 'fragment';
+        }
+        else {
+            if ('[]'.includes(character) ||
+                character.charCodeAt(0) < 32 ||
+                character === '\u007f')
+                return undefined;
+            parts[section] += character;
+        }
+    }
+    if ((!parts.target.trim() && !(hasFragment && parts.fragment.trim())) ||
+        (hasFragment && !parts.fragment.trim()) ||
+        (hasAlias && !parts.alias.trim()) ||
+        parts.target.trimStart().startsWith('^') ||
+        parts.fragment.trimStart().startsWith('^'))
+        return undefined;
+    if (embed &&
+        (!parts.target.trim() ||
+            (hasAlias && (!/^\d{1,5}$/.test(parts.alias) || Number(parts.alias) < 1))))
+        return undefined;
+    return {
+        raw,
+        target: parts.target,
+        fragment: hasFragment ? parts.fragment : null,
+        label: !embed && hasAlias
+            ? parts.alias
+            : parts.target + (hasFragment ? `#${parts.fragment}` : ''),
+        width: embed && hasAlias ? Number(parts.alias) : null,
+        embed,
+        inTable,
+    };
+}
+function linkedTokenizer(embed) {
+    return function (effects, ok, nok) {
+        const prefix = embed ? '![[' : '[[';
+        let index = 0, raw = '';
+        return opening;
+        function consume(code) {
+            raw += String.fromCodePoint(code);
+            effects.consume(code);
+        }
+        function opening(code) {
+            if (code !== prefix.charCodeAt(index))
+                return nok(code);
+            if (!index)
+                effects.enter('inkkitLinkedSyntax');
+            consume(code);
+            index++;
+            return index === prefix.length ? body : opening;
+        }
+        function body(code) {
+            if (code === null || code < 32 || code === 91)
+                return nok(code);
+            consume(code);
+            if (code === 92)
+                return escaped;
+            return code === 93 ? closing : body;
+        }
+        function escaped(code) {
+            if (code === null || code < 32)
+                return nok(code);
+            consume(code);
+            return body;
+        }
+        function closing(code) {
+            if (code !== 93)
+                return nok(code);
+            consume(code);
+            if (!parseLinkedSyntax(raw) && !parseLinkedSyntax(raw, true))
+                return nok(code);
+            effects.exit('inkkitLinkedSyntax');
+            return ok;
+        }
+    };
+}
+function tableForm(raw, authoredInTable, outputInTable) {
+    if (authoredInTable === outputInTable)
+        return raw;
+    return outputInTable ? toTable(raw) : fromTable(raw);
+}
+export function wikiMarkdown(node, inTable = false) {
+    return tableForm(String(node.attrs.raw), Boolean(node.attrs.inTable), inTable);
+}
+export function wikiReference(node) {
+    return {
+        target: String(node.attrs.target),
+        ...(node.attrs.fragment != null
+            ? { fragment: String(node.attrs.fragment) }
+            : {}),
+        label: String(node.attrs.label),
+    };
+}
+export function fileReference(node) {
+    const reference = String(node.attrs.src ?? '');
+    const named = node.attrs.inkkitFileRaw != null;
+    const alt = String(node.attrs.alt ?? '');
+    const match = /\|(\d{1,5})$/.exec(alt);
+    const fragment = named
+        ? node.attrs.inkkitFileFragment
+        : reference.includes('#')
+            ? reference.slice(reference.indexOf('#') + 1)
+            : null;
+    const label = named
+        ? String(node.attrs.inkkitFileTarget ?? '') +
+            (fragment != null ? `#${fragment}` : '')
+        : match
+            ? alt.slice(0, match.index)
+            : alt;
+    const width = named && alt === label && node.attrs.inkkitFileWidth == null
+        ? null
+        : match
+            ? Number(match[1])
+            : null;
+    return {
+        reference,
+        kind: named ? 'wiki' : 'path',
+        ...(fragment != null ? { fragment: String(fragment) } : {}),
+        ...(label ? { label } : {}),
+        ...(width != null ? { width } : {}),
+    };
+}
+export function namedFileMarkdown(node, inTable = false) {
+    if (node.attrs.inkkitFileRaw == null)
+        return undefined;
+    let raw = String(node.attrs.inkkitFileRaw);
+    const authoredInTable = Boolean(node.attrs.inkkitFileInTable);
+    const width = fileReference(node).width ?? null;
+    const original = node.attrs.inkkitFileWidth ?? null;
+    if (width !== original) {
+        if (authoredInTable)
+            raw = fromTable(raw);
+        if (original != null)
+            raw = raw.replace(/\|\d{1,5}\]\]$/, ']]');
+        if (width != null)
+            raw = `${raw.slice(0, -2)}|${width}]]`;
+        return inTable ? toTable(raw) : raw;
+    }
+    return tableForm(raw, authoredInTable, inTable);
+}
+export const wikiLinkSchema = $node('inkkit_wiki_link', () => ({
+    inline: true,
+    group: 'inline',
+    atom: true,
+    marks: '',
+    attrs: {
+        raw: { default: '' },
+        target: { default: '' },
+        fragment: { default: null },
+        label: { default: '' },
+        inTable: { default: false },
+    },
+    parseDOM: [
+        {
+            tag: 'span[data-inkkit-wiki]',
+            getAttrs(dom) {
+                const parsed = parseLinkedSyntax(dom.getAttribute('data-inkkit-wiki-raw') ?? '', dom.getAttribute('data-inkkit-wiki-table') === 'true');
+                return parsed && !parsed.embed
+                    ? {
+                        raw: parsed.raw,
+                        target: parsed.target,
+                        fragment: parsed.fragment,
+                        label: parsed.label,
+                        inTable: parsed.inTable,
+                    }
+                    : false;
+            },
+        },
+    ],
+    toDOM: (node) => [
+        'span',
+        {
+            'data-inkkit-wiki': node.attrs.target,
+            'data-inkkit-fragment': node.attrs.fragment ?? '',
+            'data-inkkit-wiki-raw': node.attrs.raw,
+            'data-inkkit-wiki-table': String(node.attrs.inTable),
+            role: 'link',
+            tabindex: '0',
+        },
+        node.attrs.label,
+    ],
+    parseMarkdown: {
+        match: (node) => node.type === 'inkkitWikiLink',
+        runner(state, node, type) {
+            state.addNode(type, {
+                raw: node.raw,
+                target: node.target,
+                fragment: node.fragment,
+                label: node.label,
+                inTable: node.inTable,
+            });
+        },
+    },
+    toMarkdown: {
+        match: (node) => node.type.name === 'inkkit_wiki_link',
+        runner(state, node) {
+            state.addNode('inkkitWikiLink', undefined, node.attrs.label, {
+                raw: node.attrs.raw,
+                target: node.attrs.target,
+                fragment: node.attrs.fragment,
+                label: node.attrs.label,
+                inTable: node.attrs.inTable,
+            });
+        },
+    },
+}));
+export function linkedSyntax(wikiLinks, files) {
+    const syntax = { text: {} };
+    if (wikiLinks)
+        syntax.text[91] = {
+            name: 'inkkitWikiLink',
+            tokenize: linkedTokenizer(false),
+            previous: (code) => code !== 33 && code !== 91,
+        };
+    if (files)
+        syntax.text[33] = {
+            name: 'inkkitNamedFile',
+            tokenize: linkedTokenizer(true),
+        };
+    const from = {
+        enter: {
+            inkkitLinkedSyntax(token) {
+                const inTable = this.stack.some((node) => node.type === 'tableCell');
+                const parsed = parseLinkedSyntax(this.sliceSerialize(token), inTable);
+                if (!parsed) {
+                    this.enter({ type: 'text', value: this.sliceSerialize(token) }, token);
+                    return;
+                }
+                if (parsed.embed)
+                    this.enter({
+                        type: 'image',
+                        url: parsed.target +
+                            (parsed.fragment != null ? `#${parsed.fragment}` : ''),
+                        alt: parsed.label + (parsed.width != null ? `|${parsed.width}` : ''),
+                        title: null,
+                        inkkitFileRaw: parsed.raw,
+                        inkkitFileTarget: parsed.target,
+                        inkkitFileFragment: parsed.fragment,
+                        inkkitFileWidth: parsed.width,
+                        inkkitFileInTable: inTable,
+                    }, token);
+                else
+                    this.enter({
+                        type: 'inkkitWikiLink',
+                        value: parsed.label,
+                        raw: parsed.raw,
+                        target: parsed.target,
+                        fragment: parsed.fragment,
+                        label: parsed.label,
+                        inTable,
+                    }, token);
+            },
+        },
+        exit: {
+            inkkitLinkedSyntax(token) {
+                this.exit(token);
+            },
+        },
+    };
+    const wiki = (node, _parent, state) => tableForm(String(node.raw), Boolean(node.inTable), state.stack.includes('tableCell'));
+    const named = (node, parent, state, info) => {
+        if (node.inkkitFileRaw != null)
+            return tableForm(String(node.inkkitFileRaw), Boolean(node.inkkitFileInTable), state.stack.includes('tableCell'));
+        return defaultHandlers.image(node, parent, state, info);
+    };
+    // Standard image handling is installed by CommonMark; wrap it only for authored named tokens.
+    return $remark('inkkitLinkedSyntax', () => function () {
+        const data = this.data();
+        (data.micromarkExtensions ??= []).push(syntax);
+        (data.fromMarkdownExtensions ??= []).push(from);
+        (data.toMarkdownExtensions ??= []).push({
+            handlers: {
+                inkkitWikiLink: wiki,
+                ...(files ? { image: named } : {}),
+            },
+        });
+    });
+}

package/dist/literals.js

@@ -47,6 +47,44 @@ function containsUnresolved(node, source) {
     return ('children' in node &&
         node.children.some((child) => containsUnresolved(child, source)));
 }
+function containsUnsupportedLinked(node, source) {
+    const start = node.position?.start.offset, end = node.position?.end.offset;
+    if (start == null || end == null || node.type === 'definition')
+        return false;
+    const supported = [];
+    const visit = (child) => {
+        if ([
+            'inkkitWikiLink',
+            'image',
+            'code',
+            'inlineCode',
+            'link',
+            'inkkitCommentInline',
+            'inkkitCommentBlock',
+        ].includes(child.type)) {
+            const from = child.position?.start.offset, to = child.position?.end.offset;
+            if (from != null && to != null)
+                supported.push({ from, to });
+            return;
+        }
+        if ('children' in child)
+            child.children.forEach(visit);
+    };
+    visit(node);
+    for (const match of source
+        .slice(start, end)
+        .matchAll(/!?\[\[[^\r\n]*?\]\]/g)) {
+        const from = start + match.index, to = from + match[0].length;
+        let escapes = 0;
+        while (from - escapes > 0 && source[from - escapes - 1] === '\\')
+            escapes++;
+        if (escapes % 2)
+            continue;
+        if (!supported.some((span) => span.from <= from && span.to >= to))
+            return true;
+    }
+    return false;
+}
 // Keep syntax we cannot faithfully edit as literal text, without making the rest
 // of the document a source editor or allowing HTML and image network requests.
 export function createLiteralPreservation(images) {
@@ -66,7 +104,8 @@ export function createLiteralPreservation(images) {
             if (start == null ||
                 end == null ||
                 (!containsUnsupported(node, images) &&
-                    !containsUnresolved(node, source)))
+                    !containsUnresolved(node, source) &&
+                    !containsUnsupportedLinked(node, source)))
                 return node;
             let raw = source.slice(start, end);
             // Definition indentation is restored by the footnote serializer.

package/dist/mermaid.js

@@ -1,5 +1,4 @@
 import { editorLabels } from './labels.js';
-import mermaid from 'mermaid';
 import DOMPurify from 'dompurify';
 import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
 import { Decoration, DecorationSet } from '@milkdown/kit/prose/view';
@@ -56,6 +55,7 @@ export function renderDiagram(source) {
     if (previous)
         return previous;
     const rendered = queue.then(async () => {
+        const { default: mermaid } = await import('mermaid');
         mermaid.initialize({
             startOnLoad: false,
             securityLevel: 'strict',

package/dist/portable-files.d.ts

@@ -0,0 +1,10 @@
+import type { Node } from '@milkdown/kit/prose/model';
+import type { DocumentContext, FileAdapter, FilePresentation, FileReference, ImageAdapter, PortableImage } from './types.js';
+export interface PortableFile {
+    reference: FileReference;
+    presentation: FilePresentation;
+    label: string;
+    description: string;
+}
+export declare function portableFile(node: Node, adapter: FileAdapter | undefined, context: DocumentContext, signal: AbortSignal): Promise<PortableFile | undefined>;
+export declare function portableFileImage(file: PortableFile, files: FileAdapter, legacy: ImageAdapter | undefined, context: DocumentContext, signal: AbortSignal): Promise<PortableImage>;

package/dist/portable-files.js

@@ -0,0 +1,36 @@
+import { resolveFile, withFileSignal } from './files.js';
+import { fileReference } from './linked-syntax.js';
+export async function portableFile(node, adapter, context, signal) {
+    if (!adapter)
+        return undefined;
+    const reference = fileReference(node);
+    let presentation;
+    try {
+        presentation = await resolveFile(adapter, reference, { ...context, signal });
+    }
+    catch (error) {
+        signal.throwIfAborted();
+        presentation = {
+            kind: 'error',
+            message: error instanceof Error ? error.message : 'The file is unavailable.',
+        };
+    }
+    const label = presentation.label || reference.label || reference.reference || 'File';
+    const kind = presentation.kind;
+    const description = kind === 'missing' || kind === 'error'
+        ? `[File: ${label} (${kind === 'missing' ? 'unavailable' : 'error'})]`
+        : `[${kind === 'pdf' ? 'PDF' : kind[0].toUpperCase() + kind.slice(1)}: ${label}]`;
+    return { reference, presentation, label, description };
+}
+export async function portableFileImage(file, files, legacy, context, signal) {
+    signal.throwIfAborted();
+    const image = files.exportImage
+        ? await withFileSignal(files.exportImage(file.reference, { ...context, signal }), signal)
+        : file.reference.kind === 'path' && legacy
+            ? await withFileSignal(legacy.exportImage(file.reference.reference, { ...context }), signal)
+            : undefined;
+    signal.throwIfAborted();
+    if (!image)
+        throw new Error('The image has no portable export adapter.');
+    return image;
+}

package/dist/preserve.js

@@ -266,6 +266,10 @@ function blockForm(ctx, node) {
 }
 function semanticSignature(doc) {
     const clean = (value) => {
+        if (value.type === 'inkkit_wiki_link' && value.attrs) {
+            const { raw: _raw, inTable: _inTable, ...attrs } = value.attrs;
+            value = { ...value, attrs };
+        }
         const content = value.content;
         if (!content)
             return value;
@@ -305,6 +309,9 @@ function semanticSignature(doc) {
         'label',
         'spread',
         'authoredFence',
+        'inkkitFileRaw',
+        'inkkitFileWidth',
+        'inkkitFileInTable',
     ].includes(key)
         ? undefined
         : value));

package/dist/print.d.ts

@@ -1,7 +1,7 @@
 import type { Fragment, Schema } from '@milkdown/kit/prose/model';
-import { type DocumentContext, type ImageAdapter, type PrintableDocument } from './types.js';
+import { type DocumentContext, type ImageAdapter, type FileAdapter, 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 declare function printableMarkdown(content: Fragment, schema: Schema, adapter: ImageAdapter | undefined, context: DocumentContext, files?: FileAdapter, signal?: AbortSignal): Promise<PrintableContent>;
 export {};

package/dist/print.js

@@ -1,8 +1,10 @@
 import { clipboardContent } from './clipboard.js';
 import { shareableFragment } from './comments.js';
-import { splitAlt } from './images.js';
+import { fileReference } from './linked-syntax.js';
 import { sourceFrontmatter } from './literals.js';
 import { diagramImage, renderDiagram } from './mermaid.js';
+import { portableFile, portableFileImage } from './portable-files.js';
+import { withFileSignal } from './files.js';
 import { InkKitError, } from './types.js';
 const styles = `
 :root { color-scheme: light; font: 11pt/1.5 Arial, sans-serif; }
@@ -124,7 +126,8 @@ function matchesSignature(bytes, mimeType) {
             return false;
     }
 }
-async function validatedImage(input) {
+async function validatedImage(input, signal) {
+    signal.throwIfAborted();
     const image = {
         bytes: new Uint8Array(input.bytes),
         mimeType: input.mimeType.toLowerCase(),
@@ -136,18 +139,23 @@ async function validatedImage(input) {
         await new Promise((resolve, reject) => {
             const decoder = new Image();
             const timeout = setTimeout(() => {
-                decoder.onload = decoder.onerror = null;
-                decoder.removeAttribute('src');
-                reject(new Error('The portable image could not be decoded.'));
+                decoder.src = '';
+                finish(new Error('The portable image could not be decoded.'));
             }, 10000);
             const finish = (error) => {
                 clearTimeout(timeout);
                 decoder.onload = decoder.onerror = null;
+                signal.removeEventListener('abort', cancelled);
                 if (error)
                     reject(error);
                 else
                     resolve();
             };
+            const cancelled = () => {
+                decoder.src = '';
+                finish(new DOMException('Image export cancelled', 'AbortError'));
+            };
+            signal.addEventListener('abort', cancelled, { once: true });
             decoder.onload = () => finish(decoder.naturalWidth > 0 && decoder.naturalHeight > 0
                 ? undefined
                 : new Error('The portable image has no usable dimensions.'));
@@ -272,7 +280,8 @@ function cleanSemantics(container, localIDs) {
     for (const comment of comments)
         comment.parentNode?.removeChild(comment);
 }
-export async function printableMarkdown(content, schema, adapter, context) {
+export async function printableMarkdown(content, schema, adapter, context, files, signal = new AbortController().signal) {
+    signal.throwIfAborted();
     content = shareableFragment(content);
     const container = document.createElement('div');
     container.innerHTML = clipboardContent(content, schema).html;
@@ -280,10 +289,7 @@ export async function printableMarkdown(content, schema, adapter, context) {
     const tasks = [];
     content.descendants((node) => {
         if (node.type.name === 'image')
-            references.push({
-                reference: String(node.attrs.src ?? ''),
-                ...splitAlt(String(node.attrs.alt ?? '')),
-            });
+            references.push(node);
         if (node.type.name === 'list_item')
             tasks.push(node.attrs.checked ?? null);
     });
@@ -320,33 +326,58 @@ export async function printableMarkdown(content, schema, adapter, context) {
         reference.replaceChildren(link);
     }
     const images = new Map();
+    const warnings = [];
     for (const [index, element] of [
         ...container.querySelectorAll('img'),
     ].entries()) {
-        const reference = references[index];
+        const node = references[index];
         try {
-            if (!adapter || !reference)
+            if (!node)
                 throw new Error('The authored image is unavailable.');
-            const image = await validatedImage(await adapter.exportImage(reference.reference, { ...context }));
+            const reference = fileReference(node);
+            const file = files
+                ? await portableFile(node, files, context, signal)
+                : undefined;
+            if (file && file.presentation.kind !== 'image') {
+                const fallback = document.createElement('span');
+                fallback.textContent = file.description;
+                element.replaceWith(fallback);
+                const unavailable = file.presentation.kind === 'missing' ||
+                    file.presentation.kind === 'error';
+                warnings.push({
+                    code: unavailable ? 'attachment-unavailable' : 'attachment-fallback',
+                    message: unavailable
+                        ? `${file.label} is unavailable; its description is printed.`
+                        : `${file.label} is printed as a ${file.presentation.kind === 'pdf' ? 'PDF' : file.presentation.kind} description.`,
+                });
+                continue;
+            }
+            if (!file && !adapter)
+                throw new Error('The authored image is unavailable.');
+            const image = await validatedImage(file
+                ? await portableFileImage(file, files, adapter, context, signal)
+                : await withFileSignal(adapter.exportImage(reference.reference, { ...context }), signal), signal);
+            signal.throwIfAborted();
             images.set(element, image);
             element.setAttribute('src', dataURL(image));
-            element.setAttribute('alt', reference.alt);
+            element.setAttribute('alt', file?.label || reference.label || '');
             if (reference.width != null && reference.width > 0)
                 element.setAttribute('width', String(Math.min(4096, reference.width)));
         }
         catch (error) {
+            signal.throwIfAborted();
             throw new InkKitError('image-unavailable', error instanceof Error
                 ? error.message
                 : 'The authored image is unavailable.');
         }
     }
-    const warnings = [];
     for (const code of container.querySelectorAll('pre[data-language="mermaid"] > code')) {
         const source = code.textContent ?? '';
         try {
-            await renderDiagram(source);
+            await withFileSignal(renderDiagram(source), signal);
         }
         catch (error) {
+            signal.throwIfAborted();
             const message = `${error instanceof Error ? error.message : 'This diagram could not be rendered.'} The source is printed below.`;
             warnings.push({ code: 'diagram-unavailable', message });
             const warning = document.createElement('p');
@@ -355,7 +386,7 @@ export async function printableMarkdown(content, schema, adapter, context) {
             continue;
         }
         try {
-            const image = await validatedImage(await diagramImage(source));
+            const image = await validatedImage(await withFileSignal(diagramImage(source), signal), signal);
             const figure = document.createElement('figure');
             figure.className = 'inkkit-print-diagram';
             const element = document.createElement('img');
@@ -373,5 +404,6 @@ export async function printableMarkdown(content, schema, adapter, context) {
     }
     cleanSemantics(container, localIDs);
     const assets = [...container.querySelectorAll('img')].map((element) => images.get(element));
+    signal.throwIfAborted();
     return documentOutput(container, assets, warnings);
 }

package/dist/style.css

@@ -235,6 +235,45 @@
   background: var(--_inkkit-accent);
 }
 
+.inkkit-root .ProseMirror .inkkit-file {
+  vertical-align: middle;
+  border: 1px solid var(--_inkkit-rule);
+  border-radius: 4px;
+  padding: 4px;
+  white-space: normal;
+}
+
+.inkkit-root .ProseMirror .inkkit-file audio,
+.inkkit-root .ProseMirror .inkkit-file video,
+.inkkit-root .ProseMirror .inkkit-file iframe {
+  display: block;
+  max-width: 100%;
+}
+
+.inkkit-root .ProseMirror .inkkit-file video {
+  max-height: 480px;
+}
+
+.inkkit-root .ProseMirror .inkkit-file iframe {
+  width: min(600px, 100%);
+  height: 360px;
+  border: 0;
+}
+
+.inkkit-root .ProseMirror .inkkit-file-label {
+  overflow-wrap: anywhere;
+}
+
+.inkkit-root .ProseMirror .inkkit-file-control {
+  margin-inline-start: 0.5em;
+  font: inherit;
+  color: var(--_inkkit-text);
+  background: var(--_inkkit-code-bg);
+  border: 1px solid var(--_inkkit-rule);
+  border-radius: 3px;
+  cursor: pointer;
+}
+
 .inkkit-root .ProseMirror {
   /* The viewport, not the wrapper Milkdown adds, so a click below the text still places the caret. */
   min-height: var(--inkkit-min-height, 100%);
@@ -680,7 +719,7 @@
   display: none;
 }
 
-.inkkit-root[data-inkkit-comments-visible='true'] .inkkit-comment {
+.inkkit-root [data-inkkit-comments-visible='true'] .inkkit-comment {
   display: inline;
   white-space: pre-wrap;
   font-family: var(--_inkkit-mono);
@@ -688,7 +727,7 @@
   background: var(--_inkkit-code-bg);
 }
 
-.inkkit-root[data-inkkit-comments-visible='true'] .inkkit-comment-block {
+.inkkit-root [data-inkkit-comments-visible='true'] .inkkit-comment-block {
   display: block;
   padding: calc(var(--inkkit-font-size, 15px) * 0.5);
 }
@@ -707,7 +746,6 @@
   }
 
   .inkkit-root .inkkit-comment,
-  .inkkit-root[data-inkkit-comments-visible='true'] .inkkit-comment,
   .inkkit-root [data-inkkit-callout-toggle],
   .inkkit-root .ProseMirror pre .copy,
   .inkkit-root .milkdown-table-block .handle,