@aicayzer/inkkit 0.0.2 → 0.0.3

package/README.md

@@ -33,10 +33,10 @@ editor.loadDocument({
 const snapshot = editor.snapshot(1)
 ```
 
-Markdown includes CommonMark, task lists, strikethrough, autolinks, GFM tables, editable footnotes and reference-style links. Unsupported constructs remain literal Markdown. TXT mode treats all text literally. Images require a host adapter. RTF files remain outside the package scope.
+Markdown includes CommonMark, task lists, strikethrough, autolinks, GFM tables, editable footnotes and reference-style links, bounded callouts, highlights and author comments. Unsupported constructs remain literal Markdown. TXT mode treats all text literally. Images require a host adapter. RTF files remain outside the package scope.
 
-See [the host API](docs/api.md), [preservation and clipboard behavior](docs/preservation.md), [development](docs/development.md), and [releases](docs/releasing.md).
+See [supported syntax](docs/supported-syntax.md), [the host API](docs/api.md), [preservation and clipboard behavior](docs/preservation.md), [development](docs/development.md), and [releases](docs/releasing.md).
 
-Planned work and release scope are tracked in the [InkKit Project](https://github.com/users/aicayzer/projects/3) and [milestones](https://github.com/aicayzer/inkkit/milestones). Releases 0.0.2 and 0.0.3 are authorised for sequential delivery; targets from 0.0.4 remain provisional.
+Planned work and release scope are tracked in the [InkKit Project](https://github.com/users/aicayzer/projects/3) and [milestones](https://github.com/aicayzer/inkkit/milestones). Release 0.0.2 is published and verified; 0.0.3 delivery is authorised. Targets from 0.0.4 remain provisional.
 
 MIT licensed. InkKit builds on the public PadPad and Memos editors; see [NOTICE](NOTICE).

package/dist/callouts.d.ts

@@ -0,0 +1,24 @@
+import type { Parent, RootContent } from 'mdast';
+interface Callout extends Parent {
+    type: 'inkkitCallout';
+    kind: string;
+    marker: string;
+    fold: string;
+    title: string;
+    titleSource: string;
+    listPlaceholder: boolean;
+    children: RootContent[];
+}
+declare module 'mdast' {
+    interface BlockContentMap {
+        inkkitCallout: Callout;
+    }
+    interface RootContentMap {
+        inkkitCallout: Callout;
+    }
+}
+export declare const remarkCalloutsPlugin: import("@milkdown/kit/utils").$Remark<"inkkitCallouts", unknown>;
+export declare const calloutSchema: import("@milkdown/kit/utils").$Node;
+export declare const calloutView: import("@milkdown/kit/utils").$Prose;
+export declare const callouts: (import("@milkdown/kit/utils").$Node | import("@milkdown/kit/utils").$Prose)[];
+export {};

package/dist/callouts.js

@@ -0,0 +1,296 @@
+import { $node, $prose, $remark } from '@milkdown/kit/utils';
+import { remarkCtx } from '@milkdown/kit/core';
+import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
+import { defaultHandlers } from 'mdast-util-to-markdown';
+const kinds = new Set(['NOTE', 'TIP', 'IMPORTANT', 'WARNING', 'CAUTION']);
+function plainHeader(processor, source) {
+    const node = processor.parse(source).children[0];
+    return node?.type === 'paragraph' &&
+        node.children.length === 1 &&
+        node.children[0]?.type === 'text'
+        ? node.children[0].value
+        : undefined;
+}
+const calloutHandler = (untyped, parent, state, info) => {
+    const node = untyped;
+    const body = defaultHandlers.blockquote({ type: 'blockquote', children: node.children }, parent, state, info);
+    const title = node.titleSource ?? node.title;
+    return `> ${node.marker}${node.fold}${title ? ` ${title}` : ''}\n${body}`;
+};
+function remarkCallouts() {
+    const processor = this;
+    const data = this.data();
+    (data.toMarkdownExtensions ??= []).push({
+        handlers: { inkkitCallout: calloutHandler },
+    });
+    return (tree, file) => {
+        const source = String(file.value).replace(/^\uFEFF/, '');
+        const visit = (node, parent, index) => {
+            if (node.type === 'blockquote') {
+                const start = node.position?.start.offset, end = node.position?.end.offset;
+                const raw = start == null || end == null ? '' : source.slice(start, end);
+                const header = /^>[ \t]*([\s\S]*?)(?:\r?\n|$)/.exec(raw)?.[1] ?? '';
+                if (header.startsWith('[!')) {
+                    const match = /^(\[!([A-Za-z]+)\])([+-]?)(?:[ \t]+([^\r\n]*))?$/.exec(header);
+                    const first = node.children[0];
+                    const decodedHeader = plainHeader(processor, header);
+                    // A bounded header occupies one unformatted line; other variants stay source.
+                    if (!match ||
+                        decodedHeader == null ||
+                        !kinds.has(match[2].toUpperCase()) ||
+                        /^[+-](?:[ \t]|[+-])/.test(match[4] ?? '') ||
+                        first?.type !== 'paragraph' ||
+                        first.children[0]?.type !== 'text')
+                        return {
+                            type: 'inkkitLiteral',
+                            value: raw,
+                            position: node.position,
+                        };
+                    const text = first.children[0];
+                    // Entities can decode to newlines without ending the authored header line.
+                    const ending = /^\r?\n/.exec(text.value.slice(decodedHeader.length));
+                    const lineEnd = ending ? decodedHeader.length : -1;
+                    if (lineEnd < 0 && first.children.length > 1)
+                        return {
+                            type: 'inkkitLiteral',
+                            value: raw,
+                            position: node.position,
+                        };
+                    const children = [...node.children];
+                    if (lineEnd >= 0) {
+                        const remaining = text.value.slice(lineEnd + ending[0].length);
+                        const firstStart = text.position?.start.offset;
+                        const token = firstStart == null
+                            ? ''
+                            : source.slice(firstStart, text.position?.end.offset);
+                        const boundary = /\r?\n[ \t]*>[ \t]?/.exec(token);
+                        const bodyStart = firstStart == null || !boundary
+                            ? undefined
+                            : firstStart + boundary.index + boundary[0].length;
+                        const point = bodyStart == null
+                            ? undefined
+                            : {
+                                line: source.slice(0, bodyStart).split('\n').length,
+                                column: bodyStart - source.lastIndexOf('\n', bodyStart - 1),
+                                offset: bodyStart,
+                            };
+                        children[0] = {
+                            ...first,
+                            children: [
+                                ...(remaining
+                                    ? [
+                                        {
+                                            ...text,
+                                            value: remaining,
+                                            position: point && text.position
+                                                ? { start: point, end: text.position.end }
+                                                : undefined,
+                                        },
+                                    ]
+                                    : []),
+                                ...first.children.slice(1),
+                            ],
+                        };
+                    }
+                    else
+                        children.shift();
+                    if (!children.length)
+                        children.push({ type: 'paragraph', children: [] });
+                    return {
+                        type: 'inkkitCallout',
+                        kind: match[2].toUpperCase(),
+                        marker: match[1],
+                        fold: match[3],
+                        title: decodedHeader
+                            .slice(header.length - (match[4]?.length ?? 0))
+                            .trimEnd(),
+                        titleSource: match[4]?.trimEnd() ?? '',
+                        listPlaceholder: parent?.type === 'listItem' && index === 0,
+                        children: children.map((child) => visit(child)),
+                        position: node.position,
+                    };
+                }
+            }
+            if ('children' in node)
+                node.children = node.children.map((child, index) => visit(child, node, index));
+            return node;
+        };
+        tree.children = tree.children.map((node) => visit(node));
+    };
+}
+export const remarkCalloutsPlugin = $remark('inkkitCallouts', () => remarkCallouts);
+export const calloutSchema = $node('inkkit_callout', (ctx) => ({
+    group: 'block',
+    content: 'block+',
+    defining: true,
+    attrs: {
+        kind: { default: 'NOTE' },
+        marker: { default: '[!NOTE]' },
+        fold: { default: '' },
+        title: { default: '' },
+        titleSource: { default: null },
+        listPlaceholder: { default: false },
+    },
+    parseDOM: [
+        {
+            tag: 'blockquote[data-inkkit-callout]',
+            priority: 100,
+            contentElement: '.inkkit-callout-body',
+            getAttrs: (dom) => {
+                const kind = (dom.getAttribute('data-inkkit-callout') ?? '').toUpperCase();
+                const marker = dom.getAttribute('data-inkkit-marker') ?? `[!${kind}]`;
+                const fold = dom.getAttribute('data-inkkit-fold') ?? '';
+                const titleSource = dom.getAttribute('data-inkkit-title');
+                const placeholder = dom.getAttribute('data-inkkit-list-placeholder');
+                const previous = dom.previousElementSibling;
+                const titleHeader = titleSource == null
+                    ? undefined
+                    : plainHeader(ctx.get(remarkCtx), `${marker} ${titleSource}`);
+                if (!kinds.has(kind) ||
+                    !/^\[![A-Za-z]+\]$/.test(marker) ||
+                    marker.slice(2, -1).toUpperCase() !== kind ||
+                    !['', '+', '-'].includes(fold) ||
+                    (titleSource != null &&
+                        (/[\r\n]/.test(titleSource) || titleHeader == null)))
+                    return false;
+                return {
+                    kind,
+                    marker,
+                    fold,
+                    title: titleHeader == null
+                        ? (dom.querySelector('.inkkit-callout-title')?.textContent ?? '')
+                        : titleHeader.slice(marker.length + 1).trimEnd(),
+                    titleSource,
+                    listPlaceholder: placeholder == null
+                        ? dom.parentElement?.tagName === 'LI' &&
+                            (!previous ||
+                                (previous.tagName === 'P' &&
+                                    !previous.textContent &&
+                                    !previous.childElementCount))
+                        : placeholder === 'true',
+                };
+            },
+        },
+    ],
+    toDOM: (node) => [
+        'blockquote',
+        {
+            class: 'inkkit-callout',
+            'data-inkkit-callout': node.attrs.kind,
+            'data-inkkit-marker': node.attrs.marker,
+            'data-inkkit-fold': node.attrs.fold,
+            'data-inkkit-title': node.attrs.titleSource ?? node.attrs.title,
+            'data-inkkit-list-placeholder': String(node.attrs.listPlaceholder),
+        },
+        [
+            'strong',
+            { class: 'inkkit-callout-title' },
+            node.attrs.title ||
+                String(node.attrs.kind)
+                    .toLowerCase()
+                    .replace(/^./, (letter) => letter.toUpperCase()),
+        ],
+        ['div', { class: 'inkkit-callout-body' }, 0],
+    ],
+    parseMarkdown: {
+        match: (node) => node.type === 'inkkitCallout',
+        runner(state, node, type) {
+            state.openNode(type, {
+                kind: node.kind,
+                marker: node.marker,
+                fold: node.fold,
+                title: node.title,
+                titleSource: node.titleSource,
+                listPlaceholder: node.listPlaceholder,
+            });
+            state.next(node.children);
+            state.closeNode();
+        },
+    },
+    toMarkdown: {
+        match: (node) => node.type.name === 'inkkit_callout',
+        runner(state, node) {
+            const parent = state.top();
+            const first = parent?.children?.[0];
+            // Lists require a leading paragraph even when their authored first block is a callout.
+            if (node.attrs.listPlaceholder &&
+                parent?.type === 'listItem' &&
+                parent.children?.length === 1 &&
+                first?.type === 'paragraph' &&
+                first.children?.length === 1 &&
+                first.children[0]?.type === 'html' &&
+                first.children[0].value === '<br />')
+                parent.children = [];
+            state.openNode('inkkitCallout', undefined, { ...node.attrs });
+            state.next(node.content);
+            state.closeNode();
+        },
+    },
+}));
+export const calloutView = $prose(() => new Plugin({
+    key: new PluginKey('inkkitCalloutView'),
+    props: {
+        nodeViews: {
+            inkkit_callout(node) {
+                const dom = document.createElement('blockquote');
+                dom.className = 'inkkit-callout';
+                dom.setAttribute('data-inkkit-callout', String(node.attrs.kind));
+                const header = document.createElement('div');
+                header.className = 'inkkit-callout-header';
+                header.contentEditable = 'false';
+                const title = document.createElement('strong');
+                title.className = 'inkkit-callout-title';
+                const contentDOM = document.createElement('div');
+                contentDOM.className = 'inkkit-callout-body';
+                let folded = node.attrs.fold === '-';
+                const button = document.createElement('button');
+                button.type = 'button';
+                button.setAttribute('data-inkkit-callout-toggle', '');
+                const render = () => {
+                    title.textContent =
+                        node.attrs.title ||
+                            String(node.attrs.kind)
+                                .toLowerCase()
+                                .replace(/^./, (letter) => letter.toUpperCase());
+                    dom.setAttribute('data-inkkit-folded', String(folded));
+                    button.hidden = !node.attrs.fold;
+                    button.setAttribute('aria-expanded', String(!folded));
+                    button.setAttribute('aria-label', `${folded ? 'Expand' : 'Collapse'} ${title.textContent}`);
+                    button.textContent = folded ? 'Expand' : 'Collapse';
+                };
+                const toggle = () => {
+                    folded = !folded;
+                    render();
+                };
+                button.addEventListener('click', toggle);
+                button.addEventListener('keydown', (event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        toggle();
+                    }
+                });
+                header.append(title, button);
+                dom.append(header, contentDOM);
+                render();
+                return {
+                    dom,
+                    contentDOM,
+                    update(next) {
+                        if (next.type !== node.type)
+                            return false;
+                        if (next.attrs.fold !== node.attrs.fold)
+                            folded = next.attrs.fold === '-';
+                        node = next;
+                        render();
+                        return true;
+                    },
+                    stopEvent: (event) => header.contains(event.target),
+                    ignoreMutation: (mutation) => mutation.type !== 'selection' &&
+                        !contentDOM.contains(mutation.target),
+                };
+            },
+        },
+    },
+}));
+export const callouts = [calloutSchema, calloutView].flat();

package/dist/clipboard.js

@@ -1,9 +1,11 @@
 import { DOMSerializer, } from '@milkdown/kit/prose/model';
 import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
 import { $prose } from '@milkdown/kit/utils';
+import { shareableFragment } from './comments.js';
 // Clipboard text is the visible document, not Markdown serialization: escaping
 // punctuation or trailing spaces here leaks source syntax into other apps.
 export function clipboardText(content, missingImages = new Set()) {
+    content = shareableFragment(content);
     const blocks = [];
     content.forEach((node) => {
         if (node.type.name !== 'reference_definition')
@@ -13,6 +15,11 @@ export function clipboardText(content, missingImages = new Set()) {
     return blocks.join(inline ? '' : '\n\n');
 }
 function nodeText(node, missingImages) {
+    if (node.type.name === 'inkkit_callout')
+        return `${node.attrs.title ||
+            String(node.attrs.kind)
+                .toLowerCase()
+                .replace(/^./, (letter) => letter.toUpperCase())}\n${clipboardText(node.content, missingImages)}`;
     if (node.type.name === 'reference_definition')
         return '';
     if (node.type.name === 'footnote_reference')
@@ -67,6 +74,7 @@ function nodeText(node, missingImages) {
     return clipboardText(node.content, missingImages);
 }
 export function clipboardContent(content, schema) {
+    content = shareableFragment(content);
     const container = document.createElement('div');
     const serializer = DOMSerializer.fromSchema(schema);
     // Construct image elements without a source so detached clipboard DOM never
@@ -103,6 +111,7 @@ export const visibleClipboard = $prose(() => new Plugin({
 }));
 /** Export a frozen document fragment; presentation URLs never enter the clipboard. */
 export async function portableClipboard(content, schema, markdown, adapter, context) {
+    content = shareableFragment(content);
     const base = clipboardContent(content, schema);
     const container = document.createElement('div');
     container.innerHTML = base.html;

package/dist/comments.d.ts

@@ -0,0 +1,55 @@
+import { Fragment, type Node as ProseNode } from '@milkdown/kit/prose/model';
+import type { EditorView } from '@milkdown/kit/prose/view';
+import type { Literal } from 'mdast';
+export type CommentSyntax = 'html' | 'obsidian';
+interface Comment extends Literal {
+    type: 'inkkitCommentInline' | 'inkkitCommentBlock';
+    syntax: CommentSyntax;
+    block?: boolean;
+}
+declare module 'mdast' {
+    interface PhrasingContentMap {
+        inkkitCommentInline: Comment & {
+            type: 'inkkitCommentInline';
+        };
+    }
+    interface BlockContentMap {
+        inkkitCommentBlock: Comment & {
+            type: 'inkkitCommentBlock';
+        };
+    }
+    interface RootContentMap {
+        inkkitCommentInline: Comment & {
+            type: 'inkkitCommentInline';
+        };
+        inkkitCommentBlock: Comment & {
+            type: 'inkkitCommentBlock';
+        };
+    }
+}
+declare module 'micromark-util-types' {
+    interface TokenTypeMap {
+        inkkitCommentInline: 'inkkitCommentInline';
+        inkkitCommentBlock: 'inkkitCommentBlock';
+        inkkitCommentData: 'inkkitCommentData';
+    }
+}
+export declare function commentSource(node: ProseNode): string;
+export interface CommentSpan {
+    start: number;
+    end: number;
+    syntax: CommentSyntax;
+    value: string;
+    block?: boolean;
+}
+export declare function literalCommentSpans(value: string): CommentSpan[];
+export declare const remarkCommentsPlugin: import("@milkdown/kit/utils").$Remark<"remarkComments", unknown>;
+export declare const commentInline: import("@milkdown/kit/utils").$Node;
+export declare const commentBlock: import("@milkdown/kit/utils").$Node;
+export declare const commentVisibility: import("@milkdown/kit/utils").$Prose;
+export declare function setCommentVisibility(view: EditorView, visible: boolean): void;
+export declare const comments: (import("@milkdown/kit/utils").$Node | import("@milkdown/kit/utils").$Prose)[];
+export declare function isComment(node: ProseNode): boolean;
+export declare function shareableFragment(content: Fragment): Fragment;
+export declare function commentSelectionContent(doc: ProseNode, from: number, to: number, content: Fragment): Fragment;
+export {};