fix: multiple trigger support in comment component at any position 🦊

[CoderSerio]

fix #1762, fix #1304, fix #1611

另外，也修改了对应的mdx文档，因为在我本地环境下，原本mdx中组合式API的写法貌似并不能够正确绑定数据（数据总是undefined），而修改为选项式API后就没有这个问题了。
所以保险起见，对mdx文档进行了修改，现在comment组件文档统一使用选项式API了。

[GreatZPP]

针对此问题修改的：
问题原因、问题定位、问题解决思路、问题解决后验证结果可以都贴一下

[CoderSerio]

问题原因

mention组件之前的代码实现是只选取了整个输入区域的第一个字符进行判断：

if(props.trigger.includes(val[0]))

解决思路

根据 #1762 中的描述，在文本输入区域的任意位置插入多个提及标识字符(默认为@)，同时多个提及部分之间用空格隔开这样的交互更为合理，于是便按照这个思路进行修改。
核心实现代码片段如下：

     const wordsWithoutSpace = val.split(' '); // 空格划分取出每个词
      const lastWordIndex = wordsWithoutSpace.length - 1; 
      const lastWord = wordsWithoutSpace[lastWordIndex]; //  取出输入的最后一个词 

如果最后一个词以@等标识字符开头，那么便可对此进行字符串内容解析，实现上述效果。

验证

在mention组件的 demo 中体现的核心功能均无误，实现了用空格隔开便能在任意位置插入多个标识，自定义标识，异步加载列表，按下enter或点击选择列表项进行补全等功能，如下图所示i：

[fu050409]

对此 PR 进行了以下修订：

1. 优化代码结构和代码逻辑，重构为单字符驱动 (096d2d9)
2. 修复了 Focus 逻辑中在新结构中无法复现的问题 (3feff35)
3. 重构了检查逻辑，修复了复杂文案中无法匹配的问题 (096d2d9)
4. 参考 Github 实现，补全后在文本后添加空格 (096d2d9)
5. 修复了空值之后仍然显示提示框的问题 (26424da)
6. 修复了单页面跳转后提示框不消失的问题 (1ff3025)

[fu050409]

@GreatZPP 同时这里建议使用原始的textarea替代d-textarea或者将 DevUI 中 Textarea 组件的<textarea>标签移动至顶层替代上层<div>标签，很多文本作用域内的功能和参数都无法从d-textarea中提取，所以我暂时无法实现以下两个重要功能：

1. 提示框跟随光标，这显然是必要的
2. 监听光标位置变化，我们的提示框应该在光标移动至其它位置的时候消失

由于无法简单的提取出原始 textarea 的 Dom 元素（因为d-textarea实质上是一个div中包裹了一个textarea，我们得到的是这个div元素），我们完全无法实现判断光标位置，因为我们无法直接得到原始textarea的样式（Feature 1 的解决方案是创建一个样式一致的镜像元素），同样的，也无法获得当前光标选中的起始位置和结束位置，因此也无法判断光标状态。

[fu050409]

@CoderSerio 翻阅了一下 issue 列表，此 PR 同时解决了 #1304，可以将此 issue 也加入到 Fix 清单中

[fu050409]

@CoderSerio 刚才翻阅 issue 的时候，发现此 PR 还解决了 #1611 ，可以把 #1611 也加入 Fix 清单😅😅

[CoderSerio]

@CoderSerio 刚才翻阅 issue 的时候，发现此 PR 还解决了 #1611 ，可以把 #1611 也加入 Fix 清单😅😅

get，已经加上了 😂