feat(output-properties): render HTML descriptions

Closes #547 Closes #375
bpmn-io · Jan 20, 2022 · 475d6fc · 475d6fc
1 parent 0cbed87
commit 475d6fc
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 1 deletion.
diff --git a/src/provider/element-templates/properties/OutputProperties.js b/src/provider/element-templates/properties/OutputProperties.js
@@ -13,6 +13,8 @@ import { useService } from '../../../hooks';
 
 import { without } from 'min-dash';
 
+import { PropertyDescription } from '../components/PropertyDescription';
+
 import { createElement } from '../../../utils/ElementUtil';
 
 import { createOutputParameter } from '../CreateHelper';
@@ -89,7 +91,9 @@ function Description(props) {
   } = props;
 
   return <div class="bio-properties-panel-entry" data-entry-id={ id }>
-    <div class="bio-properties-panel-description">{ text }</div>
+    <div class="bio-properties-panel-description">
+      <PropertyDescription description={ text } />
+    </div>
   </div>;
 }
 

diff --git a/test/spec/provider/element-templates/properties/OutputProperties.json b/test/spec/provider/element-templates/properties/OutputProperties.json
@@ -58,6 +58,14 @@
           "type": "camunda:outputParameter",
           "source": "notCreated_2"
         }
+      },
+      {
+        "label": "withHtmlDescription",
+        "description": "By the way, you can use <a target='_blank' href=\"https://freemarker.apache.org/\">freemarker templates</a> here",
+        "binding": {
+          "type": "camunda:outputParameter",
+          "source": "html"
+        }
       }
     ]
   },

diff --git a/test/spec/provider/element-templates/properties/OutputProperties.spec.js b/test/spec/provider/element-templates/properties/OutputProperties.spec.js
@@ -165,6 +165,33 @@ describe('provider/element-templates - OutputProperties', function() {
       expect(description.innerText).to.equal('foo bar');
     });
 
+
+    it('should render HTML description', async function() {
+
+      // when
+      await expectSelected('SimpleTask');
+
+      // then
+      const entry = findEntry('SimpleTask-outputParameter-7', container);
+
+      expect(entry).to.exist;
+
+      const description = findEntry('SimpleTask-outputParameter-7-description', entry);
+
+      expect(description).to.exist;
+      expect(description.innerHTML).to.eql(
+        '<div class="bio-properties-panel-description">' +
+          '<div class="markup">' +
+            '<div xmlns="http://www.w3.org/1999/xhtml">' +
+              'By the way, you can use ' +
+              '<a href="https://freemarker.apache.org/" target="_blank" rel="noopener">freemarker templates</a> '+
+              'here' +
+            '</div>' +
+          '</div>' +
+        '</div>'
+      );
+    });
+
   });