在行尾插入行小部件

Question

我正在編寫一個工具，用於驗證已實時輸入到CodeMirror編輯器實例中的謂詞邏輯證明。 爲此，我想在信息關聯的行旁邊顯示動態生成的信息。另外，這些提示應該在一個塊內對齊，但不應該包含任何代碼。 不幸的是，我不知道如何破解codemirror，這樣才能工作。

我目前的做法是，以顯示使用「LineWidgets」線下的提示：

但是這看起來相當混亂。 我的目標是才達到這樣的事情（當然沒有空行）：

兩個LineWidgets和窗口小部件不成爲問題，因爲LineWidgets總是拿一整行和小工具像它可以是一個字符被用戶移除。 另外，小部件不能垂直對齊。

有人有一個想法或建議如何顯示這些提示？

Answer 1

我認爲最有前途的方法是在編輯器之外創建自己的絕對位置DOM節點，並使用charCoords和類似的方法來定位它們。當然，必須在必要時收聽"change"事件並重新定位您的小部件，但除非您使用數千個小部件處理大型文檔，否則這應該很快。 （如果你是，編寫你的重定位邏輯，以便知道當前的視口，並且只定位可見的小部件。）

Answer 2

如果有人正在尋找相同的東西，這是我的代碼，我一起入侵： https://github.com/hediet/PredicateLogicProofValidator/blob/6160ee7e3beb380ede35c31cfdeac55997219c77/examples/EndOfLineWidgetManager.ts
它不是那麼高性能，但對我的用例足夠的性能。

這是它的樣子：