Cumulo Editor 启动教程

Cumulo Editor 是在 Cirru 项目下的一个实时协同语法树编辑器,
语法树编辑器说的是代码以树形结构保存, 以 DOM 的形态被编辑,
实时协同说的是多人编辑时能相互看到彼此的光标和修改的字符,
Cumulo 最终会被编译成 Clojure(Script) 代码, 有兴趣可以浏览下教程:
https://github.com/clojure-ch...
https://github.com/clojure-ch...

使用步骤

编辑器分为前端和后端两部分, 前端为网页编辑, 后端为 WebSocket 服务器,
后端可以从 npm 安装, 通过命令行启动:

npm install -g cumulo-editor
cumulo-editor # 启动编辑器

默认情况下 cumulo-editor 会尝试读取 coir.edn 文件加载源码和配置,
如果没有该文件, 进程会在后续的保存步骤中生成该文件.
cumulo-editor 一般会用到一个配置 port, 可以在 coir.edn 文件中指定,
或者直接在命令行当中指定也是可以的:

port=6001 cumulo-editor

建议参考我的 coworkflow 使用已有的配置来运行 Demo:
https://github.com/mvc-works/...

编辑器的前端部分目前编译发布在我个人的服务器上,
http://cumulo-editor.cirru.or...
Search Query 上支持两个参数, port 以及 host, 配置 WebSocket 地址,
服务器默认的端口是 6001, 认同 host 默认是 localhost,
实际上会有编辑远程的项目的需求, 就可以通过 host 指定.
当然只是尝试的话, 一般都是在 ws://localhost:6001 监听的.

快捷键

具体的代码编辑当中会用到很多快捷键, 分为两类:

• 语法树编辑器快捷键 https://github.com/Cirru/resp...

• 项目编辑器快捷键 https://github.com/Cirru/stac...

自动语法树快捷键刚开始会比较绕脑筋, 建议先熟练一下,
这个页面提供了可以尝试的 Demo http://cirru.org/ 一般说,

• 空格键用来创建叶子节点

• 回车键用来创建同类的叶子或表达式

• 空格键搭配 Shift 键可以在 leaf 内部插入空格

• 回车键搭配 Shift 键依然创建同类, 但是会在当前位置之前

• Tab 键用来增加表达式的嵌套, 搭配 Shift 键时可以减少嵌套

• 其他方向键和点击用来切换位置

迷茫的时候要想一下, 这是一颗语法树, 编辑语法树会怎么样呢,
总之编辑语法树是要忘掉编辑代码的思维定式的...
另外目前还实现了一个 Beginner Mode, 在右下角(可能会被通知挡住),
虽然没啥用, 但是据说可以帮新手看清某个误区...

其他

一般来说即便是有文档也是很难学会 Cumulo Editor 的使用的,
大概是交互设计上做得不够充分吧, 没有足够多的用户试验,
目前比较明确的就是我发在微博上的短视频了....
暂时作为探索性的玩具体验一下还算可以, 感受一下未来的编码方式.