basic question about a "read only" view of an edited document that preserves look-and-feel?

[dmccallie]

Hi. Milkdown is a very cool project that looks like it meets my needs for building a family blogging tool.

I have (at least) one basic question. If one of my users edits a blog post with Crepe (for example), how should I deploy that post in "read only" mode for others to read once it is published? I want to preserve the exact look-and-feel that the creator saw while using Crepe, including custom features like how the Image Block component allows for resizing images (using non-standard Markdown syntax.)

I can imagine at least two ways to "lock" the document and preserve look and feel. One way might be to display the finished post using Crepe itself, but somehow set it to "read-only" mode so that others cannot edit the content (and no menu pops up with the slash command, etc.)

Another approach might be to serialize the custom Markdown to HTML and leverage Crepe's CSS files to match the visual look at feel.

What is a good approach? Is there something else to consider?

[I am not very familiar with Prose Mirror, so a simple solution would be best 😄]

Thanks!

[Saul-Mirone]

If you don't have SEO or SSR requirements, you can just use an readonly editor. Otherwise you'll need to use html/markdown to make the page static.

[dmccallie]

Thank you!

I think the read-only editor will work, but just in case, how would I extract the exact HTML that the editor is generating? I know how to get the markdown, but there are subtle enhancements in Milkdown’s markdown that I don’t want to lose (like scaling of block images.). I didn’t see a function to extract the generated HTML?

[Saul-Mirone]

You can use the getHTML macro here: https://milkdown.dev/docs/api/utils#macros

[dmccallie]

It appears that the getMarkdown() macro is wrapped and exposed as a directly callable function, but getHTML() is not exposed in the same way. For anyone who runs into this, the following works:

const html = crepe.editor.action(getHTML());

However I have a followup question about creating a read-only view of an edited document. I tried setting the crepe editor to read only using:

crepe.setReadonly(true);

This makes the rendered markdown text uneditable, but all included images continue to show the resize handle at the bottom of the image as well as showing the add caption icon. The images continue to be resizable as well. In addition, the block drag icon (6 dots to the left of the block) shows up when moused over.

Is there some way to make the "read only" display completely unresponsive to user input and to hide all of the editing "handles?" (Ideally scrolling and text selection should continue to work.)

Sorry if this is naive, but I'm pretty new to Javascript.

Thanks for the help!

[Saul-Mirone]

hmm, I think it's a bug. I'll fix it in next version.