@lumir-company/editor 0.4.11 → 0.4.13

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 
 // src/components/LumirEditor.tsx
-import { useEffect as useEffect8, useMemo, useCallback as useCallback14, useState as useState8, useRef as useRef9 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo3, useCallback as useCallback16, useState as useState8, useRef as useRef9 } from "react";
 import {
   useCreateBlockNote,
   SideMenu as BlockSideMenu,
@@ -10,8 +10,9 @@ import {
   SuggestionMenuController,
   getDefaultReactSlashMenuItems,
   LinkToolbarController,
-  useBlockNoteEditor,
-  useComponentsContext,
+  FormattingToolbarController,
+  useBlockNoteEditor as useBlockNoteEditor3,
+  useComponentsContext as useComponentsContext3,
   EditLinkButton,
   OpenLinkButton,
   DeleteLinkButton
@@ -2810,6 +2811,426 @@ var LumirEditorError = class _LumirEditorError extends Error {
   }
 };
 
+// src/extensions/VerticalAlignmentExtension.ts
+import { Extension } from "@tiptap/core";
+var VerticalAlignmentExtension = 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
+import {
+  BasicTextStyleButton,
+  BlockTypeSelect as BlockTypeSelect2,
+  ColorStyleButton,
+  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 useCallback14, useMemo } from "react";
+import {
+  useComponentsContext,
+  useBlockNoteEditor,
+  useSelectedBlocks
+} from "@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
+import { jsx as jsx17 } from "react/jsx-runtime";
+var icons = {
+  left: /* @__PURE__ */ jsx17("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx17("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" }) }),
+  center: /* @__PURE__ */ jsx17("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx17("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }) }),
+  right: /* @__PURE__ */ jsx17("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx17("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }) }),
+  justify: /* @__PURE__ */ jsx17("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx17("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 = useCallback14(
+    (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__ */ jsx17(
+    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
+import { useCallback as useCallback15, useMemo as useMemo2 } from "react";
+import {
+  useBlockNoteEditor as useBlockNoteEditor2,
+  useComponentsContext as useComponentsContext2,
+  useSelectedBlocks as useSelectedBlocks2
+} from "@blocknote/react";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+var icons2 = {
+  top: /* @__PURE__ */ jsxs11("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx18("rect", { x: "2", y: "2", width: "12", height: "12", rx: "1" }),
+    /* @__PURE__ */ jsx18("line", { x1: "5", y1: "5", x2: "11", y2: "5" })
+  ] }),
+  middle: /* @__PURE__ */ jsxs11("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx18("rect", { x: "2", y: "2", width: "12", height: "12", rx: "1" }),
+    /* @__PURE__ */ jsx18("line", { x1: "5", y1: "8", x2: "11", y2: "8" })
+  ] }),
+  bottom: /* @__PURE__ */ jsxs11("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx18("rect", { x: "2", y: "2", width: "12", height: "12", rx: "1" }),
+    /* @__PURE__ */ jsx18("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 = useComponentsContext2();
+  const editor = useBlockNoteEditor2();
+  const selectedBlocks = useSelectedBlocks2(editor);
+  const currentAlignment = useMemo2(() => {
+    return getCurrentVerticalAlignment(editor);
+  }, [editor, selectedBlocks]);
+  const setVerticalAlignment = useCallback15(
+    (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 = useMemo2(() => {
+    return selectedBlocks.some((block) => block.type === "table");
+  }, [selectedBlocks]);
+  if (!isInTable || !editor.isEditable) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx18(
+    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
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+var CustomFormattingToolbar = () => {
+  return /* @__PURE__ */ jsxs12(FormattingToolbar, { children: [
+    /* @__PURE__ */ jsx19(BlockTypeSelect2, {}, "blockTypeSelect"),
+    /* @__PURE__ */ jsx19(TableCellMergeButton, {}, "tableCellMergeButton"),
+    /* @__PURE__ */ jsx19(FileCaptionButton, {}, "fileCaptionButton"),
+    /* @__PURE__ */ jsx19(FileReplaceButton, {}, "replaceFileButton"),
+    /* @__PURE__ */ jsx19(FileRenameButton, {}, "fileRenameButton"),
+    /* @__PURE__ */ jsx19(FileDeleteButton, {}, "fileDeleteButton"),
+    /* @__PURE__ */ jsx19(FileDownloadButton, {}, "fileDownloadButton"),
+    /* @__PURE__ */ jsx19(FilePreviewButton, {}, "filePreviewButton"),
+    /* @__PURE__ */ jsx19(BasicTextStyleButton, { basicTextStyle: "bold" }, "boldStyleButton"),
+    /* @__PURE__ */ jsx19(
+      BasicTextStyleButton,
+      {
+        basicTextStyle: "italic"
+      },
+      "italicStyleButton"
+    ),
+    /* @__PURE__ */ jsx19(
+      BasicTextStyleButton,
+      {
+        basicTextStyle: "underline"
+      },
+      "underlineStyleButton"
+    ),
+    /* @__PURE__ */ jsx19(
+      BasicTextStyleButton,
+      {
+        basicTextStyle: "strike"
+      },
+      "strikeStyleButton"
+    ),
+    /* @__PURE__ */ jsx19(TextAlignButtonWithVA, { textAlignment: "left" }, "textAlignLeftButton"),
+    /* @__PURE__ */ jsx19(
+      TextAlignButtonWithVA,
+      {
+        textAlignment: "center"
+      },
+      "textAlignCenterButton"
+    ),
+    /* @__PURE__ */ jsx19(TextAlignButtonWithVA, { textAlignment: "right" }, "textAlignRightButton"),
+    /* @__PURE__ */ jsx19(
+      VerticalAlignButton,
+      {
+        verticalAlignment: "top"
+      },
+      "verticalAlignTop"
+    ),
+    /* @__PURE__ */ jsx19(
+      VerticalAlignButton,
+      {
+        verticalAlignment: "middle"
+      },
+      "verticalAlignMiddle"
+    ),
+    /* @__PURE__ */ jsx19(
+      VerticalAlignButton,
+      {
+        verticalAlignment: "bottom"
+      },
+      "verticalAlignBottom"
+    ),
+    /* @__PURE__ */ jsx19(ColorStyleButton, {}, "colorStyleButton"),
+    /* @__PURE__ */ jsx19(NestBlockButton, {}, "nestBlockButton"),
+    /* @__PURE__ */ jsx19(UnnestBlockButton, {}, "unnestBlockButton"),
+    /* @__PURE__ */ jsx19(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;
@@ -2829,7 +3250,7 @@ var ALLOWED_VIDEO_EXTENSIONS = [
 ];
 
 // src/components/LumirEditor.tsx
-import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs13 } 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",
@@ -3054,9 +3475,9 @@ var findBlockWithLink = (blocks, targetUrl) => {
   return null;
 };
 var ConvertToPreviewButton = ({ url }) => {
-  const editor = useBlockNoteEditor();
-  const Components = useComponentsContext();
-  return /* @__PURE__ */ jsx17(
+  const editor = useBlockNoteEditor3();
+  const Components = useComponentsContext3();
+  return /* @__PURE__ */ jsx20(
     Components.LinkToolbar.Button,
     {
       className: "bn-button",
@@ -3075,29 +3496,29 @@ var ConvertToPreviewButton = ({ url }) => {
           console.error("Convert to link preview failed:", err);
         }
       },
-      icon: /* @__PURE__ */ jsxs11("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ jsx17("rect", { x: "1", y: "3", width: "14", height: "10", rx: "2", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }),
-        /* @__PURE__ */ jsx17("line", { x1: "1", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ jsx17("circle", { cx: "5", cy: "6.5", r: "1.5", stroke: "currentColor", strokeWidth: "1", fill: "none" })
+      icon: /* @__PURE__ */ jsxs13("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx20("rect", { x: "1", y: "3", width: "14", height: "10", rx: "2", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }),
+        /* @__PURE__ */ jsx20("line", { x1: "1", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx20("circle", { cx: "5", cy: "6.5", r: "1.5", stroke: "currentColor", strokeWidth: "1", fill: "none" })
       ] })
     }
   );
 };
 var CustomLinkToolbar = (props) => {
-  const editor = useBlockNoteEditor();
-  const Components = useComponentsContext();
+  const editor = useBlockNoteEditor3();
+  const Components = useComponentsContext3();
   const hasLinkPreview = !!editor?._linkPreviewApiEndpoint;
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs13(
     Components.LinkToolbar.Root,
     {
       className: "bn-toolbar bn-link-toolbar",
       onMouseEnter: props.stopHideTimer,
       onMouseLeave: props.startHideTimer,
       children: [
-        /* @__PURE__ */ jsx17(EditLinkButton, { url: props.url, text: props.text, editLink: props.editLink }),
-        /* @__PURE__ */ jsx17(OpenLinkButton, { url: props.url }),
-        /* @__PURE__ */ jsx17(DeleteLinkButton, { deleteLink: props.deleteLink }),
-        hasLinkPreview && /* @__PURE__ */ jsx17(ConvertToPreviewButton, { url: props.url })
+        /* @__PURE__ */ jsx20(EditLinkButton, { url: props.url, text: props.text, editLink: props.editLink }),
+        /* @__PURE__ */ jsx20(OpenLinkButton, { url: props.url }),
+        /* @__PURE__ */ jsx20(DeleteLinkButton, { deleteLink: props.deleteLink }),
+        hasLinkPreview && /* @__PURE__ */ jsx20(ConvertToPreviewButton, { url: props.url })
       ]
     }
   );
@@ -3147,7 +3568,7 @@ function LumirEditor({
   const floatingMenuFileInputRef = useRef9(null);
   const floatingMenuBlockRef = useRef9(null);
   const floatingMenuUploadStartTimeRef = useRef9(0);
-  const handleError = useCallback14(
+  const handleError = useCallback16(
     (error) => {
       onError?.(error);
       setErrorMessage(error.getUserMessage());
@@ -3155,10 +3576,10 @@ function LumirEditor({
     },
     [onError]
   );
-  const validatedContent = useMemo(() => {
+  const validatedContent = useMemo3(() => {
     return ContentUtils.validateContent(initialContent, initialEmptyBlocks);
   }, [initialContent, initialEmptyBlocks]);
-  const tableConfig = useMemo(() => {
+  const tableConfig = useMemo3(() => {
     return EditorConfig.getDefaultTableConfig(tables);
   }, [
     tables?.splitCells,
@@ -3166,10 +3587,10 @@ function LumirEditor({
     tables?.cellTextColor,
     tables?.headers
   ]);
-  const headingConfig = useMemo(() => {
+  const headingConfig = useMemo3(() => {
     return EditorConfig.getDefaultHeadingConfig(heading);
   }, [heading?.levels?.join(",") ?? ""]);
-  const disabledExtensions = useMemo(() => {
+  const disabledExtensions = useMemo3(() => {
     return EditorConfig.getDisabledExtensions(
       disableExtensions,
       allowVideoUpload,
@@ -3188,7 +3609,7 @@ function LumirEditor({
   useEffect8(() => {
     fileNameTransformRef.current = s3Upload?.fileNameTransform;
   }, [s3Upload?.fileNameTransform]);
-  const memoizedS3Upload = useMemo(() => {
+  const memoizedS3Upload = useMemo3(() => {
     if (!s3Upload) return void 0;
     return {
       apiEndpoint: s3Upload.apiEndpoint,
@@ -3229,6 +3650,9 @@ function LumirEditor({
       defaultStyles,
       // 확장 비활성: 비디오/오디오/파일 제어
       disableExtensions: disabledExtensions,
+      _tiptapOptions: {
+        extensions: [VerticalAlignmentExtension]
+      },
       placeholders: placeholder ? { default: placeholder, emptyDocument: placeholder } : void 0,
       tabBehavior,
       trailingBlock,
@@ -3408,7 +3832,8 @@ function LumirEditor({
     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]);
@@ -3563,20 +3988,20 @@ function LumirEditor({
       el.removeEventListener("drop", handleDrop, { capture: true });
     };
   }, [editor, allowVideoUpload]);
-  const computedSideMenu = useMemo(() => {
+  const computedSideMenu = useMemo3(() => {
     return sideMenuAddButton ? sideMenu : false;
   }, [sideMenuAddButton, sideMenu]);
-  const DragHandleOnlySideMenu = useMemo(() => {
-    return (props) => /* @__PURE__ */ jsx17(BlockSideMenu, { ...props, children: /* @__PURE__ */ jsx17(DragHandleButton, { ...props }) });
+  const DragHandleOnlySideMenu = useMemo3(() => {
+    return (props) => /* @__PURE__ */ jsx20(BlockSideMenu, { ...props, children: /* @__PURE__ */ jsx20(DragHandleButton, { ...props }) });
   }, []);
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       className: cn("lumirEditor", className),
       style: { position: "relative", display: "flex", flexDirection: "column" },
       children: [
-        floatingMenu && editor && /* @__PURE__ */ jsxs11(Fragment5, { children: [
-          /* @__PURE__ */ jsx17(
+        floatingMenu && editor && /* @__PURE__ */ jsxs13(Fragment5, { children: [
+          /* @__PURE__ */ jsx20(
             "input",
             {
               ref: floatingMenuFileInputRef,
@@ -3647,7 +4072,7 @@ function LumirEditor({
               }
             }
           ),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx20(
             FloatingMenu,
             {
               editor,
@@ -3679,13 +4104,13 @@ function LumirEditor({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs11(
+        /* @__PURE__ */ jsxs13(
           BlockNoteView,
           {
             editor,
             editable,
             theme,
-            formattingToolbar,
+            formattingToolbar: false,
             linkToolbar: false,
             sideMenu: computedSideMenu,
             slashMenu: false,
@@ -3694,12 +4119,18 @@ function LumirEditor({
             tableHandles,
             onSelectionChange,
             children: [
-              linkToolbar && (linkPreview?.apiEndpoint ? /* @__PURE__ */ jsx17(LinkToolbarController, { linkToolbar: CustomLinkToolbar }) : /* @__PURE__ */ jsx17(LinkToolbarController, {})),
-              /* @__PURE__ */ jsx17(
+              formattingToolbar && /* @__PURE__ */ jsx20(
+                FormattingToolbarController,
+                {
+                  formattingToolbar: CustomFormattingToolbar
+                }
+              ),
+              linkToolbar && (linkPreview?.apiEndpoint ? /* @__PURE__ */ jsx20(LinkToolbarController, { linkToolbar: CustomLinkToolbar }) : /* @__PURE__ */ jsx20(LinkToolbarController, {})),
+              /* @__PURE__ */ jsx20(
                 SuggestionMenuController,
                 {
                   triggerCharacter: "/",
-                  getItems: useCallback14(
+                  getItems: useCallback16(
                     async (query) => {
                       const items = getDefaultReactSlashMenuItems(editor);
                       const filtered = items.filter((item) => {
@@ -3743,7 +4174,7 @@ function LumirEditor({
                         },
                         aliases: ["html", "preview", "\uC6F9", "\uC6F9\uD398\uC774\uC9C0"],
                         group: "Embeds",
-                        icon: /* @__PURE__ */ jsxs11(
+                        icon: /* @__PURE__ */ jsxs13(
                           "svg",
                           {
                             width: "18",
@@ -3755,8 +4186,8 @@ function LumirEditor({
                             strokeLinecap: "round",
                             strokeLinejoin: "round",
                             children: [
-                              /* @__PURE__ */ jsx17("polyline", { points: "16 18 22 12 16 6" }),
-                              /* @__PURE__ */ jsx17("polyline", { points: "8 6 2 12 8 18" })
+                              /* @__PURE__ */ jsx20("polyline", { points: "16 18 22 12 16 6" }),
+                              /* @__PURE__ */ jsx20("polyline", { points: "8 6 2 12 8 18" })
                             ]
                           }
                         ),
@@ -3781,7 +4212,7 @@ function LumirEditor({
                             "\uD504\uB9AC\uBDF0"
                           ],
                           group: "Embeds",
-                          icon: /* @__PURE__ */ jsxs11(
+                          icon: /* @__PURE__ */ jsxs13(
                             "svg",
                             {
                               width: "18",
@@ -3793,8 +4224,8 @@ function LumirEditor({
                               strokeLinecap: "round",
                               strokeLinejoin: "round",
                               children: [
-                                /* @__PURE__ */ jsx17("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__ */ jsx17("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__ */ jsx20("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__ */ jsx20("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
                               ]
                             }
                           ),
@@ -3813,21 +4244,21 @@ function LumirEditor({
                   )
                 }
               ),
-              !sideMenuAddButton && /* @__PURE__ */ jsx17(SideMenuController, { sideMenu: DragHandleOnlySideMenu })
+              !sideMenuAddButton && /* @__PURE__ */ jsx20(SideMenuController, { sideMenu: DragHandleOnlySideMenu })
             ]
           }
         ),
-        isUploading && /* @__PURE__ */ jsxs11("div", { className: "lumirEditor-upload-overlay", children: [
-          /* @__PURE__ */ jsx17("div", { className: "lumirEditor-spinner" }),
-          uploadProgress !== null && /* @__PURE__ */ jsxs11("span", { className: "lumirEditor-upload-progress", children: [
+        isUploading && /* @__PURE__ */ jsxs13("div", { className: "lumirEditor-upload-overlay", children: [
+          /* @__PURE__ */ jsx20("div", { className: "lumirEditor-spinner" }),
+          uploadProgress !== null && /* @__PURE__ */ jsxs13("span", { className: "lumirEditor-upload-progress", children: [
             uploadProgress,
             "%"
           ] })
         ] }),
-        errorMessage && /* @__PURE__ */ jsxs11("div", { className: "lumirEditor-error-toast", children: [
-          /* @__PURE__ */ jsx17("span", { className: "lumirEditor-error-icon", children: "\u26A0\uFE0F" }),
-          /* @__PURE__ */ jsx17("span", { className: "lumirEditor-error-message", children: errorMessage }),
-          /* @__PURE__ */ jsx17(
+        errorMessage && /* @__PURE__ */ jsxs13("div", { className: "lumirEditor-error-toast", children: [
+          /* @__PURE__ */ jsx20("span", { className: "lumirEditor-error-icon", children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ jsx20("span", { className: "lumirEditor-error-message", children: errorMessage }),
+          /* @__PURE__ */ jsx20(
             "button",
             {
               className: "lumirEditor-error-close",