@aicayzer/inkkit 0.0.2 → 0.0.4

package/dist/preserve.js

@@ -1,5 +1,6 @@
 import { parserCtx, remarkCtx } from '@milkdown/kit/core';
 import { serialize } from './dialect.js';
+import { restoreCodeEndings, finalCodeEnding } from './code-fences.js';
 function signature(node) {
     return JSON.stringify(node, (key, value) => ['position', 'data', 'url', 'title', 'marker'].includes(key)
         ? undefined
@@ -10,7 +11,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 +27,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 +62,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]));
@@ -96,6 +116,40 @@ function retainSource(before, after, source, canonical, lineEnding) {
     if (start == null || end == null || newStart == null || newEnd == null)
         throw new PreservationError('A source token has no location');
     const raw = source.slice(start, end);
+    if (before.type === 'code' &&
+        after.type === 'code' &&
+        before.lang === after.lang) {
+        const opening = /^([ \t>]*)(`{3,}|~{3,})([^\r\n]*)(\r?\n)/.exec(raw);
+        if (opening) {
+            const lines = raw.slice(opening[0].length).split(/\r?\n/);
+            const closing = /^([ \t>]*)(`{3,}|~{3,})([ \t]*)$/.exec(lines.at(-1) ?? '');
+            const originalLine = (before.value ?? '').replace(/\r\n?/g, '\n').split('\n')[0] ?? '';
+            const first = lines[0] ?? '';
+            const gutter = first.endsWith(originalLine)
+                ? first.slice(0, first.length - originalLine.length)
+                : opening[1];
+            const body = (after.value ?? '').replace(/\r\n?/g, '\n').split('\n');
+            const character = opening[2][0];
+            let length = opening[2].length;
+            for (const line of body) {
+                const run = new RegExp(`^ {0,3}(${character}+)[ \\t]*$`).exec(line);
+                if (run)
+                    length = Math.max(length, run[1].length + 1);
+            }
+            const fence = character.repeat(length);
+            return (opening[1] +
+                fence +
+                opening[3] +
+                lineEnding +
+                body.map((line) => gutter + line).join(lineEnding) +
+                (closing
+                    ? lineEnding +
+                        closing[1] +
+                        character.repeat(Math.max(length, closing[2].length)) +
+                        closing[3]
+                    : ''));
+        }
+    }
     if (before.type === 'definition' &&
         after.type === 'definition' &&
         before.label === after.label &&
@@ -174,7 +228,7 @@ export class PreservationError extends Error {
     }
 }
 function form(text) {
-    return text.replace(/\n+$/, '');
+    return text.replace(/\r\n?/g, '\n').replace(/\n+$/, '');
 }
 function blockForm(ctx, node) {
     // An empty document is empty Markdown, but an empty block inside a document
@@ -200,7 +254,7 @@ function semanticSignature(doc) {
                     continue;
                 const token = {
                     ...child,
-                    text,
+                    text: text.replace(/\r\n?/g, '\n'),
                     marks: index === 1 ? child.marks : undefined,
                 };
                 const previous = tokens.at(-1);
@@ -218,10 +272,12 @@ function semanticSignature(doc) {
     [
         'referenceContent',
         'referenceType',
+        'listPlaceholder',
         'marker',
         'id',
         'label',
         'spread',
+        'authoredFence',
     ].includes(key)
         ? undefined
         : value));
@@ -378,16 +434,17 @@ export class Preservation {
                     output += retainSource(block.ast, positionalNode(currentRawTree, currentTree.children[index]), body, canonical, this.lineEnding);
                 }
                 else
-                    output += text.replaceAll('\n', this.lineEnding);
+                    output += restoreCodeEndings(this.ctx, doc.type.create(null, [doc.child(index)]), text.replaceAll('\n', this.lineEnding));
                 previous = position;
             });
             if (previous === this.blocks.length - 1 && this.blocks.length)
                 output += this.source.slice(this.blocks[previous].end);
             else if (output)
-                output += this.lineEnding;
+                output += finalCodeEnding(doc) ?? this.lineEnding;
             const parse = this.ctx.get(parserCtx);
             const reopened = parse(output);
-            if (serialize(this.ctx, reopened) === canonical &&
+            if (serialize(this.ctx, reopened).replace(/\r\n?/g, '\n') ===
+                canonical.replace(/\r\n?/g, '\n') &&
                 semanticSignature(reopened) === semanticSignature(doc))
                 return output;
             throw new PreservationError('The edited Markdown cannot be reopened without changing its content');

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,109 @@ 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;
+  }
+}
+/* Diagram previews are presentation; the authored code remains editable. */
+.inkkit-mermaid-preview {
+  padding: 16px;
+  overflow: auto;
+  background: #fff;
+  color: #222;
+}
+.inkkit-mermaid-preview svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+.inkkit-mermaid-preview[data-state='error'] {
+  color: #9b2424;
+  font-size: 0.9em;
+}

package/dist/types.d.ts

@@ -14,7 +14,7 @@ export interface DocumentSnapshot extends DocumentInput {
     revision: number;
     dirty: boolean;
 }
-export type EditorErrorCode = 'not-ready' | 'stale-document' | 'composition' | 'operation-pending' | 'destroyed' | 'preservation' | 'image-unavailable';
+export type EditorErrorCode = 'not-ready' | 'stale-document' | 'composition' | 'operation-pending' | 'destroyed' | 'preservation' | 'image-unavailable' | 'diagram-unavailable';
 export declare class InkKitError extends Error {
     readonly code: EditorErrorCode;
     constructor(code: EditorErrorCode, message: string);
@@ -57,4 +57,10 @@ export interface ClipboardOutput {
     html: string;
     markdown: string;
     images: ClipboardImage[];
+    diagrams?: ClipboardDiagram[];
+}
+export interface ClipboardDiagram {
+    source: string;
+    image?: PortableImage;
+    error?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aicayzer/inkkit",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "A preserving Markdown editor for offline web views and the web",
   "license": "MIT",
   "type": "module",
@@ -46,19 +46,25 @@
   },
   "dependencies": {
     "@milkdown/kit": "7.22.1",
+    "dompurify": "3.4.16",
     "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",
+    "mermaid": "12.1.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": {