@aicayzer/inkkit 0.0.5 → 0.0.7

package/dist/spreadsheet.js

@@ -0,0 +1,275 @@
+import { editorViewCtx } from '@milkdown/kit/core';
+import { DOMParser as ProseParser, Fragment, } from '@milkdown/kit/prose/model';
+import { isInTable, selectedRect } from '@milkdown/kit/prose/tables';
+import { InkKitError } from './types.js';
+import { literalCommentSpans } from './comments.js';
+import { normalizeTableAlignment } from './table-alignment.js';
+import { dispatchTableOperation, editableTable, selectTableRectangle, } from './tables.js';
+export function pasteSpreadsheet(ctx, input) {
+    const view = ctx.get(editorViewCtx);
+    if (input.plainText || input.markdown != null)
+        return false;
+    const inTable = isInTable(view.state);
+    if (input.html &&
+        /data-inkkit-(?:markdown|reference|footnote|comment)/i.test(input.html)) {
+        if (inTable && /<table[\s>]/i.test(input.html))
+            reject();
+        return false;
+    }
+    if (input.images?.length || (input.html && /<img[\s>]/i.test(input.html))) {
+        if (!input.html || !/<table[\s>]/i.test(input.html))
+            return false;
+        const template = document.createElement('template');
+        template.innerHTML = input.html;
+        for (const image of template.content.querySelectorAll('img'))
+            image.replaceWith(document.createTextNode(image.getAttribute('alt') ?? 'Image'));
+        try {
+            htmlGrid(view.state.schema, template.innerHTML);
+            return false;
+        }
+        catch {
+            if (!inTable && !standaloneTable(input.html))
+                return false;
+        }
+    }
+    let grid;
+    try {
+        grid = input.html?.match(/<table[\s>]/i)
+            ? htmlGrid(view.state.schema, input.html)
+            : input.text.includes('\t')
+                ? textGrid(view.state.schema, input.text)
+                : undefined;
+    }
+    catch (error) {
+        if (inTable || !input.html)
+            throw error;
+        if (!standaloneTable(input.html))
+            return false;
+        const schema = view.state.schema;
+        const children = [];
+        let cursor = 0;
+        for (const span of literalCommentSpans(input.html)) {
+            if (span.start > cursor)
+                children.push(schema.text(input.html.slice(cursor, span.start)));
+            children.push(schema.nodes.comment_inline.create({ syntax: span.syntax, block: Boolean(span.block) }, span.value ? schema.text(span.value) : null));
+            cursor = span.end;
+        }
+        if (cursor < input.html.length)
+            children.push(schema.text(input.html.slice(cursor)));
+        const literal = schema.nodes.literal_markdown.create(null, children);
+        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);
+        dispatchTableOperation(view, tr);
+        return true;
+    }
+    if (!grid)
+        return false;
+    if (!inTable) {
+        const schema = view.state.schema;
+        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);
+        let tableStart = -1;
+        tr.doc.descendants((node, pos) => {
+            if (node === table)
+                tableStart = pos + 1;
+        });
+        if (tableStart < 0)
+            reject();
+        selectTableRectangle(tr, tableStart, table, 0, 0, grid.cells.length, grid.width);
+        dispatchTableOperation(view, tr);
+        return true;
+    }
+    const rect = selectedRect(view.state);
+    if (!editableTable(rect.table))
+        reject();
+    const width = Math.max(rect.map.width, rect.left + grid.width);
+    const height = Math.max(rect.map.height, rect.top + grid.cells.length);
+    if (width > 100 || height > 100)
+        reject();
+    const schema = view.state.schema;
+    const alignment = Array.from({ length: width }, (_, column) => column < rect.map.width
+        ? rect.table.firstChild.child(column).attrs.alignment
+        : 'left');
+    const rows = [];
+    for (let row = 0; row < height; row++) {
+        const cells = [];
+        for (let column = 0; column < width; column++) {
+            const existing = row < rect.map.height && column < rect.map.width
+                ? rect.table.child(row).child(column)
+                : undefined;
+            const incoming = grid.cells[row - rect.top]?.[column - rect.left];
+            const cleared = row >= rect.top &&
+                row < rect.bottom &&
+                column >= rect.left &&
+                column < rect.right;
+            if (existing && !incoming && !cleared)
+                cells.push(existing);
+            else {
+                const type = schema.nodes[row ? 'table_cell' : 'table_header'];
+                cells.push(type.create({ ...(existing?.attrs ?? {}), alignment: alignment[column] }, schema.nodes.paragraph.create(null, incoming)));
+            }
+        }
+        rows.push(schema.nodes[row ? 'table_row' : 'table_header_row'].create(rect.table.maybeChild(row)?.attrs, cells));
+    }
+    const table = rect.table.copy(Fragment.fromArray(rows));
+    const tr = view.state.tr.replaceWith(rect.tableStart - 1, rect.tableStart - 1 + rect.table.nodeSize, table);
+    selectTableRectangle(tr, rect.tableStart, table, rect.top, rect.left, rect.top + grid.cells.length, rect.left + grid.width);
+    dispatchTableOperation(view, tr);
+    return true;
+}
+function standaloneTable(html) {
+    const template = document.createElement('template');
+    template.innerHTML = html;
+    for (const metadata of template.content.querySelectorAll('meta[charset]'))
+        metadata.remove();
+    const elements = [...template.content.childNodes].filter((node) => node.nodeType !== 3 || node.textContent?.trim());
+    return elements.length === 1 && elements[0] instanceof HTMLTableElement;
+}
+function reject() {
+    throw new InkKitError('preservation', 'This spreadsheet cannot be represented safely in a Markdown table. Paste as plain text outside the table to retain its source.');
+}
+function textGrid(schema, input) {
+    const text = input.replace(/\r\n?/g, '\n').replace(/\n$/, '');
+    const rows = [[]];
+    let value = '', quoted = false, closed = false, start = true;
+    for (let index = 0; index <= text.length; index++) {
+        const character = text[index];
+        if (quoted) {
+            if (character == null)
+                reject();
+            if (character === '"') {
+                if (text[index + 1] === '"') {
+                    value += '"';
+                    index++;
+                }
+                else {
+                    quoted = false;
+                    closed = true;
+                }
+            }
+            else
+                value += character;
+            continue;
+        }
+        if (character === '"' && start) {
+            quoted = true;
+            start = false;
+        }
+        else if (character === '\t' || character === '\n' || character == null) {
+            rows.at(-1).push(value);
+            value = '';
+            start = true;
+            closed = false;
+            if (character === '\n')
+                rows.push([]);
+        }
+        else {
+            if (closed)
+                reject();
+            value += character;
+            start = false;
+        }
+    }
+    const width = Math.max(...rows.map((row) => row.length));
+    if (width > 100 || rows.length > 100)
+        reject();
+    if (rows.some((row) => row.some((value) => /[\n\t]/.test(value))))
+        reject();
+    return {
+        width,
+        cells: rows.map((row) => Array.from({ length: width }, (_, column) => {
+            const value = row[column] ?? '';
+            return value ? Fragment.from(schema.text(value)) : Fragment.empty;
+        })),
+    };
+}
+function htmlGrid(schema, html) {
+    const template = document.createElement('template');
+    template.innerHTML = html;
+    const fragment = template.content;
+    for (const metadata of fragment.querySelectorAll('meta[charset]'))
+        metadata.remove();
+    const table = fragment.querySelector('table');
+    if (!table || fragment.querySelectorAll('table').length !== 1)
+        reject();
+    const wrapper = table.parentElement;
+    if (wrapper && wrapper.tagName !== 'BODY')
+        reject();
+    for (const sibling of fragment.childNodes)
+        if (sibling !== table &&
+            (sibling.textContent?.trim() || sibling.nodeType !== 3))
+            reject();
+    const rows = [...table.querySelectorAll('tr')];
+    if (document.createTreeWalker(table, NodeFilter.SHOW_COMMENT).nextNode())
+        reject();
+    for (const element of table.children) {
+        if (!['TR', 'THEAD', 'TBODY', 'TFOOT'].includes(element.tagName))
+            reject();
+        if (element.tagName !== 'TR')
+            for (const row of element.children)
+                if (row.tagName !== 'TR')
+                    reject();
+    }
+    const width = rows[0]?.children.length ?? 0;
+    if (!width || width > 100 || !rows.length || rows.length > 100)
+        reject();
+    const parser = ProseParser.fromSchema(schema);
+    const inline = new Set([
+        'STRONG',
+        'B',
+        'EM',
+        'I',
+        'S',
+        'DEL',
+        'STRIKE',
+        'CODE',
+        'A',
+        'MARK',
+        'SPAN',
+    ]);
+    const cells = rows.map((row) => {
+        if (row.children.length !== width)
+            reject();
+        return [...row.children].map((cell) => {
+            if (!['TH', 'TD'].includes(cell.tagName))
+                reject();
+            if ((cell.hasAttribute('rowspan') &&
+                cell.getAttribute('rowspan') !== '1') ||
+                (cell.hasAttribute('colspan') && cell.getAttribute('colspan') !== '1'))
+                reject();
+            for (const element of cell.querySelectorAll('*'))
+                if (!inline.has(element.tagName) &&
+                    !(element.tagName === 'P' &&
+                        element.parentElement === cell &&
+                        cell.children.length === 1))
+                    reject();
+            const walker = document.createTreeWalker(cell, NodeFilter.SHOW_COMMENT);
+            if (walker.nextNode())
+                reject();
+            if (/[\n\r\t]/.test(cell.textContent ?? ''))
+                reject();
+            for (const link of cell.querySelectorAll('a'))
+                if (!link.hasAttribute('href'))
+                    reject();
+            const parsed = parser.parse(cell, { preserveWhitespace: true });
+            if (parsed.childCount === 0)
+                return Fragment.empty;
+            if (parsed.childCount !== 1 ||
+                parsed.firstChild.type.name !== 'paragraph')
+                reject();
+            return parsed.firstChild.content;
+        });
+    });
+    const alignment = [...rows[0].children].map((cell) => normalizeTableAlignment(cell) ?? 'left');
+    return { width, cells, alignment };
+}

