如何打造一个类似dify的注释组件？

[Nickersbb]

问题描述

市面上没有找到合适的vue3组件，自己做bug太多。请问有大神有主意吗？或者说dify这个组件可以拿到吗

重现链接

无

重现步骤

无

预期行为

无

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox ...]
• X6 版本: [2.11.1 ...]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[lloydzhou]

这个看起来更像是要将label也做成一个支持”富文本“编辑和渲染的功能。
但是传统的富文本编辑器，会比较重。

内置的label实际是使用svg的text标签
不过查了一下，应该确实可以做一个小的edge-tool/node-tool 实现这里的一些字体、样式、对齐这些配置

至于实现，可以在svg外层的div配置contenteditable，使得当前这个text元素可编辑这样就可以直接通过菜单配置样式（https://codepen.io/austinh7/pen/aRYVBW）
另外就是文本如果一行中需要不同样式，应该可以使用tspan 实现，不过使用复杂样式的时候，不知道会不会和现在x6内部使用markup渲染节点的逻辑有冲突