@aicayzer/inkkit 0.0.1 → 0.0.3

package/dist/references.js

@@ -0,0 +1,367 @@
+import { $node, $remark, $prose } from '@milkdown/kit/utils';
+import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
+import { linkSchema } from '@milkdown/kit/preset/commonmark';
+import { normalizeIdentifier } from 'micromark-util-normalize-identifier';
+import { gfmFootnote } from 'micromark-extension-gfm-footnote';
+import { gfmFootnoteFromMarkdown, gfmFootnoteToMarkdown, } from 'mdast-util-gfm-footnote';
+import { defaultHandlers } from 'mdast-util-to-markdown';
+export function normaliseLabel(label) {
+    return normalizeIdentifier(label).toLowerCase();
+}
+function definitions(doc, type) {
+    const found = new Map();
+    doc.descendants((node, pos) => {
+        if (node.type.name !== type)
+            return true;
+        const identifier = normaliseLabel(String(node.attrs.identifier));
+        if (!found.has(identifier))
+            found.set(identifier, { node, pos });
+        return false;
+    });
+    return found;
+}
+export const referenceDefinitions = (doc) => definitions(doc, 'reference_definition');
+export const footnoteDefinitions = (doc) => definitions(doc, 'footnote_definition');
+function contentShape(value) {
+    const clean = (value) => {
+        if (Array.isArray(value))
+            return value.map(clean);
+        if (value && typeof value === 'object')
+            return Object.fromEntries(Object.entries(value)
+                .filter(([key]) => !['position', 'data', 'marker', 'isMark'].includes(key))
+                .sort(([left], [right]) => left.localeCompare(right))
+                .map(([key, value]) => [key, clean(value)]));
+        return value;
+    };
+    return JSON.stringify(clean(value));
+}
+const labelPlaceholder = 'inkkit-authored-label';
+const authoredLinkReference = (untyped, parent, state, info) => {
+    const node = untyped;
+    const full = defaultHandlers.linkReference({
+        ...node,
+        label: labelPlaceholder,
+        identifier: labelPlaceholder,
+        referenceType: 'full',
+    }, parent, state, info);
+    const display = full.slice(1, -labelPlaceholder.length - 3);
+    const unchanged = node.referenceContent != null &&
+        node.referenceContent === contentShape(node.children);
+    if (node.referenceType !== 'full' &&
+        (unchanged || normaliseLabel(display) === normaliseLabel(node.identifier)))
+        return `[${unchanged ? node.label : display}]${node.referenceType === 'collapsed' ? '[]' : ''}`;
+    // Raw entity and escape spelling participates in reference matching.
+    return (full.slice(0, -labelPlaceholder.length - 2) +
+        `[${node.label ?? node.identifier}]`);
+};
+authoredLinkReference.peek = () => '[';
+const authoredDefinition = (node, parent, state, info) => defaultHandlers
+    .definition({ ...node, label: labelPlaceholder, identifier: labelPlaceholder }, parent, state, info)
+    .replace(`[${labelPlaceholder}]:`, `[${String(node.label ?? node.identifier)}]:`);
+const footnoteHandlers = gfmFootnoteToMarkdown().handlers;
+const authoredFootnoteReference = (node) => `[^${String(node.label ?? node.identifier)}]`;
+authoredFootnoteReference.peek = () => '[';
+const authoredFootnoteDefinition = (node, parent, state, info) => footnoteHandlers.footnoteDefinition({ ...node, label: labelPlaceholder, identifier: labelPlaceholder }, parent, state, info).replace(`[^${labelPlaceholder}]:`, `[^${String(node.label ?? node.identifier)}]:`);
+function remarkReferences() {
+    const data = this.data();
+    (data.micromarkExtensions ??= []).push(gfmFootnote());
+    (data.fromMarkdownExtensions ??= []).push(gfmFootnoteFromMarkdown());
+    (data.toMarkdownExtensions ??= []).push(gfmFootnoteToMarkdown());
+    (data.toMarkdownExtensions ??= []).push({
+        handlers: {
+            linkReference: authoredLinkReference,
+            definition: authoredDefinition,
+            footnoteReference: authoredFootnoteReference,
+            footnoteDefinition: authoredFootnoteDefinition,
+        },
+    });
+    return (tree, file) => {
+        const source = String(file.value).replace(/^\uFEFF/, '');
+        const targets = new Map();
+        const walk = (node, visit) => {
+            visit(node);
+            if ('children' in node)
+                node.children.forEach((child) => walk(child, visit));
+        };
+        walk(tree, (node) => {
+            const start = node.position?.start.offset;
+            const end = node.position?.end.offset;
+            if (start != null && end != null) {
+                const raw = source.slice(start, end);
+                if (node.type === 'definition' || node.type === 'footnoteDefinition') {
+                    const label = /^\[((?:\\[\s\S]|[^\\[\]])*)\]:/.exec(raw)?.[1];
+                    if (label != null)
+                        node.label =
+                            node.type === 'footnoteDefinition' ? label.slice(1) : label;
+                }
+                else if (node.type === 'footnoteReference')
+                    node.label = raw.slice(2, -1);
+                else if (node.type === 'linkReference') {
+                    const label = node.referenceType === 'full'
+                        ? /\[((?:\\[\s\S]|[^\\[\]])*)\]$/.exec(raw)?.[1]
+                        : raw.slice(1, node.referenceType === 'collapsed' ? -3 : -1);
+                    if (label != null)
+                        node.label = label;
+                    Object.assign(node, { referenceContent: contentShape(node.children) });
+                }
+            }
+            if (node.type === 'definition' && !targets.has(node.identifier))
+                targets.set(node.identifier, { url: node.url, title: node.title });
+        });
+        walk(tree, (node) => {
+            if (node.type !== 'linkReference')
+                return;
+            const target = targets.get(node.identifier);
+            if (target)
+                Object.assign(node, target);
+        });
+    };
+}
+export const remarkReferencesPlugin = $remark('inkkitReferences', () => remarkReferences);
+export const referenceLinks = linkSchema.extendSchema((base) => (ctx) => {
+    const schema = base(ctx);
+    return {
+        ...schema,
+        // Label formatting belongs inside a reference, where its source determines the identifier.
+        priority: 40,
+        attrs: {
+            ...schema.attrs,
+            label: { default: null },
+            identifier: { default: null },
+            referenceType: { default: null },
+            referenceContent: { default: null },
+        },
+        parseDOM: [
+            {
+                tag: 'a[href]',
+                getAttrs(dom) {
+                    const element = dom;
+                    return {
+                        href: element.getAttribute('href') ?? '',
+                        title: element.getAttribute('title'),
+                        label: element.getAttribute('data-inkkit-label'),
+                        identifier: element.getAttribute('data-inkkit-reference'),
+                        referenceType: element.getAttribute('data-inkkit-reference-type'),
+                        referenceContent: element.getAttribute('data-inkkit-reference-content'),
+                    };
+                },
+            },
+        ],
+        toDOM(mark) {
+            const dom = schema.toDOM(mark, false);
+            const attrs = { ...dom[1] };
+            delete attrs.label;
+            delete attrs.identifier;
+            delete attrs.referenceType;
+            delete attrs.referenceContent;
+            if (mark.attrs.identifier != null) {
+                attrs['data-inkkit-reference'] = mark.attrs.identifier;
+                attrs['data-inkkit-label'] = mark.attrs.label;
+                attrs['data-inkkit-reference-type'] = mark.attrs.referenceType;
+                attrs['data-inkkit-reference-content'] = mark.attrs.referenceContent;
+            }
+            return ['a', attrs];
+        },
+        parseMarkdown: {
+            match: (node) => node.type === 'link' || node.type === 'linkReference',
+            runner(state, node, type) {
+                if (node.type === 'link')
+                    return schema.parseMarkdown.runner(state, node, type);
+                state.openMark(type, {
+                    href: String(node.url ?? ''),
+                    title: node.title ?? null,
+                    label: String(node.label ?? node.identifier),
+                    identifier: String(node.identifier),
+                    referenceType: String(node.referenceType),
+                    referenceContent: node.referenceContent ?? null,
+                });
+                state.next(node.children);
+                state.closeMark(type);
+            },
+        },
+        toMarkdown: {
+            ...schema.toMarkdown,
+            runner(state, mark, node) {
+                if (mark.attrs.identifier == null)
+                    return schema.toMarkdown.runner(state, mark, node);
+                state.withMark(mark, 'linkReference', undefined, {
+                    identifier: mark.attrs.identifier,
+                    label: mark.attrs.label,
+                    referenceType: mark.attrs.referenceType,
+                    referenceContent: mark.attrs.referenceContent,
+                });
+            },
+        },
+    };
+});
+const associationAttrs = {
+    label: { default: '' },
+    identifier: { default: '' },
+};
+export const referenceDefinition = $node('reference_definition', () => ({
+    group: 'block',
+    atom: true,
+    defining: true,
+    attrs: {
+        ...associationAttrs,
+        url: { default: '' },
+        title: { default: null },
+    },
+    parseDOM: [
+        {
+            tag: '[data-inkkit-reference-definition]',
+            getAttrs: (dom) => ({
+                label: dom.getAttribute('data-inkkit-label') ?? '',
+                identifier: dom.getAttribute('data-inkkit-reference-definition') ?? '',
+                url: dom.getAttribute('data-inkkit-url') ?? '',
+                title: dom.getAttribute('data-inkkit-title'),
+            }),
+        },
+    ],
+    toDOM: (node) => [
+        'div',
+        {
+            class: 'inkkit-reference-definition',
+            'data-inkkit-reference-definition': node.attrs.identifier,
+            'data-inkkit-label': node.attrs.label,
+            'data-inkkit-url': node.attrs.url,
+            'data-inkkit-title': node.attrs.title,
+        },
+        `[${node.attrs.label}]: ${node.attrs.url}${node.attrs.title ? ` "${node.attrs.title}"` : ''}`,
+    ],
+    parseMarkdown: {
+        match: (node) => node.type === 'definition',
+        runner(state, node, type) {
+            state.addNode(type, {
+                label: String(node.label ?? node.identifier),
+                identifier: String(node.identifier),
+                url: String(node.url),
+                title: node.title ?? null,
+            });
+        },
+    },
+    toMarkdown: {
+        match: (node) => node.type.name === 'reference_definition',
+        runner: (state, node) => {
+            state.addNode('definition', undefined, undefined, { ...node.attrs });
+        },
+    },
+}));
+export const footnoteReference = $node('footnote_reference', () => ({
+    inline: true,
+    group: 'inline',
+    atom: true,
+    selectable: true,
+    attrs: associationAttrs,
+    parseDOM: [
+        {
+            tag: 'sup[data-inkkit-footnote-reference]',
+            getAttrs: (dom) => ({
+                label: dom.getAttribute('data-inkkit-label') ?? '',
+                identifier: dom.getAttribute('data-inkkit-footnote-reference') ?? '',
+            }),
+        },
+    ],
+    toDOM: (node) => [
+        'sup',
+        {
+            class: 'inkkit-footnote-reference',
+            tabindex: '0',
+            role: 'button',
+            'aria-label': `Footnote ${node.attrs.label}`,
+            'data-inkkit-footnote-reference': node.attrs.identifier,
+            'data-inkkit-label': node.attrs.label,
+        },
+        String(node.attrs.label),
+    ],
+    parseMarkdown: {
+        match: (node) => node.type === 'footnoteReference',
+        runner(state, node, type) {
+            state.addNode(type, {
+                label: String(node.label ?? node.identifier),
+                identifier: String(node.identifier),
+            });
+        },
+    },
+    toMarkdown: {
+        match: (node) => node.type.name === 'footnote_reference',
+        runner: (state, node) => {
+            state.addNode('footnoteReference', undefined, undefined, {
+                ...node.attrs,
+            });
+        },
+    },
+}));
+export const footnoteDefinition = $node('footnote_definition', () => ({
+    group: 'block',
+    content: 'block+',
+    defining: true,
+    attrs: associationAttrs,
+    parseDOM: [
+        {
+            tag: '[data-inkkit-footnote-definition]',
+            getAttrs: (dom) => ({
+                label: dom.getAttribute('data-inkkit-label') ?? '',
+                identifier: dom.getAttribute('data-inkkit-footnote-definition') ?? '',
+            }),
+        },
+    ],
+    toDOM: (node) => [
+        'div',
+        {
+            class: 'inkkit-footnote-definition',
+            'aria-label': `Footnote ${node.attrs.label}`,
+            'data-inkkit-footnote-definition': node.attrs.identifier,
+            'data-inkkit-label': node.attrs.label,
+        },
+        0,
+    ],
+    parseMarkdown: {
+        match: (node) => node.type === 'footnoteDefinition',
+        runner(state, node, type) {
+            state.openNode(type, {
+                label: String(node.label ?? node.identifier),
+                identifier: String(node.identifier),
+            });
+            state.next(node.children);
+            state.closeNode();
+        },
+    },
+    toMarkdown: {
+        match: (node) => node.type.name === 'footnote_definition',
+        runner(state, node) {
+            state.openNode('footnoteDefinition', undefined, { ...node.attrs });
+            state.next(node.content);
+            state.closeNode();
+        },
+    },
+}));
+const resolvedReferenceTargets = $prose(() => new Plugin({
+    key: new PluginKey('inkkitReferenceTargets'),
+    appendTransaction(transactions, _before, state) {
+        if (!transactions.some((transaction) => transaction.docChanged))
+            return null;
+        const targets = referenceDefinitions(state.doc);
+        const tr = state.tr;
+        state.doc.descendants((node, pos) => {
+            for (const mark of node.marks) {
+                if (mark.type.name !== 'link' || mark.attrs.identifier == null)
+                    continue;
+                const target = targets.get(normaliseLabel(String(mark.attrs.identifier)))?.node;
+                const href = String(target?.attrs.url ?? '');
+                const title = target?.attrs.title ?? null;
+                if (mark.attrs.href === href && mark.attrs.title === title)
+                    continue;
+                tr.addMark(pos, pos + node.nodeSize, mark.type.create({ ...mark.attrs, href, title }));
+            }
+        });
+        return tr.docChanged ? tr.setMeta('addToHistory', false) : null;
+    },
+}));
+export const references = [
+    referenceLinks,
+    referenceDefinition,
+    footnoteReference,
+    footnoteDefinition,
+    resolvedReferenceTargets,
+].flat();

