@lapismd/mira 0.0.1

package/dist/tables/editor-table.svelte.d.ts

@@ -0,0 +1,12 @@
+import { TableNode } from "./table-node";
+type $$ComponentProps = {
+    node: TableNode;
+    onChange?: (data: string, props?: Record<string, any>) => void;
+    onDelete?: (evt: Event) => void;
+    onMouseUp?: (evt: MouseEvent) => void;
+    selectedCells?: Array<[number, number]>;
+};
+declare const EditorTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditorTable = ReturnType<typeof EditorTable>;
+export default EditorTable;
+//# sourceMappingURL=editor-table.svelte.d.ts.map

package/dist/tables/editor-table.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-table.svelte.d.ts","sourceRoot":"","sources":["../../src/tables/editor-table.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAuCxC,KAAK,gBAAgB,GAAI;IACtB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CACzC,CAAC;AA2wBJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/tables/extension.d.ts

@@ -0,0 +1,19 @@
+import { type Extension } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { TableNode } from "./table-node";
+import type { TableExtensionProps } from "./types";
+export { getGridTableNode, gridTableExtension, gridTableTabAction, } from "./grid-table-extension";
+export declare function getTableNode(view: EditorView): [
+    TableNode | null,
+    {
+        column: number;
+        from: number;
+        to: number;
+        pos: number;
+    }
+];
+export declare function tabAction(delta: number): (view: EditorView) => boolean;
+export declare function tableExtension({ bindEnter, bindTab, }?: Partial<TableExtensionProps>): Extension;
+export declare function tableEnterAction(view: EditorView): boolean;
+export declare function createTableExtensions(): Extension[];
+//# sourceMappingURL=extension.d.ts.map

package/dist/tables/extension.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extension.d.ts","sourceRoot":"","sources":["../../src/tables/extension.ts"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAEL,UAAU,EAOX,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,wBAAwB,CAAC;AAIhC,wBAAgB,YAAY,CAC1B,IAAI,EAAE,UAAU,GACf;IACD,SAAS,GAAG,IAAI;IAChB;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE;CAC1D,CAoBA;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,IAC7B,MAAM,UAAU,KAAG,OAAO,CAqCnC;AAkDD,wBAAgB,cAAc,CAAC,EAC7B,SAAgB,EAChB,OAAc,GACf,GAAE,OAAO,CAAC,mBAAmB,CAAM,GAAG,SAAS,CAsD/C;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,CA+B1D;AAED,wBAAgB,qBAAqB,IAAI,SAAS,EAAE,CAEnD"}

package/dist/tables/extension.js

