在行尾插入行小部件

Question

我正在编写一个工具，用于验证已实时输入到CodeMirror编辑器实例中的谓词逻辑证明。 为此，我想在信息关联的行旁边显示动态生成的信息。另外，这些提示应该在一个块内对齐，但不应该包含任何代码。 不幸的是，我不知道如何破解codemirror，这样才能工作。

我目前的做法是，以显示使用“LineWidgets”线下的提示：

但是这看起来相当混乱。 我的目标是才达到这样的事情（当然没有空行）：

两个LineWidgets和窗口小部件不成为问题，因为LineWidgets总是拿一整行和小工具像它可以是一个字符被用户移除。 另外，小部件不能垂直对齐。

有人有一个想法或建议如何显示这些提示？

Answer 1

我认为最有前途的方法是在编辑器之外创建自己的绝对位置DOM节点，并使用charCoords和类似的方法来定位它们。当然，必须在必要时收听"change"事件并重新定位您的小部件，但除非您使用数千个小部件处理大型文档，否则这应该很快。 （如果你是，编写你的重定位逻辑，以便知道当前的视口，并且只定位可见的小部件。）

Answer 2

如果有人正在寻找相同的东西，这是我的代码，我一起入侵： https://github.com/hediet/PredicateLogicProofValidator/blob/6160ee7e3beb380ede35c31cfdeac55997219c77/examples/EndOfLineWidgetManager.ts
它不是那么高性能，但对我的用例足够的性能。

这是它的样子：