Decoration issue when having multiple custom Plugins

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. prosemirror decoration error

Have you tried reducing this to the minimal program needed to trigger it? If you can reliably make it happen without too much code, I’ll gladly try to debug it.

Thank you for your reply!

It’s a little complicated to reduce the code at this point, but what I’ve investigated so far is the following.

After my Plugins make my decorations and viewDecorations grabs them like in the screenshot bellow.

This is my first decoration from my first custom Plugin ( although I don’t quite get why the positions are offset backwards by 1) View Decorations Function Snap - First Decoration This is my second decoration from my second Pugin. View Decorations Function Snap - Second Decoration

The decorations get passed to the from static class method of DecorationGroup.

Here is where the issue is happening. Because I have 2 members, the default switch branch will execute and trigger the members.reduce.

Then the resulting list is passed to the constructor of DecorationGroup, but the list has an undefined as the last element in the list from the reducer.

I can also try to extract a minimal version of the implementation, but will require some time.

Any suggestions are appreciated :smile: Thanks!

Are you sure all the things you are passing as decorations are actually DecorationSet instances?

Also, is your dependency tree properly deduplicated? The instanceof check there can fail if you have multiple copies of prosemirror-view loaded somehow.

Yes you are right! That was the issue. I’ve also used Remirror as the Context and manager for my editor and for one of the custom Plugins I’ve used the DecorationSet class from the Remirror package and in the second Plugin the DecorationSet from the prosemirror-view package.

Thank you for all your help and for the quick response!

P.S. You’ve done a brilliant job with ProseMirror! All my respects! :handshake: