@lumir-company/editor 0.4.22 → 0.4.23

package/dist/index.mjs

@@ -1579,6 +1579,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
 import { useState as useState3, useRef as useRef3, useCallback as useCallback3, useEffect as useEffect3 } from "react";
@@ -2578,14 +2612,16 @@ var toLabel = (size) => size.replace(/px$/, "");
 var FontSizeButton = ({ editor }) => {
   const [isOpen, setIsOpen] = useState5(false);
   const dropdownRef = useRef5(null);
-  const getCurrentSize = () => {
-    try {
-      return editor?.getActiveStyles?.()?.fontSize || "";
-    } catch {
-      return "";
+  const live = readSelectionFontSize(editor);
+  const [optimistic, setOptimistic] = useState5(null);
+  const lastLiveRef = useRef5(live);
+  useEffect5(() => {
+    if (live !== lastLiveRef.current) {
+      lastLiveRef.current = live;
+      setOptimistic(null);
     }
-  };
-  const currentSize = getCurrentSize();
+  }, [live]);
+  const currentSize = optimistic ?? live;
   const currentPx = parseFontSizePx(currentSize);
   const [inputValue, setInputValue] = useState5(String(currentPx));
   useEffect5(() => {
@@ -2606,8 +2642,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?.());
@@ -2620,9 +2658,9 @@ var FontSizeButton = ({ editor }) => {
   const stepBy = useCallback10(
     (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);
       }
@@ -2633,7 +2671,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);
       }
@@ -4234,8 +4274,67 @@ var TableSelectAllExtension = Extension4.create({
   }
 });
 
+// src/extensions/InactiveSelectionExtension.ts
+import { Extension as Extension5 } from "@tiptap/core";
+import { Plugin as Plugin7, PluginKey as PluginKey7, TextSelection } from "prosemirror-state";
+import { Decoration as Decoration5, DecorationSet as DecorationSet5 } from "prosemirror-view";
+var inactiveSelectionKey = new PluginKey7("lumirInactiveSelection");
+var InactiveSelectionExtension = Extension5.create({
+  name: "lumirInactiveSelection",
+  addProseMirrorPlugins() {
+    return [
+      new Plugin7({
+        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 TextSelection)) {
+              return null;
+            }
+            return DecorationSet5.create(state.doc, [
+              Decoration5.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
-import { TextSelection } from "prosemirror-state";
+import { TextSelection as TextSelection2 } from "prosemirror-state";
 function insertTwoColumns(editor, showDivider = false) {
   const tiptap = editor?._tiptapEditor;
   if (!tiptap) {
@@ -4267,7 +4366,7 @@ function insertTwoColumns(editor, showDivider = false) {
   try {
     let tr = state.tr.insert(insertPos, list);
     try {
-      tr = tr.setSelection(TextSelection.create(tr.doc, insertPos + 4));
+      tr = tr.setSelection(TextSelection2.create(tr.doc, insertPos + 4));
     } catch {
     }
     tiptap.view.dispatch(tr.scrollIntoView());
@@ -4584,11 +4683,11 @@ function FontSizeButton2() {
   const fontSizeInSchema = styleSchema.fontSize?.type === "fontSize" && styleSchema.fontSize?.propSchema === "string";
   const selectedBlocks = useSelectedBlocks4(editor);
   const [currentSize, setCurrentSize] = useState9(
-    fontSizeInSchema ? ed.getActiveStyles().fontSize || "" : ""
+    fontSizeInSchema ? readSelectionFontSize(editor) : ""
   );
   useEditorContentOrSelectionChange(() => {
     if (fontSizeInSchema) {
-      setCurrentSize(ed.getActiveStyles().fontSize || "");
+      setCurrentSize(readSelectionFontSize(editor));
     }
   }, editor);
   const currentPx = parseFontSizePx(currentSize);
@@ -4606,7 +4705,9 @@ function FontSizeButton2() {
   );
   const stepBy = useCallback18(
     (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]
@@ -4614,7 +4715,9 @@ function FontSizeButton2() {
   const applyInput = useCallback18(() => {
     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));
     }
@@ -6847,7 +6950,9 @@ function LumirEditor({
           // 표 블록 정렬(좌/가운데/우) attr.
           TableAlignmentExtension,
           // 셀 포커스 시 Ctrl/Cmd+A → 표 전체 선택.
-          TableSelectAllExtension
+          TableSelectAllExtension,
+          // blur 상태(툴바 드롭다운 조작 등)에서도 텍스트 선택 하이라이트 유지.
+          InactiveSelectionExtension
         ]
       },
       placeholders: placeholder ? { default: placeholder, emptyDocument: placeholder } : void 0,