Hi, I’m pretty new to ProseMirror (using TipTap for Vue.js, really) and I’m running into trouble trying to display rich content outside the editor (in a plain text-area) by converting it from JSON to text. In other words, I don’t want to create a visible view/editor or muck around with the HTML DOM, but use the model (editor state) to do the work of converting the serialized JSON to text (if possible).
“When initializing a state, you can give it an initial document to use. In that case, the schema field is optional, since the schema can be taken from the document.”
So I tried:
import {DOMParser} from "prosemirror-model"
import {EditorState} from "prosemirror-state"
// json is: JSON.parse( JSON.stringify(this.editor.getJSON()) ) where the inner string is what was saved to DB
let state = EditorState.create({
doc: DOMParser.fromSchema().parse(json)
})
I tried passing null or {} for schema, but I don’t get a valid state back, rather an error:
Error in created hook: “TypeError: Cannot read property ‘cached’ of undefined”
The reason I’m trying to avoid passing in a schema is the documentation quote above (says it’s detected from the document) plus the build fails when including this line:
import {schema} from "prosemirror-schema-basic"
The project uses Webpack and Yarn for builds, and I’m not sure if and how (and why) I must specifically include prosemirror-schema-basic. Do I need to save/serialize the schema along with the JSON object every time a user edits content?
I also searched for discussions on here and cannot find a way to create a Node (no constructor found…) or a DOMSerializer (they both require schemas!) as per:
It’s implied in the document, which is a Node instance created/parsed with a given schema. You can’t parse without a schema, because then there’s no document structure and no parse rules.
I want to show snippets/previews of part of the rich document but as text-only (bold, links, images, etc. can be non-visible…)
My first thought was to instantiate another Tiptap editor view and disable editing, but I figured there might be a simpler (and lighter) way to just use Prosemirror to get a string output and use that.
My other option is to store the output of getHTML() and then use that for snippets/previews, except I’d be storing twice the content…