@aicayzer/inkkit 0.0.7 → 0.0.9

package/dist/tables.d.ts

@@ -1,8 +1,17 @@
 import type { Ctx } from '@milkdown/kit/ctx';
 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';
+import type { EditorState, 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 declare const tableCommands: readonly TableCommand[];
+export declare function tableContext(state: EditorState): {
+    row: number;
+    column: number;
+    rows: number;
+    columns: number;
+} | undefined;
+/** Checks the same default operations without dispatching a transaction. */
+export declare function tableAvailability(ctx: Ctx): Record<TableCommand, boolean>;
 export interface TableOptions {
     rows?: number;
     columns?: number;

package/dist/tables.js

@@ -1,3 +1,4 @@
+import { editorLabels } from './labels.js';
 import { commandsCtx, editorViewCtx } from '@milkdown/kit/core';
 import { tableBlock, tableBlockConfig, } from '@milkdown/kit/component/table-block';
 import { insertTableCommand, exitTable, moveRowCommand, moveColCommand, } from '@milkdown/kit/preset/gfm';
@@ -7,17 +8,92 @@ 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',
-    delete_row: 'Delete row',
-    delete_col: 'Delete column',
-    align_col_left: 'Align left',
-    align_col_center: 'Align center',
-    align_col_right: 'Align right',
-    col_drag_handle: 'Move column',
-    row_drag_handle: 'Move row',
+export const tableCommands = [
+    'insert',
+    'addRowBefore',
+    'addRowAfter',
+    'addColumnBefore',
+    'addColumnAfter',
+    'deleteRow',
+    'deleteColumn',
+    'deleteTable',
+    'alignLeft',
+    'alignCenter',
+    'alignRight',
+    'moveRowUp',
+    'moveRowDown',
+    'moveColumnLeft',
+    'moveColumnRight',
+    'sortRows',
+    'exit',
+];
+export function tableContext(state) {
+    if (!isInTable(state))
+        return undefined;
+    const rect = selectedRect(state);
+    return {
+        row: rect.top,
+        column: rect.left,
+        rows: rect.map.height,
+        columns: rect.map.width,
+    };
+}
+/** Checks the same default operations without dispatching a transaction. */
+export function tableAvailability(ctx) {
+    const view = ctx.get(editorViewCtx);
+    const state = view.state;
+    const commands = ctx.get(commandsCtx);
+    const available = Object.fromEntries(tableCommands.map((name) => [name, false]));
+    available.insert = commands.get(insertTableCommand.key)({ row: 3, col: 2 })(state);
+    const actions = {
+        addRowBefore,
+        addRowAfter,
+        addColumnBefore,
+        addColumnAfter,
+        deleteRow,
+        deleteColumn,
+        deleteTable,
+    };
+    for (const [name, action] of Object.entries(actions))
+        available[name] = action(state);
+    available.exit = commands.get(exitTable.key)()(state);
+    if (!isInTable(state))
+        return available;
+    const rect = selectedRect(state);
+    available.alignLeft = available.alignCenter = available.alignRight = true;
+    if (!editableTable(rect.table))
+        return available;
+    available.moveRowUp = rect.top > 1;
+    available.moveRowDown = rect.top > 0 && rect.bottom < rect.map.height;
+    available.moveColumnLeft = rect.left > 0;
+    available.moveColumnRight = rect.right < rect.map.width;
+    const body = [];
+    rect.table.forEach((row, _offset, index) => {
+        if (index)
+            body.push({ key: clipboardText(row.child(rect.left).content), index });
+    });
+    const sorted = [...body].sort((a, b) => compareCells(a.key, b.key, 'text', 'ascending') || a.index - b.index);
+    available.sortRows = sorted.some((row, index) => row !== body[index]);
+    return available;
+}
+const tableLabels = {
+    add_row: 'tableAddRow',
+    add_col: 'tableAddColumn',
+    delete_row: 'tableDeleteRow',
+    delete_col: 'tableDeleteColumn',
+    align_col_left: 'tableAlignLeft',
+    align_col_center: 'tableAlignCenter',
+    align_col_right: 'tableAlignRight',
+    col_drag_handle: 'tableMoveColumn',
+    row_drag_handle: 'tableMoveRow',
 };
+function tableButton(label) {
+    const span = document.createElement('span');
+    span.setAttribute('role', 'img');
+    span.setAttribute('aria-label', label);
+    span.textContent = label;
+    return span.outerHTML;
+}
 export const tablePlugins = [
     moveRowCommand,
     moveColCommand,
@@ -25,7 +101,7 @@ export const tablePlugins = [
     (ctx) => () => {
         ctx.update(tableBlockConfig.key, (config) => ({
             ...config,
-            renderButton: (type) => `<span role="img" aria-label="${labels[type]}">${labels[type]}</span>`,
+            renderButton: (type) => tableButton(editorLabels(ctx)[tableLabels[type]]),
         }));
     },
     tableBlock,

package/dist/tasks.js

@@ -8,6 +8,8 @@ export const taskListPlugin = $prose(() => new Plugin({
     key: new PluginKey('taskToggle'),
     props: {
         handleClickOn(view, _pos, node, nodePos, event) {
+            if (!view.editable)
+                return false;
             if (node.type.name !== 'list_item' || node.attrs.checked == null)
                 return false;
             const target = event.target;

package/dist/text-ranges.d.ts

@@ -0,0 +1,26 @@
+import type { Node as ProseNode } from '@milkdown/kit/prose/model';
+import type { EditorView } from '@milkdown/kit/prose/view';
+import { type TextRect } from './types.js';
+export interface TextSpan {
+    from: number;
+    to: number;
+    start: number;
+    end: number;
+    kind: 'text' | 'break' | 'embed' | 'separator';
+}
+export interface TextProjection {
+    text: string;
+    spans: TextSpan[];
+}
+export declare function readableProjection(doc: ProseNode): TextProjection;
+export declare function projectionPosition(projection: TextProjection, offset: number, side: -1 | 1): number;
+export declare function projectionOffset(projection: TextProjection, position: number): number;
+export declare function validateOffsets(text: string, from: number, to: number): void;
+export declare function textRect(rect: Pick<TextRect, 'left' | 'top' | 'right' | 'bottom'>): TextRect;
+export declare function formattedRects(view: EditorView, projection: TextProjection, from: number, to: number): TextRect[];
+export declare function literalRects(plain: HTMLTextAreaElement, from: number, to: number): TextRect[];
+export declare function intersectsViewport(rect: Pick<TextRect, 'top' | 'right' | 'bottom' | 'left'>, viewport: TextRect): boolean;
+export declare function literalVisibleRanges(plain: HTMLTextAreaElement, viewport: TextRect): {
+    from: number;
+    to: number;
+}[];

package/dist/text-ranges.js

@@ -0,0 +1,228 @@
+import { InkKitError } from './types.js';
+export function readableProjection(doc) {
+    const result = { text: '', spans: [] };
+    let blocks = 0;
+    const append = (text, start, end, kind) => {
+        const from = result.text.length;
+        result.text += text;
+        result.spans.push({ from, to: result.text.length, start, end, kind });
+    };
+    const block = (start) => {
+        if (blocks++)
+            append('\n', result.spans.at(-1)?.end ?? start, start, 'separator');
+    };
+    doc.descendants((node, position) => {
+        const name = node.type.name;
+        if (name === 'comment_inline' ||
+            name === 'comment_block' ||
+            name === 'reference_definition')
+            return false;
+        if (name === 'inkkit_callout') {
+            block(position);
+            append(node.attrs.title ||
+                String(node.attrs.kind).replace(/^./, (value) => value.toUpperCase()), position, position + 1, 'embed');
+            return true;
+        }
+        if (node.isTextblock) {
+            block(position + 1);
+            if (!node.content.size)
+                append('', position + 1, position + 1, 'text');
+            return true;
+        }
+        if (node.isText) {
+            append(node.text ?? '', position, position + node.nodeSize, 'text');
+            return false;
+        }
+        if (name === 'hardbreak' || name === 'hard_break') {
+            append('\n', position, position + node.nodeSize, 'break');
+            return false;
+        }
+        if (name === 'image' || name === 'footnote_reference') {
+            append(name === 'image'
+                ? String(node.attrs.alt ?? '').replace(/\|\d{1,5}$/, '') || 'Image'
+                : `[${node.attrs.label}]`, position, position + node.nodeSize, 'embed');
+            return false;
+        }
+        return true;
+    });
+    return result;
+}
+export function projectionPosition(projection, offset, side) {
+    const spans = projection.spans;
+    const span = spans.find((span) => (offset > span.from && offset < span.to) ||
+        (side > 0 ? offset === span.from : offset === span.to)) ?? (side > 0 ? spans.at(-1) : spans[0]);
+    if (!span)
+        return 0;
+    if (span.kind === 'text')
+        return (span.start +
+            Math.max(0, Math.min(offset - span.from, span.to - span.from)));
+    return offset <= span.from ? span.start : span.end;
+}
+export function projectionOffset(projection, position) {
+    for (const span of projection.spans) {
+        if (position < span.start)
+            return span.from;
+        if (position <= span.end)
+            return span.kind === 'text'
+                ? span.from + Math.max(0, position - span.start)
+                : position === span.start
+                    ? span.from
+                    : span.to;
+    }
+    return projection.text.length;
+}
+export function validateOffsets(text, from, to) {
+    const split = (offset) => offset > 0 &&
+        offset < text.length &&
+        /[\uD800-\uDBFF]/.test(text[offset - 1]) &&
+        /[\uDC00-\uDFFF]/.test(text[offset]);
+    if (!Number.isInteger(from) ||
+        !Number.isInteger(to) ||
+        from < 0 ||
+        to < from ||
+        to > text.length ||
+        split(from) ||
+        split(to))
+        throw new InkKitError('invalid-range', 'Range must use valid UTF-16 boundaries in the text snapshot');
+}
+export function textRect(rect) {
+    return {
+        left: rect.left,
+        top: rect.top,
+        right: rect.right,
+        bottom: rect.bottom,
+        width: Math.max(0, rect.right - rect.left),
+        height: Math.max(0, rect.bottom - rect.top),
+    };
+}
+export function formattedRects(view, projection, from, to) {
+    if (from === to) {
+        const position = projectionPosition(projection, from, 1);
+        const dom = view.domAtPos(position);
+        const element = dom.node.nodeType === 1 ? dom.node : dom.node.parentElement;
+        if (!element?.getClientRects().length)
+            return [];
+        return [textRect(view.coordsAtPos(position))];
+    }
+    const rects = [];
+    for (const span of projection.spans) {
+        if (span.to <= from || span.from >= to || span.kind === 'separator')
+            continue;
+        if (span.kind === 'embed' || span.kind === 'break') {
+            const node = view.nodeDOM(span.start);
+            if (node instanceof Element) {
+                const label = node.matches('.inkkit-callout')
+                    ? (node.querySelector(':scope > .inkkit-callout-header > .inkkit-callout-title') ?? node)
+                    : node;
+                rects.push(...Array.from(label.getClientRects(), textRect));
+            }
+            continue;
+        }
+        const start = view.domAtPos(span.start + Math.max(0, from - span.from), 1);
+        const end = view.domAtPos(span.start + Math.min(span.to - span.from, to - span.from), -1);
+        const range = view.dom.ownerDocument.createRange();
+        range.setStart(start.node, start.offset);
+        range.setEnd(end.node, end.offset);
+        rects.push(...Array.from(range.getClientRects(), textRect));
+    }
+    return rects.filter((rect) => rect.height > 0 && rect.width >= 0);
+}
+function withLiteralLayout(plain, measure) {
+    if (!plain.clientWidth || !plain.clientHeight)
+        return undefined;
+    const document = plain.ownerDocument;
+    const style = document.defaultView.getComputedStyle(plain);
+    const mirror = document.createElement('div');
+    for (const property of [
+        'font',
+        'font-family',
+        'font-size',
+        'font-weight',
+        'font-style',
+        'font-stretch',
+        'font-variant',
+        'line-height',
+        'letter-spacing',
+        'word-spacing',
+        'tab-size',
+        'padding',
+        'text-indent',
+        'text-transform',
+        'direction',
+        'word-break',
+    ])
+        mirror.style.setProperty(property, style.getPropertyValue(property));
+    const origin = plain.getBoundingClientRect();
+    Object.assign(mirror.style, {
+        position: 'fixed',
+        visibility: 'hidden',
+        pointerEvents: 'none',
+        left: `${origin.left + plain.clientLeft - plain.scrollLeft}px`,
+        top: `${origin.top + plain.clientTop - plain.scrollTop}px`,
+        width: `${plain.clientWidth}px`,
+        boxSizing: 'border-box',
+        whiteSpace: plain.wrap === 'off' ? 'pre' : 'pre-wrap',
+        overflowWrap: plain.wrap === 'off' ? 'normal' : 'break-word',
+    });
+    mirror.setAttribute('aria-hidden', 'true');
+    const text = document.createTextNode(plain.value + '\u200b');
+    mirror.append(text);
+    document.body.append(mirror);
+    try {
+        return measure(text);
+    }
+    finally {
+        mirror.remove();
+    }
+}
+export function literalRects(plain, from, to) {
+    return (withLiteralLayout(plain, (text) => {
+        const range = plain.ownerDocument.createRange();
+        range.setStart(text, from);
+        range.setEnd(text, from === to ? Math.min(to + 1, text.length) : to);
+        return Array.from(range.getClientRects(), (rect) => textRect({
+            left: rect.left,
+            right: from === to ? rect.left : rect.right,
+            top: rect.top,
+            bottom: rect.bottom,
+        }));
+    }) ?? []);
+}
+export function intersectsViewport(rect, viewport) {
+    return (viewport.width > 0 &&
+        viewport.height > 0 &&
+        rect.bottom > viewport.top &&
+        rect.top < viewport.bottom &&
+        rect.right >= viewport.left &&
+        rect.left < viewport.right);
+}
+export function literalVisibleRanges(plain, viewport) {
+    return (withLiteralLayout(plain, (text) => {
+        const range = plain.ownerDocument.createRange();
+        const ranges = [];
+        const visible = (from, to) => {
+            range.setStart(text, from);
+            range.setEnd(text, to);
+            return Array.from(range.getClientRects()).some((rect) => intersectsViewport(rect, viewport));
+        };
+        for (let start = 0; start < plain.value.length;) {
+            const newline = plain.value.indexOf('\n', start);
+            const end = newline < 0 ? plain.value.length : newline + 1;
+            if (visible(start, end)) {
+                for (let from = start; from < end;) {
+                    const to = from + (plain.value.codePointAt(from) > 0xffff ? 2 : 1);
+                    if (visible(from, to)) {
+                        const previous = ranges.at(-1);
+                        if (previous?.to === from)
+                            previous.to = to;
+                        else
+                            ranges.push({ from, to });
+                    }
+                    from = to;
+                }
+            }
+            start = end;
+        }
+        return ranges;
+    }) ?? []);
+}

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' | 'diagram-unavailable';
+export type EditorErrorCode = 'not-ready' | 'stale-document' | 'composition' | 'read-only' | 'operation-pending' | 'destroyed' | 'preservation' | 'image-unavailable' | 'diagram-unavailable' | 'invalid-range';
 export declare class InkKitError extends Error {
     readonly code: EditorErrorCode;
     constructor(code: EditorErrorCode, message: string);
@@ -78,3 +78,42 @@ export interface PrintableDocument {
     assets: readonly PortableImage[];
     warnings: readonly PrintableWarning[];
 }
+export interface TextRange {
+    snapshotId: string;
+    from: number;
+    to: number;
+}
+export interface ReadableTextSnapshot {
+    snapshotId: string;
+    documentId: string;
+    generation: number;
+    revision: number;
+    format: DocumentFormat;
+    mode: 'source' | 'formatted';
+    text: string;
+    selection: TextRange;
+}
+export interface TextRect {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+export interface ViewportInsets {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface ViewportOptions {
+    scrollContainer?: HTMLElement;
+    insets?: Partial<ViewportInsets>;
+}
+export interface ViewportSnapshot {
+    rect: TextRect;
+    insets: ViewportInsets;
+    scrollTop: number;
+    scrollLeft: number;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aicayzer/inkkit",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "A preserving Markdown editor for offline web views and the web",
   "license": "MIT",
   "type": "module",
@@ -42,7 +42,8 @@
     "dev": "vite playground",
     "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"
+    "check": "pnpm typecheck && pnpm test && pnpm build && pnpm test:package",
+    "test:browser": "playwright test --project=chromium"
   },
   "dependencies": {
     "@milkdown/kit": "7.22.1",
@@ -68,6 +69,7 @@
     "prosemirror-search": "^1.1.1"
   },
   "devDependencies": {
+    "@playwright/test": "^1.64.0",
     "@types/hast": "^3.0.5",
     "@types/mdast": "^4.0.4",
     "@types/node": "^26.6.2",