mdsquare 0.0.0-stage → 0.1.0

package/dist/tableEdit.d.ts

@@ -0,0 +1,30 @@
+import type { ChangeSpec, EditorState, TransactionSpec } from "@codemirror/state";
+import type { TableCellRange } from "./tableState.js";
+import { type TableBlock, type TableColorName } from "./tableModel.js";
+export type TableRowAction = "insertAbove" | "insertBelow" | "duplicate" | "clear" | "delete";
+export type TableColumnAction = "insertLeft" | "insertRight" | "duplicate" | "clear" | "delete";
+/** 행 하나를 지울 때 함께 쓸 색 번호 변경 (표 끝내기 등 table.ts의 명령용) */
+export declare function rowRemovedChange(state: EditorState, table: TableBlock, index: number): ChangeSpec | null;
+/** index번째 행(0: 머리글 줄)에 대한 동작 */
+export declare function editTableRow(state: EditorState, table: TableBlock, index: number, action: TableRowAction): TransactionSpec | null;
+/**
+ * from번째 행을 slot(0..행 수, 옛 번호 기준 행 사이)으로 옮깁니다. 첫 줄이 바뀌면 구분 줄은 새 첫 줄 뒤에 둡니다.
+ * 표의 줄들(머리글 줄 ~ 마지막 행)을 순서만 바꿔 다시 씁니다. (각 줄의 글자와 접두어는 그대로)
+ */
+export declare function moveTableRow(state: EditorState, table: TableBlock, from: number, slot: number): TransactionSpec | null;
+/** column번째 열(0부터)에 대한 동작. 머리글 줄, 구분 줄, 본문 줄을 함께 바꿉니다. */
+export declare function editTableColumn(state: EditorState, table: TableBlock, column: number, action: TableColumnAction): TransactionSpec | null;
+/**
+ * from번째 열을 slot(0..열 수, 옛 번호 기준 열 사이)으로 옮깁니다. 행마다 칸 조각(앞뒤 공백 포함)의 순서만 바꿔 다시 씁니다.
+ * 칸이 모자란 행은 빈 칸으로 채웁니다. (모자란 자리가 옮겨지므로 그대로 둘 수 없음)
+ */
+export declare function moveTableColumn(state: EditorState, table: TableBlock, from: number, slot: number): TransactionSpec | null;
+/**
+ * 칸들의 글자 색(fg) 또는 배경 색(bg)을 바꿉니다. (null: 그 색을 없앰, 다른 쪽 색은 그대로)
+ * 색은 칸 내용 앞의 `<!--fg:red bg:blue-->` 표식에 씁니다. 표식이 비면 지웁니다.
+ */
+export declare function setCellColor(state: EditorState, table: TableBlock, range: TableCellRange, kind: "fg" | "bg", color: TableColorName | null): TransactionSpec | null;
+/** 칸들의 내용을 지웁니다. (색 표식은 남김) */
+export declare function clearCells(state: EditorState, table: TableBlock, range: TableCellRange): TransactionSpec | null;
+/** 칸들의 색: 모두 같으면 그 색, 다르면 undefined */
+export declare function commonCellColor(state: EditorState, table: TableBlock, range: TableCellRange, kind: "fg" | "bg"): TableColorName | null | undefined;

package/dist/tableEdit.js

