Handling malformed HTML

First off, thank you for ProseMirror. The amount of work that went into it is quite impressive. While complex, it is thoroughly comprehensive.

Is there a way to detect parsing errors? For example, initializing PM with the following code:


		try {
			const doc = DOMParser.fromSchema(schema).parse(inputElement);
			const state = EditorState.create({
				doc,
				plugins: []
			});

			state.doc.check();

			const view = new EditorView({ mount: container }, { state });
		} catch (e) {
			console.error("error parsing", e);
		}

where inputElement is set to <h1> does not throw an error in either of the try/catch blocks. However, focusing on the PM editor results in the following error:

dom.js:42 Uncaught TypeError: Cannot read property 'nodeType' of null
    at scanFor (dom.js:42)
    at isEquivalentPosition (dom.js:31)
    at NodeViewDesc2.setSelection (viewdesc.js:401)
    at NodeViewDesc2.setSelection (viewdesc.js:359)
    at selectionToDOM (selection.js:57)
    at DOMObserver2.flush (domobserver.js:178)
    at DOMObserver2.onSelectionChange (domobserver.js:122)
scanFor @ dom.js:42
isEquivalentPosition @ dom.js:31
setSelection @ viewdesc.js:401
setSelection @ viewdesc.js:359
selectionToDOM @ selection.js:57
flush @ domobserver.js:178
onSelectionChange @ domobserver.js:122
dom.js:42 Uncaught TypeError: Cannot read property 'nodeType' of null
    at scanFor (dom.js:42)
    at isEquivalentPosition (dom.js:31)
    at NodeViewDesc2.setSelection (viewdesc.js:401)
    at NodeViewDesc2.setSelection (viewdesc.js:359)
    at selectionToDOM (selection.js:57)
    at DOMObserver2.flush (domobserver.js:178)
    at MutationObserver.DOMObserver2.observer (domobserver.js:50)
scanFor @ dom.js:42
isEquivalentPosition @ dom.js:31
setSelection @ viewdesc.js:401
setSelection @ viewdesc.js:359
selectionToDOM @ selection.js:57
flush @ domobserver.js:178
DOMObserver2.observer @ domobserver.js:50
attributes (async)
selectionToDOM @ selection.js:63
flush @ domobserver.js:178
onSelectionChange @ domobserver.js:122
dom.js:42 Uncaught TypeError: Cannot read property 'nodeType' of null
    at scanFor (dom.js:42)
    at isEquivalentPosition (dom.js:31)
    at NodeViewDesc2.setSelection (viewdesc.js:401)
    at NodeViewDesc2.setSelection (viewdesc.js:359)
    at selectionToDOM (selection.js:57)
    at input.js:664

Am I missing a method that’ll validate the content? state.doc.check() seems like it would suffice but I guess it doesn’t function if the content is malformed.

edit

Actually, the error I’m seeing may not be related to parsing errors at all.

I refactored the code to:

		try {
			const el = document.createElement("div");
			el.innerHTML = content;
			console.log(content);
			const doc = DOMParser.fromSchema(schema).parse(el);
			const state = EditorState.create({
				doc,
				plugins: []
			});
			state.doc.check();
			container.innerHTML = "";
			const view = new EditorView({ mount: container }, { state });
			el.remove();
		} catch (e) {
			console.error("error parsing", e);
		}

even with valid input (below) I’m getting the same errors when I focus on the editor.

<h1>title</h1>
<p>paragraph</p>

As of right now, I am recreating the editor every time the content changes. The output of PM is correct as well:

<div class="s-Hsmovd_is9MC ProseMirror" contenteditable="true">
  <h1>title</h1>
  <p>paragraph</p>
</div>

Ahh, this was related to the fact that I was recreating the view. Destroying the previous view resolved the errors.

Right. The DOM parser never emits parsing errors—in effect, it consumes everything you throw at it.

The fact that you pass it a DOM element was somewhat confusing to me at first. However, I’m guessing that ensures the HTML is valid which is clever.

Thanks man. PM is truly awesome. A bit of a beast to get a comprehensive view of the API so I can only imagine crafting it.