md icon indicating copy to clipboard operation
md copied to clipboard

支持快捷添加内容

Open yanglbme opened this issue 1 year ago • 3 comments

1. 想法

在编辑框内容为空时,展示 placeholder:输入 "/" 快捷添加内容

image

用户输入 / 时,唤起选项弹窗,示例:

image

  • 用户选中 "H1" 时,移除编辑框中的 /,并自动添加 '# ' 到目前光标所在位置
  • 用户选中 ”代码块“时,自动添加 ```\n\n```
  • 用户选中”公式块“时,弹出公式编辑窗

image

2. 参考

LeetCode 新版编辑器

image

yanglbme avatar Sep 11 '24 00:09 yanglbme

可以交流,讨论下

yanglbme avatar Sep 11 '24 00:09 yanglbme

该功能并不是必要的。

我们的编辑内容仅限于 Markdown,除了表格之外,绝大多数的标记写法都非常简单。

参见 Typora 与 Obsidian,它们更推崇的是使用快捷键来快速编写实现。

那么有哪类产品会使用该功能呢?涉及富文本与特殊格式编辑时。如 Tiptap 和 Notion。

为什么?因为它们扩展了更多格式,这些格式不便直接通过标记来实现,而快捷键又不够用,于是通过指令的方式,会更为方便。

而关于快捷键的问题,也有点烦,因为是一个网页,不少默认的快捷键设定与浏览器会产生冲突。

参见:

image

image image

YangFong avatar Sep 11 '24 14:09 YangFong

该方案实现可参见:https://github.com/Gk0Wk/TW5-CodeMirror-Enhanced

YangFong avatar Sep 11 '24 15:09 YangFong