@@ -0,0 +1,305 @@
+import { cellMarkerText, commentChange, continuationPrefix, emptyRow, readDelimiterRow, readTableRows, remapColorWords, tableNodeAt, } from "./tableModel.js";
+function context(state, table) {
+    const node = tableNodeAt(state, table.from);
+    if (!node || node.from !== table.from)
+        return null;
+    return { state, table, rows: readTableRows(state, node), delimiter: readDelimiterRow(state.doc, table) };
+}
+const lineText = (state, row) => state.doc.sliceString(row.lineFrom, row.lineTo);
+const prefixOf = (state, row) => continuationPrefix(state.doc.sliceString(row.lineFrom, row.from));
+/** 새 칸/행이 at에 생김 */
+const insertedAt = (at) => (i) => [i >= at ? i + 1 : i];
+const removedAt = (at) => (i) => (i === at ? [] : [i > at ? i - 1 : i]);
+const duplicatedAt = (at) => (i) => (i === at ? [i, i + 1] : [i > at ? i + 1 : i]);
+/** 옛 번호 from을 칸 사이 slot(0..n, 옛 번호 기준)으로 옮겼을 때의 새 순서 (새 자리 → 옛 번호). 그대로면 null */
+function moveOrder(count, from, slot) {
+    if (slot === from || slot === from + 1)
+        return null;
+    const order = Array.from({ length: count }, (_, i) => i).filter((i) => i !== from);
+    order.splice(slot > from ? slot - 1 : slot, 0, from);
+    return order;
+}
+const movedBy = (order) => (i) => [order.indexOf(i)];
+/**
+ * 원문 변경 + 색 번호 옮기기 + 커서를 한 트랜잭션으로 묶습니다.
+ * cursor는 변경 뒤 문서의 위치를 돌려줍니다. (설정 주석의 길이가 바뀌면 그 아래가 밀리므로 ChangeSet으로 계산)
+ */
+function finish(state, table, changes, remap, cursor) {
+    const all = [...changes];
+    if (remap) {
+        const words = remapColorWords(table, remap.axis, remap.map);
+        const change = words && commentChange(state, table, words);
+        if (change)
+            all.push(change);
+    }
+    if (all.length === 0)
+        return null;
+    const set = state.changes(all);
+    return cursor ? { changes: set, selection: { anchor: cursor(set) } } : { changes: set };
+}
+/** 표 전체(설정 주석 포함)를 줄째로 지웁니다. */
+function deleteTable(state, table) {
+    const from = table.comment ? table.comment.lineFrom : table.lineFrom;
+    const { doc } = state;
+    // 뒤 줄바꿈을 함께 지우고, 문서 끝이면 앞 줄바꿈을 지웁니다.
+    if (table.lineTo < doc.length)
+        return { changes: { from, to: table.lineTo + 1 } };
+    return { changes: { from: Math.max(0, from - 1), to: table.lineTo } };
+}
+/** 행 하나를 지울 때 함께 쓸 색 번호 변경 (표 끝내기 등 table.ts의 명령용) */
+export function rowRemovedChange(state, table, index) {
+    const words = remapColorWords(table, "row", removedAt(index));
+    return words && commentChange(state, table, words);
+}
+// -- 행 -----------------------------------------------------------------------
+/** index번째 행(0: 머리글 줄)에 대한 동작 */
+export function editTableRow(state, table, index, action) {
+    const cx = context(state, table);
+    const row = cx?.rows[index];
+    if (!cx || !row)
+        return null;
+    const { rows, delimiter } = cx;
+    const columns = Math.max(1, table.columns);
+    const prefix = prefixOf(state, row);
+    const delimiterText = lineText(state, delimiter);
+    // 머리글 줄 아래는 구분 줄 뒤에 이어 붙입니다. (머리글 줄 바로 다음은 구분 줄이어야 함)
+    const after = index === 0 ? delimiter.lineTo : row.lineTo;
+    const newRow = `${prefix}${emptyRow(columns)}`;
+    switch (action) {
+        case "insertBelow":
+            return finish(state, table, [{ from: after, insert: `\n${newRow}` }], { axis: "row", map: insertedAt(index + 1) }, (set) => set.mapPos(after, -1) + 1 + prefix.length + 2);
+        case "insertAbove": {
+            const changes = index > 0
+                ? [{ from: row.lineFrom, insert: `${newRow}\n` }]
+                : // 새 머리글 줄: 새 행 + 구분 줄을 머리글 줄 앞에 넣고, 원래 구분 줄은 지웁니다.
+                    [
+                        { from: row.lineFrom, insert: `${newRow}\n${delimiterText}\n` },
+                        { from: row.lineTo, to: delimiter.lineTo },
+                    ];
+            return finish(state, table, changes, { axis: "row", map: insertedAt(index) }, (set) => set.mapPos(row.lineFrom, -1) + prefix.length + 2);
+        }
+        case "duplicate":
+            return finish(state, table, [{ from: after, insert: `\n${lineText(state, row)}` }], { axis: "row", map: duplicatedAt(index) });
+        case "clear":
+            return finish(state, table, row.cells.filter((c) => c.contentFrom < c.contentTo).map((c) => ({ from: c.contentFrom, to: c.contentTo })), null);
+        case "delete": {
+            if (rows.length === 1)
+                return deleteTable(state, table);
+            const changes = index > 0
+                ? [{ from: row.lineFrom - 1, to: row.lineTo }]
+                : // 머리글 줄을 지우면 첫 본문 행이 머리글 줄이 되므로, 구분 줄을 그 뒤로 옮깁니다.
+                    [
+                        { from: row.lineFrom, to: delimiter.lineTo + 1 },
+                        { from: rows[1].lineTo, insert: `\n${delimiterText}` },
+                    ];
+            return finish(state, table, changes, { axis: "row", map: removedAt(index) });
+        }
+    }
+}
+/**
+ * from번째 행을 slot(0..행 수, 옛 번호 기준 행 사이)으로 옮깁니다. 첫 줄이 바뀌면 구분 줄은 새 첫 줄 뒤에 둡니다.
+ * 표의 줄들(머리글 줄 ~ 마지막 행)을 순서만 바꿔 다시 씁니다. (각 줄의 글자와 접두어는 그대로)
+ */
+export function moveTableRow(state, table, from, slot) {
+    const cx = context(state, table);
+    if (!cx || !cx.rows[from])
+        return null;
+    const { rows, delimiter } = cx;
+    const order = moveOrder(rows.length, from, slot);
+    if (!order)
+        return null;
+    const lines = order.map((i) => lineText(state, rows[i]));
+    lines.splice(1, 0, lineText(state, delimiter));
+    const start = rows[0].lineFrom;
+    const end = rows[rows.length - 1].lineTo;
+    // 옮긴 행의 첫 칸에 커서
+    const target = order.indexOf(from);
+    const offset = lines.slice(0, target === 0 ? 0 : target + 1).reduce((n, l) => n + l.length + 1, 0);
+    const moved = rows[from];
+    const inLine = (moved.cells[0]?.textFrom ?? moved.from) - moved.lineFrom;
+    return finish(state, table, [{ from: start, to: end, insert: lines.join("\n") }], { axis: "row", map: movedBy(order) }, (set) => set.mapPos(start, -1) + offset + inLine);
+}
+// -- 열 -----------------------------------------------------------------------
+/** 행 하나에서 column번째 칸 왼쪽/오른쪽에 칸(filler)을 넣는 변경. 그 칸이 없는 행(모자란 칸)이면 null */
+function insertCell(row, column, side, filler) {
+    const cell = row.cells[column];
+    if (!cell)
+        return null;
+    if (side === "right") {
+        const after = row.pipes.find((p) => p.from === cell.to);
+        return after ? { from: after.to, insert: `${filler}|` } : { from: cell.to, insert: `|${filler}|` };
+    }
+    const before = row.pipes.find((p) => p.to === cell.from);
+    // 앞 "|"가 없는 행(`a | b`)의 첫 칸 앞: "|"로 열어야 칸이 됩니다.
+    return before ? { from: cell.from, insert: `${filler}|` } : { from: cell.from, insert: `|${filler}|` };
+}
+/**
+ * 행 하나에서 column번째 칸과 "|" 하나를 지우는 변경.
+ * 앞/뒤 "|"가 없는 행의 끝 칸이면 옆 "|"를 남겨 바깥 "|"로 씁니다. (`a | b`에서 b를 지우면 `a |`: "|"가 하나도 없으면 표가 아님)
+ */
+function deleteCell(row, column) {
+    const cell = row.cells[column];
+    if (!cell)
+        return null;
+    const before = row.pipes.find((p) => p.to === cell.from);
+    const after = row.pipes.find((p) => p.from === cell.to);
+    if (before && after)
+        return { from: cell.from, to: after.to };
+    if (after) {
+        const last = row.cells[row.cells.length - 1];
+        const closed = row.pipes.some((p) => p.from >= last.to);
+        // 앞 "|"만 있는 한 열 표(`| b`)는 GFM 표가 아니므로, 뒤 "|"가 없는 행에서 한 칸만 남으면 뒤를 닫습니다. (`b |`)
+        if (!closed && row.cells.length === 2)
+            return [{ from: cell.from, to: after.to }, { from: row.lineTo, insert: " |" }];
+        return { from: cell.from, to: after.from };
+    }
+    if (before)
+        return { from: before.to, to: cell.to };
+    return { from: cell.from, to: cell.to };
+}
+/** 행 하나에서 column번째 칸을 복제해 오른쪽에 넣는 변경 */
+function duplicateCell(state, row, column) {
+    const cell = row.cells[column];
+    if (!cell)
+        return null;
+    const text = state.doc.sliceString(cell.from, cell.to);
+    const after = row.pipes.find((p) => p.from === cell.to);
+    return after ? { from: after.to, insert: `${text}|` } : { from: cell.to, insert: `|${text}` };
+}
+/** 머리글 줄, 구분 줄, 본문 줄 순서로 행마다 f를 적용한 변경들 */
+function eachRow(cx, f) {
+    const out = [];
+    const push = (change) => {
+        if (change)
+            out.push(change);
+    };
+    push(f(cx.rows[0], false));
+    push(f(cx.delimiter, true));
+    for (const row of cx.rows.slice(1))
+        push(f(row, false));
+    return out;
+}
+/** column번째 열(0부터)에 대한 동작. 머리글 줄, 구분 줄, 본문 줄을 함께 바꿉니다. */
+export function editTableColumn(state, table, column, action) {
+    const cx = context(state, table);
+    if (!cx || column < 0 || column >= table.columns)
+        return null;
+    const filler = (delimiter) => (delimiter ? "---" : "  ");
+    switch (action) {
+        case "insertLeft":
+            return finish(state, table, eachRow(cx, (row, d) => insertCell(row, column, "left", filler(d))), {
+                axis: "column",
+                map: insertedAt(column),
+            });
+        case "insertRight":
+            return finish(state, table, eachRow(cx, (row, d) => insertCell(row, column, "right", filler(d))), {
+                axis: "column",
+                map: insertedAt(column + 1),
+            });
+        case "duplicate":
+            return finish(state, table, eachRow(cx, (row) => duplicateCell(state, row, column)), {
+                axis: "column",
+                map: duplicatedAt(column),
+            });
+        case "clear": {
+            const changes = [];
+            for (const row of cx.rows) {
+                const cell = row.cells[column];
+                if (cell && cell.contentFrom < cell.contentTo)
+                    changes.push({ from: cell.contentFrom, to: cell.contentTo });
+            }
+            return finish(state, table, changes, null);
+        }
+        case "delete":
+            if (table.columns === 1)
+                return deleteTable(state, table);
+            return finish(state, table, eachRow(cx, (row) => deleteCell(row, column)), { axis: "column", map: removedAt(column) });
+    }
+}
+/**
+ * from번째 열을 slot(0..열 수, 옛 번호 기준 열 사이)으로 옮깁니다. 행마다 칸 조각(앞뒤 공백 포함)의 순서만 바꿔 다시 씁니다.
+ * 칸이 모자란 행은 빈 칸으로 채웁니다. (모자란 자리가 옮겨지므로 그대로 둘 수 없음)
+ */
+export function moveTableColumn(state, table, from, slot) {
+    const cx = context(state, table);
+    const columns = table.columns;
+    if (!cx || from < 0 || from >= columns)
+        return null;
+    const order = moveOrder(columns, from, slot);
+    if (!order)
+        return null;
+    const changes = eachRow(cx, (row, delimiter) => {
+        const segments = row.cells.map((c) => state.doc.sliceString(c.from, c.to));
+        while (segments.length < columns)
+            segments.push(delimiter ? "---" : "  ");
+        const moved = [...order.map((i) => segments[i]), ...segments.slice(columns)];
+        const last = row.cells[row.cells.length - 1];
+        // 앞/뒤 "|"는 원래 행을 따르되, 끝 칸이 비면 "|"로 닫아야 칸이 됩니다.
+        const lead = row.pipes.some((p) => p.from === row.from) || moved[0].trim() === "";
+        const trail = (last ? row.pipes.some((p) => p.from >= last.to) : true) || moved[moved.length - 1].trim() === "";
+        const text = `${lead ? "|" : ""}${moved.join("|")}${trail ? "|" : ""}`;
+        return { from: row.from, to: row.lineTo, insert: text };
+    });
+    return finish(state, table, changes, { axis: "column", map: movedBy(order) });
+}
+// -- 칸 (색 표식, 내용) --------------------------------------------------------------
+/** 칸 범위의 칸들 (모자란 칸은 없으므로 빠짐) */
+function cellsIn(cx, range) {
+    const out = [];
+    for (let r = range.fromRow; r <= range.toRow; r++) {
+        const row = cx.rows[r];
+        if (!row)
+            continue;
+        for (let c = range.fromColumn; c <= range.toColumn; c++) {
+            const cell = row.cells[c];
+            if (cell)
+                out.push(cell);
+        }
+    }
+    return out;
+}
+/**
+ * 칸들의 글자 색(fg) 또는 배경 색(bg)을 바꿉니다. (null: 그 색을 없앰, 다른 쪽 색은 그대로)
+ * 색은 칸 내용 앞의 `<!--fg:red bg:blue-->` 표식에 씁니다. 표식이 비면 지웁니다.
+ */
+export function setCellColor(state, table, range, kind, color) {
+    const cx = context(state, table);
+    if (!cx)
+        return null;
+    const changes = [];
+    for (const cell of cellsIn(cx, range)) {
+        const fg = kind === "fg" ? color : (cell.marker?.fg ?? null);
+        const bg = kind === "bg" ? color : (cell.marker?.bg ?? null);
+        const text = cellMarkerText(fg, bg);
+        const { marker } = cell;
+        const nonEmpty = cell.contentFrom < cell.contentTo;
+        if (marker) {
+            if (marker.fg === fg && marker.bg === bg)
+                continue;
+            // 표식을 지우면 표식 뒤 공백도 함께 (내용이 있을 때)
+            changes.push(text === null ? { from: marker.from, to: nonEmpty ? cell.contentFrom : marker.to } : { from: marker.from, to: marker.to, insert: text });
+        }
+        else if (text !== null) {
+            changes.push({ from: cell.contentFrom, insert: nonEmpty ? `${text} ` : text });
+        }
+    }
+    return changes.length > 0 ? { changes } : null;
+}
+/** 칸들의 내용을 지웁니다. (색 표식은 남김) */
+export function clearCells(state, table, range) {
+    const cx = context(state, table);
+    if (!cx)
+        return null;
+    const changes = cellsIn(cx, range)
+        .filter((c) => c.contentFrom < c.contentTo)
+        .map((c) => ({ from: c.contentFrom, to: c.contentTo }));
+    return changes.length > 0 ? { changes } : null;
+}
+/** 칸들의 색: 모두 같으면 그 색, 다르면 undefined */
+export function commonCellColor(state, table, range, kind) {
+    const cx = context(state, table);
+    if (!cx)
+        return undefined;
+    const colors = new Set(cellsIn(cx, range).map((c) => c.marker?.[kind] ?? null));
+    return colors.size === 1 ? [...colors][0] : undefined;
+}

