@aicayzer/inkkit 0.0.1 → 0.0.3

package/dist/comments.js

@@ -0,0 +1,487 @@
+import { $node, $prose, $remark } from '@milkdown/kit/utils';
+import { Fragment } from '@milkdown/kit/prose/model';
+import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
+import { fromMarkdown } from 'mdast-util-from-markdown';
+const lineEnding = (code) => code === -3 || code === -4 || code === -5;
+const whitespace = (code) => code === 32 || code === -1 || code === -2;
+function commentData(effects) {
+    let open = false;
+    return {
+        consume(code) {
+            if (!open) {
+                effects.enter('inkkitCommentData');
+                open = true;
+            }
+            effects.consume(code);
+        },
+        close() {
+            if (open) {
+                effects.exit('inkkitCommentData');
+                open = false;
+            }
+        },
+    };
+}
+const inlineComment = function (effects, ok, nok) {
+    const data = commentData(effects);
+    return start;
+    function start(code) {
+        effects.enter('inkkitCommentInline');
+        data.consume(code);
+        return second;
+    }
+    function second(code) {
+        if (code !== 37)
+            return nok(code);
+        data.consume(code);
+        return body;
+    }
+    function body(code) {
+        if (code === null)
+            return nok(code);
+        if (lineEnding(code)) {
+            data.close();
+            effects.enter('lineEnding');
+            effects.consume(code);
+            effects.exit('lineEnding');
+            return body;
+        }
+        data.consume(code);
+        return code === 37 ? closing : body;
+    }
+    function closing(code) {
+        if (code !== 37)
+            return body(code);
+        data.consume(code);
+        data.close();
+        effects.exit('inkkitCommentInline');
+        return ok;
+    }
+};
+// A flow construct owns blank lines and Markdown-looking text inside a block comment.
+const blockComment = function (effects, ok, nok) {
+    const data = commentData(effects);
+    return start;
+    function start(code) {
+        effects.enter('inkkitCommentBlock');
+        data.consume(code);
+        return second;
+    }
+    function second(code) {
+        if (code !== 37)
+            return nok(code);
+        data.consume(code);
+        return openingEnd;
+    }
+    function openingEnd(code) {
+        if (whitespace(code)) {
+            data.consume(code);
+            return openingEnd;
+        }
+        if (!lineEnding(code))
+            return nok(code);
+        data.close();
+        effects.enter('lineEnding');
+        effects.consume(code);
+        effects.exit('lineEnding');
+        return lineStart;
+    }
+    function lineStart(code) {
+        if (whitespace(code)) {
+            data.consume(code);
+            return lineStart;
+        }
+        if (code === 37) {
+            data.consume(code);
+            return closingSecond;
+        }
+        return body(code);
+    }
+    function body(code) {
+        if (code === null)
+            return nok(code);
+        if (lineEnding(code)) {
+            data.close();
+            effects.enter('lineEnding');
+            effects.consume(code);
+            effects.exit('lineEnding');
+            return lineStart;
+        }
+        data.consume(code);
+        return lineEnding(code) ? lineStart : body;
+    }
+    function closingSecond(code) {
+        if (code !== 37)
+            return body(code);
+        data.consume(code);
+        return closingEnd;
+    }
+    function closingEnd(code) {
+        if (whitespace(code)) {
+            data.consume(code);
+            return closingEnd;
+        }
+        if (code !== null && !lineEnding(code))
+            return body(code);
+        data.close();
+        effects.exit('inkkitCommentBlock');
+        return ok(code);
+    }
+};
+const syntax = {
+    text: { 37: { name: 'inkkitCommentInline', tokenize: inlineComment } },
+    flow: {
+        37: { name: 'inkkitCommentBlock', tokenize: blockComment, concrete: true },
+    },
+};
+const from = {
+    enter: {
+        inkkitCommentInline(token) {
+            this.enter({ type: 'inkkitCommentInline', syntax: 'obsidian', value: '' }, token);
+        },
+        inkkitCommentBlock(token) {
+            this.enter({ type: 'inkkitCommentBlock', syntax: 'obsidian', value: '' }, token);
+        },
+    },
+    exit: {
+        inkkitCommentInline(token) {
+            const node = this.stack.at(-1);
+            node.value = this.sliceSerialize(token).slice(2, -2);
+            this.exit(token);
+        },
+        inkkitCommentBlock(token) {
+            const node = this.stack.at(-1);
+            node.value = this.sliceSerialize(token)
+                .replace(/^%%[^\S\r\n]*\r?\n/, '')
+                .replace(/(?:\r?\n)?[^\S\r\n]*%%[^\S\r\n]*$/, '');
+            this.exit(token);
+        },
+    },
+};
+export function commentSource(node) {
+    const body = node.textContent;
+    return node.attrs.syntax === 'html'
+        ? `<!--${body}-->`
+        : node.type.name === 'comment_block' || node.attrs.block
+            ? `%%\n${body}\n%%`
+            : `%%${body}%%`;
+}
+const handler = (node) => {
+    const comment = node;
+    const value = comment.value ?? '';
+    return comment.syntax === 'html'
+        ? `<!--${value}-->`
+        : comment.type === 'inkkitCommentBlock' || comment.block
+            ? `%%\n${value}\n%%`
+            : `%%${value}%%`;
+};
+function htmlSpans(value) {
+    const spans = [];
+    let inTag = false;
+    let quote = '';
+    for (let index = 0; index < value.length; index++) {
+        const character = value[index];
+        if (quote) {
+            if (character === quote)
+                quote = '';
+            continue;
+        }
+        if (inTag && (character === '"' || character === "'")) {
+            quote = character;
+            continue;
+        }
+        if (value.startsWith('<!--', index)) {
+            const end = value.indexOf('-->', index + 4);
+            if (end < 0)
+                break;
+            spans.push({
+                start: index,
+                end: end + 3,
+                syntax: 'html',
+                value: value.slice(index + 4, end),
+            });
+            index = end + 2;
+            inTag = false;
+        }
+        else if (character === '<')
+            inTag = true;
+        else if (character === '>')
+            inTag = false;
+    }
+    return spans;
+}
+// Parse preserved source again rather than hiding delimiter-looking strings in code or escapes.
+export function literalCommentSpans(value) {
+    const tree = fromMarkdown(value, {
+        extensions: [syntax],
+        mdastExtensions: [from],
+    });
+    const spans = [];
+    const visit = (node) => {
+        const start = node.position?.start.offset;
+        const end = node.position?.end.offset;
+        if (start != null && end != null) {
+            if (node.type === 'inkkitCommentInline' ||
+                node.type === 'inkkitCommentBlock')
+                spans.push({
+                    start,
+                    end,
+                    syntax: node.syntax,
+                    value: node.value,
+                    block: node.type === 'inkkitCommentBlock',
+                });
+            else if (node.type === 'html')
+                spans.push(...htmlSpans(value.slice(start, end)).map((span) => ({
+                    ...span,
+                    start: start + span.start,
+                    end: start + span.end,
+                })));
+        }
+        if ('children' in node)
+            node.children.forEach(visit);
+    };
+    visit(tree);
+    return spans.sort((left, right) => left.start - right.start);
+}
+function remarkComments() {
+    const data = this.data();
+    (data.micromarkExtensions ??= []).push(syntax);
+    (data.fromMarkdownExtensions ??= []).push(from);
+    (data.toMarkdownExtensions ??= []).push({
+        handlers: { inkkitCommentInline: handler, inkkitCommentBlock: handler },
+        unsafe: [{ character: '%', inConstruct: 'phrasing', after: '%' }],
+    });
+    return (tree) => {
+        const visit = (node, inline, parentType) => {
+            if (parentType === 'listItem' && node.type === 'inkkitCommentBlock')
+                return {
+                    type: 'paragraph',
+                    children: [{ ...node, type: 'inkkitCommentInline', block: true }],
+                    position: node.position,
+                };
+            if (node.type === 'html') {
+                const spans = htmlSpans(node.value);
+                if (spans.length === 1 &&
+                    spans[0].start === 0 &&
+                    spans[0].end === node.value.length)
+                    return parentType === 'listItem'
+                        ? {
+                            type: 'paragraph',
+                            children: [
+                                {
+                                    type: 'inkkitCommentInline',
+                                    syntax: 'html',
+                                    value: spans[0].value,
+                                    position: node.position,
+                                },
+                            ],
+                            position: node.position,
+                        }
+                        : {
+                            type: inline ? 'inkkitCommentInline' : 'inkkitCommentBlock',
+                            syntax: 'html',
+                            value: spans[0].value,
+                            position: node.position,
+                        };
+            }
+            if ('children' in node)
+                node.children = node.children.map((child) => visit(child, node.type === 'paragraph' ||
+                    node.type === 'heading' ||
+                    node.type === 'tableCell' ||
+                    node.type === 'link' ||
+                    node.type === 'linkReference' ||
+                    inline, node.type));
+            if (node.type === 'paragraph' &&
+                parentType !== 'listItem' &&
+                node.children.length === 1 &&
+                node.children[0]?.type === 'inkkitCommentInline')
+                return {
+                    ...node.children[0],
+                    type: 'inkkitCommentBlock',
+                    position: node.position,
+                };
+            return node;
+        };
+        tree.children = tree.children.map((node) => visit(node, false));
+    };
+}
+export const remarkCommentsPlugin = $remark('remarkComments', () => remarkComments);
+function commentNode(inline) {
+    const name = inline ? 'comment_inline' : 'comment_block';
+    const mdastType = inline ? 'inkkitCommentInline' : 'inkkitCommentBlock';
+    return $node(name, () => ({
+        inline,
+        group: inline ? 'inline' : 'block',
+        content: 'text*',
+        marks: '',
+        code: true,
+        defining: true,
+        attrs: { syntax: { default: 'html' }, block: { default: !inline } },
+        parseDOM: [
+            {
+                tag: `${inline ? 'span' : 'div'}[data-inkkit-comment]`,
+                preserveWhitespace: 'full',
+                getAttrs: (dom) => ({
+                    syntax: dom.getAttribute('data-inkkit-comment') === 'obsidian'
+                        ? 'obsidian'
+                        : 'html',
+                }),
+            },
+        ],
+        toDOM: (node) => [
+            inline ? 'span' : 'div',
+            {
+                class: `inkkit-comment inkkit-comment-${inline ? 'inline' : 'block'}`,
+                'data-inkkit-comment': node.attrs.syntax,
+                'aria-label': 'Author comment',
+            },
+            0,
+        ],
+        parseMarkdown: {
+            match: (node) => node.type === mdastType,
+            runner: (state, node, type) => {
+                state.openNode(type, {
+                    syntax: node.syntax,
+                    block: inline ? Boolean(node.block) : true,
+                });
+                if (node.value)
+                    state.addText(String(node.value));
+                state.closeNode();
+            },
+        },
+        toMarkdown: {
+            match: (node) => node.type.name === name,
+            runner: (state, node) => {
+                state.addNode(mdastType, undefined, node.textContent, {
+                    syntax: node.attrs.syntax,
+                    block: node.attrs.block,
+                });
+            },
+        },
+    }));
+}
+export const commentInline = commentNode(true);
+export const commentBlock = commentNode(false);
+const visibilityKey = new PluginKey('inkkit-comments-visible');
+export const commentVisibility = $prose(() => new Plugin({
+    key: visibilityKey,
+    state: {
+        init: () => false,
+        apply: (transaction, value) => transaction.getMeta(visibilityKey) ?? value,
+    },
+    view(view) {
+        const update = () => view.dom.setAttribute('data-inkkit-comments-visible', String(visibilityKey.getState(view.state) ?? false));
+        update();
+        return { update };
+    },
+}));
+export function setCommentVisibility(view, visible) {
+    if (visibilityKey.getState(view.state) === visible)
+        return;
+    view.dispatch(view.state.tr
+        .setMeta(visibilityKey, visible)
+        .setMeta('addToHistory', false));
+}
+export const comments = [commentInline, commentBlock, commentVisibility].flat();
+export function isComment(node) {
+    return (node.type.name === 'comment_inline' || node.type.name === 'comment_block');
+}
+// Authored reference metadata can retain comments after their visible nodes are removed.
+function commentProvenance(value) {
+    if (typeof value !== 'string')
+        return false;
+    const visit = (value) => {
+        if (Array.isArray(value))
+            return value.some(visit);
+        if (!value || typeof value !== 'object')
+            return false;
+        const node = value;
+        return (node.type === 'inkkitCommentInline' ||
+            node.type === 'inkkitCommentBlock' ||
+            (node.type === 'html' &&
+                typeof node.value === 'string' &&
+                htmlSpans(node.value).length > 0) ||
+            Boolean(node.children?.some(visit)));
+    };
+    try {
+        return visit(JSON.parse(value));
+    }
+    catch {
+        return true;
+    }
+}
+export function shareableFragment(content) {
+    const filtered = [];
+    const labelHasComments = (label) => typeof label === 'string' &&
+        (label.includes('%%') || label.includes('<!--')) &&
+        literalCommentSpans(label).length > 0;
+    content.forEach((node) => {
+        if (isComment(node))
+            return;
+        if (node.type.name === 'reference_definition' &&
+            labelHasComments(node.attrs.label))
+            return;
+        node = node.mark(node.marks.map((mark) => {
+            if (mark.type.name !== 'link')
+                return mark;
+            const clearTarget = labelHasComments(mark.attrs.label);
+            if (!clearTarget && !commentProvenance(mark.attrs.referenceContent))
+                return mark;
+            return mark.type.create({
+                ...mark.attrs,
+                referenceContent: null,
+                ...(clearTarget
+                    ? { identifier: null, label: null, referenceType: null }
+                    : {}),
+            });
+        }));
+        if (!node.childCount) {
+            filtered.push(node);
+            return;
+        }
+        const inner = shareableFragment(node.content);
+        let whitespaceOnly = true, removedComment = false;
+        inner.forEach((child) => {
+            if (!(child.isText && !child.text.trim()) &&
+                child.type.name !== 'hardbreak')
+                whitespaceOnly = false;
+        });
+        node.content.descendants((child) => {
+            if (isComment(child)) {
+                removedComment = true;
+                return false;
+            }
+        });
+        const commentOnly = removedComment && whitespaceOnly;
+        const paragraph = () => Fragment.from(node.type.schema.nodes.paragraph.create());
+        if ((inner.size === 0 || commentOnly) && node.content.size > 0) {
+            if ([
+                'footnote_definition',
+                'list_item',
+                'table_cell',
+                'table_header',
+                'inkkit_callout',
+            ].includes(node.type.name))
+                filtered.push(node.copy(paragraph()));
+            return;
+        }
+        if (!node.type.validContent(inner)) {
+            if (node.type.name === 'list_item')
+                filtered.push(node.copy(paragraph().append(inner)));
+            return;
+        }
+        filtered.push(node.copy(inner));
+    });
+    return Fragment.fromArray(filtered);
+}
+// ProseMirror omits a parent wrapper when a selection is wholly inside its text.
+export function commentSelectionContent(doc, from, to, content) {
+    const start = doc.resolve(from);
+    const end = doc.resolve(to);
+    for (let depth = start.depth; depth > 0; depth--) {
+        const node = start.node(depth);
+        if (isComment(node) && end.depth >= depth && node === end.node(depth))
+            return Fragment.from(node.copy(node.content.cut(from - start.start(depth), to - start.start(depth))));
+    }
+    return content;
+}