@@ -0,0 +1,189 @@
+// @ts-nocheck
+import { syntaxTree } from "@codemirror/language";
+import { Prec, Range } from "@codemirror/state";
+import { Decoration, EditorView, keymap, ViewPlugin, ViewUpdate, } from "@codemirror/view";
+import { TableNode } from "./table-node";
+export { getGridTableNode, gridTableExtension, gridTableTabAction, } from "./grid-table-extension";
+import { gridTableExtension } from "./grid-table-extension";
+import { tableLineScrollSync } from "./table-line-scroll-sync";
+export function getTableNode(view) {
+    const cursor = view.state.selection.main.head;
+    const line = view.state.doc.lineAt(cursor);
+    let tableNode = null;
+    const coords = { column: cursor - line.from, from: 0, to: 0, pos: 0 };
+    syntaxTree(view.state).iterate({
+        from: line.from,
+        to: line.to,
+        enter(node) {
+            if (node.name === "Table") {
+                const content = view.state.sliceDoc(node.from, node.to);
+                tableNode = TableNode.fromMarkdown(content);
+                coords.from = node.from;
+                coords.to = node.to;
+                coords.pos = cursor - node.from;
+                return false;
+            }
+        },
+    });
+    return [tableNode, coords];
+}
+export function tabAction(delta) {
+    return (view) => {
+        const [tableNode, coords] = getTableNode(view);
+        if (!tableNode) {
+            return false;
+        }
+        const cell = tableNode.coordsAt(coords.pos);
+        if (!cell) {
+            return false;
+        }
+        let row = cell[0];
+        const column = cell[1];
+        let index = column + delta;
+        if (index >= tableNode.getColCount()) {
+            tableNode.insertColumnAt(index);
+        }
+        if (index < 0) {
+            row--;
+            index = tableNode.getColCount() - 1;
+        }
+        const pos = tableNode.rerender().position(row, index);
+        if (pos) {
+            const head = coords.from + pos.start.offset;
+            const anchor = coords.from + pos.end.offset;
+            view.dispatch({
+                changes: {
+                    insert: tableNode.toMarkdown().trim(),
+                    from: coords.from,
+                    to: coords.to,
+                },
+                selection: { head, anchor },
+            });
+            return true;
+        }
+        return true;
+    };
+}
+const decorationTable = Decoration.line({
+    class: "cm-table cm-formatting-table",
+    attributes: { tabindex: "0" },
+});
+class TableDecoration {
+    decorations;
+    constructor(view) {
+        this.decorations = this.process(view);
+    }
+    update(update) {
+        if (update.docChanged || update.viewportChanged || update.selectionSet)
+            this.decorations = this.process(update.view);
+    }
+    process(view) {
+        const widgets = [];
+        const cachedTableLines = new Set();
+        for (const { from, to } of view.visibleRanges) {
+            syntaxTree(view.state).iterate({
+                from,
+                to,
+                enter(node) {
+                    let line = view.state.doc.lineAt(node.from);
+                    if (node.name === "Table" && !cachedTableLines.has(line.number)) {
+                        cachedTableLines.add(line.number);
+                        do {
+                            widgets.push(decorationTable.range(line.from));
+                            line = view.state.doc.line(line.number + 1);
+                        } while (line.to <= node.to);
+                    }
+                },
+            });
+        }
+        return Decoration.set(widgets.sort((a, b) => {
+            if (a.from == b.from) {
+                return a.value.startSide - b.value.startSide;
+            }
+            return a.from - b.from;
+        }));
+    }
+}
+export function tableExtension({ bindEnter = true, bindTab = true, } = {}) {
+    const keymaps = [];
+    if (bindEnter) {
+        keymaps.push({
+            key: "Enter",
+            run: tableEnterAction,
+            shift: (view) => {
+                const [tableNode, coords] = getTableNode(view);
+                if (!tableNode) {
+                    return false;
+                }
+                const cell = tableNode.coordsAt(coords.pos);
+                if (!cell) {
+                    return false;
+                }
+                const [row] = cell;
+                tableNode.insertRowAt(row + 1);
+                const pos = tableNode.rerender().position(row + 1, 0);
+                if (pos) {
+                    const head = coords.from + pos.start.offset + 1;
+                    const anchor = head;
+                    view.dispatch({
+                        selection: { head, anchor },
+                        changes: {
+                            insert: tableNode.toMarkdown().trim(),
+                            from: coords.from,
+                            to: coords.to,
+                        },
+                    });
+                    return true;
+                }
+                return false;
+            },
+            preventDefault: true,
+        });
+    }
+    if (bindTab) {
+        keymaps.push({
+            key: "Tab",
+            run: tabAction(1),
+            shift: tabAction(-1),
+            preventDefault: true,
+        });
+    }
+    return [
+        Prec.highest(keymap.of(keymaps)),
+        ViewPlugin.fromClass(TableDecoration, {
+            decorations: (v) => v.decorations,
+        }),
+    ];
+}
+export function tableEnterAction(view) {
+    const [tableNode, coords] = getTableNode(view);
+    if (!tableNode) {
+        return false;
+    }
+    const cell = tableNode.coordsAt(coords.pos);
+    if (!cell) {
+        return false;
+    }
+    const [row, col] = cell;
+    if (row + 1 >= tableNode.getRowCount()) {
+        tableNode.insertRowAt(row + 1);
+    }
+    const pos = tableNode.rerender().position(row + 1, col);
+    if (!pos) {
+        return false;
+    }
+    const head = coords.from + pos.start.offset;
+    const anchor = coords.from + pos.end.offset;
+    view.dispatch({
+        selection: { head, anchor },
+        changes: {
+            insert: tableNode.toMarkdown().trim(),
+            from: coords.from,
+            to: coords.to,
+        },
+    });
+    return true;
+}
+export function createTableExtensions() {
+    return [tableExtension(), gridTableExtension(), tableLineScrollSync()];
+}

package/dist/tables/extension.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=extension.test.d.ts.map

package/dist/tables/extension.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extension.test.d.ts","sourceRoot":"","sources":["../../src/tables/extension.test.ts"],"names":[],"mappings":""}

package/dist/tables/extension.test.js

