Documentation: How to serialize / unserialize content to ProseMirror instance

I’ve just found ProseMirror and am pretty excited by it.

Trying to get started, I see the getContent and setContent methods have been dropped in version 0.8, but I cannot find any documentation on how you can get or set content now.

My app uses Markdown for text content, so I have a bunch of markdown texts already and would like to be able to “open” them in a prose mirror instance and then also save back to markdown when the user is done editing.

Without getContent and setContent in v > 0.8, how are we supposed to do that now?

Check the demos on the ProseMirror website, there is an example there, here the link to the source https://github.com/ProseMirror/website/blob/master/src/demo/markdown.js

Is there a simple way to get an HTML string in and out?

In 0.7 I could just do

pm = new ProseMirror({ docFormat: "html", doc: html })
pm.getContent("HTML")

After a lot of troubles I managed to achieve something similar in 0.8 with

pm = new ProseMirror({ doc: schema.parseDOM(new DOMParser().parseFromString(html, "text/html"))})
new XMLSerializer().serializeToString(pm.doc.content.toDOM())
2 Likes

You can also use innerHTML, but yes, that’s about how you do things since 0.8 (where we’re moving to less convenience helpers and API surface)

to input html string into ProseMirror

let parser = (content) => {
            let domNode = document.createElement("div");
            domNode.innerHTML = content;

            return schema.parseDOM(domNode);
}
let pm = window.pm = new ProseMirror({
        place: place,
        schema: schema,
        doc: parser(content),
 })

I do this for getting the HTML content as a string from ProseMirror

let getContentString = () => {
        let domNode = pm.doc.content.toDOM();
        let tmp = document.createElement("div");
        tmp.appendChild(domNode);

        return tmp.innerHTML;
}
3 Likes

Here is how I got @kzap’s approach to work for 0.17. I haven’t managed (yet) to find a solution for 0.20.

to initialize with HTML string

import {EditorState} from "prosemirror-state"
import {MenuBarEditorView} from "prosemirror-menu"
import {Schema, DOMParser, DOMSerializer} from "prosemirror-model"
import {addListNodes} from "prosemirror-schema-list"
import {exampleSetup} from "prosemirror-example-setup"
import {schema as baseSchema} from "prosemirror-schema-basic"

let schema = new Schema({
	nodes: addListNodes(baseSchema.nodeSpec, "paragraph block*", "block"),
	marks: baseSchema.markSpec
});
let parser = (content) => {
    let domNode = document.createElement("div");
    domNode.innerHTML = content;
    return DOMParser.fromSchema(schema).parse(domNode);
}
let pm = new MenuBarEditorView(place, {
  	state: EditorState.create({
  	    doc: parser(place),
        plugins: exampleSetup({schema: schema})
  	}),
  	onAction: function(action) {
        pm.updateState(pm.editor.state.applyAction(action))
  	}
})

to get HTML string

let getContentString = () => {
    let fragment = DOMSerializer.fromSchema(schema).serializeFragment(pm.editor.state.doc.content);
    let tmp = document.createElement("div");
    tmp.appendChild(fragment);
    return tmp.innerHTML;
};
2 Likes