@aicayzer/inkkit 0.0.2 → 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

@@ -5,6 +5,9 @@ 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';
@@ -252,10 +255,15 @@ export const tables = [
 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 {
@@ -67,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;

package/dist/editor.js

@@ -20,6 +20,8 @@ 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';
@@ -32,6 +34,7 @@ const shortcutCommands = {
     bold: ['bold'],
     italic: ['italic'],
     strikethrough: ['strikethrough'],
+    highlight: ['highlight'],
     code: ['code'],
     codeBlock: ['codeBlock'],
     quote: ['quote'],
@@ -43,6 +46,7 @@ const markNames = {
     strong: 'bold',
     emphasis: 'italic',
     strike_through: 'strikethrough',
+    highlight: 'highlight',
     inlineCode: 'code',
     link: 'link',
 };
@@ -341,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;
@@ -375,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') {
@@ -485,6 +495,7 @@ export class InkKitEditor {
             unbind(emphasisKeymap);
             unbind(inlineCodeKeymap);
             unbind(strikethroughKeymap);
+            unbind(highlightKeymap);
             unbind(headingKeymap, ['DowngradeHeading']);
             unbind(paragraphKeymap);
             unbind(blockquoteKeymap);
@@ -580,7 +591,7 @@ 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;
             expanded.descendants((node) => {
@@ -1011,6 +1022,9 @@ export class InkKitEditor {
             case 'strikethrough':
                 run(toggleStrikethroughCommand.key);
                 break;
+            case 'highlight':
+                run(toggleHighlightCommand.key);
+                break;
             case 'code':
                 this.toggleInlineCode();
                 break;

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)[];