@@ -0,0 +1,100 @@
+import { syntaxTree } from "@codemirror/language";
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { describe, expect, it } from "vitest";
+import { createMarkdownCodeMirrorExtensions } from "../internal/codemirror/markdown/index";
+import { gridTableExtension, gridTableTabAction, tableEnterAction, tableExtension, } from "./extension";
+import { bindTableLineScrollSync } from "./table-line-scroll-sync";
+const markdownTable = [
+    "| Feature | Behavior |",
+    "| --- | --- |",
+    "| Handles | Actions |",
+].join("\n");
+const gridTableMarkdown = [
+    "+---------+----------+",
+    "| Feature | Behavior |",
+    "+=========+==========+",
+    "| Handles | Actions  |",
+    "+---------+----------+",
+].join("\n");
+function createGridTableEditor(cursor) {
+    const parent = document.createElement("div");
+    document.body.append(parent);
+    return new EditorView({
+        parent,
+        state: EditorState.create({
+            doc: gridTableMarkdown,
+            extensions: [
+                createMarkdownCodeMirrorExtensions({ sourceMode: true }),
+                gridTableExtension(),
+            ],
+            selection: { anchor: cursor },
+        }),
+    });
+}
+describe("table extension", () => {
+    it("resolves extension facets for configured keymaps", () => {
+        expect(tableExtension({ bindEnter: false, bindTab: false })).toHaveLength(2);
+        expect(gridTableExtension({ bindEnter: false, bindTab: false })).toHaveLength(2);
+    });
+    it("formats a grid table and selects the next cell on Tab", () => {
+        const view = createGridTableEditor(gridTableMarkdown.indexOf("Feature"));
+        expect(gridTableTabAction(1)(view)).toBe(true);
+        expect(view.state.sliceDoc(view.state.selection.main.from, view.state.selection.main.to)).toBe(" Behavior ");
+        expect(view.state.doc.toString()).not.toMatch(/^\s+\| Feature/m);
+        expect(syntaxTree(view.state).toString()).toContain("GridTable");
+        view.destroy();
+    });
+    it("moves to the same column on the next pipe-table row with Enter", () => {
+        const parent = document.createElement("div");
+        document.body.append(parent);
+        const view = new EditorView({
+            parent,
+            state: EditorState.create({
+                doc: markdownTable,
+                extensions: [createMarkdownCodeMirrorExtensions({ sourceMode: true })],
+                selection: { anchor: markdownTable.indexOf("Behavior") },
+            }),
+        });
+        expect(tableEnterAction(view)).toBe(true);
+        expect(view.state.sliceDoc(view.state.selection.main.from, view.state.selection.main.to)).toContain("Actions");
+        view.destroy();
+    });
+    it("decorates every grid-table source row as monospaced table syntax", () => {
+        const view = createGridTableEditor(gridTableMarkdown.indexOf("Feature"));
+        const tableLines = view.dom.querySelectorAll(".cm-line.cm-table.cm-formatting-table.cm-formatting-grid-table");
+        expect(tableLines).toHaveLength(5);
+        expect(Array.from(tableLines).map((line) => line.getAttribute("tabindex"))).toEqual(["0", "0", "0", "0", "0"]);
+        view.destroy();
+    });
+    it("keeps consecutive source table lines scrolled together", () => {
+        const content = document.createElement("div");
+        const lines = Array.from({ length: 5 }, (_, index) => {
+            const line = document.createElement("div");
+            line.className = index === 3 ? "cm-line" : "cm-line cm-table";
+            content.append(line);
+            return line;
+        });
+        [80, 100, 120, 60, 70].forEach((width, index) => {
+            Object.defineProperty(lines[index], "scrollWidth", { value: width });
+        });
+        const unbind = bindTableLineScrollSync(content);
+        expect(lines.slice(0, 3).map((line) => line.style.paddingInlineEnd)).toEqual(["40px", "20px", "0px"]);
+        expect(lines.slice(0, 3).map((line) => line.tabIndex)).toEqual([0, 0, 0]);
+        expect(lines
+            .slice(0, 3)
+            .map((line) => line.getAttribute("data-mira-table-scroll-sync"))).toEqual(["true", "true", "true"]);
+        lines[0].scrollLeft = 24;
+        lines[0].dispatchEvent(new Event("scroll"));
+        expect(lines.slice(0, 3).map((line) => line.scrollLeft)).toEqual([
+            24, 24, 24,
+        ]);
+        expect(lines[4].scrollLeft).toBe(0);
+        unbind();
+        expect(lines.slice(0, 3).map((line) => line.style.paddingInlineEnd)).toEqual(["", "", ""]);
+        expect(lines.slice(0, 3).map((line) => line.getAttribute("tabindex"))).toEqual([null, null, null]);
+        expect(lines
+            .slice(0, 3)
+            .map((line) => line.getAttribute("data-mira-table-scroll-sync"))).toEqual([null, null, null]);
+    });
+});

package/dist/tables/from-markdown.d.ts

@@ -0,0 +1 @@
+export declare function gridTablesFromMarkdown(options?: any): any;