如何在代码镜像中计算未保存的更改

Question

我使用CodeMirror在HTML页面上显示代码。我有一个保存在BD中的代码版本，当用户在CodeMirror中对其进行编辑时，我想突出显示未保存的更改，例如Visual Studio Code：

我知道我可以使用方法：codeMirror.removeLineClass(line, 'gutter', 'my_class');添加一个边框，以表明更改是在特定行完成的。我的问题是在更改的行的计算中。我尝试使用diff和diff2html软件包，并按以下方式计算更改：

var diff = Diff.createTwoFilesPatch('some name', 'some name', cm.state.savedText, cm.getValue());
var diffInfo = Diff2Html.getJsonFromDiff(diff, options);

这种方法给了我一个差异，我可以从中得到一些变化：

但是此解决方案存在性能问题-如果文本包含40行以上，它将运行缓慢，并且CodeMirror中将包含大文本。

我还尝试使用历史记录（codeMirror.getDoc().getHistory()返回的结构）并突出显示存储在“ changes”数组中的行，但是它仅适用于添加的新行。如果用户删除行，此方法将无效。

这种变化的正确计算方法是什么？

我当时正在考虑使用change事件并跟踪特定的更改（“ + delete”， “ + input”），然后以特殊数组收集更改的行。但是此解决方案看起来很痛苦，因为在这种情况下，如果在下一次迭代中添加/删除行，则需要手动更新此数组。

有没有更简单的方法？

Answer 1

经过一些研究，我意识到即使对于大文本（〜12000行），计算差异也仍然有效：

var diff = Diff.createTwoFilesPatch('some name', 'some name', cm.state.savedText, cm.getValue());
var diffInfo = Diff2Html.getJsonFromDiff(diff, options)

大文本的差异计算大约需要30ms，小文本（大约100行）需要5-6ms。因此，目前看来，这是突出显示更新行的最简单方法。