Quill编辑器@提及功能抛出TypeError：s.domNode.getBoundingClientRect不是函数

问题概述 #

在Quill编辑器中输入@字符尝试提及用户时，控制台抛出错误：TypeError: s.domNode.getBoundingClientRect is not a function，同时用户建议列表无法正常显示。

复现情况 #

• 问题复现难度高，仅公司部分客户端在生产环境中偶现
• 问题截图显示控制台报错及提及功能失效状态

行为对比 #

• 预期行为：输入@触发提及功能后，正常显示用户建议列表
• 实际行为：控制台抛出上述错误，提及功能完全失效

环境信息 #

• 浏览器：Chrome 104.0.5112.101 (Official Build) (arm64)
• 设备：Mac
• 系统：Mac OS X 11.4 (BigSur)

可能的解决方案 #

• 版本兼容性检查：确认Quill核心库与提及插件（如quill-mention）的版本匹配，部分旧版本在特定浏览器环境下存在DOM节点处理漏洞，尝试升级至官方推荐的稳定兼容版本。
• DOM节点状态校验：该错误源于代码尝试调用不存在/已销毁DOM节点的getBoundingClientRect方法，需排查提及触发逻辑中目标节点的生命周期，确保调用方法前节点存在且未被移除。
• 增加前置判断：在调用getBoundingClientRect的代码位置添加存在性校验，示例：

if (s?.domNode && typeof s.domNode.getBoundingClientRect === 'function') {
  // 执行原有的位置计算等逻辑
}

• 排除扩展干扰：建议受影响用户禁用Chrome第三方扩展后测试，部分扩展可能篡改页面DOM或干扰Quill的正常运行。
• 清除客户端缓存：指导用户清除浏览器缓存，确保加载最新的Quill及插件代码，避免旧版本代码残留引发的兼容问题。

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