@aicayzer/inkkit 0.0.4 → 0.0.6

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/dist/types.d.ts

@@ -64,3 +64,17 @@ export interface ClipboardDiagram {
     image?: PortableImage;
     error?: string;
 }
+export interface PrintableWarning {
+    code: 'diagram-unavailable';
+    message: string;
+}
+export interface PrintableDocument {
+    documentId: string;
+    generation: number;
+    revision: number;
+    format: DocumentFormat;
+    html: string;
+    styles: string;
+    assets: readonly PortableImage[];
+    warnings: readonly PrintableWarning[];
+}

package/package.json

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