mdsquare 0.0.0-stage → 0.2.0

package/dist/tableModel.d.ts

@@ -0,0 +1,168 @@
+import type { ChangeSpec, EditorState, Text, TransactionSpec } from "@codemirror/state";
+import type { SyntaxNode } from "@lezer/common";
+import type { MarkdownConfig } from "@lezer/markdown";
+/**
+ * GFM은 표의 첫 줄(TableHeader)을 제목(tags.heading)으로 강조해 밑줄/굵게가 생깁니다.
+ * 제목 행 여부는 표 설정(제목 행 켜고 끄기)으로 그리므로 이 강조를 없앱니다. (칸 안의 굵게 등은 그대로)
+ */
+export declare const TableSyntax: MarkdownConfig;
+export type TableAlign = "left" | "center" | "right" | null;
+export interface TableCellInfo {
+    /** 구분자 사이 구간 (양옆 공백 포함, 구분자 제외) */
+    readonly from: number;
+    readonly to: number;
+    /** 앞뒤 공백을 뺀 내용. 빈 칸이면 커서를 둘 자리(공백이 있으면 첫 공백 뒤) */
+    readonly contentFrom: number;
+    readonly contentTo: number;
+    /**
+     * 화면에 보이는 범위: "|" 바로 옆 공백 한 칸씩(`| a |`의 표준 여백)만 숨기고 나머지 공백은 보입니다.
+     * 커서가 숨긴 범위 "안"에 있으면 입력한 글자가 엉뚱한 자리에 들어가므로, 숨긴 범위는 한 칸이라 안쪽 자리가 없습니다.
+     * 빈 칸은 숨기지 않으며 contentFrom과 같습니다.
+     */
+    readonly textFrom: number;
+    readonly textTo: number;
+    /**
+     * 칸 색 표식: 칸 내용 맨 앞의 `<!--fg:red bg:blue-->` (다른 렌더러에서는 보이지 않는 HTML 주석).
+     * 칸 내용과 함께 움직이므로 직접 편집해도 색이 다른 칸으로 가지 않습니다.
+     * 표식이 있으면 contentFrom/textFrom은 표식 뒤(공백 건너뜀)부터입니다.
+     */
+    readonly marker: CellMarker | null;
+}
+export interface CellMarker {
+    readonly from: number;
+    readonly to: number;
+    readonly fg: TableColorName | null;
+    readonly bg: TableColorName | null;
+}
+/** 색 표식 원문. 색이 없으면 null */
+export declare function cellMarkerText(fg: TableColorName | null, bg: TableColorName | null): string | null;
+export interface TableRowInfo {
+    /** 0: 첫 줄(머리글 줄), 1부터: 본문 줄 */
+    readonly index: number;
+    readonly lineFrom: number;
+    readonly lineTo: number;
+    /** 컨테이너 접두어(`> `, 목록 들여쓰기)를 뺀 행 시작 */
+    readonly from: number;
+    readonly cells: readonly TableCellInfo[];
+    /** 칸을 나누는 "|" (행 앞/뒤의 "|" 포함) */
+    readonly pipes: readonly {
+        readonly from: number;
+        readonly to: number;
+    }[];
+}
+export interface TableOptions {
+    /** 첫 줄을 제목 행으로 보여줄지 (기본 true: GFM의 머리글 줄) */
+    readonly headerRow: boolean;
+    /** 첫 칸을 제목 열로 보여줄지 (기본 false) */
+    readonly headerColumn: boolean;
+}
+export declare const DEFAULT_TABLE_OPTIONS: TableOptions;
+/** 행/열 색 (Notion과 같은 9가지) */
+export declare const TABLE_COLORS: readonly ["gray", "brown", "orange", "yellow", "green", "blue", "purple", "pink", "red"];
+export type TableColorName = (typeof TABLE_COLORS)[number];
+/** 글자 색(`red`) 또는 배경 색(`red-bg`) */
+export type TableColor = TableColorName | `${TableColorName}-bg`;
+export type TableAxis = "row" | "column";
+/** 글자 색과 배경 색 (따로 정함) */
+export interface TableColorPair {
+    readonly fg: TableColorName | null;
+    readonly bg: TableColorName | null;
+}
+/**
+ * 행/열 번호(0부터) → 색. 설정 주석의 `row-2:red row-2:yellow-bg col-1:blue` (1부터 셈: row-1이 첫 행).
+ * 글자 색(`red`)과 배경 색(`red-bg`)은 따로 있어, 한 행/열에 둘 다 지정할 수 있습니다. (칸 색과 같음)
+ */
+export interface TableColors {
+    readonly rows: ReadonlyMap<number, TableColorPair>;
+    readonly columns: ReadonlyMap<number, TableColorPair>;
+}
+/** 표 바로 윗줄의 설정 주석 `<!-- table: header-column -->` */
+export interface TableComment {
+    readonly lineFrom: number;
+    readonly lineTo: number;
+    /** 알 수 없는 단어도 보존해 다시 쓸 때 잃지 않습니다. */
+    readonly words: readonly string[];
+}
+/** 문서 전체에서 표마다 기억하는 정보 (행 내용은 필요할 때 readTableRows로 읽음) */
+export interface TableBlock {
+    /** Table 노드 범위 */
+    readonly from: number;
+    readonly to: number;
+    /** 표의 첫 줄 시작 ~ 마지막 줄 끝 (컨테이너 접두어 포함) */
+    readonly lineFrom: number;
+    readonly lineTo: number;
+    /** 구분 줄(`|---|`) 전체 범위 */
+    readonly delimiterLine: {
+        readonly from: number;
+        readonly to: number;
+    };
+    /** 열 수 (머리글 줄의 칸 수) */
+    readonly columns: number;
+    readonly aligns: readonly TableAlign[];
+    readonly comment: TableComment | null;
+    readonly options: TableOptions;
+    readonly colors: TableColors;
+}
+/** TableHeader/TableRow 노드 → 칸 목록 */
+export declare function readTableRow(doc: Text, node: SyntaxNode, index: number): TableRowInfo;
+/** 구분 줄(`|---|:-:|`)을 행처럼 칸으로 나눕니다. (index -1) */
+export declare function readDelimiterRow(doc: Text, table: TableBlock): TableRowInfo;
+/** Table 노드 → 표 정보 (행 내용은 읽지 않음: 머리글 줄과 구분 줄만) */
+export declare function readTableBlock(state: EditorState, node: SyntaxNode): TableBlock | null;
+/** 표가 들어갈 수 있는 컨테이너 (그 외 블록은 내려가지 않음) */
+export declare const TABLE_CONTAINERS: ReadonlySet<string>;
+/** 문서 전체의 표 (컨테이너만 훑음) */
+export declare function scanTables(state: EditorState): TableBlock[];
+/** 표의 행(머리글 줄 + 본문 줄). 구분 줄은 빠집니다. */
+export declare function readTableRows(state: EditorState, tableNode: SyntaxNode): TableRowInfo[];
+/** pos가 들어 있는 Table 노드 */
+export declare function tableNodeAt(state: EditorState, pos: number): SyntaxNode | null;
+/**
+ * 표 줄의 컨테이너 접두어로 새 줄의 접두어를 만듭니다. `>`와 공백은 그대로,
+ * 목록 기호 등 나머지는 같은 폭의 공백으로 (`- | a |`의 다음 줄은 `  `)
+ */
+export declare function continuationPrefix(prefix: string): string;
+/** 빈 행 원문 `|  |  |` */
+export declare function emptyRow(columns: number): string;
+/** 설정 주석 원문. 기본값과 같으면 null (주석 없음) */
+export declare function commentText(words: readonly string[]): string | null;
+/** 표 설정 하나를 바꾸는 트랜잭션 (설정 주석을 추가/수정/삭제) */
+export declare function setTableOption(state: EditorState, table: TableBlock, option: keyof TableOptions, value: boolean): TransactionSpec | null;
+/** 설정 주석을 words로 바꾸는 변경 (주석 추가/수정/삭제). 바뀌는 것이 없으면 null */
+export declare function commentChange(state: EditorState, table: TableBlock, words: readonly string[]): ChangeSpec | null;
+/** 행/열 하나의 글자 색(fg) 또는 배경 색(bg)을 바꾸는 트랜잭션 (null: 그 색을 없앰, 다른 쪽 색은 그대로) */
+export declare function setTableColor(state: EditorState, table: TableBlock, axis: TableAxis, index: number, kind: "fg" | "bg", color: TableColorName | null): TransactionSpec | null;
+/**
+ * 행/열이 추가·삭제·이동될 때 색 번호를 옮긴 설정 주석 단어들. 바뀌는 것이 없으면 null.
+ * map(옛 번호) → 새 번호들 (빈 배열: 지워짐, 둘: 복제됨)
+ */
+export declare function remapColorWords(table: TableBlock, axis: TableAxis, map: (index: number) => readonly number[]): string[] | null;
+/** 구분 줄의 칸별 내용 범위 (`:---:` 부분, 앞뒤 공백 제외) */
+export declare function delimiterCells(state: EditorState, table: TableBlock): {
+    from: number;
+    to: number;
+}[];
+/** 열 정렬을 바꾸는 트랜잭션 (구분 줄의 그 칸만 바꿈, 길이 유지). 왼쪽은 기본값(`---`)으로 씁니다. */
+export declare function setColumnAlign(state: EditorState, table: TableBlock, column: number, align: TableAlign): TransactionSpec | null;
+/** pos가 있는 줄의 표 행 (머리글 줄/본문 줄). 구분 줄이나 표 밖이면 null. 행 하나만 읽습니다. */
+export declare function tableRowAt(state: EditorState, pos: number): {
+    row: TableRowInfo;
+    table: SyntaxNode;
+} | null;
+/** 머리글보다 많은 칸(GFM에서는 무시)의 시작: 그 앞 "|" 위치. 없으면 줄 끝 */
+export declare function extraCellsFrom(row: TableRowInfo, columns: number): number;
+/**
+ * 행에서 빈 커서가 놓일 수 있는 범위와 행의 처음/끝 커서 자리.
+ * - from ~ to: 첫 칸 시작(앞 "|" 뒤) ~ 마지막 칸 끝(뒤 "|" 앞, 넘치는 칸이 있으면 줄 끝).
+ *   "|" 사이 어디에 입력해도 표 구조는 그대로지만, 앞 "|" 앞(접두어 포함)이나 뒤 "|" 뒤에 입력하면 칸이 새로 생겨
+ *   열이 밀립니다. (화면에서는 그 자리가 보이지 않아 사용자가 알아챌 수 없음)
+ * - start / end: 행의 처음/끝으로 갈 때의 자리 (첫 칸 내용 처음, 마지막 칸 내용 끝 또는 넘치는 칸의 줄 끝)
+ */
+export declare function rowCursorRange(row: TableRowInfo, columns: number): {
+    from: number;
+    to: number;
+    start: number;
+    end: number;
+} | null;
+/** pos를 행의 커서 범위 안으로 옮깁니다. 앞으로 벗어나면 행의 처음, 뒤로 벗어나면 행의 끝 */
+export declare function clampToRow(row: TableRowInfo, columns: number, pos: number): number;