package/dist/table-alignment.d.ts

@@ -0,0 +1,2 @@
+export declare function normalizeTableAlignment(element: HTMLElement): 'left' | 'center' | 'right' | null;
+export declare function normalizeTableColumnAlignment(element: HTMLElement): 'left' | 'center' | 'right' | null;

package/dist/table-alignment.js

@@ -0,0 +1,46 @@
+export function normalizeTableAlignment(element) {
+    const alignment = (element.style.textAlign ||
+        element.getAttribute('align') ||
+        '')
+        .trim()
+        .toLowerCase();
+    if (alignment === 'left' || alignment === 'center' || alignment === 'right')
+        return alignment;
+    if (alignment !== 'start' && alignment !== 'end')
+        return null;
+    let direction = 'ltr';
+    for (let current = element; current; current = current.parentElement) {
+        const value = (current.style.direction || current.getAttribute('dir') || '')
+            .trim()
+            .toLowerCase();
+        if (value === 'ltr' || value === 'rtl') {
+            direction = value;
+            break;
+        }
+        if (value === 'auto') {
+            const first = [...(current.textContent ?? '')].find((character) => /[\u061c\u200e\u200f]|\p{Letter}/u.test(character));
+            if (first) {
+                direction =
+                    /[\u0590-\u08ff\u200f\ufb1d-\ufdff\ufe70-\ufeff\u{10800}-\u{10fff}\u{1e800}-\u{1edff}\u{1e900}-\u{1e95f}]/u.test(first)
+                        ? 'rtl'
+                        : 'ltr';
+                break;
+            }
+        }
+    }
+    return alignment === 'start'
+        ? direction === 'rtl'
+            ? 'right'
+            : 'left'
+        : direction === 'rtl'
+            ? 'left'
+            : 'right';
+}
+export function normalizeTableColumnAlignment(element) {
+    if (!(element instanceof HTMLTableCellElement))
+        return normalizeTableAlignment(element);
+    const table = element.closest('table');
+    const header = table?.rows[0]?.cells[element.cellIndex];
+    // GFM represents alignment once per column, independently of cell direction.
+    return normalizeTableAlignment(header ?? element);
+}

