<script> tag brake diagram rendering

[TeamNine]

Describe the Bug

VS Code extension is not able to render BPMN diagram when bmpn file contains tags.

Steps to Reproduce

1. Open BPMN file with tag inside
2. Open BPMN Modeller on this file

Expected Behavior

The diagram should be displayed correctly. Same as on demo.bpmn.io

Actual Behavior

Environment

• Host: VS Code editor (extention)
• OS: Windows 10
• Extention version: v0.12.0

[TeamNine]

Example of BPMN with script tag

<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
  xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC"
  xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI"
  xmlns:xsd="http://www.w3.org/2001/XMLSchema"
  xmlns:flowable="http://flowable.org/bpmn" targetNamespace="http://www.flowable.org/processdef" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="8.7.1">
  <process id="mail_sender" name="mail_sender" isExecutable="true">
    <startEvent id="Event_0avkv92">
      <outgoing>Flow_09s2vwb</outgoing>
    </startEvent>
    <sequenceFlow id="Flow_09s2vwb" sourceRef="Event_0avkv92" targetRef="Activity_06276ml" />
    <endEvent id="Event_0vxf97v">
      <incoming>Flow_1k16z0v</incoming>
    </endEvent>
    <sequenceFlow id="Flow_1k16z0v" sourceRef="Activity_06276ml" targetRef="Event_0vxf97v" />
    <scriptTask id="Activity_06276ml">
      <incoming>Flow_09s2vwb</incoming>
      <outgoing>Flow_1k16z0v</outgoing>
      <script><![CDATA[
        def scriptVar = "test123"
        execution.setVariable("myVar", scriptVar)
        ]]>
      </script>
    </scriptTask>
  </process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_mail_sender">
    <bpmndi:BPMNPlane id="BPMNPlane_mail_sender" bpmnElement="mail_sender">
      <bpmndi:BPMNEdge id="Flow_09s2vwb_di" bpmnElement="Flow_09s2vwb">
        <omgdi:waypoint x="188" y="120" />
        <omgdi:waypoint x="240" y="120" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_1k16z0v_di" bpmnElement="Flow_1k16z0v">
        <omgdi:waypoint x="340" y="120" />
        <omgdi:waypoint x="392" y="120" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNShape id="Event_0avkv92_di" bpmnElement="Event_0avkv92">
        <omgdc:Bounds x="152" y="102" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Event_0vxf97v_di" bpmnElement="Event_0vxf97v">
        <omgdc:Bounds x="392" y="102" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_0szr1r4_di" bpmnElement="Activity_06276ml">
        <omgdc:Bounds x="240" y="80" width="100" height="80" />
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</definitions>

[nikku]

Thanks for opening this issue and contributing a PR already! We'd need to root-cause this one before accepting the PR but did not find the time to do so.

[TeamNine]

Thank you for your reply. It looks like for some reason

Looks like " );" from my screenshot, comes directly from this line https://github.com/bpmn-io/vs-code-bpmn-io/blob/8820398b29a4767704fa458f03b7daf1a788298f/src/features/editing/bpmnModelerBuilder.ts#L147 I tried to play with different types of quotes (BPMN uses double quotes and bpmnModelerBuilder use single quote to store variable) but it did not help. Not sure, maybe there are some issues with VSCode view.

[pinussilvestrus]

It looks like for some reason

I am wondering why the BPMN content is added to the DOM at all?

[pinussilvestrus]

Seems to be indeed a problem with the encoding, since on openDiagram (as you already found out) it breaks to correctly set the content to the bpmn-js Modeler and reads the rest as DOM syntax

That's a consequence of the current way of providing the HTML web view content ==> manually creating the whole document. So escaping the stuff could be a workaround.

[pinussilvestrus]

Moving this to backlog since there seems to be no quick fix.