@lumir-company/editor 0.4.17 → 0.4.19

package/README.md

@@ -1261,6 +1261,7 @@ interface LumirEditorProps {
   tableHandles?: boolean; // 테이블 핸들 표시 (기본: true)
   floatingMenu?: boolean; // 상단 고정 플로팅 메뉴 표시 (기본: false)
   floatingMenuPosition?: "sticky" | "fixed"; // 플로팅 메뉴 위치 (기본: "sticky")
+  columnDivider?: boolean; // 2단(다단) 컬럼 사이 중앙 세로 구분선 표시 (기본: false)
   className?: string; // 컨테이너 CSS 클래스
 
   // === 링크 프리뷰 설정 ===
@@ -1478,6 +1479,25 @@ const url = await uploader(imageFile);
 
 ## 변경 로그
 
+### v0.4.19
+
+- **2단 컬럼 중앙 세로 구분선 (`columnDivider` 옵션)** *(신규)*
+  - `columnDivider` prop(기본 `false`)으로 2단(다단) 컬럼 사이 중앙에 세로 구분선 표시
+  - 구분선 양쪽에 드래그 핸들(grip) 너비만큼 여백을 둬 핸들과 겹치지 않음
+  - 색·여백을 CSS 변수로 조절: `--lumir-column-divider-color`(기본 `#e5e7eb`), `--lumir-column-grip-space`(기본 28px)
+- **표 전체 종횡비 고정 스케일 (코너 드래그)** *(신규)*
+  - 표 우하단 모서리 hover 시 대각 리사이즈 커서 → 드래그로 표 전체를 종횡비 고정 균일 배율로 확대/축소
+  - 모든 열 너비(`colwidth`)·행 높이(`rowHeight`)에 동일 배율 적용 → 행·열 상대 비율과 표 종횡비 유지
+  - 셀 focus 없이 표 hover만으로 동작(코어 hover 상태 기반), 기존 행/열 개별 리사이즈와 충돌 없음
+  - `tableHandles` prop으로 게이트(행/열 리사이즈와 동일)
+
+### v0.4.18
+
+- **표 열 삭제 버그 수정 (병합 셀 포함)**
+  - 그립 메뉴로 첫 열/행 삭제 시, 그립 클릭으로 ProseMirror 선택이 표 밖으로 빠져 삭제가 무시되던 문제 수정(삭제 대상 표를 포커스 표 기준으로 결정적으로 탐색)
+  - **세로 병합(rowspan) 인접 열**이 있을 때 첫 열이 삭제되지 않던 문제 수정 — 코어 prosemirror-tables가 행의 유일 셀을 지울 때 빈 셀을 남겨(`tableRow+` 스키마) `fixTables`가 원복하던 케이스. 열 삭제를 표 재구성 방식으로 변경해 colspan/rowspan 병합을 안전하게 처리
+  - 병합 셀이 행 축소로 collapse될 때 **행 높이를 보존**(원래 차지하던 행 높이 합을 유지)
+
 ### v0.4.17
 
 - **표 행 높이(세로) 리사이즈**

package/dist/index.d.mts

@@ -119,6 +119,7 @@ interface LumirEditorProps {
     onSelectionChange?: () => void;
     className?: string;
     sideMenuAddButton?: boolean;
+    columnDivider?: boolean;
     floatingMenu?: boolean;
     floatingMenuPosition?: "sticky" | "fixed";
     linkPreview?: {
@@ -255,7 +256,7 @@ declare class EditorConfig {
      */
     static getDisabledExtensions(userExtensions?: string[], allowVideo?: boolean, allowAudio?: boolean, allowFile?: boolean): string[];
 }
-declare function LumirEditor({ initialContent, initialEmptyBlocks, uploadFile, s3Upload, tables, heading, defaultStyles, disableExtensions, tabBehavior, trailingBlock, allowVideoUpload, allowAudioUpload, allowFileUpload, maxImageFileSize, maxVideoFileSize, linkPreview, editable, theme, formattingToolbar, linkToolbar, sideMenu, emojiPicker, filePanel, tableHandles, onSelectionChange, className, placeholder, sideMenuAddButton, floatingMenu, floatingMenuPosition, onContentChange, onError, onImageDelete, }: LumirEditorProps): react_jsx_runtime.JSX.Element;
+declare function LumirEditor({ initialContent, initialEmptyBlocks, uploadFile, s3Upload, tables, heading, defaultStyles, disableExtensions, tabBehavior, trailingBlock, allowVideoUpload, allowAudioUpload, allowFileUpload, maxImageFileSize, maxVideoFileSize, linkPreview, editable, theme, formattingToolbar, linkToolbar, sideMenu, emojiPicker, filePanel, tableHandles, onSelectionChange, className, placeholder, sideMenuAddButton, columnDivider, floatingMenu, floatingMenuPosition, onContentChange, onError, onImageDelete, }: LumirEditorProps): react_jsx_runtime.JSX.Element;
 
 declare function cn(...inputs: (string | undefined | null | false)[]): string;
 

package/dist/index.d.ts

@@ -119,6 +119,7 @@ interface LumirEditorProps {
     onSelectionChange?: () => void;
     className?: string;
     sideMenuAddButton?: boolean;
+    columnDivider?: boolean;
     floatingMenu?: boolean;
     floatingMenuPosition?: "sticky" | "fixed";
     linkPreview?: {
@@ -255,7 +256,7 @@ declare class EditorConfig {
      */
     static getDisabledExtensions(userExtensions?: string[], allowVideo?: boolean, allowAudio?: boolean, allowFile?: boolean): string[];
 }
-declare function LumirEditor({ initialContent, initialEmptyBlocks, uploadFile, s3Upload, tables, heading, defaultStyles, disableExtensions, tabBehavior, trailingBlock, allowVideoUpload, allowAudioUpload, allowFileUpload, maxImageFileSize, maxVideoFileSize, linkPreview, editable, theme, formattingToolbar, linkToolbar, sideMenu, emojiPicker, filePanel, tableHandles, onSelectionChange, className, placeholder, sideMenuAddButton, floatingMenu, floatingMenuPosition, onContentChange, onError, onImageDelete, }: LumirEditorProps): react_jsx_runtime.JSX.Element;
+declare function LumirEditor({ initialContent, initialEmptyBlocks, uploadFile, s3Upload, tables, heading, defaultStyles, disableExtensions, tabBehavior, trailingBlock, allowVideoUpload, allowAudioUpload, allowFileUpload, maxImageFileSize, maxVideoFileSize, linkPreview, editable, theme, formattingToolbar, linkToolbar, sideMenu, emojiPicker, filePanel, tableHandles, onSelectionChange, className, placeholder, sideMenuAddButton, columnDivider, floatingMenu, floatingMenuPosition, onContentChange, onError, onImageDelete, }: LumirEditorProps): react_jsx_runtime.JSX.Element;
 
 declare function cn(...inputs: (string | undefined | null | false)[]): string;
 

package/dist/index.js

@@ -3436,6 +3436,8 @@ var ALLOWED_VIDEO_EXTENSIONS = [
 ];
 var ROW_RESIZE_MIN_HEIGHT = 24;
 var ROW_RESIZE_HANDLE_WIDTH = 5;
+var TABLE_SCALE_MIN_COL_WIDTH = 24;
+var TABLE_SCALE_MAX = 6;
 
 // src/extensions/rowResizing.ts
 var rowResizingPluginKey = new import_prosemirror_state3.PluginKey(
@@ -3714,9 +3716,165 @@ function handleDecorations(state, pluginState) {
   return import_prosemirror_view2.DecorationSet.create(state.doc, decorations);
 }
 
-// src/extensions/tableCellAttrPreserve.ts
+// src/extensions/tableScaling.ts
 var import_prosemirror_state4 = require("prosemirror-state");
-var tableCellAttrPreserveKey = new import_prosemirror_state4.PluginKey(
+var import_prosemirror_view3 = require("prosemirror-view");
+var import_prosemirror_tables2 = require("prosemirror-tables");
+var tableScalingPluginKey = new import_prosemirror_state4.PluginKey(
+  "lumirTableScaling"
+);
+function tableScaling() {
+  return new import_prosemirror_state4.Plugin({
+    key: tableScalingPluginKey,
+    state: {
+      init: () => null,
+      apply(tr, prev) {
+        const meta = tr.getMeta(tableScalingPluginKey);
+        if (meta !== void 0) return meta.preview;
+        if (prev && tr.docChanged) {
+          return { ...prev, tablePos: tr.mapping.map(prev.tablePos, -1) };
+        }
+        return prev;
+      }
+    },
+    props: {
+      decorations(state) {
+        const p = tableScalingPluginKey.getState(state);
+        return p ? buildHeightDecorations(state, p) : null;
+      }
+    },
+    view: (view) => ({
+      update: () => {
+        const p = tableScalingPluginKey.getState(view.state);
+        if (p) applyColgroupPreview(view, p);
+      }
+    })
+  });
+}
+function setTableScalePreview(view, preview) {
+  view.dispatch(view.state.tr.setMeta(tableScalingPluginKey, { preview }));
+}
+function measureTableForScale(view, tablePos) {
+  const tableEl = findTableEl(view.nodeDOM(tablePos));
+  const node = view.state.doc.nodeAt(tablePos);
+  if (!tableEl || !node || node.type.name !== "table") return null;
+  const map = import_prosemirror_tables2.TableMap.get(node);
+  const rect = tableEl.getBoundingClientRect();
+  const body = tableEl.tBodies[0];
+  const rowHeights = body ? Array.from(body.rows).map((tr) => tr.getBoundingClientRect().height) : [];
+  const colWidths = measureColWidths(tableEl, map.width);
+  if (rowHeights.length !== map.height || colWidths.length !== map.width) {
+    return null;
+  }
+  return {
+    tablePos,
+    colWidths,
+    rowHeights,
+    origW: rect.width,
+    origH: rect.height,
+    scale: 1
+  };
+}
+function commitTableScale(view, preview) {
+  const { state } = view;
+  const { tablePos, colWidths, rowHeights, scale } = preview;
+  const table = state.doc.nodeAt(tablePos);
+  if (!table || table.type.name !== "table") return;
+  const map = import_prosemirror_tables2.TableMap.get(table);
+  const start = tablePos + 1;
+  const tr = state.tr;
+  const seen = /* @__PURE__ */ new Set();
+  for (const relPos of map.map) {
+    if (seen.has(relPos)) continue;
+    seen.add(relPos);
+    const node = table.nodeAt(relPos);
+    if (!node) continue;
+    const rect = map.findCell(relPos);
+    const colwidth = [];
+    for (let c = rect.left; c < rect.right; c++) {
+      colwidth.push(Math.round((colWidths[c] ?? 0) * scale));
+    }
+    let h = 0;
+    for (let r = rect.top; r < rect.bottom; r++) h += rowHeights[r] ?? 0;
+    const rowHeight = Math.round(h * scale);
+    tr.setNodeMarkup(start + relPos, void 0, {
+      ...node.attrs,
+      colwidth: colwidth.some((w) => w > 0) ? colwidth : null,
+      rowHeight: rowHeight > 0 ? rowHeight : null
+    });
+  }
+  if (tr.docChanged) view.dispatch(tr);
+}
+function measureColWidths(tableEl, width) {
+  const widths = new Array(width).fill(0);
+  const colgroup = tableEl.querySelector("colgroup");
+  if (colgroup && colgroup.children.length === width) {
+    let allSet = true;
+    for (let i = 0; i < width; i++) {
+      const w = parseFloat(colgroup.children[i].style.width);
+      if (Number.isFinite(w) && w > 0) widths[i] = w;
+      else allSet = false;
+    }
+    if (allSet) return widths;
+  }
+  const firstRow = tableEl.tBodies[0]?.rows[0];
+  if (firstRow) {
+    let col = 0;
+    for (const cell of Array.from(firstRow.cells)) {
+      const span = cell.colSpan || 1;
+      const w = cell.getBoundingClientRect().width / span;
+      for (let s = 0; s < span && col < width; s++) widths[col++] = w;
+    }
+  }
+  return widths;
+}
+function applyColgroupPreview(view, p) {
+  const tableEl = findTableEl(view.nodeDOM(p.tablePos));
+  const colgroup = tableEl?.querySelector("colgroup");
+  if (!colgroup) return;
+  const cols = colgroup.children;
+  for (let i = 0; i < cols.length && i < p.colWidths.length; i++) {
+    cols[i].style.width = Math.round(p.colWidths[i] * p.scale) + "px";
+  }
+}
+function buildHeightDecorations(state, p) {
+  const table = state.doc.nodeAt(p.tablePos);
+  if (!table || table.type.name !== "table") return import_prosemirror_view3.DecorationSet.empty;
+  const map = import_prosemirror_tables2.TableMap.get(table);
+  const start = p.tablePos + 1;
+  const decorations = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const relPos of map.map) {
+    if (seen.has(relPos)) continue;
+    seen.add(relPos);
+    const node = table.nodeAt(relPos);
+    if (!node) continue;
+    const rect = map.findCell(relPos);
+    let h = 0;
+    for (let r = rect.top; r < rect.bottom; r++) h += p.rowHeights[r] ?? 0;
+    const from = start + relPos;
+    const to = from + node.nodeSize;
+    decorations.push(
+      import_prosemirror_view3.Decoration.node(from, to, {
+        class: "lumir-table-scale-dragging",
+        style: `height: ${Math.round(h * p.scale)}px`
+      })
+    );
+  }
+  return import_prosemirror_view3.DecorationSet.create(state.doc, decorations);
+}
+function findTableEl(dom) {
+  if (!dom) return null;
+  const el = dom;
+  if (el.nodeName === "TABLE") return el;
+  const inner = el.querySelector?.("table");
+  if (inner) return inner;
+  return el.closest?.("table") ?? null;
+}
+
+// src/extensions/tableCellAttrPreserve.ts
+var import_prosemirror_state5 = require("prosemirror-state");
+var tableCellAttrPreserveKey = new import_prosemirror_state5.PluginKey(
   "lumirTableCellAttrPreserve"
 );
 var PRESERVED_ATTRS = [
@@ -3773,7 +3931,7 @@ function collectCellAttrs(doc) {
   return result;
 }
 function tableCellAttrPreserve() {
-  return new import_prosemirror_state4.Plugin({
+  return new import_prosemirror_state5.Plugin({
     key: tableCellAttrPreserveKey,
     appendTransaction(transactions, oldState, newState) {
       if (!transactions.some((tr2) => tr2.docChanged)) {
@@ -3879,6 +4037,7 @@ var RowHeightExtension = import_core5.Extension.create({
     const plugins = [tableCellAttrPreserve()];
     if (this.options.resizable) {
       plugins.push(rowResizing());
+      plugins.push(tableScaling());
     }
     return plugins;
   }
@@ -3886,11 +4045,11 @@ var RowHeightExtension = import_core5.Extension.create({
 
 // src/extensions/TableAlignmentExtension.ts
 var import_core6 = require("@tiptap/core");
-var import_prosemirror_state5 = require("prosemirror-state");
-var import_prosemirror_view3 = require("prosemirror-view");
-var tableAlignmentDecoKey = new import_prosemirror_state5.PluginKey("lumirTableAlignmentDeco");
+var import_prosemirror_state6 = require("prosemirror-state");
+var import_prosemirror_view4 = require("prosemirror-view");
+var tableAlignmentDecoKey = new import_prosemirror_state6.PluginKey("lumirTableAlignmentDeco");
 function tableAlignmentDecorationPlugin() {
-  return new import_prosemirror_state5.Plugin({
+  return new import_prosemirror_state6.Plugin({
     key: tableAlignmentDecoKey,
     props: {
       decorations(state) {
@@ -3900,7 +4059,7 @@ function tableAlignmentDecorationPlugin() {
             const align = node.attrs.tableAlignment;
             if (align && align !== "left") {
               decorations.push(
-                import_prosemirror_view3.Decoration.node(pos, pos + node.nodeSize, {
+                import_prosemirror_view4.Decoration.node(pos, pos + node.nodeSize, {
                   "data-table-alignment": align
                 })
               );
@@ -3909,7 +4068,7 @@ function tableAlignmentDecorationPlugin() {
           }
           return void 0;
         });
-        return import_prosemirror_view3.DecorationSet.create(state.doc, decorations);
+        return import_prosemirror_view4.DecorationSet.create(state.doc, decorations);
       }
     }
   });
@@ -3941,7 +4100,7 @@ var TableAlignmentExtension = import_core6.Extension.create({
 });
 
 // src/blocks/columns/insertColumns.ts
-var import_prosemirror_state6 = require("prosemirror-state");
+var import_prosemirror_state7 = require("prosemirror-state");
 function insertTwoColumns(editor) {
   const tiptap = editor?._tiptapEditor;
   if (!tiptap) {
@@ -3973,7 +4132,7 @@ function insertTwoColumns(editor) {
   try {
     let tr = state.tr.insert(insertPos, list);
     try {
-      tr = tr.setSelection(import_prosemirror_state6.TextSelection.create(tr.doc, insertPos + 4));
+      tr = tr.setSelection(import_prosemirror_state7.TextSelection.create(tr.doc, insertPos + 4));
     } catch {
     }
     tiptap.view.dispatch(tr.scrollIntoView());
@@ -4787,9 +4946,14 @@ var import_react33 = require("react");
 function useFocusedCellHandlePositioning(cellEl, tbodyEl, orientation, show) {
   const { refs, floatingStyles, context, update } = (0, import_react32.useFloating)({
     open: show,
-    placement: orientation === "row" ? "left" : orientation === "col" ? "top" : "right",
-    // col/row: 가장자리 선(zero-size)에, cell: 셀 우측 보더에 14px hit-area 중앙 정렬(-7).
-    middleware: [(0, import_react32.offset)(-7)],
+    placement: orientation === "row" ? "left" : orientation === "col" ? "top" : orientation === "corner" ? "bottom-start" : "right",
+    // col/row/cell: 가장자리에 14px hit-area 중앙 정렬(-7).
+    // corner: 18px hit-zone이 표 우하단 모서리에 걸치도록 위/좌로 살짝 당김(모서리 hover 자연).
+    middleware: [
+      (0, import_react32.offset)(
+        orientation === "corner" ? { mainAxis: -6, crossAxis: -6 } : -7
+      )
+    ],
     whileElementsMounted: import_react32.autoUpdate
   });
   const { isMounted, styles } = (0, import_react32.useTransitionStyles)(context);
@@ -4817,6 +4981,9 @@ function useFocusedCellHandlePositioning(cellEl, tbodyEl, orientation, show) {
         if (orientation === "row") {
           return new DOMRect(t.left, c.top, 0, c.height);
         }
+        if (orientation === "corner") {
+          return new DOMRect(t.right, t.bottom, 0, 0);
+        }
         return c;
       }
     });
@@ -4834,6 +5001,33 @@ function useFocusedCellHandlePositioning(cellEl, tbodyEl, orientation, show) {
     [floatingStyles, isMounted, refs.setFloating, styles]
   );
 }
+function useTableCornerPositioning(referencePosTable, show) {
+  const { refs, floatingStyles, context } = (0, import_react32.useFloating)({
+    open: show,
+    placement: "bottom-start",
+    // 18px hit-zone을 모서리에서 안쪽(위/좌)으로 당겨 표 위에 걸치게 한다.
+    middleware: [(0, import_react32.offset)({ mainAxis: -12, crossAxis: -12 })],
+    whileElementsMounted: import_react32.autoUpdate
+  });
+  const { isMounted, styles } = (0, import_react32.useTransitionStyles)(context);
+  (0, import_react33.useEffect)(() => {
+    if (!referencePosTable) {
+      refs.setReference(null);
+      return;
+    }
+    refs.setReference({
+      getBoundingClientRect: () => new DOMRect(referencePosTable.right, referencePosTable.bottom, 0, 0)
+    });
+  }, [referencePosTable, refs]);
+  return (0, import_react33.useMemo)(
+    () => ({
+      isMounted,
+      ref: refs.setFloating,
+      style: { ...styles, ...floatingStyles }
+    }),
+    [floatingStyles, isMounted, refs.setFloating, styles]
+  );
+}
 
 // src/components/LumirTableHandlesController.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
@@ -4858,6 +5052,9 @@ function LumirTableHandlesController() {
   const frozenRef = (0, import_react36.useRef)(false);
   const menuOpenRef = (0, import_react36.useRef)(false);
   const draggingRef = (0, import_react36.useRef)(false);
+  (0, import_react36.useEffect)(() => {
+    editor.__lumirActiveTableId = focused?.block?.id ?? null;
+  }, [editor, focused]);
   const recompute = (0, import_react36.useCallback)(() => {
     if (frozenRef.current) {
       return;
@@ -4981,6 +5178,10 @@ function LumirTableHandlesController() {
   const onEndExtend = (0, import_react36.useCallback)(() => {
     editor.tableHandles?.unfreezeHandles();
   }, [editor]);
+  const tableCorner = useTableCornerPositioning(
+    coreState?.referencePosTable ?? null,
+    !!coreState?.widgetContainer
+  );
   const menuHandlers = (0, import_react36.useMemo)(() => {
     const mk = (kind) => ({
       freeze: () => {
@@ -5030,6 +5231,48 @@ function LumirTableHandlesController() {
   }, [editor, recompute]);
   const noop = (0, import_react36.useCallback)(() => {
   }, []);
+  const onScaleStart = (0, import_react36.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const view = editor.prosemirrorView;
+      const blockId = coreState?.block?.id;
+      if (!view || !blockId) return;
+      const tablePos = findTableNodePos(editor._tiptapEditor, blockId);
+      if (tablePos < 0) return;
+      const base = measureTableForScale(view, tablePos);
+      if (!base) return;
+      const minScale = Math.max(
+        TABLE_SCALE_MIN_COL_WIDTH / Math.max(1, Math.min(...base.colWidths)),
+        ROW_RESIZE_MIN_HEIGHT / Math.max(1, Math.min(...base.rowHeights))
+      );
+      const startX = e.clientX;
+      const startY = e.clientY;
+      let current = base;
+      editor.tableHandles?.freezeHandles();
+      const onMove = (me) => {
+        if (me.buttons === 0) return onUp();
+        const newW = base.origW + (me.clientX - startX);
+        const newH = base.origH + (me.clientY - startY);
+        const scale = Math.min(
+          TABLE_SCALE_MAX,
+          Math.max(minScale, Math.max(newW / base.origW, newH / base.origH))
+        );
+        current = { ...base, scale };
+        setTableScalePreview(view, current);
+      };
+      const onUp = () => {
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        setTableScalePreview(view, null);
+        commitTableScale(view, current);
+        editor.tableHandles?.unfreezeHandles();
+      };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+    },
+    [editor, coreState]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref: setMenuContainerRef }),
     th && focused && menuContainerRef && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react35.FloatingPortal, { root: focused.widgetContainer, children: [
@@ -5145,6 +5388,16 @@ function LumirTableHandlesController() {
             }
           )
         }
+      ),
+      tableCorner.isMounted && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        "div",
+        {
+          ref: tableCorner.ref,
+          style: tableCorner.style,
+          className: "lumir-tbl-scale-handle",
+          title: "\uD45C \uD06C\uAE30 \uC870\uC808 (\uC885\uD6A1\uBE44 \uACE0\uC815)",
+          onPointerDown: onScaleStart
+        }
       )
     ] })
   ] });
@@ -5400,6 +5653,140 @@ function liftFontSize(blocks) {
   return mapPreservingRef(blocks, (b) => mapBlock(b, "lift"));
 }
 
+// src/utils/table-delete.ts
+var import_prosemirror_tables3 = require("prosemirror-tables");
+function measureRowHeights(view, tablePos) {
+  try {
+    const at = view?.domAtPos?.(tablePos + 1);
+    let el = at?.node;
+    if (el && el.nodeType === 3) el = el.parentElement;
+    const tableEl = el?.closest?.("table") ?? null;
+    const body = tableEl?.tBodies?.[0];
+    if (!body) return null;
+    return Array.from(body.rows).map(
+      (tr) => Math.round(tr.getBoundingClientRect().height)
+    );
+  } catch {
+    return null;
+  }
+}
+function buildDeleteColumnTr(state, tablePos, col, rowPx) {
+  const table = state.doc.nodeAt(tablePos);
+  if (!table || table.type.name !== "table") return null;
+  const map = import_prosemirror_tables3.TableMap.get(table);
+  const W = map.width;
+  const H = map.height;
+  if (col < 0 || col >= W || W <= 1) return null;
+  const cells = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (let r = 0; r < H; r++) {
+    for (let c = 0; c < W; c++) {
+      const pos = map.map[r * W + c];
+      if (seen.has(pos)) continue;
+      seen.add(pos);
+      const node = table.nodeAt(pos);
+      if (!node) continue;
+      cells.push({
+        node,
+        top: r,
+        left: c,
+        rowspan: node.attrs.rowspan ?? 1,
+        colspan: node.attrs.colspan ?? 1
+      });
+    }
+  }
+  const spansCol = (c) => c.left <= col && col < c.left + c.colspan;
+  const isDropped = (c) => spansCol(c) && c.colspan === 1;
+  const survivingByRow = new Array(H).fill(0);
+  for (const c of cells) if (!isDropped(c)) survivingByRow[c.top]++;
+  const rowDies = survivingByRow.map((n) => n === 0);
+  const newRowIndex = [];
+  let ni = 0;
+  for (let r = 0; r < H; r++) newRowIndex[r] = rowDies[r] ? -1 : ni++;
+  const newH = ni;
+  if (newH === 0) return null;
+  const newRows = Array.from({ length: newH }, () => []);
+  for (const c of cells) {
+    if (isDropped(c)) continue;
+    const newColspan = c.colspan - (spansCol(c) ? 1 : 0);
+    let dyingWithin = 0;
+    for (let r = c.top; r < c.top + c.rowspan; r++) if (rowDies[r]) dyingWithin++;
+    const newRowspan = Math.max(1, c.rowspan - dyingWithin);
+    const attrs = { ...c.node.attrs, colspan: newColspan, rowspan: newRowspan };
+    if (spansCol(c) && Array.isArray(attrs.colwidth) && attrs.colwidth.length) {
+      const cw = attrs.colwidth.slice();
+      cw.splice(col - c.left, 1);
+      attrs.colwidth = cw.some((w) => w > 0) ? cw : null;
+    }
+    if (dyingWithin > 0 && rowPx) {
+      let sum = 0;
+      let ok = true;
+      for (let r = c.top; r < c.top + c.rowspan; r++) {
+        if (typeof rowPx[r] !== "number") {
+          ok = false;
+          break;
+        }
+        sum += rowPx[r];
+      }
+      if (ok && sum > 0) attrs.rowHeight = Math.round(sum);
+    }
+    const target = newRowIndex[c.top];
+    if (target >= 0) newRows[target].push(c.node.type.create(attrs, c.node.content));
+  }
+  const rowType = table.child(0)?.type;
+  if (!rowType) return null;
+  const rowNodes = newRows.map((rowCells) => rowType.create(null, rowCells));
+  const newTable = table.type.create(table.attrs, rowNodes);
+  const tr = state.tr;
+  tr.replaceWith(tablePos, tablePos + table.nodeSize, newTable);
+  return tr.docChanged ? tr : null;
+}
+function removeFocusedRowOrColumn(editor, index, direction) {
+  const tiptap = editor?._tiptapEditor;
+  if (!tiptap) return false;
+  const { state } = tiptap;
+  let tablePos = -1;
+  const activeId = editor?.__lumirActiveTableId;
+  if (activeId) {
+    const p = findTableNodePos(tiptap, activeId);
+    if (p >= 0 && state.doc.nodeAt(p)?.type.name === "table") tablePos = p;
+  }
+  if (tablePos < 0) {
+    const $from = state.selection.$from;
+    for (let d = $from.depth; d > 0; d--) {
+      if ($from.node(d).type.name === "table") {
+        tablePos = $from.before(d);
+        break;
+      }
+    }
+  }
+  if (tablePos < 0) {
+    const vp = editor?.tableHandles?.view?.tablePos;
+    if (typeof vp === "number" && state.doc.nodeAt(vp)?.type.name === "table") {
+      tablePos = vp;
+    }
+  }
+  if (tablePos < 0) return false;
+  try {
+    if (direction === "column") {
+      const rowPx = measureRowHeights(tiptap.view, tablePos);
+      const tr = buildDeleteColumnTr(state, tablePos, index, rowPx);
+      if (!tr) return false;
+      tiptap.view.dispatch(tr);
+      return true;
+    }
+    const tableInside = state.doc.resolve(tablePos + 1);
+    const rowStart = state.doc.resolve(tableInside.posAtIndex(index) + 1);
+    const cellPos = state.doc.resolve(rowStart.posAtIndex(0));
+    const selState = state.apply(
+      state.tr.setSelection(new import_prosemirror_tables3.CellSelection(cellPos))
+    );
+    return (0, import_prosemirror_tables3.deleteRow)(selState, (tr) => tiptap.view.dispatch(tr));
+  } catch {
+    return false;
+  }
+}
+
 // src/utils/excel-paste.ts
 var NAMED_COLORS = {
   black: "#000000",
@@ -5941,6 +6328,7 @@ function LumirEditor({
   className = "",
   placeholder,
   sideMenuAddButton = false,
+  columnDivider = false,
   floatingMenu = false,
   floatingMenuPosition = "sticky",
   // callbacks / refs
@@ -6253,6 +6641,18 @@ function LumirEditor({
       editor.isEditable = editable;
     }
   }, [editor, editable]);
+  (0, import_react37.useEffect)(() => {
+    if (!editor) return;
+    const th = editor.tableHandles;
+    if (!th || th.__lumirColDelPatched || typeof th.removeRowOrColumn !== "function")
+      return;
+    const orig = th.removeRowOrColumn.bind(th);
+    th.removeRowOrColumn = (index, dir) => {
+      if (removeFocusedRowOrColumn(editor, index, dir)) return;
+      return orig(index, dir);
+    };
+    th.__lumirColDelPatched = true;
+  }, [editor]);
   (0, import_react37.useEffect)(() => {
     if (!editor || !floatingMenu) return;
     const ft = editor.formattingToolbar;
@@ -6443,7 +6843,11 @@ function LumirEditor({
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
-      className: cn("lumirEditor", className),
+      className: cn(
+        "lumirEditor",
+        columnDivider && "lumir-column-divider",
+        className
+      ),
       style: { position: "relative", display: "flex", flexDirection: "column" },
       children: [
         floatingMenu && editor && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [