Monaco or Coremirror support? #445
-
|
Hey there, I've been trying to find a nice way to have an editor directly on my website to use markdoc with. I see the markdoc websites uses codemirror but it's all custom code, no official plugin I can use. I'm also not a fan of codemirror and would love to integrate with the Monaco Editor but I don't see anyone online talking about this. I have this use case that I'm surprised I don't see around a lot. I'm looking to use markdoc but have non tech savy people contribute. Has anyone solve this sort of issues already? Would love some help or direction on the matter. Thanks ✌️ |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 5 replies
-
|
I made a very rough prototype of a hybrid rich-text Markdoc editor for CodeMirror 6 earlier this year. It's not ready for production use yet, but I'm hoping to do more work on it in the future to get it into a state where it's a good drop-in solution for browser-based Markdoc editing. The code is here: https://github.com/segphault/codemirror-rich-markdoc I also built a Monaco-based editor for internal use at Stripe, but we can't really share that because it's got some Stripe-specific code. Generally integrating Markdoc with Monaco is pretty straightforward, however. I can maybe extract out and share the generally useful parts like the logic for handling Markdoc validation, highlighting, and tag folding if that would be helpful to you. |
Beta Was this translation helpful? Give feedback.
-
|
Yeah I wanted to avoid rich text and WYSIWYG unfortunately. Would love to see the Monaco based one, would love to see that yes! Although it's mostly highlighting that I'm unsure how to do myself as validation seems pretty straight forward. |
Beta Was this translation helpful? Give feedback.
-
|
@CapitaineToinon: Here's a minimal Monaco configuration for Markdoc that includes support for syntax highlighting, validation, tag region folding, and clickable file attribute in the partial tag: https://gist.github.com/rpaul-stripe/986ab19947a9e53236dffcc55694663e You will need to provide your own Markdoc config in order for the validator to operate correctly on your custom tags. The syntax highlighting in that example is forked directly from the upstream Markdown highlighting rules for Monaco and modified to include support for Markdoc tags. |
Beta Was this translation helpful? Give feedback.
-
|
That's awesome, seems to work great ! Thanks I'll see what I can do from there. |
Beta Was this translation helpful? Give feedback.
-
|
@rpaul-stripe |
Beta Was this translation helpful? Give feedback.
-
|
@rpaul-stripe @CapitaineToinon Perhaps offtopic, but, is there any reason why you choose monaco over tiptap/prosemirror? |
Beta Was this translation helpful? Give feedback.
@CapitaineToinon: Here's a minimal Monaco configuration for Markdoc that includes support for syntax highlighting, validation, tag region folding, and clickable file attribute in the partial tag: https://gist.github.com/rpaul-stripe/986ab19947a9e53236dffcc55694663e
You will need to provide your own Markdoc config in order for the validator to operate correctly on your custom tags. The syntax highlighting in that example is forked directly from the upstream Markdown highlighting rules for Monaco and modified to include support for Markdoc tags.