@aicayzer/inkkit 0.0.1 → 0.0.3

package/dist/editor.js

@@ -1,5 +1,5 @@
 import { Editor, defaultValueCtx, editorViewCtx, editorViewOptionsCtx, remarkStringifyOptionsCtx, rootCtx, } from '@milkdown/kit/core';
-import { visibleClipboard, portableClipboard, clipboardText } from './clipboard.js';
+import { visibleClipboard, portableClipboard, clipboardText, clipboardContent, } from './clipboard.js';
 import { clipboard } from '@milkdown/kit/plugin/clipboard';
 import { history } from '@milkdown/kit/plugin/history';
 import { cursor } from '@milkdown/kit/plugin/cursor';
@@ -9,15 +9,19 @@ import { NodeRange, Fragment, Slice, } from '@milkdown/kit/prose/model';
 import { keydownHandler, keymap } from '@milkdown/kit/prose/keymap';
 import { liftListItem } from '@milkdown/kit/prose/schema-list';
 import { findWrapping, liftTarget } from '@milkdown/kit/prose/transform';
-import { AllSelection, Plugin, PluginKey, Selection, TextSelection, } from '@milkdown/kit/prose/state';
+import { AllSelection, NodeSelection, Plugin, PluginKey, Selection, TextSelection, } from '@milkdown/kit/prose/state';
 import { $prose, callCommand, replaceAll, } from '@milkdown/kit/utils';
 import { codeCopyPlugin, placeholderPlugin } from './decorations.js';
 import { createDialect, serialize, stringifyOptions } from './dialect.js';
 import { Preservation } from './preserve.js';
+import { normaliseLabel, referenceDefinitions, footnoteDefinitions, } from './references.js';
+import { selectionMarkdown, selectionContent, referenceMetadata, withReferenceMetadata, } from './reference-clipboard.js';
 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';
