Hi I’m pretty new to the ProseMirror ecosystem and I’m a little stuck building a custom editor.
I have 2 custom Plugins, one that colors open and close parenthesis characters using Inline Decorators so that I have the same color for each opening and closing pair, and another custom Plugin that colors certain strings and uppercase them when the string is detected in the Prosemirror Document.
So far, each individual plugin work as expected. But when I add them together, I get some weird error when setting the Decorations of the Plugin that’s decorations were applied later.
caught TypeError: Cannot read properties of undefined (reading 'localsInner')
at DecorationGroup.locals (
I’m using DecorationSet.create()
to apply the list of inline decorations that I’ve created.
For example. If I already have a matched string from my first Plugin and then I add a parenthesis character. I create my inline decoration for parentheses like so
const { updatedOpenParenthesis, updatedCloseParenthesis } = updatedParenthesisLists;
const newDecorations = [
...updatedOpenParenthesis,
...updatedCloseParenthesis
].map(paren => {
const { pos, depth, color, type, id, matchingPairId } = paren;
const from = pos.start;
const to = pos.end;
const decoration = ProseMirrorDecoration.inline(from, to, {
style: `color: ${color}; font-weight: bold;`,
'data-parenthesis-id': id,
'data-parenthesis-type': type,
'data-parenthesis-depth': depth.toString(),
...(matchingPairId
? { 'data-parenthesis-matching-pair-id': matchingPairId } : {})
});
return decoration;
});
I then store the decorations in my Plugin state.
Then grab them in the decoration
prop and using DecorationSet.create()
I return the new Decorations.
Note that before passing the inline decorations to DecorationSet.create()
, I copy the decorations from my state in an auxiliary array that is passed to DecorationSet.create()
so that I don’t mutate my internal state.
From what I’ve investigated the issue and it seems to be comming from the locals
method of the DecorationGroup
class.
Bellow is a image of the error in the Browser.