在太微中使用 codemirror6 编辑器

[oeyoews]

太微新用户对codemirror 5 的配置其实不是很友好, 因为涉及到多个依赖. 如果希望使用 codemirror enhancement(cme)还要额外安装插件.

社区的codemirror6 插件现在是默认没有分包的(由于cm6的模块化, 也不太好分包), 所以仅仅需要安装一个插件即可.

在看了几天的codemirror文档和社区帖子后, 在此基础上加了一些 之前codemirror enhancement的功能.

https://oeyoews.github.io/tiddlywiki-codemirror6/#%24%3A%2Fplugins%2Foeyoews%2Ftiddlywiki-codemirror-6

[oeyoews]

tiddlywiki-codemirror-6 插件基本完善.

https://github.com/oeyoews/tiddlywiki-codemirror6

核心亮点就是自动补全 代码片段支持的很好. 加上了 codemirror-enhancement 插件的所有功能. 可以删除所有的cm5系列插件了. 开箱即用.

[linonetwo]

感觉是不错，不过没有分包的话，各种语法高亮是全装上了吗？

模块化可以参考 https://github.com/tiddly-gittly/tw-react/blob/master/src/jsx-runtime.js.meta

module-type: library 加上 title: react/jsx-runtime.js， 别的组件直接 require('react/jsx-runtime.js') 就能引用到它，不知道这个方法能不能用于 cm6 分包。

[linonetwo]

还有也多测测移动端，我觉得以后很多用户应该都是多端用户了。

[oeyoews]

codemirror6 本身就优化了移动端的使用体验.

[oeyoews]

目前没想到分包的好办法, codemirror 的各种扩展都是依赖核心包的, 比如 占用了200kb 的markdown language.

不太可能把核心包都做成lib, 这样类型提示就完全失效了. 而且也无法进行 tree shake了. 完全就没有编码体验了.

import { EditorState, EditorSelection, Extension } from '@codemirror/state';
import { openSearchPanel, closeSearchPanel } from '@codemirror/search';

import { completionStatus } from '@codemirror/autocomplete';
import { undo, redo } from '@codemirror/commands';

import { EditorView } from '@codemirror/view';

[oeyoews]

虽然ob 也用了cm6, 但是暴露出来的插件接口相比 在tiddlywiki中使用cm5而言, 差的太多了, 毕竟tiddlywiki可以完全使用改cm6的每个接口, 扩展性极强.

[oeyoews]

加了一个切换语言的配置项

[oeyoews]

@linonetwo 语法高亮就markdown 占用大, 其他的可以忽略不记, 因为markdown 的语法解析是手写的

[oflg]

赞

[oeyoews]

内置命令模式也是很方便的

[linonetwo]

我在 CPL 上评论了一下，主要是太记上安不了，还有不知道源码在哪，需要填一些 CPL 元信息才好。

[oeyoews]

cm6现在是可以正常安装的， 那个报错应该是另外一个插件notion gallery的依赖image observer没加上

批量导入没发手动加上仓库地址好像

[oeyoews]

目前维护的插件都在这里

https://github.com/oeyoews/tiddlywiki-starter-kit/tree/main/plugins/oeyoews

只有一些大插件，比如cm6这种会用moderndev额外开一个仓库写