mdsquare 0.0.0-stage → 0.2.0

package/dist/tableMenu.js

@@ -0,0 +1,1125 @@
+import { Annotation } from "@codemirror/state";
+import { EditorView, ViewPlugin } from "@codemirror/view";
+import { TABLE_COLORS, setColumnAlign, setTableColor, setTableOption, tableNodeAt, tableRowAt, } from "./tableModel.js";
+import { clearCells, commonCellColor, editTableColumn, editTableRow, setCellColor, moveTableColumn, moveTableRow, } from "./tableEdit.js";
+import { cellIndexAt, selectedCells, setTableSelection, tableBlockAt, tableSelectionField, } from "./tableState.js";
+// ---------------------------------------------------------------------------
+// 행/열 손잡이와 메뉴 (Notion 방식)
+// - 칸에 마우스를 올리면 그 행 왼쪽에 ⋮⋮, 그 열 위쪽에 ⋯ 손잡이
+// - 손잡이를 누르면 메뉴(검색, 제목 행/열, 정렬, 색, 삽입, 복제, 내용 지우기, 삭제), 끌면 행/열 옮기기
+// - 메뉴가 열린 동안(또는 끄는 동안) 그 행/열에 테두리
+// ---------------------------------------------------------------------------
+const SVG_NS = "http://www.w3.org/2000/svg";
+function icon(paths, size = 16) {
+    const svg = document.createElementNS(SVG_NS, "svg");
+    svg.setAttribute("viewBox", `0 0 ${size} ${size}`);
+    svg.setAttribute("width", String(size));
+    svg.setAttribute("height", String(size));
+    svg.setAttribute("aria-hidden", "true");
+    svg.innerHTML = paths;
+    return svg;
+}
+/** 점 6개 (가로 cols × 세로 rows) */
+function grip(cols, rows) {
+    const w = cols * 4 + 2;
+    const h = rows * 4 + 2;
+    let dots = "";
+    for (let x = 0; x < cols; x++)
+        for (let y = 0; y < rows; y++)
+            dots += `<circle cx="${3 + x * 4}" cy="${3 + y * 4}" r="1.1"/>`;
+    const svg = document.createElementNS(SVG_NS, "svg");
+    svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
+    svg.setAttribute("width", String(w));
+    svg.setAttribute("height", String(h));
+    svg.setAttribute("fill", "currentColor");
+    svg.setAttribute("aria-hidden", "true");
+    svg.innerHTML = dots;
+    return svg;
+}
+const stroke = (paths) => `<g fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">${paths}</g>`;
+const ICONS = {
+    headerRow: '<rect x="1.5" y="2.5" width="13" height="11" rx="1.5" fill="none" stroke="currentColor"/><path d="M2 3h12v3.5H2z" fill="currentColor"/><path d="M1.5 9.5h13M6 6.5v7M10.5 6.5v7" stroke="currentColor" fill="none"/>',
+    headerColumn: '<rect x="1.5" y="2.5" width="13" height="11" rx="1.5" fill="none" stroke="currentColor"/><path d="M2 3h4v10H2z" fill="currentColor"/><path d="M6 6.5h8.5M6 10h8.5M10.5 3v10" stroke="currentColor" fill="none"/>',
+    alignLeft: '<path d="M2 3.5h12M2 6.5h8M2 9.5h12M2 12.5h8" stroke="currentColor" stroke-linecap="round" fill="none"/>',
+    alignCenter: '<path d="M2 3.5h12M4 6.5h8M2 9.5h12M4 12.5h8" stroke="currentColor" stroke-linecap="round" fill="none"/>',
+    alignRight: '<path d="M2 3.5h12M6 6.5h8M2 9.5h12M6 12.5h8" stroke="currentColor" stroke-linecap="round" fill="none"/>',
+    color: stroke('<path d="M4 2.5h7v3.5H4zM11 4.25h1.5V8H7.5v2"/><rect x="6.5" y="10" width="2" height="4" rx=".5"/>'),
+    chevron: stroke('<path d="m6 4 4 4-4 4"/>'),
+    back: stroke('<path d="m10 4-4 4 4 4"/>'),
+    check: stroke('<path d="m3.5 8.5 3 3 6-7"/>'),
+    insertLeft: stroke('<path d="M13 8H3M7 4 3 8l4 4"/>'),
+    insertRight: stroke('<path d="M3 8h10M9 4l4 4-4 4"/>'),
+    insertAbove: stroke('<path d="M8 13V3M4 7l4-4 4 4"/>'),
+    insertBelow: stroke('<path d="M8 3v10M4 9l4 4 4-4"/>'),
+    duplicate: stroke('<rect x="5.5" y="5.5" width="8" height="8" rx="1.5"/><path d="M10.5 3.5V3a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v6.5a1 1 0 0 0 1 1h.5"/>'),
+    clear: stroke('<circle cx="8" cy="8" r="6"/><path d="m6 6 4 4M10 6l-4 4"/>'),
+    delete: stroke('<path d="M2.5 4.5h11M6.5 4.5V3h3v1.5M4 4.5l.7 9h6.6l.7-9"/>'),
+};
+const ALIGNS = [
+    { align: "left", label: "왼쪽", keywords: "left align", icon: ICONS.alignLeft },
+    { align: "center", label: "가운데", keywords: "center align", icon: ICONS.alignCenter },
+    { align: "right", label: "오른쪽", keywords: "right align", icon: ICONS.alignRight },
+];
+const COLOR_LABELS = {
+    gray: "회색",
+    brown: "갈색",
+    orange: "주황",
+    yellow: "노랑",
+    green: "초록",
+    blue: "파랑",
+    purple: "보라",
+    pink: "분홍",
+    red: "빨강",
+};
+const ROW_ACTIONS = [
+    { action: "insertAbove", label: "위에 삽입", keywords: "insert above row 행 추가", icon: ICONS.insertAbove },
+    { action: "insertBelow", label: "아래에 삽입", keywords: "insert below row 행 추가", icon: ICONS.insertBelow },
+    { action: "duplicate", label: "복제", keywords: "duplicate copy 복사", icon: ICONS.duplicate },
+    { action: "clear", label: "내용 지우기", keywords: "clear contents 비우기", icon: ICONS.clear },
+    { action: "delete", label: "삭제", keywords: "delete remove 지우기", icon: ICONS.delete },
+];
+const COLUMN_ACTIONS = [
+    { action: "insertLeft", label: "왼쪽에 삽입", keywords: "insert left column 열 추가", icon: ICONS.insertLeft },
+    { action: "insertRight", label: "오른쪽에 삽입", keywords: "insert right column 열 추가", icon: ICONS.insertRight },
+    { action: "duplicate", label: "복제", keywords: "duplicate copy 복사", icon: ICONS.duplicate },
+    { action: "clear", label: "내용 지우기", keywords: "clear contents 비우기", icon: ICONS.clear },
+    { action: "delete", label: "삭제", keywords: "delete remove 지우기", icon: ICONS.delete },
+];
+/** 메뉴가 바꾼 문서 변경 (메뉴를 닫지 않음) */
+const fromMenu = Annotation.define();
+/** 표의 index번째 행(0: 머리글 줄) 시작 위치 */
+function rowStart(view, table, index) {
+    const node = tableNodeAt(view.state, table.from);
+    let i = 0;
+    for (let child = node?.firstChild ?? null; child; child = child.nextSibling) {
+        if (child.name !== "TableHeader" && child.name !== "TableRow")
+            continue;
+        if (i++ === index)
+            return child.from;
+    }
+    return null;
+}
+/** 표의 index번째 행 줄 요소 (화면에 그려져 있을 때만) */
+function rowLine(view, table, index) {
+    const from = rowStart(view, table, index);
+    if (from === null)
+        return null;
+    try {
+        const { node: dom } = view.domAtPos(from);
+        const line = (dom instanceof HTMLElement ? dom : dom.parentElement)?.closest(".cm-line") ?? null;
+        return line?.classList.contains("cm-table-row") ? line : null;
+    }
+    catch {
+        return null;
+    }
+}
+/** 줄 요소의 column번째 칸 (모자란 칸 모양 포함) */
+function cellOf(line, column) {
+    const cls = `.cm-table-col-${column}`;
+    return line?.querySelector(`:scope > ${cls}, :scope > .cm-table-missing > ${cls}`) ?? null;
+}
+/** 줄의 행 번호 (0: 머리글 줄). 표 노드의 자식만 훑습니다. */
+function rowIndexOf(view, tableFrom, lineFrom) {
+    const node = tableNodeAt(view.state, tableFrom);
+    let i = 0;
+    for (let child = node?.firstChild ?? null; child; child = child.nextSibling) {
+        if (child.name !== "TableHeader" && child.name !== "TableRow")
+            continue;
+        if (view.state.doc.lineAt(child.from).from === lineFrom)
+            return i;
+        i++;
+    }
+    return -1;
+}
+/** 화면에 그려진 행 줄들과 번호 */
+function renderedRows(view, table) {
+    const out = [];
+    const first = rowLine(view, table, 0) ?? null;
+    const wrapper = first?.parentElement ?? null;
+    if (!wrapper)
+        return out;
+    for (const line of wrapper.querySelectorAll(":scope > .cm-table-row")) {
+        let pos;
+        try {
+            pos = view.posAtDOM(line);
+        }
+        catch {
+            continue;
+        }
+        const index = rowIndexOf(view, table.from, view.state.doc.lineAt(pos).from);
+        if (index >= 0)
+            out.push({ index, line });
+    }
+    return out;
+}
+class TableHandles {
+    dom;
+    rowHandle;
+    columnHandle;
+    /** 끌 때 놓일 자리를 보여주는 선 */
+    indicator;
+    menu = null;
+    /** 칸 메뉴를 연 화면 좌표 */
+    menuPoint = null;
+    search = null;
+    list = null;
+    page = "main";
+    entries = [];
+    active = 0;
+    hover = null;
+    drag = null;
+    /** 끌기를 마친 직후의 click은 메뉴를 열지 않습니다. */
+    suppressClick = false;
+    hideTimer = -1;
+    view;
+    onDocumentMouseDown = (event) => {
+        if (!this.menu)
+            return;
+        const target = event.target;
+        if (target && (this.menu.contains(target) || this.rowHandle.contains(target) || this.columnHandle.contains(target)))
+            return;
+        this.closeMenu();
+    };
+    /** 에디터에 포커스가 없어도(메뉴를 마우스로만 열었을 때) Esc로 닫습니다. */
+    onDocumentKeyDown = (event) => {
+        if (event.key !== "Escape" || !this.menu)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.closeMenu(true);
+    };
+    onScroll = (event) => {
+        // 메뉴 안(색 목록)의 스크롤은 무시합니다.
+        if (event.target instanceof Node && this.menu?.contains(event.target))
+            return;
+        // 칸 메뉴는 마우스 자리에 열었으므로 스크롤하면 닫고, 손잡이 메뉴는 손잡이를 따라갑니다.
+        if (this.view.state.field(tableSelectionField, false)?.kind === "cells")
+            this.closeMenu(true);
+        else
+            this.place();
+    };
+    onDragMove = (event) => this.dragMove(event);
+    onDragEnd = (event) => this.dragEnd(event);
+    constructor(view) {
+        this.view = view;
+        this.dom = document.createElement("div");
+        this.dom.className = "cm-table-handles";
+        this.rowHandle = this.handle("row", grip(2, 3), "행 메뉴 (끌어서 옮기기)");
+        this.columnHandle = this.handle("column", grip(3, 2), "열 메뉴 (끌어서 옮기기)");
+        this.indicator = document.createElement("div");
+        this.indicator.className = "cm-table-drop";
+        this.dom.appendChild(this.indicator);
+        view.scrollDOM.appendChild(this.dom);
+    }
+    handle(kind, svg, label) {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = `cm-table-handle cm-table-handle-${kind}`;
+        button.setAttribute("aria-label", label);
+        button.setAttribute("aria-haspopup", "menu");
+        button.appendChild(svg);
+        button.addEventListener("mousedown", (event) => {
+            // 에디터 포커스와 커서를 유지합니다.
+            event.preventDefault();
+            if (event.button === 0)
+                this.dragStart(kind, event);
+        });
+        button.addEventListener("click", () => {
+            if (this.suppressClick)
+                return;
+            this.toggleMenu(kind);
+        });
+        button.addEventListener("mouseenter", () => this.cancelHide());
+        button.addEventListener("mouseleave", () => this.scheduleHide());
+        this.dom.appendChild(button);
+        return button;
+    }
+    // -- 마우스 올림 --------------------------------------------------------------
+    mousemove(event) {
+        if (this.menu || this.drag || event.buttons !== 0)
+            return;
+        const target = event.target instanceof Element ? event.target : null;
+        const cell = target?.closest(".cm-table-cell");
+        const line = cell?.closest(".cm-table-row");
+        if (!cell || !line)
+            return this.scheduleHide();
+        let pos;
+        try {
+            pos = this.view.posAtDOM(line);
+        }
+        catch {
+            return this.scheduleHide();
+        }
+        // 줄 기준으로 찾습니다. (인용/콜아웃 안 표는 줄 처음의 ">"가 Table 노드 밖이라 위치로 찾으면 못 찾음)
+        const found = tableRowAt(this.view.state, pos);
+        if (!found)
+            return this.scheduleHide();
+        const node = found.table;
+        this.cancelHide();
+        const column = /\bcm-table-col-(\d+)\b/.exec(cell.className);
+        const row = rowIndexOf(this.view, node.from, found.row.lineFrom);
+        if (!column || row < 0)
+            return this.scheduleHide();
+        this.hover = { table: node.from, row, column: Number(column[1]) };
+        this.place();
+    }
+    mouseleave() {
+        if (!this.menu && !this.drag)
+            this.scheduleHide();
+    }
+    scheduleHide() {
+        if (this.menu || this.drag || !this.hover || this.hideTimer >= 0)
+            return;
+        this.hideTimer = window.setTimeout(() => {
+            this.hideTimer = -1;
+            this.hover = null;
+            this.place();
+        }, 250);
+    }
+    cancelHide() {
+        if (this.hideTimer >= 0)
+            clearTimeout(this.hideTimer);
+        this.hideTimer = -1;
+    }
+    // -- 위치 ----------------------------------------------------------------------
+    /** 손잡이/메뉴 위치를 다시 잽니다. (읽기와 쓰기를 나눠 레이아웃을 한 번만 계산) */
+    place() {
+        this.view.requestMeasure({
+            key: this,
+            read: (view) => {
+                const menuRect = this.menu?.getBoundingClientRect() ?? null;
+                const win = view.dom.ownerDocument.defaultView;
+                const viewport = { width: win?.innerWidth ?? 0, height: win?.innerHeight ?? 0 };
+                const menuSize = menuRect && { width: menuRect.width, height: menuRect.height };
+                const handles = this.measureHandles(view);
+                return { handles, menuSize, viewport };
+            },
+            write: ({ handles: m, menuSize, viewport }) => {
+                const show = (el, on) => el.classList.toggle("cm-table-handle-visible", on);
+                const selection = this.view.state.field(tableSelectionField, false);
+                // 화면 밖으로 나가지 않게: 아래가 모자라면 위로(above), 오른쪽이 모자라면 왼쪽으로
+                const placeMenu = (anchor) => {
+                    if (!this.menu)
+                        return;
+                    const size = menuSize ?? { width: 0, height: 0 };
+                    const margin = 8;
+                    let top = anchor.top;
+                    if (viewport.height && top + size.height > viewport.height - margin)
+                        top = Math.max(margin, anchor.above - size.height);
+                    let left = anchor.left;
+                    if (viewport.width && left + size.width > viewport.width - margin)
+                        left = Math.max(margin, viewport.width - margin - size.width);
+                    this.menu.style.left = `${left}px`;
+                    this.menu.style.top = `${top}px`;
+                };
+                if (this.menu && selection?.kind === "cells" && this.menuPoint) {
+                    placeMenu({ left: this.menuPoint.x, top: this.menuPoint.y, above: this.menuPoint.y });
+                }
+                if (!m) {
+                    show(this.rowHandle, false);
+                    show(this.columnHandle, false);
+                    this.rowHandle.classList.remove("cm-table-handle-active");
+                    this.columnHandle.classList.remove("cm-table-handle-active");
+                    if (this.menu && selection?.kind !== "cells")
+                        this.closeMenu();
+                    return;
+                }
+                const { first, cell } = m;
+                show(this.rowHandle, true);
+                show(this.columnHandle, true);
+                // 행 손잡이: 그 행 첫 칸 왼쪽 테두리 위, 세로 가운데 / 열 손잡이: 그 열 머리글 칸 위쪽 테두리 위, 가로 가운데
+                this.rowHandle.style.left = `${first.x}px`;
+                this.rowHandle.style.top = `${first.y + first.height / 2}px`;
+                this.columnHandle.style.left = `${cell.x + cell.width / 2}px`;
+                this.columnHandle.style.top = `${cell.y}px`;
+                this.rowHandle.classList.toggle("cm-table-handle-active", selection?.kind === "row");
+                this.columnHandle.classList.toggle("cm-table-handle-active", selection?.kind === "column");
+                if (this.menu && (selection?.kind === "row" || selection?.kind === "column")) {
+                    const handle = selection.kind === "row" ? this.rowHandle : this.columnHandle;
+                    // 메뉴는 에디터 스크롤 영역 밖(fixed)에 그려 문서 끝에서도 잘리지 않게 합니다.
+                    const s = m.screen;
+                    placeMenu(selection.kind === "row"
+                        ? { left: s.first.left + 14, top: s.first.top + s.first.height / 2 - 12, above: s.first.top + s.first.height / 2 - 12 }
+                        : { left: s.cell.left + s.cell.width / 2 - 12, top: s.cell.top + 14, above: s.cell.top - 14 });
+                    handle.setAttribute("aria-expanded", "true");
+                }
+            },
+        });
+    }
+    /** 손잡이 자리 (마우스가 표 위에 있을 때만) */
+    measureHandles(view) {
+        const hover = this.hover;
+        const table = hover ? tableBlockAt(view.state, hover.table) : null;
+        // 행 손잡이: 그 행 첫 칸 / 열 손잡이: 머리글 줄의 그 열 칸
+        const first = table && hover ? cellOf(rowLine(view, table, hover.row), 0) : null;
+        const cell = table && hover ? cellOf(rowLine(view, table, 0), hover.column) : null;
+        if (!hover || !first || !cell)
+            return null;
+        const base = view.scrollDOM.getBoundingClientRect();
+        const toLocal = (rect) => ({
+            x: rect.left - base.left + view.scrollDOM.scrollLeft,
+            y: rect.top - base.top + view.scrollDOM.scrollTop,
+            width: rect.width,
+            height: rect.height,
+        });
+        const firstRect = first.getBoundingClientRect();
+        const cellRect = cell.getBoundingClientRect();
+        return {
+            hover,
+            first: toLocal(firstRect),
+            cell: toLocal(cellRect),
+            // 메뉴는 화면 좌표(fixed)로 둡니다.
+            screen: { first: firstRect, cell: cellRect },
+        };
+    }
+    // -- 끌어서 옮기기 ----------------------------------------------------------------
+    dragStart(kind, event) {
+        if (!this.hover)
+            return;
+        const index = kind === "row" ? this.hover.row : this.hover.column;
+        this.drag = { kind, table: this.hover.table, index, x: event.clientX, y: event.clientY, active: false, slot: null };
+        const doc = this.view.dom.ownerDocument;
+        doc.addEventListener("mousemove", this.onDragMove, true);
+        doc.addEventListener("mouseup", this.onDragEnd, true);
+    }
+    dragMove(event) {
+        const drag = this.drag;
+        if (!drag)
+            return;
+        if (!drag.active) {
+            if (Math.hypot(event.clientX - drag.x, event.clientY - drag.y) < 4)
+                return;
+            drag.active = true;
+            this.closeMenu();
+            this.view.dispatch({ effects: setTableSelection.of({ table: drag.table, kind: drag.kind, index: drag.index }) });
+            this.view.dom.classList.add("cm-table-dragging");
+        }
+        const table = tableBlockAt(this.view.state, drag.table);
+        if (!table)
+            return;
+        const base = this.view.scrollDOM.getBoundingClientRect();
+        const sx = this.view.scrollDOM.scrollLeft - base.left;
+        const sy = this.view.scrollDOM.scrollTop - base.top;
+        const rows = renderedRows(this.view, table);
+        if (rows.length === 0)
+            return;
+        const header = cellOf(rows[0].index === 0 ? rows[0].line : null, 0);
+        const lastRect = rows[rows.length - 1].line.getBoundingClientRect();
+        const style = this.indicator.style;
+        if (drag.kind === "row") {
+            // 마우스가 행의 가운데보다 위면 그 행 앞자리
+            let slot = rows[rows.length - 1].index + 1;
+            let y = lastRect.bottom;
+            for (const { index, line } of rows) {
+                const rect = line.getBoundingClientRect();
+                if (event.clientY < rect.top + rect.height / 2) {
+                    slot = index;
+                    y = rect.top;
+                    break;
+                }
+            }
+            drag.slot = slot;
+            const firstCell = cellOf(rows[0].line, 0)?.getBoundingClientRect();
+            const lastCell = cellOf(rows[0].line, table.columns - 1)?.getBoundingClientRect();
+            if (!firstCell || !lastCell)
+                return;
+            style.left = `${firstCell.left + sx}px`;
+            style.width = `${lastCell.right - firstCell.left}px`;
+            style.top = `${y + sy - 1}px`;
+            style.height = "2px";
+        }
+        else {
+            const headerLine = header?.closest(".cm-table-row") ?? null;
+            if (!headerLine)
+                return;
+            let slot = table.columns;
+            let x = cellOf(headerLine, table.columns - 1)?.getBoundingClientRect().right ?? 0;
+            for (let col = 0; col < table.columns; col++) {
+                const rect = cellOf(headerLine, col)?.getBoundingClientRect();
+                if (rect && event.clientX < rect.left + rect.width / 2) {
+                    slot = col;
+                    x = rect.left;
+                    break;
+                }
+            }
+            drag.slot = slot;
+            const top = headerLine.getBoundingClientRect().top;
+            style.left = `${x + sx - 1}px`;
+            style.width = "2px";
+            style.top = `${top + sy}px`;
+            style.height = `${lastRect.bottom - top}px`;
+        }
+        this.indicator.classList.add("cm-table-drop-visible");
+    }
+    dragEnd(event) {
+        const drag = this.drag;
+        this.drag = null;
+        const doc = this.view.dom.ownerDocument;
+        doc.removeEventListener("mousemove", this.onDragMove, true);
+        doc.removeEventListener("mouseup", this.onDragEnd, true);
+        if (!drag?.active)
+            return; // 그냥 누름: click에서 메뉴를 엽니다.
+        event.preventDefault();
+        this.indicator.classList.remove("cm-table-drop-visible");
+        this.view.dom.classList.remove("cm-table-dragging");
+        this.suppressClick = true;
+        setTimeout(() => (this.suppressClick = false), 0);
+        const { state } = this.view;
+        const table = tableBlockAt(state, drag.table);
+        const spec = table && drag.slot !== null
+            ? drag.kind === "row"
+                ? moveTableRow(state, table, drag.index, drag.slot)
+                : moveTableColumn(state, table, drag.index, drag.slot)
+            : null;
+        this.view.dispatch({
+            ...(spec ?? {}),
+            effects: setTableSelection.of(null),
+            ...(spec ? { userEvent: "move.table", scrollIntoView: true } : {}),
+        });
+        this.hover = null;
+        this.place();
+    }
+    // -- 메뉴 ----------------------------------------------------------------------
+    toggleMenu(kind) {
+        const current = this.view.state.field(tableSelectionField, false);
+        if (this.menu && current?.kind === kind)
+            return this.closeMenu(true);
+        if (!this.hover)
+            return;
+        const index = kind === "row" ? this.hover.row : this.hover.column;
+        this.openMenu({ table: this.hover.table, kind, index }, null);
+    }
+    /** 칸에서 오른쪽 클릭: 고른 칸 범위 안이면 그 범위, 아니면 그 칸의 메뉴를 마우스 자리에 엽니다. */
+    contextmenu(event) {
+        const target = event.target instanceof Element ? event.target : null;
+        const cellEl = target?.closest(".cm-table-cell");
+        if (!cellEl)
+            return false;
+        let pos;
+        try {
+            pos = this.view.posAtDOM(cellEl);
+        }
+        catch {
+            return false;
+        }
+        const at = cellIndexAt(this.view.state, pos);
+        const column = /\bcm-table-col-(\d+)\b/.exec(cellEl.className);
+        if (!at || !column)
+            return false;
+        const col = Number(column[1]);
+        const picked = selectedCells(this.view.state);
+        const inside = picked && picked.table === at.table && at.row >= picked.fromRow && at.row <= picked.toRow && col >= picked.fromColumn && col <= picked.toColumn;
+        const { table: _table, ...range } = picked ?? { table: 0, fromRow: 0, toRow: 0, fromColumn: 0, toColumn: 0 };
+        const cells = inside ? range : { fromRow: at.row, toRow: at.row, fromColumn: col, toColumn: col };
+        event.preventDefault();
+        this.openMenu({ table: at.table, kind: "cells", index: 0, cells }, { x: event.clientX, y: event.clientY });
+        return true;
+    }
+    /** 메뉴를 엽니다. point: 칸 메뉴를 열 화면 좌표 (손잡이 메뉴는 null: 손잡이 옆) */
+    openMenu(selection, point) {
+        this.closeMenu();
+        this.menuPoint = point;
+        this.view.dispatch({ effects: setTableSelection.of(selection) });
+        const menu = document.createElement("div");
+        menu.className = "cm-table-menu";
+        menu.setAttribute("role", "menu");
+        // 검색 칸이 아니면 누를 때 포커스를 옮기지 않습니다.
+        menu.addEventListener("mousedown", (event) => {
+            if (event.target !== this.search)
+                event.preventDefault();
+        });
+        const search = document.createElement("input");
+        search.type = "text";
+        search.className = "cm-table-menu-search";
+        search.placeholder = "동작 검색…";
+        search.setAttribute("aria-label", "동작 검색");
+        search.addEventListener("input", () => {
+            this.active = 0;
+            this.renderMenu();
+        });
+        search.addEventListener("keydown", (event) => this.menuKey(event));
+        const list = document.createElement("div");
+        list.className = "cm-table-menu-list";
+        menu.append(search, list);
+        this.menu = menu;
+        this.search = search;
+        this.list = list;
+        this.page = "main";
+        this.active = 0;
+        this.view.dom.appendChild(menu);
+        this.renderMenu();
+        const doc = this.view.dom.ownerDocument;
+        doc.addEventListener("mousedown", this.onDocumentMouseDown, true);
+        doc.addEventListener("keydown", this.onDocumentKeyDown, true);
+        // fixed 메뉴는 스크롤을 따라가지 않으므로 다시 잽니다. (페이지와 에디터 스크롤 모두: capture)
+        doc.addEventListener("scroll", this.onScroll, true);
+        search.focus({ preventScroll: true });
+        this.place();
+        // 메뉴 크기를 안 뒤 한 번 더 (아래 공간이 모자라면 위로)
+        this.place();
+    }
+    /** 메뉴 키보드: ↑/↓ 항목 이동, Enter 실행, 빈 검색에서 Backspace는 하위 메뉴에서 돌아가기 (Esc는 문서 전체에서 처리) */
+    menuKey(event) {
+        const count = this.entries.length;
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            if (count)
+                this.setActive((this.active + (event.key === "ArrowDown" ? 1 : count - 1)) % count);
+        }
+        else if (event.key === "Enter") {
+            event.preventDefault();
+            this.entries[this.active]?.run();
+        }
+        else if (event.key === "Backspace" && this.page !== "main" && this.search?.value === "") {
+            event.preventDefault();
+            this.page = "main";
+            this.active = 0;
+            this.renderMenu();
+        }
+    }
+    setActive(index) {
+        this.active = index;
+        const items = this.list?.querySelectorAll(".cm-table-menu-item[data-entry]") ?? [];
+        items.forEach((item, i) => item.classList.toggle("cm-table-menu-active", i === index));
+        items[index]?.scrollIntoView?.({ block: "nearest" }); // 레이아웃이 없는 환경(jsdom)에는 없음
+    }
+    context() {
+        const selection = this.view.state.field(tableSelectionField, false);
+        const table = selection ? tableBlockAt(this.view.state, selection.table) : null;
+        return selection && table ? { table, selection } : null;
+    }
+    /** 원문을 바꾸는 명령 실행 */
+    apply(spec, close) {
+        // 커서를 옮기는 동작(행/열 삽입 등)만 그 자리로 스크롤합니다.
+        // 색/내용 지우기처럼 커서가 그대로인 동작에서 스크롤하면, 커서가 표 밖에 있을 때 화면이 그쪽으로 튀어 표가 사라집니다.
+        if (spec) {
+            this.view.dispatch({ ...spec, annotations: fromMenu.of(true), userEvent: "input.table", scrollIntoView: spec.selection !== undefined });
+        }
+        if (close) {
+            this.closeMenu(true);
+            this.hover = null;
+            this.place();
+        }
+    }
+    /** 지금 상태로 메뉴 항목들을 만듭니다. */
+    buildEntries(table, selection, query) {
+        const { state } = this.view;
+        const { kind, index } = selection;
+        const axis = kind === "row" ? "row" : "column";
+        const range = kind === "cells" ? (selection.cells ?? null) : null;
+        const entries = [];
+        /** 지금 색: 글자 색과 배경 색이 따로. 칸은 고른 칸들의 색이 모두 같을 때만 (아니면 undefined: 표시 없음) */
+        const current = range
+            ? { fg: commonCellColor(state, table, range, "fg"), bg: commonCellColor(state, table, range, "bg") }
+            : ((kind === "row" ? table.colors.rows : table.colors.columns).get(index) ?? { fg: null, bg: null });
+        /** flat: 검색 결과처럼 하위 메뉴 밖에 보일 때는 "글자 색 · 빨강"처럼 구역 이름을 붙입니다. */
+        const colorEntries = (flat) => {
+            const out = [];
+            for (const bg of [false, true]) {
+                const group = bg ? "배경 색" : "글자 색";
+                for (const name of [null, ...TABLE_COLORS]) {
+                    const label = name === null ? "기본" : COLOR_LABELS[name];
+                    // 글자 색과 배경 색은 따로 정합니다. ("기본"은 그쪽 색만 없앰)
+                    const checked = (bg ? current.bg : current.fg) === name;
+                    out.push({
+                        id: `color:${bg ? "bg" : "fg"}:${name ?? "default"}`,
+                        label: flat ? `${group} · ${label}` : label,
+                        keywords: `${group} ${name ?? "default"} ${bg ? "background" : "text"} color 색`,
+                        icon: () => swatch(name, bg),
+                        trailing: checked ? "check" : undefined,
+                        close: true,
+                        run: () => this.apply(range
+                            ? setCellColor(state, table, range, bg ? "bg" : "fg", name)
+                            : setTableColor(state, table, axis, index, bg ? "bg" : "fg", name), true),
+                    });
+                }
+            }
+            return out;
+        };
+        if (this.page === "color" && !query) {
+            entries.push({
+                id: "back",
+                label: "색",
+                keywords: "back",
+                icon: ICONS.back,
+                close: false,
+                run: () => {
+                    this.page = "main";
+                    this.active = 0;
+                    this.renderMenu();
+                },
+            });
+            entries.push(...colorEntries(false));
+            return { entries, align: false };
+        }
+        if (kind === "row" && index === 0)
+            entries.push(this.switchEntry("제목 행", "header row", ICONS.headerRow, table, "headerRow"));
+        if (kind === "column" && index === 0)
+            entries.push(this.switchEntry("제목 열", "header column", ICONS.headerColumn, table, "headerColumn"));
+        // 정렬: 검색하지 않을 때는 버튼 묶음 한 줄, 검색하면 항목 셋
+        const showAlignGroup = kind === "column" && !query;
+        if (kind === "column" && query) {
+            const current = table.aligns[index] ?? "left";
+            for (const a of ALIGNS) {
+                entries.push({
+                    id: `align:${a.align}`,
+                    label: `${a.label} 정렬`,
+                    keywords: a.keywords,
+                    icon: a.icon,
+                    trailing: current === a.align ? "check" : undefined,
+                    close: false,
+                    run: () => this.apply(setColumnAlign(state, table, index, a.align), false),
+                });
+            }
+        }
+        entries.push({
+            id: "color",
+            label: "색",
+            keywords: "color 글자 배경 background text",
+            icon: ICONS.color,
+            trailing: "submenu",
+            close: false,
+            run: () => {
+                this.page = "color";
+                this.active = 0;
+                if (this.search)
+                    this.search.value = "";
+                this.renderMenu();
+            },
+        });
+        if (range) {
+            entries.push({
+                id: "clear",
+                label: "내용 지우기",
+                keywords: "clear contents 비우기",
+                icon: ICONS.clear,
+                close: true,
+                run: () => this.apply(clearCells(state, table, range), true),
+            });
+            if (query)
+                entries.push(...colorEntries(true));
+            return { entries, align: false };
+        }
+        for (const item of kind === "row" ? ROW_ACTIONS : COLUMN_ACTIONS) {
+            entries.push({
+                id: item.action,
+                label: item.label,
+                keywords: item.keywords,
+                icon: item.icon,
+                close: true,
+                run: () => this.apply(kind === "row"
+                    ? editTableRow(state, table, index, item.action)
+                    : editTableColumn(state, table, index, item.action), true),
+            });
+        }
+        // 검색하면 색도 바로 고를 수 있게 합니다.
+        if (query)
+            entries.push(...colorEntries(true));
+        return { entries, align: showAlignGroup };
+    }
+    switchEntry(label, keywords, svg, table, option) {
+        const checked = table.options[option];
+        return {
+            id: `option:${option}`,
+            label,
+            keywords,
+            icon: svg,
+            trailing: checked ? "switch-on" : "switch-off",
+            close: false,
+            run: () => this.apply(setTableOption(this.view.state, table, option, !table.options[option]), false),
+        };
+    }
+    renderMenu() {
+        const list = this.list;
+        const cx = this.context();
+        if (!list || !cx)
+            return;
+        const query = (this.search?.value ?? "").trim().toLowerCase();
+        const built = this.buildEntries(cx.table, cx.selection, query);
+        const entries = query
+            ? built.entries.filter((e) => `${e.label} ${e.keywords}`.toLowerCase().includes(query))
+            : built.entries;
+        this.entries = entries;
+        this.active = Math.min(this.active, Math.max(0, entries.length - 1));
+        list.textContent = "";
+        const separator = () => {
+            const line = document.createElement("div");
+            line.className = "cm-table-menu-separator";
+            line.setAttribute("role", "separator");
+            return line;
+        };
+        const sectionTitle = (text) => {
+            const title = document.createElement("div");
+            title.className = "cm-table-menu-section";
+            title.textContent = text;
+            return title;
+        };
+        if (entries.length === 0) {
+            const empty = document.createElement("div");
+            empty.className = "cm-table-menu-empty";
+            empty.textContent = "일치하는 동작이 없습니다";
+            list.appendChild(empty);
+            return;
+        }
+        let previousGroup = "";
+        entries.forEach((entry, i) => {
+            // 구역 나누기: 하위 메뉴의 글자/배경 색 제목, 주 메뉴에서 설정과 동작 사이 구분선
+            const group = entry.id.startsWith("color:") ? entry.id.split(":")[1] : entry.id.startsWith("option:") ? "option" : "action";
+            if (!query && this.page === "color" && group !== previousGroup && (group === "fg" || group === "bg")) {
+                list.appendChild(sectionTitle(group === "fg" ? "글자 색" : "배경 색"));
+            }
+            if (!query && this.page === "main" && entry.id === "color") {
+                if (built.align)
+                    list.appendChild(this.alignGroup(cx.table, cx.selection.index));
+                if (i > 0 || built.align)
+                    list.appendChild(separator());
+            }
+            previousGroup = group;
+            list.appendChild(this.renderEntry(entry, i));
+        });
+    }
+    renderEntry(entry, i) {
+        const row = document.createElement("button");
+        row.type = "button";
+        row.className = `cm-table-menu-item${i === this.active ? " cm-table-menu-active" : ""}`;
+        row.dataset["entry"] = entry.id;
+        if (!entry.id.includes(":") && entry.id !== "color" && entry.id !== "back")
+            row.dataset["action"] = entry.id;
+        if (entry.id.startsWith("option:"))
+            row.dataset["option"] = entry.id.slice(7);
+        row.setAttribute("role", entry.trailing === "switch-on" || entry.trailing === "switch-off" ? "menuitemcheckbox" : entry.trailing === "check" ? "menuitemradio" : "menuitem");
+        if (entry.trailing === "switch-on" || entry.trailing === "switch-off")
+            row.setAttribute("aria-checked", String(entry.trailing === "switch-on"));
+        if (entry.trailing === "check")
+            row.setAttribute("aria-checked", "true");
+        if (entry.trailing === "submenu")
+            row.setAttribute("aria-haspopup", "menu");
+        const label = document.createElement("span");
+        label.className = "cm-table-menu-label";
+        label.textContent = entry.label;
+        row.append(typeof entry.icon === "string" ? icon(entry.icon) : entry.icon(), label);
+        if (entry.trailing === "switch-on" || entry.trailing === "switch-off") {
+            const toggle = document.createElement("span");
+            toggle.className = `cm-table-switch${entry.trailing === "switch-on" ? " cm-table-switch-on" : ""}`;
+            row.appendChild(toggle);
+        }
+        else if (entry.trailing === "submenu") {
+            row.appendChild(icon(ICONS.chevron));
+        }
+        else if (entry.trailing === "check") {
+            row.appendChild(icon(ICONS.check));
+        }
+        row.addEventListener("mouseenter", () => this.setActive(i));
+        row.addEventListener("click", () => entry.run());
+        return row;
+    }
+    /** 정렬: 왼쪽/가운데/오른쪽 버튼 (정렬 표시가 없으면 왼쪽) */
+    alignGroup(table, column) {
+        const current = table.aligns[column] ?? "left";
+        const row = document.createElement("div");
+        row.className = "cm-table-menu-item cm-table-menu-align";
+        row.setAttribute("role", "group");
+        row.setAttribute("aria-label", "정렬");
+        const label = document.createElement("span");
+        label.className = "cm-table-menu-label";
+        label.textContent = "정렬";
+        const group = document.createElement("span");
+        group.className = "cm-table-segment";
+        for (const a of ALIGNS) {
+            const button = document.createElement("button");
+            button.type = "button";
+            button.className = `cm-table-segment-button${a.align === current ? " cm-table-segment-on" : ""}`;
+            button.setAttribute("role", "menuitemradio");
+            button.setAttribute("aria-checked", String(a.align === current));
+            button.setAttribute("aria-label", a.label);
+            button.title = a.label;
+            button.dataset["align"] = a.align;
+            button.appendChild(icon(a.icon));
+            button.addEventListener("click", () => this.apply(setColumnAlign(this.view.state, table, column, a.align), false));
+            group.appendChild(button);
+        }
+        const currentIcon = ALIGNS.find((a) => a.align === current).icon;
+        row.append(icon(currentIcon), label, group);
+        return row;
+    }
+    closeMenu(refocus = false) {
+        if (!this.menu)
+            return;
+        const hadFocus = this.menu.contains(this.view.dom.ownerDocument.activeElement);
+        this.menu.remove();
+        this.menu = null;
+        this.search = null;
+        this.list = null;
+        this.entries = [];
+        this.rowHandle.removeAttribute("aria-expanded");
+        this.columnHandle.removeAttribute("aria-expanded");
+        const doc = this.view.dom.ownerDocument;
+        doc.removeEventListener("mousedown", this.onDocumentMouseDown, true);
+        doc.removeEventListener("keydown", this.onDocumentKeyDown, true);
+        doc.removeEventListener("scroll", this.onScroll, true);
+        // 검색 칸에 있던 포커스를 에디터로 돌려줍니다.
+        if (refocus && hadFocus)
+            this.view.focus();
+        if (this.view.state.field(tableSelectionField, false) && !this.drag?.active) {
+            // 업데이트 도중이면 다음 틱에 해제합니다.
+            queueMicrotask(() => {
+                if (this.view.state.field(tableSelectionField, false) && !this.drag?.active) {
+                    this.view.dispatch({ effects: setTableSelection.of(null) });
+                }
+            });
+        }
+        this.place();
+    }
+    update(update) {
+        const selection = update.state.field(tableSelectionField, false);
+        if (this.menu) {
+            const ours = update.transactions.some((tr) => tr.annotation(fromMenu));
+            if (!selection || (update.docChanged && !ours)) {
+                this.closeMenu();
+                return;
+            }
+            if (this.hover) {
+                this.hover = {
+                    ...this.hover,
+                    table: selection.table,
+                    row: selection.kind === "row" ? selection.index : this.hover.row,
+                    column: selection.kind === "column" ? selection.index : this.hover.column,
+                };
+            }
+            if (update.docChanged || update.startState.field(tableSelectionField, false) !== selection)
+                this.renderMenu();
+            this.place();
+            return;
+        }
+        if (update.docChanged && this.hover && !this.drag) {
+            // 입력 중에는 손잡이를 숨깁니다.
+            this.hover = null;
+            this.place();
+        }
+        else if (this.hover && (update.geometryChanged || update.startState.field(tableSelectionField, false) !== selection)) {
+            // 메뉴를 닫아 고른 행/열이 풀리면 손잡이의 강조도 풉니다.
+            this.place();
+        }
+    }
+    destroy() {
+        this.cancelHide();
+        const doc = this.view.dom.ownerDocument;
+        doc.removeEventListener("mousedown", this.onDocumentMouseDown, true);
+        doc.removeEventListener("keydown", this.onDocumentKeyDown, true);
+        doc.removeEventListener("scroll", this.onScroll, true);
+        doc.removeEventListener("mousemove", this.onDragMove, true);
+        doc.removeEventListener("mouseup", this.onDragEnd, true);
+        this.menu?.remove();
+        this.dom.remove();
+    }
+}
+/** 색 견본: 글자 색은 "A", 배경 색은 칠한 네모 */
+function swatch(name, bg) {
+    const el = document.createElement("span");
+    el.className = `cm-table-swatch${bg ? " cm-table-swatch-bg" : ""}`;
+    el.setAttribute("aria-hidden", "true");
+    if (bg)
+        el.style.backgroundColor = name ? `var(--cm-table-bg-${name})` : "transparent";
+    else {
+        el.textContent = "A";
+        if (name)
+            el.style.color = `var(--cm-table-fg-${name})`;
+    }
+    return el;
+}
+export const tableHandles = ViewPlugin.fromClass(TableHandles, {
+    eventHandlers: {
+        mousemove(event) {
+            this.mousemove(event);
+        },
+        mouseleave() {
+            this.mouseleave();
+        },
+        contextmenu(event) {
+            return this.contextmenu(event);
+        },
+        mousedown(event) {
+            // 칸에서 오른쪽 버튼을 누르면 브라우저가 커서를 그 자리로 옮기는데, 칸 처음이면 색 표식이 펼쳐져
+            // 색을 고른 직후 결과 대신 원문(`<!--fg:red-->`)이 보입니다. 오른쪽 버튼은 커서를 옮기지 않게 합니다.
+            if (event.button === 2 && event.target instanceof Element && event.target.closest(".cm-table-cell")) {
+                event.preventDefault();
+                return true;
+            }
+            return false;
+        },
+    },
+});
+export const tableMenuTheme = EditorView.baseTheme({
+    ".cm-table-handles": { position: "absolute", top: "0", left: "0", width: "0", height: "0", zIndex: "250" },
+    ".cm-table-handle": {
+        position: "absolute",
+        display: "none",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "0",
+        border: "1px solid var(--cm-table-handle-border)",
+        borderRadius: "4px",
+        background: "var(--cm-table-handle-bg)",
+        color: "var(--cm-table-handle-fg)",
+        cursor: "grab",
+        transform: "translate(-50%, -50%)",
+        boxShadow: "0 1px 2px rgba(0, 0, 0, 0.08)",
+    },
+    ".cm-table-handle.cm-table-handle-visible": { display: "flex" },
+    ".cm-table-handle-row": { width: "12px", height: "22px" },
+    ".cm-table-handle-column": { width: "22px", height: "12px" },
+    ".cm-table-handle:hover": { background: "var(--cm-table-handle-hover)" },
+    ".cm-table-handle.cm-table-handle-active": {
+        background: "var(--cm-table-select)",
+        borderColor: "var(--cm-table-select)",
+        color: "#fff",
+    },
+    "&light .cm-table-handles, &light .cm-table-menu": {
+        "--cm-table-handle-bg": "#fff",
+        "--cm-table-handle-hover": "#f1f1ef",
+        "--cm-table-handle-border": "#dcdcdc",
+        "--cm-table-handle-fg": "#9b9a97",
+        "--cm-table-select": "#2383e2",
+        "--cm-table-menu-bg": "#fff",
+        "--cm-table-menu-fg": "#37352f",
+        "--cm-table-menu-hover": "rgba(55, 53, 47, 0.08)",
+        "--cm-table-switch-off": "rgba(135, 131, 120, 0.3)",
+        "--cm-table-menu-border": "rgba(55, 53, 47, 0.16)",
+        "--cm-table-menu-input": "rgba(242, 241, 238, 0.6)",
+        "--cm-table-select-soft": "rgba(35, 131, 226, 0.2)",
+    },
+    "&dark .cm-table-handles, &dark .cm-table-menu": {
+        "--cm-table-handle-bg": "#2f3437",
+        "--cm-table-handle-hover": "#3a4044",
+        "--cm-table-handle-border": "#4b5563",
+        "--cm-table-handle-fg": "#9ca3af",
+        "--cm-table-select": "#4ea1f3",
+        "--cm-table-menu-bg": "#252525",
+        "--cm-table-menu-fg": "#e5e5e5",
+        "--cm-table-menu-hover": "rgba(255, 255, 255, 0.08)",
+        "--cm-table-switch-off": "rgba(255, 255, 255, 0.2)",
+        "--cm-table-menu-border": "rgba(255, 255, 255, 0.14)",
+        "--cm-table-menu-input": "rgba(255, 255, 255, 0.05)",
+        "--cm-table-select-soft": "rgba(78, 161, 243, 0.25)",
+    },
+    ".cm-table-menu": {
+        position: "fixed",
+        zIndex: "500",
+        minWidth: "220px",
+        padding: "6px",
+        borderRadius: "8px",
+        background: "var(--cm-table-menu-bg)",
+        color: "var(--cm-table-menu-fg)",
+        boxShadow: "0 0 0 1px rgba(15, 15, 15, 0.05), 0 3px 6px rgba(15, 15, 15, 0.1), 0 9px 24px rgba(15, 15, 15, 0.2)",
+        font: "14px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    },
+    ".cm-table-menu-item": {
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        width: "100%",
+        boxSizing: "border-box",
+        padding: "6px 8px",
+        border: "none",
+        borderRadius: "6px",
+        background: "none",
+        color: "inherit",
+        font: "inherit",
+        textAlign: "left",
+        cursor: "pointer",
+    },
+    ".cm-table-menu-item:hover": { background: "var(--cm-table-menu-hover)" },
+    ".cm-table-menu-label": { flex: "1" },
+    ".cm-table-menu-search": {
+        boxSizing: "border-box",
+        width: "100%",
+        margin: "0 0 4px",
+        padding: "5px 8px",
+        border: "1px solid var(--cm-table-menu-border)",
+        borderRadius: "6px",
+        outline: "none",
+        background: "var(--cm-table-menu-input)",
+        color: "inherit",
+        font: "inherit",
+    },
+    ".cm-table-menu-search:focus": { borderColor: "var(--cm-table-select)", boxShadow: "0 0 0 2px var(--cm-table-select-soft)" },
+    ".cm-table-menu-list": { maxHeight: "min(60vh, 420px)", overflowY: "auto" },
+    ".cm-table-menu-section": { padding: "6px 8px 2px", fontSize: "12px", opacity: "0.6" },
+    ".cm-table-menu-empty": { padding: "8px", opacity: "0.6" },
+    ".cm-table-menu-active": { background: "var(--cm-table-menu-hover)" },
+    ".cm-table-swatch": {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "18px",
+        height: "18px",
+        boxSizing: "border-box",
+        border: "1px solid var(--cm-table-menu-border)",
+        borderRadius: "4px",
+        fontWeight: "600",
+        fontSize: "12px",
+    },
+    ".cm-table-drop": {
+        position: "absolute",
+        display: "none",
+        background: "var(--cm-table-select)",
+        borderRadius: "1px",
+        pointerEvents: "none",
+    },
+    ".cm-table-drop.cm-table-drop-visible": { display: "block" },
+    "&.cm-table-dragging, &.cm-table-dragging *": { cursor: "grabbing !important" },
+    ".cm-table-menu-separator": { height: "1px", margin: "4px 2px", background: "var(--cm-table-menu-hover)" },
+    ".cm-table-menu-align": { cursor: "default" },
+    ".cm-table-menu-align:hover": { background: "none" },
+    ".cm-table-segment": {
+        display: "inline-flex",
+        padding: "2px",
+        gap: "2px",
+        borderRadius: "6px",
+        background: "var(--cm-table-switch-off)",
+    },
+    ".cm-table-segment-button": {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "26px",
+        height: "20px",
+        padding: "0",
+        border: "none",
+        borderRadius: "4px",
+        background: "none",
+        color: "inherit",
+        cursor: "pointer",
+        opacity: "0.65",
+    },
+    ".cm-table-segment-button:hover": { opacity: "1" },
+    ".cm-table-segment-on": {
+        background: "var(--cm-table-menu-bg)",
+        opacity: "1",
+        boxShadow: "0 1px 2px rgba(0, 0, 0, 0.15)",
+    },
+    ".cm-table-switch": {
+        position: "relative",
+        width: "28px",
+        height: "16px",
+        borderRadius: "8px",
+        background: "var(--cm-table-switch-off)",
+        transition: "background 150ms ease",
+    },
+    ".cm-table-switch::after": {
+        content: '""',
+        position: "absolute",
+        top: "2px",
+        left: "2px",
+        width: "12px",
+        height: "12px",
+        borderRadius: "50%",
+        background: "#fff",
+        transition: "transform 150ms ease",
+    },
+    ".cm-table-switch-on": { background: "var(--cm-table-select)" },
+    ".cm-table-switch-on::after": { transform: "translateX(12px)" },
+    "@media (prefers-reduced-motion: reduce)": {
+        ".cm-table-switch, .cm-table-switch::after": { transition: "none" },
+    },
+});