Cumulo Editor 是在 Cirru 项目下的一个实时协同语法树编辑器,
语法树编辑器说的是代码以树形结构保存, 以 DOM 的形态被编辑,实时协同说的是多人编辑时能相互看到彼此的光标和修改的字符,Cumulo 最终会被编译成 Clojure(Script) 代码, 有兴趣可以浏览下教程:使用步骤
编辑器分为前端和后端两部分, 前端为网页编辑, 后端为 WebSocket 服务器,
后端可以从 npm 安装, 通过命令行启动:npm install -g cumulo-editorcumulo-editor # 启动编辑器
默认情况下 cumulo-editor 会尝试读取 coir.edn 文件加载源码和配置,
port, 可以在 coir.edn 文件中指定,或者直接在命令行当中指定也是可以的: port=6001 cumulo-editor
建议参考我的 coworkflow 使用已有的配置来运行 Demo:
编辑器的前端部分目前编译发布在我个人的服务器上,
Search Query 上支持两个参数,port 以及 host, 配置 WebSocket 地址,服务器默认的端口是 6001, 认同 host 默认是 localhost,实际上会有编辑远程的项目的需求, 就可以通过 host 指定.当然只是尝试的话, 一般都是在 ws://localhost:6001 监听的. 快捷键
具体的代码编辑当中会用到很多快捷键, 分为两类:
语法树编辑器快捷键
项目编辑器快捷键
自动语法树快捷键刚开始会比较绕脑筋, 建议先熟练一下,
这个页面提供了可以尝试的 Demo 一般说,空格键用来创建叶子节点
回车键用来创建同类的叶子或表达式
空格键搭配 Shift 键可以在 leaf 内部插入空格
回车键搭配 Shift 键依然创建同类, 但是会在当前位置之前
Tab 键用来增加表达式的嵌套, 搭配 Shift 键时可以减少嵌套
其他方向键和点击用来切换位置
迷茫的时候要想一下, 这是一颗语法树, 编辑语法树会怎么样呢,
总之编辑语法树是要忘掉编辑代码的思维定式的...另外目前还实现了一个 Beginner Mode, 在右下角(可能会被通知挡住),虽然没啥用, 但是据说可以帮新手看清某个误区...其他
一般来说即便是有文档也是很难学会 Cumulo Editor 的使用的,
大概是交互设计上做得不够充分吧, 没有足够多的用户试验,目前比较明确的就是我发在微博上的短视频了....暂时作为探索性的玩具体验一下还算可以, 感受一下未来的编码方式.