如何在Blocknote中通过编程设置光标位置？求助解决无效问题

问题背景 #

在Next.js项目中使用Blocknote时，尝试通过setTextCursorPosition编程定位光标到第一个区块，但方法无效，光标不显示；手动点击编辑器可正常聚焦，但编程设置始终失效。

尝试的代码示例 #

光标定位逻辑 #

const toText = useCallback(() => {
if (!editor || !editorRef.current) {
  console.log('Editor 或 editorRef 未就绪');
  return;
}

// 获取第一个区块
const firstBlock = editor.document[0];

// 尝试设置光标到第一个区块
editor.setTextCursorPosition(firstBlock);
}, [editor]);

编辑器配置 #

const editor = useCreateBlockNote({
schema: schema,
dropCursor: multiColumnDropCursor,
trailingBlock: true,
dictionary: {
  ...locales.en,
  multi_column: multiColumnLocales.en,
},
initialContent: initialValue
  ? initialValue
  : [
      {
        type: 'heading',
        content: '', // 第一个区块固定为H1
      },
      {
        type: 'paragraph',
        content: '', // 空白输入区域
      },
    ],
 });

问题表现 #

• 调用toText()后，光标未在编辑器中显示
• 手动点击编辑器可正常显示光标，编辑功能正常，但编程设置光标无效

预期行为 #

• 文本光标应移动到第一个区块的起始位置
• 执行toText()后编辑器可直接输入内容

解决方法 #

1. 先让编辑器获得焦点 #

Blocknote的光标定位方法需要编辑器处于激活（聚焦）状态才能生效，因此需要先调用editor.focus()：

const toText = useCallback(() => {
if (!editor || !editorRef.current) {
  console.log('Editor 或 editorRef 未就绪');
  return;
}

// 先聚焦编辑器
editor.focus();

// 获取第一个区块并设置光标到起始位置
const firstBlock = editor.document[0];
editor.setTextCursorPosition(firstBlock, 0);
}, [editor]);

2. 显式指定光标偏移量 #

setTextCursorPosition的第二个参数是光标在区块内的偏移位置，默认值为0，但显式传入可以避免空区块下的解析异常，确保光标定位到区块的最开始位置。

3. 处理Next.js Hydration时机问题 #

如果在组件挂载后立即执行光标定位，可能遇到Next.js的hydration未完成导致编辑器未完全初始化的问题，可通过延迟执行解决：

useEffect(() => {
  const setInitialCursor = () => {
    if (editor && editorRef.current) {
      editor.focus();
      const firstBlock = editor.document[0];
      if (firstBlock) {
        editor.setTextCursorPosition(firstBlock, 0);
      }
    }
  };

  // 延迟100ms执行，确保编辑器完全挂载
  const timer = setTimeout(setInitialCursor, 100);
  return () => clearTimeout(timer);
}, [editor]);

4. 验证区块有效性 #

在设置光标前，确保获取的区块是有效的Block对象，避免因区块不存在导致的错误：

const firstBlock = editor.document[0];
if (!firstBlock) {
  console.log('未找到第一个区块');
  return;
}

内容的提问来源于stack exchange，提问作者Ivan Priyambudi