camunda-bpmn-js 0.13.0-alpha.0 → 0.13.0-alpha.1

package/dist/camunda-platform-modeler.development.js

@@ -8280,6 +8280,20 @@
 	 * @param  {Object} options
 	 */
 	Properties.prototype.define = function(target, name, options) {
+
+	  if (!options.writable) {
+
+	    var value = options.value;
+
+	    // use getters for read-only variables to support ES6 proxies
+	    // cf. https://github.com/bpmn-io/internal-docs/issues/386
+	    options = assign({}, options, {
+	      get: function() { return value; }
+	    });
+
+	    delete options.value;
+	  }
+
 	  Object.defineProperty(target, name, options);
 	};
 
@@ -25688,14 +25702,23 @@
 	  // the touch recognizer
 	  var recognizer;
 
-	  function handler(type) {
+	  function handler(type, buttonType) {
 
 	    return function(event) {
 
-	      interactionEvents.fire(type, event);
+	      var gfx = getGfx(event.target),
+	          element = gfx && elementRegistry.get(gfx);
+
+	      // translate into an actual mouse click event
+	      if (buttonType) {
+	        event.srcEvent.button = buttonType;
+	      }
+
+	      return interactionEvents.fire(type, event, element);
 	    };
 	  }
 
+
 	  function getGfx(target) {
 	    var node = closest(target, 'svg, .djs-element', true);
 	    return node;
@@ -25706,10 +25729,6 @@
 	    // touch recognizer
 	    recognizer = createTouchRecognizer(svg);
 
-	    recognizer.on('doubletap', handler('element.dblclick'));
-
-	    recognizer.on('tap', handler('element.click'));
-
 	    function startGrabCanvas(event) {
 
 	      var lx = 0, ly = 0;
@@ -25777,6 +25796,9 @@
 	      recognizer.on('pinchcancel', end);
 	    }
 
+	    recognizer.on('tap', handler('element.click'));
+	    recognizer.on('doubletap', handler('element.dblclick', 1));
+
 	    recognizer.on('panstart', startGrab);
 	    recognizer.on('press', startGrab);
 
@@ -35900,7 +35922,7 @@
 	    return this._createEntries(element, DATA_OBJECT_REFERENCE);
 	  }
 
-	  if (is$1(businessObject, 'bpmn:DataStoreReference')) {
+	  if (is$1(businessObject, 'bpmn:DataStoreReference') && !is$1(element.parent, 'bpmn:Collaboration')) {
 	    return this._createEntries(element, DATA_STORE_REFERENCE);
 	  }
 
@@ -39901,7 +39923,7 @@
 
 	  function activateDirectEdit(element, force) {
 	    if (force ||
-	        isAny(element, [ 'bpmn:Task', 'bpmn:TextAnnotation', 'bpmn:Group' ]) ||
+	        isAny(element, [ 'bpmn:Task', 'bpmn:TextAnnotation' ]) ||
 	        isCollapsedSubProcess(element)) {
 
 	      directEditing.activate(element);
@@ -41243,122 +41265,97 @@
 	    }
 	  });
 
-	  function ensureCollaboration(context) {
-	    var parent = context.parent,
-	        collaboration;
-
+	  // turn process into collaboration when creating first participant
+	  function getOrCreateCollaboration() {
 	    var rootElement = canvas.getRootElement();
 
 	    if (is$1(rootElement, 'bpmn:Collaboration')) {
-	      collaboration = rootElement;
-	    } else {
-
-	      // update root element by making collaboration
-	      collaboration = modeling.makeCollaboration();
-
-	      // re-use process when creating first participant
-	      context.process = parent;
+	      return rootElement;
 	    }
 
-	    context.parent = collaboration;
+	    return modeling.makeCollaboration();
 	  }
 
-	  // turn process into collaboration before adding participant
-	  this.preExecute('shape.create', function(context) {
-	    var parent = context.parent,
-	        shape = context.shape;
-
-	    if (is$1(shape, 'bpmn:Participant') && is$1(parent, 'bpmn:Process')) {
-	      ensureCollaboration(context);
-	    }
-	  }, true);
-
-	  this.execute('shape.create', function(context) {
-	    var process = context.process,
-	        shape = context.shape;
-
-	    if (process) {
-	      context.oldProcessRef = shape.businessObject.processRef;
-
-	      // re-use process when creating first participant
-	      shape.businessObject.processRef = process.businessObject;
-	    }
-	  }, true);
+	  // when creating mutliple elements through `elements.create` parent must be set to collaboration
+	  // and passed to `shape.create` as hint
+	  this.preExecute('elements.create', HIGH_PRIORITY$9, function(context) {
+	    var elements = context.elements,
+	        parent = context.parent,
+	        participant = findParticipant(elements),
+	        hints;
 
-	  this.revert('shape.create', function(context) {
-	    var process = context.process,
-	        shape = context.shape;
+	    if (participant && is$1(parent, 'bpmn:Process')) {
+	      context.parent = getOrCreateCollaboration();
 
-	    if (process) {
+	      hints = context.hints = context.hints || {};
 
-	      // re-use process when creating first participant
-	      shape.businessObject.processRef = context.oldProcessRef;
+	      hints.participant = participant;
+	      hints.process = parent;
+	      hints.processRef = getBusinessObject(participant).get('processRef');
 	    }
 	  }, true);
 
-	  this.postExecute('shape.create', function(context) {
-	    var process = context.process,
+	  // when creating single shape through `shape.create` parent must be set to collaboration
+	  // unless it was already set through `elements.create`
+	  this.preExecute('shape.create', function(context) {
+	    var parent = context.parent,
 	        shape = context.shape;
 
-	    if (process) {
-
-	      // move children from process to participant
-	      var processChildren = process.children.slice();
+	    if (is$1(shape, 'bpmn:Participant') && is$1(parent, 'bpmn:Process')) {
+	      context.parent = getOrCreateCollaboration();
 
-	      modeling.moveElements(processChildren, { x: 0, y: 0 }, shape);
+	      context.process = parent;
+	      context.processRef = getBusinessObject(shape).get('processRef');
 	    }
-
 	  }, true);
 
-	  // turn process into collaboration when creating participants
-	  this.preExecute('elements.create', HIGH_PRIORITY$9, function(context) {
-	    var elements = context.elements,
-	        parent = context.parent,
-	        participant;
-
-	    var hasParticipants = findParticipant(elements);
-
-	    if (hasParticipants && is$1(parent, 'bpmn:Process')) {
-	      ensureCollaboration(context);
-
-	      participant = findParticipant(elements);
+	  // #execute necessary because #preExecute not called on CommandStack#redo
+	  this.execute('shape.create', function(context) {
+	    var hints = context.hints || {},
+	        process = context.process || hints.process,
+	        shape = context.shape,
+	        participant = hints.participant;
 
-	      context.oldProcessRef = participant.businessObject.processRef;
+	    // both shape.create and elements.create must be handled
+	    if (process && (!participant || shape === participant)) {
 
-	      // re-use process when creating first participant
-	      participant.businessObject.processRef = parent.businessObject;
+	      // monkey-patch process ref
+	      getBusinessObject(shape).set('processRef', getBusinessObject(process));
 	    }
 	  }, true);
 
-	  this.revert('elements.create', function(context) {
-	    var elements = context.elements,
-	        process = context.process,
-	        participant;
+	  this.revert('shape.create', function(context) {
+	    var hints = context.hints || {},
+	        process = context.process || hints.process,
+	        processRef = context.processRef || hints.processRef,
+	        shape = context.shape,
+	        participant = hints.participant;
 
-	    if (process) {
-	      participant = findParticipant(elements);
+	    // both shape.create and elements.create must be handled
+	    if (process && (!participant || shape === participant)) {
 
-	      // re-use process when creating first participant
-	      participant.businessObject.processRef = context.oldProcessRef;
+	      // monkey-patch process ref
+	      getBusinessObject(shape).set('processRef', processRef);
 	    }
 	  }, true);
 
-	  this.postExecute('elements.create', function(context) {
-	    var elements = context.elements,
-	        process = context.process,
-	        participant;
+	  this.postExecute('shape.create', function(context) {
+	    var hints = context.hints || {},
+	        process = context.process || context.hints.process,
+	        shape = context.shape,
+	        participant = hints.participant;
 
 	    if (process) {
-	      participant = findParticipant(elements);
-
-	      // move children from process to first participant
-	      var processChildren = process.children.slice();
+	      var children = process.children.slice();
 
-	      modeling.moveElements(processChildren, { x: 0, y: 0 }, participant);
+	      // both shape.create and elements.create must be handled
+	      if (!participant) {
+	        modeling.moveElements(children, { x: 0, y: 0 }, shape);
+	      } else if (shape === participant) {
+	        modeling.moveElements(children, { x: 0, y: 0 }, participant);
+	      }
 	    }
-
 	  }, true);
-
 	}
 
 	CreateParticipantBehavior$1.$inject = [
@@ -44779,7 +44776,9 @@
 	    var rootElement = canvas.getRootElement(),
 	        rootElementBo = rootElement.businessObject;
 
-	    moddle.ids.unclaim(rootElementBo.id);
+	    if (is$1(rootElement, 'bpmn:Collaboration')) {
+	      moddle.ids.unclaim(rootElementBo.id);
+	    }
 	  });
 	}
 
@@ -48727,6 +48726,10 @@
 	};
 
 	BpmnFactory.prototype._ensureId = function(element) {
+	  if (element.id) {
+	    this._model.ids.claim(element.id, element);
+	    return;
+	  }
 
 	  // generate semantic ids for elements
 	  // bpmn:SequenceFlow -> SequenceFlow_ID
@@ -48797,7 +48800,8 @@
 
 	BpmnFactory.prototype.createDiEdge = function(semantic, waypoints, attrs) {
 	  return this.create('bpmndi:BPMNEdge', assign({
-	    bpmnElement: semantic
+	    bpmnElement: semantic,
+	    waypoint: this.createDiWaypoints(waypoints)
 	  }, attrs));
 	};
 
@@ -52982,12 +52986,26 @@
 	    // TODO @barmac: remove once we drop bpmn.io properties
 	    ensureLegacySupport(assignedDi);
 
-	    self._commandStack.execute('element.updateProperties', {
-	      element: element,
-	      properties: {
-	        di: assignedDi
-	      }
-	    });
+	    if (element.labelTarget) {
+
+	      // set label colors as bpmndi:BPMNLabel#color
+	      self._commandStack.execute('element.updateModdleProperties', {
+	        element: element,
+	        moddleElement: element.businessObject.di.label,
+	        properties: {
+	          color: di['background-color']
+	        }
+	      });
+	    } else {
+
+	      // set colors bpmndi:BPMNEdge or bpmndi:BPMNShape
+	      self._commandStack.execute('element.updateProperties', {
+	        element: element,
+	        properties: {
+	          di: assignedDi
+	        }
+	      });
+	    }
 	  });
 
 	};
@@ -56197,7 +56215,7 @@
 
 	    create.start(event, [ subProcess, startEvent ], {
 	      hints: {
-	        autoSelect: [ startEvent ]
+	        autoSelect: [ subProcess ]
 	      }
 	    });
 	  }
@@ -61460,7 +61478,7 @@
 	    descriptionLoaded
 	  } = props; // set-up layout context
 
-	  const [layout, setLayout] = l(createLayoutContext(layoutConfig));
+	  const [layout, setLayout] = l(createLayout(layoutConfig));
 	  y$1(() => {
 	    if (typeof layoutChanged === 'function') {
 	      layoutChanged(layout);
@@ -61472,7 +61490,9 @@
 	  };
 
 	  const setLayoutForKey = (key, config) => {
-	    setLayout(set(layout, key, config));
+	    const newLayout = assign({}, layout);
+	    set(newLayout, key, config);
+	    setLayout(newLayout);
 	  };
 
 	  const layoutContext = {
@@ -61531,7 +61551,7 @@
 	  });
 	} // helpers //////////////////
 
-	function createLayoutContext(overrides) {
+	function createLayout(overrides) {
 	  return { ...DEFAULT_LAYOUT,
 	    ...overrides
 	  };
@@ -62275,6 +62295,7 @@
 	      disabled: disabled,
 	      class: "bio-properties-panel-input",
 	      onInput: handleInput,
+	      "aria-label": value || '<empty>',
 	      onFocus: onFocus,
 	      onBlur: onBlur,
 	      value: value || ''
@@ -68067,7 +68088,20 @@
 	    return () => {
 	      eventBus.off('elements.changed', onElementsChanged);
 	    };
-	  }, [selectedElement]); // (2c) provided entries changed
+	  }, [selectedElement]); // (2c) root element changed
+
+	  y$1(() => {
+	    const onRootAdded = e => {
+	      const element = e.element;
+
+	      _update(element);
+	    };
+
+	    eventBus.on('root.added', onRootAdded);
+	    return () => {
+	      eventBus.off('root.added', onRootAdded);
+	    };
+	  }, [selectedElement]); // (2d) provided entries changed
 
 	  y$1(() => {
 	    const onProvidersChanged = () => {
@@ -68078,7 +68112,7 @@
 	    return () => {
 	      eventBus.off('propertiesPanel.providersChanged', onProvidersChanged);
 	    };
-	  }, [selectedElement]); // (2d) element templates changed
+	  }, [selectedElement]); // (2e) element templates changed
 
 	  y$1(() => {
 	    const onTemplatesChanged = () => {
@@ -68168,23 +68202,20 @@
 	    this._layoutConfig = layoutConfig;
 	    this._descriptionConfig = descriptionConfig;
 	    this._container = domify('<div style="height: 100%" class="bio-properties-panel-container" input-handle-modified-keys="y,z"></div>');
-
-	    this._eventBus.on('root.added', event => {
-	      const {
-	        element
-	      } = event;
-
-	      this._render(element);
-
+	    eventBus.on('diagram.init', () => {
 	      if (parent) {
 	        this.attachTo(parent);
 	      }
-
-	      return;
 	    });
+	    eventBus.on('diagram.destroy', () => {
+	      this.detach();
+	    });
+	    eventBus.on('root.added', event => {
+	      const {
+	        element
+	      } = event;
 
-	    eventBus.on('root.removed', () => {
-	      this._destroy();
+	      this._render(element);
 	    });
 	  }
 	  /**
@@ -69914,7 +69945,7 @@
 	    isEdited: isEdited$1
 	  }, {
 	    id: 'completionCondition',
-	    component: o$2(CompletionCondition, {
+	    component: o$2(CompletionCondition$1, {
 	      element: element
 	    }),
 	    isEdited: isEdited$1
@@ -69949,7 +69980,7 @@
 	  });
 	}
 
-	function CompletionCondition(props) {
+	function CompletionCondition$1(props) {
 	  const {
 	    element
 	  } = props;
@@ -70123,7 +70154,7 @@
 	 */
 
 
-	function getCompletionCondition(element) {
+	function getCompletionCondition$1(element) {
 	  return getProperty$2(element, 'completionCondition');
 	}
 	/**
@@ -70136,7 +70167,7 @@
 
 
 	function getCompletionConditionValue(element) {
-	  const completionCondition = getCompletionCondition(element);
+	  const completionCondition = getCompletionCondition$1(element);
 	  return getBody(completionCondition);
 	}
 
@@ -82949,12 +82980,12 @@
 	  const translate = useService('translate'),
 	        injector = useService('injector');
 	  const menuItems = [{
-	    entry: translate('Unlink'),
-	    action: () => unlinkTemplate(element, injector)
-	  }, {
 	    entry: o$2(NotFoundText, {})
 	  }, {
 	    separator: true
+	  }, {
+	    entry: translate('Unlink'),
+	    action: () => unlinkTemplate(element, injector)
 	  }, {
 	    entry: o$2(RemoveTemplate, {}),
 	    action: () => removeTemplate(element, injector)
@@ -82997,14 +83028,14 @@
 	  const translate = useService('translate'),
 	        injector = useService('injector');
 	  const menuItems = [{
-	    entry: translate('Update'),
-	    action: () => updateTemplate(element, newerTemplate, injector)
-	  }, {
 	    entry: o$2(UpdateAvailableText, {
 	      newerTemplate: newerTemplate
 	    })
 	  }, {
 	    separator: true
+	  }, {
+	    entry: translate('Update'),
+	    action: () => updateTemplate(element, newerTemplate, injector)
 	  }, {
 	    entry: translate('Unlink'),
 	    action: () => unlinkTemplate(element, injector)
@@ -83189,6 +83220,287 @@
 	  });
 	}
 
+	var e$2,
+	    o$3 = {};
+
+	function n$1(r, t, e) {
+	  if (3 === r.nodeType) {
+	    var o = "textContent" in r ? r.textContent : r.nodeValue || "";
+
+	    if (!1 !== n$1.options.trim) {
+	      var a = 0 === t || t === e.length - 1;
+	      if ((!(o = o.match(/^[\s\n]+$/g) && "all" !== n$1.options.trim ? " " : o.replace(/(^[\s\n]+|[\s\n]+$)/g, "all" === n$1.options.trim || a ? "" : " ")) || " " === o) && e.length > 1 && a) return null;
+	    }
+
+	    return o;
+	  }
+
+	  if (1 !== r.nodeType) return null;
+	  var p = String(r.nodeName).toLowerCase();
+	  if ("script" === p && !n$1.options.allowScripts) return null;
+	  var l,
+	      s,
+	      u = n$1.h(p, function (r) {
+	    var t = r && r.length;
+	    if (!t) return null;
+
+	    for (var e = {}, o = 0; o < t; o++) {
+	      var a = r[o],
+	          i = a.name,
+	          p = a.value;
+	      "on" === i.substring(0, 2) && n$1.options.allowEvents && (p = new Function(p)), e[i] = p;
+	    }
+
+	    return e;
+	  }(r.attributes), (s = (l = r.childNodes) && Array.prototype.map.call(l, n$1).filter(i$2)) && s.length ? s : null);
+	  return n$1.visitor && n$1.visitor(u), u;
+	}
+
+	var a$2,
+	    i$2 = function (r) {
+	  return r;
+	},
+	    p$2 = {};
+
+	function l$1(r) {
+	  var t = (r.type || "").toLowerCase(),
+	      e = l$1.map;
+	  e && e.hasOwnProperty(t) ? (r.type = e[t], r.props = Object.keys(r.props || {}).reduce(function (t, e) {
+	    var o;
+	    return t[(o = e, o.replace(/-(.)/g, function (r, t) {
+	      return t.toUpperCase();
+	    }))] = r.props[e], t;
+	  }, {})) : r.type = t.replace(/[^a-z0-9-]/i, "");
+	}
+
+	var Markup = (function (t) {
+	  function i() {
+	    t.apply(this, arguments);
+	  }
+
+	  return t && (i.__proto__ = t), (i.prototype = Object.create(t && t.prototype)).constructor = i, i.setReviver = function (r) {
+	    a$2 = r;
+	  }, i.prototype.shouldComponentUpdate = function (r) {
+	    var t = this.props;
+	    return r.wrap !== t.wrap || r.type !== t.type || r.markup !== t.markup;
+	  }, i.prototype.setComponents = function (r) {
+	    if (this.map = {}, r) for (var t in r) if (r.hasOwnProperty(t)) {
+	      var e = t.replace(/([A-Z]+)([A-Z][a-z0-9])|([a-z0-9]+)([A-Z])/g, "$1$3-$2$4").toLowerCase();
+	      this.map[e] = r[t];
+	    }
+	  }, i.prototype.render = function (t) {
+	    var i = t.wrap;
+	    void 0 === i && (i = !0);
+
+	    var s,
+	        u = t.type,
+	        c = t.markup,
+	        m = t.components,
+	        v = t.reviver,
+	        f = t.onError,
+	        d = t["allow-scripts"],
+	        h$1 = t["allow-events"],
+	        y = t.trim,
+	        w = function (r, t) {
+	      var e = {};
+
+	      for (var o in r) Object.prototype.hasOwnProperty.call(r, o) && -1 === t.indexOf(o) && (e[o] = r[o]);
+
+	      return e;
+	    }(t, ["wrap", "type", "markup", "components", "reviver", "onError", "allow-scripts", "allow-events", "trim"]),
+	        C = v || this.reviver || this.constructor.prototype.reviver || a$2 || a;
+
+	    this.setComponents(m);
+	    var g = {
+	      allowScripts: d,
+	      allowEvents: h$1,
+	      trim: y
+	    };
+
+	    try {
+	      s = function (r, t, a, i, s) {
+	        var u = function (r, t) {
+	          var o,
+	              n,
+	              a,
+	              i,
+	              p = "html" === t ? "text/html" : "application/xml";
+	          "html" === t ? (i = "body", a = "<!DOCTYPE html>\n<html><body>" + r + "</body></html>") : (i = "xml", a = '<?xml version="1.0" encoding="UTF-8"?>\n<xml>' + r + "</xml>");
+
+	          try {
+	            o = new DOMParser().parseFromString(a, p);
+	          } catch (r) {
+	            n = r;
+	          }
+
+	          if (o || "html" !== t || ((o = e$2 || (e$2 = function () {
+	            if (document.implementation && document.implementation.createHTMLDocument) return document.implementation.createHTMLDocument("");
+	            var r = document.createElement("iframe");
+	            return r.style.cssText = "position:absolute; left:0; top:-999em; width:1px; height:1px; overflow:hidden;", r.setAttribute("sandbox", "allow-forms"), document.body.appendChild(r), r.contentWindow.document;
+	          }())).open(), o.write(a), o.close()), o) {
+	            var l = o.getElementsByTagName(i)[0],
+	                s = l.firstChild;
+	            return r && !s && (l.error = "Document parse failed."), s && "parsererror" === String(s.nodeName).toLowerCase() && (s.removeChild(s.firstChild), s.removeChild(s.lastChild), l.error = s.textContent || s.nodeValue || n || "Unknown error", l.removeChild(s)), l;
+	          }
+	        }(r, t);
+
+	        if (u && u.error) throw new Error(u.error);
+	        var c = u && u.body || u;
+	        l$1.map = i || p$2;
+
+	        var m = c && function (r, t, e, a) {
+	          return n$1.visitor = t, n$1.h = e, n$1.options = a || o$3, n$1(r);
+	        }(c, l$1, a, s);
+
+	        return l$1.map = null, m && m.props && m.props.children || null;
+	      }(c, u, C, this.map, g);
+	    } catch (r) {
+	      f ? f({
+	        error: r
+	      }) : "undefined" != typeof console && console.error && console.error("preact-markup: " + r);
+	    }
+
+	    if (!1 === i) return s || null;
+	    var x = w.hasOwnProperty("className") ? "className" : "class",
+	        b = w[x];
+	    return b ? b.splice ? b.splice(0, 0, "markup") : "string" == typeof b ? w[x] += " markup" : "object" == typeof b && (b.markup = !0) : w[x] = "markup", C("div", w, s || null);
+	  }, i;
+	})(p);
+
+	/**
+	 * Copied from existing form-js#Sanitizer
+	 * cf. https://github.com/bpmn-io/form-js/blob/master/packages/form-js-viewer/src/render/components/Sanitizer.js
+	 */
+	const NODE_TYPE_TEXT = 3,
+	      NODE_TYPE_ELEMENT = 1;
+	const ALLOWED_NODES = ['h1', 'h2', 'h3', 'h4', 'h5', 'span', 'em', 'a', 'p', 'div', 'ul', 'ol', 'li', 'hr', 'blockquote', 'img', 'pre', 'code', 'br', 'strong'];
+	const ALLOWED_ATTRIBUTES = ['align', 'alt', 'class', 'href', 'id', 'name', 'rel', 'target', 'src'];
+	const ALLOWED_URI_PATTERN = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i; // eslint-disable-line no-useless-escape
+
+	const ATTR_WHITESPACE_PATTERN = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g; // eslint-disable-line no-control-regex
+
+	const FORM_ELEMENT = document.createElement('form');
+	/**
+	 * Sanitize a HTML string and return the cleaned, safe version.
+	 *
+	 * @param {string} html
+	 * @return {string}
+	 */
+
+	function sanitizeHTML(html) {
+	  const doc = new DOMParser().parseFromString(`<!DOCTYPE html>\n<html><body><div>${html}`, 'text/html');
+	  doc.normalize();
+	  const element = doc.body.firstChild;
+
+	  if (element) {
+	    sanitizeNode(
+	    /** @type Element */
+	    element);
+	    return new XMLSerializer().serializeToString(element);
+	  } else {
+	    // handle the case that document parsing
+	    // does not work at all, due to HTML gibberish
+	    return '';
+	  }
+	}
+	/**
+	 * Recursively sanitize a HTML node, potentially
+	 * removing it, its children or attributes.
+	 *
+	 * Inspired by https://github.com/developit/snarkdown/issues/70
+	 * and https://github.com/cure53/DOMPurify. Simplified
+	 * for our use-case.
+	 *
+	 * @param {Element} node
+	 */
+
+	function sanitizeNode(node) {
+	  // allow text nodes
+	  if (node.nodeType === NODE_TYPE_TEXT) {
+	    return;
+	  } // disallow all other nodes but Element
+
+
+	  if (node.nodeType !== NODE_TYPE_ELEMENT) {
+	    return node.remove();
+	  }
+
+	  const lcTag = node.tagName.toLowerCase(); // disallow non-whitelisted tags
+
+	  if (!ALLOWED_NODES.includes(lcTag)) {
+	    return node.remove();
+	  }
+
+	  const attributes = node.attributes; // clean attributes
+
+	  for (let i = attributes.length; i--;) {
+	    const attribute = attributes[i];
+	    const name = attribute.name;
+	    const lcName = name.toLowerCase(); // normalize node value
+
+	    const value = attribute.value.trim();
+	    node.removeAttribute(name);
+	    const valid = isValidAttribute(lcTag, lcName, value);
+
+	    if (valid) {
+	      node.setAttribute(name, value);
+	    }
+	  } // force noopener on target="_blank" links
+
+
+	  if (lcTag === 'a' && node.getAttribute('target') === '_blank' && node.getAttribute('rel') !== 'noopener') {
+	    node.setAttribute('rel', 'noopener');
+	  }
+
+	  for (let i = node.childNodes.length; i--;) {
+	    sanitizeNode(
+	    /** @type Element */
+	    node.childNodes[i]);
+	  }
+	}
+	/**
+	 * Validates attributes for validity.
+	 *
+	 * @param {string} lcTag
+	 * @param {string} lcName
+	 * @param {string} value
+	 * @return {boolean}
+	 */
+
+
+	function isValidAttribute(lcTag, lcName, value) {
+	  // disallow most attributes based on whitelist
+	  if (!ALLOWED_ATTRIBUTES.includes(lcName)) {
+	    return false;
+	  } // disallow "DOM clobbering" / polution of document and wrapping form elements
+
+
+	  if ((lcName === 'id' || lcName === 'name') && (value in document || value in FORM_ELEMENT)) {
+	    return false;
+	  }
+
+	  if (lcName === 'target' && value !== '_blank') {
+	    return false;
+	  } // allow valid url links only
+
+
+	  if (lcName === 'href' && !ALLOWED_URI_PATTERN.test(value.replace(ATTR_WHITESPACE_PATTERN, ''))) {
+	    return false;
+	  }
+
+	  return true;
+	}
+
+	function PropertyDescription(props) {
+	  const {
+	    description
+	  } = props;
+	  return description && o$2(Markup, {
+	    markup: sanitizeHTML(description),
+	    trim: false
+	  });
+	}
+
 	const CAMUNDA_ERROR_EVENT_DEFINITION_TYPE$1 = 'camunda:errorEventDefinition',
 	      CAMUNDA_EXECUTION_LISTENER_TYPE = 'camunda:executionListener',
 	      CAMUNDA_FIELD_TYPE = 'camunda:field',
@@ -83358,7 +83670,9 @@
 	    getValue: propertyGetter(element, property, scope),
 	    id,
 	    label,
-	    description,
+	    description: PropertyDescription({
+	      description
+	    }),
 	    setValue: propertySetter(bpmnFactory, commandStack, element, property, scope),
 	    disabled: editable === false
 	  });
@@ -83399,7 +83713,9 @@
 	    id,
 	    label,
 	    getOptions,
-	    description,
+	    description: PropertyDescription({
+	      description
+	    }),
 	    getValue: propertyGetter(element, property, scope),
 	    setValue: propertySetter(bpmnFactory, commandStack, element, property, scope),
 	    disabled: editable === false
@@ -83428,7 +83744,9 @@
 	    getValue: propertyGetter(element, property, scope),
 	    id,
 	    label,
-	    description,
+	    description: PropertyDescription({
+	      description
+	    }),
 	    setValue: propertySetter(bpmnFactory, commandStack, element, property, scope),
 	    validate: propertyValidator(translate, property),
 	    disabled: editable === false
@@ -83455,7 +83773,9 @@
 	    element,
 	    id,
 	    label,
-	    description,
+	    description: PropertyDescription({
+	      description
+	    }),
 	    getValue: propertyGetter(element, property, scope),
 	    setValue: propertySetter(bpmnFactory, commandStack, element, property, scope),
 	    disabled: editable === false
@@ -84218,7 +84538,9 @@
 	    "data-entry-id": id,
 	    children: o$2("div", {
 	      class: "bio-properties-panel-description",
-	      children: text
+	      children: o$2(PropertyDescription, {
+	        description: text
+	      })
 	    })
 	  });
 	}
@@ -84401,7 +84723,9 @@
 	    "data-entry-id": id,
 	    children: o$2("div", {
 	      class: "bio-properties-panel-description",
-	      children: text
+	      children: o$2(PropertyDescription, {
+	        description: text
+	      })
 	    })
 	  });
 	}