Hello
It appears that DecorationSet remapping is broken when using y-sync.
decorationSet.map(transaction.mapping, transaction.doc);
With YJS we have to create a new decoration set every time - This is expensive… See below for the example… Any thoughts, ideas or potential solutions would be great.
import { Plugin, PluginKey, EditorState, Transaction } from 'prosemirror-state';
import { DecorationSet, Decoration } from 'prosemirror-view';
// This doesnt work:
export const efficient = new Plugin({
key: new PluginKey('sample'),
state: {
init(_: unknown, editorState: EditorState): any {
return DecorationSet.create(editorState.doc, [
Decoration.inline(10, 20, {
style: 'color: red;',
}),
]);
},
apply(transaction: Transaction, decorationSet: DecorationSet): any {
return decorationSet.map(transaction.mapping, transaction.doc);
},
},
props: {
decorations(state): any {
return this.getState(state);
},
},
});
// Only a new DecorationSet each time works.
// In our case we are creating a new decorationSet on every key press - This is expensive.
export const inefficient = new Plugin({
key: new PluginKey('sample'),
state: {
init(_: unknown, editorState: EditorState): any {
return DecorationSet.create(editorState.doc, [
Decoration.inline(10, 20, {
style: 'color: red;',
}),
]);
},
apply(transaction: Transaction): any {
return DecorationSet.create(transaction.doc, [
Decoration.inline(10, 20, {
style: 'color: red;',
}),
]);
},
},
props: {
decorations(state): any {
return this.getState(state);
},
},
});