@aicayzer/inkkit 0.0.4 → 0.0.6

package/README.md

@@ -33,10 +33,14 @@ editor.loadDocument({
 const snapshot = editor.snapshot(1)
 ```
 
-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.
+Markdown includes CommonMark, task lists, strikethrough, autolinks, GFM tables, editable footnotes and reference-style links, bounded callouts, highlights, author comments and offline Mermaid diagrams. Unsupported constructs remain literal Markdown. TXT mode treats all text literally. Images require a host adapter. RTF files remain outside the package scope.
+
+Table controls include complete row/column movement and explicit stable text or numeric sorting. Ordinary spreadsheet paste preserves cell boundaries, replaces selected cells and grows supported tables. Hosts call these operations through the public facade; each is undoable.
+
+`await editor.printableSnapshot(1)` returns a complete printable HTML document, print styles and portable image bytes. It excludes author comments, includes folded content and reports unavailable assets or a changed document. Client apps own Print/PDF commands, dialogs and file generation.
 
 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). Release 0.0.2 is published and verified; 0.0.3 delivery is authorised. Targets from 0.0.4 remain provisional.
+Delivery scope and release status are tracked in the [InkKit Project](https://github.com/users/aicayzer/projects/3) and [milestones](https://github.com/aicayzer/inkkit/milestones).
 
 MIT licensed. InkKit builds on the public PadPad and Memos editors; see [NOTICE](NOTICE).

package/dist/dialect.js

@@ -3,6 +3,7 @@ import { commonmark, hardbreakSchema, imageSchema, paragraphSchema, remarkInline
 import { extendListItemSchemaForTask, strikethroughAttr, strikethroughInputRule, strikethroughKeymap, strikethroughSchema, toggleStrikethroughCommand, wrapInTaskListInputRule, tableSchema, tableHeaderRowSchema, tableHeaderSchema, tableRowSchema, tableCellSchema, tableEditingPlugin, tableKeymap, goToNextTableCellCommand, goToPrevTableCellCommand, insertTableCommand, addRowBeforeCommand, addRowAfterCommand, addColBeforeCommand, addColAfterCommand, selectRowCommand, selectColCommand, deleteSelectedCellsCommand, setAlignCommand, exitTable, } from '@milkdown/kit/preset/gfm';
 import { $remark } from '@milkdown/kit/utils';
 import { autolinkInputRule } from './autolink.js';
+import { normalizeTableAlignment, normalizeTableColumnAlignment, } from './table-alignment.js';
 import { preservingCodeBlocks, remarkCodeFences, fencedCodeHandler, } from './code-fences.js';
 import { literalBlock, createLiteralPreservation } from './literals.js';
 import { references, remarkReferencesPlugin } from './references.js';
@@ -86,6 +87,17 @@ function remarkDialect() {
     add('toMarkdownExtensions', gfmTaskListItemToMarkdown());
     add('toMarkdownExtensions', gfmAutolinkLiteralToMarkdown());
     add('toMarkdownExtensions', gfmTableToMarkdown());
+    add('toMarkdownExtensions', {
+        handlers: {
+            text(node, parent, state, info) {
+                const value = defaultHandlers.text(node, parent, state, info);
+                // GFM trims literal whitespace at cell edges on reopening.
+                return state.stack.includes('tableCell')
+                    ? value.replace(/^[ \t]+|[ \t]+$/g, (spaces) => spaces.replaceAll(' ', ' ').replaceAll('\t', '	'))
+                    : value;
+            },
+        },
+    });
     add('toMarkdownExtensions', { handlers: { link, code: fencedCodeHandler } });
 }
 export const remarkDialectPlugin = $remark('remarkDialect', () => remarkDialect);
@@ -209,7 +221,7 @@ export const tables = [
                             return false;
                         return {
                             ...attrs,
-                            alignment: dom.style.textAlign || dom.getAttribute('align') || null,
+                            alignment: normalizeTableAlignment(dom),
                         };
                     },
                 }
@@ -231,7 +243,7 @@ export const tables = [
                             return false;
                         return {
                             ...attrs,
-                            alignment: dom.style.textAlign || dom.getAttribute('align') || null,
+                            alignment: normalizeTableColumnAlignment(dom),
                         };
                     },
                 }

package/dist/editor.d.ts

@@ -1,5 +1,5 @@
-import { type TableCommand } from './tables.js';
-import { type DocumentInput, type DocumentSnapshot, type ImageAdapter, type ClipboardInput, type ClipboardOutput } from './types.js';
+import { type TableCommand, type TableOptions } from './tables.js';
+import { type DocumentInput, type DocumentSnapshot, type ImageAdapter, type ClipboardInput, type ClipboardOutput, type PrintableDocument } from './types.js';
 export type Mark = 'bold' | 'italic' | 'strikethrough' | 'highlight' | 'code' | 'link';
 export type Block = {
     type: 'paragraph';
@@ -65,14 +65,12 @@ export declare class InkKitEditor {
     private assertCurrent;
     private plainSource;
     snapshot(expectedGeneration?: number): DocumentSnapshot;
+    printableSnapshot(expectedGeneration?: number): Promise<PrintableDocument>;
     clipboardSnapshot(all?: boolean): Promise<ClipboardOutput>;
     paste(input: ClipboardInput): Promise<void>;
     setCommentsVisible(visible: boolean): void;
     pasteAsPlainText(text: string): void;
-    table(command: TableCommand, options?: {
-        rows?: number;
-        columns?: number;
-    }): boolean;
+    table(command: TableCommand, options?: TableOptions): boolean;
     destroy(): Promise<void>;
     private keymapPlugin;
     static mount(root: HTMLElement, events: EditorEvents, options?: {

package/dist/editor.js

@@ -1,4 +1,4 @@
-import { Editor, defaultValueCtx, editorViewCtx, editorViewOptionsCtx, remarkStringifyOptionsCtx, rootCtx, } from '@milkdown/kit/core';
+import { Editor, defaultValueCtx, editorViewCtx, editorViewOptionsCtx, remarkCtx, remarkStringifyOptionsCtx, rootCtx, } from '@milkdown/kit/core';
 import { visibleClipboard, portableClipboard, clipboardText, clipboardContent, } from './clipboard.js';
 import { clipboard } from '@milkdown/kit/plugin/clipboard';
 import { history } from '@milkdown/kit/plugin/history';
@@ -17,7 +17,7 @@ import { Preservation } from './preserve.js';
 import { normaliseLabel, referenceDefinitions, footnoteDefinitions, } from './references.js';
 import { selectionMarkdown, selectionContent, referenceMetadata, withReferenceMetadata, } from './reference-clipboard.js';
 import { imageView } from './images.js';
-import { tablePlugins, tableCommand } from './tables.js';
+import { tablePlugins, tableCommand, configureTableMovement, } from './tables.js';
 import { InkKitError, } from './types.js';
 import { highlightPlugin } from './highlight.js';
 import { highlightKeymap, toggleHighlightCommand } from './inline-highlight.js';
@@ -27,6 +27,7 @@ import { selectionPlugin } from './selection.js';
 import { search, SearchQuery, getSearchState, setSearchState, } from 'prosemirror-search';
 import { taskListPlugin, toggleTaskList } from './tasks.js';
 import { isMermaid, mermaidPreview } from './mermaid.js';
+import { hasAuthoredImagesInLiterals, printableMarkdown, printableText, } from './print.js';
 const shortcutCommands = {
     heading1: ['heading', 1],
     heading2: ['heading', 2],
@@ -334,6 +335,42 @@ export class InkKitEditor {
             dirty: text !== this.originalSource,
         };
     }
+    async printableSnapshot(expectedGeneration) {
+        const snapshot = this.snapshot(expectedGeneration);
+        const epoch = this.documentEpoch;
+        const state = this.editor.ctx.get(editorViewCtx).state;
+        let output;
+        try {
+            if (snapshot.format === 'md' &&
+                !this.options.images &&
+                hasAuthoredImagesInLiterals(state.doc.content, (source) => this.editor.ctx.get(remarkCtx).parse(source)))
+                throw new InkKitError('image-unavailable', 'No image adapter is configured for the authored images.');
+            output =
+                snapshot.format === 'txt'
+                    ? printableText(snapshot.text)
+                    : await printableMarkdown(state.doc.content, state.schema, this.options.images, this.context());
+        }
+        finally {
+            this.assertCurrent(snapshot.generation);
+            if (snapshot.documentId !== this.documentId ||
+                epoch !== this.documentEpoch ||
+                snapshot.revision !== this.revision)
+                throw new InkKitError('stale-document', 'Document changed while preparing printable content');
+        }
+        return Object.freeze({
+            documentId: snapshot.documentId,
+            generation: snapshot.generation,
+            revision: snapshot.revision,
+            format: snapshot.format,
+            html: output.html,
+            styles: output.styles,
+            assets: Object.freeze(output.assets.map((asset) => Object.freeze({
+                ...asset,
+                bytes: new Uint8Array(asset.bytes),
+            }))),
+            warnings: Object.freeze(output.warnings.map((warning) => Object.freeze({ ...warning }))),
+        });
+    }
     async clipboardSnapshot(all = true) {
         const snapshot = this.snapshot();
         const epoch = this.documentEpoch;
@@ -552,6 +589,15 @@ export class InkKitEditor {
             .use($prose(() => search()))
             .use(options.images ? imageView(options.images) : [])
             .create();
+        configureTableMovement(instance.editor.ctx, () => {
+            try {
+                instance.assertCurrent();
+                return instance.formatType === 'md';
+            }
+            catch {
+                return false;
+            }
+        });
         instance.plain = document.createElement('textarea');
         instance.plain.className = 'inkkit-plain';
         instance.plain.setAttribute('aria-label', 'Plain text editor');

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { InkKitEditor } from './editor.js';
 export type { EditorEvents, CaretState, Mark, Block, FormatCommand, Keymap, } from './editor.js';
-export type { TableCommand } from './tables.js';
+export type { TableCommand, TableOptions } from './tables.js';
 export { InkKitError } from './types.js';
-export type { DocumentFormat, DocumentContext, DocumentInput, DocumentSnapshot, EditorErrorCode, ImageAdapter, CapturedImage, PortableImage, ClipboardInput, ClipboardOutput, ClipboardImage, ClipboardDiagram, } from './types.js';
+export type { DocumentFormat, DocumentContext, DocumentInput, DocumentSnapshot, EditorErrorCode, ImageAdapter, CapturedImage, PortableImage, ClipboardInput, ClipboardOutput, ClipboardImage, ClipboardDiagram, PrintableDocument, PrintableWarning, } from './types.js';

package/dist/literals.d.ts

@@ -12,6 +12,7 @@ declare module 'mdast' {
         inkkitLiteral: InkKitLiteral;
     }
 }
+export declare function sourceFrontmatter(source: string): string | undefined;
 export declare function createLiteralPreservation(images: boolean): import("@milkdown/kit/utils").$Remark<"preserveLiterals", unknown>;
 export declare const preserveLiterals: import("@milkdown/kit/utils").$Remark<"preserveLiterals", unknown>;
 export declare const literalBlock: import("@milkdown/kit/utils").$Node;

package/dist/literals.js

@@ -1,6 +1,9 @@
 import { $node, $remark } from '@milkdown/kit/utils';
 import { commentSource, literalCommentSpans, } from './comments.js';
 const unsupported = new Set(['html', 'image', 'imageReference']);
+export function sourceFrontmatter(source) {
+    return /^(---|\+\+\+)\r?\n[\s\S]*?\r?\n\1(?:\r?\n|$)/.exec(source)?.[0];
+}
 function restoreInlineBreaks(node) {
     if ((node.type === 'paragraph' || node.type === 'heading') &&
         node.children.length > 1) {
@@ -51,8 +54,8 @@ export function createLiteralPreservation(images) {
         restoreInlineBreaks(tree);
         // Micromark's positions exclude an initial byte-order mark.
         const source = String(file.value).replace(/^\uFEFF/, '');
-        const frontmatter = /^(---|\+\+\+)\r?\n[\s\S]*?\r?\n\1(?:\r?\n|$)/.exec(source);
-        const frontmatterEnd = frontmatter?.[0].length ?? 0;
+        const frontmatter = sourceFrontmatter(source);
+        const frontmatterEnd = frontmatter?.length ?? 0;
         const preserveBlock = (node, depth = 0) => {
             if (node.type === 'footnoteDefinition') {
                 node.children = node.children.map((child) => preserveBlock(child, depth + 1));
@@ -80,13 +83,13 @@ export function createLiteralPreservation(images) {
         if (frontmatter)
             blocks.push({
                 type: 'inkkitLiteral',
-                value: frontmatter[0].trimEnd(),
+                value: frontmatter.trimEnd(),
                 position: {
                     start: { line: 1, column: 1, offset: 0 },
                     end: {
                         line: 1,
                         column: 1,
-                        offset: frontmatter[0].trimEnd().length,
+                        offset: frontmatter.trimEnd().length,
                     },
                 },
             });

package/dist/paste.js

@@ -1,7 +1,8 @@
 import { editorViewCtx, parserCtx } from '@milkdown/kit/core';
-import { DOMParser as ProseParser, Fragment, Slice, } from '@milkdown/kit/prose/model';
+import { DOMParser as ProseParser, DOMSerializer, Fragment, Slice, } from '@milkdown/kit/prose/model';
 import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
 import { $prose } from '@milkdown/kit/utils';
+import { pasteSpreadsheet } from './spreadsheet.js';
 import { avoidReferenceCollisions, markdownFromHTML, } from './reference-clipboard.js';
 import { InkKitError, } from './types.js';
 export class PasteController {
@@ -114,6 +115,10 @@ export class PasteController {
             const plainText = input.plainText ||
                 this.options.literalText?.() ||
                 view.state.selection.$from.parent.type.spec.code;
+            if (!plainText &&
+                input.markdown == null &&
+                pasteSpreadsheet(ctx, { ...input, images }))
+                return;
             const markdown = plainText
                 ? undefined
                 : (input.markdown ??
@@ -136,6 +141,16 @@ export class PasteController {
                 const template = document.createElement('template');
                 template.innerHTML = input.html;
                 const container = template.content;
+                // Preserve whole unsupported tables before rewriting their descendants,
+                // so comments retain their source and ordinary-copy privacy.
+                for (const table of [...container.querySelectorAll('table')]) {
+                    if (table.parentElement?.closest('table'))
+                        continue;
+                    if (schema.nodes.table && !unsupportedClipboardTable(table))
+                        continue;
+                    const preserved = ctx.get(parserCtx)(table.outerHTML);
+                    table.replaceWith(DOMSerializer.fromSchema(schema).serializeFragment(preserved.content));
+                }
                 for (const warning of container.querySelectorAll('[data-inkkit-diagram-error]'))
                     warning.remove();
                 for (const diagram of container.querySelectorAll('figure[data-inkkit-mermaid]')) {
@@ -252,11 +267,7 @@ export class PasteController {
                     if (table.parentElement?.closest('table'))
                         continue;
                     const rows = [...table.querySelectorAll('tr')];
-                    const widths = rows.map((row) => row.querySelectorAll(':scope > th,:scope > td').length);
-                    const unsupported = !schema.nodes.table ||
-                        widths.length === 0 ||
-                        widths.some((width) => !width || width !== widths[0]) ||
-                        table.querySelector('table,[rowspan]:not([rowspan="1"]),[colspan]:not([colspan="1"]),td > p ~ p,th > p ~ p,td > div,th > div,td > ul,td > ol,td > pre,td > blockquote,th > ul,th > ol,th > pre,th > blockquote');
+                    const unsupported = !schema.nodes.table || unsupportedClipboardTable(table);
                     if (!unsupported && !table.querySelector('th')) {
                         for (const cell of rows[0]?.querySelectorAll(':scope > td') ?? []) {
                             const heading = document.createElement('th');
@@ -422,6 +433,45 @@ export class PasteController {
         }
     }
 }
+function unsupportedClipboardTable(table) {
+    const rows = [...table.querySelectorAll('tr')];
+    const widths = rows.map((row) => row.querySelectorAll(':scope > th,:scope > td').length);
+    const supported = new Set([
+        'THEAD',
+        'TBODY',
+        'TFOOT',
+        'TR',
+        'TH',
+        'TD',
+        'P',
+        'STRONG',
+        'B',
+        'EM',
+        'I',
+        'S',
+        'DEL',
+        'STRIKE',
+        'CODE',
+        'A',
+        'MARK',
+        'SPAN',
+        'SUP',
+        'FONT',
+        'IMG',
+    ]);
+    return (widths.length === 0 ||
+        widths.some((width) => !width || width !== widths[0]) ||
+        !!document.createTreeWalker(table, NodeFilter.SHOW_COMMENT).nextNode() ||
+        [...table.querySelectorAll('*')].some((element) => !supported.has(element.tagName)) ||
+        [...table.querySelectorAll('p')].some((paragraph) => {
+            const cell = paragraph.parentElement;
+            return (!cell ||
+                !['TH', 'TD'].includes(cell.tagName) ||
+                cell.children.length !== 1 ||
+                [...cell.childNodes].some((node) => node !== paragraph && !!node.textContent?.trim()));
+        }) ||
+        !!table.querySelector('[rowspan]:not([rowspan="1"]),[colspan]:not([colspan="1"])'));
+}
 function dataImage(source) {
     const match = /^data:(image\/(?:png|jpeg|gif|webp|avif|bmp|tiff));base64,([A-Za-z0-9+/=\s]+)$/.exec(source);
     if (!match)

package/dist/preserve.js

@@ -2,16 +2,14 @@ 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
-        : value);
+    return JSON.stringify(node, (key, value) => ['position', 'data', 'marker'].includes(key) ? undefined : value);
 }
 function ownShape(node) {
     return JSON.stringify(node, (key, value) => ['position', 'data', 'children', 'value', 'marker'].includes(key)
         ? undefined
         : value);
 }
-function retainText(raw, before, after, quoteIndent = false) {
+function retainText(raw, before, after, quoteIndent = false, inTable = false) {
     before = before.replace(/\r\n?/g, '\n');
     after = after.replace(/\r\n?/g, '\n');
     let prefix = 0;
@@ -64,7 +62,7 @@ function retainText(raw, before, after, quoteIndent = false) {
     }
     if (decoded !== before) {
         // Continuation indentation is excluded from a quoted paragraph's text.
-        return quoteIndent ? after : retainText(raw, before, after, true);
+        return quoteIndent ? after : retainText(raw, before, after, true, inTable);
     }
     const inserted = after
         .slice(prefix, after.length - suffix)
@@ -73,7 +71,9 @@ function retainText(raw, before, after, quoteIndent = false) {
         const at = prefix + index;
         const delimiter = (character === '%' || character === '=') &&
             (after[at - 1] === character || after[at + 1] === character);
-        return delimiter || /[\\`*_[\]<>]/.test(character)
+        return delimiter ||
+            /[\\`*_[\]<>]/.test(character) ||
+            (inTable && character === '|')
             ? `\\${character}`
             : character;
     })
@@ -108,7 +108,7 @@ function retainBoundaryWhitespace(raw, canonical) {
     return raw;
 }
 // Patch changed leaves so an adjacent edit retains authored delimiters and labels.
-function retainSource(before, after, source, canonical, lineEnding) {
+function retainSource(before, after, source, canonical, lineEnding, inTable = false) {
     const start = before.position?.start.offset;
     const end = before.position?.end.offset;
     const newStart = after.position?.start.offset;
@@ -163,7 +163,7 @@ function retainSource(before, after, source, canonical, lineEnding) {
                 destination[3]);
     }
     if (before.type === 'text' && after.type === 'text')
-        return retainBoundaryWhitespace(retainText(raw, before.value, after.value), canonical.slice(newStart, newEnd));
+        return retainBoundaryWhitespace(retainText(raw, before.value, after.value, false, inTable), canonical.slice(newStart, newEnd));
     if (signature(before) === signature(after) &&
         ownShape(before) === ownShape(after))
         return raw;
@@ -173,13 +173,40 @@ function retainSource(before, after, source, canonical, lineEnding) {
         after.children &&
         before.children.length === after.children.length) {
         let output = '', previous = start;
+        const retained = new Set();
         before.children.forEach((child, index) => {
+            const incoming = after.children[index];
+            const movedIndex = before.type === 'table' || before.type === 'tableRow'
+                ? before.children.findIndex((candidate, candidateIndex) => !retained.has(candidateIndex) &&
+                    signature(candidate) === signature(incoming) &&
+                    ownShape(candidate) === ownShape(incoming))
+                : -1;
+            const original = movedIndex < 0 ? child : before.children[movedIndex];
+            if (movedIndex >= 0)
+                retained.add(movedIndex);
             const childStart = child.position?.start.offset, childEnd = child.position?.end.offset;
             if (childStart == null || childEnd == null)
                 throw new PreservationError('A source token has no location');
-            output +=
-                source.slice(previous, childStart) +
-                    retainSource(child, after.children[index], source, canonical, lineEnding);
+            let retainedSource = retainSource(original, incoming, source, canonical, lineEnding, inTable || before.type === 'tableCell');
+            if (before.type === 'tableRow' && movedIndex >= 0) {
+                // Cell positions own different pipe boundaries at the row edges.
+                const originalFrom = original.children?.[0]?.position?.start.offset;
+                const originalTo = original.children?.at(-1)?.position?.end.offset;
+                const from = child.children?.[0]?.position?.start.offset;
+                const to = child.children?.at(-1)?.position?.end.offset;
+                retainedSource =
+                    originalFrom != null &&
+                        originalTo != null &&
+                        from != null &&
+                        to != null
+                        ? source.slice(childStart, from) +
+                            source.slice(originalFrom, originalTo) +
+                            source.slice(to, childEnd)
+                        : canonical
+                            .slice(incoming.position.start.offset, incoming.position.end.offset)
+                            .replaceAll('\n', lineEnding);
+            }
+            output += source.slice(previous, childStart) + retainedSource;
             previous = childEnd;
         });
         return output + source.slice(previous, end);

package/dist/print.d.ts

@@ -0,0 +1,7 @@
+import type { Fragment, Schema } from '@milkdown/kit/prose/model';
+import { type DocumentContext, type ImageAdapter, type PrintableDocument } from './types.js';
+type PrintableContent = Pick<PrintableDocument, 'html' | 'styles' | 'assets' | 'warnings'>;
+export declare function printableText(text: string): PrintableContent;
+export declare function hasAuthoredImagesInLiterals(content: Fragment, parse: (source: string) => unknown): boolean;
+export declare function printableMarkdown(content: Fragment, schema: Schema, adapter: ImageAdapter | undefined, context: DocumentContext): Promise<PrintableContent>;
+export {};