@@ -30,6 +34,7 @@ const shortcutCommands = {
     bold: ['bold'],
     italic: ['italic'],
     strikethrough: ['strikethrough'],
+    highlight: ['highlight'],
     code: ['code'],
     codeBlock: ['codeBlock'],
     quote: ['quote'],
@@ -41,6 +46,7 @@ const markNames = {
     strong: 'bold',
     emphasis: 'italic',
     strike_through: 'strikethrough',
+    highlight: 'highlight',
     inlineCode: 'code',
     link: 'link',
 };
@@ -240,6 +246,7 @@ export class InkKitEditor {
     plain;
     root;
     clickHandler;
+    footnoteKeyHandler;
     copyHandler;
     originalSource = '';
     generation = 0;
@@ -338,7 +345,9 @@ export class InkKitEditor {
             return { text, html: pre.outerHTML, markdown: text, images: [] };
         }
         const { doc, schema, selection } = this.editor.ctx.get(editorViewCtx).state;
-        const content = all ? doc.content : selection.content().content;
+        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;
@@ -346,14 +355,17 @@ export class InkKitEditor {
         try {
             markdown = all
                 ? snapshot.text
-                : serialize(this.editor.ctx, schema.topNodeType.create(null, 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(content, schema, markdown, this.options.images, this.context());
+        const result = await portableClipboard(all ? content : selectionContent(doc, content), schema, markdown, this.options.images, this.context());
+        const metadata = referenceMetadata(this.editor.ctx, doc, content);
+        if (metadata != null)
+            result.html = withReferenceMetadata(result.html, metadata);
         this.assertCurrent(snapshot.generation);
         if (snapshot.documentId !== this.documentId || epoch !== this.documentEpoch)
             throw new InkKitError('stale-document', 'Document changed');
@@ -369,6 +381,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') {
@@ -423,6 +439,8 @@ export class InkKitEditor {
         this.pasteController.destroy();
         if (this.clickHandler)
             this.root.removeEventListener('click', this.clickHandler);
+        if (this.footnoteKeyHandler)
+            this.root.removeEventListener('keydown', this.footnoteKeyHandler, true);
         if (this.copyHandler) {
             this.root.removeEventListener('copy', this.copyHandler, true);
             this.root.removeEventListener('cut', this.copyHandler, true);
@@ -433,7 +451,14 @@ export class InkKitEditor {
     // The app's bindings, replaced whole whenever they change; the plugin stays.
     keymapPlugin = $prose(() => new Plugin({
         key: new PluginKey('appKeymap'),
-        props: { handleKeyDown: (view, event) => this.keys(view, event) },
+        props: {
+            handleKeyDown: (view, event) => {
+                if (event.altKey && event.key === 'Enter') {
+                    return this.navigateFootnote(event.shiftKey ? 'reference' : 'definition');
+                }
+                return this.keys(view, event);
+            },
+        },
     }));
     static async mount(root, events, options = {}) {
         const instance = new InkKitEditor(events, options);
@@ -470,6 +495,7 @@ export class InkKitEditor {
             unbind(emphasisKeymap);
             unbind(inlineCodeKeymap);
             unbind(strikethroughKeymap);
+            unbind(highlightKeymap);
             unbind(headingKeymap, ['DowngradeHeading']);
             unbind(paragraphKeymap);
             unbind(blockquoteKeymap);
@@ -520,7 +546,40 @@ export class InkKitEditor {
         instance.plain.addEventListener('compositionend', () => {
             instance.plainComposing = false;
         });
+        const activateFootnote = (event) => {
+            const element = event.target.closest('[data-inkkit-footnote-reference]');
+            if (!element)
+                return false;
+            const identifier = element.getAttribute('data-inkkit-footnote-reference');
+            const view = instance.editor.ctx.get(editorViewCtx);
+            let position;
+            view.state.doc.descendants((node, pos) => {
+                if (position == null &&
+                    node.type.name === 'footnote_reference' &&
+                    node.attrs.identifier === identifier)
+                    position = pos;
+            });
+            if (position == null)
+                return false;
+            event.preventDefault();
+            try {
+                view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, position)));
+                instance.navigateFootnote('definition');
+            }
+            catch (error) {
+                events.error?.(error instanceof Error ? error : new Error(String(error)));
+            }
+            return true;
+        };
+        instance.footnoteKeyHandler = (event) => {
+            if ((event.key === 'Enter' || event.key === ' ') &&
+                activateFootnote(event))
+                event.stopPropagation();
+        };
+        root.addEventListener('keydown', instance.footnoteKeyHandler, true);
         instance.clickHandler = (event) => {
+            if (activateFootnote(event))
+                return;
             const anchor = event.target.closest('a[href]');
             if (anchor && event.metaKey) {
                 event.preventDefault();
@@ -532,14 +591,39 @@ 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;
-            fragment.descendants((node) => {
+            expanded.descendants((node) => {
                 if (node.type.name === 'image')
                     hasImages = true;
             });
-            if (!hasImages)
+            if (!hasImages) {
+                if (!event.clipboardData || fragment.size === 0)
+                    return;
+                event.preventDefault();
+                event.stopPropagation();
+                try {
+                    instance.snapshot();
+                    const content = expanded;
+                    const valid = fragment.firstChild?.isInline
+                        ? Fragment.from(view.state.schema.nodes.paragraph.create(null, fragment))
+                        : fragment;
+                    const markdown = selectionMarkdown(instance.editor.ctx, view.state.doc, valid);
+                    const output = clipboardContent(content, view.state.schema);
+                    event.clipboardData.setData('text/plain', output.text);
+                    const metadata = referenceMetadata(instance.editor.ctx, view.state.doc, valid);
+                    event.clipboardData.setData('text/html', metadata != null
+                        ? withReferenceMetadata(output.html, metadata)
+                        : output.html);
+                    if (event.type === 'cut')
+                        view.dispatch(view.state.tr.deleteSelection().scrollIntoView());
+                }
+                catch (error) {
+                    events.error?.(error instanceof Error ? error : new Error(String(error)));
+                }
                 return;
+            }
             event.preventDefault();
             event.stopPropagation();
             if (events.clipboard) {
@@ -564,7 +648,7 @@ export class InkKitEditor {
             }
             else {
                 const container = document.createElement('div');
-                container.textContent = clipboardText(fragment);
+                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'));
@@ -938,6 +1022,9 @@ export class InkKitEditor {
             case 'strikethrough':
                 run(toggleStrikethroughCommand.key);
                 break;
+            case 'highlight':
+                run(toggleHighlightCommand.key);
+                break;
             case 'code':
                 this.toggleInlineCode();
                 break;
@@ -961,6 +1048,17 @@ export class InkKitEditor {
                 toggleTaskList(this.editor.ctx);
                 break;
             case 'link': {
+                const view = this.editor.ctx.get(editorViewCtx);
+                const reference = view.state.selection.$from
+                    .marks()
+                    .find((mark) => mark.type.name === 'link' && mark.attrs.identifier) ??
+                    view.state.doc
+                        .nodeAt(view.state.selection.from)
+                        ?.marks.find((mark) => mark.type.name === 'link' && mark.attrs.identifier);
+                if (reference && typeof arg === 'string') {
+                    this.editReferenceDefinition(String(reference.attrs.identifier), arg);
+                    break;
+                }
                 const payload = typeof arg === 'string' ? { href: arg } : {};
                 const toggle = () => run(toggleLinkCommand.key, payload);
                 if (!state.marks.includes('link') ||
@@ -971,4 +1069,95 @@ export class InkKitEditor {
         }
         this.focus();
     }
+    editReferenceDefinition(label, destination, title) {
+        this.assertCurrent();
+        if (this.formatType === 'txt')
+            return false;
+        const view = this.editor.ctx.get(editorViewCtx);
+        const definitions = referenceDefinitions(view.state.doc);
+        const definition = definitions.get(normaliseLabel(label)) ??
+            [...definitions.values()].find(({ node }) => normaliseLabel(String(node.attrs.label)) === normaliseLabel(label));
+        if (!definition)
+            return false;
+        view.dispatch(view.state.tr.setNodeMarkup(definition.pos, undefined, {
+            ...definition.node.attrs,
+            url: destination,
+            title: title ?? definition.node.attrs.title,
+        }));
+        return true;
+    }
+    insertFootnote(label) {
+        this.assertCurrent();
+        if (this.formatType === 'txt')
+            return;
+        const view = this.editor.ctx.get(editorViewCtx);
+        const definitions = footnoteDefinitions(view.state.doc);
+        if (label == null) {
+            let number = 1;
+            const labels = new Set(definitions.keys());
+            for (const match of this.snapshot().text.matchAll(/\[\^([^\]\r\n]+)\]/g))
+                labels.add(normaliseLabel(match[1]));
+            view.state.doc.descendants((node) => {
+                if (node.type.name === 'footnote_reference')
+                    labels.add(String(node.attrs.identifier));
+            });
+            while (labels.has(normaliseLabel(String(number))))
+                number++;
+            label = String(number);
+        }
+        if (!label || /[\s\[\]\\]/.test(label) || label.length > 999)
+            throw new Error('A footnote label must be 1–999 characters without whitespace, brackets or backslashes');
+        const identifier = normaliseLabel(label);
+        const reference = view.state.schema.nodes.footnote_reference.create({
+            label,
+            identifier,
+        });
+        const tr = view.state.tr.insert(view.state.selection.to, reference);
+        if (!definitions.has(identifier)) {
+            const definition = view.state.schema.nodes.footnote_definition.create({ label, identifier }, view.state.schema.nodes.paragraph.create());
+            const position = tr.doc.content.size;
+            tr.insert(position, definition).setSelection(TextSelection.create(tr.doc, position + 2));
+        }
+        view.dispatch(tr.scrollIntoView());
+        this.focus();
+    }
+    navigateFootnote(target) {
+        this.assertCurrent();
+        if (this.formatType === 'txt')
+            return false;
+        const view = this.editor.ctx.get(editorViewCtx);
+        const { $from } = view.state.selection;
+        let identifier;
+        for (let depth = $from.depth; depth > 0; depth--) {
+            const node = $from.node(depth);
+            if (node.type.name === 'footnote_definition')
+                identifier = String(node.attrs.identifier);
+        }
+        const at = view.state.doc.nodeAt(view.state.selection.from);
+        const adjacent = at?.type.name === 'footnote_reference' ? at : $from.nodeBefore;
+        if (adjacent?.type.name === 'footnote_reference')
+            identifier = String(adjacent.attrs.identifier);
+        if (!identifier)
+            return false;
+        let position;
+        if (target === 'definition') {
+            const found = footnoteDefinitions(view.state.doc).get(identifier);
+            if (found)
+                position = found.pos + 2;
+        }
+        else
+            view.state.doc.descendants((node, pos) => {
+                if (position == null &&
+                    node.type.name === 'footnote_reference' &&
+                    node.attrs.identifier === identifier)
+                    position = pos;
+            });
+        if (position == null)
+            return false;
+        view.dispatch(view.state.tr
+            .setSelection(TextSelection.near(view.state.doc.resolve(position)))
+            .scrollIntoView());
+        this.focus();
+        return true;
+    }
 }

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,8 +1,13 @@
 import type { Literal } from 'mdast';
+import { type CommentSpan } from './comments.js';
 interface InkKitLiteral extends Literal {
     type: 'inkkitLiteral';
+    comments?: CommentSpan[];
 }
 declare module 'mdast' {
+    interface BlockContentMap {
+        inkkitLiteral: InkKitLiteral;
+    }
     interface RootContentMap {
         inkkitLiteral: InkKitLiteral;
     }

package/dist/literals.js

@@ -1,11 +1,6 @@
 import { $node, $remark } from '@milkdown/kit/utils';
-const unsupported = new Set([
-    'html',
-    'image',
-    'imageReference',
-    'definition',
-    'linkReference',
-]);
+import { commentSource, literalCommentSpans, } from './comments.js';
+const unsupported = new Set(['html', 'image', 'imageReference']);
 function restoreInlineBreaks(node) {
     if ((node.type === 'paragraph' || node.type === 'heading') &&
         node.children.length > 1) {
@@ -37,6 +32,18 @@ function containsUnsupported(node, images, inline = false) {
         ('children' in node &&
             node.children.some((child) => containsUnsupported(child, images, inline || node.type === 'paragraph' || node.type === 'heading'))));
 }
+function containsUnresolved(node, source) {
+    if (node.type === 'text') {
+        const start = node.position?.start.offset;
+        const end = node.position?.end.offset;
+        if (start == null || end == null)
+            return false;
+        const raw = source.slice(start, end);
+        return /(?<!\\)\[\^[^\]\n]+\]|(?<!\\)\[[^\]\n]+\](?:\[[^\]\n]*\])?/.test(raw);
+    }
+    return ('children' in node &&
+        node.children.some((child) => containsUnresolved(child, source)));
+}
 // 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) {
@@ -46,6 +53,29 @@ export function createLiteralPreservation(images) {
         const source = String(file.value).replace(/^\uFEFF/, '');
         const frontmatter = /^(---|\+\+\+)\r?\n[\s\S]*?\r?\n\1(?:\r?\n|$)/.exec(source);
         const frontmatterEnd = frontmatter?.[0].length ?? 0;
+        const preserveBlock = (node, depth = 0) => {
+            if (node.type === 'footnoteDefinition') {
+                node.children = node.children.map((child) => preserveBlock(child, depth + 1));
+                return node;
+            }
+            const start = node.position?.start.offset;
+            const end = node.position?.end.offset;
+            if (start == null ||
+                end == null ||
+                (!containsUnsupported(node, images) &&
+                    !containsUnresolved(node, source)))
+                return node;
+            let raw = source.slice(start, end);
+            // 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,
+                comments: literalCommentSpans(raw),
+                position: node.position,
+            };
+        };
         const blocks = [];
         if (frontmatter)
             blocks.push({
@@ -81,16 +111,9 @@ export function createLiteralPreservation(images) {
                     });
                 continue;
             }
-            const raw = source.slice(start, end);
-            const footnote = node.type !== 'code' && /\[\^[^\]]+\]/.test(raw);
-            if (containsUnsupported(node, images) || footnote)
-                blocks.push({
-                    type: 'inkkitLiteral',
-                    value: raw,
-                    position: node.position,
-                });
-            else
-                blocks.push(node);
+            if (node.type === 'inkkitLiteral')
+                node.comments = literalCommentSpans(node.value);
+            blocks.push(preserveBlock(node));
         }
         tree.children = blocks;
     });
@@ -98,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,
@@ -114,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);
         },
     },
 }));