package/dist/style.css

@@ -535,3 +535,120 @@ body {
   font-family: var(--mono);
   font-size: 0.9rem;
 }
+
+.inkkit-footnote-reference {
+  cursor: pointer;
+  color: var(--accent, currentColor);
+  font-size: 0.75em;
+}
+
+.inkkit-footnote-reference:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.inkkit-footnote-definition {
+  border-inline-start: 2px solid var(--muted, currentColor);
+  padding-inline-start: 1rem;
+}
+
+.inkkit-footnote-definition::before {
+  content: '[' attr(data-inkkit-label) ']';
+  font-size: 0.8em;
+}
+
+.inkkit-reference-definition {
+  font-family: ui-monospace, monospace;
+  font-size: 0.8em;
+  opacity: 0.7;
+}
+
+.ProseMirror mark {
+  background: color-mix(in srgb, #e5c041 38%, transparent);
+  color: inherit;
+}
+
+.ProseMirror .inkkit-callout {
+  --callout-color: var(--accent);
+  border-inline-start: 3px solid var(--callout-color);
+  padding: 0.65rem 1rem;
+  background: color-mix(in srgb, var(--callout-color) 7%, transparent);
+}
+
+.ProseMirror [data-inkkit-callout='TIP'] {
+  --callout-color: #30a46c;
+}
+.ProseMirror [data-inkkit-callout='IMPORTANT'] {
+  --callout-color: #8e4ec6;
+}
+.ProseMirror [data-inkkit-callout='WARNING'] {
+  --callout-color: #d28b00;
+}
+.ProseMirror [data-inkkit-callout='CAUTION'] {
+  --callout-color: #e5484d;
+}
+
+.inkkit-callout-header {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+}
+
+[data-inkkit-callout-toggle] {
+  color: var(--muted);
+  background: transparent;
+  border: 0;
+  padding: 0.25rem;
+  cursor: pointer;
+}
+
+.inkkit-callout[data-inkkit-folded='true'] > .inkkit-callout-body {
+  display: none;
+}
+
+.inkkit-comment {
+  display: none;
+}
+
+[data-inkkit-comments-visible='true'] .inkkit-comment {
+  display: inline;
+  white-space: pre-wrap;
+  font-family: var(--mono);
+  color: var(--muted);
+  background: var(--code-bg);
+}
+
+[data-inkkit-comments-visible='true'] .inkkit-comment-block {
+  display: block;
+  padding: 0.5rem;
+}
+
+@media print {
+  html,
+  body,
+  #editor,
+  .ProseMirror {
+    height: auto;
+    min-height: 0;
+    overflow: visible;
+  }
+
+  .milkdown-table-block .table-wrapper,
+  .ProseMirror pre {
+    overflow: visible;
+  }
+
+  .inkkit-comment,
+  [data-inkkit-comments-visible='true'] .inkkit-comment,
+  [data-inkkit-callout-toggle],
+  .ProseMirror pre .copy,
+  .milkdown-table-block .handle,
+  .milkdown-table-block .button-group,
+  .milkdown-table-block .line-handle {
+    display: none !important;
+  }
+
+  .inkkit-callout[data-inkkit-folded='true'] > .inkkit-callout-body {
+    display: block !important;
+  }
+}

package/dist/types.d.ts

@@ -41,6 +41,7 @@ export interface ImageAdapter {
 }
 export interface ClipboardInput {
     text: string;
+    markdown?: string;
     html?: string;
     images?: CapturedImage[];
     plainText?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aicayzer/inkkit",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A preserving Markdown editor for offline web views and the web",
   "license": "MIT",
   "type": "module",
@@ -47,20 +47,27 @@
   "dependencies": {
     "@milkdown/kit": "7.22.1",
     "lowlight": "^3.3.0",
+    "mdast-util-from-markdown": "^2.1.0",
     "mdast-util-gfm-autolink-literal": "^2.0.1",
+    "mdast-util-gfm-footnote": "^2.1.0",
     "mdast-util-gfm-strikethrough": "^2.0.0",
-    "mdast-util-gfm-task-list-item": "^2.0.0",
     "mdast-util-gfm-table": "^2.0.0",
+    "mdast-util-gfm-task-list-item": "^2.0.0",
+    "mdast-util-highlight-mark": "1.2.2",
     "mdast-util-to-markdown": "2.2.0",
     "micromark-extension-gfm-autolink-literal": "^2.1.0",
+    "micromark-extension-gfm-footnote": "^2.1.0",
     "micromark-extension-gfm-strikethrough": "^2.1.0",
-    "micromark-extension-gfm-task-list-item": "^2.1.0",
     "micromark-extension-gfm-table": "^2.1.1",
+    "micromark-extension-gfm-task-list-item": "^2.1.0",
+    "micromark-extension-highlight-mark": "1.2.0",
+    "micromark-util-normalize-identifier": "^2.0.1",
+    "micromark-util-types": "^2.0.3",
     "prosemirror-search": "^1.1.1"
   },
   "devDependencies": {
-    "@types/mdast": "^4.0.4",
     "@types/hast": "^3.0.5",
+    "@types/mdast": "^4.0.4",
     "@types/node": "^26.6.2",
     "jsdom": "^30.1.0",
     "prettier": "^3.9.8",