I am currently trying to customize a text suggestion feature where text collected from a server is injected into the editor. I am using the widgetTypes to do this (declaring a div in toDOM()), similar to the checkbox example under decorations.
I am encountering a strange issue when trying to await / .then a promise from the server when doing this.
const inlineSuggestionKeymap = Prec.highest(
keymap.of([
{
key: 'F6',
run: (view) => {
const doc = view.viewState.state.doc;
const result = generateSuggestion()
res.then((val) => {
sugText.current = val
view.dispatch({
effects: InlineSuggestionEffect.of({ suggestion: val, doc: doc }),
})
})
.catch((err) => console.log(err))
return true
}
},
])
)
class InlineSuggestionWidget extends WidgetType {
constructor(suggestion) {
super();
this.suggestion = suggestion;
}
toDOM() {
const div = document.createElement('span');
div.style.opacity = '0.4';
div.className = 'cm-inline-suggestion';
div.textContent = this.suggestion;
console.log('creating widget', div)
return div;
}
destroy(element) {
console.log('destroying widget', element)
return true
}
}
If I set the variable result to a string, everything works as I want it to. The string value is placed in the span, which is then seen in the editor.
However, when I use a promise to retrieve the suggested text, the behaviour changes. The span is still created with the resultant text, but it is immediately destroyed in the destroy call, and the suggested text will kind of flicker on the screen.
I have not been able to figure out why / what is causing this, and wondering if there is any advice on how to solve this.
So far I have ensured that the FieldState is not being changed at any point, so I do not think the issue could be that the value could be in the issue being lost and thus the element being destroyed.
The code for the plugin is as follows:
const renderInlineSuggestionPlugin = ViewPlugin.fromClass(
class Plugin {
constructor() {
// Empty decorations
this.decorations = Decoration.none;
}
update(update) {
const suggestionText = update.state.field(InlineSuggestionState)?.suggestion;
if (!suggestionText) {
console.log('not suggestionText', suggestionText)
this.decorations = Decoration.none;
return;
}
let text = suggestionText
this.decorations = inlineSuggestionDecoration(update.view, text );
}
},
{
decorations: (v) => v.decorations
}
);
function inlineSuggestionDecoration(view, prefix) {
const pos = view.state.selection.main.head;
const widgets = [];
const w = Decoration.widget({
widget: new InlineSuggestionWidget(prefix),
side: 1,
});
widgets.push(w.range(pos));
return Decoration.set(widgets);
}
Thanks!