@lumir-company/editor 0.4.22 → 0.4.23

package/README.md

@@ -1479,6 +1479,11 @@ const url = await uploader(imageFile);
 
 ## 변경 로그
 
+### v0.4.23 (2026-06-22)
+
+- **다중 블록(여러 문단/리스트) 선택 시 글자 크기 스테퍼 누적 안 되던 버그 수정**: BlockNote `getActiveStyles()`는 선택 끝(`$to`)의 마크만 읽어 다중 블록 선택에서 빈 값을 돌려줬고, 그 결과 스테퍼 표기가 14에 고정돼 +/− 연속 클릭이 매번 같은 값을 재적용했음. 선택 범위 전체를 스캔하는 `readSelectionFontSize` + 낙관적 갱신으로 해결(연속 증감 누적, 표기 정상 갱신)
+- **툴바 드롭다운 조작 시 선택 하이라이트가 사라지던 문제 보완**: 텍스트를 범위 선택한 뒤 글자 크기 등 툴바 드롭다운을 열면 에디터가 blur되어 브라우저 네이티브 선택 하이라이트가 사라졌음(적용 자체는 정상). blur 상태에서도 선택 범위에 인라인 데코레이션을 입히는 `InactiveSelectionExtension` 추가로 선택 영역이 계속 보이도록 함(색상 CSS 변수 `--lumir-inactive-selection`)
+
 ### v0.4.22 (2026-06-22)
 
 - **글자 크기 1px 단위 조절** *(신규)*

package/dist/index.js

@@ -55,7 +55,7 @@ module.exports = __toCommonJS(index_exports);
 var import_react36 = require("react");
 var import_react37 = require("@blocknote/react");
 var import_mantine = require("@blocknote/mantine");
-var import_core11 = require("@blocknote/core");
+var import_core12 = require("@blocknote/core");
 var import_locales = require("@blocknote/core/locales");
 
 // src/utils/cn.ts
