• 主页
  • 标签
  • 归档
  • 搜索
  • Github

February 02, 2021

CodeMirror 内部代码的研究

官方提供的教程

defineMode 里有使用到的方法

nestMode 的定义和 mixMode addon 有什么区别呢?为什么不能在 markdonw Mode 里直接 nestMode texmode 而是要建议用 mixMode

addon/model/overlay.js 源代码分析

addon/model/overlay.js 里的 overlayMode 方法大概的实际效果:

两个 mode 同时分析一行,各自分析各自的,其中一个是 baseMode, 一个是 overlayMode , 如果 overlayMode 和 baseMode 在某一个 position 重叠,同时配置的 combine 参数是 false, 并且 overlayMode 的返回结果不是空的话,就会覆盖 baseMode 的结果,如果 combine 参数是 true, 就会把 overlayMode 的结果合并到 baseMode 里。

比如下面的代码, 我们在 CodeMirror 官方介绍 overlayMode 的 demo 里测试的话,就会披到结尾的 </div> 是个错误的提示。

  1. 1<div>{{</div>}}</div> 

错误的提示

错误的提示

原因就是 html 的 model 解析后就是 <div> , {{, </div>,}}</div>
而 mustache 的 model 解析后就是 <div>, {{</div>}}</div>

其中, html 的 {{, </div>, }} 和 mustache 的 {{</div>}} 是重叠的, 默认的 combine 为 false, 最终使用了 mustach 的 {{</div>}} 方案,但 html 并不会因为 mustach 的覆盖,将解析再执行一篇, html 依然认为结尾的 </div> 是有效的。

a secondary mode is run over the stream, along with the base mode, and can color specific pieces of text without interfering with the base mode

从官方的说明文档里,可以看出,这两个 mode 的运行是各自独立的,但最终结果会根据 combine 来决定是合并还是覆盖。

addon/mode/multiplex.js 源代码解析

addon/mode/multiplex.js 里的 multiplexingMode 方法大概的实际效果:

遇到特定的开始open 或者结束close 标识,在这个范围内,完全独立的使用新的 mode 解析。

overlayMode 不同的是, multiplexingMode 是互相独立的,内嵌的 mode 不受外部 mode 影响,外部的 mode 也不知道内部的 mode 做了什么。再拿上面 overlayMode 的测试代码说明。假设配置的 multiplexMode 的 open 是 {{ , close 是 }}, 这时候在 open 和 close 之间,即使有 </div> 这样的代码,但它不会影响到外层的 html 显示效果。

  1. 1<div>{{</div>}}</div> 

multiplexMode 可以包含都个 subMode

multiplexModex 实际实现的就是类似 html 里可以嵌套 javascriptcss 的效果。或者是 markdown 里类似代码块的效果。

那吗问题来了,为什么 CodeMirror 的开发人员,为什么不直接在 html 或者 markodnw mode 里使用 multiplexMode 来实现嵌套,而是要单独实现这种嵌套呢?原因可能是在 html / markdown 嵌套出来时, multiplexMode 这样的 addon 还法写出来,当写完这两套规则后,总结了经验,提炼出 multiplexMode 这样一个扩展吧;也有可能是 html / markdown 的嵌套规则比较复杂,单独写出来可能更好进行流程控制。

Tagged with 学习 | 小书匠 | codemirror | 编辑器
Time Flies, No Time for Nuts
Copyright © 2020 suziwen
Build with  Gatsbyjs  and  Sculpting theme