mdsquare 0.0.0-stage → 0.1.0

package/dist/table.js

@@ -0,0 +1,960 @@
+import { EditorSelection, EditorState as State, Facet, Prec, RangeSet, } from "@codemirror/state";
+import { BlockWrapper, Decoration, EditorView, ViewPlugin, WidgetType, keymap, } from "@codemirror/view";
+import { TABLE_CONTAINERS, clampToRow, extraCellsFrom, readTableRow, readTableRows, tableNodeAt, rowCursorRange, tableRowAt, TABLE_COLORS, } from "./tableModel.js";
+import { editTableRow, rowRemovedChange } from "./tableEdit.js";
+import { tableHandles, tableMenuTheme } from "./tableMenu.js";
+import { selectedCells, tableBlockAt, tablesField, tableSelectionField, } from "./tableState.js";
+import { RevealTracker, createRevealField, needsRebuild } from "./utils/reveal.js";
+import { iterateVisibleSyntaxTree } from "./utils/syntaxTree.js";
+// ---------------------------------------------------------------------------
+// 표 전체를 감싸는 격자 (BlockWrapper)
+//   <div class="cm-table" style="--cm-table-columns: N">  ← grid: N개 열 + 남는 폭
+//     <div class="cm-line cm-table-row">                   ← subgrid: 칸이 표의 열에 맞춰짐
+//       <span class="cm-table-cell cm-table-col-0">…</span> …
+// 줄마다 따로 그려지는 CodeMirror 줄들이 subgrid로 같은 열 너비를 공유하므로, 열 너비는 브라우저가
+// 표처럼 내용에 맞춰 정합니다. (넓으면 칸 안에서 줄바꿈)
+// ---------------------------------------------------------------------------
+const wrapperCache = new Map();
+function wrapper(columns, classes) {
+    const key = `${columns}|${classes}`;
+    let value = wrapperCache.get(key);
+    if (!value) {
+        value = BlockWrapper.create({
+            tagName: "div",
+            attributes: { class: classes, style: `--cm-table-columns: ${columns}` },
+        });
+        wrapperCache.set(key, value);
+    }
+    return value;
+}
+const tableWrappers = EditorView.blockWrappers.compute([tablesField], (state) => {
+    const ranges = state.field(tablesField).map((table) => {
+        const cls = ["cm-table"];
+        if (table.options.headerRow)
+            cls.push("cm-table-header-row");
+        if (table.options.headerColumn)
+            cls.push("cm-table-header-column");
+        return wrapper(Math.max(1, table.columns), cls.join(" ")).range(table.lineFrom, table.lineTo);
+    });
+    return RangeSet.of(ranges);
+});
+// ---------------------------------------------------------------------------
+// 숨기는 줄: 구분 줄(|---|)과 설정 주석. 커서가 그 줄에 닿으면 원문을 보여줍니다.
+// ---------------------------------------------------------------------------
+class HiddenLineWidget extends WidgetType {
+    toDOM() {
+        const el = document.createElement("div");
+        el.className = "cm-table-hidden-line";
+        return el;
+    }
+    eq() {
+        return true;
+    }
+    get estimatedHeight() {
+        return 0;
+    }
+}
+const hiddenLine = Decoration.replace({ block: true, widget: new HiddenLineWidget() });
+const hiddenLinesField = createRevealField({
+    scan(state) {
+        const lines = [];
+        for (const table of state.field(tablesField)) {
+            if (table.comment)
+                lines.push({ from: table.comment.lineFrom, to: table.comment.lineTo });
+            lines.push(table.delimiterLine);
+        }
+        return lines;
+    },
+    build(items, revealed) {
+        return Decoration.set(items.flatMap((line, i) => (revealed[i] ? [] : [hiddenLine.range(line.from, line.to)])));
+    },
+});
+// ---------------------------------------------------------------------------
+// 행 꾸밈 (보이는 범위만)
+// ---------------------------------------------------------------------------
+/** 칸 수가 모자란 행의 빈 칸 (display: contents라 칸마다 격자 칸이 됨) */
+class MissingCellsWidget extends WidgetType {
+    /** 칸마다 클래스 */
+    classes;
+    constructor(classes) {
+        super();
+        this.classes = classes;
+    }
+    toDOM() {
+        const el = document.createElement("span");
+        el.className = "cm-table-missing";
+        for (const cls of this.classes) {
+            const cell = document.createElement("span");
+            cell.className = `${cls} cm-table-cell-missing`;
+            el.appendChild(cell);
+        }
+        return el;
+    }
+    eq(other) {
+        return other.classes.join("\n") === this.classes.join("\n");
+    }
+    ignoreEvent() {
+        return false;
+    }
+}
+/** ` cm-table-col-fg-red cm-table-row-bg-blue` (글자 색과 배경 색 따로) */
+const colorClasses = (axis, pair) => (pair?.fg ? ` cm-table-${axis}-fg-${pair.fg}` : "") + (pair?.bg ? ` cm-table-${axis}-bg-${pair.bg}` : "");
+const cellClass = (col, align, selected) => `cm-table-cell cm-table-col-${col}${align ? ` cm-table-align-${align}` : ""}${selected}`;
+const markCache = new Map();
+function cached(key, create) {
+    let deco = markCache.get(key);
+    if (!deco)
+        markCache.set(key, (deco = create()));
+    return deco;
+}
+// inclusive: 칸 경계에 있는 숨긴 조각("|", 공백)도 칸 요소 안에 그려지도록 합니다.
+const cellMark = (col, align, selected) => cached(`cell:${col}:${align}:${selected}`, () => Decoration.mark({ class: cellClass(col, align, selected), inclusive: true }));
+const rowLine = (index, indent) => cached(`line:${index === 0}:${indent}`, () => Decoration.line({
+    class: `cm-table-row${index === 0 ? " cm-table-row-0" : ""}${indent > 0 ? ` cm-table-indent cm-table-indent-${indent}` : ""}`,
+}));
+const extraMark = Decoration.mark({
+    class: "cm-table-extra",
+    attributes: { title: "머리글보다 많은 칸 (GFM에서는 무시됨). 칸 안에 | 를 쓰려면 \\| 로 쓰세요." },
+});
+const delimiterLine = Decoration.line({ class: "cm-table-delimiter-row" });
+const markerMark = Decoration.mark({ class: "cm-formatting cm-table-cell-marker" });
+const hidden = Decoration.replace({});
+const atom = Decoration.mark({});
+/** 목록 안 표의 들여쓰기(인용 기호 뒤 공백) 폭. 줄 왼쪽 여백으로 바꿔 그립니다. */
+const MAX_INDENT = 40;
+function indentOf(prefix) {
+    return Math.min(MAX_INDENT, prefix.replace(/^(?:[ \t]*>[ ]?)*/, "").length);
+}
+/**
+ * 메뉴로 고른 행/열의 테두리 클래스. 칸마다 바깥쪽 변만 그려 행/열 전체를 하나의 상자로 감쌉니다.
+ * (열: 모든 칸의 좌우 + 첫 행 위 + 마지막 행 아래, 행: 모든 칸의 위아래 + 첫 칸 왼쪽 + 마지막 칸 오른쪽)
+ */
+function selectedClass(selection, col, row, columns, lastRow) {
+    if (!selection)
+        return "";
+    if (selection.kind === "cells" && selection.cells) {
+        const r = selection.cells;
+        if (row < r.fromRow || row > r.toRow || col < r.fromColumn || col > r.toColumn)
+            return "";
+        return (" cm-table-sel cm-table-picked" +
+            (row === r.fromRow ? " cm-table-sel-t" : "") +
+            (row === r.toRow ? " cm-table-sel-b" : "") +
+            (col === r.fromColumn ? " cm-table-sel-l" : "") +
+            (col === r.toColumn ? " cm-table-sel-r" : ""));
+    }
+    if (selection.kind === "column" && selection.index === col) {
+        return ` cm-table-sel cm-table-sel-l cm-table-sel-r${row === 0 ? " cm-table-sel-t" : ""}${row === lastRow ? " cm-table-sel-b" : ""}`;
+    }
+    if (selection.kind === "row" && selection.index === row) {
+        return ` cm-table-sel cm-table-sel-t cm-table-sel-b${col === 0 ? " cm-table-sel-l" : ""}${col === columns - 1 ? " cm-table-sel-r" : ""}`;
+    }
+    return "";
+}
+function decorateRow(state, row, table, selection, lastRow, reveal, out) {
+    const { doc } = state;
+    const { cells, pipes } = row;
+    const columns = table.columns;
+    // 꾸밈 클래스: 고른 행/열 테두리 + 행/열 색 (행 색이 열 색보다 우선: 테마에서 뒤에 정의)
+    const rowColor = colorClasses("row", table.colors.rows.get(row.index));
+    const selected = (col) => selectedClass(selection, col, row.index, columns, lastRow) + colorClasses("col", table.colors.columns.get(col)) + rowColor;
+    const prefix = doc.sliceString(row.lineFrom, row.from);
+    const indent = indentOf(prefix);
+    out.decorations.push(rowLine(row.index, indent).range(row.lineFrom));
+    // 목록 들여쓰기 공백은 숨기고 줄 왼쪽 여백으로 그립니다. (`>`는 quote()가 숨기거나 보여줌)
+    if (indent > 0)
+        out.decorations.push(hidden.range(row.from - indent, row.from));
+    const real = Math.min(cells.length, columns);
+    // 머리글보다 많은 칸: 바로 앞 "|"부터 줄 끝까지 원문 그대로, 마지막 칸 안에 흐리게 (칸 안에서 줄바꿈되어 넘치지 않음)
+    const end = row.lineTo;
+    let extraFrom = row.lineTo;
+    if (cells.length > columns) {
+        extraFrom = extraCellsFrom(row, columns);
+        out.decorations.push(extraMark.range(extraFrom, row.lineTo));
+    }
+    // 줄의 모든 글자가 어느 칸에 속하도록 칸 범위를 잡습니다. (접두어와 앞 "|"는 첫 칸, 칸 뒤 "|"는 그 칸, 줄 끝 공백은 마지막 칸)
+    // 칸 밖에 남는 조각이 있으면 격자 칸을 차지하거나, 숨긴 조각의 위치로 커서 좌표를 재게 됩니다.
+    for (let i = 0; i < real; i++) {
+        const cell = cells[i];
+        const align = table.aligns[i] ?? null;
+        const from = i === 0 ? row.lineFrom : cell.from;
+        const after = pipes.find((p) => p.from >= cell.to);
+        const to = i === real - 1 ? end : after ? after.to : end;
+        const { marker } = cell;
+        const cellColor = marker
+            ? `${marker.fg ? ` cm-table-cell-fg-${marker.fg}` : ""}${marker.bg ? ` cm-table-cell-bg-${marker.bg}` : ""}`
+            : "";
+        if (from < to)
+            out.outer.push(cellMark(i, align, selected(i) + cellColor).range(from, to));
+        const nonEmpty = cell.contentFrom < cell.contentTo;
+        // 색 표식: 커서가 닿으면 원문(흐리게), 아니면 숨김. 표식 뒤 공백까지 닿는 범위로 봅니다.
+        // (키보드로는 칸 내용 처음까지만 가므로, 표식 끝만 보면 펼칠 방법이 없음)
+        const revealed = marker ? reveal(marker.from, Math.max(marker.to, cell.textFrom)) : false;
+        if (marker && revealed) {
+            if (cell.from < marker.from)
+                out.decorations.push(hidden.range(cell.from, marker.from));
+            out.decorations.push(markerMark.range(marker.from, marker.to));
+        }
+        else if (marker || nonEmpty) {
+            // "|" 바로 옆 공백 한 칸씩만 숨깁니다. (빈 칸의 공백은 커서 자리로 남김) 표식이 있으면 표식과 그 뒤 공백까지.
+            // 공백을 모두 숨기면 내용 뒤에 친 공백이 숨긴 범위 안에 들어가, 이어서 입력한 글자가 엉뚱한 자리에 들어갑니다.
+            if (cell.from < cell.textFrom)
+                out.decorations.push(hidden.range(cell.from, cell.textFrom));
+        }
+        if (nonEmpty && cell.textTo < cell.to)
+            out.decorations.push(hidden.range(cell.textTo, cell.to));
+        // 칸 사이(보이는 글자 끝 ~ 다음 칸 보이는 글자 시작)는 한 번에 건너뜁니다. (펼친 표식 안으로는 들어갈 수 있게)
+        const start = i === 0 ? row.from : cells[i - 1].textTo;
+        const stop = revealed ? marker.from : cell.textFrom;
+        if (start < stop)
+            out.atomic.push(atom.range(start, stop));
+    }
+    if (real === 0 && row.lineFrom < end)
+        out.outer.push(cellMark(0, table.aligns[0] ?? null, selected(0)).range(row.lineFrom, end));
+    // "|"는 숨깁니다. 마지막 칸 뒤의 "|"는 줄 끝 공백까지 함께 숨깁니다.
+    const lastCellEnd = real > 0 ? cells[real - 1].to : row.from;
+    for (const pipe of pipes) {
+        if (pipe.from >= extraFrom)
+            break;
+        const trailing = pipe.from >= lastCellEnd && extraFrom === row.lineTo;
+        out.decorations.push(hidden.range(pipe.from, trailing ? row.lineTo : pipe.to));
+    }
+    if (real > 0 && cells.length <= columns) {
+        const last = cells[real - 1];
+        if (last.textTo < row.lineTo)
+            out.atomic.push(atom.range(last.textTo, row.lineTo));
+    }
+    // 칸 수가 모자라면 빈 칸 모양을 채웁니다.
+    const missingFrom = Math.max(real, 1);
+    if (missingFrom < columns) {
+        const classes = [];
+        for (let i = missingFrom; i < columns; i++)
+            classes.push(cellClass(i, table.aligns[i] ?? null, selected(i)));
+        out.decorations.push(Decoration.widget({ widget: new MissingCellsWidget(classes), side: 1 }).range(row.lineTo));
+    }
+}
+const sameRange = (a, b) => a === b ||
+    (!!a && !!b && a.fromRow === b.fromRow && a.toRow === b.toRow && a.fromColumn === b.fromColumn && a.toColumn === b.toColumn);
+class TableRowsPlugin {
+    decorations = Decoration.none;
+    outer = Decoration.none;
+    atomic = Decoration.none;
+    /** 칸 범위를 고른 중인지 (CodeMirror의 글자 선택 표시를 숨김) */
+    cellSelection = null;
+    /** 색 표식의 펼침 여부 (선택만 바뀌었을 때 다시 그릴지 판단) */
+    tracker = new RevealTracker();
+    constructor(view) {
+        this.build(view);
+    }
+    update(update) {
+        const cells = update.selectionSet ? selectedCells(update.state) : this.cellSelection;
+        if (needsRebuild(update) ||
+            update.startState.field(tablesField) !== update.state.field(tablesField) ||
+            update.startState.field(tableSelectionField) !== update.state.field(tableSelectionField) ||
+            (update.selectionSet && (this.tracker.changed(update.state.selection) || !sameRange(cells, this.cellSelection) || cells?.table !== this.cellSelection?.table))) {
+            this.build(update.view);
+        }
+    }
+    build(view) {
+        const { state } = view;
+        const out = { decorations: [], outer: [], atomic: [] };
+        const ranges = view.visibleRanges;
+        const visible = (from, to) => ranges.some((r) => from <= r.to && to >= r.from);
+        const menu = state.field(tableSelectionField, false) ?? null;
+        const cells = selectedCells(state);
+        this.cellSelection = cells;
+        const tracker = this.tracker;
+        tracker.reset();
+        // 칸 범위를 고른 동안에는 색 표식을 펼치지 않습니다. (선택이 표식을 덮어 모두 펼쳐짐)
+        const reveal = (from, to) => !cells && tracker.track(state.selection, from, to);
+        iterateVisibleSyntaxTree(view, {
+            enter(node) {
+                if (node.name === "Table") {
+                    const table = tableBlockAt(state, node.from);
+                    if (!table)
+                        return false;
+                    // 메뉴로 고른 행/열/칸이 있으면 그것을, 없으면 드래그로 고른 칸 범위를 표시합니다.
+                    const picked = menu?.table === table.from
+                        ? menu
+                        : cells?.table === table.from
+                            ? { table: table.from, kind: "cells", index: 0, cells }
+                            : null;
+                    let lastRow = -1;
+                    for (let child = node.node.firstChild; child; child = child.nextSibling) {
+                        if (child.name === "TableHeader" || child.name === "TableRow")
+                            lastRow++;
+                    }
+                    let index = 0;
+                    for (let child = node.node.firstChild; child; child = child.nextSibling) {
+                        if (child.name === "TableHeader" || child.name === "TableRow") {
+                            if (visible(child.from, child.to)) {
+                                decorateRow(state, readTableRow(state.doc, child, index), table, picked, lastRow, reveal, out);
+                            }
+                            index++;
+                        }
+                        else if (child.name === "TableDelimiter" && child.from >= table.delimiterLine.from && child.to <= table.delimiterLine.to && index === 1) {
+                            out.decorations.push(delimiterLine.range(table.delimiterLine.from));
+                        }
+                    }
+                    return false;
+                }
+                if (!TABLE_CONTAINERS.has(node.name))
+                    return false;
+            },
+        });
+        this.decorations = Decoration.set(out.decorations, true);
+        this.outer = Decoration.set(out.outer, true);
+        this.atomic = Decoration.set(out.atomic, true);
+    }
+}
+/**
+ * 마우스 위치 → 문서 위치. 마우스가 표 칸 위에 있으면 그 칸 안의 위치를 돌려줍니다.
+ * 칸의 빈 곳(글자 밖 여백, 오른쪽 정렬 칸의 왼쪽, 빈 칸 모양)에서는 CodeMirror가 가장 가까운 글자를 골라 옆 칸에 놓기도 하므로,
+ * 그 칸의 처음(왼쪽 절반)이나 끝(오른쪽 절반)으로 바로잡습니다. 표 칸 위가 아니면 null
+ */
+function cellPosAt(view, event) {
+    const doc = view.dom.ownerDocument;
+    const under = doc.elementFromPoint?.(event.clientX, event.clientY) ?? (event.target instanceof Element ? event.target : null);
+    const cellEl = under?.closest(".cm-table-cell") ?? null;
+    const line = cellEl?.closest(".cm-table-row");
+    const col = cellEl ? /\bcm-table-col-(\d+)\b/.exec(cellEl.className) : null;
+    if (!cellEl || !line || !col || !view.contentDOM.contains(line))
+        return null;
+    let lineFrom;
+    try {
+        lineFrom = view.posAtDOM(line);
+    }
+    catch {
+        return null;
+    }
+    const found = tableRowAt(view.state, lineFrom);
+    const block = found && tableBlockAt(view.state, found.table.from);
+    if (!found || !block)
+        return null;
+    const { row } = found;
+    const cell = row.cells[Number(col[1])];
+    // 칸 수가 모자란 행의 빈 칸 모양: 행 끝
+    if (!cell)
+        return rowCursorRange(row, block.columns)?.end ?? row.lineTo;
+    let pos;
+    try {
+        pos = view.posAtCoords({ x: event.clientX, y: event.clientY });
+    }
+    catch {
+        pos = null; // 레이아웃을 잴 수 없는 환경
+    }
+    if (pos !== null && pos >= cell.from && pos <= cell.to)
+        return pos;
+    if (pos !== null && row.cells.length > block.columns && pos >= extraCellsFrom(row, block.columns))
+        return pos;
+    const rect = cellEl.getBoundingClientRect();
+    return event.clientX > rect.left + rect.width / 2 ? cell.textTo : cell.textFrom;
+}
+/**
+ * 표 칸에서 시작하는 마우스 선택: 누를 때와 끄는 동안 모두 마우스 아래 칸 기준으로 위치를 정합니다.
+ * (두 칸 이상에 걸치면 칸 범위 선택이 됩니다. 두 번/세 번 누르기와 보조 키 선택은 기본 동작)
+ */
+const tableMouseSelection = EditorView.mouseSelectionStyle.of((view, start) => {
+    if (start.button !== 0 || start.detail > 1 || start.metaKey || start.ctrlKey || start.altKey)
+        return null;
+    const first = cellPosAt(view, start);
+    if (first === null)
+        return null;
+    let anchor = start.shiftKey ? view.state.selection.main.anchor : first;
+    return {
+        get(event) {
+            let head = cellPosAt(view, event);
+            if (head === null) {
+                try {
+                    head = view.posAtCoords({ x: event.clientX, y: event.clientY }, false);
+                }
+                catch {
+                    head = anchor;
+                }
+            }
+            return EditorSelection.single(anchor, head);
+        },
+        update(update) {
+            if (update.docChanged)
+                anchor = update.changes.mapPos(anchor);
+        },
+    };
+});
+const tableRowsPlugin = ViewPlugin.fromClass(TableRowsPlugin, {
+    decorations: (plugin) => plugin.decorations,
+    provide: (plugin) => [
+        // 칸은 다른 꾸밈(굵게, 링크 등)보다 바깥에 있어야 격자의 칸이 됩니다.
+        EditorView.outerDecorations.of((view) => view.plugin(plugin)?.outer ?? Decoration.none),
+        EditorView.atomicRanges.of((view) => view.plugin(plugin)?.atomic ?? Decoration.none),
+        // 칸 범위를 고르는 동안에는 칸을 칠해 보여 주므로, 격자를 가로지르는 글자 선택 표시는 숨깁니다.
+        EditorView.editorAttributes.of((view) => (view.plugin(plugin)?.cellSelection ? { class: "cm-table-cells-selected" } : null)),
+    ],
+});
+/** 커서가 있는 칸 (단일 빈 커서일 때만) */
+export function cellAt(state, pos) {
+    const table = tableNodeAt(state, pos);
+    if (!table)
+        return null;
+    const block = tableBlockAt(state, table.from);
+    if (!block)
+        return null;
+    const rows = readTableRows(state, table);
+    const line = state.doc.lineAt(pos);
+    if (line.from === block.delimiterLine.from)
+        return { table, block, rows, row: -1, cell: 0 };
+    const row = rows.findIndex((r) => r.lineFrom === line.from);
+    if (row < 0)
+        return null;
+    const { cells } = rows[row];
+    let cell = cells.findIndex((c) => pos <= c.to);
+    if (cell < 0)
+        cell = Math.max(0, cells.length - 1);
+    return { table, block, rows, row, cell };
+}
+function singleCursor(state) {
+    const { ranges } = state.selection;
+    return ranges.length === 1 ? ranges[0].head : null;
+}
+const isRowEmpty = (row) => row.cells.every((c) => c.contentFrom === c.contentTo);
+/** index번째 행 아래에 빈 행을 넣는 트랜잭션 (머리글 줄이면 구분 줄 뒤). 커서는 새 행의 첫 칸, 행 색 번호도 옮김 */
+function insertRowBelow(state, block, index) {
+    const spec = editTableRow(state, block, index, "insertBelow");
+    return spec && state.update(spec, { scrollIntoView: true, userEvent: "input" });
+}
+/** 행 줄의 글자를 지우거나(빈 줄로 남김) 줄째 지우는 트랜잭션. 행 색 번호도 함께 옮깁니다. */
+function removeRow(state, block, index, change, cursor) {
+    const changes = state.changes([change, ...[rowRemovedChange(state, block, index)].filter((c) => c !== null)]);
+    return state.update({ changes, selection: EditorSelection.cursor(changes.mapPos(cursor, -1)), scrollIntoView: true, userEvent: "delete" });
+}
+/** Enter: 아래에 새 행. 비어 있는 마지막 행에서는 표를 끝냅니다(행을 빈 줄로). */
+export const insertTableRow = ({ state, dispatch }) => {
+    const pos = singleCursor(state);
+    if (pos === null)
+        return false;
+    const at = cellAt(state, pos);
+    if (!at)
+        return false;
+    const { rows, row, block } = at;
+    if (row > 0 && row === rows.length - 1 && isRowEmpty(rows[row])) {
+        const r = rows[row];
+        dispatch(removeRow(state, block, row, { from: r.from, to: r.lineTo }, r.from));
+        return true;
+    }
+    // 머리글 줄/구분 줄이면 구분 줄 뒤에 넣습니다.
+    const tr = insertRowBelow(state, block, Math.max(0, row));
+    if (tr)
+        dispatch(tr);
+    return true;
+};
+function moveCell(forward) {
+    return ({ state, dispatch }) => {
+        const pos = singleCursor(state);
+        if (pos === null)
+            return false;
+        const at = cellAt(state, pos);
+        if (!at)
+            return false;
+        const { rows } = at;
+        // 구분 줄은 머리글 줄의 끝으로 봅니다.
+        let row = at.row < 0 ? 0 : at.row;
+        let cell = at.row < 0 ? rows[0].cells.length - 1 : at.cell;
+        const go = (target) => {
+            dispatch(state.update({ selection: EditorSelection.cursor(target), scrollIntoView: true, userEvent: "select" }));
+            return true;
+        };
+        if (forward) {
+            const current = rows[row];
+            if (cell + 1 < current.cells.length)
+                return go(current.cells[cell + 1].contentTo);
+            if (at.row >= 0 && current.cells.length < at.block.columns) {
+                // 칸이 모자란 행: 빈 칸을 하나 덧붙이고 그 칸으로
+                dispatch(state.update(appendCell(current), { scrollIntoView: true, userEvent: "input" }));
+                return true;
+            }
+            for (row++; row < rows.length; row++)
+                if (rows[row].cells.length > 0)
+                    return go(rows[row].cells[0].contentTo);
+            // 마지막 칸: 새 행
+            const tr = insertRowBelow(state, at.block, rows.length - 1);
+            if (tr)
+                dispatch(tr);
+            return true;
+        }
+        if (cell > 0)
+            return go(rows[row].cells[cell - 1].contentTo);
+        for (row--; row >= 0; row--) {
+            const cells = rows[row].cells;
+            if (cells.length > 0)
+                return go(cells[cells.length - 1].contentTo);
+        }
+        return true; // 첫 칸: 표 밖으로 나가지 않음
+    };
+}
+/** 행 끝에 빈 칸 하나 (`| a |` → `| a |  |`, `a | b` → `a | b |  |`). 커서는 새 칸 */
+function appendCell(row) {
+    const last = row.cells[row.cells.length - 1];
+    const pipe = row.pipes[row.pipes.length - 1];
+    if (pipe && (!last || pipe.from >= last.to)) {
+        return { changes: { from: pipe.to, to: row.lineTo, insert: "  |" }, selection: EditorSelection.cursor(pipe.to + 1) };
+    }
+    // 뒤 "|"가 없는 행(`a | b`): 끝에 " | " 만 붙이면 GFM에서 칸이 아니므로 "|"로 닫습니다. (`a | b |  |`)
+    return { changes: { from: row.lineTo, insert: " |  |" }, selection: EditorSelection.cursor(row.lineTo + 3) };
+}
+export const nextTableCell = moveCell(true);
+export const previousTableCell = moveCell(false);
+/**
+ * 칸 경계에서 지우기: "|"를 지워 칸이 합쳐지지 않도록, 칸 처음에서 Backspace는 앞 칸 끝으로,
+ * 칸 끝에서 Delete는 다음 칸 처음으로 커서만 옮깁니다.
+ * 칸 안에서 단어/줄 단위로 지우면 칸 경계에서 멈춥니다.
+ * 비어 있는 마지막 행의 첫 칸에서 Backspace는 그 행을 지웁니다.
+ */
+function deleteInCell(forward, by) {
+    return ({ state, dispatch }) => {
+        const { ranges } = state.selection;
+        if (ranges.length !== 1 || !ranges[0].empty)
+            return false;
+        const pos = ranges[0].head;
+        const at = cellAt(state, pos);
+        if (!at || at.row < 0)
+            return false;
+        const row = at.rows[at.row];
+        const cell = row.cells[at.cell];
+        if (!cell)
+            return false;
+        const atEdge = forward ? pos >= cell.textTo : pos <= cell.textFrom;
+        if (atEdge) {
+            if (!forward && at.cell === 0 && at.row > 0 && at.row === at.rows.length - 1 && isRowEmpty(row)) {
+                // 빈 마지막 행 지우기 → 윗행 마지막 칸 끝으로
+                const above = at.rows[at.row - 1];
+                const target = above.cells.length > 0 ? above.cells[above.cells.length - 1].textTo : above.lineTo;
+                dispatch(removeRow(state, at.block, at.row, { from: above.lineTo, to: row.lineTo }, target));
+                return true;
+            }
+            const next = forward ? row.cells[at.cell + 1] : row.cells[at.cell - 1];
+            if (next) {
+                const target = forward ? next.textFrom : next.textTo;
+                dispatch(state.update({ selection: EditorSelection.cursor(target), userEvent: "select" }));
+            }
+            return true; // 행의 처음/끝: 아무것도 지우지 않음
+        }
+        if (by === "char")
+            return false; // 칸 안의 한 글자는 기본 동작
+        const text = forward ? state.doc.sliceString(pos, cell.textTo) : state.doc.sliceString(cell.textFrom, pos);
+        const length = by === "line" ? text.length : wordLength(text, forward);
+        const from = forward ? pos : pos - length;
+        const to = forward ? pos + length : pos;
+        dispatch(state.update({ changes: { from, to }, selection: EditorSelection.cursor(from), userEvent: "delete" }));
+        return true;
+    };
+}
+/**
+ * 표 바로 바깥 줄에서 줄바꿈을 지워 표 줄과 합치지 않도록 합니다.
+ * - 표 윗줄 끝에서 Delete: 글자가 있으면 표 첫 칸으로 이동, 비었거나 공백뿐이면 그 줄을 지움(표에 들여쓰기가 붙지 않게)
+ * - 표 아랫줄 처음에서 Backspace: 글자가 있으면 마지막 행 끝으로 이동 (빈 줄이면 기본 동작으로 지움)
+ */
+function guardTableEdge(forward) {
+    return ({ state, dispatch }) => {
+        const { ranges } = state.selection;
+        if (ranges.length !== 1 || !ranges[0].empty)
+            return false;
+        const pos = ranges[0].head;
+        const { doc } = state;
+        const line = doc.lineAt(pos);
+        const blank = line.text.trim() === "";
+        if (forward) {
+            if (pos !== line.to || line.number === doc.lines)
+                return false;
+            const next = doc.line(line.number + 1);
+            const table = state.field(tablesField, false)?.find((t) => (t.comment ? t.comment.lineFrom : t.lineFrom) === next.from);
+            if (!table)
+                return false;
+            if (blank) {
+                dispatch(state.update({ changes: { from: line.from, to: next.from }, selection: EditorSelection.cursor(line.from), userEvent: "delete" }));
+                return true;
+            }
+            const first = tableRowAt(state, table.lineFrom);
+            const start = first && rowCursorRange(first.row, table.columns)?.start;
+            dispatch(state.update({ selection: EditorSelection.cursor(start ?? table.lineFrom), userEvent: "select" }));
+            return true;
+        }
+        if (pos !== line.from || line.number === 1 || blank)
+            return false;
+        const above = tableRowAt(state, doc.line(line.number - 1).from);
+        if (!above)
+            return false;
+        const block = tableBlockAt(state, above.table.from);
+        const end = block && rowCursorRange(above.row, block.columns)?.end;
+        dispatch(state.update({ selection: EditorSelection.cursor(end ?? above.row.lineTo), userEvent: "select" }));
+        return true;
+    };
+}
+/** 칸 안의 지우기, 아니면 표 바로 바깥 줄의 줄바꿈 지우기 보호 */
+function deleteKey(forward, by) {
+    const inCell = deleteInCell(forward, by);
+    const edge = guardTableEdge(forward);
+    return (target) => inCell(target) || edge(target);
+}
+/** 앞(또는 뒤)에서부터 지울 단어 길이: 공백 + 같은 종류(글자/기호) 연속 */
+function wordLength(text, forward) {
+    const re = forward ? /^\s*(?:[\p{L}\p{N}_]+|[^\p{L}\p{N}_\s]+)?/u : /(?:[\p{L}\p{N}_]+|[^\p{L}\p{N}_\s]+)?\s*$/u;
+    const match = re.exec(text);
+    return Math.max(1, match ? match[0].length : 1);
+}
+// ---------------------------------------------------------------------------
+// 커서 위치 보정: 빈 커서는 칸 내용 안에만
+// ---------------------------------------------------------------------------
+/**
+ * 빈 커서가 표 행의 앞 "|" 앞(접두어 포함)이나 뒤 "|" 뒤에 놓이면 첫 칸/마지막 칸 내용으로 옮깁니다.
+ * 키보드(←/→/Home/End/↑/↓), 클릭, 명령 등 어떤 경로든 같은 규칙을 적용합니다.
+ * (구분 줄과 선택 영역은 건드리지 않습니다)
+ */
+export function clampTableCursor(state, pos) {
+    const found = tableRowAt(state, pos);
+    if (!found)
+        return pos;
+    const block = tableBlockAt(state, found.table.from);
+    if (!block)
+        return pos;
+    return clampToRow(found.row, block.columns, pos);
+}
+/** 선택을 보정한 결과. 바꿀 것이 없으면 null */
+function clampSelection(state, selection) {
+    let changed = false;
+    const next = selection.ranges.map((range) => {
+        if (!range.empty)
+            return range;
+        const pos = clampTableCursor(state, range.head);
+        if (pos === range.head)
+            return range;
+        changed = true;
+        return EditorSelection.cursor(pos);
+    });
+    return changed ? EditorSelection.create(next, selection.mainIndex) : null;
+}
+const cursorGuard = State.transactionFilter.of((tr) => {
+    // 선택을 지정한 트랜잭션과, 문서가 바뀌어 선택이 옮겨진 트랜잭션
+    if ((!tr.selection && !tr.docChanged) || !tr.state.field(tablesField, false)?.length)
+        return tr;
+    const selection = clampSelection(tr.state, tr.newSelection);
+    return selection ? [tr, { selection, sequential: true }] : tr;
+});
+/** 처음 만든 상태의 커서(트랜잭션을 거치지 않음)도 보정합니다. 예: 표로 시작하는 문서의 커서 0 */
+const initialCursorGuard = ViewPlugin.define((view) => {
+    let alive = true;
+    queueMicrotask(() => {
+        if (!alive)
+            return;
+        const selection = clampSelection(view.state, view.state.selection);
+        if (selection)
+            view.dispatch({ selection });
+    });
+    return {
+        destroy() {
+            alive = false;
+        },
+    };
+});
+/**
+ * ←/→로 행 경계를 넘습니다. 첫 칸 처음에서 ←는 윗행 마지막 칸 끝(머리글 줄이면 표 윗줄 끝),
+ * 마지막 칸 끝에서 →는 아랫행 첫 칸 처음(마지막 행이면 표 아랫줄 처음). 칸 사이는 기본 이동(숨긴 "|"를 한 번에)
+ */
+function crossRow(forward) {
+    return ({ state, dispatch }) => {
+        const { ranges } = state.selection;
+        if (ranges.length !== 1 || !ranges[0].empty)
+            return false;
+        const pos = ranges[0].head;
+        const at = cellAt(state, pos);
+        if (!at || at.row < 0)
+            return false;
+        const { rows, block } = at;
+        const range = rowCursorRange(rows[at.row], block.columns);
+        if (!range)
+            return false;
+        if (forward ? pos < range.end : pos > range.start)
+            return false;
+        let target = null;
+        const neighbour = rows[at.row + (forward ? 1 : -1)];
+        const near = neighbour ? rowCursorRange(neighbour, block.columns) : null;
+        if (near) {
+            target = forward ? near.start : near.end;
+        }
+        else if (neighbour) {
+            target = neighbour.lineTo; // 칸이 없는 행("|")
+        }
+        else if (forward) {
+            if (block.lineTo < state.doc.length)
+                target = block.lineTo + 1;
+        }
+        else {
+            // 숨긴 설정 주석 줄은 건너뜁니다.
+            const top = block.comment ? block.comment.lineFrom : block.lineFrom;
+            if (top > 0)
+                target = top - 1;
+        }
+        if (target !== null)
+            dispatch(state.update({ selection: EditorSelection.cursor(target), scrollIntoView: true, userEvent: "select" }));
+        return true;
+    };
+}
+/**
+ * ↑/↓: 표에서는 칸 기준으로 움직입니다.
+ * CodeMirror의 위/아래 이동은 "줄 끝 위치의 좌표"로 줄의 위아래 여백을 판단하는데, 표 행의 줄 끝은 마지막 칸의 끝이라
+ * 그 칸이 다른 칸보다 짧으면 행의 나머지를 여백으로 보고 행 전체를 건너뜁니다. 그래서 직접 처리합니다.
+ * 1) 칸 안에서 줄바꿈된 줄이 더 있으면 그 줄로  2) 아니면 위/아래 행의 같은 열(가로 위치 유지)
+ * 3) 첫/마지막 행이면 표 위/아래 줄로 (숨긴 구분 줄·설정 주석은 건너뜀)
+ */
+function moveTableLine(forward) {
+    return (view) => {
+        const { state } = view;
+        const { ranges } = state.selection;
+        if (ranges.length !== 1 || !ranges[0].empty)
+            return false;
+        const range = ranges[0];
+        const at = cellAt(state, range.head);
+        if (!at || at.row < 0)
+            return false;
+        const row = at.rows[at.row];
+        const cell = row.cells[at.cell];
+        // 커서를 그리는 쪽과 같게 잽니다. (CodeMirror 커서 층은 assoc 0을 1로 그림: 줄바꿈 지점이면 다음 줄 처음)
+        const caret = view.coordsAtPos(range.head, range.assoc || 1) ?? view.coordsAtPos(range.head, -1);
+        if (!cell || !caret)
+            return false;
+        const content = view.contentDOM.getBoundingClientRect();
+        const x = range.goalColumn != null ? content.left + range.goalColumn : caret.left;
+        const half = view.defaultLineHeight / 2;
+        /** 줄바꿈 지점(앞 줄 끝 = 다음 줄 처음)은 같은 위치이므로, 어느 줄에 그릴지(assoc)도 좌표에서 정합니다. */
+        let side = forward ? 1 : -1;
+        const go = (pos) => {
+            view.dispatch({
+                selection: EditorSelection.cursor(pos, side, undefined, x - content.left),
+                scrollIntoView: true,
+                userEvent: "select",
+            });
+            return true;
+        };
+        const posAt = (y) => {
+            try {
+                const found = view.posAndSideAtCoords({ x, y });
+                if (!found)
+                    return null;
+                side = found.assoc < 0 ? -1 : 1;
+                return found.pos;
+            }
+            catch {
+                return null;
+            }
+        };
+        const clamp = (pos, c, fallback) => pos === null ? fallback : Math.min(c.textTo, Math.max(c.textFrom, pos));
+        // 1) 칸 안의 다음/이전 줄
+        const edge = forward ? view.coordsAtPos(cell.textTo, -1) : view.coordsAtPos(cell.textFrom, 1);
+        if (edge && (forward ? caret.bottom < edge.top + 1 : caret.top > edge.bottom - 1)) {
+            const pos = clamp(posAt(forward ? caret.bottom + half : caret.top - half), cell, forward ? cell.textTo : cell.textFrom);
+            if (pos !== range.head)
+                return go(pos);
+        }
+        // 2) 위/아래 행의 같은 열
+        const next = at.rows[at.row + (forward ? 1 : -1)];
+        if (next) {
+            const target = next.cells[Math.min(at.cell, next.cells.length - 1)];
+            if (!target)
+                return go(next.lineTo);
+            const line = forward ? view.coordsAtPos(target.textFrom, 1) : view.coordsAtPos(target.textTo, -1);
+            const pos = line ? posAt((line.top + line.bottom) / 2) : null;
+            return go(clamp(pos, target, target.textTo));
+        }
+        // 3) 표 밖
+        const { block } = at;
+        if (forward) {
+            if (block.lineTo >= state.doc.length)
+                return go(row.cells.length > 0 ? rowCursorRange(row, block.columns).end : range.head);
+            const pos = posAt(view.documentTop + view.lineBlockAt(block.lineTo).bottom + half);
+            return go(pos !== null && pos > block.lineTo ? pos : block.lineTo + 1);
+        }
+        const top = block.comment ? block.comment.lineFrom : block.lineFrom;
+        if (top === 0)
+            return go(rowCursorRange(row, block.columns)?.start ?? range.head);
+        const pos = posAt(view.documentTop + view.lineBlockAt(top).top - half);
+        return go(pos !== null && pos < top ? pos : top - 1);
+    };
+}
+const tableKeymap = Prec.highest(keymap.of([
+    { key: "ArrowUp", run: moveTableLine(false) },
+    { key: "ArrowDown", run: moveTableLine(true) },
+    { key: "ArrowLeft", run: crossRow(false) },
+    { key: "ArrowRight", run: crossRow(true) },
+    { key: "Enter", run: insertTableRow },
+    { key: "Tab", run: nextTableCell, shift: previousTableCell },
+    { key: "Backspace", run: deleteKey(false, "char") },
+    { key: "Delete", run: deleteKey(true, "char") },
+    { key: "Mod-Backspace", run: deleteKey(false, "line") },
+    { key: "Mod-Delete", run: deleteKey(true, "line") },
+    { key: "Alt-Backspace", run: deleteKey(false, "word") },
+    { key: "Alt-Delete", run: deleteKey(true, "word") },
+    { key: "Ctrl-Backspace", run: deleteKey(false, "word") },
+    { key: "Ctrl-Delete", run: deleteKey(true, "word") },
+]));
+// ---------------------------------------------------------------------------
+// 테마
+// ---------------------------------------------------------------------------
+const BORDER = "var(--cm-table-border)";
+/** Notion과 같은 색 (글자, 배경) */
+const PALETTE = {
+    light: {
+        gray: ["#787774", "#f1f1ef"],
+        brown: ["#9f6b53", "#f4eeee"],
+        orange: ["#d9730d", "#fbecdd"],
+        yellow: ["#cb912f", "#fbf3db"],
+        green: ["#448361", "#edf3ec"],
+        blue: ["#337ea9", "#e7f3f8"],
+        purple: ["#9065b0", "#f6f3f9"],
+        pink: ["#c14c8a", "#faf1f5"],
+        red: ["#d44c47", "#fdebec"],
+    },
+    dark: {
+        gray: ["#9b9b9b", "#2f2f2f"],
+        brown: ["#ba856f", "#4a3228"],
+        orange: ["#c77d48", "#5c3b23"],
+        yellow: ["#ca9849", "#564328"],
+        green: ["#529e72", "#243d30"],
+        blue: ["#5e87c9", "#143a4e"],
+        purple: ["#9d68d3", "#3c2d49"],
+        pink: ["#d15796", "#4e2c3c"],
+        red: ["#df5452", "#522e2a"],
+    },
+};
+/** 색 변수(테마별)와 행/열 색 클래스. 행 클래스를 뒤에 두어 행 색이 열 색보다 우선합니다. */
+function colorTheme() {
+    const spec = {};
+    for (const mode of ["light", "dark"]) {
+        const vars = {};
+        for (const name of TABLE_COLORS) {
+            vars[`--cm-table-fg-${name}`] = PALETTE[mode][name][0];
+            vars[`--cm-table-bg-${name}`] = PALETTE[mode][name][1];
+        }
+        // 칸 범위 선택의 옅은 파랑
+        vars["--cm-table-picked"] = mode === "light" ? "rgba(35, 131, 226, 0.14)" : "rgba(78, 161, 243, 0.2)";
+        // 메뉴의 색 견본에도 쓰므로 에디터 전체에 둡니다.
+        spec[`&${mode}`] = vars;
+    }
+    // 칸 색 > 행 색 > 열 색 (뒤에 정의할수록 우선)
+    for (const axis of ["col", "row", "cell"]) {
+        for (const name of TABLE_COLORS) {
+            // 제목 행/열 배경보다 우선하도록 명시도를 높입니다.
+            spec[`.cm-table .cm-table-row .cm-table-cell.cm-table-${axis}-fg-${name}`] = { color: `var(--cm-table-fg-${name})` };
+            spec[`.cm-table .cm-table-row .cm-table-cell.cm-table-${axis}-bg-${name}`] = { backgroundColor: `var(--cm-table-bg-${name})` };
+        }
+    }
+    return spec;
+}
+const tableTheme = EditorView.baseTheme({
+    ".cm-table": {
+        display: "grid",
+        // 표의 열 + 남는 폭(줄이 에디터 너비를 다 쓰도록. 인용/콜아웃 배경이 끊기지 않음)
+        gridTemplateColumns: "repeat(var(--cm-table-columns), auto) minmax(0, 1fr)",
+    },
+    ".cm-table > *": { gridColumn: "1 / -1" },
+    "&light .cm-table": {
+        "--cm-table-border": "#d9dce1",
+        "--cm-table-head-bg": "rgba(0, 0, 0, 0.035)",
+        "--cm-table-select": "#2383e2",
+    },
+    "&dark .cm-table": {
+        "--cm-table-border": "#4b5563",
+        "--cm-table-head-bg": "rgba(255, 255, 255, 0.05)",
+        "--cm-table-select": "#4ea1f3",
+    },
+    ".cm-table > .cm-line.cm-table-row": {
+        display: "grid",
+        gridTemplateColumns: "subgrid",
+        position: "relative",
+    },
+    // 칸이 아닌 조각(위젯 버퍼 등)은 격자 칸을 차지하지 않게 합니다.
+    ".cm-table-row > :not(.cm-table-cell):not(.cm-table-extra):not(.cm-table-missing)": {
+        position: "absolute",
+    },
+    ".cm-table-missing": { display: "contents" },
+    // CodeMirror는 숨긴 조각(위젯) 양옆에 커서 위치용 <img> 버퍼를 넣는데, 이 버퍼가 줄바꿈 기회가 되어 긴 URL처럼
+    // 끊을 곳이 없는 내용이 칸의 둘째 줄부터 시작합니다. absolute(위치 지정 없음)는 흐름에서 빠지지만 정적 위치가
+    // 원래 자리와 같아, 버퍼로 재는 커서 좌표는 그대로입니다.
+    ".cm-table-cell .cm-widgetBuffer": { position: "absolute" },
+    ".cm-table-cell": {
+        boxSizing: "border-box",
+        // 글자가 없는 칸("||")만 있는 행도 한 줄 높이를 유지합니다. (위아래 padding 8px + 테두리 1px)
+        minHeight: "calc(1lh + 9px)",
+        padding: "4px 8px",
+        minWidth: "2.5em",
+        borderRight: `1px solid ${BORDER}`,
+        borderBottom: `1px solid ${BORDER}`,
+        whiteSpace: "pre-wrap",
+        overflowWrap: "anywhere",
+        wordBreak: "normal",
+    },
+    ".cm-table-col-0": { borderLeft: `1px solid ${BORDER}` },
+    ".cm-table-row-0 > .cm-table-cell, .cm-table-row-0 > .cm-table-missing > .cm-table-cell": {
+        borderTop: `1px solid ${BORDER}`,
+    },
+    ".cm-table-align-left": { textAlign: "left" },
+    ".cm-table-align-center": { textAlign: "center" },
+    ".cm-table-align-right": { textAlign: "right" },
+    // 제목 행/열
+    ".cm-table-header-row .cm-table-row-0 .cm-table-cell, .cm-table-header-column .cm-table-col-0": {
+        fontWeight: "600",
+        backgroundColor: "var(--cm-table-head-bg)",
+    },
+    ".cm-table-extra": { opacity: "0.45" },
+    ".cm-table-delimiter-row": { opacity: "0.6" },
+    // 목록 안의 표: 들여쓰기 공백 대신 왼쪽 여백 (인용/콜아웃 안 여백에 더함)
+    ".cm-table > .cm-line.cm-table-indent": {
+        paddingLeft: "calc(var(--cm-container-indent, 6px) + var(--cm-table-indent) * 1ch)",
+    },
+    ...Object.fromEntries(Array.from({ length: MAX_INDENT }, (_, i) => [`.cm-table-indent-${i + 1}`, { "--cm-table-indent": String(i + 1) }])),
+    ...colorTheme(),
+    // 칸 범위 선택: 칸 색 위에 옅은 파랑을 덮습니다.
+    ".cm-table .cm-table-row .cm-table-cell.cm-table-picked": {
+        backgroundImage: "linear-gradient(var(--cm-table-picked), var(--cm-table-picked))",
+    },
+    "&.cm-table-cells-selected .cm-selectionLayer": { display: "none" },
+    // 펼친 색 표식
+    ".cm-table-cell-marker": { opacity: "0.5", fontSize: "0.85em" },
+    // 메뉴로 고른 행/열 테두리: 칸마다 바깥쪽 변만 (selectedClass)
+    ".cm-table-sel": {
+        boxShadow: "var(--cm-table-sel-t, 0 0 transparent), var(--cm-table-sel-b, 0 0 transparent), var(--cm-table-sel-l, 0 0 transparent), var(--cm-table-sel-r, 0 0 transparent)",
+    },
+    ".cm-table-sel-t": { "--cm-table-sel-t": "inset 0 2px 0 var(--cm-table-select)" },
+    ".cm-table-sel-b": { "--cm-table-sel-b": "inset 0 -2px 0 var(--cm-table-select)" },
+    ".cm-table-sel-l": { "--cm-table-sel-l": "inset 2px 0 0 var(--cm-table-select)" },
+    ".cm-table-sel-r": { "--cm-table-sel-r": "inset -2px 0 0 var(--cm-table-select)" },
+});
+// ---------------------------------------------------------------------------
+// 확장
+// ---------------------------------------------------------------------------
+/** table()이 켜져 있는지 (다른 확장이 역할을 나눌 때) */
+export const tablesHandled = Facet.define({ combine: (values) => values.some(Boolean) });
+/**
+ * GFM 표를 표 모양으로 보여주고 편집하는 확장입니다.
+ * - 원문은 그대로 두고 화면에서만 표로 그립니다. (`|` 숨김, 칸 테두리, 열 너비는 내용에 맞춤, 칸 안 줄바꿈)
+ * - 칸 안의 굵게/링크/수식 등은 다른 확장이 그대로 그립니다.
+ * - 구분 줄(`|---|`)은 숨기고, 열 정렬(`:-:`)은 칸 정렬로 보여줍니다.
+ * - 제목 행/열: 표 바로 윗줄의 `<!-- table: header-column no-header-row -->` 주석 (다른 렌더러에서는 보이지 않음).
+ *   첫 행/첫 열에 마우스를 올리면 나타나는 손잡이 메뉴로 켜고 끕니다.
+ * - Enter: 아래에 새 행 (비어 있는 마지막 행에서는 표 끝내기), Tab/Shift+Tab: 칸 이동 (마지막 칸에서 Tab은 새 행)
+ * - 칸 처음/끝에서 Backspace/Delete는 `|`를 지우지 않고 옆 칸으로 이동합니다.
+ * - 인용, 목록, 콜아웃 안의 표도 지원합니다.
+ */
+export function table() {
+    return [
+        tablesHandled.of(true),
+        tablesField,
+        tableSelectionField,
+        hiddenLinesField,
+        tableWrappers,
+        tableRowsPlugin,
+        tableKeymap,
+        tableMouseSelection,
+        cursorGuard,
+        initialCursorGuard,
+        tableHandles,
+        tableTheme,
+        tableMenuTheme,
+    ];
+}