@@ -1610,6 +1610,40 @@ function clampFontSizePx(px) {
 function toFontSizeValue(px) {
   return `${clampFontSizePx(px)}px`;
 }
+function readSelectionFontSize(editor) {
+  const ed = editor;
+  const fallback = () => {
+    try {
+      return ed?.getActiveStyles?.().fontSize || "";
+    } catch {
+      return "";
+    }
+  };
+  try {
+    const tt = ed._tiptapEditor;
+    const state = tt?.state;
+    if (!state) return fallback();
+    const sel = state.selection;
+    if (sel.empty) {
+      const marks = state.storedMarks || sel.$to.marks();
+      const m = marks?.find?.((mk) => mk.type?.name === "fontSize");
+      return m?.attrs?.stringValue || "";
+    }
+    let value = null;
+    let mixed = false;
+    state.doc.nodesBetween(sel.from, sel.to, (node) => {
+      if (mixed || !node.isText) return !mixed;
+      const m = node.marks?.find?.((mk) => mk.type?.name === "fontSize");
+      const v = m?.attrs?.stringValue || "";
+      if (value === null) value = v;
+      else if (value !== v) mixed = true;
+      return !mixed;
+    });
+    return mixed ? "" : value || "";
+  } catch {
+    return fallback();
+  }
+}
 
 // src/blocks/HtmlPreview.tsx
 var import_react6 = require("react");
@@ -2609,14 +2643,16 @@ var toLabel = (size) => size.replace(/px$/, "");
 var FontSizeButton = ({ editor }) => {
   const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
   const dropdownRef = (0, import_react13.useRef)(null);
-  const getCurrentSize = () => {
-    try {
-      return editor?.getActiveStyles?.()?.fontSize || "";
-    } catch {
-      return "";
+  const live = readSelectionFontSize(editor);
+  const [optimistic, setOptimistic] = (0, import_react13.useState)(null);
+  const lastLiveRef = (0, import_react13.useRef)(live);
+  (0, import_react13.useEffect)(() => {
+    if (live !== lastLiveRef.current) {
+      lastLiveRef.current = live;
+      setOptimistic(null);
     }
-  };
-  const currentSize = getCurrentSize();
+  }, [live]);
+  const currentSize = optimistic ?? live;
   const currentPx = parseFontSizePx(currentSize);
   const [inputValue, setInputValue] = (0, import_react13.useState)(String(currentPx));
   (0, import_react13.useEffect)(() => {
@@ -2637,8 +2673,10 @@ var FontSizeButton = ({ editor }) => {
         if (!editor) return;
         if (size === "") {
           editor.removeStyles?.({ fontSize: "" });
+          setOptimistic(null);
         } else {
           editor.addStyles?.({ fontSize: size });
+          setOptimistic(size);
         }
         setIsOpen(false);
         setTimeout(() => editor.focus?.());
@@ -2651,9 +2689,9 @@ var FontSizeButton = ({ editor }) => {
   const stepBy = (0, import_react13.useCallback)(
     (delta) => {
       try {
-        editor?.addStyles?.({
-          fontSize: toFontSizeValue(currentPx + delta)
-        });
+        const value = toFontSizeValue(currentPx + delta);
+        editor?.addStyles?.({ fontSize: value });
+        setOptimistic(value);
       } catch (err) {
         console.error("Font size step failed:", err);
       }
@@ -2664,7 +2702,9 @@ var FontSizeButton = ({ editor }) => {
     const n = parseInt(inputValue, 10);
     if (Number.isFinite(n)) {
       try {
-        editor?.addStyles?.({ fontSize: toFontSizeValue(n) });
+        const value = toFontSizeValue(n);
+        editor?.addStyles?.({ fontSize: value });
+        setOptimistic(value);
       } catch (err) {
         console.error("Font size apply failed:", err);
       }
@@ -4265,8 +4305,67 @@ var TableSelectAllExtension = import_core8.Extension.create({
   }
 });
 
-// src/blocks/columns/insertColumns.ts
+// src/extensions/InactiveSelectionExtension.ts
+var import_core9 = require("@tiptap/core");
 var import_prosemirror_state7 = require("prosemirror-state");
+var import_prosemirror_view5 = require("prosemirror-view");
+var inactiveSelectionKey = new import_prosemirror_state7.PluginKey("lumirInactiveSelection");
+var InactiveSelectionExtension = import_core9.Extension.create({
+  name: "lumirInactiveSelection",
+  addProseMirrorPlugins() {
+    return [
+      new import_prosemirror_state7.Plugin({
+        key: inactiveSelectionKey,
+        // 플러그인 state = 에디터 포커스 여부
+        state: {
+          init: () => false,
+          apply: (tr, value) => {
+            const meta = tr.getMeta(inactiveSelectionKey);
+            return typeof meta === "boolean" ? meta : value;
+          }
+        },
+        props: {
+          decorations(state) {
+            const hasFocus = inactiveSelectionKey.getState(state);
+            if (hasFocus) {
+              return null;
+            }
+            const { selection } = state;
+            if (selection.empty || !(selection instanceof import_prosemirror_state7.TextSelection)) {
+              return null;
+            }
+            return import_prosemirror_view5.DecorationSet.create(state.doc, [
+              import_prosemirror_view5.Decoration.inline(selection.from, selection.to, {
+                class: "bn-inactive-selection"
+              })
+            ]);
+          }
+        },
+        view(view) {
+          const sync = () => {
+            const has = view.hasFocus();
+            if (inactiveSelectionKey.getState(view.state) !== has) {
+              view.dispatch(view.state.tr.setMeta(inactiveSelectionKey, has));
+            }
+          };
+          view.dom.addEventListener("focus", sync);
+          view.dom.addEventListener("blur", sync);
+          const raf = requestAnimationFrame(sync);
+          return {
+            destroy() {
+              cancelAnimationFrame(raf);
+              view.dom.removeEventListener("focus", sync);
+              view.dom.removeEventListener("blur", sync);
+            }
+          };
+        }
+      })
+    ];
+  }
+});
+
+// src/blocks/columns/insertColumns.ts
+var import_prosemirror_state8 = require("prosemirror-state");
 function insertTwoColumns(editor, showDivider = false) {
   const tiptap = editor?._tiptapEditor;
   if (!tiptap) {
@@ -4298,7 +4397,7 @@ function insertTwoColumns(editor, showDivider = false) {
   try {
     let tr = state.tr.insert(insertPos, list);
     try {
-      tr = tr.setSelection(import_prosemirror_state7.TextSelection.create(tr.doc, insertPos + 4));
+      tr = tr.setSelection(import_prosemirror_state8.TextSelection.create(tr.doc, insertPos + 4));
     } catch {
     }
     tiptap.view.dispatch(tr.scrollIntoView());
@@ -4312,7 +4411,7 @@ function insertTwoColumns(editor, showDivider = false) {
 var import_react29 = require("@blocknote/react");
 
 // src/components/TextAlignButtonWithVA.tsx
-var import_core9 = require("@blocknote/core");
+var import_core10 = require("@blocknote/core");
 var import_react19 = require("react");
 var import_react20 = require("@blocknote/react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -4334,7 +4433,7 @@ var TextAlignButtonWithVA = (props) => {
   const selectedBlocks = (0, import_react20.useSelectedBlocks)(editor);
   const textAlignment = (0, import_react19.useMemo)(() => {
     const block = selectedBlocks[0];
-    if ((0, import_core9.checkBlockHasDefaultProp)("textAlignment", block, editor)) {
+    if ((0, import_core10.checkBlockHasDefaultProp)("textAlignment", block, editor)) {
       return block.props.textAlignment;
     }
     if (block.type === "table") {
@@ -4343,7 +4442,7 @@ var TextAlignButtonWithVA = (props) => {
         return;
       }
       const allCellsInTable = cellSelection.cells.map(
-        ({ row, col }) => (0, import_core9.mapTableCell)(
+        ({ row, col }) => (0, import_core10.mapTableCell)(
           block.content.rows[row].cells[col]
         ).props.textAlignment
       );
@@ -4375,7 +4474,7 @@ var TextAlignButtonWithVA = (props) => {
             }
           }
           tiptap.view?.dispatch(tr);
-        } else if ((0, import_core9.checkBlockTypeHasDefaultProp)("textAlignment", block.type, editor)) {
+        } else if ((0, import_core10.checkBlockTypeHasDefaultProp)("textAlignment", block.type, editor)) {
           editor.updateBlock(block, {
             props: { textAlignment: newAlignment }
           });
@@ -4580,11 +4679,11 @@ function FontSizeButton2() {
   const fontSizeInSchema = styleSchema.fontSize?.type === "fontSize" && styleSchema.fontSize?.propSchema === "string";
   const selectedBlocks = (0, import_react25.useSelectedBlocks)(editor);
   const [currentSize, setCurrentSize] = (0, import_react26.useState)(
-    fontSizeInSchema ? ed.getActiveStyles().fontSize || "" : ""
+    fontSizeInSchema ? readSelectionFontSize(editor) : ""
   );
   (0, import_react25.useEditorContentOrSelectionChange)(() => {
     if (fontSizeInSchema) {
-      setCurrentSize(ed.getActiveStyles().fontSize || "");
+      setCurrentSize(readSelectionFontSize(editor));
     }
   }, editor);
   const currentPx = parseFontSizePx(currentSize);
@@ -4602,7 +4701,9 @@ function FontSizeButton2() {
   );
   const stepBy = (0, import_react26.useCallback)(
     (delta) => {
-      ed.addStyles({ fontSize: toFontSizeValue(currentPx + delta) });
+      const value = toFontSizeValue(currentPx + delta);
+      ed.addStyles({ fontSize: value });
+      setCurrentSize(value);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [currentPx]
@@ -4610,7 +4711,9 @@ function FontSizeButton2() {
   const applyInput = (0, import_react26.useCallback)(() => {
     const n = parseInt(inputValue, 10);
     if (Number.isFinite(n)) {
-      ed.addStyles({ fontSize: toFontSizeValue(n) });
+      const value = toFontSizeValue(n);
+      ed.addStyles({ fontSize: value });
+      setCurrentSize(value);
     } else {
       setInputValue(String(currentPx));
     }
@@ -4724,7 +4827,7 @@ function FontSizeButton2() {
 }
 
 // src/components/color/LumirColorControls.tsx
-var import_core10 = require("@blocknote/core");
+var import_core11 = require("@blocknote/core");
 var import_react27 = require("@blocknote/react");
 var import_react28 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
@@ -4972,7 +5075,7 @@ function LumirCellColorPickerButton(props) {
   const updateColor = (color, type) => {
     const newTable = props.block.content.rows.map((row) => ({
       ...row,
-      cells: row.cells.map((cell) => (0, import_core10.mapTableCell)(cell))
+      cells: row.cells.map((cell) => (0, import_core11.mapTableCell)(cell))
     }));
     if (type === "text") {
       newTable[props.rowIndex].cells[props.colIndex].props.textColor = color;
@@ -5003,11 +5106,11 @@ function LumirCellColorPickerButton(props) {
             textTitle: "\uC140 \uAE00\uC790\uC0C9",
             backgroundTitle: "\uC140 \uBC30\uACBD",
             text: editor.settings.tables.cellTextColor ? {
-              color: (0, import_core10.isTableCell)(currentCell) ? currentCell.props.textColor : "default",
+              color: (0, import_core11.isTableCell)(currentCell) ? currentCell.props.textColor : "default",
               setColor: (color) => updateColor(color, "text")
             } : void 0,
             background: editor.settings.tables.cellBackgroundColor ? {
-              color: (0, import_core10.isTableCell)(currentCell) ? currentCell.props.backgroundColor : "default",
+              color: (0, import_core11.isTableCell)(currentCell) ? currentCell.props.backgroundColor : "default",
               setColor: (color) => updateColor(color, "background")
             } : void 0
           }
@@ -6811,7 +6914,9 @@ function LumirEditor({
           // 표 블록 정렬(좌/가운데/우) attr.
           TableAlignmentExtension,
           // 셀 포커스 시 Ctrl/Cmd+A → 표 전체 선택.
-          TableSelectAllExtension
+          TableSelectAllExtension,
+          // blur 상태(툴바 드롭다운 조작 등)에서도 텍스트 선택 하이라이트 유지.
+          InactiveSelectionExtension
         ]
       },
       placeholders: placeholder ? { default: placeholder, emptyDocument: placeholder } : void 0,
@@ -7470,7 +7575,7 @@ function LumirEditor({
                         allItems.push({
                           title: "Link Preview",
                           onItemClick: () => {
-                            (0, import_core11.insertOrUpdateBlock)(editor, {
+                            (0, import_core12.insertOrUpdateBlock)(editor, {
                               type: "linkPreview",
                               props: { url: "" }
                             });