@aicayzer/inkkit 0.0.16 → 0.0.18

package/dist/print.js

@@ -1,5 +1,6 @@
 import { clipboardContent } from './clipboard.js';
 import { shareableFragment } from './comments.js';
+import { isSafeLinkTarget } from './link-safety.js';
 import { fileReference } from './linked-syntax.js';
 import { sourceFrontmatter } from './literals.js';
 import { diagramImage, renderDiagram } from './mermaid.js';
@@ -220,15 +221,11 @@ const printClasses = new Set([
     'inkkit-print-diagram',
 ]);
 function safeLink(value) {
-    if (/[\u0000-\u001f\u007f\\]/.test(value))
+    if (value.includes('\\') || !isSafeLinkTarget(value))
         return undefined;
     const href = value.trim();
     if (!href)
         return undefined;
-    // A colon in the first path component denotes a scheme, including an
-    // obfuscated one. Relative paths can still contain colons after a slash.
-    if (/^[^/?#]*:/.test(href) && !/^(https?:|mailto:)/i.test(href))
-        return undefined;
     return href.replaceAll(' ', '%20');
 }
 function cleanSemantics(container, localIDs) {

package/dist/references.d.ts

@@ -6,6 +6,8 @@ export interface LocatedDefinition {
 }
 export declare const referenceDefinitions: (doc: ProseNode) => Map<string, LocatedDefinition>;
 export declare const footnoteDefinitions: (doc: ProseNode) => Map<string, LocatedDefinition>;
+/** Replaces each line break, with the whitespace around it, by one space. */
+export declare function singleLine(value: string): string;
 export declare const remarkReferencesPlugin: import("@milkdown/kit/utils").$Remark<"inkkitReferences", unknown>;
 export declare const referenceLinks: import("@milkdown/kit/utils").$MarkSchema<"link">;
 export declare const referenceDefinition: import("@milkdown/kit/utils").$Node;

package/dist/references.js

@@ -1,4 +1,5 @@
 import { editorLabels } from './labels.js';
+import { isSafeLinkTarget } from './link-safety.js';
 import { $node, $remark, $prose } from '@milkdown/kit/utils';
 import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
 import { linkSchema } from '@milkdown/kit/preset/commonmark';
@@ -36,6 +37,38 @@ function contentShape(value) {
     };
     return JSON.stringify(clean(value));
 }
+/** Replaces each line break, with the whitespace around it, by one space. */
+export function singleLine(value) {
+    return value.replace(/[ \t]*[\r\n][ \t\r\n]*/g, ' ');
+}
+function nullableSingleLine(value) {
+    return value == null ? value : singleLine(value);
+}
+/**
+ * A label is written as its authored text, so one that did not come from
+ * Markdown could close its brackets early or span lines. Line breaks become
+ * one space and an unescaped bracket is escaped. An authored label has no
+ * unescaped bracket, and source preservation keeps an unedited one as written.
+ */
+function writableLabel(label) {
+    const flat = singleLine(String(label));
+    let written = '';
+    for (let index = 0; index < flat.length; index++) {
+        const character = flat[index];
+        if (character === '\\') {
+            written += character;
+            if (index + 1 < flat.length)
+                written += flat[++index];
+            else
+                written += '\\';
+        }
+        else if (character === '[' || character === ']')
+            written += `\\${character}`;
+        else
+            written += character;
+    }
+    return written;
+}
 const labelPlaceholder = 'inkkit-authored-label';
 const authoredLinkReference = (untyped, parent, state, info) => {
     const node = untyped;
@@ -50,19 +83,19 @@ const authoredLinkReference = (untyped, parent, state, info) => {
         node.referenceContent === contentShape(node.children);
     if (node.referenceType !== 'full' &&
         (unchanged || normaliseLabel(display) === normaliseLabel(node.identifier)))
-        return `[${unchanged ? node.label : display}]${node.referenceType === 'collapsed' ? '[]' : ''}`;
+        return `[${unchanged ? writableLabel(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}]`);
+        `[${writableLabel(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)}]:`);
+    .replace(`[${labelPlaceholder}]:`, `[${writableLabel(node.label ?? node.identifier)}]:`);
 const footnoteHandlers = gfmFootnoteToMarkdown().handlers;
-const authoredFootnoteReference = (node) => `[^${String(node.label ?? node.identifier)}]`;
+const authoredFootnoteReference = (node) => `[^${writableLabel(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)}]:`);
+const authoredFootnoteDefinition = (node, parent, state, info) => footnoteHandlers.footnoteDefinition({ ...node, label: labelPlaceholder, identifier: labelPlaceholder }, parent, state, info).replace(`[^${labelPlaceholder}]:`, `[^${writableLabel(node.label ?? node.identifier)}]:`);
 function remarkReferences() {
     const data = this.data();
     (data.micromarkExtensions ??= []).push(gfmFootnote());
@@ -137,8 +170,13 @@ export const referenceLinks = linkSchema.extendSchema((base) => (ctx) => {
                 tag: 'a[href]',
                 getAttrs(dom) {
                     const element = dom;
+                    const href = element.getAttribute('href') ?? '';
+                    // Imported HTML keeps the text of a link it cannot trust. Markdown
+                    // source does not pass through here, so authored addresses stay.
+                    if (!isSafeLinkTarget(href))
+                        return false;
                     return {
-                        href: element.getAttribute('href') ?? '',
+                        href,
                         title: element.getAttribute('title'),
                         label: element.getAttribute('data-inkkit-label'),
                         identifier: element.getAttribute('data-inkkit-reference'),
@@ -211,12 +249,18 @@ export const referenceDefinition = $node('reference_definition', () => ({
     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'),
-            }),
+            getAttrs(dom) {
+                const url = dom.getAttribute('data-inkkit-url') ?? '';
+                if (!isSafeLinkTarget(url))
+                    return false;
+                return {
+                    label: dom.getAttribute('data-inkkit-label') ?? '',
+                    identifier: dom.getAttribute('data-inkkit-reference-definition') ?? '',
+                    url,
+                    // Saved on one line, as the writer would save it.
+                    title: nullableSingleLine(dom.getAttribute('data-inkkit-title')),
+                };
+            },
         },
     ],
     toDOM: (node) => [
@@ -244,7 +288,13 @@ export const referenceDefinition = $node('reference_definition', () => ({
     toMarkdown: {
         match: (node) => node.type.name === 'reference_definition',
         runner: (state, node) => {
-            state.addNode('definition', undefined, undefined, { ...node.attrs });
+            // A line break in a definition title is written as it is, and a blank
+            // line would end the definition.
+            const title = node.attrs.title;
+            state.addNode('definition', undefined, undefined, {
+                ...node.attrs,
+                title: typeof title === 'string' ? singleLine(title) : title,
+            });
         },
     },
 }));

package/dist/scroll.d.ts

@@ -0,0 +1,15 @@
+/** Rounds a distance away from zero, to a whole number of pixels. */
+export declare const scrollOutward: (distance: number) => number;
+/**
+ * Scrolls an element by a distance and returns what it did not scroll. A
+ * scroll position is a whole number of pixels in some engines, so a fraction
+ * is rounded away from zero: rounded to nothing, a reveal would leave the last
+ * fraction of the target outside the element.
+ */
+export declare function scrollWholePixels(element: HTMLElement, vertical: number, horizontal: number, padding?: {
+    top: number;
+    bottom: number;
+}): {
+    vertical: number;
+    horizontal: number;
+};

package/dist/scroll.js

@@ -0,0 +1,27 @@
+/** Rounds a distance away from zero, to a whole number of pixels. */
+export const scrollOutward = (distance) => distance > 0 ? Math.ceil(distance) : Math.floor(distance);
+/**
+ * Scrolls an element by a distance and returns what it did not scroll. A
+ * scroll position is a whole number of pixels in some engines, so a fraction
+ * is rounded away from zero: rounded to nothing, a reveal would leave the last
+ * fraction of the target outside the element.
+ */
+export function scrollWholePixels(element, vertical, horizontal, padding = { top: 0, bottom: 0 }) {
+    const top = element.scrollTop, left = element.scrollLeft;
+    const target = top + scrollOutward(vertical);
+    const last = element.scrollHeight - element.clientHeight;
+    // Only padding is left beyond the target, so show it: a reveal that stops
+    // at the first or last line would otherwise hide that padding.
+    element.scrollTop =
+        vertical < 0 && target <= padding.top
+            ? 0
+            : vertical > 0 && last > 0 && target >= last - padding.bottom
+                ? last
+                : target;
+    element.scrollLeft += scrollOutward(horizontal);
+    const remaining = (distance, moved) => distance > 0 ? Math.max(0, distance - moved) : Math.min(0, distance - moved);
+    return {
+        vertical: remaining(vertical, element.scrollTop - top),
+        horizontal: remaining(horizontal, element.scrollLeft - left),
+    };
+}

package/dist/spreadsheet.d.ts

@@ -1,3 +1,8 @@
 import type { Ctx } from '@milkdown/kit/ctx';
 import { type ClipboardInput } from './types.js';
-export declare function pasteSpreadsheet(ctx: Ctx, input: ClipboardInput): boolean;
+/** Pastes a spreadsheet at the selection, or at `at` for a drop, which
+ *  always lands outside a table. */
+export declare function pasteSpreadsheet(ctx: Ctx, input: ClipboardInput, at?: {
+    from: number;
+    to: number;
+}): boolean;

package/dist/spreadsheet.js

@@ -1,15 +1,20 @@
 import { editorViewCtx } from '@milkdown/kit/core';
-import { DOMParser as ProseParser, Fragment, } from '@milkdown/kit/prose/model';
+import { DOMParser as ProseParser, Fragment, Slice, } from '@milkdown/kit/prose/model';
 import { isInTable, selectedRect } from '@milkdown/kit/prose/tables';
 import { InkKitError } from './types.js';
 import { literalCommentSpans } from './comments.js';
+import { restoreConvertedSpaces } from './paste-html.js';
+import { importableSlice } from './html-import.js';
+import { caretAfter } from './drop-placement.js';
 import { normalizeTableAlignment } from './table-alignment.js';
 import { dispatchTableOperation, editableTable, selectTableRectangle, } from './tables.js';
-export function pasteSpreadsheet(ctx, input) {
+/** Pastes a spreadsheet at the selection, or at `at` for a drop, which
+ *  always lands outside a table. */
+export function pasteSpreadsheet(ctx, input, at) {
     const view = ctx.get(editorViewCtx);
     if (input.plainText || input.markdown != null)
         return false;
-    const inTable = isInTable(view.state);
+    const inTable = !at && isInTable(view.state);
     if (input.html &&
         /data-inkkit-(?:markdown|reference|footnote|comment)/i.test(input.html)) {
         if (inTable && /<table[\s>]/i.test(input.html))
@@ -56,13 +61,18 @@ export function pasteSpreadsheet(ctx, input) {
         }
         if (cursor < input.html.length)
             children.push(schema.text(input.html.slice(cursor)));
-        const literal = schema.nodes.literal_markdown.create(null, children);
+        // The source is kept only where it reads back as one literal block.
+        const content = importableSlice(ctx, new Slice(Fragment.from(schema.nodes.literal_markdown.create(null, children)), 0, 0)).content;
         const selection = view.state.selection;
-        const tr = selection.$from.parent.type.name === 'paragraph' &&
-            selection.empty &&
-            selection.$from.parent.content.size === 0
-            ? view.state.tr.replaceWith(selection.$from.before(), selection.$from.after(), literal)
-            : view.state.tr.replaceSelectionWith(literal);
+        const tr = at
+            ? view.state.tr.replaceWith(at.from, at.to, content)
+            : selection.$from.parent.type.name === 'paragraph' &&
+                selection.empty &&
+                selection.$from.parent.content.size === 0
+                ? view.state.tr.replaceWith(selection.$from.before(), selection.$from.after(), content)
+                : content.childCount === 1
+                    ? view.state.tr.replaceSelectionWith(content.firstChild)
+                    : view.state.tr.replaceSelection(new Slice(content, 0, 0));
         dispatchTableOperation(view, tr);
         return true;
     }
@@ -73,11 +83,13 @@ export function pasteSpreadsheet(ctx, input) {
         const rows = grid.cells.map((row, index) => schema.nodes[index ? 'table_row' : 'table_header_row'].create(null, row.map((content, column) => schema.nodes[index ? 'table_cell' : 'table_header'].create({ alignment: grid.alignment?.[column] ?? 'left' }, schema.nodes.paragraph.create(null, content)))));
         const table = schema.nodes.table.create(null, rows);
         const selection = view.state.selection;
-        const tr = selection.$from.parent.type.name === 'paragraph' &&
-            selection.empty &&
-            selection.$from.parent.content.size === 0
-            ? view.state.tr.replaceWith(selection.$from.before(), selection.$from.after(), table)
-            : view.state.tr.replaceSelectionWith(table);
+        const tr = at
+            ? view.state.tr.replaceWith(at.from, at.to, table)
+            : selection.$from.parent.type.name === 'paragraph' &&
+                selection.empty &&
+                selection.$from.parent.content.size === 0
+                ? view.state.tr.replaceWith(selection.$from.before(), selection.$from.after(), table)
+                : view.state.tr.replaceSelectionWith(table);
         let tableStart = -1;
         tr.doc.descendants((node, pos) => {
             if (node === table)
@@ -85,7 +97,8 @@ export function pasteSpreadsheet(ctx, input) {
         });
         if (tableStart < 0)
             reject();
-        selectTableRectangle(tr, tableStart, table, 0, 0, grid.cells.length, grid.width);
+        // Selecting the new table would let the next keystroke replace it.
+        tr.setSelection(caretAfter(tr.doc, tableStart - 1 + table.nodeSize));
         dispatchTableOperation(view, tr);
         return true;
     }
@@ -261,6 +274,7 @@ function htmlGrid(schema, html) {
             for (const link of cell.querySelectorAll('a'))
                 if (!link.hasAttribute('href'))
                     reject();
+            restoreConvertedSpaces(cell);
             const parsed = parser.parse(cell, { preserveWhitespace: true });
             if (parsed.childCount === 0)
                 return Fragment.empty;

package/dist/style.css

@@ -684,24 +684,16 @@
   border-radius: 4px;
 }
 
-/* Syntax colors: One Dark and One Light, without the blues. */
+/* Syntax colors: One Light and One Dark hues without the blues, darkened or
+   lightened to WCAG AA contrast on the code background. light-dark() follows
+   the editor's color scheme, which a host can force. */
 .inkkit-root {
   --_inkkit-code-comment: var(--_inkkit-muted);
-  --_inkkit-code-keyword: #a626a4;
-  --_inkkit-code-string: #50a14f;
-  --_inkkit-code-number: #986801;
-  --_inkkit-code-title: #c18401;
-  --_inkkit-code-attr: #e45649;
-}
-
-@media (prefers-color-scheme: dark) {
-  .inkkit-root {
-    --_inkkit-code-keyword: #c678dd;
-    --_inkkit-code-string: #98c379;
-    --_inkkit-code-number: #d19a66;
-    --_inkkit-code-title: #e5c07b;
-    --_inkkit-code-attr: #e06c75;
-  }
+  --_inkkit-code-keyword: light-dark(#a626a4, #c77bde);
+  --_inkkit-code-string: light-dark(#3b763a, #98c379);
+  --_inkkit-code-number: light-dark(#8d6001, #d19a66);
+  --_inkkit-code-title: light-dark(#8d6101, #e5c07b);
+  --_inkkit-code-attr: light-dark(#c82c1e, #e37981);
 }
 
 .inkkit-root .hljs-comment,
@@ -898,8 +890,8 @@
 .inkkit-root .inkkit-mermaid-preview {
   padding: 16px;
   overflow: auto;
-  background: #fff;
-  color: #222;
+  background: var(--inkkit-diagram-background, #fff);
+  color: var(--inkkit-diagram-text-color, #222);
 }
 .inkkit-root .inkkit-mermaid-preview svg {
   display: block;
@@ -907,7 +899,7 @@
   height: auto;
 }
 .inkkit-root .inkkit-mermaid-preview[data-state='error'] {
-  color: #9b2424;
+  color: var(--inkkit-diagram-error-color, #9b2424);
   font-size: calc(var(--inkkit-font-size, 15px) * 0.9);
 }
 

package/dist/tables.js

@@ -150,9 +150,31 @@ export function tableCommand(ctx, command, options) {
         view.dispatch(tr);
         return true;
     }
+    if (command === 'addRowBefore' || command === 'addRowAfter') {
+        if (!isInTable(view.state))
+            return false;
+        const { tableStart } = selectedRect(view.state);
+        const add = command === 'addRowBefore' ? addRowBefore : addRowAfter;
+        return add(view.state, (tr) => {
+            // GFM keeps alignment once per column, so a new row's cells take the
+            // header's; otherwise they read back aligned and the edit is refused.
+            const table = tr.doc.nodeAt(tableStart - 1);
+            const map = TableMap.get(table);
+            for (let row = 1; row < map.height; row++)
+                for (let col = 0; col < map.width; col++) {
+                    const offset = map.map[row * map.width + col];
+                    const cell = table.nodeAt(offset);
+                    const { alignment } = table.nodeAt(map.map[col]).attrs;
+                    if (cell.attrs.alignment !== alignment)
+                        tr.setNodeMarkup(tableStart + offset, undefined, {
+                            ...cell.attrs,
+                            alignment,
+                        });
+                }
+            view.dispatch(tr);
+        });
+    }
     const actions = {
-        addRowBefore,
-        addRowAfter,
         addColumnBefore,
         addColumnAfter,
         deleteRow,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aicayzer/inkkit",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "A preserving Markdown editor for offline web views and the web",
   "license": "MIT",
   "type": "module",
@@ -13,6 +13,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "import": "./dist/core.js"
+    },
     "./style.css": "./dist/style.css"
   },
   "types": "./dist/index.d.ts",
@@ -23,7 +27,9 @@
     "README.md"
   ],
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "./dist/index.js",
+    "./src/index.ts"
   ],
   "publishConfig": {
     "access": "public",
@@ -43,10 +49,11 @@
     "build:playground": "vite build playground --config vite.config.ts",
     "test:package": "node scripts/test-package.mjs",
     "check": "pnpm typecheck && pnpm test && pnpm build && pnpm test:package",
-    "test:browser": "playwright test --project=chromium"
+    "test:browser": "playwright test --project=chromium",
+    "test:built-playground": "playwright test --config playwright.built.config.ts"
   },
   "dependencies": {
-    "@milkdown/kit": "7.22.1",
+    "@milkdown/kit": "7.22.3",
     "dompurify": "3.4.16",
     "lowlight": "^3.3.0",
     "mdast-util-from-markdown": "^2.1.0",
@@ -66,6 +73,7 @@
     "micromark-extension-highlight-mark": "1.2.0",
     "micromark-util-normalize-identifier": "^2.0.1",
     "micromark-util-types": "^2.0.3",
+    "prosemirror-drop-indicator": "0.1.4",
     "prosemirror-search": "^1.1.1"
   },
   "devDependencies": {