説明
(very loosely related to #787, as this is very very focused on how document rendering itself can be extended)
Right now, a lot of rendering is extended in public/js/extra.js. Among other things, it handles highlighters, mermaid, video plugins and so on. For the following, I'll use mermaid as an example, because I'm familar with how it works.
I would love if we came up with a common interface for things like that. This way we could get much of the code out of extra.js, and we might end up with more extensions along the way!
Basically, Mermaid is applied in three steps.
- In
highlightRender(), we're looking for a magic word like "mermaid", then a<div>with its raw content is returned. https://github.com/hackmdio/codimd/blob/152dfc23230c2575633a0321c855f37fcc50fb96/public/js/extra.js#L931-L932 - In
finishView(view), all those divs are then looked up and processed. https://github.com/hackmdio/codimd/blob/152dfc23230c2575633a0321c855f37fcc50fb96/public/js/extra.js#L374-L394 - In case of mermaid, the bulk of processing comes from an external library (line 380, I believe), but this wouldn't have to be the case.
So basically, I propose a plugin or extension system that would take those commonalities so we could easily write more such additions, and also that could perhaps be lazy-loaded. Or they could even be distributed in a different way (think: their own NPM modules)
// example Document Extension
{
keyword: 'mermaid',
highlightRender: (code) => {
// returns a html element for later processing
return htmlElement;
},
finishView: (view) => {
// modifies element in place
}
}
perhaps we could even get away from that extra step and just pass an object reference right into finishView or something.
- Name: Is "Document Extensions" the right name?
- User expectation: how do we deal with different CodiMD instances offering different functionalities?
- Do we need anything more than what's proposed? Does ony one of you know other extensions that would need different things?