Find the best solution to edit markdown

[bchapuis]

Monaco has several limitations and we should find a better solution to edit markdown or improve the our integration.

Here is a list of issues that have been reported:

• [ ] #204
• [ ] #209
• [ ] #216
• [ ] #217
• [ ] #218

[Ovich]

https://mdxeditor.dev/editor/docs/Admonitions

[bchapuis]

This one is used by stackoverflow: https://stackedit.io/

[bchapuis]

@yves-chevallier have you compared some editors that could be embed in webpages?

[yves-chevallier]

@yves-chevallier have you compared some editors that could be embed in webpages?

Nope, but I saw this one some time ago on HN. It looks very customizable and it supports images, equations and more.

[Ovich]

@bchapuis

StackEdit

StackEdit is an VueJs App. We do not have any react components. Rather we have a hook: https://codesandbox.io/p/sandbox/stackedit-react-hook-example-forked-h912v?file=%2Fsrc%2FApp.js%3A22%2C11-22%2C24£

Upon checking closely the code, it opens up the Vue app in iframe. The iframe handling is encapsuled in the hook, we can also handle the iframe on our side. This might seem like a bad idea, but, if we decide to proceed with the input protection (to prevent them being read / write) by ai browser extentions, we might end up with iframed editors anyway.

Image / document handling seem not to be supported out of the box

[bchapuis]

@Ovich It's probably better to look for a good react component that does markdown. I wouldn't go for an iframe or a vuejs integration.

[Ovich]

MdEditorRt

https://imzbf.github.io/md-editor-rt/en-US/docs#%F0%9F%94%A9%20MdEditor%20Props

A react component.

Seem to provide the necessary features in term of functionality (md, math formula, extended markdown (tables etc.. to be checked), diagrams, integrated preview panel with scroll sync, wysiwyg style toolbar (for non technical people).

It does not allow for editing in rich text mode, we still write markdown code with the toolbar that can help.

It provides paste, drop etc... events for document upload handling.

It does not provide api access to content height and we seem not to be able to provide height to the editor. This is not a big deal because we dont have to preserve the "automatic growing" depending on content height for the content editor.

Seem to be a.good options for the requirements we have

[bchapuis]

MdEditor looks nice, but it comes a lot of dependencies and does not look widely used (256 stars on github). I'm usually a bit worried when building on top of this kind of project.

Have you considered this option to simply use a textarea instead of monaco? As long as the users are familiar with the markdown syntax, this may be sufficient. A couple of buttons (e.g. for uploading images and inserting the corresponding markdown in the textarea) may do the trick.