EasyMDE: A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
Is your feature request related to a problem? Please describe.
First off thanks for maintaining easymde! In my app I need to do a bit of extra styling/logic based on certain tokens found in the editor (above and beyond markdown syntax). By far the easiest and best way to do this that I have found is to define a codemirror overlay mode. The overlay mode preserves all of the classes returned by the gfm mode but adds a few extra ones.
Describe the solution you'd like
An option that takes a codemirror mode and applies it as an overlay mode to the editor.
Describe alternatives you've considered
One potential alternative that may work for many people in a similar situation is to define a simple mode. This can be added to the editor after instantiation using cm.addOverlay. The limitation is that modes using this API must be stateless. In my case I needed to have a stateful mode so it was not an option.
Additional context
Here is the entry in the CM docs for overlay modes:
mode/overlay.js
Mode combinator that can be used to extend a mode with an 'overlay' — a secondary mode is run over the stream, along with the base mode, and can color specific pieces of text without interfering with the base mode. Defines CodeMirror.overlayMode, which is used to create such a mode. See this demo for a detailed example. overlay.js contains the glue code that would be needed to include the optional mode.
If a user of easymde wanted to define their own mode, they could import overlay.js and define the mode in their code. I think it would have to be on the user to make sure they properly pass 'gfm' or 'spell-checker' to their overlay mode since that part has to be passed in in the overlay mode that is being defined. Take a look at the mustache example to see what I mean.
I was able to get all of this working for my app by just cloning the repo locally, defining my mode, and passing it in to the codemirror instance that is created by easymde. If you think other folks would find this useful I've already done most of the work and would be happy to make a PR. Then I would be able to get future updates to the library as well :).
Ionaru
commented
4 years ago
Is your feature request related to a problem? Please describe. First off thanks for maintaining easymde! In my app I need to do a bit of extra styling/logic based on certain tokens found in the editor (above and beyond markdown syntax). By far the easiest and best way to do this that I have found is to define a codemirror overlay mode. The overlay mode preserves all of the classes returned by the gfm mode but adds a few extra ones.
Describe the solution you'd like An option that takes a codemirror mode and applies it as an overlay mode to the editor.
Describe alternatives you've considered One potential alternative that may work for many people in a similar situation is to define a simple mode. This can be added to the editor after instantiation using cm.addOverlay. The limitation is that modes using this API must be stateless. In my case I needed to have a stateful mode so it was not an option.
Additional context Here is the entry in the CM docs for overlay modes: mode/overlay.js Mode combinator that can be used to extend a mode with an 'overlay' — a secondary mode is run over the stream, along with the base mode, and can color specific pieces of text without interfering with the base mode. Defines CodeMirror.overlayMode, which is used to create such a mode. See this demo for a detailed example. overlay.js contains the glue code that would be needed to include the optional mode.
Here are the code mirror docs on modes: https://codemirror.net/doc/manual.html#modeapi
If a user of easymde wanted to define their own mode, they could import overlay.js and define the mode in their code. I think it would have to be on the user to make sure they properly pass 'gfm' or 'spell-checker' to their overlay mode since that part has to be passed in in the overlay mode that is being defined. Take a look at the mustache example to see what I mean.
I was able to get all of this working for my app by just cloning the repo locally, defining my mode, and passing it in to the codemirror instance that is created by easymde. If you think other folks would find this useful I've already done most of the work and would be happy to make a PR. Then I would be able to get future updates to the library as well :).
Thanks.