@lumir-company/editor 0.4.16 → 0.4.17

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 
 // src/components/LumirEditor.tsx
-import { useEffect as useEffect11, useMemo as useMemo7, useCallback as useCallback20, useState as useState12, useRef as useRef12 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo8, useCallback as useCallback21, useState as useState12, useRef as useRef12 } from "react";
 import {
   useCreateBlockNote,
   SideMenu as BlockSideMenu,
@@ -11,8 +11,8 @@ import {
   getDefaultReactSlashMenuItems,
   LinkToolbarController,
   FormattingToolbarController,
-  useBlockNoteEditor as useBlockNoteEditor6,
-  useComponentsContext as useComponentsContext5,
+  useBlockNoteEditor as useBlockNoteEditor8,
+  useComponentsContext as useComponentsContext7,
   EditLinkButton,
   OpenLinkButton,
   DeleteLinkButton
@@ -260,7 +260,8 @@ import {
   defaultBlockSpecs,
   BlockNoteSchema,
   defaultInlineContentSpecs,
-  defaultStyleSpecs
+  defaultStyleSpecs,
+  createBlockSpecFromStronglyTypedTiptapNode
 } from "@blocknote/core";
 
 // src/blocks/LinkPreview.tsx
@@ -1221,6 +1222,310 @@ var VideoBlock = createReactBlockSpec2(
   }
 );
 
+// src/blocks/columns/ColumnList.ts
+import { createStronglyTypedTiptapNode } from "@blocknote/core";
+
+// src/blocks/columns/columnNormalization.ts
+import { Plugin, PluginKey } from "prosemirror-state";
+var columnNormalizationKey = new PluginKey("lumirColumnNormalization");
+function columnNormalization() {
+  return new Plugin({
+    key: columnNormalizationKey,
+    appendTransaction(transactions, _oldState, newState) {
+      if (!transactions.some((tr2) => tr2.docChanged)) {
+        return null;
+      }
+      const lists = [];
+      newState.doc.descendants((node, pos) => {
+        if (node.type.name === "columnList") {
+          lists.push({ pos, node });
+          return false;
+        }
+        return void 0;
+      });
+      if (lists.length === 0) {
+        return null;
+      }
+      const tr = newState.tr;
+      let modified = false;
+      for (let i = lists.length - 1; i >= 0; i--) {
+        const { pos, node } = lists[i];
+        const nonEmptyColumns = [];
+        node.forEach((col) => {
+          if (col.type.name === "column" && col.childCount > 0) {
+            nonEmptyColumns.push(col);
+          }
+        });
+        if (nonEmptyColumns.length >= 2) {
+          continue;
+        }
+        const from = tr.mapping.map(pos);
+        const to = tr.mapping.map(pos + node.nodeSize);
+        const blocks = [];
+        nonEmptyColumns.forEach((col) => {
+          col.forEach((bc) => blocks.push(bc));
+        });
+        if (blocks.length > 0) {
+          tr.replaceWith(from, to, blocks);
+        } else {
+          tr.delete(from, to);
+        }
+        modified = true;
+      }
+      return modified ? tr : null;
+    }
+  });
+}
+
+// src/blocks/columns/columnDnd.ts
+import { Plugin as Plugin2, PluginKey as PluginKey2 } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+
+// src/blocks/columns/mergeColumns.ts
+function mergeBlocksIntoColumns(editor, draggedId, targetId, side) {
+  if (!editor || !draggedId || !targetId || draggedId === targetId) {
+    return false;
+  }
+  const dragged = editor.getBlock?.(draggedId);
+  const target = editor.getBlock?.(targetId);
+  if (!dragged || !target) {
+    return false;
+  }
+  if (dragged.type === "columnList" || dragged.type === "column" || target.type === "columnList" || target.type === "column") {
+    return false;
+  }
+  const columnList = {
+    type: "columnList",
+    children: side === "left" ? [
+      { type: "column", children: [dragged] },
+      { type: "column", children: [target] }
+    ] : [
+      { type: "column", children: [target] },
+      { type: "column", children: [dragged] }
+    ]
+  };
+  try {
+    const run = () => {
+      editor.removeBlocks([draggedId]);
+      editor.replaceBlocks([targetId], [columnList]);
+    };
+    if (typeof editor.transact === "function") {
+      editor.transact(run);
+    } else {
+      run();
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// src/blocks/columns/columnDnd.ts
+var columnDndKey = new PluginKey2("lumirColumnDnd");
+function edgeThreshold(width) {
+  return Math.min(80, width * 0.3);
+}
+function topLevelBlockAtCoords(view, x, y) {
+  const found = view.posAtCoords({ left: x, top: y });
+  if (!found) {
+    return null;
+  }
+  const $pos = view.state.doc.resolve(found.pos);
+  for (let d = $pos.depth; d > 0; d--) {
+    if ($pos.node(d).type.name === "blockContainer") {
+      if (d !== 2 || $pos.node(d - 1).type.name !== "blockGroup") {
+        return null;
+      }
+      const pos = $pos.before(d);
+      const node = $pos.node(d);
+      const dom = view.nodeDOM(pos);
+      if (!dom || !node.attrs?.id) {
+        return null;
+      }
+      return { pos, nodeSize: node.nodeSize, id: node.attrs.id, dom };
+    }
+  }
+  return null;
+}
+function draggedBlockId(view) {
+  const sel = view.state.selection;
+  return sel?.node?.attrs?.id ?? null;
+}
+function setDnd(view, next) {
+  const cur = columnDndKey.getState(view.state);
+  if (cur && cur.targetPos === next.targetPos && cur.side === next.side) {
+    return;
+  }
+  view.dispatch(view.state.tr.setMeta(columnDndKey, next));
+}
+var CLEARED = { targetPos: null, side: null };
+function columnDnd() {
+  return new Plugin2({
+    key: columnDndKey,
+    state: {
+      init: () => CLEARED,
+      apply(tr, prev) {
+        const meta = tr.getMeta(columnDndKey);
+        if (meta) {
+          return meta;
+        }
+        if (tr.docChanged && prev.targetPos !== null) {
+          return CLEARED;
+        }
+        return prev;
+      }
+    },
+    props: {
+      handleDOMEvents: {
+        dragover: (view, event) => {
+          if (!view.dragging) {
+            return false;
+          }
+          const target = topLevelBlockAtCoords(
+            view,
+            event.clientX,
+            event.clientY
+          );
+          const draggedId = draggedBlockId(view);
+          if (!target || !draggedId || target.id === draggedId) {
+            setDnd(view, CLEARED);
+            view.dom.classList.remove("lumir-col-dnd-active");
+            return false;
+          }
+          const rect = target.dom.getBoundingClientRect();
+          const th = edgeThreshold(rect.width);
+          let side = null;
+          if (event.clientX - rect.left <= th) {
+            side = "left";
+          } else if (rect.right - event.clientX <= th) {
+            side = "right";
+          }
+          if (side) {
+            setDnd(view, { targetPos: target.pos, side });
+            view.dom.classList.add("lumir-col-dnd-active");
+          } else {
+            setDnd(view, CLEARED);
+            view.dom.classList.remove("lumir-col-dnd-active");
+          }
+          return false;
+        },
+        dragend: (view) => {
+          setDnd(view, CLEARED);
+          view.dom.classList.remove("lumir-col-dnd-active");
+          return false;
+        },
+        dragleave: (view, event) => {
+          if (!event.relatedTarget) {
+            setDnd(view, CLEARED);
+            view.dom.classList.remove("lumir-col-dnd-active");
+          }
+          return false;
+        }
+      },
+      handleDrop: (view, _event, _slice, _moved) => {
+        const st = columnDndKey.getState(view.state);
+        view.dom.classList.remove("lumir-col-dnd-active");
+        if (!st || st.side === null || st.targetPos === null) {
+          return false;
+        }
+        const draggedId = draggedBlockId(view);
+        const targetNode = view.state.doc.nodeAt(st.targetPos);
+        const targetId = targetNode?.attrs?.id;
+        view.dispatch(view.state.tr.setMeta(columnDndKey, CLEARED));
+        if (!draggedId || !targetId) {
+          return false;
+        }
+        const editor = view.__lumirEditor;
+        if (!editor) {
+          return false;
+        }
+        const ok = mergeBlocksIntoColumns(editor, draggedId, targetId, st.side);
+        return ok;
+      },
+      decorations: (state) => {
+        const st = columnDndKey.getState(state);
+        if (!st || st.side === null || st.targetPos === null) {
+          return null;
+        }
+        const node = state.doc.nodeAt(st.targetPos);
+        if (!node) {
+          return null;
+        }
+        return DecorationSet.create(state.doc, [
+          Decoration.node(st.targetPos, st.targetPos + node.nodeSize, {
+            class: st.side === "left" ? "lumir-col-drop-left" : "lumir-col-drop-right"
+          })
+        ]);
+      }
+    }
+  });
+}
+
+// src/blocks/columns/ColumnList.ts
+var ColumnList = createStronglyTypedTiptapNode({
+  name: "columnList",
+  group: "childContainer bnBlock blockGroupChild",
+  content: "column column+",
+  parseHTML() {
+    return [{ tag: 'div[data-node-type="columnList"]' }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    const dom = document.createElement("div");
+    dom.className = "bn-column-list";
+    dom.setAttribute("data-node-type", "columnList");
+    for (const [attribute, value] of Object.entries(HTMLAttributes)) {
+      if (attribute !== "class") {
+        dom.setAttribute(attribute, value);
+      }
+    }
+    return { dom, contentDOM: dom };
+  },
+  // columnNormalization: 빈 컬럼/1단 columnList 자동 복구(unwrap).
+  // columnDnd: 블록을 다른 블록 좌/우로 드롭하면 2단 컬럼 생성.
+  addProseMirrorPlugins() {
+    return [columnNormalization(), columnDnd()];
+  }
+});
+
+// src/blocks/columns/Column.ts
+import { createStronglyTypedTiptapNode as createStronglyTypedTiptapNode2 } from "@blocknote/core";
+var Column = createStronglyTypedTiptapNode2({
+  name: "column",
+  group: "bnBlock childContainer",
+  content: "blockContainer+",
+  addAttributes() {
+    return {
+      width: {
+        default: 1,
+        parseHTML: (element) => {
+          const w = parseFloat(element.getAttribute("data-column-width") || "");
+          return Number.isFinite(w) && w > 0 ? w : 1;
+        },
+        renderHTML: (attributes) => {
+          if (!attributes.width || attributes.width === 1) {
+            return {};
+          }
+          return { "data-column-width": String(attributes.width) };
+        }
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: 'div[data-node-type="column"]' }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    const dom = document.createElement("div");
+    dom.className = "bn-column";
+    dom.setAttribute("data-node-type", "column");
+    for (const [attribute, value] of Object.entries(HTMLAttributes)) {
+      if (attribute !== "class") {
+        dom.setAttribute(attribute, value);
+      }
+    }
+    return { dom, contentDOM: dom };
+  }
+});
+
 // src/styles/FontSizeStyle.tsx
 import { createReactStyleSpec } from "@blocknote/react";
 import { jsx as jsx3 } from "react/jsx-runtime";
@@ -1326,7 +1631,7 @@ var HtmlPreviewBlock = createReactBlockSpec3(
           setIsResizing(true);
           const startY = e.clientY;
           const startHeight = currentHeight;
-          const handleMouseMove = (moveEvent) => {
+          const handleMouseMove2 = (moveEvent) => {
             const deltaY = moveEvent.clientY - startY;
             const newHeight = Math.min(
               MAX_HEIGHT,
@@ -1338,10 +1643,10 @@ var HtmlPreviewBlock = createReactBlockSpec3(
           };
           const handleMouseUp = () => {
             setIsResizing(false);
-            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mousemove", handleMouseMove2);
             document.removeEventListener("mouseup", handleMouseUp);
           };
-          document.addEventListener("mousemove", handleMouseMove);
+          document.addEventListener("mousemove", handleMouseMove2);
           document.addEventListener("mouseup", handleMouseUp);
         },
         [currentHeight, props.editor, props.block]
@@ -1607,12 +1912,19 @@ var HtmlPreviewBlock = createReactBlockSpec3(
     }
   }
 );
+var ColumnListBlock = createBlockSpecFromStronglyTypedTiptapNode(
+  ColumnList,
+  {}
+);
+var ColumnBlock = createBlockSpecFromStronglyTypedTiptapNode(Column, {});
 var schema = BlockNoteSchema.create({
   blockSpecs: {
     ...defaultBlockSpecs,
     htmlPreview: HtmlPreviewBlock,
     linkPreview: LinkPreviewBlock,
-    video: VideoBlock
+    video: VideoBlock,
+    columnList: ColumnListBlock,
+    column: ColumnBlock
   },
   inlineContentSpecs: defaultInlineContentSpecs,
   styleSpecs: {
@@ -1760,7 +2072,7 @@ var UndoRedoButtons = ({ editor }) => {
       console.error("Redo failed:", err);
     }
   }, [editor]);
-  const handleMouseDown = useCallback4((e) => {
+  const handleMouseDown2 = useCallback4((e) => {
     e.preventDefault();
   }, []);
   return /* @__PURE__ */ jsxs5("div", { className: "lumir-toolbar-group", children: [
@@ -1769,7 +2081,7 @@ var UndoRedoButtons = ({ editor }) => {
       {
         className: "lumir-toolbar-btn",
         onClick: handleUndo,
-        onMouseDown: handleMouseDown,
+        onMouseDown: handleMouseDown2,
         title: "\uC2E4\uD589 \uCDE8\uC18C",
         type: "button",
         children: Icons.undo
@@ -1780,7 +2092,7 @@ var UndoRedoButtons = ({ editor }) => {
       {
         className: "lumir-toolbar-btn",
         onClick: handleRedo,
-        onMouseDown: handleMouseDown,
+        onMouseDown: handleMouseDown2,
         title: "\uB2E4\uC2DC \uC2E4\uD589",
         type: "button",
         children: Icons.redo
@@ -1824,7 +2136,7 @@ var TextStyleButton = ({
       console.error(`Toggle ${style} failed:`, err);
     }
   }, [editor, style]);
-  const handleMouseDown = useCallback5((e) => {
+  const handleMouseDown2 = useCallback5((e) => {
     e.preventDefault();
   }, []);
   return /* @__PURE__ */ jsx8(
@@ -1832,7 +2144,7 @@ var TextStyleButton = ({
     {
       className: cn("lumir-toolbar-btn", isActive && "is-active"),
       onClick: handleClick,
-      onMouseDown: handleMouseDown,
+      onMouseDown: handleMouseDown2,
       title: titleMap[style],
       type: "button",
       children: iconMap[style]
@@ -1900,6 +2212,41 @@ function getFirstSelectedCellAttr(editor, attr) {
   const node = tiptap.state.doc.nodeAt(positions[0]);
   return node?.attrs?.[attr];
 }
+function findTableNodePos(tiptap, blockId) {
+  let tablePos = -1;
+  tiptap.state.doc.descendants((node, pos) => {
+    if (tablePos !== -1) return false;
+    if (node.type.name === "blockContainer" && node.attrs?.id === blockId && node.firstChild?.type.name === "table") {
+      tablePos = pos + 1;
+      return false;
+    }
+    return void 0;
+  });
+  return tablePos;
+}
+function setTableAlignment(editor, blockId, alignment) {
+  const tiptap = editor?._tiptapEditor;
+  if (!tiptap || !blockId) return false;
+  const tablePos = findTableNodePos(tiptap, blockId);
+  if (tablePos < 0) return false;
+  const node = tiptap.state.doc.nodeAt(tablePos);
+  if (!node || node.type.name !== "table") return false;
+  tiptap.view?.dispatch(
+    tiptap.state.tr.setNodeMarkup(tablePos, void 0, {
+      ...node.attrs,
+      tableAlignment: alignment
+    })
+  );
+  return true;
+}
+function getTableAlignment(editor, blockId) {
+  const tiptap = editor?._tiptapEditor;
+  if (!tiptap || !blockId) return "left";
+  const tablePos = findTableNodePos(tiptap, blockId);
+  if (tablePos < 0) return "left";
+  const node = tiptap.state.doc.nodeAt(tablePos);
+  return node?.attrs?.tableAlignment || "left";
+}
 
 // src/components/FloatingMenu/components/AlignButton.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
@@ -1942,7 +2289,7 @@ var AlignButton = ({
       console.error(`Set alignment ${alignment} failed:`, err);
     }
   }, [editor, alignment]);
-  const handleMouseDown = useCallback6((e) => {
+  const handleMouseDown2 = useCallback6((e) => {
     e.preventDefault();
   }, []);
   return /* @__PURE__ */ jsx9(
@@ -1950,7 +2297,7 @@ var AlignButton = ({
     {
       className: cn("lumir-toolbar-btn", isActive && "is-active"),
       onClick: handleClick,
-      onMouseDown: handleMouseDown,
+      onMouseDown: handleMouseDown2,
       title: titleMap2[alignment],
       type: "button",
       children: iconMap2[alignment]
@@ -1992,7 +2339,7 @@ var ListButton = ({ editor, type }) => {
       console.error(`List toggle failed:`, err);
     }
   }, [editor, type]);
-  const handleMouseDown = useCallback7((e) => {
+  const handleMouseDown2 = useCallback7((e) => {
     e.preventDefault();
   }, []);
   return /* @__PURE__ */ jsx10(
@@ -2000,7 +2347,7 @@ var ListButton = ({ editor, type }) => {
     {
       className: cn("lumir-toolbar-btn", isActive && "is-active"),
       onClick: handleClick,
-      onMouseDown: handleMouseDown,
+      onMouseDown: handleMouseDown2,
       title: titleMap3[type],
       type: "button",
       children: iconMap3[type]
@@ -2040,7 +2387,7 @@ var ImageButton = ({
       input.click();
     }
   }, [editor, onImageUpload]);
-  const handleMouseDown = useCallback8((e) => {
+  const handleMouseDown2 = useCallback8((e) => {
     e.preventDefault();
   }, []);
   return /* @__PURE__ */ jsx11(
@@ -2048,7 +2395,7 @@ var ImageButton = ({
     {
       className: "lumir-toolbar-btn",
       onClick: handleClick,
-      onMouseDown: handleMouseDown,
+      onMouseDown: handleMouseDown2,
       title: "\uC774\uBBF8\uC9C0 \uC0BD\uC785",
       type: "button",
       children: Icons.image
@@ -2147,7 +2494,7 @@ var ColorButton = ({ editor, type }) => {
     },
     [editor, type]
   );
-  const handleMouseDown = useCallback9((e) => {
+  const handleMouseDown2 = useCallback9((e) => {
     e.preventDefault();
   }, []);
   return /* @__PURE__ */ jsxs6("div", { className: "lumir-dropdown-wrapper", ref: dropdownRef, children: [
@@ -2156,7 +2503,7 @@ var ColorButton = ({ editor, type }) => {
       {
         className: "lumir-toolbar-btn lumir-color-btn",
         onClick: () => setIsOpen(!isOpen),
-        onMouseDown: handleMouseDown,
+        onMouseDown: handleMouseDown2,
         title: type === "text" ? "\uD14D\uC2A4\uD2B8 \uC0C9\uC0C1" : "\uBC30\uACBD \uC0C9\uC0C1",
         type: "button",
         children: [
@@ -2181,7 +2528,7 @@ var ColorButton = ({ editor, type }) => {
           currentColor === color.value && "is-active"
         ),
         onClick: () => handleColorSelect(color.value),
-        onMouseDown: handleMouseDown,
+        onMouseDown: handleMouseDown2,
         title: color.name,
         style: { backgroundColor: color.hex },
         type: "button"
@@ -2233,7 +2580,7 @@ var FontSizeButton = ({ editor }) => {
     },
     [editor]
   );
-  const handleMouseDown = useCallback10((e) => {
+  const handleMouseDown2 = useCallback10((e) => {
     e.preventDefault();
   }, []);
   return /* @__PURE__ */ jsxs7("div", { className: "lumir-dropdown-wrapper", ref: dropdownRef, children: [
@@ -2242,7 +2589,7 @@ var FontSizeButton = ({ editor }) => {
       {
         className: "lumir-dropdown-btn lumir-font-size-btn",
         onClick: () => setIsOpen(!isOpen),
-        onMouseDown: handleMouseDown,
+        onMouseDown: handleMouseDown2,
         title: "\uAE00\uC790 \uD06C\uAE30",
         type: "button",
         children: [
@@ -2260,7 +2607,7 @@ var FontSizeButton = ({ editor }) => {
             currentSize === "" && "is-active"
           ),
           onClick: () => handleSizeSelect(""),
-          onMouseDown: handleMouseDown,
+          onMouseDown: handleMouseDown2,
           type: "button",
           children: DEFAULT_LABEL
         }
@@ -2273,7 +2620,7 @@ var FontSizeButton = ({ editor }) => {
             currentSize === size && "is-active"
           ),
           onClick: () => handleSizeSelect(size),
-          onMouseDown: handleMouseDown,
+          onMouseDown: handleMouseDown2,
           type: "button",
           children: toLabel(size)
         },
@@ -2371,7 +2718,7 @@ var LinkButton = ({ editor }) => {
     setLinkUrl("");
     setErrorMsg(null);
   }, []);
-  const handleMouseDown = useCallback11((e) => {
+  const handleMouseDown2 = useCallback11((e) => {
     e.preventDefault();
   }, []);
   const handleKeyDown = useCallback11(
@@ -2390,7 +2737,7 @@ var LinkButton = ({ editor }) => {
       {
         className: "lumir-toolbar-btn",
         onClick: () => setIsOpen(!isOpen),
-        onMouseDown: handleMouseDown,
+        onMouseDown: handleMouseDown2,
         title: "\uB9C1\uD06C \uC0BD\uC785",
         type: "button",
         children: Icons.link
@@ -2410,7 +2757,7 @@ var LinkButton = ({ editor }) => {
             setErrorMsg(null);
           },
           onKeyDown: handleKeyDown,
-          onMouseDown: handleMouseDown
+          onMouseDown: handleMouseDown2
         }
       ),
       errorMsg && /* @__PURE__ */ jsx14(
@@ -2432,7 +2779,7 @@ var LinkButton = ({ editor }) => {
             type: "button",
             className: "lumir-link-btn lumir-link-cancel",
             onClick: handleCancel,
-            onMouseDown: handleMouseDown,
+            onMouseDown: handleMouseDown2,
             children: "\uCDE8\uC18C"
           }
         ),
@@ -2441,7 +2788,7 @@ var LinkButton = ({ editor }) => {
           {
             type: "submit",
             className: "lumir-link-btn lumir-link-submit",
-            onMouseDown: handleMouseDown,
+            onMouseDown: handleMouseDown2,
             disabled: !linkUrl.trim(),
             children: "\uD655\uC778"
           }
@@ -2477,7 +2824,7 @@ var TableButton = ({ editor }) => {
       console.error("Table insert failed:", err);
     }
   }, [editor]);
-  const handleMouseDown = useCallback12((e) => {
+  const handleMouseDown2 = useCallback12((e) => {
     e.preventDefault();
   }, []);
   return /* @__PURE__ */ jsx15(
@@ -2485,7 +2832,7 @@ var TableButton = ({ editor }) => {
     {
       className: "lumir-toolbar-btn",
       onClick: handleClick,
-      onMouseDown: handleMouseDown,
+      onMouseDown: handleMouseDown2,
       title: "\uD14C\uC774\uBE14 \uC0BD\uC785",
       type: "button",
       children: Icons.table
@@ -2539,7 +2886,7 @@ var HTMLImportButton = ({
   const handleClick = useCallback13(() => {
     fileInputRef.current?.click();
   }, []);
-  const handleMouseDown = useCallback13((e) => {
+  const handleMouseDown2 = useCallback13((e) => {
     e.preventDefault();
   }, []);
   return /* @__PURE__ */ jsxs9(Fragment3, { children: [
@@ -2558,7 +2905,7 @@ var HTMLImportButton = ({
       {
         className: "lumir-toolbar-btn",
         onClick: handleClick,
-        onMouseDown: handleMouseDown,
+        onMouseDown: handleMouseDown2,
         title: "HTML Import",
         type: "button",
         children: Icons.htmlFile
@@ -2641,7 +2988,7 @@ var BlockTypeSelect = ({ editor }) => {
       console.error("Block type change failed:", err);
     }
   };
-  const handleMouseDown = useCallback14((e) => {
+  const handleMouseDown2 = useCallback14((e) => {
     e.preventDefault();
   }, []);
   const getCurrentLabel = () => {
@@ -2678,7 +3025,7 @@ var BlockTypeSelect = ({ editor }) => {
       {
         className: "lumir-dropdown-btn lumir-block-type-btn",
         onClick: () => setIsOpen(!isOpen),
-        onMouseDown: handleMouseDown,
+        onMouseDown: handleMouseDown2,
         type: "button",
         children: [
           /* @__PURE__ */ jsx17("span", { className: "lumir-block-icon", children: BlockTypeIcons[getCurrentIcon()] }),
@@ -2697,7 +3044,7 @@ var BlockTypeSelect = ({ editor }) => {
             isActiveItem(bt) && "is-active"
           ),
           onClick: () => handleTypeChange(bt.type, bt.level, bt.isToggle),
-          onMouseDown: handleMouseDown,
+          onMouseDown: handleMouseDown2,
           children: [
             /* @__PURE__ */ jsx17("span", { className: "lumir-block-icon", children: BlockTypeIcons[bt.icon] }),
             /* @__PURE__ */ jsx17("span", { className: "lumir-block-item-title", children: bt.label })
@@ -3038,119 +3385,693 @@ var VerticalAlignmentExtension = Extension.create({
   }
 });
 
-// src/components/CustomFormattingToolbar.tsx
-import {
-  BasicTextStyleButton,
-  BlockTypeSelect as BlockTypeSelect2,
-  CreateLinkButton,
-  FileCaptionButton,
-  FileDeleteButton,
-  FileRenameButton,
-  FileReplaceButton,
-  FileDownloadButton,
-  FilePreviewButton,
-  FormattingToolbar,
-  NestBlockButton,
-  UnnestBlockButton,
-  TableCellMergeButton
-} from "@blocknote/react";
+// src/extensions/RowHeightExtension.ts
+import { Extension as Extension2 } from "@tiptap/core";
 
-// src/components/TextAlignButtonWithVA.tsx
-import {
-  checkBlockHasDefaultProp,
-  checkBlockTypeHasDefaultProp,
-  mapTableCell
-} from "@blocknote/core";
-import { useCallback as useCallback15, useMemo } from "react";
-import {
-  useComponentsContext,
-  useBlockNoteEditor,
-  useSelectedBlocks
-} from "@blocknote/react";
-import { jsx as jsx19 } from "react/jsx-runtime";
-var icons = {
-  left: /* @__PURE__ */ jsx19("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx19("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" }) }),
-  center: /* @__PURE__ */ jsx19("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx19("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }) }),
-  right: /* @__PURE__ */ jsx19("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx19("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }) }),
-  justify: /* @__PURE__ */ jsx19("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx19("path", { d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zM3 3v2h18V3H3z" }) })
-};
-var tooltipMap = {
-  left: "\uC67C\uCABD \uC815\uB82C",
-  center: "\uAC00\uC6B4\uB370 \uC815\uB82C",
-  right: "\uC624\uB978\uCABD \uC815\uB82C",
-  justify: "\uC591\uCABD \uC815\uB82C"
-};
-var TextAlignButtonWithVA = (props) => {
-  const Components = useComponentsContext();
-  const editor = useBlockNoteEditor();
-  const selectedBlocks = useSelectedBlocks(editor);
-  const textAlignment = useMemo(() => {
-    const block = selectedBlocks[0];
-    if (checkBlockHasDefaultProp("textAlignment", block, editor)) {
-      return block.props.textAlignment;
+// src/extensions/rowResizing.ts
+import { Plugin as Plugin3, PluginKey as PluginKey3 } from "prosemirror-state";
+import { Decoration as Decoration2, DecorationSet as DecorationSet2 } from "prosemirror-view";
+import { TableMap, cellAround, pointsAtCell } from "prosemirror-tables";
+
+// src/constants/limits.ts
+var MAX_FILE_SIZE = 10 * 1024 * 1024;
+var MAX_VIDEO_FILE_SIZE = 100 * 1024 * 1024;
+var BLOCKED_EXTENSIONS = [".svg", ".svgz"];
+var ALLOWED_VIDEO_MIME_TYPES = /* @__PURE__ */ new Set([
+  "video/mp4",
+  "video/webm",
+  "video/ogg",
+  "video/quicktime"
+  // .mov
+]);
+var ALLOWED_VIDEO_EXTENSIONS = [
+  ".mp4",
+  ".webm",
+  ".ogg",
+  ".mov"
+];
+var ROW_RESIZE_MIN_HEIGHT = 24;
+var ROW_RESIZE_HANDLE_WIDTH = 5;
+
+// src/extensions/rowResizing.ts
+var rowResizingPluginKey = new PluginKey3(
+  "lumirRowResizing"
+);
+var RowResizeState = class _RowResizeState {
+  constructor(activeHandle, dragging) {
+    this.activeHandle = activeHandle;
+    this.dragging = dragging;
+  }
+  apply(tr) {
+    const action = tr.getMeta(rowResizingPluginKey);
+    if (action && action.setHandle != null) {
+      return new _RowResizeState(action.setHandle, null);
     }
-    if (block.type === "table") {
-      const cellSelection = editor.tableHandles?.getCellSelection();
-      if (!cellSelection) {
-        return;
+    if (action && action.setDragging !== void 0) {
+      return new _RowResizeState(this.activeHandle, action.setDragging);
+    }
+    if (this.activeHandle > -1 && tr.docChanged) {
+      let handle = tr.mapping.map(this.activeHandle, -1);
+      if (!pointsAtCell(tr.doc.resolve(handle))) {
+        handle = -1;
       }
-      const allCellsInTable = cellSelection.cells.map(
-        ({ row, col }) => mapTableCell(
-          block.content.rows[row].cells[col]
-        ).props.textAlignment
-      );
-      const firstAlignment = allCellsInTable[0];
-      if (allCellsInTable.every((alignment) => alignment === firstAlignment)) {
-        return firstAlignment;
+      return new _RowResizeState(handle, this.dragging);
+    }
+    return this;
+  }
+};
+function rowResizing({
+  handleWidth = ROW_RESIZE_HANDLE_WIDTH,
+  minHeight = ROW_RESIZE_MIN_HEIGHT
+} = {}) {
+  return new Plugin3({
+    key: rowResizingPluginKey,
+    state: {
+      init() {
+        return new RowResizeState(-1, null);
+      },
+      apply(tr, prev) {
+        return prev.apply(tr);
+      }
+    },
+    props: {
+      attributes: (state) => {
+        const pluginState = rowResizingPluginKey.getState(state);
+        return pluginState && pluginState.activeHandle > -1 ? { class: "row-resize-cursor" } : {};
+      },
+      handleDOMEvents: {
+        mousemove: (view, event) => {
+          handleMouseMove(view, event, handleWidth);
+        },
+        mouseleave: (view) => {
+          handleMouseLeave(view);
+        },
+        mousedown: (view, event) => {
+          handleMouseDown(view, event, minHeight);
+        }
+      },
+      decorations: (state) => {
+        const pluginState = rowResizingPluginKey.getState(state);
+        if (pluginState && pluginState.activeHandle > -1) {
+          return handleDecorations(state, pluginState);
+        }
+        return void 0;
       }
     }
+  });
+}
+function handleMouseMove(view, event, handleWidth) {
+  if (!view.editable) {
     return;
-  }, [editor, selectedBlocks]);
-  const setTextAlignment = useCallback15(
-    (newAlignment) => {
-      editor.focus();
-      for (const block of selectedBlocks) {
-        if (block.type === "table") {
-          const tiptap = editor._tiptapEditor;
-          if (!tiptap) continue;
-          const positions = getSelectedCellPositions(editor);
-          if (positions.length === 0) continue;
-          const { state } = tiptap;
-          let tr = state.tr;
-          for (const pos of positions) {
-            const node = tr.doc.nodeAt(pos);
-            if (node) {
-              tr = tr.setNodeMarkup(pos, void 0, {
-                ...node.attrs,
-                textAlignment: newAlignment
-              });
-            }
-          }
-          tiptap.view?.dispatch(tr);
-        } else if (checkBlockTypeHasDefaultProp("textAlignment", block.type, editor)) {
-          editor.updateBlock(block, {
-            props: { textAlignment: newAlignment }
-          });
-        }
+  }
+  const pluginState = rowResizingPluginKey.getState(view.state);
+  if (!pluginState) {
+    return;
+  }
+  if (!pluginState.dragging) {
+    const target = domCellAround(event.target);
+    let cell = -1;
+    if (target) {
+      const { top, bottom } = target.getBoundingClientRect();
+      if (event.clientY - top <= handleWidth) {
+        cell = edgeCell(view, event, "top", handleWidth);
+      } else if (bottom - event.clientY <= handleWidth) {
+        cell = edgeCell(view, event, "bottom", handleWidth);
       }
-    },
-    [editor, selectedBlocks]
-  );
-  const show = useMemo(() => {
-    return !!selectedBlocks.find(
-      (block) => "textAlignment" in block.props || block.type === "table" && block.children
-    );
-  }, [selectedBlocks]);
-  if (!show || !editor.isEditable) {
-    return null;
+    }
+    if (cell !== pluginState.activeHandle) {
+      updateHandle(view, cell);
+    }
   }
-  return /* @__PURE__ */ jsx19(
-    Components.FormattingToolbar.Button,
-    {
-      className: "bn-button",
-      "data-test": `alignText${props.textAlignment.slice(0, 1).toUpperCase() + props.textAlignment.slice(1)}`,
-      onClick: () => setTextAlignment(props.textAlignment),
-      isSelected: textAlignment === props.textAlignment,
+}
+function handleMouseLeave(view) {
+  if (!view.editable) {
+    return;
+  }
+  const pluginState = rowResizingPluginKey.getState(view.state);
+  if (pluginState && pluginState.activeHandle > -1 && !pluginState.dragging) {
+    updateHandle(view, -1);
+  }
+}
+function handleMouseDown(view, event, minHeight) {
+  if (!view.editable) {
+    return false;
+  }
+  const win = view.dom.ownerDocument.defaultView ?? window;
+  const pluginState = rowResizingPluginKey.getState(view.state);
+  if (!pluginState || pluginState.activeHandle === -1 || pluginState.dragging) {
+    return false;
+  }
+  const startHeight = currentRowHeight(view, pluginState.activeHandle);
+  setDragging(view, {
+    startY: event.clientY,
+    startHeight,
+    currentHeight: startHeight
+  });
+  function finish(finishEvent) {
+    win.removeEventListener("mouseup", finish);
+    win.removeEventListener("mousemove", move);
+    const ps = rowResizingPluginKey.getState(view.state);
+    if (ps?.dragging) {
+      const finalHeight = draggedHeight(ps.dragging, finishEvent, minHeight);
+      setDragging(view, null);
+      commitRowHeight(view, ps.activeHandle, finalHeight);
+    }
+  }
+  function move(moveEvent) {
+    if (moveEvent.buttons === 0 || moveEvent.buttons === void 0 && !moveEvent.which) {
+      return finish(moveEvent);
+    }
+    const ps = rowResizingPluginKey.getState(view.state);
+    if (!ps?.dragging) {
+      return;
+    }
+    const h = draggedHeight(ps.dragging, moveEvent, minHeight);
+    if (h !== ps.dragging.currentHeight) {
+      setDragging(view, { ...ps.dragging, currentHeight: h });
+    }
+  }
+  win.addEventListener("mouseup", finish);
+  win.addEventListener("mousemove", move);
+  event.preventDefault();
+  return true;
+}
+function setDragging(view, dragging) {
+  view.dispatch(
+    view.state.tr.setMeta(rowResizingPluginKey, { setDragging: dragging })
+  );
+}
+function currentRowHeight(view, cellPos) {
+  const info = targetRowInfo(view, cellPos);
+  const tr = rowTrElement(view, cellPos, info.row);
+  return tr ? tr.offsetHeight : ROW_RESIZE_MIN_HEIGHT;
+}
+function commitRowHeight(view, cellPos, height) {
+  const { table, map, start, row } = targetRowInfo(view, cellPos);
+  const tr = view.state.tr;
+  const seen = /* @__PURE__ */ new Set();
+  for (let col = 0; col < map.width; col++) {
+    const cellRelPos = map.map[row * map.width + col];
+    if (seen.has(cellRelPos)) {
+      continue;
+    }
+    seen.add(cellRelPos);
+    const rect = map.findCell(cellRelPos);
+    if (rect.bottom - 1 !== row) {
+      continue;
+    }
+    const node = table.nodeAt(cellRelPos);
+    if (!node || node.attrs.rowHeight === height) {
+      continue;
+    }
+    tr.setNodeMarkup(start + cellRelPos, void 0, {
+      ...node.attrs,
+      rowHeight: height
+    });
+  }
+  if (tr.docChanged) {
+    view.dispatch(tr);
+  }
+}
+function targetRowInfo(view, cellPos) {
+  const $cell = view.state.doc.resolve(cellPos);
+  const table = $cell.node(-1);
+  const map = TableMap.get(table);
+  const start = $cell.start(-1);
+  const rect = map.findCell($cell.pos - start);
+  return { table, map, start, row: rect.bottom - 1, $cell };
+}
+function rowTrElement(view, cellPos, row) {
+  let dom = view.nodeDOM(cellPos);
+  while (dom && dom.nodeName !== "TABLE") {
+    dom = dom.parentNode;
+  }
+  if (!dom) {
+    return null;
+  }
+  return dom.rows[row] ?? null;
+}
+function domCellAround(target) {
+  let node = target;
+  while (node && node.nodeName !== "TD" && node.nodeName !== "TH") {
+    node = node.classList?.contains("ProseMirror") ? null : node.parentNode;
+  }
+  return node;
+}
+function edgeCell(view, event, side, handleWidth) {
+  const offset2 = side === "bottom" ? -handleWidth : handleWidth;
+  const found = view.posAtCoords({
+    left: event.clientX,
+    top: event.clientY + offset2
+  });
+  if (!found) {
+    return -1;
+  }
+  const $cell = cellAround(view.state.doc.resolve(found.pos));
+  if (!$cell) {
+    return -1;
+  }
+  if (side === "bottom") {
+    return $cell.pos;
+  }
+  const map = TableMap.get($cell.node(-1));
+  const start = $cell.start(-1);
+  const index = map.map.indexOf($cell.pos - start);
+  return index < map.width ? -1 : start + map.map[index - map.width];
+}
+function updateHandle(view, value) {
+  view.dispatch(
+    view.state.tr.setMeta(rowResizingPluginKey, { setHandle: value })
+  );
+}
+function draggedHeight(dragging, event, minHeight) {
+  const offset2 = event.clientY - dragging.startY;
+  return Math.max(minHeight, dragging.startHeight + offset2);
+}
+function handleDecorations(state, pluginState) {
+  const decorations = [];
+  const $cell = state.doc.resolve(pluginState.activeHandle);
+  const table = $cell.node(-1);
+  if (!table) {
+    return DecorationSet2.empty;
+  }
+  const map = TableMap.get(table);
+  const start = $cell.start(-1);
+  const row = map.findCell($cell.pos - start).bottom - 1;
+  const dragging = pluginState.dragging;
+  const seen = /* @__PURE__ */ new Set();
+  for (let col = 0; col < map.width; col++) {
+    const cellRelPos = map.map[row * map.width + col];
+    if (seen.has(cellRelPos)) {
+      continue;
+    }
+    seen.add(cellRelPos);
+    if (map.findCell(cellRelPos).bottom - 1 !== row) {
+      continue;
+    }
+    const node = table.nodeAt(cellRelPos);
+    if (!node) {
+      continue;
+    }
+    const from = start + cellRelPos;
+    const to = from + node.nodeSize;
+    if (dragging) {
+      decorations.push(
+        Decoration2.node(from, to, {
+          class: "row-resize-dragging",
+          style: `height: ${dragging.currentHeight}px`
+        })
+      );
+    }
+    const handle = document.createElement("div");
+    handle.className = "row-resize-handle";
+    decorations.push(Decoration2.widget(to - 1, handle));
+  }
+  return DecorationSet2.create(state.doc, decorations);
+}
+
+// src/extensions/tableCellAttrPreserve.ts
+import { Plugin as Plugin4, PluginKey as PluginKey4 } from "prosemirror-state";
+var tableCellAttrPreserveKey = new PluginKey4(
+  "lumirTableCellAttrPreserve"
+);
+var PRESERVED_ATTRS = [
+  { name: "rowHeight", default: null },
+  { name: "verticalAlignment", default: "top" }
+];
+function isMeaningful(attrName, value, def) {
+  if (value === null || value === void 0) {
+    return false;
+  }
+  return value !== def;
+}
+function meaningfulAttrs(node) {
+  let out = null;
+  for (const { name, default: def } of PRESERVED_ATTRS) {
+    const v = node.attrs?.[name];
+    if (isMeaningful(name, v, def)) {
+      (out ?? (out = {}))[name] = v;
+    }
+  }
+  return out;
+}
+function collectCellAttrs(doc) {
+  const result = /* @__PURE__ */ new Map();
+  doc.descendants((node) => {
+    if (node.type.name !== "blockContainer") {
+      return void 0;
+    }
+    const id = node.attrs?.id;
+    const table = node.firstChild;
+    if (!id || table?.type.name !== "table") {
+      return void 0;
+    }
+    const cells = /* @__PURE__ */ new Map();
+    let rowIndex = 0;
+    table.forEach((rowNode) => {
+      if (rowNode.type.name === "tableRow") {
+        let cellIndex = 0;
+        rowNode.forEach((cellNode) => {
+          const attrs = meaningfulAttrs(cellNode);
+          if (attrs) {
+            cells.set(`${rowIndex}:${cellIndex}`, attrs);
+          }
+          cellIndex++;
+        });
+        rowIndex++;
+      }
+    });
+    if (cells.size > 0) {
+      result.set(id, cells);
+    }
+    return false;
+  });
+  return result;
+}
+function tableCellAttrPreserve() {
+  return new Plugin4({
+    key: tableCellAttrPreserveKey,
+    appendTransaction(transactions, oldState, newState) {
+      if (!transactions.some((tr2) => tr2.docChanged)) {
+        return null;
+      }
+      const oldMap = collectCellAttrs(oldState.doc);
+      if (oldMap.size === 0) {
+        return null;
+      }
+      const tr = newState.tr;
+      let changed = false;
+      let curTableCells = null;
+      let curRowIndex = -1;
+      let curCellIndex = 0;
+      newState.doc.descendants((node, pos) => {
+        const name = node.type.name;
+        if (name === "blockContainer") {
+          const id = node.attrs?.id;
+          const table = node.firstChild;
+          if (id && table?.type.name === "table" && oldMap.has(id)) {
+            curTableCells = oldMap.get(id);
+            curRowIndex = -1;
+          } else {
+            curTableCells = null;
+          }
+          return void 0;
+        }
+        if (!curTableCells) {
+          return void 0;
+        }
+        if (name === "tableRow") {
+          curRowIndex++;
+          curCellIndex = 0;
+          return void 0;
+        }
+        if (name === "tableCell" || name === "tableHeader") {
+          const wanted = curTableCells.get(`${curRowIndex}:${curCellIndex}`);
+          curCellIndex++;
+          if (wanted) {
+            const patch = {};
+            let needs = false;
+            for (const { name: attrName, default: def } of PRESERVED_ATTRS) {
+              if (!(attrName in wanted)) {
+                continue;
+              }
+              const cur = node.attrs?.[attrName];
+              if (cur === null || cur === void 0 || cur === def) {
+                patch[attrName] = wanted[attrName];
+                needs = true;
+              }
+            }
+            if (needs) {
+              tr.setNodeMarkup(pos, void 0, { ...node.attrs, ...patch });
+              changed = true;
+            }
+          }
+          return false;
+        }
+        return void 0;
+      });
+      return changed ? tr : null;
+    }
+  });
+}
+
+// src/extensions/RowHeightExtension.ts
+var RowHeightExtension = Extension2.create({
+  name: "rowHeight",
+  addOptions() {
+    return { resizable: true };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["tableCell", "tableHeader"],
+        attributes: {
+          rowHeight: {
+            default: null,
+            parseHTML: (element) => {
+              const fromStyle = parseInt(element.style?.height ?? "", 10);
+              if (Number.isFinite(fromStyle) && fromStyle > 0) {
+                return fromStyle;
+              }
+              const fromAttr = parseInt(
+                element.getAttribute("data-row-height") ?? "",
+                10
+              );
+              return Number.isFinite(fromAttr) && fromAttr > 0 ? fromAttr : null;
+            },
+            renderHTML: (attributes) => {
+              const h = attributes.rowHeight;
+              if (!h || typeof h !== "number") {
+                return {};
+              }
+              return { style: `height: ${h}px` };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addProseMirrorPlugins() {
+    const plugins = [tableCellAttrPreserve()];
+    if (this.options.resizable) {
+      plugins.push(rowResizing());
+    }
+    return plugins;
+  }
+});
+
+// src/extensions/TableAlignmentExtension.ts
+import { Extension as Extension3 } from "@tiptap/core";
+import { Plugin as Plugin5, PluginKey as PluginKey5 } from "prosemirror-state";
+import { Decoration as Decoration3, DecorationSet as DecorationSet3 } from "prosemirror-view";
+var tableAlignmentDecoKey = new PluginKey5("lumirTableAlignmentDeco");
+function tableAlignmentDecorationPlugin() {
+  return new Plugin5({
+    key: tableAlignmentDecoKey,
+    props: {
+      decorations(state) {
+        const decorations = [];
+        state.doc.descendants((node, pos) => {
+          if (node.type.name === "table") {
+            const align = node.attrs.tableAlignment;
+            if (align && align !== "left") {
+              decorations.push(
+                Decoration3.node(pos, pos + node.nodeSize, {
+                  "data-table-alignment": align
+                })
+              );
+            }
+            return false;
+          }
+          return void 0;
+        });
+        return DecorationSet3.create(state.doc, decorations);
+      }
+    }
+  });
+}
+var TableAlignmentExtension = Extension3.create({
+  name: "tableAlignment",
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["table"],
+        attributes: {
+          tableAlignment: {
+            default: "left",
+            parseHTML: (element) => element.getAttribute("data-table-alignment") || "left",
+            renderHTML: (attributes) => {
+              if (!attributes.tableAlignment || attributes.tableAlignment === "left") {
+                return {};
+              }
+              return { "data-table-alignment": attributes.tableAlignment };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addProseMirrorPlugins() {
+    return [tableAlignmentDecorationPlugin()];
+  }
+});
+
+// src/blocks/columns/insertColumns.ts
+import { TextSelection } from "prosemirror-state";
+function insertTwoColumns(editor) {
+  const tiptap = editor?._tiptapEditor;
+  if (!tiptap) {
+    return false;
+  }
+  const { state, schema: schema2 } = tiptap;
+  const { blockContainer, paragraph, column, columnList } = schema2.nodes;
+  if (!blockContainer || !paragraph || !column || !columnList) {
+    return false;
+  }
+  const $from = state.selection.$from;
+  for (let d = $from.depth; d > 0; d--) {
+    const name = $from.node(d).type.name;
+    if (name === "column" || name === "columnList") {
+      return false;
+    }
+  }
+  let depth = $from.depth;
+  while (depth > 0 && $from.node(depth).type.name !== "blockContainer") {
+    depth--;
+  }
+  if (depth === 0) {
+    return false;
+  }
+  const insertPos = $from.after(depth);
+  const mkBlock = () => blockContainer.create(null, paragraph.create());
+  const mkColumn = () => column.create(null, mkBlock());
+  const list = columnList.create(null, [mkColumn(), mkColumn()]);
+  try {
+    let tr = state.tr.insert(insertPos, list);
+    try {
+      tr = tr.setSelection(TextSelection.create(tr.doc, insertPos + 4));
+    } catch {
+    }
+    tiptap.view.dispatch(tr.scrollIntoView());
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// src/components/CustomFormattingToolbar.tsx
+import {
+  BasicTextStyleButton,
+  BlockTypeSelect as BlockTypeSelect2,
+  CreateLinkButton,
+  FileCaptionButton,
+  FileDeleteButton,
+  FileRenameButton,
+  FileReplaceButton,
+  FileDownloadButton,
+  FilePreviewButton,
+  FormattingToolbar,
+  NestBlockButton,
+  UnnestBlockButton,
+  TableCellMergeButton
+} from "@blocknote/react";
+
+// src/components/TextAlignButtonWithVA.tsx
+import {
+  checkBlockHasDefaultProp,
+  checkBlockTypeHasDefaultProp,
+  mapTableCell
+} from "@blocknote/core";
+import { useCallback as useCallback15, useMemo } from "react";
+import {
+  useComponentsContext,
+  useBlockNoteEditor,
+  useSelectedBlocks
+} from "@blocknote/react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var icons = {
+  left: /* @__PURE__ */ jsx19("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx19("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" }) }),
+  center: /* @__PURE__ */ jsx19("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx19("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }) }),
+  right: /* @__PURE__ */ jsx19("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx19("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }) }),
+  justify: /* @__PURE__ */ jsx19("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx19("path", { d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zM3 3v2h18V3H3z" }) })
+};
+var tooltipMap = {
+  left: "\uC67C\uCABD \uC815\uB82C",
+  center: "\uAC00\uC6B4\uB370 \uC815\uB82C",
+  right: "\uC624\uB978\uCABD \uC815\uB82C",
+  justify: "\uC591\uCABD \uC815\uB82C"
+};
+var TextAlignButtonWithVA = (props) => {
+  const Components = useComponentsContext();
+  const editor = useBlockNoteEditor();
+  const selectedBlocks = useSelectedBlocks(editor);
+  const textAlignment = useMemo(() => {
+    const block = selectedBlocks[0];
+    if (checkBlockHasDefaultProp("textAlignment", block, editor)) {
+      return block.props.textAlignment;
+    }
+    if (block.type === "table") {
+      const cellSelection = editor.tableHandles?.getCellSelection();
+      if (!cellSelection) {
+        return;
+      }
+      const allCellsInTable = cellSelection.cells.map(
+        ({ row, col }) => mapTableCell(
+          block.content.rows[row].cells[col]
+        ).props.textAlignment
+      );
+      const firstAlignment = allCellsInTable[0];
+      if (allCellsInTable.every((alignment) => alignment === firstAlignment)) {
+        return firstAlignment;
+      }
+    }
+    return;
+  }, [editor, selectedBlocks]);
+  const setTextAlignment = useCallback15(
+    (newAlignment) => {
+      editor.focus();
+      for (const block of selectedBlocks) {
+        if (block.type === "table") {
+          const tiptap = editor._tiptapEditor;
+          if (!tiptap) continue;
+          const positions = getSelectedCellPositions(editor);
+          if (positions.length === 0) continue;
+          const { state } = tiptap;
+          let tr = state.tr;
+          for (const pos of positions) {
+            const node = tr.doc.nodeAt(pos);
+            if (node) {
+              tr = tr.setNodeMarkup(pos, void 0, {
+                ...node.attrs,
+                textAlignment: newAlignment
+              });
+            }
+          }
+          tiptap.view?.dispatch(tr);
+        } else if (checkBlockTypeHasDefaultProp("textAlignment", block.type, editor)) {
+          editor.updateBlock(block, {
+            props: { textAlignment: newAlignment }
+          });
+        }
+      }
+    },
+    [editor, selectedBlocks]
+  );
+  const show = useMemo(() => {
+    return !!selectedBlocks.find(
+      (block) => "textAlignment" in block.props || block.type === "table" && block.children
+    );
+  }, [selectedBlocks]);
+  if (!show || !editor.isEditable) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx19(
+    Components.FormattingToolbar.Button,
+    {
+      className: "bn-button",
+      "data-test": `alignText${props.textAlignment.slice(0, 1).toUpperCase() + props.textAlignment.slice(1)}`,
+      onClick: () => setTextAlignment(props.textAlignment),
+      isSelected: textAlignment === props.textAlignment,
       label: tooltipMap[props.textAlignment],
       mainTooltip: tooltipMap[props.textAlignment],
       icon: icons[props.textAlignment]
@@ -3247,19 +4168,83 @@ var VerticalAlignButton = (props) => {
   );
 };
 
-// src/components/FontSizeButton.tsx
+// src/components/TableAlignButton.tsx
+import { useCallback as useCallback17, useMemo as useMemo3 } from "react";
 import {
   useBlockNoteEditor as useBlockNoteEditor3,
   useComponentsContext as useComponentsContext3,
-  useEditorContentOrSelectionChange,
   useSelectedBlocks as useSelectedBlocks3
 } from "@blocknote/react";
-import { useCallback as useCallback17, useMemo as useMemo3, useState as useState9 } from "react";
 import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+var icons3 = {
+  left: /* @__PURE__ */ jsxs13("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
+    /* @__PURE__ */ jsx21("rect", { x: "1.5", y: "4", width: "7", height: "8", rx: "1", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx21("line", { x1: "1.5", y1: "1.5", x2: "14.5", y2: "1.5" }),
+    /* @__PURE__ */ jsx21("line", { x1: "1.5", y1: "14.5", x2: "14.5", y2: "14.5" })
+  ] }),
+  center: /* @__PURE__ */ jsxs13("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
+    /* @__PURE__ */ jsx21("rect", { x: "4.5", y: "4", width: "7", height: "8", rx: "1", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx21("line", { x1: "1.5", y1: "1.5", x2: "14.5", y2: "1.5" }),
+    /* @__PURE__ */ jsx21("line", { x1: "1.5", y1: "14.5", x2: "14.5", y2: "14.5" })
+  ] }),
+  right: /* @__PURE__ */ jsxs13("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
+    /* @__PURE__ */ jsx21("rect", { x: "7.5", y: "4", width: "7", height: "8", rx: "1", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx21("line", { x1: "1.5", y1: "1.5", x2: "14.5", y2: "1.5" }),
+    /* @__PURE__ */ jsx21("line", { x1: "1.5", y1: "14.5", x2: "14.5", y2: "14.5" })
+  ] })
+};
+var tooltips2 = {
+  left: "\uD45C \uC67C\uCABD \uC815\uB82C",
+  center: "\uD45C \uAC00\uC6B4\uB370 \uC815\uB82C",
+  right: "\uD45C \uC624\uB978\uCABD \uC815\uB82C"
+};
+var TableAlignButton = (props) => {
+  const Components = useComponentsContext3();
+  const editor = useBlockNoteEditor3();
+  const selectedBlocks = useSelectedBlocks3(editor);
+  const tableBlock = useMemo3(
+    () => selectedBlocks.find((block) => block.type === "table"),
+    [selectedBlocks]
+  );
+  const current = useMemo3(() => {
+    if (!tableBlock?.id) return "left";
+    return getTableAlignment(editor, tableBlock.id);
+  }, [editor, tableBlock, selectedBlocks]);
+  const apply = useCallback17(() => {
+    if (!tableBlock?.id) return;
+    editor.focus();
+    setTableAlignment(editor, tableBlock.id, props.alignment);
+  }, [editor, tableBlock, props.alignment]);
+  if (!tableBlock || !editor.isEditable) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx21(
+    Components.FormattingToolbar.Button,
+    {
+      className: "bn-button",
+      "data-test": `tableAlign${props.alignment.charAt(0).toUpperCase() + props.alignment.slice(1)}`,
+      onClick: apply,
+      isSelected: current === props.alignment,
+      label: tooltips2[props.alignment],
+      mainTooltip: tooltips2[props.alignment],
+      icon: icons3[props.alignment]
+    }
+  );
+};
+
+// src/components/FontSizeButton.tsx
+import {
+  useBlockNoteEditor as useBlockNoteEditor4,
+  useComponentsContext as useComponentsContext4,
+  useEditorContentOrSelectionChange,
+  useSelectedBlocks as useSelectedBlocks4
+} from "@blocknote/react";
+import { useCallback as useCallback18, useMemo as useMemo4, useState as useState9 } from "react";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 var DEFAULT_LABEL2 = "\uAE30\uBCF8";
 var toLabel2 = (size) => size.replace(/px$/, "");
 function FontSizeIcon({ size }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "span",
     {
       style: {
@@ -3274,12 +4259,12 @@ function FontSizeIcon({ size }) {
   );
 }
 function FontSizeButton2() {
-  const Components = useComponentsContext3();
-  const editor = useBlockNoteEditor3();
+  const Components = useComponentsContext4();
+  const editor = useBlockNoteEditor4();
   const ed = editor;
   const styleSchema = editor.schema.styleSchema;
   const fontSizeInSchema = styleSchema.fontSize?.type === "fontSize" && styleSchema.fontSize?.propSchema === "string";
-  const selectedBlocks = useSelectedBlocks3(editor);
+  const selectedBlocks = useSelectedBlocks4(editor);
   const [currentSize, setCurrentSize] = useState9(
     fontSizeInSchema ? ed.getActiveStyles().fontSize || "" : ""
   );
@@ -3288,7 +4273,7 @@ function FontSizeButton2() {
       setCurrentSize(ed.getActiveStyles().fontSize || "");
     }
   }, editor);
-  const setFontSize = useCallback17(
+  const setFontSize = useCallback18(
     (size) => {
       size === "" ? ed.removeStyles({ fontSize: "" }) : ed.addStyles({ fontSize: size });
       setTimeout(() => editor.focus());
@@ -3296,7 +4281,7 @@ function FontSizeButton2() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [editor]
   );
-  const show = useMemo3(() => {
+  const show = useMemo4(() => {
     if (!fontSizeInSchema) {
       return false;
     }
@@ -3311,20 +4296,20 @@ function FontSizeButton2() {
     return null;
   }
   const tooltip = "\uAE00\uC790 \uD06C\uAE30";
-  return /* @__PURE__ */ jsxs13(Components.Generic.Menu.Root, { children: [
-    /* @__PURE__ */ jsx21(Components.Generic.Menu.Trigger, { children: /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs14(Components.Generic.Menu.Root, { children: [
+    /* @__PURE__ */ jsx22(Components.Generic.Menu.Trigger, { children: /* @__PURE__ */ jsx22(
       Components.FormattingToolbar.Button,
       {
         className: "bn-button",
         "data-test": "font-size",
         label: tooltip,
         mainTooltip: tooltip,
-        icon: /* @__PURE__ */ jsx21(FontSizeIcon, { size: currentSize })
+        icon: /* @__PURE__ */ jsx22(FontSizeIcon, { size: currentSize })
       }
     ) }),
-    /* @__PURE__ */ jsxs13(Components.Generic.Menu.Dropdown, { className: "bn-menu-dropdown", children: [
-      /* @__PURE__ */ jsx21(Components.Generic.Menu.Label, { children: "\uAE00\uC790 \uD06C\uAE30" }),
-      /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsxs14(Components.Generic.Menu.Dropdown, { className: "bn-menu-dropdown", children: [
+      /* @__PURE__ */ jsx22(Components.Generic.Menu.Label, { children: "\uAE00\uC790 \uD06C\uAE30" }),
+      /* @__PURE__ */ jsx22(
         Components.Generic.Menu.Item,
         {
           onClick: () => setFontSize(""),
@@ -3334,7 +4319,7 @@ function FontSizeButton2() {
         },
         "font-size-default"
       ),
-      FONT_SIZE_PRESETS.map((size) => /* @__PURE__ */ jsx21(
+      FONT_SIZE_PRESETS.map((size) => /* @__PURE__ */ jsx22(
         Components.Generic.Menu.Item,
         {
           onClick: () => setFontSize(size),
@@ -3355,14 +4340,14 @@ import {
 } from "@blocknote/core";
 import {
   SplitButton,
-  useBlockNoteEditor as useBlockNoteEditor4,
-  useComponentsContext as useComponentsContext4,
+  useBlockNoteEditor as useBlockNoteEditor5,
+  useComponentsContext as useComponentsContext5,
   useDictionary,
   useEditorContentOrSelectionChange as useEditorContentOrSelectionChange2,
-  useSelectedBlocks as useSelectedBlocks4
+  useSelectedBlocks as useSelectedBlocks5
 } from "@blocknote/react";
-import { useCallback as useCallback18, useMemo as useMemo4, useRef as useRef10, useState as useState10 } from "react";
-import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useCallback as useCallback19, useMemo as useMemo5, useRef as useRef10, useState as useState10 } from "react";
+import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 var COLORS = [
   "default",
   "gray",
@@ -3379,7 +4364,7 @@ function ColorIcon(props) {
   const textColor = props.textColor || "default";
   const backgroundColor = props.backgroundColor || "default";
   const size = props.size || 16;
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       className: "bn-color-icon",
@@ -3398,7 +4383,7 @@ function ColorIcon(props) {
   );
 }
 function CellFillIcon({ size = 18 }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "svg",
     {
       width: size,
@@ -3407,17 +4392,17 @@ function CellFillIcon({ size = 18 }) {
       fill: "currentColor",
       style: { pointerEvents: "none" },
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx22("path", { d: "M16.56 8.94 7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10 10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z" })
+      children: /* @__PURE__ */ jsx23("path", { d: "M16.56 8.94 7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10 10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z" })
     }
   );
 }
 function LumirColorPicker(props) {
-  const Components = useComponentsContext4();
+  const Components = useComponentsContext5();
   const dict = useDictionary();
-  return /* @__PURE__ */ jsxs14(Fragment5, { children: [
-    props.text ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
-      /* @__PURE__ */ jsx22(Components.Generic.Menu.Label, { children: props.textTitle ?? dict.color_picker.text_title }),
-      COLORS.map((color) => /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs15(Fragment5, { children: [
+    props.text ? /* @__PURE__ */ jsxs15(Fragment5, { children: [
+      /* @__PURE__ */ jsx23(Components.Generic.Menu.Label, { children: props.textTitle ?? dict.color_picker.text_title }),
+      COLORS.map((color) => /* @__PURE__ */ jsx23(
         Components.Generic.Menu.Item,
         {
           onClick: () => {
@@ -3425,16 +4410,16 @@ function LumirColorPicker(props) {
             props.text.setColor(color);
           },
           "data-test": "text-color-" + color,
-          icon: /* @__PURE__ */ jsx22(ColorIcon, { textColor: color, size: props.iconSize }),
+          icon: /* @__PURE__ */ jsx23(ColorIcon, { textColor: color, size: props.iconSize }),
           checked: props.text.color === color,
           children: dict.color_picker.colors[color]
         },
         "text-color-" + color
       ))
     ] }) : null,
-    props.background ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
-      /* @__PURE__ */ jsx22(Components.Generic.Menu.Label, { children: props.backgroundTitle ?? dict.color_picker.background_title }),
-      COLORS.map((color) => /* @__PURE__ */ jsx22(
+    props.background ? /* @__PURE__ */ jsxs15(Fragment5, { children: [
+      /* @__PURE__ */ jsx23(Components.Generic.Menu.Label, { children: props.backgroundTitle ?? dict.color_picker.background_title }),
+      COLORS.map((color) => /* @__PURE__ */ jsx23(
         Components.Generic.Menu.Item,
         {
           onClick: () => {
@@ -3442,7 +4427,7 @@ function LumirColorPicker(props) {
             props.background.setColor(color);
           },
           "data-test": "background-color-" + color,
-          icon: /* @__PURE__ */ jsx22(ColorIcon, { backgroundColor: color, size: props.iconSize }),
+          icon: /* @__PURE__ */ jsx23(ColorIcon, { backgroundColor: color, size: props.iconSize }),
           checked: props.background.color === color,
           children: dict.color_picker.colors[color]
         },
@@ -3452,13 +4437,13 @@ function LumirColorPicker(props) {
   ] });
 }
 function LumirColorStyleButton() {
-  const Components = useComponentsContext4();
-  const editor = useBlockNoteEditor4();
+  const Components = useComponentsContext5();
+  const editor = useBlockNoteEditor5();
   const ed = editor;
   const styleSchema = editor.schema.styleSchema;
   const textColorInSchema = styleSchema.textColor?.type === "textColor" && styleSchema.textColor?.propSchema === "string";
   const backgroundColorInSchema = styleSchema.backgroundColor?.type === "backgroundColor" && styleSchema.backgroundColor?.propSchema === "string";
-  const selectedBlocks = useSelectedBlocks4(editor);
+  const selectedBlocks = useSelectedBlocks5(editor);
   const [currentTextColor, setCurrentTextColor] = useState10(
     textColorInSchema ? ed.getActiveStyles().textColor || "default" : "default"
   );
@@ -3474,7 +4459,7 @@ function LumirColorStyleButton() {
       setCurrentBackgroundColor(active.backgroundColor || "default");
     }
   }, editor);
-  const setTextColor = useCallback18(
+  const setTextColor = useCallback19(
     (color) => {
       color === "default" ? ed.removeStyles({ textColor: color }) : ed.addStyles({ textColor: color });
       setTimeout(() => editor.focus());
@@ -3482,7 +4467,7 @@ function LumirColorStyleButton() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [editor]
   );
-  const setBackgroundColor = useCallback18(
+  const setBackgroundColor = useCallback19(
     (color) => {
       color === "default" ? ed.removeStyles({ backgroundColor: color }) : ed.addStyles({ backgroundColor: color });
       setTimeout(() => editor.focus());
@@ -3490,7 +4475,7 @@ function LumirColorStyleButton() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [editor]
   );
-  const show = useMemo4(() => {
+  const show = useMemo5(() => {
     if (!textColorInSchema && !backgroundColorInSchema) {
       return false;
     }
@@ -3505,15 +4490,15 @@ function LumirColorStyleButton() {
     return null;
   }
   const tooltip = "\uD14D\uC2A4\uD2B8 \uC0C9\xB7\uBC30\uACBD";
-  return /* @__PURE__ */ jsxs14(Components.Generic.Menu.Root, { children: [
-    /* @__PURE__ */ jsx22(Components.Generic.Menu.Trigger, { children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs15(Components.Generic.Menu.Root, { children: [
+    /* @__PURE__ */ jsx23(Components.Generic.Menu.Trigger, { children: /* @__PURE__ */ jsx23(
       Components.FormattingToolbar.Button,
       {
         className: "bn-button",
         "data-test": "colors",
         label: tooltip,
         mainTooltip: tooltip,
-        icon: /* @__PURE__ */ jsx22(
+        icon: /* @__PURE__ */ jsx23(
           ColorIcon,
           {
             textColor: currentTextColor,
@@ -3523,11 +4508,11 @@ function LumirColorStyleButton() {
         )
       }
     ) }),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(
       Components.Generic.Menu.Dropdown,
       {
         className: "bn-menu-dropdown bn-color-picker-dropdown",
-        children: /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsx23(
           LumirColorPicker,
           {
             textTitle: "\uD14D\uC2A4\uD2B8 \uC0C9",
@@ -3541,10 +4526,10 @@ function LumirColorStyleButton() {
   ] });
 }
 function LumirCellColorToolbarButton() {
-  const Components = useComponentsContext4();
-  const editor = useBlockNoteEditor4();
-  const selectedBlocks = useSelectedBlocks4(editor);
-  const isMultiCell = useMemo4(() => {
+  const Components = useComponentsContext5();
+  const editor = useBlockNoteEditor5();
+  const selectedBlocks = useSelectedBlocks5(editor);
+  const isMultiCell = useMemo5(() => {
     if (selectedBlocks.length !== 1 || selectedBlocks[0].type !== "table") {
       return false;
     }
@@ -3552,7 +4537,7 @@ function LumirCellColorToolbarButton() {
     return !!cs && cs.cells.length > 1;
   }, [editor, selectedBlocks]);
   const stashRef = useRef10([]);
-  const applyBackground = useCallback18(
+  const applyBackground = useCallback19(
     (color) => {
       const live = getSelectedCellPositions(editor);
       const positions = live.length > 0 ? live : stashRef.current;
@@ -3565,7 +4550,7 @@ function LumirCellColorToolbarButton() {
     return null;
   }
   const tooltip = "\uC140 \uBC30\uACBD\uC0C9";
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     Components.Generic.Menu.Root,
     {
       onOpenChange: (open) => {
@@ -3574,21 +4559,21 @@ function LumirCellColorToolbarButton() {
         }
       },
       children: [
-        /* @__PURE__ */ jsx22(Components.Generic.Menu.Trigger, { children: /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(Components.Generic.Menu.Trigger, { children: /* @__PURE__ */ jsx23(
           Components.FormattingToolbar.Button,
           {
             className: "bn-button",
             "data-test": "cell-colors",
             label: tooltip,
             mainTooltip: tooltip,
-            icon: /* @__PURE__ */ jsx22(CellFillIcon, { size: 18 })
+            icon: /* @__PURE__ */ jsx23(CellFillIcon, { size: 18 })
           }
         ) }),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           Components.Generic.Menu.Dropdown,
           {
             className: "bn-menu-dropdown bn-color-picker-dropdown",
-            children: /* @__PURE__ */ jsx22(
+            children: /* @__PURE__ */ jsx23(
               LumirColorPicker,
               {
                 backgroundTitle: "\uC140 \uBC30\uACBD",
@@ -3602,8 +4587,8 @@ function LumirCellColorToolbarButton() {
   );
 }
 function LumirCellColorPickerButton(props) {
-  const Components = useComponentsContext4();
-  const editor = useBlockNoteEditor4();
+  const Components = useComponentsContext5();
+  const editor = useBlockNoteEditor5();
   const updateColor = (color, type) => {
     const newTable = props.block.content.rows.map((row) => ({
       ...row,
@@ -3624,14 +4609,14 @@ function LumirCellColorPickerButton(props) {
   if (!currentCell || editor.settings.tables.cellTextColor === false && editor.settings.tables.cellBackgroundColor === false) {
     return null;
   }
-  return /* @__PURE__ */ jsxs14(Components.Generic.Menu.Root, { position: "right", sub: true, children: [
-    /* @__PURE__ */ jsx22(Components.Generic.Menu.Trigger, { sub: true, children: /* @__PURE__ */ jsx22(Components.Generic.Menu.Item, { className: "bn-menu-item", subTrigger: true, children: "\uC140 \uC0C9\xB7\uBC30\uACBD" }) }),
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs15(Components.Generic.Menu.Root, { position: "right", sub: true, children: [
+    /* @__PURE__ */ jsx23(Components.Generic.Menu.Trigger, { sub: true, children: /* @__PURE__ */ jsx23(Components.Generic.Menu.Item, { className: "bn-menu-item", subTrigger: true, children: "\uC140 \uC0C9\xB7\uBC30\uACBD" }) }),
+    /* @__PURE__ */ jsx23(
       Components.Generic.Menu.Dropdown,
       {
         sub: true,
         className: "bn-menu-dropdown bn-color-picker-dropdown",
-        children: /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsx23(
           LumirColorPicker,
           {
             iconSize: 18,
@@ -3652,13 +4637,13 @@ function LumirCellColorPickerButton(props) {
   ] });
 }
 function LumirTableCellMenu(props) {
-  const Components = useComponentsContext4();
-  return /* @__PURE__ */ jsx22(
+  const Components = useComponentsContext5();
+  return /* @__PURE__ */ jsx23(
     Components.Generic.Menu.Dropdown,
     {
       className: "bn-menu-dropdown bn-drag-handle-menu",
-      children: props.children || /* @__PURE__ */ jsxs14(Fragment5, { children: [
-        /* @__PURE__ */ jsx22(
+      children: props.children || /* @__PURE__ */ jsxs15(Fragment5, { children: [
+        /* @__PURE__ */ jsx23(
           SplitButton,
           {
             block: props.block,
@@ -3666,7 +4651,7 @@ function LumirTableCellMenu(props) {
             colIndex: props.colIndex
           }
         ),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           LumirCellColorPickerButton,
           {
             block: props.block,
@@ -3680,75 +4665,144 @@ function LumirTableCellMenu(props) {
 }
 
 // src/components/CustomFormattingToolbar.tsx
-import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 var CustomFormattingToolbar = () => {
-  return /* @__PURE__ */ jsxs15(FormattingToolbar, { children: [
-    /* @__PURE__ */ jsx23(BlockTypeSelect2, {}, "blockTypeSelect"),
-    /* @__PURE__ */ jsx23(TableCellMergeButton, {}, "tableCellMergeButton"),
-    /* @__PURE__ */ jsx23(FileCaptionButton, {}, "fileCaptionButton"),
-    /* @__PURE__ */ jsx23(FileReplaceButton, {}, "replaceFileButton"),
-    /* @__PURE__ */ jsx23(FileRenameButton, {}, "fileRenameButton"),
-    /* @__PURE__ */ jsx23(FileDeleteButton, {}, "fileDeleteButton"),
-    /* @__PURE__ */ jsx23(FileDownloadButton, {}, "fileDownloadButton"),
-    /* @__PURE__ */ jsx23(FilePreviewButton, {}, "filePreviewButton"),
-    /* @__PURE__ */ jsx23(BasicTextStyleButton, { basicTextStyle: "bold" }, "boldStyleButton"),
-    /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs16(FormattingToolbar, { children: [
+    /* @__PURE__ */ jsx24(BlockTypeSelect2, {}, "blockTypeSelect"),
+    /* @__PURE__ */ jsx24(TableCellMergeButton, {}, "tableCellMergeButton"),
+    /* @__PURE__ */ jsx24(FileCaptionButton, {}, "fileCaptionButton"),
+    /* @__PURE__ */ jsx24(FileReplaceButton, {}, "replaceFileButton"),
+    /* @__PURE__ */ jsx24(FileRenameButton, {}, "fileRenameButton"),
+    /* @__PURE__ */ jsx24(FileDeleteButton, {}, "fileDeleteButton"),
+    /* @__PURE__ */ jsx24(FileDownloadButton, {}, "fileDownloadButton"),
+    /* @__PURE__ */ jsx24(FilePreviewButton, {}, "filePreviewButton"),
+    /* @__PURE__ */ jsx24(BasicTextStyleButton, { basicTextStyle: "bold" }, "boldStyleButton"),
+    /* @__PURE__ */ jsx24(
       BasicTextStyleButton,
       {
         basicTextStyle: "italic"
       },
       "italicStyleButton"
     ),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(
       BasicTextStyleButton,
       {
         basicTextStyle: "underline"
       },
       "underlineStyleButton"
     ),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(
       BasicTextStyleButton,
       {
         basicTextStyle: "strike"
       },
       "strikeStyleButton"
     ),
-    /* @__PURE__ */ jsx23(TextAlignButtonWithVA, { textAlignment: "left" }, "textAlignLeftButton"),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(TextAlignButtonWithVA, { textAlignment: "left" }, "textAlignLeftButton"),
+    /* @__PURE__ */ jsx24(
       TextAlignButtonWithVA,
       {
         textAlignment: "center"
       },
       "textAlignCenterButton"
     ),
-    /* @__PURE__ */ jsx23(TextAlignButtonWithVA, { textAlignment: "right" }, "textAlignRightButton"),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(TextAlignButtonWithVA, { textAlignment: "right" }, "textAlignRightButton"),
+    /* @__PURE__ */ jsx24(
       VerticalAlignButton,
       {
         verticalAlignment: "top"
       },
       "verticalAlignTop"
     ),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(
       VerticalAlignButton,
       {
         verticalAlignment: "middle"
       },
       "verticalAlignMiddle"
     ),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(
       VerticalAlignButton,
       {
         verticalAlignment: "bottom"
       },
       "verticalAlignBottom"
     ),
-    /* @__PURE__ */ jsx23(FontSizeButton2, {}, "fontSizeButton"),
-    /* @__PURE__ */ jsx23(LumirColorStyleButton, {}, "colorStyleButton"),
-    /* @__PURE__ */ jsx23(LumirCellColorToolbarButton, {}, "cellColorButton"),
-    /* @__PURE__ */ jsx23(NestBlockButton, {}, "nestBlockButton"),
-    /* @__PURE__ */ jsx23(UnnestBlockButton, {}, "unnestBlockButton"),
-    /* @__PURE__ */ jsx23(CreateLinkButton, {}, "createLinkButton")
+    /* @__PURE__ */ jsx24(TableAlignButton, { alignment: "left" }, "tableAlignLeft"),
+    /* @__PURE__ */ jsx24(TableAlignButton, { alignment: "center" }, "tableAlignCenter"),
+    /* @__PURE__ */ jsx24(TableAlignButton, { alignment: "right" }, "tableAlignRight"),
+    /* @__PURE__ */ jsx24(FontSizeButton2, {}, "fontSizeButton"),
+    /* @__PURE__ */ jsx24(LumirColorStyleButton, {}, "colorStyleButton"),
+    /* @__PURE__ */ jsx24(LumirCellColorToolbarButton, {}, "cellColorButton"),
+    /* @__PURE__ */ jsx24(NestBlockButton, {}, "nestBlockButton"),
+    /* @__PURE__ */ jsx24(UnnestBlockButton, {}, "unnestBlockButton"),
+    /* @__PURE__ */ jsx24(CreateLinkButton, {}, "createLinkButton")
+  ] });
+};
+
+// src/components/LumirDragHandleMenu.tsx
+import {
+  DragHandleMenu,
+  RemoveBlockItem,
+  BlockColorsItem,
+  TableRowHeaderItem,
+  TableColumnHeaderItem,
+  useComponentsContext as useComponentsContext6,
+  useBlockNoteEditor as useBlockNoteEditor6,
+  useDictionary as useDictionary2
+} from "@blocknote/react";
+import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+var TABLE_ALIGN_ICONS = {
+  left: /* @__PURE__ */ jsxs17("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
+    /* @__PURE__ */ jsx25("rect", { x: "1.5", y: "4", width: "7", height: "8", rx: "1", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx25("line", { x1: "1.5", y1: "1.5", x2: "14.5", y2: "1.5" }),
+    /* @__PURE__ */ jsx25("line", { x1: "1.5", y1: "14.5", x2: "14.5", y2: "14.5" })
+  ] }),
+  center: /* @__PURE__ */ jsxs17("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
+    /* @__PURE__ */ jsx25("rect", { x: "4.5", y: "4", width: "7", height: "8", rx: "1", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx25("line", { x1: "1.5", y1: "1.5", x2: "14.5", y2: "1.5" }),
+    /* @__PURE__ */ jsx25("line", { x1: "1.5", y1: "14.5", x2: "14.5", y2: "14.5" })
+  ] }),
+  right: /* @__PURE__ */ jsxs17("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
+    /* @__PURE__ */ jsx25("rect", { x: "7.5", y: "4", width: "7", height: "8", rx: "1", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx25("line", { x1: "1.5", y1: "1.5", x2: "14.5", y2: "1.5" }),
+    /* @__PURE__ */ jsx25("line", { x1: "1.5", y1: "14.5", x2: "14.5", y2: "14.5" })
+  ] })
+};
+var TABLE_ALIGN_LABELS = {
+  left: "\uD45C \uC67C\uCABD \uC815\uB82C",
+  center: "\uD45C \uAC00\uC6B4\uB370 \uC815\uB82C",
+  right: "\uD45C \uC624\uB978\uCABD \uC815\uB82C"
+};
+function TableAlignmentItems(props) {
+  const Components = useComponentsContext6();
+  const editor = useBlockNoteEditor6();
+  if (props.block?.type !== "table" || !props.block?.id) {
+    return null;
+  }
+  const current = getTableAlignment(editor, props.block.id);
+  return /* @__PURE__ */ jsx25(Fragment6, { children: ["left", "center", "right"].map((align) => /* @__PURE__ */ jsx25(
+    Components.Generic.Menu.Item,
+    {
+      icon: TABLE_ALIGN_ICONS[align],
+      checked: current === align,
+      onClick: () => {
+        setTableAlignment(editor, props.block.id, align);
+        editor.setTextCursorPosition(props.block.id);
+      },
+      children: TABLE_ALIGN_LABELS[align]
+    },
+    `tableAlign-${align}`
+  )) });
+}
+var LumirDragHandleMenu = (props) => {
+  const dict = useDictionary2();
+  return /* @__PURE__ */ jsxs17(DragHandleMenu, { ...props, children: [
+    /* @__PURE__ */ jsx25(RemoveBlockItem, { ...props, children: dict.drag_handle.delete_menuitem }),
+    /* @__PURE__ */ jsx25(BlockColorsItem, { ...props, children: dict.drag_handle.colors_menuitem }),
+    /* @__PURE__ */ jsx25(TableRowHeaderItem, { ...props, children: dict.drag_handle.header_row_menuitem }),
+    /* @__PURE__ */ jsx25(TableColumnHeaderItem, { ...props, children: dict.drag_handle.header_column_menuitem }),
+    /* @__PURE__ */ jsx25(TableAlignmentItems, { block: props.block })
   ] });
 };
 
@@ -3757,13 +4811,13 @@ import {
   ExtendButton,
   TableCellButton,
   TableHandle,
-  useBlockNoteEditor as useBlockNoteEditor5,
+  useBlockNoteEditor as useBlockNoteEditor7,
   useEditorContentOrSelectionChange as useEditorContentOrSelectionChange3,
   useExtendButtonsPositioning,
   useUIPluginState
 } from "@blocknote/react";
 import { autoUpdate as autoUpdate2, FloatingPortal } from "@floating-ui/react";
-import { useCallback as useCallback19, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef11, useState as useState11 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect10, useMemo as useMemo7, useRef as useRef11, useState as useState11 } from "react";
 
 // src/components/hooks/useFocusedCellHandlePositioning.ts
 import {
@@ -3772,9 +4826,9 @@ import {
   useFloating,
   useTransitionStyles
 } from "@floating-ui/react";
-import { useEffect as useEffect9, useMemo as useMemo5 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo6 } from "react";
 function useFocusedCellHandlePositioning(cellEl, tbodyEl, orientation, show) {
-  const { refs, floatingStyles, context } = useFloating({
+  const { refs, floatingStyles, context, update } = useFloating({
     open: show,
     placement: orientation === "row" ? "left" : orientation === "col" ? "top" : "right",
     // col/row: 가장자리 선(zero-size)에, cell: 셀 우측 보더에 14px hit-area 중앙 정렬(-7).
@@ -3782,6 +4836,14 @@ function useFocusedCellHandlePositioning(cellEl, tbodyEl, orientation, show) {
     whileElementsMounted: autoUpdate
   });
   const { isMounted, styles } = useTransitionStyles(context);
+  useEffect9(() => {
+    if (!show || !tbodyEl) {
+      return;
+    }
+    const ro = new ResizeObserver(() => update());
+    ro.observe(tbodyEl);
+    return () => ro.disconnect();
+  }, [show, tbodyEl, update]);
   useEffect9(() => {
     if (!cellEl) {
       refs.setReference(null);
@@ -3802,7 +4864,7 @@ function useFocusedCellHandlePositioning(cellEl, tbodyEl, orientation, show) {
       }
     });
   }, [cellEl, tbodyEl, orientation, refs]);
-  return useMemo5(
+  return useMemo6(
     () => ({
       isMounted,
       ref: refs.setFloating,
@@ -3817,7 +4879,7 @@ function useFocusedCellHandlePositioning(cellEl, tbodyEl, orientation, show) {
 }
 
 // src/components/LumirTableHandlesController.tsx
-import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 function syncCoreHoverToFocusedCell(cellEl) {
   const r = cellEl.getBoundingClientRect();
   cellEl.dispatchEvent(
@@ -3831,7 +4893,7 @@ function syncCoreHoverToFocusedCell(cellEl) {
   );
 }
 function LumirTableHandlesController() {
-  const editor = useBlockNoteEditor5();
+  const editor = useBlockNoteEditor7();
   const [focused, setFocused] = useState11(null);
   const [menuContainerRef, setMenuContainerRef] = useState11(null);
   const [overlayEl, setOverlayEl] = useState11(null);
@@ -3839,7 +4901,7 @@ function LumirTableHandlesController() {
   const frozenRef = useRef11(false);
   const menuOpenRef = useRef11(false);
   const draggingRef = useRef11(false);
-  const recompute = useCallback19(() => {
+  const recompute = useCallback20(() => {
     if (frozenRef.current) {
       return;
     }
@@ -3928,7 +4990,13 @@ function LumirTableHandlesController() {
       overlayEl.style.height = `${bottom - top}px`;
     };
     update();
-    return autoUpdate2(f.cellEl, overlayEl, update);
+    const stopAutoUpdate = autoUpdate2(f.cellEl, overlayEl, update);
+    const ro = new ResizeObserver(update);
+    ro.observe(f.tbodyEl);
+    return () => {
+      stopAutoUpdate();
+      ro.disconnect();
+    };
   }, [focused, overlayEl, openMenu]);
   const cellEl = focused?.cellEl ?? null;
   const tbodyEl = focused?.tbodyEl ?? null;
@@ -3950,13 +5018,13 @@ function LumirTableHandlesController() {
     coreState?.showAddOrRemoveRowsButton || false,
     coreState?.referencePosTable || null
   );
-  const onStartExtend = useCallback19(() => {
+  const onStartExtend = useCallback20(() => {
     editor.tableHandles?.freezeHandles();
   }, [editor]);
-  const onEndExtend = useCallback19(() => {
+  const onEndExtend = useCallback20(() => {
     editor.tableHandles?.unfreezeHandles();
   }, [editor]);
-  const menuHandlers = useMemo6(() => {
+  const menuHandlers = useMemo7(() => {
     const mk = (kind) => ({
       freeze: () => {
         menuOpenRef.current = true;
@@ -3974,10 +5042,10 @@ function LumirTableHandlesController() {
     });
     return { col: mk("col"), row: mk("row"), cell: mk("cell") };
   }, [editor, recompute]);
-  const onGutterPointerDown = useCallback19(() => {
+  const onGutterPointerDown = useCallback20(() => {
     frozenRef.current = true;
   }, []);
-  const onGutterPointerEnter = useCallback19(
+  const onGutterPointerEnter = useCallback20(
     (e) => {
       if (e.buttons === 0 && focused) {
         syncCoreHoverToFocusedCell(focused.cellEl);
@@ -3985,7 +5053,7 @@ function LumirTableHandlesController() {
     },
     [focused]
   );
-  const makeDragStart = useCallback19(
+  const makeDragStart = useCallback20(
     (dir) => (e) => {
       draggingRef.current = true;
       frozenRef.current = true;
@@ -3997,19 +5065,19 @@ function LumirTableHandlesController() {
     },
     [editor]
   );
-  const onDragEnd = useCallback19(() => {
+  const onDragEnd = useCallback20(() => {
     editor.tableHandles?.dragEnd();
     draggingRef.current = false;
     frozenRef.current = false;
     recompute();
   }, [editor, recompute]);
-  const noop = useCallback19(() => {
+  const noop = useCallback20(() => {
   }, []);
-  return /* @__PURE__ */ jsxs16(Fragment6, { children: [
-    /* @__PURE__ */ jsx24("div", { ref: setMenuContainerRef }),
-    th && focused && menuContainerRef && /* @__PURE__ */ jsxs16(FloatingPortal, { root: focused.widgetContainer, children: [
-      /* @__PURE__ */ jsx24("div", { ref: setOverlayEl, className: "lumir-tbl-cell-focus" }),
-      colHandle.isMounted && /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs18(Fragment7, { children: [
+    /* @__PURE__ */ jsx26("div", { ref: setMenuContainerRef }),
+    th && focused && menuContainerRef && /* @__PURE__ */ jsxs18(FloatingPortal, { root: focused.widgetContainer, children: [
+      /* @__PURE__ */ jsx26("div", { ref: setOverlayEl, className: "lumir-tbl-cell-focus" }),
+      colHandle.isMounted && /* @__PURE__ */ jsxs18(
         "div",
         {
           ref: colHandle.ref,
@@ -4018,8 +5086,8 @@ function LumirTableHandlesController() {
           onPointerEnter: onGutterPointerEnter,
           onPointerDown: onGutterPointerDown,
           children: [
-            /* @__PURE__ */ jsx24("span", { className: "lumir-tbl-gutter" }),
-            /* @__PURE__ */ jsx24("div", { className: "lumir-tbl-grip", children: /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx26("span", { className: "lumir-tbl-gutter" }),
+            /* @__PURE__ */ jsx26("div", { className: "lumir-tbl-grip", children: /* @__PURE__ */ jsx26(
               TableHandle,
               {
                 editor,
@@ -4038,7 +5106,7 @@ function LumirTableHandlesController() {
           ]
         }
       ),
-      rowHandle.isMounted && /* @__PURE__ */ jsxs16(
+      rowHandle.isMounted && /* @__PURE__ */ jsxs18(
         "div",
         {
           ref: rowHandle.ref,
@@ -4047,8 +5115,8 @@ function LumirTableHandlesController() {
           onPointerEnter: onGutterPointerEnter,
           onPointerDown: onGutterPointerDown,
           children: [
-            /* @__PURE__ */ jsx24("span", { className: "lumir-tbl-gutter" }),
-            /* @__PURE__ */ jsx24("div", { className: "lumir-tbl-grip", children: /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx26("span", { className: "lumir-tbl-gutter" }),
+            /* @__PURE__ */ jsx26("div", { className: "lumir-tbl-grip", children: /* @__PURE__ */ jsx26(
               TableHandle,
               {
                 editor,
@@ -4067,7 +5135,7 @@ function LumirTableHandlesController() {
           ]
         }
       ),
-      cellHandle.isMounted && openMenu !== "col" && openMenu !== "row" && /* @__PURE__ */ jsxs16(
+      cellHandle.isMounted && openMenu !== "col" && openMenu !== "row" && /* @__PURE__ */ jsxs18(
         "div",
         {
           ref: cellHandle.ref,
@@ -4075,8 +5143,8 @@ function LumirTableHandlesController() {
           className: "lumir-tbl-gutter-wrap lumir-tbl-gutter-wrap--cell" + (openMenu === "cell" ? " lumir-tbl-gutter-wrap--active" : ""),
           onPointerDown: onGutterPointerDown,
           children: [
-            /* @__PURE__ */ jsx24("span", { className: "lumir-tbl-gutter" }),
-            /* @__PURE__ */ jsx24("div", { className: "lumir-tbl-grip", children: /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx26("span", { className: "lumir-tbl-gutter" }),
+            /* @__PURE__ */ jsx26("div", { className: "lumir-tbl-grip", children: /* @__PURE__ */ jsx26(
               TableCellButton,
               {
                 editor,
@@ -4093,8 +5161,8 @@ function LumirTableHandlesController() {
         }
       )
     ] }),
-    th && coreState?.widgetContainer && /* @__PURE__ */ jsxs16(FloatingPortal, { root: coreState.widgetContainer, children: [
-      /* @__PURE__ */ jsx24("div", { ref: addOrRemoveRowsButton.ref, style: addOrRemoveRowsButton.style, children: /* @__PURE__ */ jsx24(
+    th && coreState?.widgetContainer && /* @__PURE__ */ jsxs18(FloatingPortal, { root: coreState.widgetContainer, children: [
+      /* @__PURE__ */ jsx26("div", { ref: addOrRemoveRowsButton.ref, style: addOrRemoveRowsButton.style, children: /* @__PURE__ */ jsx26(
         ExtendButton,
         {
           editor,
@@ -4104,12 +5172,12 @@ function LumirTableHandlesController() {
           onMouseUp: onEndExtend
         }
       ) }),
-      /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsx26(
         "div",
         {
           ref: addOrRemoveColumnsButton.ref,
           style: addOrRemoveColumnsButton.style,
-          children: /* @__PURE__ */ jsx24(
+          children: /* @__PURE__ */ jsx26(
             ExtendButton,
             {
               editor,
@@ -4126,15 +5194,17 @@ function LumirTableHandlesController() {
 }
 
 // src/utils/table-vertical-alignment.ts
-function injectVerticalAlignment(blocks, editor) {
-  const tiptap = editor?._tiptapEditor;
-  if (!tiptap) return blocks;
-  const { doc } = tiptap.state;
-  const tableVAMap = buildTableVerticalAlignmentMap(doc);
-  if (tableVAMap.size === 0) return blocks;
-  return patchBlocks(blocks, tableVAMap);
+var CELL_ATTR_DEFAULTS = {
+  verticalAlignment: "top",
+  rowHeight: null
+};
+function isMeaningful2(attr, value) {
+  if (value === null || value === void 0) {
+    return false;
+  }
+  return value !== CELL_ATTR_DEFAULTS[attr];
 }
-function buildTableVerticalAlignmentMap(doc) {
+function buildTableCellAttrMap(doc, attrs) {
   const result = /* @__PURE__ */ new Map();
   doc.descendants((node) => {
     if (node.type.name === "blockContainer") {
@@ -4147,9 +5217,15 @@ function buildTableVerticalAlignmentMap(doc) {
           if (rowNode.type.name === "tableRow") {
             let colIndex = 0;
             rowNode.forEach((cellNode) => {
-              const va = cellNode.attrs?.verticalAlignment;
-              if (va && va !== "top") {
-                cells.push({ row: rowIndex, col: colIndex, va });
+              const props = {};
+              for (const attr of attrs) {
+                const value = cellNode.attrs?.[attr];
+                if (isMeaningful2(attr, value)) {
+                  props[attr] = value;
+                }
+              }
+              if (Object.keys(props).length > 0) {
+                cells.push({ row: rowIndex, col: colIndex, props });
               }
               colIndex++;
             });
@@ -4165,18 +5241,21 @@ function buildTableVerticalAlignmentMap(doc) {
   });
   return result;
 }
-function patchBlocks(blocks, tableVAMap) {
+function patchBlocks(blocks, cellAttrMap) {
   return blocks.map((block) => {
     if (block.type !== "table" || !block.id || !block.content) {
       if (block.children && block.children.length > 0) {
         return {
           ...block,
-          children: patchBlocks(block.children, tableVAMap)
+          children: patchBlocks(
+            block.children,
+            cellAttrMap
+          )
         };
       }
       return block;
     }
-    const cells = tableVAMap.get(block.id);
+    const cells = cellAttrMap.get(block.id);
     if (!cells || cells.length === 0) {
       return block;
     }
@@ -4189,11 +5268,13 @@ function patchBlocks(blocks, tableVAMap) {
         const match = cells.find(
           (c) => c.row === rowIndex && c.col === colIndex
         );
-        if (!match) return cell;
+        if (!match) {
+          return cell;
+        }
         if (cell && typeof cell === "object" && cell.type === "tableCell") {
           return {
             ...cell,
-            props: { ...cell.props, verticalAlignment: match.va }
+            props: { ...cell.props, ...match.props }
           };
         }
         return cell;
@@ -4206,6 +5287,77 @@ function patchBlocks(blocks, tableVAMap) {
     };
   });
 }
+function injectTableCellAttrs(blocks, editor, attrs) {
+  const tiptap = editor?._tiptapEditor;
+  if (!tiptap) {
+    return blocks;
+  }
+  const { doc } = tiptap.state;
+  const cellAttrMap = buildTableCellAttrMap(doc, attrs);
+  if (cellAttrMap.size === 0) {
+    return blocks;
+  }
+  return patchBlocks(blocks, cellAttrMap);
+}
+var TABLE_BLOCK_ATTR_DEFAULTS = {
+  tableAlignment: "left"
+};
+function buildTableBlockAttrMap(doc, attrs) {
+  const result = /* @__PURE__ */ new Map();
+  doc.descendants((node) => {
+    if (node.type.name === "blockContainer") {
+      const blockId = node.attrs?.id;
+      const contentNode = node.firstChild;
+      if (blockId && contentNode?.type.name === "table") {
+        const props = {};
+        for (const attr of attrs) {
+          const value = contentNode.attrs?.[attr];
+          if (value !== null && value !== void 0 && value !== TABLE_BLOCK_ATTR_DEFAULTS[attr]) {
+            props[attr] = value;
+          }
+        }
+        if (Object.keys(props).length > 0) {
+          result.set(blockId, props);
+        }
+      }
+      return false;
+    }
+    return void 0;
+  });
+  return result;
+}
+function patchTableBlockProps(blocks, attrMap) {
+  return blocks.map((block) => {
+    if (block.type === "table" && block.id && attrMap.has(block.id)) {
+      return {
+        ...block,
+        props: { ...block.props, ...attrMap.get(block.id) }
+      };
+    }
+    if (block.children && block.children.length > 0) {
+      return {
+        ...block,
+        children: patchTableBlockProps(
+          block.children,
+          attrMap
+        )
+      };
+    }
+    return block;
+  });
+}
+function injectTableBlockAttrs(blocks, editor) {
+  const tiptap = editor?._tiptapEditor;
+  if (!tiptap) {
+    return blocks;
+  }
+  const { doc } = tiptap.state;
+  const attrMap = buildTableBlockAttrMap(doc, ["tableAlignment"]);
+  if (attrMap.size === 0) {
+    return blocks;
+  }
+  return patchTableBlockProps(blocks, attrMap);
+}
 
 // src/utils/font-size-serialization.ts
 function mapPreservingRef(arr, fn) {
@@ -4520,26 +5672,8 @@ function normalizeExcelTableHtml(html) {
   }
 }
 
-// src/constants/limits.ts
-var MAX_FILE_SIZE = 10 * 1024 * 1024;
-var MAX_VIDEO_FILE_SIZE = 100 * 1024 * 1024;
-var BLOCKED_EXTENSIONS = [".svg", ".svgz"];
-var ALLOWED_VIDEO_MIME_TYPES = /* @__PURE__ */ new Set([
-  "video/mp4",
-  "video/webm",
-  "video/ogg",
-  "video/quicktime"
-  // .mov
-]);
-var ALLOWED_VIDEO_EXTENSIONS = [
-  ".mp4",
-  ".webm",
-  ".ogg",
-  ".mov"
-];
-
 // src/components/LumirEditor.tsx
-import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
 var DEBUG_LOG = (loc, msg, data) => {
   const p = fetch("http://127.0.0.1:7686/ingest/1f8ee1c5-0cf0-4ae7-91ed-5ea7ed17130a", {
     method: "POST",
@@ -4770,9 +5904,9 @@ var findBlockWithLink = (blocks, targetUrl) => {
   return null;
 };
 var ConvertToPreviewButton = ({ url }) => {
-  const editor = useBlockNoteEditor6();
-  const Components = useComponentsContext5();
-  return /* @__PURE__ */ jsx25(
+  const editor = useBlockNoteEditor8();
+  const Components = useComponentsContext7();
+  return /* @__PURE__ */ jsx27(
     Components.LinkToolbar.Button,
     {
       className: "bn-button",
@@ -4791,29 +5925,29 @@ var ConvertToPreviewButton = ({ url }) => {
           console.error("Convert to link preview failed:", err);
         }
       },
-      icon: /* @__PURE__ */ jsxs17("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ jsx25("rect", { x: "1", y: "3", width: "14", height: "10", rx: "2", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }),
-        /* @__PURE__ */ jsx25("line", { x1: "1", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ jsx25("circle", { cx: "5", cy: "6.5", r: "1.5", stroke: "currentColor", strokeWidth: "1", fill: "none" })
+      icon: /* @__PURE__ */ jsxs19("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx27("rect", { x: "1", y: "3", width: "14", height: "10", rx: "2", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }),
+        /* @__PURE__ */ jsx27("line", { x1: "1", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx27("circle", { cx: "5", cy: "6.5", r: "1.5", stroke: "currentColor", strokeWidth: "1", fill: "none" })
       ] })
     }
   );
 };
 var CustomLinkToolbar = (props) => {
-  const editor = useBlockNoteEditor6();
-  const Components = useComponentsContext5();
+  const editor = useBlockNoteEditor8();
+  const Components = useComponentsContext7();
   const hasLinkPreview = !!editor?._linkPreviewApiEndpoint;
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs19(
     Components.LinkToolbar.Root,
     {
       className: "bn-toolbar bn-link-toolbar",
       onMouseEnter: props.stopHideTimer,
       onMouseLeave: props.startHideTimer,
       children: [
-        /* @__PURE__ */ jsx25(EditLinkButton, { url: props.url, text: props.text, editLink: props.editLink }),
-        /* @__PURE__ */ jsx25(OpenLinkButton, { url: props.url }),
-        /* @__PURE__ */ jsx25(DeleteLinkButton, { deleteLink: props.deleteLink }),
-        hasLinkPreview && /* @__PURE__ */ jsx25(ConvertToPreviewButton, { url: props.url })
+        /* @__PURE__ */ jsx27(EditLinkButton, { url: props.url, text: props.text, editLink: props.editLink }),
+        /* @__PURE__ */ jsx27(OpenLinkButton, { url: props.url }),
+        /* @__PURE__ */ jsx27(DeleteLinkButton, { deleteLink: props.deleteLink }),
+        hasLinkPreview && /* @__PURE__ */ jsx27(ConvertToPreviewButton, { url: props.url })
       ]
     }
   );
@@ -4863,7 +5997,7 @@ function LumirEditor({
   const floatingMenuFileInputRef = useRef12(null);
   const floatingMenuBlockRef = useRef12(null);
   const floatingMenuUploadStartTimeRef = useRef12(0);
-  const handleError = useCallback20(
+  const handleError = useCallback21(
     (error) => {
       onError?.(error);
       setErrorMessage(error.getUserMessage());
@@ -4871,12 +6005,12 @@ function LumirEditor({
     },
     [onError]
   );
-  const validatedContent = useMemo7(() => {
+  const validatedContent = useMemo8(() => {
     return liftFontSize(
       ContentUtils.validateContent(initialContent, initialEmptyBlocks)
     );
   }, [initialContent, initialEmptyBlocks]);
-  const tableConfig = useMemo7(() => {
+  const tableConfig = useMemo8(() => {
     return EditorConfig.getDefaultTableConfig(tables);
   }, [
     tables?.splitCells,
@@ -4884,10 +6018,10 @@ function LumirEditor({
     tables?.cellTextColor,
     tables?.headers
   ]);
-  const headingConfig = useMemo7(() => {
+  const headingConfig = useMemo8(() => {
     return EditorConfig.getDefaultHeadingConfig(heading);
   }, [heading?.levels?.join(",") ?? ""]);
-  const disabledExtensions = useMemo7(() => {
+  const disabledExtensions = useMemo8(() => {
     return EditorConfig.getDisabledExtensions(
       disableExtensions,
       allowVideoUpload,
@@ -4906,7 +6040,7 @@ function LumirEditor({
   useEffect11(() => {
     fileNameTransformRef.current = s3Upload?.fileNameTransform;
   }, [s3Upload?.fileNameTransform]);
-  const memoizedS3Upload = useMemo7(() => {
+  const memoizedS3Upload = useMemo8(() => {
     if (!s3Upload) return void 0;
     return {
       apiEndpoint: s3Upload.apiEndpoint,
@@ -4957,7 +6091,14 @@ function LumirEditor({
       // 확장 비활성: 비디오/오디오/파일 제어
       disableExtensions: disabledExtensions,
       _tiptapOptions: {
-        extensions: [VerticalAlignmentExtension]
+        extensions: [
+          VerticalAlignmentExtension,
+          // 행 높이 attr 등록은 항상(저장된 높이 렌더), 드래그 리사이즈 UI는
+          // tableHandles prop으로 게이트(기존 grip 컨트롤러와 동일 게이트).
+          RowHeightExtension.configure({ resizable: tableHandles }),
+          // 표 블록 정렬(좌/가운데/우) attr.
+          TableAlignmentExtension
+        ]
       },
       placeholders: placeholder ? { default: placeholder, emptyDocument: placeholder } : void 0,
       tabBehavior,
@@ -5133,12 +6274,23 @@ function LumirEditor({
       memoizedS3Upload,
       allowVideoUpload,
       linkPreview?.apiEndpoint,
-      placeholder
+      placeholder,
+      // tableHandles 변경 시 RowHeightExtension의 resizable 게이트가 반영되도록 재생성
+      tableHandles
     ]
   );
   if (editor && linkPreview?.apiEndpoint) {
     editor._linkPreviewApiEndpoint = linkPreview.apiEndpoint;
   }
+  if (editor) {
+    try {
+      const view = editor.prosemirrorView;
+      if (view) {
+        view.__lumirEditor = editor;
+      }
+    } catch {
+    }
+  }
   useEffect11(() => {
     if (editor) {
       editor.isEditable = editable;
@@ -5161,7 +6313,15 @@ function LumirEditor({
     if (!editor || !onContentChange) return;
     const handleContentChange = () => {
       const blocks = editor.topLevelBlocks;
-      const patched = lowerFontSize(injectVerticalAlignment(blocks, editor));
+      const patched = lowerFontSize(
+        injectTableBlockAttrs(
+          injectTableCellAttrs(blocks, editor, [
+            "verticalAlignment",
+            "rowHeight"
+          ]),
+          editor
+        )
+      );
       onContentChange(patched);
     };
     return editor.onEditorContentChange(handleContentChange);
@@ -5317,20 +6477,20 @@ function LumirEditor({
       el.removeEventListener("drop", handleDrop, { capture: true });
     };
   }, [editor, allowVideoUpload]);
-  const computedSideMenu = useMemo7(() => {
+  const computedSideMenu = useMemo8(() => {
     return sideMenuAddButton ? sideMenu : false;
   }, [sideMenuAddButton, sideMenu]);
-  const DragHandleOnlySideMenu = useMemo7(() => {
-    return (props) => /* @__PURE__ */ jsx25(BlockSideMenu, { ...props, children: /* @__PURE__ */ jsx25(DragHandleButton, { ...props }) });
+  const DragHandleOnlySideMenu = useMemo8(() => {
+    return (props) => /* @__PURE__ */ jsx27(BlockSideMenu, { ...props, children: /* @__PURE__ */ jsx27(DragHandleButton, { ...props, dragHandleMenu: LumirDragHandleMenu }) });
   }, []);
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       className: cn("lumirEditor", className),
       style: { position: "relative", display: "flex", flexDirection: "column" },
       children: [
-        floatingMenu && editor && /* @__PURE__ */ jsxs17(Fragment7, { children: [
-          /* @__PURE__ */ jsx25(
+        floatingMenu && editor && /* @__PURE__ */ jsxs19(Fragment8, { children: [
+          /* @__PURE__ */ jsx27(
             "input",
             {
               ref: floatingMenuFileInputRef,
@@ -5401,7 +6561,7 @@ function LumirEditor({
               }
             }
           ),
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx27(
             FloatingMenu,
             {
               editor,
@@ -5433,7 +6593,7 @@ function LumirEditor({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs17(
+        /* @__PURE__ */ jsxs19(
           BlockNoteView,
           {
             editor,
@@ -5448,19 +6608,19 @@ function LumirEditor({
             tableHandles: false,
             onSelectionChange,
             children: [
-              tableHandles && /* @__PURE__ */ jsx25(LumirTableHandlesController, {}),
-              formattingToolbar && /* @__PURE__ */ jsx25(
+              tableHandles && /* @__PURE__ */ jsx27(LumirTableHandlesController, {}),
+              formattingToolbar && /* @__PURE__ */ jsx27(
                 FormattingToolbarController,
                 {
                   formattingToolbar: CustomFormattingToolbar
                 }
               ),
-              linkToolbar && (linkPreview?.apiEndpoint ? /* @__PURE__ */ jsx25(LinkToolbarController, { linkToolbar: CustomLinkToolbar }) : /* @__PURE__ */ jsx25(LinkToolbarController, {})),
-              /* @__PURE__ */ jsx25(
+              linkToolbar && (linkPreview?.apiEndpoint ? /* @__PURE__ */ jsx27(LinkToolbarController, { linkToolbar: CustomLinkToolbar }) : /* @__PURE__ */ jsx27(LinkToolbarController, {})),
+              /* @__PURE__ */ jsx27(
                 SuggestionMenuController,
                 {
                   triggerCharacter: "/",
-                  getItems: useCallback20(
+                  getItems: useCallback21(
                     async (query) => {
                       const items = getDefaultReactSlashMenuItems(editor);
                       const filtered = items.filter((item) => {
@@ -5504,7 +6664,7 @@ function LumirEditor({
                         },
                         aliases: ["html", "preview", "\uC6F9", "\uC6F9\uD398\uC774\uC9C0"],
                         group: "Embeds",
-                        icon: /* @__PURE__ */ jsxs17(
+                        icon: /* @__PURE__ */ jsxs19(
                           "svg",
                           {
                             width: "18",
@@ -5516,14 +6676,40 @@ function LumirEditor({
                             strokeLinecap: "round",
                             strokeLinejoin: "round",
                             children: [
-                              /* @__PURE__ */ jsx25("polyline", { points: "16 18 22 12 16 6" }),
-                              /* @__PURE__ */ jsx25("polyline", { points: "8 6 2 12 8 18" })
+                              /* @__PURE__ */ jsx27("polyline", { points: "16 18 22 12 16 6" }),
+                              /* @__PURE__ */ jsx27("polyline", { points: "8 6 2 12 8 18" })
                             ]
                           }
                         ),
                         subtext: "HTML \uD30C\uC77C\uC744 \uBBF8\uB9AC\uBCF4\uAE30\uB85C \uC0BD\uC785"
                       };
-                      const allItems = [...filtered, htmlPreviewItem];
+                      const columnItem = {
+                        title: "2\uB2E8 \uCEEC\uB7FC",
+                        onItemClick: () => {
+                          insertTwoColumns(editor);
+                        },
+                        aliases: ["columns", "column", "2col", "\uB2E8", "\uCEEC\uB7FC", "\uB2E4\uB2E8", "\uBD84\uD560"],
+                        group: "Basic blocks",
+                        icon: /* @__PURE__ */ jsxs19(
+                          "svg",
+                          {
+                            width: "18",
+                            height: "18",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            children: [
+                              /* @__PURE__ */ jsx27("rect", { x: "3", y: "4", width: "7", height: "16", rx: "1" }),
+                              /* @__PURE__ */ jsx27("rect", { x: "14", y: "4", width: "7", height: "16", rx: "1" })
+                            ]
+                          }
+                        ),
+                        subtext: "\uBE14\uB85D\uC744 \uC88C\uC6B0 2\uB2E8\uC73C\uB85C \uBC30\uCE58"
+                      };
+                      const allItems = [...filtered, htmlPreviewItem, columnItem];
                       if (linkPreview?.apiEndpoint) {
                         allItems.push({
                           title: "Link Preview",
@@ -5542,7 +6728,7 @@ function LumirEditor({
                             "\uD504\uB9AC\uBDF0"
                           ],
                           group: "Embeds",
-                          icon: /* @__PURE__ */ jsxs17(
+                          icon: /* @__PURE__ */ jsxs19(
                             "svg",
                             {
                               width: "18",
@@ -5554,8 +6740,8 @@ function LumirEditor({
                               strokeLinecap: "round",
                               strokeLinejoin: "round",
                               children: [
-                                /* @__PURE__ */ jsx25("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
-                                /* @__PURE__ */ jsx25("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+                                /* @__PURE__ */ jsx27("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+                                /* @__PURE__ */ jsx27("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
                               ]
                             }
                           ),
@@ -5591,21 +6777,21 @@ function LumirEditor({
                   )
                 }
               ),
-              !sideMenuAddButton && /* @__PURE__ */ jsx25(SideMenuController, { sideMenu: DragHandleOnlySideMenu })
+              !sideMenuAddButton && /* @__PURE__ */ jsx27(SideMenuController, { sideMenu: DragHandleOnlySideMenu })
             ]
           }
         ),
-        isUploading && /* @__PURE__ */ jsxs17("div", { className: "lumirEditor-upload-overlay", children: [
-          /* @__PURE__ */ jsx25("div", { className: "lumirEditor-spinner" }),
-          uploadProgress !== null && /* @__PURE__ */ jsxs17("span", { className: "lumirEditor-upload-progress", children: [
+        isUploading && /* @__PURE__ */ jsxs19("div", { className: "lumirEditor-upload-overlay", children: [
+          /* @__PURE__ */ jsx27("div", { className: "lumirEditor-spinner" }),
+          uploadProgress !== null && /* @__PURE__ */ jsxs19("span", { className: "lumirEditor-upload-progress", children: [
             uploadProgress,
             "%"
           ] })
         ] }),
-        errorMessage && /* @__PURE__ */ jsxs17("div", { className: "lumirEditor-error-toast", children: [
-          /* @__PURE__ */ jsx25("span", { className: "lumirEditor-error-icon", children: "\u26A0\uFE0F" }),
-          /* @__PURE__ */ jsx25("span", { className: "lumirEditor-error-message", children: errorMessage }),
-          /* @__PURE__ */ jsx25(
+        errorMessage && /* @__PURE__ */ jsxs19("div", { className: "lumirEditor-error-toast", children: [
+          /* @__PURE__ */ jsx27("span", { className: "lumirEditor-error-icon", children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ jsx27("span", { className: "lumirEditor-error-message", children: errorMessage }),
+          /* @__PURE__ */ jsx27(
             "button",
             {
               className: "lumirEditor-error-close",