[ospp]RichTextEditor富文本功能增强
任务清单：https://github.com/orgs/opentiny/projects/6/views/1
git clone [email protected]:opentiny/tiny-vue.git
git checkout ospp-2024/003-rich-text-editor-enhancement
pnpm i --registry=https://registry.npmmirror.com
pnpm site
访问：http://localhost:3101/，进入 RichTextEditor 组件的 demo。
验证功能点：
- 工具栏
- 表格
- 粘贴
- 斜杆菜单
- 浮动菜单（选择文本之后出现浮动菜单工具栏）
- 协同编辑
- E2E测试用例
- API/Demo文档
还需要验证之前的功能是否受到影响。
在 Vite+Vue3+TinyVue 和 Webpack(VueCLI)+Vue2+TinyVue 项目中安装和使用。
执行命令：
pnpm build:ui rich-text-editor
可以构建 rich-text-editor 组件的产物，产物地址在 packages/dist2(vue2版本) 和 packages/dist3(vue3版本) 两个目录下。
但是构建出来的 @opentiny/vue-rich-text-editor 软件包，依赖了 @opentiny/tiny-tiptap，但是 @opentiny/tiny-tiptap 又无法发包，将导致用户无法使用 @opentiny/vue-rich-text-editor。
目前 tiny-tiptap 缺失构建脚本，无法单独发包，需要优先完善 tiny-tiptap 构建脚本，走通发包流程。
验证时，可以将 @opentiny 这个 scope 替换成自己的名字，比如 @kagol/tiny-tiptap / @kagol/vue-rich-text-editor，然后发布到 npmjs，进行验证，确保发布到 npmjs 之后的包没有问题。
- 默认情况下，不应该开启选中文本之后的气泡菜单功能，参考Demo【基本用法】
- 行内代码样式不好看，应该在内容左右增加一些间距
- 代码块语言下拉框样式比较丑，需要优化
-
代码块高亮样式不好看，行间距太小，有点挤
-
工具栏按钮顺序不合理，建议参考业界富文本进行优化
-
鼠标移到工具栏按钮上，缺少文字提示
-
工具栏按钮取消超链接不需要，因为超链接再次点击就是取消超链接，功能上存在重复
-
工具栏中的下拉列表（包括标题、字号、行距等）不好看，建议参考TinyVue组件的Select进行优化
Select: https://opentiny.design/tiny-vue/zh-CN/smb-theme/components/select
-
没法对选中的内容设置字号，现在是会整行设置字号
-
文本色和背景色，缺少常见颜色，目前只有一个色盘
当前效果：
参考语雀效果：
- 上传的图片被挤压变形了
- 上传的图片初始状态不应该有边框和用于拉伸的小矩形，应该是点击图片之后才出现
-
插入图片之后，富文本输入内容变得很卡，需要优化
-
插入表格的体验不好，并且最多插入4x4的表格，不太方便，建议优化成动态变化的形式，最多可以插入10x10的表格，然后单元格的正方形缩小一点
现在的效果：
参考语雀效果：
- 表格气泡菜单位置不对
- 设置表格单元格背景色的图标不对
- 表格横向滚动后，样式不好看
- 斜杆菜单样式有点丑，并且没有分类，全部平铺在一起了，体验不好
参考语雀效果：
- 斜杆菜单搜索功能不正常，目前是需要光标移开之后再移回来才能搜索
另外就是我本来就要输入字符 /sss，但是光标移到sss后面出现暂无选项，体验不太好，搜不到就不显示下拉框就行了
-
斜杆菜单的demo没有演示 Component 可选值的用法
-
表格气泡菜单，每次点击鼠标移动光标位置，都会消失又出现，体验不好
建议表格气泡菜单放到表格上放固定不动，或者增加表格右键菜单进行操作
- 协同编辑demo，编辑器里的内容有点乱，显得很不正式，建议规范一些
比如使用 TinyVue README 的 介绍文案：https://github.com/opentiny/tiny-vue/blob/dev/README.zh-CN.md
- API文档编写不规范
优先级高：
- 补充 tiny-tiptap 构建脚本，走通 @openitny/tiny-tiptap 发包流程