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: [image] 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: GitHub - nskerl/discourse-sequence-diagram · GitHub 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(): [image] 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.

I managed to make some progress by removing replaceBlock and simply doing the transform myself in the dialect. I also switched to addPreProcessor() and this seems to work ok for the preview window, but the main post still has some problems: [image] There also seems to be some debounce affect that causes my preview window to fire decorateCooked on every other keystroke? Any guidance is appreciated.

Any advice or examples we can offer here @eviltrout?

Thanks! @eviltrout let me know if you have any plugins that I can look to for guidance. I know you recently made a lot of changes to the rendering engine, its possible I am following out-of-date plugin examples.

The details dialect seems quite similar to this. It uses addPreProcessor as well and it seems to work. I might be able to help debug further if you share the code so far in a public place such as a github repo.

Great, I posted the project here: GitHub - nskerl/discourse-sequence-diagram · GitHub Thanks so much.

Looks like your problem is your regular expression in your whitelist was a global. Global regular expressions will retain state on repeated calls based on the last index, so every second call was failing. An easy fix is to change it to: Discourse.Markdown.whiteListTag('div', 'class', 'discourse-sequence-diagram');

wow, yea that would explain the every other keystroke issue. Thanks, ill try this tonight.

Thanks again, that fixed the first issue. Do you have any idea what would cause the rendering to be different between the editor preview (which looks good) and the cooked content? It doesnt look like tags are being stripped anywhere that I can see; the svg output simply has different dimensions when viewed in the editor vs. the cooked. When we hit Reply is the content re-rendered on the backend or should it take the rendered html from the editor? [image] Editor: [image] Cooked: [image]

Have a look at the CookedPostProcessor class. lib/cooked_post_processor.rb main @post.topic_id, Post.types[:regular], ) .order("post_number DESC") .limit(1) .pluck(:cooked) .first return if previous.blank? previous_text = Nokogiri::HTML5.fragment(previous).text.strip

Doesn’t that only act on tags? It does look suspect though, will continue researching lib/cooked_post_processor.rb main @doc .css("aside.quote") .each do |q| post_number = q["data-post"] topic_id = q["data-topic"] if topic_id && post_number comparer = QuoteComparer.new(topic_id.to_i, post_number.to_i, q.css("blockquote").text) q["class"] = ((q["class"] || "") + " quote-post-not-found").strip if comparer.missing? q["class"] = ((q["class"] || "") + " quote-modified").strip if comparer.modified? end end

Help debugging Sequence Diagram plugin

Development

eviltrout (Robin Ward) April 1, 2016, 3:24pm 13

Can you provide more details? How is it acting on the SVG? An example would be good.

Topic		Replies	Views
Plantuml support Product Support	4	2201	February 7, 2023
Mermaid JS Plugin Plugin	17	8275	July 17, 2023
Add diagrams to posts? Feature	4	1623	July 22, 2021
Some users get javascript errors when trying to load our Discourse Product Support	1	3414	January 16, 2023
Discourse yUML Plugin	21	6182	August 10, 2017

Help debugging Sequence Diagram plugin

Related topics