@lumir-company/editor 0.4.19 → 0.4.21

package/dist/index.js

@@ -48,7 +48,7 @@ module.exports = __toCommonJS(index_exports);
 var import_react37 = require("react");
 var import_react38 = require("@blocknote/react");
 var import_mantine = require("@blocknote/mantine");
-var import_core9 = require("@blocknote/core");
+var import_core10 = require("@blocknote/core");
 var import_locales = require("@blocknote/core/locales");
 
 // src/utils/cn.ts
@@ -1490,6 +1490,16 @@ var ColumnList = (0, import_core.createStronglyTypedTiptapNode)({
   name: "columnList",
   group: "childContainer bnBlock blockGroupChild",
   content: "column column+",
+  addAttributes() {
+    return {
+      // 블록별 중앙 세로 구분선 표시 여부(드래그핸들 메뉴에서 토글). data-divider로 렌더.
+      showDivider: {
+        default: false,
+        parseHTML: (element) => element.getAttribute("data-divider") === "true",
+        renderHTML: (attributes) => attributes.showDivider ? { "data-divider": "true" } : {}
+      }
+    };
+  },
   parseHTML() {
     return [{ tag: 'div[data-node-type="columnList"]' }];
   },
@@ -1938,7 +1948,8 @@ var HtmlPreviewBlock = (0, import_react6.createReactBlockSpec)(
 );
 var ColumnListBlock = (0, import_core3.createBlockSpecFromStronglyTypedTiptapNode)(
   ColumnList,
-  {}
+  // showDivider를 블록 prop으로 등록 → onContentChange JSON 직렬화 + 재로드 라운드트립.
+  { showDivider: { default: false } }
 );
 var ColumnBlock = (0, import_core3.createBlockSpecFromStronglyTypedTiptapNode)(Column, {});
 var schema = import_core3.BlockNoteSchema.create({
@@ -4099,9 +4110,56 @@ var TableAlignmentExtension = import_core6.Extension.create({
   }
 });
 
+// src/extensions/TableSelectAllExtension.ts
+var import_core7 = require("@tiptap/core");
+var import_prosemirror_tables3 = require("prosemirror-tables");
+var TableSelectAllExtension = import_core7.Extension.create({
+  name: "lumirTableSelectAll",
+  priority: 1e3,
+  addKeyboardShortcuts() {
+    return {
+      "Mod-a": () => {
+        const view = this.editor.view;
+        const { state } = view;
+        const sel = state.selection;
+        const $from = sel.$from;
+        let depth = -1;
+        for (let d = $from.depth; d > 0; d--) {
+          if ($from.node(d).type.name === "table") {
+            depth = d;
+            break;
+          }
+        }
+        if (depth < 0) return false;
+        const table = $from.node(depth);
+        const tableStart = $from.start(depth);
+        const map = import_prosemirror_tables3.TableMap.get(table);
+        const firstRel = map.map[0];
+        const lastRel = map.map[map.map.length - 1];
+        if (sel instanceof import_prosemirror_tables3.CellSelection) {
+          const a = sel.$anchorCell.pos - tableStart;
+          const h = sel.$headCell.pos - tableStart;
+          if (Math.min(a, h) === firstRel && Math.max(a, h) === lastRel) {
+            return false;
+          }
+        }
+        const tr = state.tr.setSelection(
+          import_prosemirror_tables3.CellSelection.create(
+            state.doc,
+            tableStart + firstRel,
+            tableStart + lastRel
+          )
+        );
+        view.dispatch(tr);
+        return true;
+      }
+    };
+  }
+});
+
 // src/blocks/columns/insertColumns.ts
 var import_prosemirror_state7 = require("prosemirror-state");
-function insertTwoColumns(editor) {
+function insertTwoColumns(editor, showDivider = false) {
   const tiptap = editor?._tiptapEditor;
   if (!tiptap) {
     return false;
@@ -4128,7 +4186,7 @@ function insertTwoColumns(editor) {
   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()]);
+  const list = columnList.create({ showDivider }, [mkColumn(), mkColumn()]);
   try {
     let tr = state.tr.insert(insertPos, list);
     try {
@@ -4146,7 +4204,7 @@ function insertTwoColumns(editor) {
 var import_react30 = require("@blocknote/react");
 
 // src/components/TextAlignButtonWithVA.tsx
-var import_core7 = require("@blocknote/core");
+var import_core8 = require("@blocknote/core");
 var import_react20 = require("react");
 var import_react21 = require("@blocknote/react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
@@ -4168,7 +4226,7 @@ var TextAlignButtonWithVA = (props) => {
   const selectedBlocks = (0, import_react21.useSelectedBlocks)(editor);
   const textAlignment = (0, import_react20.useMemo)(() => {
     const block = selectedBlocks[0];
-    if ((0, import_core7.checkBlockHasDefaultProp)("textAlignment", block, editor)) {
+    if ((0, import_core8.checkBlockHasDefaultProp)("textAlignment", block, editor)) {
       return block.props.textAlignment;
     }
     if (block.type === "table") {
@@ -4177,7 +4235,7 @@ var TextAlignButtonWithVA = (props) => {
         return;
       }
       const allCellsInTable = cellSelection.cells.map(
-        ({ row, col }) => (0, import_core7.mapTableCell)(
+        ({ row, col }) => (0, import_core8.mapTableCell)(
           block.content.rows[row].cells[col]
         ).props.textAlignment
       );
@@ -4209,7 +4267,7 @@ var TextAlignButtonWithVA = (props) => {
             }
           }
           tiptap.view?.dispatch(tr);
-        } else if ((0, import_core7.checkBlockTypeHasDefaultProp)("textAlignment", block.type, editor)) {
+        } else if ((0, import_core8.checkBlockTypeHasDefaultProp)("textAlignment", block.type, editor)) {
           editor.updateBlock(block, {
             props: { textAlignment: newAlignment }
           });
@@ -4482,7 +4540,7 @@ function FontSizeButton2() {
 }
 
 // src/components/color/LumirColorControls.tsx
-var import_core8 = require("@blocknote/core");
+var import_core9 = require("@blocknote/core");
 var import_react28 = require("@blocknote/react");
 var import_react29 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
@@ -4730,7 +4788,7 @@ function LumirCellColorPickerButton(props) {
   const updateColor = (color, type) => {
     const newTable = props.block.content.rows.map((row) => ({
       ...row,
-      cells: row.cells.map((cell) => (0, import_core8.mapTableCell)(cell))
+      cells: row.cells.map((cell) => (0, import_core9.mapTableCell)(cell))
     }));
     if (type === "text") {
       newTable[props.rowIndex].cells[props.colIndex].props.textColor = color;
@@ -4761,11 +4819,11 @@ function LumirCellColorPickerButton(props) {
             textTitle: "\uC140 \uAE00\uC790\uC0C9",
             backgroundTitle: "\uC140 \uBC30\uACBD",
             text: editor.settings.tables.cellTextColor ? {
-              color: (0, import_core8.isTableCell)(currentCell) ? currentCell.props.textColor : "default",
+              color: (0, import_core9.isTableCell)(currentCell) ? currentCell.props.textColor : "default",
               setColor: (color) => updateColor(color, "text")
             } : void 0,
             background: editor.settings.tables.cellBackgroundColor ? {
-              color: (0, import_core8.isTableCell)(currentCell) ? currentCell.props.backgroundColor : "default",
+              color: (0, import_core9.isTableCell)(currentCell) ? currentCell.props.backgroundColor : "default",
               setColor: (color) => updateColor(color, "background")
             } : void 0
           }
@@ -5654,7 +5712,7 @@ function liftFontSize(blocks) {
 }
 
 // src/utils/table-delete.ts
-var import_prosemirror_tables3 = require("prosemirror-tables");
+var import_prosemirror_tables4 = require("prosemirror-tables");
 function measureRowHeights(view, tablePos) {
   try {
     const at = view?.domAtPos?.(tablePos + 1);
@@ -5673,7 +5731,7 @@ function measureRowHeights(view, tablePos) {
 function buildDeleteColumnTr(state, tablePos, col, rowPx) {
   const table = state.doc.nodeAt(tablePos);
   if (!table || table.type.name !== "table") return null;
-  const map = import_prosemirror_tables3.TableMap.get(table);
+  const map = import_prosemirror_tables4.TableMap.get(table);
   const W = map.width;
   const H = map.height;
   if (col < 0 || col >= W || W <= 1) return null;
@@ -5779,9 +5837,9 @@ function removeFocusedRowOrColumn(editor, index, direction) {
     const rowStart = state.doc.resolve(tableInside.posAtIndex(index) + 1);
     const cellPos = state.doc.resolve(rowStart.posAtIndex(0));
     const selState = state.apply(
-      state.tr.setSelection(new import_prosemirror_tables3.CellSelection(cellPos))
+      state.tr.setSelection(new import_prosemirror_tables4.CellSelection(cellPos))
     );
-    return (0, import_prosemirror_tables3.deleteRow)(selState, (tr) => tiptap.view.dispatch(tr));
+    return (0, import_prosemirror_tables4.deleteRow)(selState, (tr) => tiptap.view.dispatch(tr));
   } catch {
     return false;
   }
@@ -5931,6 +5989,20 @@ function normalizeAlign(ta) {
   if (v === "justify") return "justify";
   return "";
 }
+function mapVerticalAlign(v) {
+  const s = (v || "").trim().toLowerCase();
+  if (s === "middle" || s === "center") return "middle";
+  if (s === "bottom") return "bottom";
+  return null;
+}
+function fontSizeToPx(raw) {
+  if (!raw) return null;
+  const m = String(raw).trim().match(/^([\d.]+)\s*(px|pt)?$/i);
+  if (!m) return null;
+  const v = parseFloat(m[1]);
+  if (!Number.isFinite(v) || v <= 0) return null;
+  return (m[2] || "px").toLowerCase() === "pt" ? v * (96 / 72) : v;
+}
 function applyCellFormatting(el, fmt) {
   if (fmt.bgRgb && !fmt.bgTransparent) {
     const v = nearestBackgroundColorValue(fmt.bgRgb);
@@ -5950,6 +6022,13 @@ function applyCellFormatting(el, fmt) {
     if (fmt.bold) inner = `<strong>${inner}</strong>`;
     el.innerHTML = inner;
   }
+  if (fmt.verticalAlign) {
+    el.setAttribute("data-vertical-alignment", fmt.verticalAlign);
+  }
+  if (fmt.fontSizePx && Math.abs(fmt.fontSizePx - 14) > 1 && el.innerHTML.trim()) {
+    const v = `${Math.round(fmt.fontSizePx)}px`;
+    el.innerHTML = `<span data-style-type="fontSize" data-value="${v}" style="font-size:${v}">` + el.innerHTML + `</span>`;
+  }
 }
 function readComputedFormat(el) {
   const cs = getComputedStyle(el);
@@ -5963,7 +6042,13 @@ function readComputedFormat(el) {
     align: normalizeAlign(cs.textAlign),
     bold: fw === "bold" || fw === "bolder" || !isNaN(fwNum) && fwNum >= 600,
     italic: (cs.fontStyle || "").toLowerCase().includes("italic"),
-    underline: decoration.toLowerCase().includes("underline")
+    underline: decoration.toLowerCase().includes("underline"),
+    fontSizePx: fontSizeToPx(cs.fontSize),
+    // ⚠️ computed vertical-align은 td 기본값이 "middle"이라 셀마다 잘못 붙는다.
+    // 명시적 inline style / valign 속성만 읽는다(기본값 노이즈 방지).
+    verticalAlign: mapVerticalAlign(
+      el.style?.verticalAlign || el.getAttribute("valign")
+    )
   };
 }
 function readInlineFormat(el) {
@@ -5979,7 +6064,11 @@ function readInlineFormat(el) {
     align: normalizeAlign(sm["text-align"] || el.getAttribute("align")),
     bold: fw === "bold" || fw === "bolder" || parseInt(fw, 10) >= 600,
     italic: (sm["font-style"] || "").toLowerCase().includes("italic"),
-    underline: decoration.toLowerCase().includes("underline")
+    underline: decoration.toLowerCase().includes("underline"),
+    fontSizePx: fontSizeToPx(sm["font-size"]),
+    verticalAlign: mapVerticalAlign(
+      sm["vertical-align"] || el.getAttribute("valign")
+    )
   };
 }
 function normalizeExcelTableHtml(html) {
@@ -5993,7 +6082,7 @@ function normalizeExcelTableHtml(html) {
       try {
         host = document.createElement("div");
         host.setAttribute("aria-hidden", "true");
-        host.style.cssText = "position:absolute;left:-99999px;top:0;width:0;height:0;overflow:hidden;opacity:0;pointer-events:none";
+        host.style.cssText = "position:absolute;left:-99999px;top:0;width:0;height:0;overflow:hidden;opacity:0;pointer-events:none;font-size:14px";
         const shadow = host.attachShadow({ mode: "open" });
         const styles = Array.from(doc.querySelectorAll("style")).map((s) => s.outerHTML).join("");
         shadow.innerHTML = styles + doc.body.innerHTML;
@@ -6016,6 +6105,100 @@ function normalizeExcelTableHtml(html) {
   }
 }
 
+// src/utils/table-paste-fit.ts
+var MIN_COL_PX = 24;
+function toPx(raw, maxWidth) {
+  if (!raw) return null;
+  const m = String(raw).trim().match(/^([\d.]+)\s*(pt|px|%)?$/i);
+  if (!m) return null;
+  const v = parseFloat(m[1]);
+  if (!Number.isFinite(v) || v <= 0) return null;
+  const unit = (m[2] || "px").toLowerCase();
+  if (unit === "pt") return v * (96 / 72);
+  if (unit === "%") return v / 100 * maxWidth;
+  return v;
+}
+function elWidthPx(el, maxWidth) {
+  const styleW = el.style?.width;
+  return toPx(styleW, maxWidth) ?? toPx(el.getAttribute("width"), maxWidth);
+}
+function readColumnWidths(table, maxWidth) {
+  const colEls = table.querySelector("colgroup")?.querySelectorAll("col");
+  if (colEls && colEls.length > 0) {
+    const widths2 = [];
+    let ok2 = true;
+    colEls.forEach((c) => {
+      const span = parseInt(c.getAttribute("span") || "1", 10) || 1;
+      const w = elWidthPx(c, maxWidth);
+      if (w == null) ok2 = false;
+      for (let i = 0; i < span; i++) widths2.push(w ?? 0);
+    });
+    if (ok2 && widths2.length > 0) return widths2;
+  }
+  const firstRow = table.querySelector("tr");
+  if (!firstRow) return null;
+  const widths = [];
+  let ok = true;
+  Array.from(firstRow.children).forEach((cell) => {
+    if (cell.tagName !== "TD" && cell.tagName !== "TH") return;
+    const span = parseInt(cell.getAttribute("colspan") || "1", 10) || 1;
+    const w = elWidthPx(cell, maxWidth);
+    if (w == null) ok = false;
+    const per = (w ?? 0) / span;
+    for (let i = 0; i < span; i++) widths.push(per);
+  });
+  return ok && widths.length > 0 ? widths : null;
+}
+function fitWidths(widths, maxWidth) {
+  const total = widths.reduce((a, b) => a + b, 0);
+  if (total <= 0) return widths;
+  const scale = total > maxWidth ? maxWidth / total : 1;
+  return widths.map((w) => Math.max(MIN_COL_PX, Math.round(w * scale)));
+}
+function computeFittedColumnWidthsPerTable(html, maxWidth) {
+  if (!html || typeof DOMParser === "undefined" || !(maxWidth > 0)) return [];
+  let doc;
+  try {
+    doc = new DOMParser().parseFromString(html, "text/html");
+  } catch {
+    return [];
+  }
+  return Array.from(doc.querySelectorAll("table")).map((t) => {
+    const widths = readColumnWidths(t, maxWidth);
+    return widths ? fitWidths(widths, maxWidth) : null;
+  });
+}
+function collectTableBlocks(blocks) {
+  const out = [];
+  const walk = (bs) => {
+    for (const b of bs) {
+      if (b?.type === "table") out.push(b);
+      if (b?.children?.length) walk(b.children);
+    }
+  };
+  walk(blocks || []);
+  return out;
+}
+function applyFittedWidthsToNewTables(editor, beforeIds, perTable) {
+  if (!editor || perTable.length === 0) return;
+  const newTables = collectTableBlocks(editor.document).filter(
+    (b) => !beforeIds.has(b.id)
+  );
+  newTables.forEach((tb, i) => {
+    const widths = perTable[i];
+    const current = tb?.content?.columnWidths;
+    if (widths && Array.isArray(current) && current.length === widths.length) {
+      try {
+        editor.updateBlock(tb, {
+          type: "table",
+          content: { ...tb.content, columnWidths: widths }
+        });
+      } catch {
+      }
+    }
+  });
+}
+
 // src/components/LumirEditor.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var DEBUG_LOG = (loc, msg, data) => {
@@ -6442,7 +6625,9 @@ function LumirEditor({
           // tableHandles prop으로 게이트(기존 grip 컨트롤러와 동일 게이트).
           RowHeightExtension.configure({ resizable: tableHandles }),
           // 표 블록 정렬(좌/가운데/우) attr.
-          TableAlignmentExtension
+          TableAlignmentExtension,
+          // 셀 포커스 시 Ctrl/Cmd+A → 표 전체 선택.
+          TableSelectAllExtension
         ]
       },
       placeholders: placeholder ? { default: placeholder, emptyDocument: placeholder } : void 0,
@@ -6548,7 +6733,14 @@ function LumirEditor({
             hasFiles: !!event?.clipboardData?.files?.length
           });
           event.preventDefault();
+          const pmDom = editor2.prosemirrorView?.dom;
+          const maxWidth = pmDom?.clientWidth ? pmDom.clientWidth - 8 : 0;
+          const fittedWidths = computeFittedColumnWidthsPerTable(pastedHtml, maxWidth);
+          const beforeTableIds = new Set(
+            collectTableBlocks(editor2.document).map((b) => b.id)
+          );
           editor2.pasteHTML(normalizeExcelTableHtml(pastedHtml));
+          applyFittedWidthsToNewTables(editor2, beforeTableIds, fittedWidths);
           return true;
         }
         const fileList = event?.clipboardData?.files ?? null;
@@ -7044,38 +7236,57 @@ function LumirEditor({
                         ),
                         subtext: "HTML \uD30C\uC77C\uC744 \uBBF8\uB9AC\uBCF4\uAE30\uB85C \uC0BD\uC785"
                       };
+                      const columnIcon = (withDivider) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+                        "svg",
+                        {
+                          width: "18",
+                          height: "18",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("rect", { x: "3", y: "4", width: "7", height: "16", rx: "1" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("rect", { x: "14", y: "4", width: "7", height: "16", rx: "1" }),
+                            withDivider && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("line", { x1: "12", y1: "3", x2: "12", y2: "21", strokeDasharray: "2 2" })
+                          ]
+                        }
+                      );
                       const columnItem = {
                         title: "2\uB2E8 \uCEEC\uB7FC",
-                        onItemClick: () => {
-                          insertTwoColumns(editor);
-                        },
+                        onItemClick: () => insertTwoColumns(editor, false),
                         aliases: ["columns", "column", "2col", "\uB2E8", "\uCEEC\uB7FC", "\uB2E4\uB2E8", "\uBD84\uD560"],
                         group: "Basic blocks",
-                        icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-                          "svg",
-                          {
-                            width: "18",
-                            height: "18",
-                            viewBox: "0 0 24 24",
-                            fill: "none",
-                            stroke: "currentColor",
-                            strokeWidth: "2",
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round",
-                            children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("rect", { x: "3", y: "4", width: "7", height: "16", rx: "1" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("rect", { x: "14", y: "4", width: "7", height: "16", rx: "1" })
-                            ]
-                          }
-                        ),
+                        icon: columnIcon(false),
                         subtext: "\uBE14\uB85D\uC744 \uC88C\uC6B0 2\uB2E8\uC73C\uB85C \uBC30\uCE58"
                       };
-                      const allItems = [...filtered, htmlPreviewItem, columnItem];
+                      const columnDividerItem = {
+                        title: "2\uB2E8 \uCEEC\uB7FC (\uAD6C\uBD84\uC120)",
+                        onItemClick: () => insertTwoColumns(editor, true),
+                        aliases: [
+                          "columns divider",
+                          "\uAD6C\uBD84\uC120",
+                          "\uCEEC\uB7FC \uAD6C\uBD84\uC120",
+                          "2\uB2E8 \uAD6C\uBD84\uC120",
+                          "divider"
+                        ],
+                        group: "Basic blocks",
+                        icon: columnIcon(true),
+                        subtext: "\uAC00\uC6B4\uB370 \uC138\uB85C \uAD6C\uBD84\uC120\uC774 \uC788\uB294 2\uB2E8 \uCEEC\uB7FC"
+                      };
+                      const allItems = [
+                        ...filtered,
+                        htmlPreviewItem,
+                        columnItem,
+                        columnDividerItem
+                      ];
                       if (linkPreview?.apiEndpoint) {
                         allItems.push({
                           title: "Link Preview",
                           onItemClick: () => {
-                            (0, import_core9.insertOrUpdateBlock)(editor, {
+                            (0, import_core10.insertOrUpdateBlock)(editor, {
                               type: "linkPreview",
                               props: { url: "" }
                             });