Yjs extension leaks yjs UndoManager instances when editor re-renders

[ankon]

Summary

Yjs extension leaks yjs UndoManager instances when the editor re-renders:

1. The yjs extension creates a yUndoPlugin instance as part of its "external" plugins (

   remirror/packages/remirror__extension-yjs/src/yjs-extension.ts

   Lines 173 to 198 in 963a1ed

   	/**
   	* Create the yjs plugins.
   	*/
   	createExternalPlugins(): ProsemirrorPlugin[] {
   	const {
   	syncPluginOptions,
   	cursorBuilder,
   	getSelection,
   	cursorStateField,
   	protectedNodes,
   	trackedOrigins,
   	} = this.options;
   	const yDoc = this.provider.doc;
   	const type = yDoc.getXmlFragment('prosemirror');
   	return [
   	ySyncPlugin(type, syncPluginOptions),
   	yCursorPlugin(
   	this.provider.awareness,
   	{ cursorBuilder, cursorStateField, getSelection },
   	cursorStateField,
   	),
   	yUndoPlugin({ protectedNodes, trackedOrigins }),
   	];
   	}

   )
2. The yUndoPlugin creates a new Yjs UndoManager instance in it's initState callback (https://github.com/yjs/y-prosemirror/blob/039be96fb520e972fa37f0e896b585ef19da1beb/src/plugins/undo-plugin.js#L35-L48)
3. The UndoManager attaches itself to the document's afterTransaction event (https://github.com/yjs/yjs/blob/645f05b0bb2435552582f587f5379c33adda6ffe/src/utils/UndoManager.js#L166)
4. Remirror creates a new state on each rerender as part of the useReactFramework hook:

   remirror/packages/remirror__react-core/src/hooks/use-react-framework.tsx

   Lines 43 to 45 in 963a1ed

   	const initialEditorState = state
   	? state
   	: manager.createState({ content: initialContent, selection: initialSelection });

Steps to reproduce

sandbox TBD, basically:

1. Configure remirror with the yjs extension
2. Trigger rerenders of the editor (for example through hook changes etc)

Expected results

Everything is happy.

Actual results

• Y.Doc instance slowly collects more afterTransaction handlers
• Editor becomes slower and slower after key presses as the browser is busy creating undo transactions over and over
• Eventually browser crashes due to out-of-memory

Possible Solution

y-prosemirror allows to provide a undo manager. We have forked the remirror yjs extension again to do that, see Collaborne/remirror-extension-yjs@7c77917 for the commit.
In remirror "proper" you will have to update the y-prosemirror dependency to at least 1.0.14 to include yjs/y-prosemirror#87, due to historic reasons we use our own y-prosemirror and basically merged that PR.

[ocavue]

I don't know much about YJS, but I'd like to merge it if you can submit a PR to Remirror. (I can take care of the updating y-prosemirror dependency)

[ankon]

See #1457 for a proposed fix (basically a merge of our changes + two tests)