package/dist/tableModel.js

@@ -0,0 +1,433 @@
+import { syntaxTree } from "@codemirror/language";
+import { styleTags } from "@lezer/highlight";
+/**
+ * GFM은 표의 첫 줄(TableHeader)을 제목(tags.heading)으로 강조해 밑줄/굵게가 생깁니다.
+ * 제목 행 여부는 표 설정(제목 행 켜고 끄기)으로 그리므로 이 강조를 없앱니다. (칸 안의 굵게 등은 그대로)
+ */
+export const TableSyntax = {
+    props: [styleTags({ "TableHeader/...": [] })],
+};
+const MARKER_RE = /^<!--\s*((?:(?:fg|bg):[a-z]+\s*)+)-->/;
+/** 칸 내용 앞의 색 표식 해석. 모르는 색이 있으면 표식이 아닙니다. */
+function readMarker(text) {
+    const m = MARKER_RE.exec(text);
+    if (!m)
+        return null;
+    let fg = null;
+    let bg = null;
+    for (const token of m[1].trim().split(/\s+/)) {
+        const [kind, color] = token.split(":");
+        if (!TABLE_COLORS.includes(color))
+            return null;
+        if (kind === "fg")
+            fg = color;
+        else
+            bg = color;
+    }
+    return { length: m[0].length, fg, bg };
+}
+/** 색 표식 원문. 색이 없으면 null */
+export function cellMarkerText(fg, bg) {
+    const tokens = [fg && `fg:${fg}`, bg && `bg:${bg}`].filter(Boolean);
+    return tokens.length > 0 ? `<!--${tokens.join(" ")}-->` : null;
+}
+export const DEFAULT_TABLE_OPTIONS = { headerRow: true, headerColumn: false };
+/** 행/열 색 (Notion과 같은 9가지) */
+export const TABLE_COLORS = ["gray", "brown", "orange", "yellow", "green", "blue", "purple", "pink", "red"];
+const COLOR_WORD = /^(row|col)-(\d+):([a-z]+)(-bg)?$/;
+const EMPTY_COLORS = { rows: new Map(), columns: new Map() };
+function parseColorWord(word) {
+    const m = COLOR_WORD.exec(word);
+    if (!m || !TABLE_COLORS.includes(m[3]) || Number(m[2]) < 1)
+        return null;
+    return { axis: m[1] === "row" ? "row" : "column", index: Number(m[2]) - 1, color: `${m[3]}${m[4] ?? ""}` };
+}
+const colorWord = (axis, index, color) => `${axis === "row" ? "row" : "col"}-${index + 1}:${color}`;
+/** `red-bg` → 배경 색인지와 색 이름 */
+const splitColor = (color) => color.endsWith("-bg") ? { bg: true, name: color.slice(0, -3) } : { bg: false, name: color };
+function colorsOf(comment) {
+    if (!comment)
+        return EMPTY_COLORS;
+    const rows = new Map();
+    const columns = new Map();
+    for (const word of comment.words) {
+        const parsed = parseColorWord(word);
+        if (!parsed)
+            continue;
+        const map = parsed.axis === "row" ? rows : columns;
+        const { bg, name } = splitColor(parsed.color);
+        const pair = map.get(parsed.index) ?? { fg: null, bg: null };
+        map.set(parsed.index, bg ? { ...pair, bg: name } : { ...pair, fg: name });
+    }
+    return rows.size || columns.size ? { rows, columns } : EMPTY_COLORS;
+}
+const OPTION_WORDS = { headerColumn: "header-column", noHeaderRow: "no-header-row" };
+const COMMENT_RE = /^[\s>]*<!--\s*table:([^]*?)-->\s*$/;
+const isSpace = (code) => code === 32 || code === 9;
+function trimRange(doc, from, to) {
+    const text = doc.sliceString(from, to);
+    let start = 0;
+    let end = text.length;
+    while (start < end && isSpace(text.charCodeAt(start)))
+        start++;
+    while (end > start && isSpace(text.charCodeAt(end - 1)))
+        end--;
+    return [from + start, from + end];
+}
+/** TableHeader/TableRow 노드 → 칸 목록 */
+export function readTableRow(doc, node, index) {
+    const pipes = [];
+    for (let child = node.firstChild; child; child = child.nextSibling) {
+        if (child.name === "TableDelimiter")
+            pipes.push({ from: child.from, to: child.to });
+    }
+    // 행 끝은 줄 끝 (머리글 줄은 노드에 뒤 공백이 들어가고 본문 줄은 빠지므로 줄 기준으로 통일)
+    return splitRow(doc, node.from, pipes, index);
+}
+/** 행 시작(접두어 뒤)과 "|" 위치들로 칸을 나눕니다. */
+function splitRow(doc, start, pipes, index) {
+    const line = doc.lineAt(start);
+    const end = line.to;
+    const bounds = [];
+    let prev = start;
+    for (const pipe of pipes) {
+        bounds.push([prev, pipe.from]);
+        prev = pipe.to;
+    }
+    bounds.push([prev, end]);
+    const blank = ([from, to]) => doc.sliceString(from, to).trim() === "";
+    // 앞/뒤 "|" 바깥의 빈 구간은 칸이 아닙니다.
+    if (pipes.length > 0 && blank(bounds[0]))
+        bounds.shift();
+    if (pipes.length > 0 && bounds.length > 0 && blank(bounds[bounds.length - 1]) && bounds[bounds.length - 1][0] === pipes[pipes.length - 1].to) {
+        bounds.pop();
+    }
+    const cells = bounds.map(([from, to]) => {
+        const [trimFrom, contentTo] = trimRange(doc, from, to);
+        const found = trimFrom < contentTo ? readMarker(doc.sliceString(trimFrom, contentTo)) : null;
+        const marker = found && { from: trimFrom, to: trimFrom + found.length, fg: found.fg, bg: found.bg };
+        if (marker) {
+            // 표식 뒤 공백을 건너뛴 곳부터 내용입니다.
+            const [contentFrom] = trimRange(doc, marker.to, contentTo);
+            if (contentFrom < contentTo) {
+                const textTo = contentTo < to ? to - 1 : to;
+                return { from, to, contentFrom, contentTo, textFrom: contentFrom, textTo, marker };
+            }
+            // 표식만 있는 빈 칸: 표식 바로 뒤가 커서 자리 (입력해도 표식이 칸 맨 앞에 남음)
+            return { from, to, contentFrom: marker.to, contentTo: marker.to, textFrom: marker.to, textTo: marker.to, marker };
+        }
+        if (trimFrom < contentTo) {
+            const textFrom = from < trimFrom ? from + 1 : from;
+            const textTo = contentTo < to ? to - 1 : to;
+            return { from, to, contentFrom: trimFrom, contentTo, textFrom, textTo, marker: null };
+        }
+        // 빈 칸: 공백이 있으면 첫 공백 뒤 ("|  |"에 입력하면 "| x |")
+        const caret = Math.min(to, from + 1);
+        return { from, to, contentFrom: caret, contentTo: caret, textFrom: caret, textTo: caret, marker: null };
+    });
+    return { index, lineFrom: line.from, lineTo: line.to, from: start, cells, pipes };
+}
+/** 구분 줄(`|---|:-:|`)을 행처럼 칸으로 나눕니다. (index -1) */
+export function readDelimiterRow(doc, table) {
+    const { from: lineFrom, to: lineTo } = table.delimiterLine;
+    const text = doc.sliceString(lineFrom, lineTo);
+    const start = lineFrom + /^[\s>]*/.exec(text)[0].length;
+    const pipes = [];
+    for (let i = start - lineFrom; i < text.length; i++)
+        if (text[i] === "|")
+            pipes.push({ from: lineFrom + i, to: lineFrom + i + 1 });
+    return splitRow(doc, start, pipes, -1);
+}
+function readAligns(text) {
+    let cells = text.trim();
+    if (cells.startsWith("|"))
+        cells = cells.slice(1);
+    if (cells.endsWith("|"))
+        cells = cells.slice(0, -1);
+    return cells.split("|").map((cell) => {
+        const c = cell.trim();
+        const left = c.startsWith(":");
+        const right = c.endsWith(":") && c.length > 1;
+        return left && right ? "center" : right ? "right" : left ? "left" : null;
+    });
+}
+function readComment(state, tableLine) {
+    if (tableLine <= 1)
+        return null;
+    const line = state.doc.line(tableLine - 1);
+    const match = COMMENT_RE.exec(line.text);
+    if (!match)
+        return null;
+    // 주석이 실제 HTML 주석 블록인지 확인합니다. (코드 블록 안의 글자 등 제외)
+    // resolveInner는 lang-markdown이 HTML 블록 안에 다시 파싱한 HTML 트리로 들어가므로 resolve를 씁니다.
+    const start = line.from + line.text.indexOf("<!--");
+    if (syntaxTree(state).resolve(start, 1).name !== "CommentBlock")
+        return null;
+    const words = match[1].split(/[\s,]+/).filter(Boolean);
+    return { lineFrom: line.from, lineTo: line.to, words };
+}
+function optionsOf(comment) {
+    if (!comment)
+        return DEFAULT_TABLE_OPTIONS;
+    return {
+        headerRow: !comment.words.includes(OPTION_WORDS.noHeaderRow),
+        headerColumn: comment.words.includes(OPTION_WORDS.headerColumn),
+    };
+}
+/** Table 노드 → 표 정보 (행 내용은 읽지 않음: 머리글 줄과 구분 줄만) */
+export function readTableBlock(state, node) {
+    const { doc } = state;
+    const header = node.getChild("TableHeader");
+    let delimiter = null;
+    for (let child = node.firstChild; child; child = child.nextSibling) {
+        if (child.name === "TableDelimiter") {
+            delimiter = child;
+            break;
+        }
+    }
+    if (!header || !delimiter)
+        return null;
+    const first = doc.lineAt(node.from);
+    const delimiterLine = doc.lineAt(delimiter.from);
+    const comment = readComment(state, first.number);
+    return {
+        from: node.from,
+        to: node.to,
+        lineFrom: first.from,
+        lineTo: doc.lineAt(node.to).to,
+        delimiterLine: { from: delimiterLine.from, to: delimiterLine.to },
+        columns: readTableRow(doc, header, 0).cells.length,
+        aligns: readAligns(doc.sliceString(delimiter.from, delimiter.to)),
+        comment,
+        options: optionsOf(comment),
+        colors: colorsOf(comment),
+    };
+}
+/** 표가 들어갈 수 있는 컨테이너 (그 외 블록은 내려가지 않음) */
+export const TABLE_CONTAINERS = new Set([
+    "Document",
+    "Blockquote",
+    "BulletList",
+    "OrderedList",
+    "ListItem",
+]);
+/** 문서 전체의 표 (컨테이너만 훑음) */
+export function scanTables(state) {
+    const tables = [];
+    syntaxTree(state).iterate({
+        enter(node) {
+            if (node.name === "Table") {
+                const table = readTableBlock(state, node.node);
+                if (table)
+                    tables.push(table);
+                return false;
+            }
+            if (!TABLE_CONTAINERS.has(node.name))
+                return false;
+        },
+    });
+    return tables;
+}
+/** 표의 행(머리글 줄 + 본문 줄). 구분 줄은 빠집니다. */
+export function readTableRows(state, tableNode) {
+    const rows = [];
+    for (let child = tableNode.firstChild; child; child = child.nextSibling) {
+        if (child.name === "TableHeader" || child.name === "TableRow")
+            rows.push(readTableRow(state.doc, child, rows.length));
+    }
+    return rows;
+}
+/** pos가 들어 있는 Table 노드 */
+export function tableNodeAt(state, pos) {
+    for (const side of [1, -1]) {
+        for (let node = syntaxTree(state).resolveInner(pos, side); node; node = node.parent) {
+            if (node.name === "Table")
+                return node;
+        }
+    }
+    return null;
+}
+// ---------------------------------------------------------------------------
+// 원문 만들기
+// ---------------------------------------------------------------------------
+/**
+ * 표 줄의 컨테이너 접두어로 새 줄의 접두어를 만듭니다. `>`와 공백은 그대로,
+ * 목록 기호 등 나머지는 같은 폭의 공백으로 (`- | a |`의 다음 줄은 `  `)
+ */
+export function continuationPrefix(prefix) {
+    return prefix.replace(/[^\s>]/g, " ");
+}
+/** 빈 행 원문 `|  |  |` */
+export function emptyRow(columns) {
+    return "|" + "  |".repeat(Math.max(1, columns));
+}
+/** 설정 주석 원문. 기본값과 같으면 null (주석 없음) */
+export function commentText(words) {
+    return words.length > 0 ? `<!-- table: ${words.join(" ")} -->` : null;
+}
+/** 표 설정 하나를 바꾸는 트랜잭션 (설정 주석을 추가/수정/삭제) */
+export function setTableOption(state, table, option, value) {
+    if (table.options[option] === value)
+        return null;
+    const word = option === "headerColumn" ? OPTION_WORDS.headerColumn : OPTION_WORDS.noHeaderRow;
+    const add = option === "headerColumn" ? value : !value;
+    const old = table.comment?.words ?? [];
+    const change = commentChange(state, table, add ? [...old, word] : old.filter((w) => w !== word));
+    return change ? { changes: change } : null;
+}
+/** 설정 주석을 words로 바꾸는 변경 (주석 추가/수정/삭제). 바뀌는 것이 없으면 null */
+export function commentChange(state, table, words) {
+    const old = table.comment?.words ?? [];
+    if (old.length === words.length && old.every((w, i) => w === words[i]))
+        return null;
+    const text = commentText(words);
+    const { doc } = state;
+    if (table.comment) {
+        const { lineFrom, lineTo } = table.comment;
+        // 비면 주석 줄을 줄바꿈까지 지웁니다.
+        if (text === null)
+            return { from: lineFrom, to: Math.min(doc.length, lineTo + 1) };
+        const start = lineFrom + doc.sliceString(lineFrom, lineTo).indexOf("<!--");
+        return { from: start, to: lineTo, insert: text };
+    }
+    if (text === null)
+        return null;
+    // 표 첫 줄 앞에, 같은 컨테이너 접두어를 붙여 넣습니다.
+    const prefix = continuationPrefix(doc.sliceString(table.lineFrom, table.from));
+    return { from: table.lineFrom, insert: `${prefix}${text}\n` };
+}
+/** 행/열 하나의 글자 색(fg) 또는 배경 색(bg)을 바꾸는 트랜잭션 (null: 그 색을 없앰, 다른 쪽 색은 그대로) */
+export function setTableColor(state, table, axis, index, kind, color) {
+    const current = (axis === "row" ? table.colors.rows : table.colors.columns).get(index)?.[kind] ?? null;
+    if (current === color)
+        return null;
+    const words = (table.comment?.words ?? []).filter((w) => {
+        const parsed = parseColorWord(w);
+        return !parsed || parsed.axis !== axis || parsed.index !== index || splitColor(parsed.color).bg !== (kind === "bg");
+    });
+    if (color)
+        words.push(colorWord(axis, index, kind === "bg" ? `${color}-bg` : color));
+    const change = commentChange(state, table, words);
+    return change ? { changes: change } : null;
+}
+/**
+ * 행/열이 추가·삭제·이동될 때 색 번호를 옮긴 설정 주석 단어들. 바뀌는 것이 없으면 null.
+ * map(옛 번호) → 새 번호들 (빈 배열: 지워짐, 둘: 복제됨)
+ */
+export function remapColorWords(table, axis, map) {
+    const words = table.comment?.words;
+    if (!words)
+        return null;
+    let changed = false;
+    const out = [];
+    for (const word of words) {
+        const parsed = parseColorWord(word);
+        if (!parsed || parsed.axis !== axis) {
+            out.push(word);
+            continue;
+        }
+        const targets = map(parsed.index);
+        if (targets.length !== 1 || targets[0] !== parsed.index)
+            changed = true;
+        for (const index of targets)
+            out.push(colorWord(axis, index, parsed.color));
+    }
+    return changed ? out : null;
+}
+/** 구분 줄의 칸별 내용 범위 (`:---:` 부분, 앞뒤 공백 제외) */
+export function delimiterCells(state, table) {
+    const { from: lineFrom, to: lineTo } = table.delimiterLine;
+    const text = state.doc.sliceString(lineFrom, lineTo);
+    const start = /^[\s>]*/.exec(text)[0].length; // 컨테이너 접두어(`> `, 들여쓰기)
+    const cells = [];
+    let segment = start;
+    for (let i = start; i <= text.length; i++) {
+        if (i < text.length && text[i] !== "|")
+            continue;
+        const raw = text.slice(segment, i);
+        const lead = raw.length - raw.trimStart().length;
+        const content = raw.trim();
+        cells.push({ from: lineFrom + segment + lead, to: lineFrom + segment + lead + content.length });
+        segment = i + 1;
+    }
+    // 앞/뒤 "|" 바깥의 빈 조각은 칸이 아닙니다.
+    if (cells.length > 0 && cells[0].from === cells[0].to)
+        cells.shift();
+    if (cells.length > 0 && cells[cells.length - 1].from === cells[cells.length - 1].to)
+        cells.pop();
+    return cells;
+}
+/** 열 정렬을 바꾸는 트랜잭션 (구분 줄의 그 칸만 바꿈, 길이 유지). 왼쪽은 기본값(`---`)으로 씁니다. */
+export function setColumnAlign(state, table, column, align) {
+    const target = align === "left" ? null : align;
+    const current = table.aligns[column] ?? null;
+    if ((current === "left" ? null : current) === target)
+        return null;
+    const cell = delimiterCells(state, table)[column];
+    if (!cell)
+        return null;
+    // 원래 칸 길이를 유지해 원문의 열 맞춤을 흐트러뜨리지 않습니다. (최소 3: `:-:`)
+    const width = Math.max(3, cell.to - cell.from);
+    const insert = target === "center" ? `:${"-".repeat(width - 2)}:` : target === "right" ? `${"-".repeat(width - 1)}:` : "-".repeat(width);
+    return { changes: { from: cell.from, to: cell.to, insert } };
+}
+/** pos가 있는 줄의 표 행 (머리글 줄/본문 줄). 구분 줄이나 표 밖이면 null. 행 하나만 읽습니다. */
+export function tableRowAt(state, pos) {
+    const { doc } = state;
+    const line = doc.lineAt(pos);
+    const isRow = (node) => node.name === "TableHeader" || node.name === "TableRow";
+    // 줄 끝에서 위로 올라가면 그 줄의 행이나(행 노드가 줄 끝 공백을 포함하지 않으면) Table을 만납니다.
+    for (let node = syntaxTree(state).resolveInner(line.to, -1); node; node = node.parent) {
+        let row = null;
+        if (isRow(node))
+            row = node;
+        else if (node.name === "Table") {
+            const before = node.childBefore(line.to);
+            if (before && isRow(before))
+                row = before;
+        }
+        if (row) {
+            if (doc.lineAt(row.from).number !== line.number)
+                return null;
+            return { row: readTableRow(doc, row, row.name === "TableHeader" ? 0 : 1), table: row.parent };
+        }
+        if (node.name === "Table")
+            return null;
+    }
+    return null;
+}
+/** 머리글보다 많은 칸(GFM에서는 무시)의 시작: 그 앞 "|" 위치. 없으면 줄 끝 */
+export function extraCellsFrom(row, columns) {
+    const first = row.cells[columns];
+    if (!first)
+        return row.lineTo;
+    const pipe = row.pipes.filter((p) => p.to <= first.from).pop();
+    return pipe ? pipe.from : first.from;
+}
+/**
+ * 행에서 빈 커서가 놓일 수 있는 범위와 행의 처음/끝 커서 자리.
+ * - from ~ to: 첫 칸 시작(앞 "|" 뒤) ~ 마지막 칸 끝(뒤 "|" 앞, 넘치는 칸이 있으면 줄 끝).
+ *   "|" 사이 어디에 입력해도 표 구조는 그대로지만, 앞 "|" 앞(접두어 포함)이나 뒤 "|" 뒤에 입력하면 칸이 새로 생겨
+ *   열이 밀립니다. (화면에서는 그 자리가 보이지 않아 사용자가 알아챌 수 없음)
+ * - start / end: 행의 처음/끝으로 갈 때의 자리 (첫 칸 내용 처음, 마지막 칸 내용 끝 또는 넘치는 칸의 줄 끝)
+ */
+export function rowCursorRange(row, columns) {
+    const first = row.cells[0];
+    if (!first)
+        return null;
+    const last = row.cells[Math.min(row.cells.length, Math.max(1, columns)) - 1];
+    const extra = row.cells.length > columns;
+    return {
+        from: first.from,
+        to: extra ? row.lineTo : last.to,
+        start: first.textFrom,
+        end: extra ? row.lineTo : last.textTo,
+    };
+}
+/** pos를 행의 커서 범위 안으로 옮깁니다. 앞으로 벗어나면 행의 처음, 뒤로 벗어나면 행의 끝 */
+export function clampToRow(row, columns, pos) {
+    const range = rowCursorRange(row, columns);
+    if (!range)
+        return pos;
+    return pos < range.from ? range.start : pos > range.to ? range.end : pos;
+}

