如何在TipTap v2中判断是否选中整个段落而非部分文本？

要判断用户是否选中了整个段落，核心是确认选中范围刚好覆盖目标段落的全部内容。你之前的函数问题在于state.doc.nodeAt(from)获取的是光标位置的文本节点而非段落节点，所以无法正确判断。

以下是正确的实现函数：

const isWholeParagraphSelected = (editor: Editor) => {
  if (!editor) return false;
  const { state } = editor;
  const { from, to } = state.selection;
  
  // 先排除无文本选中的情况
  if (from === to) return false;
  
  // 获取选中起始位置的解析信息，用于定位父段落节点
  const resolvedFrom = state.doc.resolve(from);
  // 向上获取包裹文本的段落父节点
  const paragraphNode = resolvedFrom.node(-1);
  const paragraphPos = resolvedFrom.before(-1); // 段落节点的起始位置
  const paragraphEndPos = paragraphPos + paragraphNode.nodeSize; // 段落节点的结束位置
  
  // 判断选中范围是否完全覆盖整个段落
  return from === paragraphPos && to === paragraphEndPos;
};

关键逻辑说明： #

• state.doc.resolve(from)会返回解析后的位置对象，通过它能便捷定位到父层级的段落节点。
• resolvedFrom.node(-1)表示向上取一级父节点，也就是当前选中文本所在的段落节点。
• paragraphPos是段落在文档中的起始坐标，paragraphEndPos是段落的结束坐标（起始坐标加上节点总尺寸）。
• 最后对比选中范围的起止坐标与段落的起止坐标，即可确认是否选中了整个段落。

结合你已有的isTextSelection函数，就能区分两种交互场景：

• 当isWholeParagraphSelected(editor)为true时，显示标题设置菜单；
• 当isTextSelection(editor)为true但isWholeParagraphSelected(editor)为false时，显示加粗、斜体等文本样式菜单。

内容的提问来源于stack exchange，提问作者Dave Sag