What is correct way to render static document?

[alxgrn]

Hi!
First of all, I want to thank you for a great package that saved me a lot of time!
And I hope that here I will be helped with the following question. After we have created and edited the document, we need to show it to users. I do it like this:

`
import { FC, useEffect, useRef, useState } from 'react';
import { DOMSerializer, Node } from 'prosemirror-model';
import { schema } from './schema';
import './ProseViewer.css';

type ProseViewerProps = {
content: string;
};

const ProseViewer: FC = ({ content }) => {
const ref = useRef(null);
const [ error, setError ] = useState(false);

useEffect(() => {
    try {
        setError(false);
        const doc = Node.fromJSON(schema, JSON.parse(content));
        const dom = DOMSerializer.fromSchema(schema).serializeFragment(doc.content);
        ref.current?.appendChild(dom);
    } catch (error) {
        setError(true);
        console.error(`Can not parse Prose format: ${error}`);
    }
}, [ ref, content ]);

return (<div ref={ref} className='ProseViewer'>
    {error && <div className='error'>Error</div>}
</div>);

};

export default ProseViewer;
`

The document displays fine, but there is one problem: suppose I want some components to be active. For example, I want a full-screen lightbox to appear when you click on an image. If I displayed the image in the editor, then there would be no problems with this - you can use nodeViews props in the ProseMirror component. But I don't need an editor right now, I only need a document viewer.
What do you think is the best approach to solving this problem?

[smoores-dev]

The simplest way is just to render the <ProseMirror /> component with editable set to () => false. This is what, e.g., Moment does for their blog. Some advantages to this:

• You get SSR for free, if you’re using a framework that supports SSR
• Your content will be rendered the same as in the editor, by default
• You can easily swap out the React node views if you need to represent some nodes differently to your readers than your editors
• If you end up wanting to support features tied to highlights, you can work directly with the ProseMirror selection/position system

Disadvantages:

• There’s some non-zero overhead to instantiating the ProseMirror editor. This shouldn’t be an issue unless you need to render very many of these on a single page

[alxgrn]

I ended up implementing my own render https://github.com/alxgrn/telefrag-editor/tree/main/lib/formats/prose/render
As it turned out this is quite simple and requires almost no overhead

[smoores-dev]

I’m glad this is working for you! It looks like this doesn’t support decorations, but that’s probably alright for most use cases. Good stuff!

I’ve been thinking about adding a static viewer component to the library for a while, maybe I’ll take a stab at it sometime soon

[jkazimierczak]

For any wandering soul, here's the permalink to the last commit that contained render directory:
https://github.com/alxgrn/telefrag-editor/tree/4615fb2aae01de27e4c3701137d5bae16972c72a/lib/formats/prose
and diff:
alxgrn/telefrag-editor@2d2150d
Seems to be it's own package now:
https://github.com/alxgrn/prose-editor/tree/c4c8e8ed3b4dbee7d1d266314d646debfa89d7b5
btw thanks for sharing! For someone who's just exploring stuff, the more examples the merrier :)

[smoores-dev]

We do in fact have a static prop, now! If you set it, React ProseMirror will never hydrate a full Editor View — it will just render your ProseMirror tree using your node view components.