fix: 修复编辑器浮动工具栏点击第一次时无效的问题

Author: codexu

src/app/core/article/floatbar/index.tsx

@@ -6,11 +6,23 @@ import Expansion from "./expansion";
 import ReadAloud from "./read-aloud";
 import Vditor from "vditor";
 import { useEffect, useRef, useState } from "react";
+import emitter from "@/lib/emitter";
 
 export default function FloatBar({left, top, value, editor}: {left?: number, top?: number, value?: string, editor?: Vditor}) {
   const floatBarRef = useRef<HTMLDivElement>(null)
   const [adjustedLeft, setAdjustedLeft] = useState(left)
 
+  // 阻止鼠标按下事件冒泡到编辑器
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    // 通知编辑器正在点击浮动工具栏
+    emitter.emit('floatbar-mousedown')
+  }
+
+  const handleMouseUp = () => {
+    emitter.emit('floatbar-mouseup')
+  }
+
   useEffect(() => {
     if (left !== undefined && floatBarRef.current) {
       const floatBarWidth = floatBarRef.current.offsetWidth
@@ -31,6 +43,8 @@ export default function FloatBar({left, top, value, editor}: {left?: number, top
     <div
       ref={floatBarRef}
       data-float-bar="true"
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
       className={`${(left && top ) ? 'block': 'hidden'} absolute shadow rounded-lg bg-primary text-primary-foreground p-1`}
       style={{left: adjustedLeft + 'px', top: (top || 0) < 64 ? (top || 0) + 82 + 'px' : (top || 0) + 'px'}}>
       <div className="flex items-center justify-between">

src/app/core/article/md-editor.tsx

@@ -296,7 +296,12 @@ export function MdEditor() {
         editorElement?.addEventListener('click', handleClick)
 
         // 监听失焦事件，隐藏浮动工具栏并取消正在进行的补全
+        let isClickingFloatBar = false
         const handleBlur = (e: FocusEvent) => {
+          // 如果正在点击浮动工具栏，不隐藏
+          if (isClickingFloatBar) {
+            return
+          }
           // 检查失焦是否不是因为点击了浮动工具栏本身
           const floatBarElement = document.querySelector('[data-float-bar="true"]')
           if (floatBarElement && floatBarElement.contains(e.relatedTarget as Node)) {
@@ -306,6 +311,18 @@ export function MdEditor() {
           // 取消正在进行的补全
           cancelCompletion()
         }
+
+        // 监听浮动工具栏的点击事件
+        const handleFloatBarMouseDown = () => {
+          isClickingFloatBar = true
+        }
+        const handleFloatBarMouseUp = () => {
+          isClickingFloatBar = false
+        }
+
+        emitter.on('floatbar-mousedown', handleFloatBarMouseDown)
+        emitter.on('floatbar-mouseup', handleFloatBarMouseUp)
+
         editorElement?.addEventListener('blur', handleBlur, true)
 
         // 监听 beforeinput 事件，在输入前就清除补全预览
@@ -324,6 +341,8 @@ export function MdEditor() {
           editorElement?.removeEventListener('click', handleClick)
           editorElement?.removeEventListener('blur', handleBlur, true)
           editorElement?.removeEventListener('beforeinput', handleBeforeInput)
+          emitter.off('floatbar-mousedown', handleFloatBarMouseDown)
+          emitter.off('floatbar-mouseup', handleFloatBarMouseUp)
         }
       },
       input: async (value) => {