Help in converting JSON doc to plain text WITHOUT a view/editor

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).

I’m trying to follow this guide: which states:

“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:

Any help would be greatly appreciated! Thank you.

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.

Can you give an example of what you’re trying to do? For example, what should a node or mark be serialized to?

You could use the editor to render the JSON doc and hide editing features with the editable prop.

Thank you @marijn!

Any guesses why the 3rd import above wouldn’t work while the 1st two would?


Yes, I should have @bhl:

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…

Any thoughts/ideas?

Thank you!

You could try writing a function to parse the JSON doc, since the text nodes are serialized as “[{“type”:“text”,“text”:“hello world”}]”.

Thanks @bhl I’ll try that if that’s the recommended way to go about doing it. I was just hoping for a more loosely coupled way of doing it…