限制Popover组件的文本选择触发范围至父组件

我正在编写一个可实现文本转换的自定义Popover组件，需求如下：

• 用户选中文本时，Popover需出现在所选文本附近（焦点或锚点位置）
• 仅允许在渲染Popover的父组件内触发该功能

当前问题：Popover可在页面任意位置被触发，需将其触发范围约束至父组件内。

父组件代码：

import { Flex, Text } from "@chakra-ui/react";
import Popover from "../../components/popover";

function ResumeEditor() {
  return (
    <Flex bg="lightgrey" width="100%" height="100vh">
      <Text>
        this is an editorthis is an editorthis is an editorthis is an editorthis
        is an editorthis is an editorthis is an editorthis is an editorthis is
        an editorthis is an editorthis is an editorthis is an editorthis is an
        editorthis is an editorthis is an editorthis is an editorthis is an
        editorthis is an editorthis is an editorthis is an editor
      </Text>
      <Popover
        onTextSelect={() => {
          return;
        }}
      />
    </Flex>
  );
}

export default ResumeEditor;

解决方案 #

要限制Popover仅在父组件范围内触发，核心是在文本选择监听逻辑中，判断选中内容是否属于父组件的DOM元素。具体步骤如下：

1. 给父容器添加Ref并传递给Popover

修改父组件代码，给Flex容器添加ref，并将其传递给Popover组件：

import { Flex, Text, useRef } from "@chakra-ui/react";
import Popover from "../../components/popover";

function ResumeEditor() {
  const editorRef = useRef(null);

  return (
    <Flex bg="lightgrey" width="100%" height="100vh" ref={editorRef}>
      <Text>
        this is an editorthis is an editorthis is an editorthis is an editorthis
        is an editorthis is an editorthis is an editorthis is an editorthis is
        an editorthis is an editorthis is an editorthis is an editorthis is an
        editorthis is an editorthis is an editorthis is an editorthis is an
        editorthis is an editorthis is an editorthis is an editor
      </Text>
      <Popover
        editorRef={editorRef}
        onTextSelect={() => {
          return;
        }}
      />
    </Flex>
  );
}

export default ResumeEditor;

2. 在Popover组件中添加范围判断逻辑

在Popover的文本选择监听代码里，通过DOM的contains方法验证选中内容的归属：

// 假设你在Popover组件中监听了selectionchange事件
document.addEventListener('selectionchange', () => {
  const selection = window.getSelection();
  if (!selection || selection.toString().trim() === '') {
    this.hidePopover();
    return;
  }

  const editorElement = this.props.editorRef.current;
  if (!editorElement) return;

  // 检查选中范围的起始和结束节点是否都在父容器内
  const range = selection.getRangeAt(0);
  const isWithinEditor = editorElement.contains(range.startContainer) && editorElement.contains(range.endContainer);

  if (isWithinEditor) {
    // 计算位置并显示Popover
    this.showPopover(range);
  } else {
    // 不在范围内则隐藏Popover
    this.hidePopover();
  }
});

关键逻辑：利用contains方法确认选中文本的起始、结束节点都属于父组件DOM，只有满足条件才触发Popover显示，否则直接隐藏。

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