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

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行），使用diff计算方法仍然有效：

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

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