Using ProseMirror based editor as a form control


#1

Hello,

I am testing a ProseMirror based editor as a part of a form. The problem I’ve encountered is how to get the value of the editor when it is empty.

Currently I am using the following code to get the value (editor content)

function getHTML(state: EditorState) {
    const fragment = DOMSerializer
                    .fromSchema(state.schema)
                    .serializeFragment(state.doc.content);

    const element = document.createElement('div');
    element.appendChild(fragment);

    return element.innerHTML;
};

I’ve noticed this returns <p></p> even if there is no content and the user did not interact with the editor area. The more interesting part is that I’ve got a <p><br /><p> result if there was content and the user deleted it using the backspace key.

Is there any clever solution that will allow me to get consistent HTML result if there is no content in the editor so I can validate and/or execute other business logic?


#2

Most document schemas (including the default one) require at least one block node at the top level of the document, so that you have something to start typing in. Thus, entirely empty documents aren’t allowed by the schema and the default starting document is a single paragraph.

You got that with the code above, or in the DOM inside the editor? ProseMirror will put a placeholder <br> in empty textblocks, because that’s what browsers require to display the block at all, but those shouldn’t end up in the actual document (state.doc) and thus you shouldn’t see them when serializing.