所见即所得编辑器

林一二2022年05月10日 22:55

调研范围

支持无法直接编辑的复杂内容块,例如公式、表格、图片、筛选器自动列表等,看这些块是如何支持编辑源码、选中复制内容、处理更新的。

调研结果

处理块级特殊语法

竞品

Overleaf、Bakoma-Tex

是左右/上下分屏的,不是所见即所得。(如果这也叫所见即所得,那 TiddlyWiki 早就是了,我还折腾啥)

Vditor

数学公式例子

单击点击块级公式后,光标将自动移动到公式上方出现的编辑区域里。在想要拖动选择公式内容时也会这样,导致无法选中复制公式内容。

列表元素拖动方案

plate 编辑器默认禁止部分元素在出现嵌套时有拖动抓手,因为这可能会导致 p > widget 这样的情况下,两层元素的两个抓手贴得很近重叠在一起。还有列表的 ol 的抓手和 li 的抓手冲突也是。 不过

plate 默认也不支持 li 的拖动,因为可能会把 li 直接拖到列表外面,丢失外层是 ol 还是 ul 的信息。

方案

  • 对于 widget 这种可能会被 p 包裹的元素,限制其只能出现在 level 0(文档根的直接子节点)
  • 对于 ol 下的第一个 li,不出现抓手,直接拖动 ol
    • 对于其它 li 显示抓手并在 drag 的时候记录其外层是 ol 还是 ul,drop 的时候包裹上新的父级

LyX

LyX – The Document Processor 是一个编辑体验类似 Word 但是能输出 LaTeX 代码的应用。

lyx截图-表格

lyx截图-公式

它在所见即所得上下了很多功夫,能类似 mathcha 用文本自动替换功能编辑所有公式内容。

左上角可以选择段落的类型,任何类型的段落都可以直接在输入后看到渲染效果,并可选地在界面底部打开一个源码查看框。

mathcha

可以很方便地编辑公式里的所有元素,而且完全不需要开启源码模式!它让所有和源码对应的元素都可以用光标插入和删除,而无法直接和源码对应的元素,则会在左上角有一个按钮,按了会弹出高级设置,将可配置项映射成下拉框等表单。

mathcha截图输入特殊字符

mathcha截图映射为表单

mathcha截图悬浮按钮

数学公式块的方便之处在于,里面大部分元素都是为了显示字符而生,所以一个界面元素常常就对应源码里的一个元素,编辑界面元素可以一对一地编辑到源码。

而如果源码里有循环、函数等等一对多生成字符的功能,就没有这么自然了。

mathcha 没法查看生成的代码。

Notion

Notion块级数学公式编辑

Notion 里唯一有源码/预览切换的快只有数学公式块,它也是劫持了整个数学公式块的点击事件,让它无法自由选中其中的字符内容,然后点击后会弹出源码编辑界面。

Notion行内数学公式选中

  • 可以选择打 $$E=mc^2 来输入数学公式,然后再打 $$ 来触发文本删除和块插入(删除段落块里的源码→创建行内数学块)
  • 直接黏贴 $$E=mc^2$$ 不会触发块转换,也无法用「turn into」菜单转换为块级公式,不过可以选中文本后在悬浮菜单里标记为行内数学块

Obsidian

Ob 是目前高级块所见即所得做得最好的应用,丰富的社区插件也让它有各种各样的高级块用例。

Obsidian截图-iFrame源码.png
Obsidian截图-iFrame展示.png
Obsidian截图-HTML源码.png
Obsidian截图-HTML展示.png
Obsidian截图-dataview源码.png
Obsidian截图-dataview展示.png

Ob 的编辑和预览在简单块(图片、嵌入)里共存,复杂块(DataView、HTML)不共存。

复杂块的编辑与预览不共存

通过光标是否在块里来判断当前块的状态是编辑还是预览,可以用方向键把光标移动到块内触发编辑。

Ob 在文本上取消了点击事件,文本、图片元素之外的区域点击了也会触发编辑模式,并把光标自动移动进去。但通过 <input /> 标签创建出的输入框点击后也会触发编辑模式。

DataView 这种插件提供的展示内容是全局拦截点击事件的,只有点击右上角的紫色代码按钮才会打开编辑模式。这个编辑按钮会遮挡部分的交互元素,不过插件设计者一般会适配这一点吧。

Code
!! 调研范围

支持无法直接编辑的复杂内容块,例如公式、表格、图片、筛选器自动列表等,看这些块是如何支持编辑源码、选中复制内容、处理更新的。

!! 调研结果

[[处理块级特殊语法]]

!! 竞品

!!! Overleaf、Bakoma-Tex

是左右/上下分屏的,不是所见即所得。(如果这也叫所见即所得,那 TiddlyWiki 早就是了,我还折腾啥)

!!! Vditor

[ext[数学公式例子|https://b3log.org/vditor/demo/advanced-math.html]]

单击点击块级公式后,光标将自动移动到公式上方出现的编辑区域里。在想要拖动选择公式内容时也会这样,导致无法选中复制公式内容。


<$list filter="[tag<currentTiddler>]-[[处理块级特殊语法]]">

!!! <$link><<currentTiddler>></$link>

 {{!!text}}

</$list>