I am trying to cobble together a plugin that will support simple sequence diagrams in posts.
For example, this:
[seqdiagram]
A->B:one
B->A:two
[/seqdiagram]
Would result in this:
The JS Sequence Diagram library handles the text–>svg function, so my first attempt is to simply wrap that library within Discourse.
Based on examples found here I put together this plugin: https://github.com/nskerl/discourse-sequence-diagram
Here I am using replaceBlock() to find the [seqdiagram] tag and push its contents into the div needed by the diagram lib.
//assets/javascripts/sequence_diagram_dialect.js
(function() {
Discourse.Dialect.replaceBlock({
start: /(\[seqdiagram\])([\s\S]*)/igm,
stop: '[/seqdiagram]',
rawContents: true,
emitter: function(contents) {
return ['p', ['div', { class: 'discourse-sequence-diagram'}].concat(contents)];
}
});
Discourse.Markdown.whiteListTag('div', 'class', /^discourse-sequence-diagram$/igm);
})();
Then, in my initializer I am calling the lib to do the text to diagram transform:
import { withPluginApi } from 'discourse/lib/plugin-api';
export default {
name: 'discourse-sequence-diagram',
initialize() {
withPluginApi('0.1', api => {
api.decorateCooked($elem => $elem.find("div.discourse-sequence-diagram").sequenceDiagram({theme: 'hand'}));
});
}
}
When I type in the opening [seqdiagram] tag I see the following error thrown in the console: “Uncaught TypeError: e.stop.exec is not a function”
It appears its coming from this section of code in replaceBlock():
Any help in debugging this in much appreciated! I’d also like to know how others would implement this feature; perhaps a plugin is not the place?
I am confident the other areas of the plugin are setup ok-- if I swap the call from replaceBlock to inlineBetween I can get svg output, but only on a single line and its a bit wonky with spaces.
