How to use the prosemirror-state.Selection.fromJSON function in prosemirror-state

updateClientSelection(snapshot) {
		/* Called on firebase updates to selection */
		const clientID = snapshot.key;
		if (clientID !== this.localClientId) {
			const snapshotVal = snapshot.val();
			/* Invalid selections can happen if a selection is synced before the corresponding changes from that 
			remote editor. We simply remove the selection in that case, and wait for the proper position to sync. */
			const invalidSelection = Math.max(snapshotVal.a, snapshotVal.h) > this.view.state.doc.content.size - 1;
			if (snapshotVal && !invalidSelection) {
				this.selections[clientID] = Selection.fromJSON(this.view.state.doc, uncompressSelectionJSON(snapshotVal));
				this.selections[clientID].data = snapshotVal.data;
			} else {
				delete this.selections[clientID];
			}
			this.issueEmptyTransaction();
		}
	}

generateCursorDecorations(cursorData, editorState) {
		if (cursorData.id === this.pluginProps.localClientId) {
			return [];
		}

		/* Invalid selections can happen if an item is synced before the corresponding changes from that */
		/* remote editor. This try-catch is a safegaurd against that scenario. We simply ignore the */
		/* decoration, and wait for the proper position to sync. */
		let selection;
		try {
			selection = Selection.fromJSON(
				editorState.doc,
				uncompressSelectionJSON(cursorData.selection),
			);
		} catch (err) {
			return [];
		}

		/* Classnames must begin with letter, so append one single uuid's may not. */
		const formattedDataId = `c-${cursorData.id}`;
		const elem = document.createElement('span');
		elem.className = `collab-cursor ${formattedDataId}`;

		/* Add Vertical Bar */
		const innerChildBar = document.createElement('span');
		innerChildBar.className = 'inner-bar';
		elem.appendChild(innerChildBar);

createEditorState(state) {
        this.config = createConfig(this.plugins, {})
        const schema = createSchema(this.config)
        const dispatch = createDispatch(this.eventDispatcher)
        const doc = Node.fromJSON(schema, state ? state.doc : defaultState)
        const selection = state ? Selection.fromJSON(doc, state.selection) : undefined
        // const errorReporter = createErrorReporter(errorReporterHandler);

        const plugins = createPMPlugins({
            schema,
            dispatch,
            editorConfig: this.config,
            eventDispatcher: this.eventDispatcher,
        })

        // let doc;
        // if (options.replaceDoc) {
        //     doc =
        //         this.contentTransformer && typeof defaultValue === 'string'
        //             ? this.contentTransformer.parse(defaultValue)
        //             : processRawValue(schema, defaultValue);
        // }

const alreadyHandled = prevDecorations.find().reduce((prev, curr) => {
			const currId = curr.spec.key
				.replace('discussion-inline-', '')
				.replace('discussion-widget-', '');
			if (currId === discussionData.id) {
				return true;
			}
			return prev;
		}, false);

		/* Invalid selections can happen if an item is synced before the corresponding changes from that */
		/* remote editor. This try-catch is a safegaurd against that scenario. We simply ignore the */
		/* decoration, and wait for the proper position to sync. */
		let selection;
		try {
			selection = Selection.fromJSON(
				editorState.doc,
				uncompressSelectionJSON(discussionData.selection),
			);
		} catch (err) {
			return [];
		}

		if (
			discussionData.currentKey === this.mostRecentRemoteKey &&
			!sendableSteps(editorState) &&
			!alreadyHandled
		) {
			const highlightTo = selection.to;
			const elem = document.createElement('span');
			elem.className = `discussion-mount dm-${discussionData.id}`;
			const inlineDecoration = Decoration.inline(

generateCursorDecorations(cursorData, editorState) {
		if (cursorData.id === this.pluginProps.localClientId) {
			return [];
		}

		/* Invalid selections can happen if an item is synced before the corresponding changes from that */
		/* remote editor. This try-catch is a safegaurd against that scenario. We simply ignore the */
		/* decoration, and wait for the proper position to sync. */
		let selection;
		try {
			selection = Selection.fromJSON(
				editorState.doc,
				uncompressSelectionJSON(cursorData.selection),
			);
		} catch (err) {
			return [];
		}

		/* Classnames must begin with letter, so append one single uuid's may not. */
		const formattedDataId = `c-${cursorData.id}`;
		const elem = document.createElement('span');
		elem.className = `collab-cursor ${formattedDataId}`;

		/* Add Vertical Bar */
		const innerChildBar = document.createElement('span');
		innerChildBar.className = 'inner-bar';
		elem.appendChild(innerChildBar);

function updateClientSelection(snapshot) {
              const clientID = snapshot.key
              if (clientID !== selfClientID) {
                const compressedSelection = snapshot.val()
                if (compressedSelection) {
                  try {
                    selections[clientID] = Selection.fromJSON(editor.state.doc, uncompressSelectionJSON(compressedSelection))
                  } catch (error) {
                    console.warn('updateClientSelection', error)
                  }
                } else {
                  delete selections[clientID]
                }
                editor.dispatch(editor.state.tr)
              }
            }
            selectionsRef.on('child_added', updateClientSelection)

function updateClientSelection(snapshot) {
              const clientID = snapshot.key
              if (clientID !== selfClientID) {
                const compressedSelection = snapshot.val()
                if (compressedSelection) {
                  try {
                    selections[clientID] = Selection.fromJSON(editor.state.doc, uncompressSelectionJSON(compressedSelection))
                  } catch (error) {
                    console.warn('updateClientSelection', error)
                  }
                } else {
                  delete selections[clientID]
                }
                editor.dispatch(editor.state.tr)
              }
            }
            selectionsRef.on('child_added', updateClientSelection)

function updateClientSelection(snapshot) {
              const clientID = snapshot.key
              if (clientID !== selfClientID) {
                const compressedSelection = snapshot.val()
                if (compressedSelection) {
                  try {
                    selections[clientID] = Selection.fromJSON(editor.state.doc, uncompressSelectionJSON(compressedSelection))
                  } catch (error) {
                    console.warn('updateClientSelection', error)
                  }
                } else {
                  delete selections[clientID]
                }
                editor.dispatch(editor.state.tr)
              }
            }
            selectionsRef.on('child_added', updateClientSelection)

Object.keys(discussions).forEach((discussionId) => {
					if (discussions[discussionId].currentKey === currentKey) {
						try {
							const thisSelection = Selection.fromJSON(
								currentDoc,
								uncompressSelectionJSON(discussions[discussionId].selection),
							);
							newDiscussions[discussionId] = {
								...discussions[discussionId],
								selection: thisSelection,
							};
						} catch (err) {
							console.warn(`Warning on ${discussionId}: ${err}`);
						}
					}
				});

const getSelectionForDiscussion = (editorState, discussionData) => {
	try {
		return Selection.fromJSON(
			editorState.doc,
			uncompressSelectionJSON(discussionData.selection),
		);
	} catch (_) {
		return null;
	}
};