简介
随着Markdown 越来越流行,Markdown 编辑器也越来越多,除去所见即所得的实时预览编辑器外,通常其他Markdown 编辑器都会采用源代码和预览双栏显示的方式,就像这样:
这种方式一般会有一个同步滚动的功能,比如在编辑区域滚动时,预览区域会随着滚动,反之亦然,方便两边对照查看,如果你用过多个平台的Markdown 编辑器的话可能会发现有的平台编辑器同步滚动非常精确,比如掘金、segmentfault 、CSDN 等,而有的平台编辑器当图片比较多的情况下同步滚动两边会偏差会比较大,比如开源中国(底层使用的是开源的 editor.md)、51CTO 等,另外还有少数平台则连同步滚动的功能都没有(再见)。
不精确的同步滚动实现起来比较简单,遵循一个等式即可:
editorArea.scrollTop / (editorArea.scrollHeight - editorArea.clientHeight) = previewArea.scrollTop / (previewArea.scrollHeight - previewArea.clientHeight)
那么如何才能让同步滚动精确一点呢,我们可以参考bytemd,实现的核心就是使用unified,预知详细信息,且看下文分解。
unified简介
unified 是一个通过使用语法树来进行解析、检查、转换和序列化文本内容的接口,可以处理Markdown 、HTML 和自然语言。它是一个库,作为一个独立的执行接口,负责执行器的角色,调用其生态上相关的插件完成具体任务。同时unified 也代表一个生态,要完成前面说的文本处理任务需要配合其生态下的各种插件,截止到目前,它生态中的插件已经有三百多个!鉴于数量实在太多,很容易迷失在它庞大的生态里,可谓是劝退生态。
unified 主要有四个生态:remark、rehype、retext、redot,这四个生态下又有各自的生态,此外还包括处理语法树的一些工具、其他构建相关的工具。
unified 的执行流程说出来我们应该都比较熟悉,分为三个阶段:
1.Parse
将输入解析成语法树,mdast负责定义规范,remark 和rehype 等处理器否则创建。
2.Transform
上一步生成的语法树会被传递给各种插件,进行修改、检查、转换等工作。
3.Stringify
这一步会将处理后的语法树再重新生成文本内容。
unified 的独特之处在于允许一个处理流程中进行不同格式之间的转换,所以能满足我们本文的需求,也就是将Markdown 语法转换成HTML 语法,我们会用到其生态中的remark (解析Markdown )、rehype (解析HTml )。
具体来说就是使用remark 生态下的remark-parse插件来将输入的Markdown 文本转换成Markdown 语法树,然后使用remark-rehype桥接插件来将Markdown 语法树转换成HTML 语法树,最后使用rehype-stringify插件来将HTML 语法树生成HTML 字符串。
搭建基本结构
本文项目使用Vue3 构建。
编辑器我们使用CodeMirror,Markdown 转HTML 我们使用上一节介绍的unified,安装一下相关依赖:
npm i codemirror unified remark-parse remark-rehype rehype-stringify
那么基本结构及逻辑就很简单了,模板部分:
<template>
<div class="container">
<div class="editorArea" ref="editorArea"></div>
<div class="previewArea" ref="previewArea" v-html="htmlStr"></div>
</div>
</template>
js 部分:
import { onMounted, ref } from "vue";
import CodeMirror from "codemirror";
import "codemirror/mode/markdown/markdown.js";
import "codemirror/lib/codemirror.css";
import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
let editor = null;
const editorArea = ref(null);
const previewArea = ref(null);
const htmlStr = ref("");
const onChange = (instance) => {
unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeStringify)
.process(instance.doc.getValue())
.then(
(file) => {
htmlStr.value = String(file);
},
(error) => {
throw error;
}
);
};
onMounted(() => {
editor = CodeMirror(editorArea.value, {
mode: "markdown",
lineNumbers: true,
lineWrapping: true,
});
editor.on("change", onChange);
});
监听到编辑器文本变化,就使用unified 执行转换工作,效果如下:
实现精确的同步滚动
基本实现原理
实现精确同步滚动的核心在于我们要能把编辑区域和预览区域两边的“节点”对应上,比如当编辑区域滚动到了一个一级标题处,我们要能知道在预览区域这个一级标题节点所在的位置,反之亦然。
预览区域的节点我们很容易获取到,因为就是普通的DOM 节点,关键在于编辑区域的节点,编辑区域的节点是CodeMirror 生成的,显然无法和预览区域的节点对应上,此时,unified 不同于其他Markdown 转HTML 开源库(比如markdown-it、marked、showdown)的优点就显示出来了,一是因为它基于AST ,二是因为它是管道化,在不同插件之间流转的是AST 树,所以我们可以写个插件来获取到这个语法树数据,另外预览区域的HTML 是基于remark-rehype 插件输出的HTML 语法树生成的,所以这个HTML 语法树显然是可以和预览区域的实际节点对应上的,这样,只要我们把自定义的插件插入到remark-rehype 之后即可获取到HTML 语法树数据:
let treeData = null
const customPlugin = () => (tree, file) => {
console.log(tree);
treeData = tree;
};
unified()
.use(remarkParse)
.use(remarkRehype)
.use(customPlugin)
.use(rehypeStringify)
看一下输出结果:
接下来我们监听一下编辑区域的滚动事件,并在事件回调函数里打印一下语法树数据以及生成的预览区域的DOM 节点数据:
editor.on("scroll", onEditorScroll);
const onEditorScroll = () => {
computedPosition();
};
const computedPosition = () => {
console.log(treeData, treeData.children.length);
console.log(
previewArea.value.childNodes,
previewArea.value.childNodes.length
);
};
打印结果:
注意看控制台输出的语法树的节点和实际的DOM 节点是一一对应的。
当然仅仅对应还不够,DOM 节点能通过DOM 相关属性获取到它的高度信息,语法树的某个节点我们也需要能获取到它在编辑器中的高度信息,这个能实现依赖两点,一是语法树提供了某个节点的定位信息:
二是CodeMirror 提供了获取某一行高度的接口:
所以我们能通过某个节点的起始行获取该节点在CodeMirror 文档里的高度信息,测试一下:
const computedPosition = () => {
console.log('---------------')
treeData.children.forEach((child, index) => {
if (child.type !== "element") {
return;
}
let offsetTop = editor.heightAtLine(child.position.start.line, 'local');
console.log(child.children[0].value, offsetTop);
});
};
可以看到第一个节点的offsetTop 为80 ,为什么不是0 呢,上面CodeMirror 的文档截图里其实有说明,返回的高度是这一行的底部到文档顶部的距离,所以要获取某行顶部所在高度相当于获取上一行底部所在高度,所以将行数减1 即可:
let offsetTop = editor.heightAtLine(child.position.start.line - 1, 'local');
编辑区和预览区都能获取到节点的所在高度之后,接下来我们就可以这样做,当在编辑区域触发滚动后,先计算出两个区域的所有元素的所在高度信息,然后再获取编辑区域当前的滚动距离,求出当前具体滚动到了哪个节点内,因为两边的节点是一一对应的,所以可以求出预览区域对应节点的所在高度,最后让预览区域滚动到这个高度即可:
let editorElementList = [];
let previewElementList = [];
const computedPosition = () => {
let previewChildNodes = previewArea.value.childNodes;
editorElementList = [];
previewElementList = [];
treeData.children.forEach((child, index) => {
if (child.type !== "element") {
return;
}
let offsetTop = editor.heightAtLine(child.position.start.line - 1, "local");
editorElementList.push(offsetTop);
previewElementList.push(previewChildNodes[index].offsetTop);
});
};
const onEditorScroll = () => {
computedPosition();
let editorScrollInfo = editor.getScrollInfo();
let scrollElementIndex = null;
for (let i = 0; i < editorElementList.length; i++) {
if (editorScrollInfo.top < editorElementList[i]) {
scrollElementIndex = i - 1;
break;
}
}
if (scrollElementIndex >= 0) {
previewArea.value.scrollTop = previewElementList[scrollElementIndex];
}
};
效果如下:
修复节点内滚动不同步的问题
可以看到跨节点滚动已经比较精准了,但是如果一个节点高度比较大,那么在节点内滚动右侧是不会同步滚动的:
原因很简单,我们的同步滚动目前只精确到某个节点,只要滚动没有超出该节点,那么计算出来的scrollElementIndex 都是不变的,右侧的滚动当然就不会有变化。
解决这个问题的方法也很简单,还记得文章开头介绍非精准滚动的原理吗,这里我们也可以这么计算:编辑区域当前的滚动距离是已知的,当前滚动到的节点的顶部距离文档顶部的距离也是已知的,那么它们的差值就可以计算出来,然后使用下一个节点的offsetTop 值减去当前节点的offsetTop 值可以计算出当前节点的高度,那么这个差值和节点高度的比值也就可以计算出来:
对于预览区域的对应节点来说也是一样,它们的比值应该是相等的,所以等式如下:
(editorScrollInfo.top - editorElementList[scrollElementIndex]) /
(editorElementList[scrollElementIndex + 1] -
editorElementList[scrollElementIndex])
=
(previewArea.value.scrollTop - previewElementList[scrollElementIndex]) / (previewElementList[scrollElementIndex + 1] -
previewElementList[scrollElementIndex])
根据这个等式计算出previewArea.value.scrollTop 的值即可,最终代码:
const onEditorScroll = () => {
computedPosition();
let editorScrollInfo = editor.getScrollInfo();
let scrollElementIndex = null;
for (let i = 0; i < editorElementList.length; i++) {
if (editorScrollInfo.top < editorElementList[i]) {
scrollElementIndex = i - 1;
break;
}
}
if (scrollElementIndex >= 0) {
let ratio =
(editorScrollInfo.top - editorElementList[scrollElementIndex]) /
(editorElementList[scrollElementIndex + 1] -
editorElementList[scrollElementIndex]);
previewArea.value.scrollTop =
ratio *
(previewElementList[scrollElementIndex + 1] -
previewElementList[scrollElementIndex]) +
previewElementList[scrollElementIndex];
}
};
效果如下:
修复两边没有同时滚动到底部的问题
同步滚动已经基本上很精确了,不过还有个小问题,就是当编辑区域已经滚动到底了,而预览区域没有:
这是符合逻辑的,但是不符合情理,所以当一边滚动到底时我们让另一边也到底:
const onEditorScroll = () => {
computedPosition();
let editorScrollInfo = editor.getScrollInfo();
let scrollElementIndex = null;
if (
editorScrollInfo.top >=
editorScrollInfo.height - editorScrollInfo.clientHeight
) {
previewArea.value.scrollTop =
previewArea.value.scrollHeight - previewArea.value.clientHeight;
return;
}
if (scrollElementIndex >= 0) {
}
}
效果如下:
完善预览区滚动时编辑区同步滚动
最后让我们来完善一下在预览区域触发滚动,编辑区域跟随滚动的逻辑,监听一下预览区域的滚动事件:
<div class="previewArea" ref="previewArea" v-html="htmlStr" @scroll="onPreviewScroll"></div>
const onPreviewScroll = () => {
computedPosition();
let previewScrollTop = previewArea.value.scrollTop;
let scrollElementIndex = null;
for (let i = 0; i < previewElementList.length; i++) {
if (previewScrollTop < previewElementList[i]) {
scrollElementIndex = i - 1;
break;
}
}
if (
previewScrollTop >=
previewArea.value.scrollHeight - previewArea.value.clientHeight
) {
let editorScrollInfo = editor.getScrollInfo();
editor.scrollTo(0, editorScrollInfo.height - editorScrollInfo.clientHeight);
return;
}
if (scrollElementIndex >= 0) {
let ratio =
(previewScrollTop - previewElementList[scrollElementIndex]) /
(previewElementList[scrollElementIndex + 1] -
previewElementList[scrollElementIndex]);
let editorScrollTop =
ratio *
(editorElementList[scrollElementIndex + 1] -
editorElementList[scrollElementIndex]) +
editorElementList[scrollElementIndex];
editor.scrollTo(0, editorScrollTop);
}
};
逻辑基本是一样的,效果如下:
问题又来了,我们鼠标已经停止滚动了,但是滚动却还在继续,原因也很简单,因为两边都绑定了滚动事件,所以互相触发跟随滚动,导致死循环,解决方式也很简单,我们设置一个变量来记录当前我们是在哪边触发滚动,另一边就不执行回调逻辑:
<div
class="editorArea"
ref="editorArea"
@mouseenter="currentScrollArea = 'editor'"
></div>
<div
class="previewArea"
ref="previewArea"
v-html="htmlStr"
@scroll="onPreviewScroll"
@mouseenter="currentScrollArea = 'preview'"
></div>
let currentScrollArea = ref("");
const onEditorScroll = () => {
if (currentScrollArea.value !== "editor") {
return;
}
}
const onPreviewScroll = () => {
if (currentScrollArea.value !== "preview") {
return;
}
}
最后我们再对表格和代码块增加一下支持,以及增加上主题样式,当当当当,一个简单的Markdown 编辑器就诞生了:
总结
本文通过使用CodeMirror 和unified 实现了一个能精确同步滚动的Markdown 编辑器,思路来自于bytemd ,具体实现上有点差异,可能还有其他实现方式,欢迎留言探讨。
在线demo :https://wanglin2.github.io/markdown_editor_sync_scroll_demo/
源码仓库:https://github.com/wanglin2/markdown_editor_sync_scroll_demo
|