package/dist/tableState.d.ts

@@ -0,0 +1,36 @@
+import { StateField, type EditorState } from "@codemirror/state";
+import { type TableBlock } from "./tableModel.js";
+/** 문서의 모든 표 (문서 순서). 문서/구문 트리/설정이 바뀔 때만 다시 찾습니다. */
+export declare const tablesField: StateField<readonly TableBlock[]>;
+/** pos에서 시작하는(Table 노드 시작이 pos인) 표 */
+export declare function tableBlockAt(state: EditorState, from: number): TableBlock | null;
+/** 칸 범위 (행/열 번호, 양 끝 포함) */
+export interface TableCellRange {
+    readonly fromRow: number;
+    readonly toRow: number;
+    readonly fromColumn: number;
+    readonly toColumn: number;
+}
+export interface TableSelection {
+    /** 표(Table 노드) 시작 */
+    readonly table: number;
+    /** row/column: 손잡이 메뉴, cells: 칸 메뉴 (cells 범위) */
+    readonly kind: "row" | "column" | "cells";
+    readonly index: number;
+    readonly cells?: TableCellRange;
+}
+export declare const setTableSelection: import("@codemirror/state").StateEffectType<TableSelection | null>;
+export declare const tableSelectionField: StateField<TableSelection | null>;
+/** pos가 있는 칸: [행 번호(0: 머리글 줄), 열 번호]. 표 행이 아니면 null */
+export declare function cellIndexAt(state: EditorState, pos: number): {
+    table: number;
+    row: number;
+    column: number;
+} | null;
+/**
+ * 선택이 같은 표의 두 칸 이상에 걸치면 그 사각형 칸 범위 (Notion처럼 칸 단위로 고름). 아니면 null.
+ * 한 칸 안의 선택은 글자 선택입니다.
+ */
+export declare function selectedCells(state: EditorState): (TableCellRange & {
+    table: number;
+}) | null;