React/JS实现粗体按钮取消粗体时触发TypeError问题求助

问题详情 #

• 基于React/JS实现的富文本编辑器，粗体按钮设置文本加粗功能正常，但取消已加粗文本时触发TypeError，错误来自非自定义的nr-ext-text-processor.js文件。
• 仅本地浏览器出现该错误，同事在Chrome、Firefox等浏览器测试无异常。
• 已通过console.log确认onUnwrap内所有自定义函数（removeTagFromRange、checkRange、updateTree）均执行完成，但错误仍触发。
• 尝试删除并重新下载.next文件夹，未解决问题。

相关代码 #

function onWrap(tag: WrapperOptions) {
    let currSelection = returnSelection();
    if (currSelection) {
      const newSelection = wrapSelection(node, currSelection, tag, reference);
      if (newSelection) {
        let newRange = new Range();
        newRange.setStartBefore(newSelection);
        newRange.setEndAfter(newSelection);
        let selection = window.getSelection();
        selection?.removeAllRanges();
        selection?.addRange(newRange);
      }

      checkRange();
      updateTree();
    }
  }
  
  function onUnwrap(tag: WrapperOptions) { // 触发错误的函数
    let currSelection = returnSelection();
    if (currSelection && reference.current) {
      console.log('currselection.getrangeat: ', currSelection.getRangeAt(0).toString());
      const newSelection = removeTagFromRange( // 自定义函数：移除选中范围的标签
        tag,
        currSelection.getRangeAt(0),
        reference.current
      );

      checkRange(); // 自定义函数
      updateTree(); // 自定义函数：更新HAST树
    }
  }

排查方向 #

• 浏览器插件冲突：禁用本地浏览器所有插件后测试，排查是否有文本增强、语法高亮类插件干扰文本处理逻辑。
• 浏览器版本差异：检查本地浏览器版本是否过旧或存在特定版本bug，升级到最新稳定版后重试。
• 缓存与服务工作线程：清除浏览器缓存（含Service Worker），重启开发服务器，避免旧缓存影响。
• 依赖版本同步：对比本地与测试正常环境的package-lock.json/yarn.lock，执行npm install/yarn install确保依赖版本完全一致。
• 选区重置优化：在onUnwrap的updateTree后添加选区重置逻辑，避免无效Range残留导致依赖库报错：

  // 在onUnwrap的updateTree后添加
  if (newSelection) {
    const selection = window.getSelection();
    selection?.removeAllRanges();
    const newRange = new Range();
    newRange.selectNodeContents(newSelection);
    selection?.addRange(newRange);
  }
  

• 依赖库调试：通过浏览器开发者工具定位nr-ext-text-processor.js的错误行，查看它处理的DOM节点或Range是否在removeTagFromRange后处于异常状态。

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