let range = new Range();

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>
<script>
  let range = new Range();
  range.setStart(p, 0);
  range.setEnd(p, 2);

  // 范围的 toString 以文本形式返回其内容（不带标签）
  alert(range); // Example: italic
  document.getSelection().addRange(range);
</script>

<p id="p">Example: <i>italic</i>  and <b>bold</b></p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.querySelector('b').firstChild, 3);
  alert(range); // ample: italic and bol
  window.getSelection().addRange(range);
</script>

// 获取光标位置
const getCursorIndex = () => {
  const selection = window.getSelection();
  return selection?.focusOffset;
};

 // 获取节点
const getRangeNode = () => {
  const selection = window.getSelection();
  return selection?.focusNode;
};

 // 获取 @ 用户
const getAtUser = () => {
  const content = getRangeNode()?.textContent || "";
  const regx = /@([^@\s]*)$/;
  const match = regx.exec(content.slice(0, getCursorIndex()));
  if (match && match.length === 2) {
    return match[1];
  }
  return undefined;
};

content.slice(0, getCursorIndex())

// 是否展示 @
const showAt = () => {
  const node = getRangeNode();
  if (!node || node.nodeType !== Node.TEXT_NODE) return false;
  const content = node.textContent || "";
  const regx = /@([^@\s]*)$/;
  const match = regx.exec(content.slice(0, getCursorIndex()));
  return match && match.length === 2;
};

const getRangeRect = () => {
  const selection = window.getSelection();
  const range = selection?.getRangeAt(0)!;
  const rect = range.getClientRects()[0];
  const LINE_HEIGHT = 30;
  return {
    x: rect.x,
    y: rect.y + LINE_HEIGHT
  };
};

const handleKeyDown = (e: any) => {
    if (showDialog) {
      if (
        e.code === "ArrowUp" ||
        e.code === "ArrowDown" ||
        e.code === "Enter"
      ) {
        e.preventDefault();
      }
    }
  };

const keyDownHandler = (e: any) => {
  if (visibleRef.current) {
    if (e.code === "Escape") {
      props.onHide();
      return;
    }
    if (e.code === "ArrowDown") {
      setIndex((oldIndex) => {
        return Math.min(oldIndex + 1, (usersRef.current?.length || 0) - 1);
      });
      return;
    }
    if (e.code === "ArrowUp") {
      setIndex((oldIndex) => Math.max(0, oldIndex - 1));
      return;
    }
    if (e.code === "Enter") {
      if (
        indexRef.current !== undefined &&
        usersRef.current?.[indexRef.current]
      ) {
        props.onPickUser(usersRef.current?.[indexRef.current]);
        setIndex(-1);
      }
      return;
    }
  }
};

const createAtButton = (user: User) => {
  const btn = document.createElement("span");
  btn.style.display = "inline-block";
  btn.dataset.user = JSON.stringify(user);
  btn.className = "at-button";
  btn.contentEditable = "false";
  btn.textContent = `@${user.name}`;
  return btn;
};

parentNode.removeChild(oldTextNode);
// 插在文本框中
if (nextNode) {
  parentNode.insertBefore(previousTextNode, nextNode);
  parentNode.insertBefore(atButton, nextNode);
  parentNode.insertBefore(nextTextNode, nextNode);
} else {
  parentNode.appendChild(previousTextNode);
  parentNode.appendChild(atButton);
  parentNode.appendChild(nextTextNode);
}

// 创建一个 Range，并调整光标
const range = new Range();
range.setStart(nextTextNode, 0);
range.setEnd(nextTextNode, 0);
const selection = window.getSelection();
selection?.removeAllRanges();
selection?.addRange(range);

// 添加 0 宽字符
const nextTextNode = new Text("\u200b" + restSlice);
// 定位光标时，移动一位
const range = new Range();
range.setStart(nextTextNode, 1);
range.setEnd(nextTextNode, 1);

const createAtButton = (user: User) => {
  const btn = document.createElement("span");
  btn.style.display = "inline-block";
  btn.dataset.user = JSON.stringify(user);
  btn.className = "at-button";
  btn.contentEditable = "false";
  btn.textContent = `@${user.name}`;
  const wrapper = document.createElement("span");
  wrapper.style.display = "inline-block";
  wrapper.contentEditable = "false";
  const spaceElem = document.createElement("span");
  spaceElem.style.whiteSpace = "pre";
  spaceElem.textContent = "\u200b";
  spaceElem.contentEditable = "false";
  const clonedSpaceElem = spaceElem.cloneNode(true);
  wrapper.appendChild(spaceElem);
  wrapper.appendChild(btn);
  wrapper.appendChild(clonedSpaceElem);
  return wrapper;
};