package/dist/dialect.js

@@ -4,6 +4,10 @@ import { extendListItemSchemaForTask, strikethroughAttr, strikethroughInputRule,
 import { $remark } from '@milkdown/kit/utils';
 import { autolinkInputRule } from './autolink.js';
 import { literalBlock, createLiteralPreservation } from './literals.js';
+import { references, remarkReferencesPlugin } from './references.js';
+import { callouts, remarkCalloutsPlugin } from './callouts.js';
+import { inlineHighlight } from './inline-highlight.js';
+import { comments, remarkCommentsPlugin } from './comments.js';
 import { gfmTableFromMarkdown, gfmTableToMarkdown } from 'mdast-util-gfm-table';
 import { gfmTable } from 'micromark-extension-gfm-table';
 import { defaultHandlers, } from 'mdast-util-to-markdown';
@@ -63,7 +67,6 @@ const link = (node, parent, state, info) => writesBare(node, parent)
 link.peek = (node, parent, state) => writesBare(node, parent)
     ? node.url[0]
     : defaultHandlers.link.peek(node, parent, state);
-// Footnotes remain literal until the editor supports editing their definitions.
 function remarkDialect() {
     const data = this.data();
     const add = (key, value) => {
@@ -85,7 +88,7 @@ function remarkDialect() {
     add('toMarkdownExtensions', { handlers: { link } });
 }
 export const remarkDialectPlugin = $remark('remarkDialect', () => remarkDialect);
-// Keep authored spacer paragraphs; references remain literal instead of becoming inline links.
+// Reference links retain their authored form instead of expanding to inline links.
 const commonmarkWithLiteralReferences = commonmark.filter((plugin) => !remarkInlineLinkPlugin.includes(plugin));
 // The preset drops the final empty paragraph, which makes trailing spacers shrink on each reload.
 const preserveSpacerParagraphs = paragraphSchema.extendSchema((base) => (ctx) => {
@@ -251,9 +254,16 @@ export const tables = [
 ].flat();
 export function createDialect(images) {
     return [
+        remarkReferencesPlugin,
+        remarkCalloutsPlugin,
+        remarkCommentsPlugin,
         // Protect unsupported inline HTML before the empty-line plugin consumes break nodes.
         createLiteralPreservation(images),
         commonmarkWithLiteralReferences,
+        references,
+        callouts,
+        comments,
+        inlineHighlight,
         preserveSpacerParagraphs,
         visibleSoftbreaks,
         normalizedImages,

package/dist/editor.d.ts

@@ -1,6 +1,6 @@
 import { type TableCommand } from './tables.js';
 import { type DocumentInput, type DocumentSnapshot, type ImageAdapter, type ClipboardInput, type ClipboardOutput } from './types.js';
-export type Mark = 'bold' | 'italic' | 'strikethrough' | 'code' | 'link';
+export type Mark = 'bold' | 'italic' | 'strikethrough' | 'highlight' | 'code' | 'link';
 export type Block = {
     type: 'paragraph';
 } | {
@@ -21,7 +21,7 @@ export interface CaretState {
     /** One quote holds the whole selection; the block is what sits inside it. */
     quoted: boolean;
 }
-export type FormatCommand = 'heading' | 'paragraph' | 'bold' | 'italic' | 'strikethrough' | 'code' | 'codeBlock' | 'quote' | 'bulletList' | 'orderedList' | 'taskList' | 'link';
+export type FormatCommand = 'heading' | 'paragraph' | 'bold' | 'italic' | 'strikethrough' | 'highlight' | 'code' | 'codeBlock' | 'quote' | 'bulletList' | 'orderedList' | 'taskList' | 'link';
 /** The bindings the app sets, by shortcut name; each runs a format command. */
 export type Keymap = Record<string, string[]>;
 export interface EditorEvents {
@@ -52,6 +52,7 @@ export declare class InkKitEditor {
     private plain;
     private root;
     private clickHandler?;
+    private footnoteKeyHandler?;
     private copyHandler?;
     private originalSource;
     private generation;
@@ -66,6 +67,7 @@ export declare class InkKitEditor {
     snapshot(expectedGeneration?: number): DocumentSnapshot;
     clipboardSnapshot(all?: boolean): Promise<ClipboardOutput>;
     paste(input: ClipboardInput): Promise<void>;
+    setCommentsVisible(visible: boolean): void;
     pasteAsPlainText(text: string): void;
     table(command: TableCommand, options?: {
         rows?: number;
@@ -103,4 +105,7 @@ export declare class InkKitEditor {
     private quote;
     private unquote;
     format(command: FormatCommand, arg?: string | number): void;
+    editReferenceDefinition(label: string, destination: string, title?: string): boolean;
+    insertFootnote(label?: string): void;
+    navigateFootnote(target: 'definition' | 'reference'): boolean;
 }