@lumir-company/editor 0.4.11 → 0.4.13

package/dist/index.js

@@ -40,10 +40,10 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/LumirEditor.tsx
-var import_react18 = require("react");
-var import_react19 = require("@blocknote/react");
+var import_react23 = require("react");
+var import_react24 = require("@blocknote/react");
 var import_mantine = require("@blocknote/mantine");
-var import_core2 = require("@blocknote/core");
+var import_core4 = require("@blocknote/core");
 
 // src/utils/cn.ts
 function cn(...inputs) {
@@ -2831,6 +2831,399 @@ var LumirEditorError = class _LumirEditorError extends Error {
   }
 };
 
+// src/extensions/VerticalAlignmentExtension.ts
+var import_core2 = require("@tiptap/core");
+var VerticalAlignmentExtension = import_core2.Extension.create({
+  name: "verticalAlignment",
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["tableCell", "tableHeader"],
+        attributes: {
+          verticalAlignment: {
+            default: "top",
+            parseHTML: (element) => {
+              return element.getAttribute("data-vertical-alignment") || "top";
+            },
+            renderHTML: (attributes) => {
+              if (!attributes.verticalAlignment || attributes.verticalAlignment === "top") {
+                return {};
+              }
+              return {
+                "data-vertical-alignment": attributes.verticalAlignment
+              };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addProseMirrorPlugins() {
+    return [];
+  }
+});
+
+// src/components/CustomFormattingToolbar.tsx
+var import_react22 = require("@blocknote/react");
+
+// src/components/TextAlignButtonWithVA.tsx
+var import_core3 = require("@blocknote/core");
+var import_react18 = require("react");
+var import_react19 = require("@blocknote/react");
+
+// src/utils/prosemirror-table-utils.ts
+function getSelectedCellPositions(editor) {
+  const tiptap = editor._tiptapEditor;
+  if (!tiptap) return [];
+  const { state } = tiptap;
+  const { selection } = state;
+  if (typeof selection.forEachCell === "function") {
+    const positions = [];
+    selection.forEachCell((_node, pos) => {
+      positions.push(pos);
+    });
+    return positions;
+  }
+  const $pos = selection.$from;
+  for (let depth = $pos.depth; depth > 0; depth--) {
+    const node = $pos.node(depth);
+    if (node.type.name === "tableCell" || node.type.name === "tableHeader") {
+      return [$pos.before(depth)];
+    }
+  }
+  return [];
+}
+
+// src/components/TextAlignButtonWithVA.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var icons = {
+  left: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" }) }),
+  center: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }) }),
+  right: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }) }),
+  justify: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("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 = (0, import_react19.useComponentsContext)();
+  const editor = (0, import_react19.useBlockNoteEditor)();
+  const selectedBlocks = (0, import_react19.useSelectedBlocks)(editor);
+  const textAlignment = (0, import_react18.useMemo)(() => {
+    const block = selectedBlocks[0];
+    if ((0, import_core3.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 }) => (0, import_core3.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 = (0, import_react18.useCallback)(
+    (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 ((0, import_core3.checkBlockTypeHasDefaultProp)("textAlignment", block.type, editor)) {
+          editor.updateBlock(block, {
+            props: { textAlignment: newAlignment }
+          });
+        }
+      }
+    },
+    [editor, selectedBlocks]
+  );
+  const show = (0, import_react18.useMemo)(() => {
+    return !!selectedBlocks.find(
+      (block) => "textAlignment" in block.props || block.type === "table" && block.children
+    );
+  }, [selectedBlocks]);
+  if (!show || !editor.isEditable) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    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]
+    }
+  );
+};
+
+// src/components/VerticalAlignButton.tsx
+var import_react20 = require("react");
+var import_react21 = require("@blocknote/react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var icons2 = {
+  top: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { x: "2", y: "2", width: "12", height: "12", rx: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("line", { x1: "5", y1: "5", x2: "11", y2: "5" })
+  ] }),
+  middle: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { x: "2", y: "2", width: "12", height: "12", rx: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("line", { x1: "5", y1: "8", x2: "11", y2: "8" })
+  ] }),
+  bottom: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { x: "2", y: "2", width: "12", height: "12", rx: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("line", { x1: "5", y1: "11", x2: "11", y2: "11" })
+  ] })
+};
+var tooltips = {
+  top: "\uC704\uCABD \uC815\uB82C",
+  middle: "\uC138\uB85C \uAC00\uC6B4\uB370 \uC815\uB82C",
+  bottom: "\uC544\uB798\uCABD \uC815\uB82C"
+};
+function getCurrentVerticalAlignment(editor) {
+  const tiptap = editor._tiptapEditor;
+  if (!tiptap) return void 0;
+  const positions = getSelectedCellPositions(editor);
+  if (positions.length === 0) return void 0;
+  const { state } = tiptap;
+  const alignments = positions.map((pos) => {
+    const node = state.doc.nodeAt(pos);
+    return node?.attrs?.verticalAlignment || "top";
+  });
+  const first = alignments[0];
+  return alignments.every((a) => a === first) ? first : void 0;
+}
+var VerticalAlignButton = (props) => {
+  const Components = (0, import_react21.useComponentsContext)();
+  const editor = (0, import_react21.useBlockNoteEditor)();
+  const selectedBlocks = (0, import_react21.useSelectedBlocks)(editor);
+  const currentAlignment = (0, import_react20.useMemo)(() => {
+    return getCurrentVerticalAlignment(editor);
+  }, [editor, selectedBlocks]);
+  const setVerticalAlignment = (0, import_react20.useCallback)(
+    (alignment) => {
+      const tiptap = editor._tiptapEditor;
+      if (!tiptap) return;
+      const positions = getSelectedCellPositions(editor);
+      if (positions.length === 0) return;
+      editor.focus();
+      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,
+            verticalAlignment: alignment
+          });
+        }
+      }
+      tiptap.view?.dispatch(tr);
+    },
+    [editor]
+  );
+  const isInTable = (0, import_react20.useMemo)(() => {
+    return selectedBlocks.some((block) => block.type === "table");
+  }, [selectedBlocks]);
+  if (!isInTable || !editor.isEditable) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    Components.FormattingToolbar.Button,
+    {
+      className: "bn-button",
+      "data-test": `verticalAlign${props.verticalAlignment.charAt(0).toUpperCase() + props.verticalAlignment.slice(1)}`,
+      onClick: () => setVerticalAlignment(props.verticalAlignment),
+      isSelected: currentAlignment === props.verticalAlignment,
+      label: tooltips[props.verticalAlignment],
+      mainTooltip: tooltips[props.verticalAlignment],
+      icon: icons2[props.verticalAlignment]
+    }
+  );
+};
+
+// src/components/CustomFormattingToolbar.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var CustomFormattingToolbar = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react22.FormattingToolbar, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.BlockTypeSelect, {}, "blockTypeSelect"),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.TableCellMergeButton, {}, "tableCellMergeButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.FileCaptionButton, {}, "fileCaptionButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.FileReplaceButton, {}, "replaceFileButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.FileRenameButton, {}, "fileRenameButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.FileDeleteButton, {}, "fileDeleteButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.FileDownloadButton, {}, "fileDownloadButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.FilePreviewButton, {}, "filePreviewButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.BasicTextStyleButton, { basicTextStyle: "bold" }, "boldStyleButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      import_react22.BasicTextStyleButton,
+      {
+        basicTextStyle: "italic"
+      },
+      "italicStyleButton"
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      import_react22.BasicTextStyleButton,
+      {
+        basicTextStyle: "underline"
+      },
+      "underlineStyleButton"
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      import_react22.BasicTextStyleButton,
+      {
+        basicTextStyle: "strike"
+      },
+      "strikeStyleButton"
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TextAlignButtonWithVA, { textAlignment: "left" }, "textAlignLeftButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      TextAlignButtonWithVA,
+      {
+        textAlignment: "center"
+      },
+      "textAlignCenterButton"
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TextAlignButtonWithVA, { textAlignment: "right" }, "textAlignRightButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      VerticalAlignButton,
+      {
+        verticalAlignment: "top"
+      },
+      "verticalAlignTop"
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      VerticalAlignButton,
+      {
+        verticalAlignment: "middle"
+      },
+      "verticalAlignMiddle"
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      VerticalAlignButton,
+      {
+        verticalAlignment: "bottom"
+      },
+      "verticalAlignBottom"
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.ColorStyleButton, {}, "colorStyleButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.NestBlockButton, {}, "nestBlockButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.UnnestBlockButton, {}, "unnestBlockButton"),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react22.CreateLinkButton, {}, "createLinkButton")
+  ] });
+};
+
+// 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);
+}
+function buildTableVerticalAlignmentMap(doc) {
+  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 cells = [];
+        let rowIndex = 0;
+        contentNode.forEach((rowNode) => {
+          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 });
+              }
+              colIndex++;
+            });
+            rowIndex++;
+          }
+        });
+        if (cells.length > 0) {
+          result.set(blockId, cells);
+        }
+      }
+      return false;
+    }
+  });
+  return result;
+}
+function patchBlocks(blocks, tableVAMap) {
+  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)
+        };
+      }
+      return block;
+    }
+    const cells = tableVAMap.get(block.id);
+    if (!cells || cells.length === 0) {
+      return block;
+    }
+    const content = block.content;
+    if (content.type !== "tableContent" || !content.rows) {
+      return block;
+    }
+    const newRows = content.rows.map((row, rowIndex) => {
+      const newCells = row.cells.map((cell, colIndex) => {
+        const match = cells.find(
+          (c) => c.row === rowIndex && c.col === colIndex
+        );
+        if (!match) return cell;
+        if (cell && typeof cell === "object" && cell.type === "tableCell") {
+          return {
+            ...cell,
+            props: { ...cell.props, verticalAlignment: match.va }
+          };
+        }
+        return cell;
+      });
+      return { ...row, cells: newCells };
+    });
+    return {
+      ...block,
+      content: { ...content, rows: newRows }
+    };
+  });
+}
+
 // src/constants/limits.ts
 var MAX_FILE_SIZE = 10 * 1024 * 1024;
 var MAX_VIDEO_FILE_SIZE = 100 * 1024 * 1024;
