Obsidian的块级编辑扩展、及通用型渲染插件的在线开发测试框架

挺乱的,反正就是总结一些最近在折腾的玩意

可编辑块、研究目的与当前实践

文本说明我基本写在链接里了,但为了方便论坛有需要的搜索,挑几行重点在这复制一份:

研究目的: 主要解决 Markdown 容器的编辑、渲染体验(特别在嵌套环境下)

这里有两种不同的做法:

比较

  • CodeMirror2
    • 逻辑比较像 Obsidian 实时模式的编辑体验。
    • 特点:没有 “块” 和 “容器” 的概念,解析结果为多个字符组的数组
    • 缺点:在引用块/列表嵌套其他内容的场景时,编辑困难、渲染难看
      (例如obsidian的引用块去嵌套代码块时、代码块完全无法被渲染)
  • CodeMirror
    • 逻辑更像 Typora 的编辑体验
    • 特点:有 “块” 和 “容器” 的概念,在一个块内,存在一个单独的编辑空间。
      这使得在块内的用户编辑体验不会下降! 即便是块再去嵌套其他块

为了以上的研究目的,我弄了一个基于CodeMirror的块型编辑扩展的可行性测试与在线试用Demo: EditableCodeblock App
(仅供实验可行性)

(开发起步 & 测试可行性的阶段,bug究极无敌多)

Obsidian中的尝试

网页版稍丑陋,至于在 Obsidian 中的尝试试验,我之前弄了个录屏,效果会比上面的还要好一些:

AnyBlock的实时编辑体验 · any-block/any-block · Discussion #80 · GitHub 该链接底部的视频

测试平台

在研究这东西这一过程中,还有一个副产物:在线版App。

后期可能包装一下。没有obsidian依赖,但markdown-it和cm依赖是有的,供喜欢开发高通用插件的开发者们尝试。主要针对的是渲染型的插件

像我之前开发的anyblock、view chat qq、nodeflow、以及现在在研究的 editable codeblock/block。四个插件都有在用。如:AnyBlock App (近期追加了一个codemirror引擎渲染的标签页,之前是只有markdown-it渲染结果,不过这里未完善,无法实时编辑,还是推荐看前面那个测试Demo。这里只是为了后期重构可实时编辑的anyblock做准备)

优点:

  • 快速实验插件效果。与obsidian依赖无关的部分不需要每次去编译 → 移动 → 重启插件 (哪怕有插件可以简化一点这个流程)。在该平台下可以做到每次修改后,快速在网页上试验,像开发网页般顺滑
  • 提供在线版给用户实验,可以可以作为插件文档的一个有效补充
2 个赞