Tiptap Vue 3中BubbleMenu扩展的shouldShow回调问题解析

问题背景

在Tiptap Vue 3的富文本编辑器实现中，开发者在使用BubbleMenu扩展时遇到了一个关键性问题：shouldShow回调函数中的editor.isActive方法返回的状态与实际编辑器状态不一致。具体表现为当用户首次点击加粗文本时，isActive('bold')返回false，而再次点击后才返回正确的true值。

问题本质

经过深入分析，这个问题源于Vue 3响应式系统与Tiptap编辑器状态更新的时序问题。在Vue 3的实现中，editor.reactiveState属性的更新存在延迟，导致shouldShow回调执行时获取的编辑器状态实际上是上一次的状态快照，而非当前最新的状态。

技术原理

Tiptap的Vue 3实现通过reactiveState属性将编辑器状态与Vue的响应式系统绑定。当用户交互触发状态变更时，Vue的响应式更新机制会异步处理这些变更。而BubbleMenu的shouldShow回调在状态变更后立即执行，此时Vue的响应式更新可能尚未完成，导致获取的状态信息滞后。

解决方案

直接访问视图状态

最有效的解决方案是绕过editor.isActive方法，直接从编辑器的视图层获取当前状态：

import { isMarkActive } from '@tiptap/core';

const shouldShowBubbleMenu = ({ editor }) => {
    return isMarkActive(editor.view.state, 'link');
};

这种方法直接访问editor.view.state，获取的是实时的编辑器状态，不受Vue响应式系统更新的影响。

通用状态检查方法

对于需要检查文本选择状态的场景，可以基于视图状态实现类似功能：

function isTextSelected({ editor }) {
  const {
    state: {
      doc,
      selection,
      selection: { empty, from, to },
    },
  } = editor.view;

  const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(selection);

  if (empty || isEmptyTextBlock || !editor.isEditable)
    return false;

  return true;
}

最佳实践建议

1. 避免在shouldShow中直接使用editor.isActive：这是问题的根源所在
2. 优先使用视图层状态检查：通过editor.view.state获取实时状态
3. 封装状态检查工具函数：提高代码复用性和可维护性
4. 注意React版本的类似问题：虽然本文讨论的是Vue 3实现，但React版本也可能存在类似时序问题

总结

Tiptap作为优秀的富文本编辑器框架，在不同前端框架中的实现会面临框架特定机制的挑战。理解框架响应式系统与编辑器状态更新的交互时序，是解决这类问题的关键。通过直接访问视图层状态，开发者可以绕过响应式系统带来的状态滞后问题，确保BubbleMenu等扩展功能的行为符合预期。