@@ -2850,7 +3243,7 @@ var ALLOWED_VIDEO_EXTENSIONS = [
 ];
 
 // src/components/LumirEditor.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("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",
@@ -3075,9 +3468,9 @@ var findBlockWithLink = (blocks, targetUrl) => {
   return null;
 };
 var ConvertToPreviewButton = ({ url }) => {
-  const editor = (0, import_react19.useBlockNoteEditor)();
-  const Components = (0, import_react19.useComponentsContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  const editor = (0, import_react24.useBlockNoteEditor)();
+  const Components = (0, import_react24.useComponentsContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     Components.LinkToolbar.Button,
     {
       className: "bn-button",
@@ -3096,29 +3489,29 @@ var ConvertToPreviewButton = ({ url }) => {
           console.error("Convert to link preview failed:", err);
         }
       },
-      icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("rect", { x: "1", y: "3", width: "14", height: "10", rx: "2", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("line", { x1: "1", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "5", cy: "6.5", r: "1.5", stroke: "currentColor", strokeWidth: "1", fill: "none" })
+      icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("rect", { x: "1", y: "3", width: "14", height: "10", rx: "2", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("line", { x1: "1", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("circle", { cx: "5", cy: "6.5", r: "1.5", stroke: "currentColor", strokeWidth: "1", fill: "none" })
       ] })
     }
   );
 };
 var CustomLinkToolbar = (props) => {
-  const editor = (0, import_react19.useBlockNoteEditor)();
-  const Components = (0, import_react19.useComponentsContext)();
+  const editor = (0, import_react24.useBlockNoteEditor)();
+  const Components = (0, import_react24.useComponentsContext)();
   const hasLinkPreview = !!editor?._linkPreviewApiEndpoint;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     Components.LinkToolbar.Root,
     {
       className: "bn-toolbar bn-link-toolbar",
       onMouseEnter: props.stopHideTimer,
       onMouseLeave: props.startHideTimer,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react19.EditLinkButton, { url: props.url, text: props.text, editLink: props.editLink }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react19.OpenLinkButton, { url: props.url }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react19.DeleteLinkButton, { deleteLink: props.deleteLink }),
-        hasLinkPreview && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ConvertToPreviewButton, { url: props.url })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.EditLinkButton, { url: props.url, text: props.text, editLink: props.editLink }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.OpenLinkButton, { url: props.url }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.DeleteLinkButton, { deleteLink: props.deleteLink }),
+        hasLinkPreview && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ConvertToPreviewButton, { url: props.url })
       ]
     }
   );
