Replacing the contents of an editor

1

I’ve read through the guide and have been stuck on aiming to do the following:

  • extracting the HTML of the editor and
  • replacing all of the HTML of the editor

I’m looking to make a WYISWYG editor to edit HTML files locally with some minimal markup support. What I’d tried so far has been:

  • Extracting the content using DOMSerializer.fromSchema(state.schema).serializeFragment(state.doc.content) where state is editorView.state from the held instance of the editor.
  • ??? regarding replacing the whole of the HTML text.

I’ve looked at prosemirror-breakout-starter-kit, prosemirror-cookbook and prosemirror-utils for some guidance.

2

I took a hint from this suggestion to produce:

// Create element.
const floatingDom = document.createElement('div');
floatingDom.innerHTML = html;

// Parse element.
const doc = DOMParser.fromSchema(schema).parse(floatingDom);
this.editorView.updateState({ doc, plugins, schema })

But I get an error, undefined is not an object (evaluating 'state.selection.eq').

3

I came across editable-website/src/lib/editor/prosemirrorUtil.js at 7c589c8dd1cc43a260ef175e184f28754188f8fb · michael/editable-website · GitHub

		const rootDoc = document.implementation.createHTMLDocument();
		rootDoc.body.innerHTML = html;
		const doc = DOMParser.fromSchema(schema).parse(rootDoc.body);
		this.editorView.updateState(EditorState.create({ schema, plugins, doc }))

This works excellently for my use-case.