package/dist/tables.d.ts

@@ -1,7 +1,18 @@
 import type { Ctx } from '@milkdown/kit/ctx';
-export type TableCommand = 'insert' | 'addRowBefore' | 'addRowAfter' | 'addColumnBefore' | 'addColumnAfter' | 'deleteRow' | 'deleteColumn' | 'deleteTable' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'exit';
-export declare const tablePlugins: (((ctx: Ctx) => () => void) | import("@milkdown/kit/ctx").MilkdownPlugin)[];
-export declare function tableCommand(ctx: Ctx, command: TableCommand, options?: {
+import { type Node as ProseNode } from '@milkdown/kit/prose/model';
+import type { EditorView } from '@milkdown/kit/prose/view';
+import type { Transaction } from '@milkdown/kit/prose/state';
+export type TableCommand = 'insert' | 'addRowBefore' | 'addRowAfter' | 'addColumnBefore' | 'addColumnAfter' | 'deleteRow' | 'deleteColumn' | 'deleteTable' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'moveRowUp' | 'moveRowDown' | 'moveColumnLeft' | 'moveColumnRight' | 'sortRows' | 'exit';
+export interface TableOptions {
     rows?: number;
     columns?: number;
-}): boolean;
+    column?: number;
+    order?: 'ascending' | 'descending';
+    comparison?: 'text' | 'number';
+}
+export declare const tablePlugins: (((ctx: Ctx) => () => void) | import("@milkdown/kit/ctx").MilkdownPlugin)[];
+export declare function tableCommand(ctx: Ctx, command: TableCommand, options?: TableOptions): boolean;
+export declare function dispatchTableOperation(view: EditorView, tr: Transaction): void;
+export declare function configureTableMovement(ctx: Ctx, canEdit: () => boolean): void;
+export declare function editableTable(table: ProseNode): boolean;
+export declare function selectTableRectangle(tr: Transaction, tableStart: number, table: ProseNode, top: number, left: number, bottom: number, right: number): void;