@@ -3162,13 +3555,13 @@ function LumirEditor({
   onError,
   onImageDelete
 }) {
-  const [isUploading, setIsUploading] = (0, import_react18.useState)(false);
-  const [uploadProgress, setUploadProgress] = (0, import_react18.useState)(null);
-  const [errorMessage, setErrorMessage] = (0, import_react18.useState)(null);
-  const floatingMenuFileInputRef = (0, import_react18.useRef)(null);
-  const floatingMenuBlockRef = (0, import_react18.useRef)(null);
-  const floatingMenuUploadStartTimeRef = (0, import_react18.useRef)(0);
-  const handleError = (0, import_react18.useCallback)(
+  const [isUploading, setIsUploading] = (0, import_react23.useState)(false);
+  const [uploadProgress, setUploadProgress] = (0, import_react23.useState)(null);
+  const [errorMessage, setErrorMessage] = (0, import_react23.useState)(null);
+  const floatingMenuFileInputRef = (0, import_react23.useRef)(null);
+  const floatingMenuBlockRef = (0, import_react23.useRef)(null);
+  const floatingMenuUploadStartTimeRef = (0, import_react23.useRef)(0);
+  const handleError = (0, import_react23.useCallback)(
     (error) => {
       onError?.(error);
       setErrorMessage(error.getUserMessage());
@@ -3176,10 +3569,10 @@ function LumirEditor({
     },
     [onError]
   );
-  const validatedContent = (0, import_react18.useMemo)(() => {
+  const validatedContent = (0, import_react23.useMemo)(() => {
     return ContentUtils.validateContent(initialContent, initialEmptyBlocks);
   }, [initialContent, initialEmptyBlocks]);
-  const tableConfig = (0, import_react18.useMemo)(() => {
+  const tableConfig = (0, import_react23.useMemo)(() => {
     return EditorConfig.getDefaultTableConfig(tables);
   }, [
     tables?.splitCells,
@@ -3187,10 +3580,10 @@ function LumirEditor({
     tables?.cellTextColor,
     tables?.headers
   ]);
-  const headingConfig = (0, import_react18.useMemo)(() => {
+  const headingConfig = (0, import_react23.useMemo)(() => {
     return EditorConfig.getDefaultHeadingConfig(heading);
   }, [heading?.levels?.join(",") ?? ""]);
-  const disabledExtensions = (0, import_react18.useMemo)(() => {
+  const disabledExtensions = (0, import_react23.useMemo)(() => {
     return EditorConfig.getDisabledExtensions(
       disableExtensions,
       allowVideoUpload,
@@ -3198,18 +3591,18 @@ function LumirEditor({
       allowFileUpload
     );
   }, [disableExtensions, allowVideoUpload, allowAudioUpload, allowFileUpload]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     DEBUG_LOG("LumirEditor:init:disabledExtensions", "snapshot", {
       allowVideoUpload,
       hasVideoInDisabled: disabledExtensions.includes("video"),
       disabledList: disabledExtensions.slice(0, 15)
     });
   }, [allowVideoUpload, disabledExtensions]);
-  const fileNameTransformRef = (0, import_react18.useRef)(s3Upload?.fileNameTransform);
-  (0, import_react18.useEffect)(() => {
+  const fileNameTransformRef = (0, import_react23.useRef)(s3Upload?.fileNameTransform);
+  (0, import_react23.useEffect)(() => {
     fileNameTransformRef.current = s3Upload?.fileNameTransform;
   }, [s3Upload?.fileNameTransform]);
-  const memoizedS3Upload = (0, import_react18.useMemo)(() => {
+  const memoizedS3Upload = (0, import_react23.useMemo)(() => {
     if (!s3Upload) return void 0;
     return {
       apiEndpoint: s3Upload.apiEndpoint,
@@ -3238,7 +3631,7 @@ function LumirEditor({
     s3Upload?.maxRetries,
     s3Upload?.onProgress
   ]);
-  const editor = (0, import_react19.useCreateBlockNote)(
+  const editor = (0, import_react24.useCreateBlockNote)(
     {
       // HTML 미리보기 블록이 포함된 커스텀 스키마 사용
       schema,
@@ -3250,6 +3643,9 @@ function LumirEditor({
       defaultStyles,
       // 확장 비활성: 비디오/오디오/파일 제어
       disableExtensions: disabledExtensions,
+      _tiptapOptions: {
+        extensions: [VerticalAlignmentExtension]
+      },
       placeholders: placeholder ? { default: placeholder, emptyDocument: placeholder } : void 0,
       tabBehavior,
       trailingBlock,
@@ -3420,26 +3816,27 @@ function LumirEditor({
   if (editor && linkPreview?.apiEndpoint) {
     editor._linkPreviewApiEndpoint = linkPreview.apiEndpoint;
   }
-  (0, import_react18.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (editor) {
       editor.isEditable = editable;
     }
   }, [editor, editable]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!editor || !onContentChange) return;
     const handleContentChange = () => {
       const blocks = editor.topLevelBlocks;
-      onContentChange(blocks);
+      const patched = injectVerticalAlignment(blocks, editor);
+      onContentChange(patched);
     };
     return editor.onEditorContentChange(handleContentChange);
   }, [editor, onContentChange]);
-  const previousMediaUrlsRef = (0, import_react18.useRef)(/* @__PURE__ */ new Set());
-  (0, import_react18.useEffect)(() => {
+  const previousMediaUrlsRef = (0, import_react23.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react23.useEffect)(() => {
     if (!editor) return;
     const initialBlocks = editor.topLevelBlocks;
     previousMediaUrlsRef.current = extractMediaUrls(initialBlocks);
   }, [editor]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!editor || !onImageDelete) return;
     const handleMediaDeleteCheck = () => {
       const currentBlocks = editor.topLevelBlocks;
@@ -3453,7 +3850,7 @@ function LumirEditor({
     };
     return editor.onEditorContentChange(handleMediaDeleteCheck);
   }, [editor, onImageDelete]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     const el = editor?.domElement;
     if (!el) return;
     const handleDragOver = (e) => {
@@ -3584,20 +3981,20 @@ function LumirEditor({
       el.removeEventListener("drop", handleDrop, { capture: true });
     };
   }, [editor, allowVideoUpload]);
-  const computedSideMenu = (0, import_react18.useMemo)(() => {
+  const computedSideMenu = (0, import_react23.useMemo)(() => {
     return sideMenuAddButton ? sideMenu : false;
   }, [sideMenuAddButton, sideMenu]);
-  const DragHandleOnlySideMenu = (0, import_react18.useMemo)(() => {
-    return (props) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react19.SideMenu, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react19.DragHandleButton, { ...props }) });
+  const DragHandleOnlySideMenu = (0, import_react23.useMemo)(() => {
+    return (props) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.SideMenu, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.DragHandleButton, { ...props }) });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     {
       className: cn("lumirEditor", className),
       style: { position: "relative", display: "flex", flexDirection: "column" },
       children: [
-        floatingMenu && editor && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        floatingMenu && editor && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "input",
             {
               ref: floatingMenuFileInputRef,
@@ -3668,7 +4065,7 @@ function LumirEditor({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             FloatingMenu,
             {
               editor,
@@ -3700,13 +4097,13 @@ function LumirEditor({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           import_mantine.BlockNoteView,
           {
             editor,
             editable,
             theme,
-            formattingToolbar,
+            formattingToolbar: false,
             linkToolbar: false,
             sideMenu: computedSideMenu,
             slashMenu: false,
@@ -3715,14 +4112,20 @@ function LumirEditor({
             tableHandles,
             onSelectionChange,
             children: [
-              linkToolbar && (linkPreview?.apiEndpoint ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react19.LinkToolbarController, { linkToolbar: CustomLinkToolbar }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react19.LinkToolbarController, {})),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                import_react19.SuggestionMenuController,
+              formattingToolbar && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                import_react24.FormattingToolbarController,
+                {
+                  formattingToolbar: CustomFormattingToolbar
+                }
+              ),
+              linkToolbar && (linkPreview?.apiEndpoint ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.LinkToolbarController, { linkToolbar: CustomLinkToolbar }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.LinkToolbarController, {})),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                import_react24.SuggestionMenuController,
                 {
                   triggerCharacter: "/",
-                  getItems: (0, import_react18.useCallback)(
+                  getItems: (0, import_react23.useCallback)(
                     async (query) => {
-                      const items = (0, import_react19.getDefaultReactSlashMenuItems)(editor);
+                      const items = (0, import_react24.getDefaultReactSlashMenuItems)(editor);
                       const filtered = items.filter((item) => {
                         const key = (item?.key || "").toString().toLowerCase();
                         const title = (item?.title || "").toString().toLowerCase();
@@ -3764,7 +4167,7 @@ function LumirEditor({
                         },
                         aliases: ["html", "preview", "\uC6F9", "\uC6F9\uD398\uC774\uC9C0"],
                         group: "Embeds",
-                        icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+                        icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                           "svg",
                           {
                             width: "18",
@@ -3776,8 +4179,8 @@ function LumirEditor({
                             strokeLinecap: "round",
                             strokeLinejoin: "round",
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("polyline", { points: "16 18 22 12 16 6" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("polyline", { points: "8 6 2 12 8 18" })
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("polyline", { points: "16 18 22 12 16 6" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("polyline", { points: "8 6 2 12 8 18" })
                             ]
                           }
                         ),
@@ -3788,7 +4191,7 @@ function LumirEditor({
                         allItems.push({
                           title: "Link Preview",
                           onItemClick: () => {
-                            (0, import_core2.insertOrUpdateBlock)(editor, {
+                            (0, import_core4.insertOrUpdateBlock)(editor, {
                               type: "linkPreview",
                               props: { url: "" }
                             });
@@ -3802,7 +4205,7 @@ function LumirEditor({
                             "\uD504\uB9AC\uBDF0"
                           ],
                           group: "Embeds",
-                          icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+                          icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                             "svg",
                             {
                               width: "18",
@@ -3814,8 +4217,8 @@ function LumirEditor({
                               strokeLinecap: "round",
                               strokeLinejoin: "round",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("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__ */ (0, import_jsx_runtime17.jsx)("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__ */ (0, import_jsx_runtime20.jsx)("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__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
                               ]
                             }
                           ),
@@ -3834,21 +4237,21 @@ function LumirEditor({
                   )
                 }
               ),
-              !sideMenuAddButton && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react19.SideMenuController, { sideMenu: DragHandleOnlySideMenu })
+              !sideMenuAddButton && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react24.SideMenuController, { sideMenu: DragHandleOnlySideMenu })
             ]
           }
         ),
-        isUploading && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "lumirEditor-upload-overlay", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "lumirEditor-spinner" }),
-          uploadProgress !== null && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "lumirEditor-upload-progress", children: [
+        isUploading && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "lumirEditor-upload-overlay", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "lumirEditor-spinner" }),
+          uploadProgress !== null && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "lumirEditor-upload-progress", children: [
             uploadProgress,
             "%"
           ] })
         ] }),
-        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "lumirEditor-error-toast", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "lumirEditor-error-icon", children: "\u26A0\uFE0F" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "lumirEditor-error-message", children: errorMessage }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "lumirEditor-error-toast", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "lumirEditor-error-icon", children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "lumirEditor-error-message", children: errorMessage }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "button",
             {
               className: "lumirEditor-error-close",