在行尾插入行小部件

Question

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

我目前的做法是使用＆＃34; LineWidgets＆＃34;来显示线下方的提示：

但这看起来很混乱。 我的目标是获得这样的东西（当然没有空白行）：

LineWidgets和Widgets都不会受到质疑，因为LineWidgets总是占用整行，而Widgets就像一个可以被用户删除的角色。 此外，窗口小部件无法垂直对齐。

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

Answer 1

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

Answer 2

如果有人在寻找同样的东西，这是我的代码，我已经黑了一起： https://github.com/hediet/PredicateLogicProofValidator/blob/6160ee7e3beb380ede35c31cfdeac55997219c77/examples/EndOfLineWidgetManager.ts
对于我的用例来说，这不是高效的，而是高效的。

它的外观如下：