package/dist/tables.js

@@ -1,9 +1,12 @@
 import { commandsCtx, editorViewCtx } from '@milkdown/kit/core';
 import { tableBlock, tableBlockConfig, } from '@milkdown/kit/component/table-block';
-import { insertTableCommand, exitTable } from '@milkdown/kit/preset/gfm';
-import { addRowAfter, addRowBefore, addColumnAfter, addColumnBefore, deleteRow, deleteColumn, deleteTable, goToNextCell, selectedRect, TableMap, isInTable, } from '@milkdown/kit/prose/tables';
+import { insertTableCommand, exitTable, moveRowCommand, moveColCommand, } from '@milkdown/kit/preset/gfm';
+import { addRowAfter, addRowBefore, addColumnAfter, addColumnBefore, deleteRow, deleteColumn, deleteTable, goToNextCell, selectedRect, TableMap, isInTable, CellSelection, } from '@milkdown/kit/prose/tables';
+import { Fragment } from '@milkdown/kit/prose/model';
+import { closeHistory } from '@milkdown/kit/prose/history';
 import { keymap } from '@milkdown/kit/prose/keymap';
 import { $prose } from '@milkdown/kit/utils';
+import { clipboardText } from './clipboard.js';
 const labels = {
     add_row: 'Add row',
     add_col: 'Add column',
@@ -16,6 +19,8 @@ const labels = {
     row_drag_handle: 'Move row',
 };
 export const tablePlugins = [
+    moveRowCommand,
+    moveColCommand,
     tableBlockConfig,
     (ctx) => () => {
         ctx.update(tableBlockConfig.key, (config) => ({
@@ -42,6 +47,8 @@ export function tableCommand(ctx, command, options) {
     }
     if (command === 'exit')
         return commands.call(exitTable.key);
+    if (command.startsWith('move') || command === 'sortRows')
+        return refineTable(view, command, options);
     if (command === 'alignLeft' ||
         command === 'alignCenter' ||
         command === 'alignRight') {
@@ -78,3 +85,162 @@ export function tableCommand(ctx, command, options) {
     };
     return actions[command](view.state, view.dispatch);
 }
+export function dispatchTableOperation(view, tr) {
+    view.dispatch(closeHistory(tr).scrollIntoView());
+    view.dispatch(closeHistory(view.state.tr).setMeta('addToHistory', false));
+}
+export function configureTableMovement(ctx, canEdit) {
+    const commands = ctx.get(commandsCtx);
+    for (const [key, rowMovement] of [
+        [moveRowCommand.key, true],
+        [moveColCommand.key, false],
+    ]) {
+        commands.remove(key);
+        commands.create(key, (options = {}) => () => {
+            const view = ctx.get(editorViewCtx);
+            if (!canEdit() ||
+                !view.editable ||
+                view.composing ||
+                !isInTable(view.state))
+                return false;
+            const rect = selectedRect(view.state);
+            const from = options.from ?? 0, to = options.to ?? 0;
+            const length = rowMovement ? rect.map.height : rect.map.width;
+            if (!editableTable(rect.table) ||
+                (options.pos != null && options.pos !== rect.tableStart) ||
+                !Number.isInteger(from) ||
+                !Number.isInteger(to) ||
+                from < 0 ||
+                to < 0 ||
+                from >= length ||
+                to >= length ||
+                from === to ||
+                (rowMovement && (from === 0 || to === 0)))
+                return false;
+            const rows = [];
+            rect.table.forEach((row) => rows.push(row));
+            if (rowMovement) {
+                const moved = rows.splice(from, 1)[0];
+                rows.splice(to, 0, moved);
+            }
+            else {
+                for (let index = 0; index < rows.length; index++) {
+                    const row = rows[index], cells = [];
+                    row.forEach((cell) => cells.push(cell));
+                    cells.splice(to, 0, cells.splice(from, 1)[0]);
+                    rows[index] = row.copy(Fragment.fromArray(cells));
+                }
+            }
+            const table = rect.table.copy(Fragment.fromArray(rows));
+            const tr = view.state.tr.replaceWith(rect.tableStart - 1, rect.tableStart - 1 + rect.table.nodeSize, table);
+            selectTableRectangle(tr, rect.tableStart, table, rowMovement ? to : 0, rowMovement ? 0 : to, rowMovement ? to + 1 : rect.map.height, rowMovement ? rect.map.width : to + 1);
+            dispatchTableOperation(view, tr);
+            return true;
+        });
+    }
+}
+export function editableTable(table) {
+    const map = TableMap.get(table);
+    if (map.problems?.length || map.width > 100 || map.height > 100)
+        return false;
+    let valid = table.firstChild?.type.name === 'table_header_row';
+    table.forEach((row, _offset, index) => {
+        valid &&= row.type.name === (index ? 'table_row' : 'table_header_row');
+        valid &&= row.childCount === map.width;
+        row.forEach((cell) => {
+            valid &&= cell.attrs.colspan === 1 && cell.attrs.rowspan === 1;
+        });
+    });
+    return Boolean(valid);
+}
+function refineTable(view, command, options) {
+    if (!isInTable(view.state))
+        return false;
+    const rect = selectedRect(view.state);
+    if (!editableTable(rect.table))
+        return false;
+    const rows = [];
+    rect.table.forEach((row) => rows.push(row));
+    let top = rect.top, bottom = rect.bottom, left = rect.left, right = rect.right;
+    if (command === 'sortRows') {
+        const column = options?.column ?? rect.left;
+        if (!Number.isInteger(column) || column < 0 || column >= rect.map.width)
+            throw new RangeError('Sort column must identify an existing table column');
+        const order = options?.order ?? 'ascending';
+        const comparison = options?.comparison ?? 'text';
+        if (!['ascending', 'descending'].includes(order))
+            throw new RangeError('Sort order must be ascending or descending');
+        if (!['text', 'number'].includes(comparison))
+            throw new RangeError('Sort comparison must be text or number');
+        const body = rows.slice(1).map((row, index) => ({
+            row,
+            index,
+            key: clipboardText(row.child(column).content),
+        }));
+        if (comparison === 'number' &&
+            body.some(({ key }) => {
+                const value = key.trim();
+                return value !== '' && decimalNumber(value) === undefined;
+            }))
+            throw new RangeError('Numeric sorting requires finite decimal values or blank cells');
+        body.sort((a, b) => compareCells(a.key, b.key, comparison, order) || a.index - b.index);
+        if (body.every(({ row }, index) => row === rows[index + 1]))
+            return false;
+        const activeIndex = top - 1;
+        rows.splice(1, rows.length - 1, ...body.map(({ row }) => row));
+        top =
+            top === 0 ? 0 : body.findIndex(({ index }) => index === activeIndex) + 1;
+        bottom = top + 1;
+    }
+    else if (command === 'moveRowUp' || command === 'moveRowDown') {
+        const up = command === 'moveRowUp';
+        if (top === 0 || (up ? top === 1 : bottom === rows.length))
+            return false;
+        const moved = rows.splice(top, bottom - top);
+        const destination = top + (up ? -1 : 1);
+        rows.splice(destination, 0, ...moved);
+        top = destination;
+        bottom += up ? -1 : 1;
+    }
+    else {
+        const backward = command === 'moveColumnLeft';
+        if (backward ? left === 0 : right === rect.map.width)
+            return false;
+        for (let index = 0; index < rows.length; index++) {
+            const row = rows[index];
+            const cells = [];
+            row.forEach((cell) => cells.push(cell));
+            const moved = cells.splice(left, right - left);
+            cells.splice(left + (backward ? -1 : 1), 0, ...moved);
+            rows[index] = row.copy(Fragment.fromArray(cells));
+        }
+        left += backward ? -1 : 1;
+        right += backward ? -1 : 1;
+    }
+    const table = rect.table.copy(Fragment.fromArray(rows));
+    const tr = view.state.tr.replaceWith(rect.tableStart - 1, rect.tableStart - 1 + rect.table.nodeSize, table);
+    selectTableRectangle(tr, rect.tableStart, table, top, left, bottom, right);
+    dispatchTableOperation(view, tr);
+    return true;
+}
+export function selectTableRectangle(tr, tableStart, table, top, left, bottom, right) {
+    const map = TableMap.get(table);
+    tr.setSelection(CellSelection.create(tr.doc, tableStart + map.map[top * map.width + left], tableStart + map.map[(bottom - 1) * map.width + right - 1]));
+}
+function compareCells(a, b, comparison, order) {
+    const x = a.trim(), y = b.trim();
+    if (!x || !y)
+        return x === y ? 0 : x ? -1 : 1;
+    const direction = order === 'ascending' ? 1 : -1;
+    const text = (a, b) => (a < b ? -1 : a > b ? 1 : 0);
+    if (comparison === 'text')
+        return direction * text(a, b);
+    const nx = decimalNumber(x), ny = decimalNumber(y);
+    return direction * (nx < ny ? -1 : nx > ny ? 1 : 0);
+}
+function decimalNumber(value) {
+    return /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?$/.test(value) &&
+        Number.isFinite(Number(value))
+        ? Number(value)
+        : undefined;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aicayzer/inkkit",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "A preserving Markdown editor for offline web views and the web",
   "license": "MIT",
   "type": "module",