package/dist/tableMenu.d.ts

@@ -0,0 +1,65 @@
+import { EditorView, ViewPlugin, type PluginValue, type ViewUpdate } from "@codemirror/view";
+declare class TableHandles implements PluginValue {
+    readonly dom: HTMLElement;
+    private readonly rowHandle;
+    private readonly columnHandle;
+    /** 끌 때 놓일 자리를 보여주는 선 */
+    private readonly indicator;
+    private menu;
+    /** 칸 메뉴를 연 화면 좌표 */
+    private menuPoint;
+    private search;
+    private list;
+    private page;
+    private entries;
+    private active;
+    private hover;
+    private drag;
+    /** 끌기를 마친 직후의 click은 메뉴를 열지 않습니다. */
+    private suppressClick;
+    private hideTimer;
+    private readonly view;
+    private readonly onDocumentMouseDown;
+    /** 에디터에 포커스가 없어도(메뉴를 마우스로만 열었을 때) Esc로 닫습니다. */
+    private readonly onDocumentKeyDown;
+    private readonly onScroll;
+    private readonly onDragMove;
+    private readonly onDragEnd;
+    constructor(view: EditorView);
+    private handle;
+    mousemove(event: MouseEvent): void;
+    mouseleave(): void;
+    private scheduleHide;
+    private cancelHide;
+    /** 손잡이/메뉴 위치를 다시 잽니다. (읽기와 쓰기를 나눠 레이아웃을 한 번만 계산) */
+    private place;
+    /** 손잡이 자리 (마우스가 표 위에 있을 때만) */
+    private measureHandles;
+    private dragStart;
+    private dragMove;
+    private dragEnd;
+    private toggleMenu;
+    /** 칸에서 오른쪽 클릭: 고른 칸 범위 안이면 그 범위, 아니면 그 칸의 메뉴를 마우스 자리에 엽니다. */
+    contextmenu(event: MouseEvent): boolean;
+    /** 메뉴를 엽니다. point: 칸 메뉴를 열 화면 좌표 (손잡이 메뉴는 null: 손잡이 옆) */
+    private openMenu;
+    /** 메뉴 키보드: ↑/↓ 항목 이동, Enter 실행, 빈 검색에서 Backspace는 하위 메뉴에서 돌아가기 (Esc는 문서 전체에서 처리) */
+    private menuKey;
+    private setActive;
+    private context;
+    /** 원문을 바꾸는 명령 실행 */
+    private apply;
+    /** 지금 상태로 메뉴 항목들을 만듭니다. */
+    private buildEntries;
+    private switchEntry;
+    private renderMenu;
+    private renderEntry;
+    /** 정렬: 왼쪽/가운데/오른쪽 버튼 (정렬 표시가 없으면 왼쪽) */
+    private alignGroup;
+    closeMenu(refocus?: boolean): void;
+    update(update: ViewUpdate): void;
+    destroy(): void;
+}
+export declare const tableHandles: ViewPlugin<TableHandles, undefined>;
+export declare const tableMenuTheme: import("@codemirror/state").Extension;
+export {};