How to set initial value that's just a plain string?

[tihomir-kit]

Hi, thank you for your package.

'm a bit confused though about how to initialize ProseMirror with the initial value? Say I loaded something from a webapi, and want to set it as the initial value, and that something is var value = "*some sentence* whatever.". How would I initialize ProseMirror with that value?

Or is there a fundamental misunderstanding how this is supposed to work on my end?

Thanks a lot.

[ChrisLincoln]

There is a great discussion forum at discuss.prosemirror.net for questions about Prosemirror. This library is just an extremely thin shim of convenience for React apps. As for how it is used in this hook, you need to create a config object that basically matches the interface to ProseMirror's EditorState.create() method. Getting from a simple piece of text to a value that conforms the config.doc property is a few steps and depends largely on how your document is persisted and what the valid schema is for your document. Assuming a very basic document schema such as what is found in the Prosemirror basic example, the steps would be:

1. wrap the text in paragraph tags: var value = "<p>*some sentence* whatever.</p>";
2. Parse the HTML text into a DOM document using the browser's HTML parser.
3. Parse the DOM document into a prose mirror document model using your schema and Prosemirror's DOM Parser.
4. Pass that prosemirror document to in the config.doc member of this lib's useProsemirror() hook.
   All together, it looks like this. I suggest wrapping the doc parsing in useMemo():

import { DOMParser as ProseDOMParser } from 'prosemirror-model'; <-- sad name collision that confuses many
import schema from 'your-schema';  <-- You need to supply this. See the PM examples.
var value = "<p>*some sentence* whatever.</p>";
var dom = new DOMParser().parseFromString(value, "text/html");
var doc = new ProseDOMParser().fromSchema(schema).parse(dom);
var [editorState, setEditorState] = useProsemirror({doc, ...and a bunch of other props that you can glean from the PM examples})
...
<ProseMirror state={editorState} />