@aicayzer/inkkit 0.0.2 → 0.0.3

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

package/dist/literals.js

@@ -1,4 +1,5 @@
 import { $node, $remark } from '@milkdown/kit/utils';
+import { commentSource, literalCommentSpans, } from './comments.js';
 const unsupported = new Set(['html', 'image', 'imageReference']);
 function restoreInlineBreaks(node) {
     if ((node.type === 'paragraph' || node.type === 'heading') &&
@@ -68,7 +69,12 @@ export function createLiteralPreservation(images) {
             // 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, position: node.position };
+            return {
+                type: 'inkkitLiteral',
+                value: raw,
+                comments: literalCommentSpans(raw),
+                position: node.position,
+            };
         };
         const blocks = [];
         if (frontmatter)
@@ -105,6 +111,8 @@ export function createLiteralPreservation(images) {
                     });
                 continue;
             }
+            if (node.type === 'inkkitLiteral')
+                node.comments = literalCommentSpans(node.value);
             blocks.push(preserveBlock(node));
         }
         tree.children = blocks;
@@ -113,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,
@@ -129,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);
         },
     },
 }));

package/dist/paste.js

@@ -179,6 +179,7 @@ export class PasteController {
                     'H5',
                     'H6',
                     'STRONG',
+                    'MARK',
                     'B',
                     'EM',
                     'I',

package/dist/preserve.js

@@ -10,7 +10,7 @@ function ownShape(node) {
         ? undefined
         : value);
 }
-function retainText(raw, before, after) {
+function retainText(raw, before, after, quoteIndent = false) {
     before = before.replace(/\r\n?/g, '\n');
     after = after.replace(/\r\n?/g, '\n');
     let prefix = 0;
@@ -26,6 +26,14 @@ function retainText(raw, before, after) {
     const offsets = [0];
     let decoded = '';
     for (let index = 0; index < raw.length;) {
+        if (index > 0 && raw[index - 1] === '\n') {
+            const gutter = (quoteIndent ? /^(?:[ \t]*>[ \t]*)+/ : /^(?:[ \t]*>[ \t]?)+/).exec(raw.slice(index));
+            if (gutter) {
+                index += gutter[0].length;
+                offsets[offsets.length - 1] = index;
+                continue;
+            }
+        }
         const escaped = /^\\([!"#$%&'()*+,\-./:;<=>?@[\]\\^_`{|}~])/.exec(raw.slice(index));
         const entity = /^&(?:#[xX][\da-fA-F]+|#\d+|[A-Za-z][A-Za-z\d]+);/.exec(raw.slice(index));
         let value;
@@ -53,11 +61,22 @@ function retainText(raw, before, after) {
         for (let part = 0; part < value.length; part++)
             offsets.push(index);
     }
-    if (decoded !== before)
-        return after;
+    if (decoded !== before) {
+        // Continuation indentation is excluded from a quoted paragraph's text.
+        return quoteIndent ? after : retainText(raw, before, after, true);
+    }
     const inserted = after
         .slice(prefix, after.length - suffix)
-        .replace(/[\\`*_[\]<>]/g, '\\$&');
+        .split('')
+        .map((character, index) => {
+        const at = prefix + index;
+        const delimiter = (character === '%' || character === '=') &&
+            (after[at - 1] === character || after[at + 1] === character);
+        return delimiter || /[\\`*_[\]<>]/.test(character)
+            ? `\\${character}`
+            : character;
+    })
+        .join('');
     return (raw.slice(0, offsets[prefix]) +
         inserted +
         raw.slice(offsets[before.length - suffix]));
@@ -218,6 +237,7 @@ function semanticSignature(doc) {
     [
         'referenceContent',
         'referenceType',
+        'listPlaceholder',
         'marker',
         'id',
         'label',

package/dist/reference-clipboard.js

@@ -1,6 +1,7 @@
 import { Fragment } from '@milkdown/kit/prose/model';
 import { serialize } from './dialect.js';
 import { normaliseLabel } from './references.js';
+import { shareableFragment } from './comments.js';
 function key(node) {
     if (node.type.name === 'reference_definition')
         return `link:${node.attrs.identifier}`;
@@ -70,6 +71,8 @@ export function selectionMarkdown(ctx, doc, content) {
     return serialize(ctx, doc.type.create(null, selectionContent(doc, content)));
 }
 export function referenceMetadata(ctx, doc, content) {
+    doc = doc.copy(shareableFragment(doc.content));
+    content = shareableFragment(content);
     let references = false, index = 0;
     const rewrite = (node) => {
         if (key(node) ||
@@ -121,7 +124,8 @@ function allLabels(doc) {
 }
 const rawReferences = /(?<![\\!])\[([^\]]+)\](?:\[([^\]]*)\])?(?!\()/g;
 function isCode(node) {
-    return (node.type.name === 'code_block' ||
+    return (node.type.name.startsWith('comment_') ||
+        node.type.name === 'code_block' ||
         node.marks.some((mark) => mark.type.name === 'inlineCode'));
 }
 // Rename only the incoming document. Definitions belong to the insertion's undo transaction.

package/dist/style.css

@@ -562,3 +562,93 @@ body {
   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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aicayzer/inkkit",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "A preserving Markdown editor for offline web views and the web",
   "license": "MIT",
   "type": "module",
@@ -47,18 +47,22 @@
   "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-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-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": {