如何在点击相邻SVG时保持BlockNote编辑器焦点，同时不破坏SVG的文本选择与事件功能？

我之前做React项目时刚好碰到过一模一样的问题——直接阻止SVG的mousedown事件确实能保住编辑器焦点，但SVG里的文本选不了、自定义点击事件也全废了，完全没法用。后来折腾了好一会儿，终于找到两个两全其美的解决方案，你可以根据自己的场景挑：

方案一：失焦后即时补救（最稳妥，完全不影响SVG功能） #

这个思路很直白：编辑器失焦的瞬间，判断是不是因为点击SVG导致的，如果是，立刻让编辑器重新抢回焦点。这样SVG的所有交互（文本选择、点击事件、右键菜单）都完全不受影响，用户几乎感知不到焦点的短暂切换。

具体实现步骤：

• 先用useRef拿到BlockNote编辑器的实例引用，方便后续调用聚焦方法：

import { BlockNoteEditor, useBlockNote } from "@blocknote/react";
import { useRef, useEffect } from "react";

function YourSplitComponent() {
  const editor = useBlockNote({});
  const editorRef = useRef(null);

  // 把编辑器实例绑定到ref上
  useEffect(() => {
    if (editor) {
      editorRef.current = editor;
    }
  }, [editor]);

• 给编辑器根元素绑定blur事件，在失焦时做判断和补救：

useEffect(() => {
    const handleEditorBlur = () => {
      // 精准定位你的SVG元素（最好给它加个类名，避免误判其他SVG）
      const mindMapSvg = document.querySelector(".mind-map-svg");
      // 检查当前获得焦点的元素是否在SVG内部
      if (mindMapSvg && mindMapSvg.contains(document.activeElement)) {
        // 立刻让编辑器重新聚焦
        editorRef.current?.focus();
      }
    };

    // 找到BlockNote的根容器，用捕获模式绑定blur事件确保优先触发
    const editorRoot = document.querySelector(".blocknote-editor");
    if (editorRoot) {
      editorRoot.addEventListener("blur", handleEditorBlur, true);
    }

    // 组件卸载时清理事件监听，避免内存泄漏
    return () => {
      if (editorRoot) {
        editorRoot.removeEventListener("blur", handleEditorBlur, true);
      }
    };
  }, [editor]);

• 最后正常渲染编辑器和SVG即可，SVG不需要加任何特殊属性：

return (
    <div className="editor-mindmap-container">
      <BlockNoteEditor editor={editor} />
      <svg className="mind-map-svg">
        {/* 你的思维导图SVG内容 */}
      </svg>
    </div>
  );
}

方案二：给SVG加临时焦点占位（更轻量，适合简单场景） #

如果你的SVG不需要处理复杂的键盘交互（比如内部没有可输入的文本框），可以给SVG加个tabindex="-1"属性，再绑定mousedown事件手动让编辑器聚焦——这样点击SVG时焦点会落在SVG本身而非body，同时不会阻止SVG的文本选择和点击事件：

const handleSvgMousedown = () => {
  editorRef.current?.focus();
};

// 渲染SVG时绑定事件和属性
<svg tabindex="-1" onMouseDown={handleSvgMousedown} className="mind-map-svg">
  {/* SVG内容 */}
</svg>

这个方法代码量更少，但要注意：如果SVG内部有需要获取焦点的交互元素（比如可编辑的文本节点），这个方法可能会干扰它们的焦点逻辑，这时候还是方案一更稳妥。

我自己项目里用的是方案一，兼容性和容错性都拉满，至今没出过问题~

内容来源于stack exchange