Milkdown
basic question about a "read only" view of an edited document that preserves look-and-feel? #1683
-
|
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! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 8 replies
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
hmm, I think it's a bug. I'll fix it in next version. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you. I look forward to testing it! Meanwhile, another naive question: I have used the Is there some straightforward way to use those themes to display the extracted HTML? I see that the CSS sources include Tailwind, which I am not using, so I'd guess I might need to add Tailwind preprocessing? Or maybe there's no easy way to re-use the Crepe themes? Thanks again for your help. |
Beta Was this translation helpful? Give feedback.
-
|
I've made a little progress on answering my question about how to leverage Milkdown's extensive theme CSS files to properly format the generated HTML in a static setting. I had initially shoved the generated HTML into a simple But this did work much better if I create an inner div and shove the HTML into that element: <body>
<h1>Milkdown Test</h1>
<div id="editor"></div>
<h2>Preview</h2>
<div class="milkdown" id="preview">
<div id="preview-inner" class="ProseMirror">
</div>
</div>
<script type="module" src="src/main.js"></script>
</body>In other words, adding an inner Now the output is very close to what shows in the Milkdown editor itself. However there are a few elements which don't match, such as bullet lists or ordered lists, which do not get indented properly. And images are always shown at 100% width, not reflecting the "ratio" parameter that the editor itself does respect. Is there something else I should be doing, or is this the right direction? Thanks again. |
Beta Was this translation helpful? Give feedback.
-
|
The editor equal HTML output is a missing part in crepe. I have a issue to track it: #1366 Basically every part of the editor will need to adjust the HTML output to make it works out of box. I'll implement the feature in the future. For now, there's no quick path to do it. I think you can use readonly editor first. Fixing the readonly editor will be much more easier and I'll release a patch version next week. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you. |
Beta Was this translation helpful? Give feedback.
The editor equal HTML output is a missing part in crepe. I have a issue to track it: #1366
Basically every part of the editor will need to adjust the HTML output to make it works out of box. I'll implement the feature in the future. For now, there's no quick path to do it. I think you can use readonly editor first. Fixing the readonly editor will be much more easier and I'll release a patch version next week.