Links in plantuml don't seem to be rendered anymore

bharatrajagopalan commented 3 years ago

I am not sure when this happened, but I believe it is related to the upgrade of Gatsby to the latest version 2.31.1

Previously links in plantuml would appear with in the <svg/> tag as <a href=<link> xlink:href=link> when inspected on the browser page.

Now it just appears as<a xLinkHref= > which is the react specification - but this appears when I inspect the link on the browser dev console, which suggests that this is not being processed into the html spec by Gatsby

When I use the plantuml jar directly I get the original svg as before.

So my thoughts are

the plugin hasn't changed, (0.7.0)
the plugin is doing the right thing by converting the svg generated to React requirements, but for some reason Gatsby isn't processing this anymore and rendering the static html with the svg input provided.

I just wonder if this means that Gatsby bypasses the output returned by the plugin now and just takes it directly? Have others seen this issue?

an example of a plantuml diagram with a link: http://www.plantuml.com/plantuml/uml/SoWkIImgAStDuNBAJrBGjLDmpCbCJbMmKeYEJi_FJyz9rKlEprN8ICt9oO-DvN98pKi1gWK0

the link looks like this in regular plantuml rendered html

<a xmlns="http://www.w3.org/2000/svg" href="google.com" target="_top" title="google.com" xlink:actuate="onRequest" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="google.com" xlink:show="new" xlink:title="google.com" xlink:type="simple"><text fill="#0000FF" font-family="sans-serif" font-size="13" lengthAdjust="spacing" text-decoration="underline" textLength="30" x="35.5" y="66.3638">hello</text></a>

however on gatsby when inspect the link it shows up as below - and the link just behaves like text

<a class="bx--link Link-module--link--PAAZ2" xLinkHref="#manage_organization-on_success_manage_org_hierarchy-event-xml" target="_self" xLinkTitle="#manage_organization-on_success_manage_org_hierarchy-event-xml" xLinkActuate="onRequest" xLinkShow="new" xLinkType="simple"><text fill="#0000FF" font-family="IBM Plex Sans" font-size="13" lengthAdjust="spacing" text-decoration="underline" textLength="253" x="542.5" y="571.125">ON_SUCCESS_MANAGE_ORG_HIERARCHY</text></a>

I vaguely remember that links inside svg had href as an attribute in the a tag previously in the Gatsby rendered page when inspected them - so I am guessing something must have changed in Gatsby. Is the fixable in this plugin or should I raise an issue in the Gatsby GitHub repo?

bharatrajagopalan commented 3 years ago

I have done some analysis and it looks like cheerio removes the href tag in <a

in index.js line 201

const diagramAsSvg = await runplantuml(diagramAsText)

this svg variable has href in the a tag along with xlink:href

<a
href="https://github.ibm.com/ixliberty/" target="_self" title="https://github.ibm.com/ixliberty/" xlink:actuate="onRequest"
xlink:href="https://github.ibm.com/ixliberty/" xlink:show="new" xlink:title="https://github.ibm.com/ixliberty/" xlink:type="simple">

In the next line

const $ = cheerio.load(diagramAsSvg)

when I print console.log ($.html())

the href and title attributes disappear from the output

<a xlink:href="/oms/product-and-pricing/overview#executeflowmanagecategory" target="_self"
xlink:title="/oms/product-and-pricing/overview#executeflowmanagecategory" xlink:actuate="onRequest" xlink:show="new" xlink:type="simple">

baerrach commented 3 years ago

This looks like https://github.com/baerrach/gatsby-remark-plantuml#with-gatsby-plugin-mdx

The way this plugin works is to hack the html into the gatsby output stream, but it doesn't get processed properly by the React framework and there are some quirky edgecases where things fall apart.

As listed in some of the links in the bullet list, the correct way to do this is to right a MDX component that understands react and replaces the

However that is way more work than I want to invest in this plugin. Pull Requests welcome.

bharatrajagopalan commented 3 years ago

@baerrach Understood, but I think I have a quick fix within what you have already written

the following worked for me.

just needed to change line 203 in index.js from

const $ = cheerio.load(diagramAsSvg)

to

 const $ = cheerio.load(diagramAsSvg, {
        xmlMode: true                     
      });

Now I get the following when I inspect the link (note the extra href - I think xmlMode was needed to handle namespaces correctly as href appears twice i.e. in default namespace as well as the xlink namespace

<a href="https://jsw.ibm.com/browse/ILEMS-247" class="bx--link Link-module--link--PAAZ2" target="_self" title="https://jsw.ibm.com/browse/ILEMS-247" xLinkActuate="onRequest" xLinkHref="https://jsw.ibm.com/browse/ILEMS-247" xLinkShow="new" xLinkTitle="https://jsw.ibm.com/browse/ILEMS-247" xLinkType="simple">

And yes the link works now - in safari, chrome and Firefox as tested.

It's not perfect as you state above, but good enough for now.

Is this acceptable as a quick fix for now? If yes are you ok to add this in or should I raise this a pull request?

EDIT: Adding a screenshot for your reference

baerrach commented 3 years ago

Yes, pull request welcome.

Also check the test results

bharatrajagopalan commented 3 years ago

Still working on the pull request. In the meantime I have created a patch using the excellent patch-package (https://github.com/ds300/patch-package) so that npm install automatically patch the plugin in node_modules

Copy the below and put it in patches/gatsby-remark-plantuml+0.7.0.patch in your Gatsby project folder after following the installation instructions in the above link

diff --git a/node_modules/gatsby-remark-plantuml/index.js b/node_modules/gatsby-remark-plantuml/index.js
index da3f7fc..989c6a2 100644
--- a/node_modules/gatsby-remark-plantuml/index.js
+++ b/node_modules/gatsby-remark-plantuml/index.js
@@ -199,7 +199,10 @@ const plantuml = async (gatsbyNodeHelpers, pluginOptions = {}) => {

     try {
       const diagramAsSvg = await runplantuml(diagramAsText)
-      const $ = cheerio.load(diagramAsSvg)
+      
+      const $ = cheerio.load(diagramAsSvg, {
+        xmlMode: true                     
+    });

       // Set max width
       if (pluginOptions.maxWidth) {
@@ -223,6 +226,11 @@ const plantuml = async (gatsbyNodeHelpers, pluginOptions = {}) => {
       node.lang = undefined
       node.children = undefined
       node.value = $.html(`svg`)
+
+    
+
+
+
     } catch (err) {
       let specificReason = ``
       if (err instanceof PlantUmlError) {

baerrach / gatsby-remark-plantuml

Links in plantuml don't seem to be rendered anymore #21