Giters

asciidoctor / asciidoctor-kroki

Asciidoctor.js extension to convert diagrams to images using Kroki!

Home Page:https://kroki.io/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ditaa text not rendered in inline svgs

cexbrayat opened this issue · comments

commented

First, thank you for kroki!

I'm adding a ditaa diagram to a document rendered via asciidoctor.js, but the text is not properly rendered when using the inline SVG option.

[ditaa, hello, svg, align=center, opts=inline]
----
+---------+
|  Hello  |
+---------+
----

produces the following SVG (note that the text is in a CDATA comment):

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="98" version="1.0" shape-rendering="geometricPrecision"><defs><filter id="shadowBlur" x="0" y="0" width="200%" height="200%"><feOffset in="SourceGraphic" dx="3.0003002" dy="3.0003002" result="offOut"></feOffset><feGaussianBlur in="offOut" stdDeviation="3"></feGaussianBlur></filter></defs><g stroke-width="1" stroke-linecap="square" stroke-linejoin="round"><rect x="0" y="0" width="150" height="98" style="fill: #ffffff"></rect><path stroke="#969696" fill="#969696" filter="url(#shadowBlur)" d="M25.0 35.0 L125.0 35.0 L125.0 63.0 L25.0 63.0 z"></path><path stroke="#000000" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" fill="white" d="M25.0 35.0 L125.0 35.0 L125.0 63.0 L25.0 63.0 z"></path>

   <text x="55" y="54" font-family="sans-serif" font-size="15" stroke="none" fill="#000000"><!--[CDATA[Hello]]--></text>

</g></svg>

Rendered image

Capture d’écran 2022-11-28 à 18 03 17

If I remove opts=inline then the image is working perfectly:

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE1MCIgaGVpZ2h0PSI5OCIgdmVyc2lvbj0iMS4wIiBzaGFwZS1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiI+PGRlZnM+PGZpbHRlciBpZD0ic2hhZG93Qmx1ciIgeD0iMCIgeT0iMCIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSI+PGZlT2Zmc2V0IGluPSJTb3VyY2VHcmFwaGljIiBkeD0iMy4wMDAzMDAyIiBkeT0iMy4wMDAzMDAyIiByZXN1bHQ9Im9mZk91dCI+PC9mZU9mZnNldD48ZmVHYXVzc2lhbkJsdXIgaW49Im9mZk91dCIgc3RkRGV2aWF0aW9uPSIzIj48L2ZlR2F1c3NpYW5CbHVyPjwvZmlsdGVyPjwvZGVmcz48ZyBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxNTAiIGhlaWdodD0iOTgiIHN0eWxlPSJmaWxsOiAjZmZmZmZmIj48L3JlY3Q+PHBhdGggc3Ryb2tlPSIjOTY5Njk2IiBmaWxsPSIjOTY5Njk2IiBmaWx0ZXI9InVybCgjc2hhZG93Qmx1cikiIGQ9Ik0yNS4wIDM1LjAgTDEyNS4wIDM1LjAgTDEyNS4wIDYzLjAgTDI1LjAgNjMuMCB6Ij48L3BhdGg+PHBhdGggc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjEuMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJ3aGl0ZSIgZD0iTTI1LjAgMzUuMCBMMTI1LjAgMzUuMCBMMTI1LjAgNjMuMCBMMjUuMCA2My4wIHoiPjwvcGF0aD48dGV4dCB4PSI1NSIgeT0iNTQiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE1IiBzdHJva2U9Im5vbmUiIGZpbGw9IiMwMDAwMDAiPjwhW0NEQVRBW0hlbGxvXV0+PC90ZXh0PjwvZz48L3N2Zz4=" alt="hello-2">

rendering:
Capture d’écran 2022-11-28 à 18 06 13

I'm using "asciidoctor-kroki": "0.16.0" and "asciidoctor": "2.2.6"

Am I missing something?

commented

I cannot reproduce this issue using:

$ npx asciidoctor -r asciidoctor-kroki --embedded -a allow-uri-read doc.adoc -o -
<div class="imageblock text-center kroki">
<div class="content">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="98" version="1.0" shape-rendering="geometricPrecision"><defs><filter id="shadowBlur" x="0" y="0" width="200%" height="200%"><feOffset in="SourceGraphic" dx="3.0003002" dy="3.0003002" result="offOut"></feOffset><feGaussianBlur in="offOut" stdDeviation="3"></feGaussianBlur></filter></defs><g stroke-width="1" stroke-linecap="square" stroke-linejoin="round"><rect x="0" y="0" width="150" height="98" style="fill: #ffffff"></rect><path stroke="#969696" fill="#969696" filter="url(#shadowBlur)" d="M25.0 35.0 L125.0 35.0 L125.0 63.0 L25.0 63.0 z"></path><path stroke="#000000" stroke-width="1.0" stroke-linecap="round" stroke-linejoin="round" fill="white" d="M25.0 35.0 L125.0 35.0 L125.0 63.0 L25.0 63.0 z"></path><text x="55" y="54" font-family="sans-serif" font-size="15" stroke="none" fill="#000000"><![CDATA[Hello]]></text></g></svg>
</div>
</div>
$ cat doc.adoc
[ditaa, hello, svg, align=center, opts=inline]
----
+---------+
|  Hello  |
+---------+
----

The text is indeed in a <![CDATA[Hello]]> but the text is shown on Chrome, Firefox and Safari.

In your case the CDATA is transformed into a comment: <!--[CDATA[Hello]]-->. My guess is that you have some JavaScript running on this page that must convert <![CDATA[Hello]]> to <!--[CDATA[Hello]]-->. Maybe it's a security setting?

commented

Ho! you're probably right, sorry about that!

commented

No worries, let me know if there's something to be done on my side.