camunda-bpmn-js 0.24.1 → 1.1.0

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

@@ -22147,6 +22147,9 @@
 
 	};
 
+	Overlays.prototype.isShown = function() {
+	  return this._overlayRoot.style.display !== 'none';
+	};
 
 	Overlays.prototype.show = function() {
 	  setVisible$1(this._overlayRoot);
@@ -28053,7 +28056,9 @@
 
 
 	/**
-	 * Trigger context pad action.
+	 * Trigger context pad via DOM event.
+	 *
+	 * The entry to trigger is determined by the target element.
 	 *
 	 * @param  {string} action
 	 * @param  {Event} event
@@ -28061,10 +28066,7 @@
 	 */
 	ContextPad.prototype.trigger = function(action, event, autoActivate) {
 
-	  var target = this._current.target,
-	      entries = this._current.entries,
-	      entry,
-	      handler,
+	  var entry,
 	      originalEvent,
 	      button = event.delegateTarget || event.target;
 
@@ -28072,19 +28074,45 @@
 	    return event.preventDefault();
 	  }
 
-	  entry = entries[attr$1(button, 'data-action')];
-	  handler = entry.action;
-
+	  entry = attr$1(button, 'data-action');
 	  originalEvent = event.originalEvent || event;
 
+	  return this.triggerEntry(entry, action, originalEvent, autoActivate);
+	};
+
+	/**
+	 * Trigger context pad entry entry.
+	 *
+	 * @param {string} entryId
+	 * @param {string} action
+	 * @param {Event} event
+	 * @param {boolean} [autoActivate=false]
+	 */
+	ContextPad.prototype.triggerEntry = function(entryId, action, event, autoActivate) {
+
+	  if (!this.isShown()) {
+	    return;
+	  }
+
+	  var target = this._current.target,
+	      entries = this._current.entries;
+
+	  var entry = entries[entryId];
+
+	  if (!entry) {
+	    return;
+	  }
+
+	  var handler = entry.action;
+
 	  // simple action (via callback function)
 	  if (isFunction(handler)) {
 	    if (action === 'click') {
-	      return handler(originalEvent, target, autoActivate);
+	      return handler(event, target, autoActivate);
 	    }
 	  } else {
 	    if (handler[action]) {
-	      return handler[action](originalEvent, target, autoActivate);
+	      return handler[action](event, target, autoActivate);
 	    }
 	  }
 
@@ -28285,6 +28313,16 @@
 	};
 
 
+	/**
+	 * Check if pad is open and not hidden.
+	 *
+	 * @return {boolean}
+	 */
+	ContextPad.prototype.isShown = function() {
+	  return this.isOpen() && this._overlays.isShown();
+	};
+
+
 	/**
 	 * Get contex pad position.
 	 *
@@ -28337,11 +28375,11 @@
 
 	var n$3,l$3,u$3,t$5,o$5,f$3={},e$5=[],c$3=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function s$3(n,l){for(var u in l)n[u]=l[u];return n}function a$4(n){var l=n.parentNode;l&&l.removeChild(n);}function h$3(l,u,i){var t,o,r,f={};for(r in u)"key"==r?t=u[r]:"ref"==r?o=u[r]:f[r]=u[r];if(arguments.length>2&&(f.children=arguments.length>3?n$3.call(arguments,2):i),"function"==typeof l&&null!=l.defaultProps)for(r in l.defaultProps)void 0===f[r]&&(f[r]=l.defaultProps[r]);return v$3(l,f,t,o,null)}function v$3(n,i,t,o,r){var f={type:n,props:i,key:t,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==r?++u$3:r};return null==r&&null!=l$3.vnode&&l$3.vnode(f),f}function p$4(n){return n.children}function d$3(n,l){this.props=n,this.context=l;}function _$3(n,l){if(null==l)return n.__?_$3(n.__,n.__.__k.indexOf(n)+1):null;for(var u;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e)return u.__e;return "function"==typeof n.type?_$3(n):null}function k$4(n){var l,u;if(null!=(n=n.__)&&null!=n.__c){for(n.__e=n.__c.base=null,l=0;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e){n.__e=n.__c.base=u.__e;break}return k$4(n)}}function b$3(n){(!n.__d&&(n.__d=!0)&&t$5.push(n)&&!g$4.__r++||o$5!==l$3.debounceRendering)&&((o$5=l$3.debounceRendering)||setTimeout)(g$4);}function g$4(){for(var n;g$4.__r=t$5.length;)n=t$5.sort(function(n,l){return n.__v.__b-l.__v.__b}),t$5=[],n.some(function(n){var l,u,i,t,o,r;n.__d&&(o=(t=(l=n).__v).__e,(r=l.__P)&&(u=[],(i=s$3({},t)).__v=t.__v+1,j$4(r,t,i,l.__n,void 0!==r.ownerSVGElement,null!=t.__h?[o]:null,u,null==o?_$3(t):o,t.__h),z$3(u,t),t.__e!=o&&k$4(t)));});}function w$4(n,l,u,i,t,o,r,c,s,a){var h,y,d,k,b,g,w,x=i&&i.__k||e$5,C=x.length;for(u.__k=[],h=0;h<l.length;h++)if(null!=(k=u.__k[h]=null==(k=l[h])||"boolean"==typeof k?null:"string"==typeof k||"number"==typeof k||"bigint"==typeof k?v$3(null,k,null,null,k):Array.isArray(k)?v$3(p$4,{children:k},null,null,null):k.__b>0?v$3(k.type,k.props,k.key,k.ref?k.ref:null,k.__v):k)){if(k.__=u,k.__b=u.__b+1,null===(d=x[h])||d&&k.key==d.key&&k.type===d.type)x[h]=void 0;else for(y=0;y<C;y++){if((d=x[y])&&k.key==d.key&&k.type===d.type){x[y]=void 0;break}d=null;}j$4(n,k,d=d||f$3,t,o,r,c,s,a),b=k.__e,(y=k.ref)&&d.ref!=y&&(w||(w=[]),d.ref&&w.push(d.ref,null,k),w.push(y,k.__c||b,k)),null!=b?(null==g&&(g=b),"function"==typeof k.type&&k.__k===d.__k?k.__d=s=m$4(k,s,n):s=A$3(n,k,d,x,b,s),"function"==typeof u.type&&(u.__d=s)):s&&d.__e==s&&s.parentNode!=n&&(s=_$3(d));}for(u.__e=g,h=C;h--;)null!=x[h]&&N$2(x[h],x[h]);if(w)for(h=0;h<w.length;h++)M$2(w[h],w[++h],w[++h]);}function m$4(n,l,u){for(var i,t=n.__k,o=0;t&&o<t.length;o++)(i=t[o])&&(i.__=n,l="function"==typeof i.type?m$4(i,l,u):A$3(u,i,i,t,i.__e,l));return l}function A$3(n,l,u,i,t,o){var r,f,e;if(void 0!==l.__d)r=l.__d,l.__d=void 0;else if(null==u||t!=o||null==t.parentNode)n:if(null==o||o.parentNode!==n)n.appendChild(t),r=null;else {for(f=o,e=0;(f=f.nextSibling)&&e<i.length;e+=1)if(f==t)break n;n.insertBefore(t,o),r=o;}return void 0!==r?r:t.nextSibling}function C$3(n,l,u,i,t){var o;for(o in u)"children"===o||"key"===o||o in l||H$2(n,o,null,u[o],i);for(o in l)t&&"function"!=typeof l[o]||"children"===o||"key"===o||"value"===o||"checked"===o||u[o]===l[o]||H$2(n,o,l[o],u[o],i);}function $$2(n,l,u){"-"===l[0]?n.setProperty(l,u):n[l]=null==u?"":"number"!=typeof u||c$3.test(l)?u:u+"px";}function H$2(n,l,u,i,t){var o;n:if("style"===l)if("string"==typeof u)n.style.cssText=u;else {if("string"==typeof i&&(n.style.cssText=i=""),i)for(l in i)u&&l in u||$$2(n.style,l,"");if(u)for(l in u)i&&u[l]===i[l]||$$2(n.style,l,u[l]);}else if("o"===l[0]&&"n"===l[1])o=l!==(l=l.replace(/Capture$/,"")),l=l.toLowerCase()in n?l.toLowerCase().slice(2):l.slice(2),n.l||(n.l={}),n.l[l+o]=u,u?i||n.addEventListener(l,o?T$4:I$2,o):n.removeEventListener(l,o?T$4:I$2,o);else if("dangerouslySetInnerHTML"!==l){if(t)l=l.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("href"!==l&&"list"!==l&&"form"!==l&&"tabIndex"!==l&&"download"!==l&&l in n)try{n[l]=null==u?"":u;break n}catch(n){}"function"==typeof u||(null==u||!1===u&&-1==l.indexOf("-")?n.removeAttribute(l):n.setAttribute(l,u));}}function I$2(n){this.l[n.type+!1](l$3.event?l$3.event(n):n);}function T$4(n){this.l[n.type+!0](l$3.event?l$3.event(n):n);}function j$4(n,u,i,t,o,r,f,e,c){var a,h,v,y,_,k,b,g,m,x,A,C,$,H,I,T=u.type;if(void 0!==u.constructor)return null;null!=i.__h&&(c=i.__h,e=u.__e=i.__e,u.__h=null,r=[e]),(a=l$3.__b)&&a(u);try{n:if("function"==typeof T){if(g=u.props,m=(a=T.contextType)&&t[a.__c],x=a?m?m.props.value:a.__:t,i.__c?b=(h=u.__c=i.__c).__=h.__E:("prototype"in T&&T.prototype.render?u.__c=h=new T(g,x):(u.__c=h=new d$3(g,x),h.constructor=T,h.render=O$2),m&&m.sub(h),h.props=g,h.state||(h.state={}),h.context=x,h.__n=t,v=h.__d=!0,h.__h=[],h._sb=[]),null==h.__s&&(h.__s=h.state),null!=T.getDerivedStateFromProps&&(h.__s==h.state&&(h.__s=s$3({},h.__s)),s$3(h.__s,T.getDerivedStateFromProps(g,h.__s))),y=h.props,_=h.state,v)null==T.getDerivedStateFromProps&&null!=h.componentWillMount&&h.componentWillMount(),null!=h.componentDidMount&&h.__h.push(h.componentDidMount);else {if(null==T.getDerivedStateFromProps&&g!==y&&null!=h.componentWillReceiveProps&&h.componentWillReceiveProps(g,x),!h.__e&&null!=h.shouldComponentUpdate&&!1===h.shouldComponentUpdate(g,h.__s,x)||u.__v===i.__v){for(h.props=g,h.state=h.__s,u.__v!==i.__v&&(h.__d=!1),h.__v=u,u.__e=i.__e,u.__k=i.__k,u.__k.forEach(function(n){n&&(n.__=u);}),A=0;A<h._sb.length;A++)h.__h.push(h._sb[A]);h._sb=[],h.__h.length&&f.push(h);break n}null!=h.componentWillUpdate&&h.componentWillUpdate(g,h.__s,x),null!=h.componentDidUpdate&&h.__h.push(function(){h.componentDidUpdate(y,_,k);});}if(h.context=x,h.props=g,h.__v=u,h.__P=n,C=l$3.__r,$=0,"prototype"in T&&T.prototype.render){for(h.state=h.__s,h.__d=!1,C&&C(u),a=h.render(h.props,h.state,h.context),H=0;H<h._sb.length;H++)h.__h.push(h._sb[H]);h._sb=[];}else do{h.__d=!1,C&&C(u),a=h.render(h.props,h.state,h.context),h.state=h.__s;}while(h.__d&&++$<25);h.state=h.__s,null!=h.getChildContext&&(t=s$3(s$3({},t),h.getChildContext())),v||null==h.getSnapshotBeforeUpdate||(k=h.getSnapshotBeforeUpdate(y,_)),I=null!=a&&a.type===p$4&&null==a.key?a.props.children:a,w$4(n,Array.isArray(I)?I:[I],u,i,t,o,r,f,e,c),h.base=u.__e,u.__h=null,h.__h.length&&f.push(h),b&&(h.__E=h.__=null),h.__e=!1;}else null==r&&u.__v===i.__v?(u.__k=i.__k,u.__e=i.__e):u.__e=L$2(i.__e,u,i,t,o,r,f,c);(a=l$3.diffed)&&a(u);}catch(n){u.__v=null,(c||null!=r)&&(u.__e=e,u.__h=!!c,r[r.indexOf(e)]=null),l$3.__e(n,u,i);}}function z$3(n,u){l$3.__c&&l$3.__c(u,n),n.some(function(u){try{n=u.__h,u.__h=[],n.some(function(n){n.call(u);});}catch(n){l$3.__e(n,u.__v);}});}function L$2(l,u,i,t,o,r,e,c){var s,h,v,y=i.props,p=u.props,d=u.type,k=0;if("svg"===d&&(o=!0),null!=r)for(;k<r.length;k++)if((s=r[k])&&"setAttribute"in s==!!d&&(d?s.localName===d:3===s.nodeType)){l=s,r[k]=null;break}if(null==l){if(null===d)return document.createTextNode(p);l=o?document.createElementNS("http://www.w3.org/2000/svg",d):document.createElement(d,p.is&&p),r=null,c=!1;}if(null===d)y===p||c&&l.data===p||(l.data=p);else {if(r=r&&n$3.call(l.childNodes),h=(y=i.props||f$3).dangerouslySetInnerHTML,v=p.dangerouslySetInnerHTML,!c){if(null!=r)for(y={},k=0;k<l.attributes.length;k++)y[l.attributes[k].name]=l.attributes[k].value;(v||h)&&(v&&(h&&v.__html==h.__html||v.__html===l.innerHTML)||(l.innerHTML=v&&v.__html||""));}if(C$3(l,p,y,o,c),v)u.__k=[];else if(k=u.props.children,w$4(l,Array.isArray(k)?k:[k],u,i,t,o&&"foreignObject"!==d,r,e,r?r[0]:i.__k&&_$3(i,0),c),null!=r)for(k=r.length;k--;)null!=r[k]&&a$4(r[k]);c||("value"in p&&void 0!==(k=p.value)&&(k!==l.value||"progress"===d&&!k||"option"===d&&k!==y.value)&&H$2(l,"value",k,y.value,!1),"checked"in p&&void 0!==(k=p.checked)&&k!==l.checked&&H$2(l,"checked",k,y.checked,!1));}return l}function M$2(n,u,i){try{"function"==typeof n?n(u):n.current=u;}catch(n){l$3.__e(n,i);}}function N$2(n,u,i){var t,o;if(l$3.unmount&&l$3.unmount(n),(t=n.ref)&&(t.current&&t.current!==n.__e||M$2(t,null,u)),null!=(t=n.__c)){if(t.componentWillUnmount)try{t.componentWillUnmount();}catch(n){l$3.__e(n,u);}t.base=t.__P=null,n.__c=void 0;}if(t=n.__k)for(o=0;o<t.length;o++)t[o]&&N$2(t[o],u,i||"function"!=typeof n.type);i||null==n.__e||a$4(n.__e),n.__=n.__e=n.__d=void 0;}function O$2(n,l,u){return this.constructor(n,u)}function P$2(u,i,t){var o,r,e;l$3.__&&l$3.__(u,i),r=(o="function"==typeof t)?null:t&&t.__k||i.__k,e=[],j$4(i,u=(!o&&t||i).__k=h$3(p$4,null,[u]),r||f$3,f$3,void 0!==i.ownerSVGElement,!o&&t?[t]:r?null:i.firstChild?n$3.call(i.childNodes):null,e,!o&&t?t:r?r.__e:i.firstChild,o),z$3(e,u);}n$3=e$5.slice,l$3={__e:function(n,l,u,i){for(var t,o,r;l=l.__;)if((t=l.__c)&&!t.__)try{if((o=t.constructor)&&null!=o.getDerivedStateFromError&&(t.setState(o.getDerivedStateFromError(n)),r=t.__d),null!=t.componentDidCatch&&(t.componentDidCatch(n,i||{}),r=t.__d),r)return t.__E=t}catch(l){n=l;}throw n}},u$3=0,d$3.prototype.setState=function(n,l){var u;u=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=s$3({},this.state),"function"==typeof n&&(n=n(s$3({},u),this.props)),n&&s$3(u,n),null!=n&&this.__v&&(l&&this._sb.push(l),b$3(this));},d$3.prototype.forceUpdate=function(n){this.__v&&(this.__e=!0,n&&this.__h.push(n),b$3(this));},d$3.prototype.render=p$4,t$5=[],g$4.__r=0;
 
-	var t$4,r$3,u$2,i$4,o$4=0,f$2=[],c$2=[],e$4=l$3.__b,a$3=l$3.__r,v$2=l$3.diffed,l$2=l$3.__c,m$3=l$3.unmount;function d$2(t,u){l$3.__h&&l$3.__h(r$3,t,o$4||u),o$4=0;var i=r$3.__H||(r$3.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({__V:c$2}),i.__[t]}function p$3(n){return o$4=1,y$2(B$1,n)}function y$2(n,u,i){var o=d$2(t$4++,2);if(o.t=n,!o.__c&&(o.__=[i?i(u):B$1(void 0,u),function(n){var t=o.__N?o.__N[0]:o.__[0],r=o.t(t,n);t!==r&&(o.__N=[r,o.__[1]],o.__c.setState({}));}],o.__c=r$3,!r$3.u)){r$3.u=!0;var f=r$3.shouldComponentUpdate;r$3.shouldComponentUpdate=function(n,t,r){if(!o.__c.__H)return !0;var u=o.__c.__H.__.filter(function(n){return n.__c});if(u.every(function(n){return !n.__N}))return !f||f.call(this,n,t,r);var i=!1;return u.forEach(function(n){if(n.__N){var t=n.__[0];n.__=n.__N,n.__N=void 0,t!==n.__[0]&&(i=!0);}}),!(!i&&o.__c.props===n)&&(!f||f.call(this,n,t,r))};}return o.__N||o.__}function h$2(u,i){var o=d$2(t$4++,3);!l$3.__s&&z$2(o.__H,i)&&(o.__=u,o.i=i,r$3.__H.__h.push(o));}function s$2(u,i){var o=d$2(t$4++,4);!l$3.__s&&z$2(o.__H,i)&&(o.__=u,o.i=i,r$3.__h.push(o));}function _$2(n){return o$4=5,F$2(function(){return {current:n}},[])}function F$2(n,r){var u=d$2(t$4++,7);return z$2(u.__H,r)?(u.__V=n(),u.i=r,u.__h=n,u.__V):u.__}function T$3(n,t){return o$4=8,F$2(function(){return n},t)}function b$2(){for(var t;t=f$2.shift();)if(t.__P&&t.__H)try{t.__H.__h.forEach(k$3),t.__H.__h.forEach(w$3),t.__H.__h=[];}catch(r){t.__H.__h=[],l$3.__e(r,t.__v);}}l$3.__b=function(n){r$3=null,e$4&&e$4(n);},l$3.__r=function(n){a$3&&a$3(n),t$4=0;var i=(r$3=n.__c).__H;i&&(u$2===r$3?(i.__h=[],r$3.__h=[],i.__.forEach(function(n){n.__N&&(n.__=n.__N),n.__V=c$2,n.__N=n.i=void 0;})):(i.__h.forEach(k$3),i.__h.forEach(w$3),i.__h=[])),u$2=r$3;},l$3.diffed=function(t){v$2&&v$2(t);var o=t.__c;o&&o.__H&&(o.__H.__h.length&&(1!==f$2.push(o)&&i$4===l$3.requestAnimationFrame||((i$4=l$3.requestAnimationFrame)||j$3)(b$2)),o.__H.__.forEach(function(n){n.i&&(n.__H=n.i),n.__V!==c$2&&(n.__=n.__V),n.i=void 0,n.__V=c$2;})),u$2=r$3=null;},l$3.__c=function(t,r){r.some(function(t){try{t.__h.forEach(k$3),t.__h=t.__h.filter(function(n){return !n.__||w$3(n)});}catch(u){r.some(function(n){n.__h&&(n.__h=[]);}),r=[],l$3.__e(u,t.__v);}}),l$2&&l$2(t,r);},l$3.unmount=function(t){m$3&&m$3(t);var r,u=t.__c;u&&u.__H&&(u.__H.__.forEach(function(n){try{k$3(n);}catch(n){r=n;}}),u.__H=void 0,r&&l$3.__e(r,u.__v));};var g$3="function"==typeof requestAnimationFrame;function j$3(n){var t,r=function(){clearTimeout(u),g$3&&cancelAnimationFrame(t),setTimeout(n);},u=setTimeout(r,100);g$3&&(t=requestAnimationFrame(r));}function k$3(n){var t=r$3,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),r$3=t;}function w$3(n){var t=r$3;n.__c=n.__(),r$3=t;}function z$2(n,t){return !n||n.length!==t.length||t.some(function(t,r){return t!==n[r]})}function B$1(n,t){return "function"==typeof t?t(n):t}
+	var n$2=function(t,s,r,e){var u;s[0]=0;for(var h=1;h<s.length;h++){var p=s[h++],a=s[h]?(s[0]|=p?1:2,r[s[h++]]):s[++h];3===p?e[0]=a:4===p?e[1]=Object.assign(e[1]||{},a):5===p?(e[1]=e[1]||{})[s[++h]]=a:6===p?e[1][s[++h]]+=a+"":p?(u=t.apply(a,n$2(t,a,r,["",null])),e.push(u),a[0]?s[0]|=2:(s[h-2]=0,s[h]=u)):e.push(a);}return e},t$4=new Map;function e$4(s){var r=t$4.get(this);return r||(r=new Map,t$4.set(this,r)),(r=n$2(this,r.get(s)||(r.set(s,r=function(n){for(var t,s,r=1,e="",u="",h=[0],p=function(n){1===r&&(n||(e=e.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?h.push(0,n,e):3===r&&(n||e)?(h.push(3,n,e),r=2):2===r&&"..."===e&&n?h.push(4,n,0):2===r&&e&&!n?h.push(5,0,!0,e):r>=5&&((e||!n&&5===r)&&(h.push(r,0,e,s),r=6),n&&(h.push(r,n,0,s),r=6)),e="";},a=0;a<n.length;a++){a&&(1===r&&p(),p(a));for(var l=0;l<n[a].length;l++)t=n[a][l],1===r?"<"===t?(p(),h=[h],r=3):e+=t:4===r?"--"===e&&">"===t?(r=1,e=""):e=t+e[0]:u?t===u?u="":e+=t:'"'===t||"'"===t?u=t:">"===t?(p(),r=1):r&&("="===t?(r=5,s=e,e=""):"/"===t&&(r<5||">"===n[a][l+1])?(p(),3===r&&(h=h[0]),r=h,(h=h[0]).push(2,0,r),r=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(p(),r=2):e+=t),3===r&&"!--"===e&&(r=4,h=h[0]);}return p(),h}(s)),r),arguments,[])).length>1?r:r[0]}
 
-	var n$2=function(t,s,r,e){var u;s[0]=0;for(var h=1;h<s.length;h++){var p=s[h++],a=s[h]?(s[0]|=p?1:2,r[s[h++]]):s[++h];3===p?e[0]=a:4===p?e[1]=Object.assign(e[1]||{},a):5===p?(e[1]=e[1]||{})[s[++h]]=a:6===p?e[1][s[++h]]+=a+"":p?(u=t.apply(a,n$2(t,a,r,["",null])),e.push(u),a[0]?s[0]|=2:(s[h-2]=0,s[h]=u)):e.push(a);}return e},t$3=new Map;function e$3(s){var r=t$3.get(this);return r||(r=new Map,t$3.set(this,r)),(r=n$2(this,r.get(s)||(r.set(s,r=function(n){for(var t,s,r=1,e="",u="",h=[0],p=function(n){1===r&&(n||(e=e.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?h.push(0,n,e):3===r&&(n||e)?(h.push(3,n,e),r=2):2===r&&"..."===e&&n?h.push(4,n,0):2===r&&e&&!n?h.push(5,0,!0,e):r>=5&&((e||!n&&5===r)&&(h.push(r,0,e,s),r=6),n&&(h.push(r,n,0,s),r=6)),e="";},a=0;a<n.length;a++){a&&(1===r&&p(),p(a));for(var l=0;l<n[a].length;l++)t=n[a][l],1===r?"<"===t?(p(),h=[h],r=3):e+=t:4===r?"--"===e&&">"===t?(r=1,e=""):e=t+e[0]:u?t===u?u="":e+=t:'"'===t||"'"===t?u=t:">"===t?(p(),r=1):r&&("="===t?(r=5,s=e,e=""):"/"===t&&(r<5||">"===n[a][l+1])?(p(),3===r&&(h=h[0]),r=h,(h=h[0]).push(2,0,r),r=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(p(),r=2):e+=t),3===r&&"!--"===e&&(r=4,h=h[0]);}return p(),h}(s)),r),arguments,[])).length>1?r:r[0]}
+	var m$3=e$4.bind(h$3);
 
-	var m$2=e$3.bind(h$3);
+	var t$3,r$3,u$2,i$4,o$4=0,f$2=[],c$2=[],e$3=l$3.__b,a$3=l$3.__r,v$2=l$3.diffed,l$2=l$3.__c,m$2=l$3.unmount;function d$2(t,u){l$3.__h&&l$3.__h(r$3,t,o$4||u),o$4=0;var i=r$3.__H||(r$3.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({__V:c$2}),i.__[t]}function p$3(n){return o$4=1,y$2(B$1,n)}function y$2(n,u,i){var o=d$2(t$3++,2);if(o.t=n,!o.__c&&(o.__=[i?i(u):B$1(void 0,u),function(n){var t=o.__N?o.__N[0]:o.__[0],r=o.t(t,n);t!==r&&(o.__N=[r,o.__[1]],o.__c.setState({}));}],o.__c=r$3,!r$3.u)){r$3.u=!0;var f=r$3.shouldComponentUpdate;r$3.shouldComponentUpdate=function(n,t,r){if(!o.__c.__H)return !0;var u=o.__c.__H.__.filter(function(n){return n.__c});if(u.every(function(n){return !n.__N}))return !f||f.call(this,n,t,r);var i=!1;return u.forEach(function(n){if(n.__N){var t=n.__[0];n.__=n.__N,n.__N=void 0,t!==n.__[0]&&(i=!0);}}),!(!i&&o.__c.props===n)&&(!f||f.call(this,n,t,r))};}return o.__N||o.__}function h$2(u,i){var o=d$2(t$3++,3);!l$3.__s&&z$2(o.__H,i)&&(o.__=u,o.i=i,r$3.__H.__h.push(o));}function s$2(u,i){var o=d$2(t$3++,4);!l$3.__s&&z$2(o.__H,i)&&(o.__=u,o.i=i,r$3.__h.push(o));}function _$2(n){return o$4=5,F$2(function(){return {current:n}},[])}function F$2(n,r){var u=d$2(t$3++,7);return z$2(u.__H,r)?(u.__V=n(),u.i=r,u.__h=n,u.__V):u.__}function T$3(n,t){return o$4=8,F$2(function(){return n},t)}function b$2(){for(var t;t=f$2.shift();)if(t.__P&&t.__H)try{t.__H.__h.forEach(k$3),t.__H.__h.forEach(w$3),t.__H.__h=[];}catch(r){t.__H.__h=[],l$3.__e(r,t.__v);}}l$3.__b=function(n){r$3=null,e$3&&e$3(n);},l$3.__r=function(n){a$3&&a$3(n),t$3=0;var i=(r$3=n.__c).__H;i&&(u$2===r$3?(i.__h=[],r$3.__h=[],i.__.forEach(function(n){n.__N&&(n.__=n.__N),n.__V=c$2,n.__N=n.i=void 0;})):(i.__h.forEach(k$3),i.__h.forEach(w$3),i.__h=[])),u$2=r$3;},l$3.diffed=function(t){v$2&&v$2(t);var o=t.__c;o&&o.__H&&(o.__H.__h.length&&(1!==f$2.push(o)&&i$4===l$3.requestAnimationFrame||((i$4=l$3.requestAnimationFrame)||j$3)(b$2)),o.__H.__.forEach(function(n){n.i&&(n.__H=n.i),n.__V!==c$2&&(n.__=n.__V),n.i=void 0,n.__V=c$2;})),u$2=r$3=null;},l$3.__c=function(t,r){r.some(function(t){try{t.__h.forEach(k$3),t.__h=t.__h.filter(function(n){return !n.__||w$3(n)});}catch(u){r.some(function(n){n.__h&&(n.__h=[]);}),r=[],l$3.__e(u,t.__v);}}),l$2&&l$2(t,r);},l$3.unmount=function(t){m$2&&m$2(t);var r,u=t.__c;u&&u.__H&&(u.__H.__.forEach(function(n){try{k$3(n);}catch(n){r=n;}}),u.__H=void 0,r&&l$3.__e(r,u.__v));};var g$3="function"==typeof requestAnimationFrame;function j$3(n){var t,r=function(){clearTimeout(u),g$3&&cancelAnimationFrame(t),setTimeout(n);},u=setTimeout(r,100);g$3&&(t=requestAnimationFrame(r));}function k$3(n){var t=r$3,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),r$3=t;}function w$3(n){var t=r$3;n.__c=n.__(),r$3=t;}function z$2(n,t){return !n||n.length!==t.length||t.some(function(t,r){return t!==n[r]})}function B$1(n,t){return "function"==typeof t?t(n):t}
 
 	function r$2(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r$2(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r$2(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -28364,7 +28402,7 @@
 	    onClick
 	  } = props;
 
-	  return m$2`
+	  return m$3`
     <li
       class=${ clsx('entry', { selected }) }
       data-id=${ entry.id }
@@ -28377,17 +28415,17 @@
         <span
           class=${ clsx('djs-popup-entry-name', entry.className) }
         >
-          ${ entry.imageUrl ? m$2`
+          ${ entry.imageUrl ? m$3`
             <img class="djs-popup-entry-icon" src=${ entry.imageUrl } />
           ` : null }
 
-          ${ entry.label ? m$2`
+          ${ entry.label ? m$3`
             <span class="djs-popup-label">
               ${ entry.label }
             </span>
           ` : null }
         </span>
-        ${ entry.description && m$2`
+        ${ entry.description && m$3`
           <span
             class="djs-popup-entry-description"
             title=${ entry.description }
@@ -28396,7 +28434,7 @@
           </span>
         ` }
       </div>
-      ${ entry.documentationRef && m$2`
+      ${ entry.documentationRef && m$3`
         <div class="djs-popup-entry-docs">
           <a
             href="${ entry.documentationRef }"
@@ -28451,16 +28489,16 @@
 	    }
 	  }, [ selectedEntry ]);
 
-	  return m$2`
+	  return m$3`
     <div class="djs-popup-results" ref=${ resultsRef }>
-      ${ groups.map(group => m$2`
-        ${ group.name && m$2`
+      ${ groups.map(group => m$3`
+        ${ group.name && m$3`
           <div key=${ group.id } class="entry-header" title=${ group.name }>
             ${ group.name }
           </div>
         ` }
         <ul class="djs-popup-group" data-group=${ group.id }>
-          ${ group.entries.map(entry => m$2`
+          ${ group.entries.map(entry => m$3`
             <${PopupMenuItem}
               key=${ entry.id }
               entry=${ entry }
@@ -28679,7 +28717,7 @@
 
 	  const displayHeader = F$2(() => title || headerEntries.length > 0, [ title, headerEntries ]);
 
-	  return m$2`
+	  return m$3`
     <${PopupMenuWrapper}
       onClose=${ onClose }
       onKeyup=${ handleKey }
@@ -28689,10 +28727,10 @@
       width=${ width }
       scale=${ scale }
     >
-      ${ displayHeader && m$2`
+      ${ displayHeader && m$3`
         <div class="djs-popup-header">
           <h3 class="djs-popup-title" title=${ title }>${ title }</h3>
-          ${ headerEntries.map(entry => m$2`
+          ${ headerEntries.map(entry => m$3`
             <span
               class=${ getHeaderClasses(entry, entry === selectedEntry) }
               onClick=${ event => onSelect(event, entry) }
@@ -28701,21 +28739,21 @@
               onMouseEnter=${ () => setSelectedEntry(entry) }
               onMouseLeave=${ () => setSelectedEntry(null) }
             >
-              ${ entry.imageUrl ? m$2`
+              ${ entry.imageUrl ? m$3`
                 <img class="djs-popup-entry-icon" src=${ entry.imageUrl } />
               ` : null }
 
-              ${ entry.label ? m$2`
+              ${ entry.label ? m$3`
                 <span class="djs-popup-label">${ entry.label }</span>
               ` : null }
             </span>
           `) }
         </div>
       ` }
-      ${ originalEntries.length > 0 && m$2`
+      ${ originalEntries.length > 0 && m$3`
         <div class="djs-popup-body">
 
-          ${ searchable && m$2`
+          ${ searchable && m$3`
           <div class="djs-popup-search">
             <svg class="djs-popup-search-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" clip-rule="evenodd" d="M9.0325 8.5H9.625L13.3675 12.25L12.25 13.3675L8.5 9.625V9.0325L8.2975 8.8225C7.4425 9.5575 6.3325 10 5.125 10C2.4325 10 0.25 7.8175 0.25 5.125C0.25 2.4325 2.4325 0.25 5.125 0.25C7.8175 0.25 10 2.4325 10 5.125C10 6.3325 9.5575 7.4425 8.8225 8.2975L9.0325 8.5ZM1.75 5.125C1.75 6.9925 3.2575 8.5 5.125 8.5C6.9925 8.5 8.5 6.9925 8.5 5.125C8.5 3.2575 6.9925 1.75 5.125 1.75C3.2575 1.75 1.75 3.2575 1.75 5.125Z" fill="#22242A"/>
@@ -28734,7 +28772,7 @@
             onClick=${ onSelect }
           />
         </div>
-        ${ entries.length === 0 && m$2`
+        ${ entries.length === 0 && m$3`
           <div class="djs-popup-no-results">No matching entries found.</div>
         ` }
       ` }
@@ -28787,7 +28825,7 @@
 	    popupRef.current && popupRef.current.focus();
 	  }, []);
 
-	  return m$2`
+	  return m$3`
     <div
       class="djs-popup-backdrop"
       onClick=${ checkClose }
@@ -28918,7 +28956,7 @@
 	  const onSelect = (event, entry) => this.trigger(event, entry);
 
 	  P$2(
-	    m$2`
+	    m$3`
       <${PopupMenuComponent}
         onClose=${ onClose }
         onSelect=${ onSelect }
@@ -29042,13 +29080,10 @@
 
 	PopupMenu.prototype._createContainer = function(config) {
 
-	  let parent = config && config.parent || 'body';
-
-	  if (typeof parent === 'string') {
-	    parent = document.querySelector(parent);
-	  }
+	  var canvas = this._canvas,
+	      parent = canvas.getContainer();
 
-	  const container = domify$1(`<div class="djs-popup-parent djs-parent" data-popup=${config.provider}></div>`);
+	  const container = domify$1(`<div class="djs-popup-parent djs-scrollable" data-popup=${config.provider}></div>`);
 
 	  parent.appendChild(container);
 
@@ -39927,6 +39962,7 @@
 	  var directEditing = injector.get('directEditing', false);
 	  var searchPad = injector.get('searchPad', false);
 	  var modeling = injector.get('modeling', false);
+	  var contextPad = injector.get('contextPad', false);
 
 	  // (2) check components and register actions
 
@@ -40050,6 +40086,12 @@
 	    });
 	  }
 
+	  if (selection && contextPad) {
+	    this._registerAction('replaceElement', function(event) {
+	      contextPad.triggerEntry('replace', 'click', event);
+	    });
+	  }
+
 	};
 
 	var EditorActionsModule = {
@@ -41168,6 +41210,23 @@
 	    }
 	  });
 
+	  // activate replace element
+	  // R
+	  addListener('replaceElement', function(context) {
+
+	    var event = context.keyEvent;
+
+	    if (keyboard.hasModifier(event)) {
+	      return;
+	    }
+
+	    if (keyboard.isKey([ 'r', 'R' ], event)) {
+	      editorActions.trigger('replaceElement', event);
+
+	      return true;
+	    }
+	  });
+
 	};
 
 	var KeyboardModule = {
@@ -64453,10 +64512,11 @@
 	    /**
 	    Create a selection range.
 	    */
-	    static range(anchor, head, goalColumn) {
-	        let goal = (goalColumn !== null && goalColumn !== void 0 ? goalColumn : 33554431 /* RangeFlag.NoGoalColumn */) << 5 /* RangeFlag.GoalColumnOffset */;
-	        return head < anchor ? SelectionRange.create(head, anchor, 16 /* RangeFlag.Inverted */ | goal | 8 /* RangeFlag.AssocAfter */)
-	            : SelectionRange.create(anchor, head, goal | (head > anchor ? 4 /* RangeFlag.AssocBefore */ : 0));
+	    static range(anchor, head, goalColumn, bidiLevel) {
+	        let flags = ((goalColumn !== null && goalColumn !== void 0 ? goalColumn : 33554431 /* RangeFlag.NoGoalColumn */) << 5 /* RangeFlag.GoalColumnOffset */) |
+	            (bidiLevel == null ? 3 : Math.min(2, bidiLevel));
+	        return head < anchor ? SelectionRange.create(head, anchor, 16 /* RangeFlag.Inverted */ | 8 /* RangeFlag.AssocAfter */ | flags)
+	            : SelectionRange.create(anchor, head, (head > anchor ? 4 /* RangeFlag.AssocBefore */ : 0) | flags);
 	    }
 	    /**
 	    @internal
@@ -67286,6 +67346,26 @@
 	        }
 	    }
 	}
+	function scrollableParent(dom) {
+	    let doc = dom.ownerDocument;
+	    for (let cur = dom.parentNode; cur;) {
+	        if (cur == doc.body) {
+	            break;
+	        }
+	        else if (cur.nodeType == 1) {
+	            if (cur.scrollHeight > cur.clientHeight || cur.scrollWidth > cur.clientWidth)
+	                return cur;
+	            cur = cur.assignedSlot || cur.parentNode;
+	        }
+	        else if (cur.nodeType == 11) {
+	            cur = cur.host;
+	        }
+	        else {
+	            break;
+	        }
+	    }
+	    return null;
+	}
 	class DOMSelectionState {
 	    constructor() {
 	        this.anchorNode = null;
@@ -68422,7 +68502,9 @@
 	        super(-200000000 /* Side.Line */, -200000000 /* Side.Line */, null, spec);
 	    }
 	    eq(other) {
-	        return other instanceof LineDecoration && attrsEq(this.spec.attributes, other.spec.attributes);
+	        return other instanceof LineDecoration &&
+	            this.spec.class == other.spec.class &&
+	            attrsEq(this.spec.attributes, other.spec.attributes);
 	    }
 	    range(from, to = from) {
 	        if (to != from)
@@ -68697,6 +68779,7 @@
 	        this.curLine = null;
 	        this.breakAtStart = 0;
 	        this.pendingBuffer = 0 /* Buf.No */;
+	        this.bufferMarks = [];
 	        // Set to false directly after a widget that covers the position after it
 	        this.atCursorPos = true;
 	        this.openStart = -1;
@@ -68719,20 +68802,20 @@
 	        }
 	        return this.curLine;
 	    }
-	    flushBuffer(active) {
+	    flushBuffer(active = this.bufferMarks) {
 	        if (this.pendingBuffer) {
 	            this.curLine.append(wrapMarks(new WidgetBufferView(-1), active), active.length);
 	            this.pendingBuffer = 0 /* Buf.No */;
 	        }
 	    }
 	    addBlockWidget(view) {
-	        this.flushBuffer([]);
+	        this.flushBuffer();
 	        this.curLine = null;
 	        this.content.push(view);
 	    }
 	    finish(openEnd) {
-	        if (!openEnd)
-	            this.flushBuffer([]);
+	        if (this.pendingBuffer && openEnd <= this.bufferMarks.length)
+	            this.flushBuffer();
 	        else
 	            this.pendingBuffer = 0 /* Buf.No */;
 	        if (!this.posCovered())
@@ -68752,8 +68835,9 @@
 	                        this.content[this.content.length - 1].breakAfter = 1;
 	                    else
 	                        this.breakAtStart = 1;
-	                    this.flushBuffer([]);
+	                    this.flushBuffer();
 	                    this.curLine = null;
+	                    this.atCursorPos = true;
 	                    length--;
 	                    continue;
 	                }
@@ -68795,7 +68879,7 @@
 	            else {
 	                let view = WidgetView.create(deco.widget || new NullWidget("span"), len, len ? 0 : deco.startSide);
 	                let cursorBefore = this.atCursorPos && !view.isEditable && openStart <= active.length && (from < to || deco.startSide > 0);
-	                let cursorAfter = !view.isEditable && (from < to || deco.startSide <= 0);
+	                let cursorAfter = !view.isEditable && (from < to || openStart > active.length || deco.startSide <= 0);
 	                let line = this.getLine();
 	                if (this.pendingBuffer == 2 /* Buf.IfCursor */ && !cursorBefore)
 	                    this.pendingBuffer = 0 /* Buf.No */;
@@ -68806,7 +68890,9 @@
 	                }
 	                line.append(wrapMarks(view, active), openStart);
 	                this.atCursorPos = cursorAfter;
-	                this.pendingBuffer = !cursorAfter ? 0 /* Buf.No */ : from < to ? 1 /* Buf.Yes */ : 2 /* Buf.IfCursor */;
+	                this.pendingBuffer = !cursorAfter ? 0 /* Buf.No */ : from < to || openStart > active.length ? 1 /* Buf.Yes */ : 2 /* Buf.IfCursor */;
+	                if (this.pendingBuffer)
+	                    this.bufferMarks = active.slice();
 	            }
 	        }
 	        else if (this.doc.lineAt(this.pos).from == this.pos) { // Line decoration
@@ -70480,22 +70566,30 @@
 	        this.compositionFirstChange = null;
 	        this.compositionEndedAt = 0;
 	        this.mouseSelection = null;
+	        let handleEvent = (handler, event) => {
+	            if (this.ignoreDuringComposition(event))
+	                return;
+	            if (event.type == "keydown" && this.keydown(view, event))
+	                return;
+	            if (this.mustFlushObserver(event))
+	                view.observer.forceFlush();
+	            if (this.runCustomHandlers(event.type, view, event))
+	                event.preventDefault();
+	            else
+	                handler(view, event);
+	        };
 	        for (let type in handlers) {
 	            let handler = handlers[type];
-	            view.contentDOM.addEventListener(type, (event) => {
-	                if (!eventBelongsToEditor(view, event) || this.ignoreDuringComposition(event))
-	                    return;
-	                if (type == "keydown" && this.keydown(view, event))
-	                    return;
-	                if (this.mustFlushObserver(event))
-	                    view.observer.forceFlush();
-	                if (this.runCustomHandlers(type, view, event))
-	                    event.preventDefault();
-	                else
-	                    handler(view, event);
+	            view.contentDOM.addEventListener(type, event => {
+	                if (eventBelongsToEditor(view, event))
+	                    handleEvent(handler, event);
 	            }, handlerOptions[type]);
 	            this.registeredEvents.push(type);
 	        }
+	        view.scrollDOM.addEventListener("mousedown", (event) => {
+	            if (event.target == view.scrollDOM)
+	                handleEvent(handlers.mousedown, event);
+	        });
 	        if (browser.chrome && browser.chrome_version == 102) { // FIXME remove at some point
 	            // On Chrome 102, viewport updates somehow stop wheel-based
 	            // scrolling. Turning off pointer events during the scroll seems
@@ -70652,12 +70746,18 @@
 	const EmacsyPendingKeys = "dthko";
 	// Key codes for modifier keys
 	const modifierCodes = [16, 17, 18, 20, 91, 92, 224, 225];
+	function dragScrollSpeed(dist) {
+	    return dist * 0.7 + 8;
+	}
 	class MouseSelection {
 	    constructor(view, startEvent, style, mustSelect) {
 	        this.view = view;
 	        this.style = style;
 	        this.mustSelect = mustSelect;
+	        this.scrollSpeed = { x: 0, y: 0 };
+	        this.scrolling = -1;
 	        this.lastEvent = startEvent;
+	        this.scrollParent = scrollableParent(view.contentDOM);
 	        let doc = view.contentDOM.ownerDocument;
 	        doc.addEventListener("mousemove", this.move = this.move.bind(this));
 	        doc.addEventListener("mouseup", this.up = this.up.bind(this));
@@ -70673,11 +70773,24 @@
 	        }
 	    }
 	    move(event) {
+	        var _a;
 	        if (event.buttons == 0)
 	            return this.destroy();
 	        if (this.dragging !== false)
 	            return;
 	        this.select(this.lastEvent = event);
+	        let sx = 0, sy = 0;
+	        let rect = ((_a = this.scrollParent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect())
+	            || { left: 0, top: 0, right: this.view.win.innerWidth, bottom: this.view.win.innerHeight };
+	        if (event.clientX <= rect.left)
+	            sx = -dragScrollSpeed(rect.left - event.clientX);
+	        else if (event.clientX >= rect.right)
+	            sx = dragScrollSpeed(event.clientX - rect.right);
+	        if (event.clientY <= rect.top)
+	            sy = -dragScrollSpeed(rect.top - event.clientY);
+	        else if (event.clientY >= rect.bottom)
+	            sy = dragScrollSpeed(event.clientY - rect.bottom);
+	        this.setScrollSpeed(sx, sy);
 	    }
 	    up(event) {
 	        if (this.dragging == null)
@@ -70687,19 +70800,41 @@
 	        this.destroy();
 	    }
 	    destroy() {
+	        this.setScrollSpeed(0, 0);
 	        let doc = this.view.contentDOM.ownerDocument;
 	        doc.removeEventListener("mousemove", this.move);
 	        doc.removeEventListener("mouseup", this.up);
 	        this.view.inputState.mouseSelection = null;
 	    }
+	    setScrollSpeed(sx, sy) {
+	        this.scrollSpeed = { x: sx, y: sy };
+	        if (sx || sy) {
+	            if (this.scrolling < 0)
+	                this.scrolling = setInterval(() => this.scroll(), 50);
+	        }
+	        else if (this.scrolling > -1) {
+	            clearInterval(this.scrolling);
+	            this.scrolling = -1;
+	        }
+	    }
+	    scroll() {
+	        if (this.scrollParent) {
+	            this.scrollParent.scrollLeft += this.scrollSpeed.x;
+	            this.scrollParent.scrollTop += this.scrollSpeed.y;
+	        }
+	        else {
+	            this.view.win.scrollBy(this.scrollSpeed.x, this.scrollSpeed.y);
+	        }
+	        if (this.dragging === false)
+	            this.select(this.lastEvent);
+	    }
 	    select(event) {
 	        let selection = this.style.get(event, this.extend, this.multiple);
 	        if (this.mustSelect || !selection.eq(this.view.state.selection) ||
 	            selection.main.assoc != this.view.state.selection.main.assoc)
 	            this.view.dispatch({
 	                selection,
-	                userEvent: "select.pointer",
-	                scrollIntoView: true
+	                userEvent: "select.pointer"
 	            });
 	        this.mustSelect = false;
 	    }
@@ -70890,23 +71025,15 @@
 	function basicMouseSelection(view, event) {
 	    let start = queryPos(view, event), type = getClickType(event);
 	    let startSel = view.state.selection;
-	    let last = start, lastEvent = event;
 	    return {
 	        update(update) {
 	            if (update.docChanged) {
 	                start.pos = update.changes.mapPos(start.pos);
 	                startSel = startSel.map(update.changes);
-	                lastEvent = null;
 	            }
 	        },
 	        get(event, extend, multiple) {
-	            let cur;
-	            if (lastEvent && event.clientX == lastEvent.clientX && event.clientY == lastEvent.clientY)
-	                cur = last;
-	            else {
-	                cur = last = queryPos(view, event);
-	                lastEvent = event;
-	            }
+	            let cur = queryPos(view, event);
 	            let range = rangeForClick(view, cur.pos, cur.bias, type);
 	            if (start.pos != cur.pos && !extend) {
 	                let startRange = rangeForClick(view, start.pos, start.bias, type);
@@ -72352,7 +72479,7 @@
 	    });
 	}
 	const baseTheme$1$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
-	    "&.cm-editor": {
+	    "&": {
 	        position: "relative !important",
 	        boxSizing: "border-box",
 	        "&.cm-focused": {
@@ -72383,7 +72510,6 @@
 	        margin: 0,
 	        flexGrow: 2,
 	        flexShrink: 0,
-	        minHeight: "100%",
 	        display: "block",
 	        whiteSpace: "pre",
 	        wordWrap: "normal",
@@ -72405,14 +72531,13 @@
 	    "&dark .cm-content": { caretColor: "white" },
 	    ".cm-line": {
 	        display: "block",
-	        padding: "0 2px 0 4px"
+	        padding: "0 2px 0 6px"
 	    },
-	    ".cm-selectionLayer": {
-	        zIndex: -1,
-	        contain: "size style"
-	    },
-	    ".cm-selectionBackground": {
-	        position: "absolute",
+	    ".cm-layer": {
+	        contain: "size style",
+	        "& > *": {
+	            position: "absolute"
+	        }
 	    },
 	    "&light .cm-selectionBackground": {
 	        background: "#d9d9d9"
@@ -72427,8 +72552,6 @@
 	        background: "#233"
 	    },
 	    ".cm-cursorLayer": {
-	        zIndex: 100,
-	        contain: "size style",
 	        pointerEvents: "none"
 	    },
 	    "&.cm-focused .cm-cursorLayer": {
@@ -72440,7 +72563,6 @@
 	    "@keyframes cm-blink": { "0%": {}, "50%": { opacity: 0 }, "100%": {} },
 	    "@keyframes cm-blink2": { "0%": {}, "50%": { opacity: 0 }, "100%": {} },
 	    ".cm-cursor, .cm-dropCursor": {
-	        position: "absolute",
 	        borderLeft: "1.2px solid black",
 	        marginLeft: "-0.6px",
 	        pointerEvents: "none",
@@ -72534,6 +72656,21 @@
 	        display: "inline-block",
 	        verticalAlign: "top",
 	    },
+	    ".cm-highlightSpace:before": {
+	        content: "attr(data-display)",
+	        position: "absolute",
+	        pointerEvents: "none",
+	        color: "#888"
+	    },
+	    ".cm-highlightTab": {
+	        backgroundImage: `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="20"><path stroke="%23888" stroke-width="1" fill="none" d="M1 10H196L190 5M190 15L196 10M197 4L197 16"/></svg>')`,
+	        backgroundSize: "auto 100%",
+	        backgroundPosition: "right 90%",
+	        backgroundRepeat: "no-repeat"
+	    },
+	    ".cm-trailingSpace": {
+	        backgroundColor: "#ff332255"
+	    },
 	    ".cm-button": {
 	        verticalAlign: "middle",
 	        color: "inherit",
@@ -72626,7 +72763,7 @@
 	                insert: Text.of(domChange.text.slice(diff.from, diff.toB).split(LineBreakPlaceholder)) };
 	        }
 	    }
-	    else if (newSel && (!view.hasFocus || !view.state.facet(editable) || newSel.main.eq(sel))) {
+	    else if (newSel && (!view.hasFocus && view.state.facet(editable) || newSel.main.eq(sel))) {
 	        newSel = null;
 	    }
 	    if (!change && !newSel)
@@ -72836,7 +72973,8 @@
 	        this.lastChange = 0;
 	        this.scrollTargets = [];
 	        this.intersection = null;
-	        this.resize = null;
+	        this.resizeScroll = null;
+	        this.resizeContent = null;
 	        this.intersecting = false;
 	        this.gapIntersection = null;
 	        this.gaps = [];
@@ -72874,12 +73012,14 @@
 	        this.onPrint = this.onPrint.bind(this);
 	        this.onScroll = this.onScroll.bind(this);
 	        if (typeof ResizeObserver == "function") {
-	            this.resize = new ResizeObserver(() => {
+	            this.resizeScroll = new ResizeObserver(() => {
 	                var _a;
 	                if (((_a = this.view.docView) === null || _a === void 0 ? void 0 : _a.lastUpdate) < Date.now() - 75)
 	                    this.onResize();
 	            });
-	            this.resize.observe(view.scrollDOM);
+	            this.resizeScroll.observe(view.scrollDOM);
+	            this.resizeContent = new ResizeObserver(() => this.view.requestMeasure());
+	            this.resizeContent.observe(view.contentDOM);
 	        }
 	        this.addWindowListeners(this.win = view.win);
 	        this.start();
@@ -73198,11 +73338,12 @@
 	        win.document.removeEventListener("selectionchange", this.onSelectionChange);
 	    }
 	    destroy() {
-	        var _a, _b, _c;
+	        var _a, _b, _c, _d;
 	        this.stop();
 	        (_a = this.intersection) === null || _a === void 0 ? void 0 : _a.disconnect();
 	        (_b = this.gapIntersection) === null || _b === void 0 ? void 0 : _b.disconnect();
-	        (_c = this.resize) === null || _c === void 0 ? void 0 : _c.disconnect();
+	        (_c = this.resizeScroll) === null || _c === void 0 ? void 0 : _c.disconnect();
+	        (_d = this.resizeContent) === null || _d === void 0 ? void 0 : _d.disconnect();
 	        for (let dom of this.scrollTargets)
 	            dom.removeEventListener("scroll", this.onScroll);
 	        this.removeWindowListeners(this.win);
@@ -73301,7 +73442,7 @@
 	        this.scrollDOM.className = "cm-scroller";
 	        this.scrollDOM.appendChild(this.contentDOM);
 	        this.announceDOM = document.createElement("div");
-	        this.announceDOM.style.cssText = "position: absolute; top: -10000px";
+	        this.announceDOM.style.cssText = "position: fixed; top: -10000px";
 	        this.announceDOM.setAttribute("aria-live", "polite");
 	        this.dom = document.createElement("div");
 	        this.dom.appendChild(this.announceDOM);
@@ -73686,6 +73827,8 @@
 	        if (this.measureScheduled < 0)
 	            this.measureScheduled = this.win.requestAnimationFrame(() => this.measure());
 	        if (request) {
+	            if (this.measureRequests.indexOf(request) > -1)
+	                return;
 	            if (request.key != null)
 	                for (let i = 0; i < this.measureRequests.length; i++) {
 	                    if (this.measureRequests[i].key === request.key) {
@@ -74361,6 +74504,8 @@
 	        if (runFor(scopeObj[prefix + modifiers(name, event, !isChar)]))
 	            return true;
 	        if (isChar && (event.altKey || event.metaKey || event.ctrlKey) &&
+	            // Ctrl-Alt may be used for AltGr on Windows
+	            !(browser.windows && event.ctrlKey && event.altKey) &&
 	            (baseName = base[event.keyCode]) && baseName != name) {
 	            if (runFor(scopeObj[prefix + modifiers(baseName, event, true)]))
 	                return true;
@@ -74598,6 +74743,17 @@
 	                : pos.bottom + (size.bottom - size.top) + offset.y > space.bottom) &&
 	                above == (space.bottom - pos.bottom > pos.top - space.top))
 	                above = !above;
+	            let spaceVert = (above ? pos.top - space.top : space.bottom - pos.bottom) - arrowHeight;
+	            if (spaceVert < height && tView.resize !== false) {
+	                if (spaceVert < this.view.defaultLineHeight) {
+	                    dom.style.top = Outside;
+	                    continue;
+	                }
+	                dom.style.height = (height = spaceVert) + "px";
+	            }
+	            else if (dom.style.height) {
+	                dom.style.height = "";
+	            }
 	            let top = above ? pos.top - height - arrowHeight - offset.y : pos.bottom + arrowHeight + offset.y;
 	            let right = left + width;
 	            if (tView.overlap !== true)
@@ -74641,7 +74797,8 @@
 	});
 	const baseTheme$4 = /*@__PURE__*/EditorView.baseTheme({
 	    ".cm-tooltip": {
-	        zIndex: 100
+	        zIndex: 100,
+	        boxSizing: "border-box"
 	    },
 	    "&light .cm-tooltip": {
 	        border: "1px solid #bbb",
@@ -75206,8 +75363,8 @@
 	    /// Define a node type.
 	    static define(spec) {
 	        let props = spec.props && spec.props.length ? Object.create(null) : noProps;
-	        let flags = (spec.top ? 1 /* Top */ : 0) | (spec.skipped ? 2 /* Skipped */ : 0) |
-	            (spec.error ? 4 /* Error */ : 0) | (spec.name == null ? 8 /* Anonymous */ : 0);
+	        let flags = (spec.top ? 1 /* NodeFlag.Top */ : 0) | (spec.skipped ? 2 /* NodeFlag.Skipped */ : 0) |
+	            (spec.error ? 4 /* NodeFlag.Error */ : 0) | (spec.name == null ? 8 /* NodeFlag.Anonymous */ : 0);
 	        let type = new NodeType(spec.name || "", props, spec.id, flags);
 	        if (spec.props)
 	            for (let src of spec.props) {
@@ -75225,14 +75382,14 @@
 	    /// the prop isn't present on this node.
 	    prop(prop) { return this.props[prop.id]; }
 	    /// True when this is the top node of a grammar.
-	    get isTop() { return (this.flags & 1 /* Top */) > 0; }
+	    get isTop() { return (this.flags & 1 /* NodeFlag.Top */) > 0; }
 	    /// True when this node is produced by a skip rule.
-	    get isSkipped() { return (this.flags & 2 /* Skipped */) > 0; }
+	    get isSkipped() { return (this.flags & 2 /* NodeFlag.Skipped */) > 0; }
 	    /// Indicates whether this is an error node.
-	    get isError() { return (this.flags & 4 /* Error */) > 0; }
+	    get isError() { return (this.flags & 4 /* NodeFlag.Error */) > 0; }
 	    /// When true, this node type doesn't correspond to a user-declared
 	    /// named node, for example because it is used to cache repetition.
-	    get isAnonymous() { return (this.flags & 8 /* Anonymous */) > 0; }
+	    get isAnonymous() { return (this.flags & 8 /* NodeFlag.Anonymous */) > 0; }
 	    /// Returns true when this node's name or one of its
 	    /// [groups](#common.NodeProp^group) matches the given string.
 	    is(name) {
@@ -75265,7 +75422,7 @@
 	    }
 	}
 	/// An empty dummy node type to use when no actual type is available.
-	NodeType.none = new NodeType("", Object.create(null), 0, 8 /* Anonymous */);
+	NodeType.none = new NodeType("", Object.create(null), 0, 8 /* NodeFlag.Anonymous */);
 	/// A node set holds a collection of node types. It is used to
 	/// compactly represent trees by storing their type ids, rather than a
 	/// full pointer to the type object, in a numeric array. Each parser
@@ -75474,7 +75631,7 @@
 	    /// which may have children grouped into subtrees with type
 	    /// [`NodeType.none`](#common.NodeType^none).
 	    balance(config = {}) {
-	        return this.children.length <= 8 /* BranchFactor */ ? this :
+	        return this.children.length <= 8 /* Balance.BranchFactor */ ? this :
 	            balanceRange(NodeType.none, this.children, this.positions, 0, this.children.length, 0, this.length, (children, positions, length) => new Tree(this.type, children, positions, length, this.propValues), config.makeTree || ((children, positions, length) => new Tree(NodeType.none, children, positions, length)));
 	    }
 	    /// Build a tree from a postfix-ordered buffer of node information,
@@ -75553,26 +75710,27 @@
 	        return pick;
 	    }
 	    /// @internal
-	    slice(startI, endI, from, to) {
+	    slice(startI, endI, from) {
 	        let b = this.buffer;
-	        let copy = new Uint16Array(endI - startI);
+	        let copy = new Uint16Array(endI - startI), len = 0;
 	        for (let i = startI, j = 0; i < endI;) {
 	            copy[j++] = b[i++];
 	            copy[j++] = b[i++] - from;
-	            copy[j++] = b[i++] - from;
+	            let to = copy[j++] = b[i++] - from;
 	            copy[j++] = b[i++] - startI;
+	            len = Math.max(len, to);
 	        }
-	        return new TreeBuffer(copy, to - from, this.set);
+	        return new TreeBuffer(copy, len, this.set);
 	    }
 	}
 	function checkSide(side, pos, from, to) {
 	    switch (side) {
-	        case -2 /* Before */: return from < pos;
-	        case -1 /* AtOrBefore */: return to >= pos && from < pos;
-	        case 0 /* Around */: return from < pos && to > pos;
-	        case 1 /* AtOrAfter */: return from <= pos && to > pos;
-	        case 2 /* After */: return to > pos;
-	        case 4 /* DontCare */: return true;
+	        case -2 /* Side.Before */: return from < pos;
+	        case -1 /* Side.AtOrBefore */: return to >= pos && from < pos;
+	        case 0 /* Side.Around */: return from < pos && to > pos;
+	        case 1 /* Side.AtOrAfter */: return from <= pos && to > pos;
+	        case 2 /* Side.After */: return to > pos;
+	        case 4 /* Side.DontCare */: return true;
 	    }
 	}
 	function enterUnfinishedNodesBefore(node, pos) {
@@ -75662,10 +75820,10 @@
 	                return null;
 	        }
 	    }
-	    get firstChild() { return this.nextChild(0, 1, 0, 4 /* DontCare */); }
-	    get lastChild() { return this.nextChild(this._tree.children.length - 1, -1, 0, 4 /* DontCare */); }
-	    childAfter(pos) { return this.nextChild(0, 1, pos, 2 /* After */); }
-	    childBefore(pos) { return this.nextChild(this._tree.children.length - 1, -1, pos, -2 /* Before */); }
+	    get firstChild() { return this.nextChild(0, 1, 0, 4 /* Side.DontCare */); }
+	    get lastChild() { return this.nextChild(this._tree.children.length - 1, -1, 0, 4 /* Side.DontCare */); }
+	    childAfter(pos) { return this.nextChild(0, 1, pos, 2 /* Side.After */); }
+	    childBefore(pos) { return this.nextChild(this._tree.children.length - 1, -1, pos, -2 /* Side.Before */); }
 	    enter(pos, side, mode = 0) {
 	        let mounted;
 	        if (!(mode & IterMode.IgnoreOverlays) && (mounted = this._tree.prop(NodeProp.mounted)) && mounted.overlay) {
@@ -75688,10 +75846,10 @@
 	        return this._parent ? this._parent.nextSignificantParent() : null;
 	    }
 	    get nextSibling() {
-	        return this._parent && this.index >= 0 ? this._parent.nextChild(this.index + 1, 1, 0, 4 /* DontCare */) : null;
+	        return this._parent && this.index >= 0 ? this._parent.nextChild(this.index + 1, 1, 0, 4 /* Side.DontCare */) : null;
 	    }
 	    get prevSibling() {
-	        return this._parent && this.index >= 0 ? this._parent.nextChild(this.index - 1, -1, 0, 4 /* DontCare */) : null;
+	        return this._parent && this.index >= 0 ? this._parent.nextChild(this.index - 1, -1, 0, 4 /* Side.DontCare */) : null;
 	    }
 	    cursor(mode = 0) { return new TreeCursor(this, mode); }
 	    get tree() { return this._tree; }
@@ -75753,24 +75911,24 @@
 	    }
 	}
 	class BufferNode {
+	    get name() { return this.type.name; }
+	    get from() { return this.context.start + this.context.buffer.buffer[this.index + 1]; }
+	    get to() { return this.context.start + this.context.buffer.buffer[this.index + 2]; }
 	    constructor(context, _parent, index) {
 	        this.context = context;
 	        this._parent = _parent;
 	        this.index = index;
 	        this.type = context.buffer.set.types[context.buffer.buffer[index]];
 	    }
-	    get name() { return this.type.name; }
-	    get from() { return this.context.start + this.context.buffer.buffer[this.index + 1]; }
-	    get to() { return this.context.start + this.context.buffer.buffer[this.index + 2]; }
 	    child(dir, pos, side) {
 	        let { buffer } = this.context;
 	        let index = buffer.findChild(this.index + 4, buffer.buffer[this.index + 3], dir, pos - this.context.start, side);
 	        return index < 0 ? null : new BufferNode(this.context, this, index);
 	    }
-	    get firstChild() { return this.child(1, 0, 4 /* DontCare */); }
-	    get lastChild() { return this.child(-1, 0, 4 /* DontCare */); }
-	    childAfter(pos) { return this.child(1, pos, 2 /* After */); }
-	    childBefore(pos) { return this.child(-1, pos, -2 /* Before */); }
+	    get firstChild() { return this.child(1, 0, 4 /* Side.DontCare */); }
+	    get lastChild() { return this.child(-1, 0, 4 /* Side.DontCare */); }
+	    childAfter(pos) { return this.child(1, pos, 2 /* Side.After */); }
+	    childBefore(pos) { return this.child(-1, pos, -2 /* Side.Before */); }
 	    enter(pos, side, mode = 0) {
 	        if (mode & IterMode.ExcludeBuffers)
 	            return null;
@@ -75782,7 +75940,7 @@
 	        return this._parent || this.context.parent.nextSignificantParent();
 	    }
 	    externalSibling(dir) {
-	        return this._parent ? null : this.context.parent.nextChild(this.context.index + dir, dir, 0, 4 /* DontCare */);
+	        return this._parent ? null : this.context.parent.nextChild(this.context.index + dir, dir, 0, 4 /* Side.DontCare */);
 	    }
 	    get nextSibling() {
 	        let { buffer } = this.context;
@@ -75796,7 +75954,7 @@
 	        let parentStart = this._parent ? this._parent.index + 4 : 0;
 	        if (this.index == parentStart)
 	            return this.externalSibling(-1);
-	        return new BufferNode(this.context, this._parent, buffer.findChild(parentStart, this.index, -1, 0, 4 /* DontCare */));
+	        return new BufferNode(this.context, this._parent, buffer.findChild(parentStart, this.index, -1, 0, 4 /* Side.DontCare */));
 	    }
 	    cursor(mode = 0) { return new TreeCursor(this, mode); }
 	    get tree() { return null; }
@@ -75805,8 +75963,8 @@
 	        let { buffer } = this.context;
 	        let startI = this.index + 4, endI = buffer.buffer[this.index + 3];
 	        if (endI > startI) {
-	            let from = buffer.buffer[this.index + 1], to = buffer.buffer[this.index + 2];
-	            children.push(buffer.slice(startI, endI, from, to));
+	            let from = buffer.buffer[this.index + 1];
+	            children.push(buffer.slice(startI, endI, from));
 	            positions.push(0);
 	        }
 	        return new Tree(this.type, children, positions, this.to - this.from);
@@ -75833,6 +75991,8 @@
 	/// A tree cursor object focuses on a given node in a syntax tree, and
 	/// allows you to move to adjacent nodes.
 	class TreeCursor {
+	    /// Shorthand for `.type.name`.
+	    get name() { return this.type.name; }
 	    /// @internal
 	    constructor(node, 
 	    /// @internal
@@ -75856,8 +76016,6 @@
 	            this.yieldBuf(node.index);
 	        }
 	    }
-	    /// Shorthand for `.type.name`.
-	    get name() { return this.type.name; }
 	    yieldNode(node) {
 	        if (!node)
 	            return false;
@@ -75902,13 +76060,13 @@
 	    }
 	    /// Move the cursor to this node's first child. When this returns
 	    /// false, the node has no child, and the cursor has not been moved.
-	    firstChild() { return this.enterChild(1, 0, 4 /* DontCare */); }
+	    firstChild() { return this.enterChild(1, 0, 4 /* Side.DontCare */); }
 	    /// Move the cursor to this node's last child.
-	    lastChild() { return this.enterChild(-1, 0, 4 /* DontCare */); }
+	    lastChild() { return this.enterChild(-1, 0, 4 /* Side.DontCare */); }
 	    /// Move the cursor to the first child that ends after `pos`.
-	    childAfter(pos) { return this.enterChild(1, pos, 2 /* After */); }
+	    childAfter(pos) { return this.enterChild(1, pos, 2 /* Side.After */); }
 	    /// Move to the last child that starts before `pos`.
-	    childBefore(pos) { return this.enterChild(-1, pos, -2 /* Before */); }
+	    childBefore(pos) { return this.enterChild(-1, pos, -2 /* Side.Before */); }
 	    /// Move the cursor to the child around `pos`. If side is -1 the
 	    /// child may end at that position, when 1 it may start there. This
 	    /// will also enter [overlaid](#common.MountedTree.overlay)
@@ -75934,19 +76092,19 @@
 	        if (!this.buffer)
 	            return !this._tree._parent ? false
 	                : this.yield(this._tree.index < 0 ? null
-	                    : this._tree._parent.nextChild(this._tree.index + dir, dir, 0, 4 /* DontCare */, this.mode));
+	                    : this._tree._parent.nextChild(this._tree.index + dir, dir, 0, 4 /* Side.DontCare */, this.mode));
 	        let { buffer } = this.buffer, d = this.stack.length - 1;
 	        if (dir < 0) {
 	            let parentStart = d < 0 ? 0 : this.stack[d] + 4;
 	            if (this.index != parentStart)
-	                return this.yieldBuf(buffer.findChild(parentStart, this.index, -1, 0, 4 /* DontCare */));
+	                return this.yieldBuf(buffer.findChild(parentStart, this.index, -1, 0, 4 /* Side.DontCare */));
 	        }
 	        else {
 	            let after = buffer.buffer[this.index + 3];
 	            if (after < (d < 0 ? buffer.buffer.length : buffer.buffer[this.stack[d] + 3]))
 	                return this.yieldBuf(after);
 	        }
-	        return d < 0 ? this.yield(this.buffer.parent.nextChild(this.buffer.index + dir, dir, 0, 4 /* DontCare */, this.mode)) : false;
+	        return d < 0 ? this.yield(this.buffer.parent.nextChild(this.buffer.index + dir, dir, 0, 4 /* Side.DontCare */, this.mode)) : false;
 	    }
 	    /// Move to this node's next sibling, if any.
 	    nextSibling() { return this.sibling(1); }
@@ -75983,7 +76141,7 @@
 	        return true;
 	    }
 	    move(dir, enter) {
-	        if (enter && this.enterChild(dir, 0, 4 /* DontCare */))
+	        if (enter && this.enterChild(dir, 0, 4 /* Side.DontCare */))
 	            return true;
 	        for (;;) {
 	            if (this.sibling(dir))
@@ -75993,7 +76151,7 @@
 	        }
 	    }
 	    /// Move to the next node in a
-	    /// [pre-order](https://en.wikipedia.org/wiki/Tree_traversal#Pre-order_(NLR))
+	    /// [pre-order](https://en.wikipedia.org/wiki/Tree_traversal#Pre-order,_NLR)
 	    /// traversal, going from a node to its first child or, if the
 	    /// current node is empty or `enter` is false, its next sibling or
 	    /// the next sibling of the first parent node that has one.
@@ -76109,17 +76267,17 @@
 	        let lookAheadAtStart = lookAhead;
 	        while (size < 0) {
 	            cursor.next();
-	            if (size == -1 /* Reuse */) {
+	            if (size == -1 /* SpecialRecord.Reuse */) {
 	                let node = reused[id];
 	                children.push(node);
 	                positions.push(start - parentStart);
 	                return;
 	            }
-	            else if (size == -3 /* ContextChange */) { // Context change
+	            else if (size == -3 /* SpecialRecord.ContextChange */) { // Context change
 	                contextHash = id;
 	                return;
 	            }
-	            else if (size == -4 /* LookAhead */) {
+	            else if (size == -4 /* SpecialRecord.LookAhead */) {
 	                lookAhead = id;
 	                return;
 	            }
@@ -76236,7 +76394,7 @@
 	            fork.next();
 	            while (fork.pos > startPos) {
 	                if (fork.size < 0) {
-	                    if (fork.size == -3 /* ContextChange */)
+	                    if (fork.size == -3 /* SpecialRecord.ContextChange */)
 	                        localSkipped += 4;
 	                    else
 	                        break scan;
@@ -76272,10 +76430,10 @@
 	            buffer[--index] = start - bufferStart;
 	            buffer[--index] = id;
 	        }
-	        else if (size == -3 /* ContextChange */) {
+	        else if (size == -3 /* SpecialRecord.ContextChange */) {
 	            contextHash = id;
 	        }
-	        else if (size == -4 /* LookAhead */) {
+	        else if (size == -4 /* SpecialRecord.LookAhead */) {
 	            lookAhead = id;
 	        }
 	        return index;
@@ -76322,7 +76480,7 @@
 	    let total = 0;
 	    for (let i = from; i < to; i++)
 	        total += nodeSize(balanceType, children[i]);
-	    let maxChild = Math.ceil((total * 1.5) / 8 /* BranchFactor */);
+	    let maxChild = Math.ceil((total * 1.5) / 8 /* Balance.BranchFactor */);
 	    let localChildren = [], localPositions = [];
 	    function divide(children, positions, from, to, offset) {
 	        for (let i = from; i < to;) {
@@ -76383,16 +76541,16 @@
 	        this.to = to;
 	        this.tree = tree;
 	        this.offset = offset;
-	        this.open = (openStart ? 1 /* Start */ : 0) | (openEnd ? 2 /* End */ : 0);
+	        this.open = (openStart ? 1 /* Open.Start */ : 0) | (openEnd ? 2 /* Open.End */ : 0);
 	    }
 	    /// Whether the start of the fragment represents the start of a
 	    /// parse, or the end of a change. (In the second case, it may not
 	    /// be safe to reuse some nodes at the start, depending on the
 	    /// parsing algorithm.)
-	    get openStart() { return (this.open & 1 /* Start */) > 0; }
+	    get openStart() { return (this.open & 1 /* Open.Start */) > 0; }
 	    /// Whether the end of the fragment represents the end of a
 	    /// full-document parse, or the start of a change.
-	    get openEnd() { return (this.open & 2 /* End */) > 0; }
+	    get openEnd() { return (this.open & 2 /* Open.End */) > 0; }
 	    /// Create a set of fragments from a freshly parsed tree, or update
 	    /// an existing set of fragments by replacing the ones that overlap
 	    /// with a tree with content from the new tree. When `partial` is
@@ -76636,10 +76794,10 @@
 	            tags = [tags];
 	        for (let part of prop.split(" "))
 	            if (part) {
-	                let pieces = [], mode = 2 /* Normal */, rest = part;
+	                let pieces = [], mode = 2 /* Mode.Normal */, rest = part;
 	                for (let pos = 0;;) {
 	                    if (rest == "..." && pos > 0 && pos + 3 == part.length) {
-	                        mode = 1 /* Inherit */;
+	                        mode = 1 /* Mode.Inherit */;
 	                        break;
 	                    }
 	                    let m = /^"(?:[^"\\]|\\.)*?"|[^\/!]+/.exec(rest);
@@ -76651,7 +76809,7 @@
 	                        break;
 	                    let next = part[pos++];
 	                    if (pos == part.length && next == "!") {
-	                        mode = 0 /* Opaque */;
+	                        mode = 0 /* Mode.Opaque */;
 	                        break;
 	                    }
 	                    if (next != "/")
@@ -76675,8 +76833,8 @@
 	        this.context = context;
 	        this.next = next;
 	    }
-	    get opaque() { return this.mode == 0 /* Opaque */; }
-	    get inherit() { return this.mode == 1 /* Inherit */; }
+	    get opaque() { return this.mode == 0 /* Mode.Opaque */; }
+	    get inherit() { return this.mode == 1 /* Mode.Inherit */; }
 	    sort(other) {
 	        if (!other || other.depth < this.depth) {
 	            this.next = other;
@@ -76687,7 +76845,7 @@
 	    }
 	    get depth() { return this.context ? this.context.length : 0; }
 	}
-	Rule.empty = new Rule([], 2 /* Normal */, null);
+	Rule.empty = new Rule([], 2 /* Mode.Normal */, null);
 	/// Define a [highlighter](#highlight.Highlighter) from an array of
 	/// tag/class pairs. Classes associated with more specific tags will
 	/// take precedence.
@@ -76774,7 +76932,7 @@
 	            if (cls)
 	                cls += " ";
 	            cls += tagCls;
-	            if (rule.mode == 1 /* Inherit */)
+	            if (rule.mode == 1 /* Mode.Inherit */)
 	                inheritedClass += (inheritedClass ? " " : "") + tagCls;
 	        }
 	        this.startSpan(cursor.from, cls);
@@ -76792,7 +76950,7 @@
 	                if (rangeFrom < rangeTo && hasChild) {
 	                    while (cursor.from < rangeTo) {
 	                        this.highlightRange(cursor, rangeFrom, rangeTo, inheritedClass, highlighters);
-	                        this.startSpan(Math.min(to, cursor.to), cls);
+	                        this.startSpan(Math.min(rangeTo, cursor.to), cls);
 	                        if (cursor.to >= nextPos || !cursor.nextSibling())
 	                            break;
 	                    }
@@ -78733,6 +78891,7 @@
 	            closeOnBlur: true,
 	            maxRenderedOptions: 100,
 	            defaultKeymap: true,
+	            tooltipClass: () => "",
 	            optionClass: () => "",
 	            aboveCursor: false,
 	            icons: true,
@@ -78743,6 +78902,7 @@
 	            defaultKeymap: (a, b) => a && b,
 	            closeOnBlur: (a, b) => a && b,
 	            icons: (a, b) => a && b,
+	            tooltipClass: (a, b) => c => joinClass(a(c), b(c)),
 	            optionClass: (a, b) => c => joinClass(a(c), b(c)),
 	            addToOptions: (a, b) => a.concat(b)
 	        });
@@ -78821,14 +78981,17 @@
 	            key: this
 	        };
 	        this.space = null;
+	        this.currentClass = "";
 	        let cState = view.state.field(stateField);
 	        let { options, selected } = cState.open;
 	        let config = view.state.facet(completionConfig);
 	        this.optionContent = optionContent(config);
 	        this.optionClass = config.optionClass;
+	        this.tooltipClass = config.tooltipClass;
 	        this.range = rangeAroundSelected(options.length, selected, config.maxRenderedOptions);
 	        this.dom = document.createElement("div");
 	        this.dom.className = "cm-tooltip-autocomplete";
+	        this.updateTooltipClass(view.state);
 	        this.dom.addEventListener("mousedown", (e) => {
 	            for (let dom = e.target, match; dom && dom != this.dom; dom = dom.parentNode) {
 	                if (dom.nodeName == "LI" && (match = /-(\d+)$/.exec(dom.id)) && +match[1] < options.length) {
@@ -78849,12 +79012,25 @@
 	        var _a, _b, _c;
 	        let cState = update.state.field(this.stateField);
 	        let prevState = update.startState.field(this.stateField);
+	        this.updateTooltipClass(update.state);
 	        if (cState != prevState) {
 	            this.updateSel();
 	            if (((_a = cState.open) === null || _a === void 0 ? void 0 : _a.disabled) != ((_b = prevState.open) === null || _b === void 0 ? void 0 : _b.disabled))
 	                this.dom.classList.toggle("cm-tooltip-autocomplete-disabled", !!((_c = cState.open) === null || _c === void 0 ? void 0 : _c.disabled));
 	        }
 	    }
+	    updateTooltipClass(state) {
+	        let cls = this.tooltipClass(state);
+	        if (cls != this.currentClass) {
+	            for (let c of this.currentClass.split(" "))
+	                if (c)
+	                    this.dom.classList.remove(c);
+	            for (let c of cls.split(" "))
+	                if (c)
+	                    this.dom.classList.add(c);
+	            this.currentClass = cls;
+	        }
+	    }
 	    positioned(space) {
 	        this.space = space;
 	        if (this.info)
@@ -79115,13 +79291,13 @@
 	        if (active.length == this.active.length && active.every((a, i) => a == this.active[i]))
 	            active = this.active;
 	        let open = this.open;
+	        if (open && tr.docChanged)
+	            open = open.map(tr.changes);
 	        if (tr.selection || active.some(a => a.hasResult() && tr.changes.touchesRange(a.from, a.to)) ||
 	            !sameResults(active, this.active))
-	            open = CompletionDialog.build(active, state, this.id, this.open, conf);
+	            open = CompletionDialog.build(active, state, this.id, open, conf);
 	        else if (open && open.disabled && !active.some(a => a.state == 1 /* State.Pending */))
 	            open = null;
-	        else if (open && tr.docChanged)
-	            open = open.map(tr.changes);
 	        if (!open && active.every(a => a.state != 1 /* State.Pending */) && active.some(a => a.hasResult()))
 	            active = active.map(a => a.hasResult() ? new ActiveSource(a.source, 0 /* State.Inactive */) : a);
 	        for (let effect of tr.effects)
@@ -79476,6 +79652,7 @@
 	            maxWidth: "min(700px, 95vw)",
 	            minWidth: "250px",
 	            maxHeight: "10em",
+	            height: "100%",
 	            listStyle: "none",
 	            margin: 0,
 	            padding: 0,
@@ -80430,7 +80607,7 @@
 	function extendSel(view, how) {
 	    let selection = updateSel(view.state.selection, range => {
 	        let head = how(range);
-	        return EditorSelection.range(range.anchor, head.head, head.goalColumn);
+	        return EditorSelection.range(range.anchor, head.head, head.goalColumn, head.bidiLevel || undefined);
 	    });
 	    if (selection.eq(view.state.selection))
 	        return false;
@@ -84403,6 +84580,88 @@
 	    }
 	});
 
+	/**
+	 * Create an array of syntax errors in the given tree.
+	 *
+	 * @param {Tree} syntaxTree
+	 * @returns {LintMessage[]} array of syntax errors
+	 */
+	function lintSyntax(syntaxTree) {
+
+	  const lintMessages = [];
+
+	  syntaxTree.iterate({
+	    enter: node => {
+	      if (node.type.isError) {
+
+	        const error = node.toString();
+
+	        /* The error has the pattern [⚠ || ⚠(NodeType)]. The regex extracts the node type from inside the brackets */
+	        const match = /\((.*?)\)/.exec(error);
+	        const nodeType = match && match[1];
+
+	        let message;
+
+	        if (nodeType) {
+	          message = 'unexpected ' + nodeType;
+	        } else {
+	          message = 'expression expected';
+	        }
+
+	        lintMessages.push(
+	          {
+	            from: node.from,
+	            to: node.to,
+	            severity: 'error',
+	            message: message,
+	            type: 'syntaxError'
+	          }
+	        );
+	      }
+	    }
+	  });
+
+	  return lintMessages;
+	}
+
+	/**
+	 * Generates lint messages for the given syntax tree.
+	 *
+	 * @param {Tree} syntaxTree
+	 * @returns {LintMessage[]} array of all lint messages
+	 */
+	function lintAll(syntaxTree) {
+
+	  const lintMessages = [
+	    ... lintSyntax(syntaxTree)
+	  ];
+
+	  return lintMessages;
+	}
+
+	/**
+	 * CodeMirror extension that provides linting for FEEL expressions.
+	 *
+	 * @param {EditorView} editorView
+	 * @returns {Source} CodeMirror linting source
+	 */
+	const cmFeelLinter = () => editorView => {
+
+	  // don't lint if the Editor is empty
+	  if (editorView.state.doc.length === 0) {
+	    return [];
+	  }
+
+	  const tree = syntaxTree(editorView.state);
+
+	  const messages = lintAll(tree);
+
+	  return messages.map(message => ({
+	    ...message,
+	    source: 'syntaxError'
+	  }));
+	};
+
 	// helpers ///////////////////////////////
 
 	function isNodeEmpty(node) {
@@ -84766,9 +85025,10 @@
 	    label: tag.name,
 	    type: 'function',
 	    info: () => {
-	      const html = domify$1(tag.description);
+	      const html = domify$1(`<div class="description">${tag.description}<div>`);
 	      return html;
-	    }
+	    },
+	    boost: -1
 	  }
 	));
 
@@ -84807,6 +85067,109 @@
 	 */
 	const variablesFacet = Facet.define();
 
+	var pathExpression = context => {
+	  const variables = context.state.facet(variablesFacet)[0];
+	  const nodeBefore = syntaxTree(context.state).resolve(context.pos, -1);
+
+	  if (!isPathExpression(nodeBefore)) {
+	    return;
+	  }
+
+	  const expression = findPathExpression(nodeBefore);
+
+	  // if the cursor is directly after the `.`, variable starts at the cursor position
+	  const from = nodeBefore === expression ? context.pos : nodeBefore.from;
+
+	  const path = getPath(expression, context);
+
+	  let options = variables;
+	  for (var i = 0; i < path.length - 1; i++) {
+	    var childVar = options.find(val => val.name === path[i].name);
+
+	    if (!childVar) {
+	      return null;
+	    }
+
+	    // only suggest if variable type matches
+	    if (
+	      childVar.isList !== 'optional' &&
+	      !!childVar.isList !== path[i].isList
+	    ) {
+	      return;
+	    }
+
+	    options = childVar.entries;
+	  }
+
+	  if (!options) return;
+
+	  options = options.map(v => ({
+	    label: v.name,
+	    type: 'variable',
+	    info: v.info,
+	    detail: v.detail
+	  }));
+
+	  const result = {
+	    from: from,
+	    options: options
+	  };
+
+	  return result;
+	};
+
+
+	function findPathExpression(node) {
+	  while (node) {
+	    if (node.name === 'PathExpression') {
+	      return node;
+	    }
+	    node = node.parent;
+	  }
+	}
+
+	// parses the path expression into a list of variable names with type information
+	// e.g. foo[0].bar => [ { name: 'foo', isList: true }, { name: 'bar', isList: false } ]
+	function getPath(node, context) {
+	  let path = [];
+
+	  for (let child = node.firstChild; child; child = child.nextSibling) {
+	    if (child.name === 'PathExpression') {
+	      path.push(...getPath(child, context));
+	    } else if (child.name === 'FilterExpression') {
+	      path.push(...getFilter(child, context));
+	    }
+	    else {
+	      path.push({
+	        name: getNodeContent(child, context),
+	        isList: false
+	      });
+	    }
+	  }
+	  return path;
+	}
+
+	function getFilter(node, context) {
+	  const list = node.firstChild;
+
+	  if (list.name === 'PathExpression') {
+	    const path = getPath(list, context);
+	    const last = path[path.length - 1];
+	    last.isList = true;
+
+	    return path;
+	  }
+
+	  return [ {
+	    name: getNodeContent(list, context),
+	    isList: true
+	  } ];
+	}
+
+	function getNodeContent(node, context) {
+	  return context.state.sliceDoc(node.from, node.to);
+	}
+
 	/**
 	 * @type {import('@codemirror/autocomplete').CompletionSource}
 	 */
@@ -84858,7 +85221,8 @@
 	      override: [
 	        variables,
 	        builtins,
-	        completeFromList(snippets)
+	        completeFromList(snippets.map(s => ({ ...s, boost: -1 }))),
+	        pathExpression
 	      ]
 	    })
 	  ];
@@ -84868,53 +85232,7 @@
 	  return new LanguageSupport(feelLanguage, [ ]);
 	}
 
-	const FeelLinter = function(editorView) {
-	  const messages = [];
-
-	  // don't lint if the Editor is empty
-	  if (editorView.state.doc.length === 0) {
-	    return messages;
-	  }
-
-	  const tree = syntaxTree(editorView.state);
-
-	  tree.iterate({
-	    enter: node => {
-	      if (node.type.isError) {
-
-	        const error = node.toString();
-
-	        /* The error has the pattern [⚠ || ⚠(NodeType)]. The regex extracts the node type from inside the brackets */
-	        const match = /\((.*?)\)/.exec(error);
-	        const nodeType = match && match[1];
-
-	        let message;
-
-	        if (nodeType) {
-	          message = 'unexpected ' + nodeType;
-	        } else {
-	          message = 'expression expected';
-	        }
-
-	        messages.push(
-	          {
-	            from: node.from,
-	            to: node.to,
-	            severity: 'error',
-	            message: message,
-	            source: 'syntaxError'
-	          }
-	        );
-	      }
-	    }
-	  });
-
-	  return messages;
-	};
-
-	var syntaxLinter = linter$1(FeelLinter);
-
-	var linter = [ syntaxLinter ];
+	var linter = [ linter$1(cmFeelLinter()) ];
 
 	const baseTheme = EditorView.theme({
 	  '& .cm-content': {
@@ -84982,9 +85300,11 @@
 
 	/**
 	 * @typedef {object} Variable
-	 * @property {string} name
-	 * @property {string} [info]
-	 * @property {string} [detail]
+	 * @property {string} name name or key of the variable
+	 * @property {string} [info] short information about the variable, e.g. type
+	 * @property {string} [detail] longer description of the variable content
+	 * @property {boolean} [isList] whether the variable is a list
+	 * @property {array<Variable>} [schema] array of child variables if the variable is a context or list
 	 */
 
 	const autocompletionConf = new Compartment();
@@ -86877,7 +87197,7 @@
 	    label,
 	    onChange,
 	    options = [],
-	    value,
+	    value = '',
 	    disabled,
 	    onFocus,
 	    onBlur
@@ -87922,28 +88242,41 @@
 
 	// api /////////////////////////
 
+	/**
+	 * Extractors add ProcessVariables to the `options.processVariables` parameter.
+	 * @callback extractor
+	 * @param {Object} options
+	 * @param {Array<ModdleElement>} options.elements
+	 * @param {ModdleElement} options.containerElement
+	 * @param {Array<ProcessVariable>} options.processVariables
+	 */
+
 	/**
 	 * Retrieves all process variables for a given container element.
 	 * @param {ModdleElement} containerElement
+	 * @param {Array<extractor>} [additionalExtractors]
 	 *
-	 * @returns {Array<ProcessVariable>}
+	 * @returns {Promise<Array<ProcessVariable>>}
 	 */
-	function getProcessVariables$1(containerElement) {
+	function getProcessVariables$1(containerElement, additionalExtractors = []) {
 	  var processVariables = [];
 
 	  // (1) extract all flow elements inside the container
 	  var elements = selfAndAllFlowElements$1([ containerElement ], false);
 
+	  const allPromises = [];
+
 	  // (2) extract all variables from the extractors
-	  minDash$1.forEach(extractors$1, function(extractor) {
-	    extractor({
+	  minDash$1.forEach([ ...extractors$1, ...additionalExtractors ], function(extractor) {
+	    allPromises.push(extractor({
 	      elements: elements,
 	      containerElement: containerElement,
 	      processVariables: processVariables
-	    });
+	    }));
 	  });
 
-	  return processVariables;
+	  return Promise.all(allPromises)
+	    .then(() => processVariables);
 	}
 
 	/**
@@ -87955,12 +88288,13 @@
 	 *
 	 * @param {string} scope
 	 * @param {ModdleElement} rootElement element from where to extract all variables
+	 * @param {Array<extractor>} [additionalExtractors]
 	 *
-	 * @returns {Array<ProcessVariable>}
+	 * @returns {Promise<Array<ProcessVariable>>}
 	 */
-	function getVariablesForScope$1(scope, rootElement) {
+	async function getVariablesForScope$1(scope, rootElement, additionalExtractors = []) {
 
-	  var allVariables = getProcessVariables$1(rootElement);
+	  var allVariables = await getProcessVariables$1(rootElement, additionalExtractors);
 
 	  var scopeElement = getElement$1(scope, rootElement);
 
@@ -87982,8 +88316,8 @@
 	}
 
 
-	function getVariablesForElement(element) {
-	  return getVariablesForScope$1(getScope$2(element), getRootElement$2(element));
+	function getVariablesForElement(element, additionalExtractors = []) {
+	  return getVariablesForScope$1(getScope$2(element), getRootElement$2(element), additionalExtractors);
 	}
 
 	function getScope$2(element) {
@@ -88688,30 +89022,46 @@
 	 * @property {ModdleElement} scope
 	 */
 
+
+	/**
+	 * Extractors add ProcessVariables to the `options.processVariables` parameter.
+	 * @callback extractor
+	 * @param {Object} options
+	 * @param {Array<ModdleElement>} options.elements
+	 * @param {ModdleElement} options.containerElement
+	 * @param {Array<ProcessVariable>} options.processVariables
+	 */
+
 	// api /////////////////////////
 
 	/**
 	 * Retrieves all process variables for a given container element.
 	 * @param {ModdleElement} containerElement
+	 * @param {Array<extractor>} additionalExtractors
 	 *
-	 * @returns {Array<ProcessVariable>}
+	 * @returns {Promise<Array<ProcessVariable>>}
 	 */
-	function getProcessVariables(containerElement) {
+	function getProcessVariables(containerElement, additionalExtractors = []) {
+	  const allPromises = [];
+
 	  var processVariables = [];
 
 	  // (1) extract all flow elements inside the container
 	  var elements = selfAndAllFlowElements([ containerElement ], false);
 
 	  // (2) extract all variables from the extractors
-	  minDash.forEach(extractors, function(extractor) {
-	    extractor({
-	      elements: elements,
-	      containerElement: containerElement,
-	      processVariables: processVariables
-	    });
+	  minDash.forEach([ ...extractors, ...additionalExtractors ], function(extractor) {
+	    allPromises.push(
+	      extractor({
+	        elements: elements,
+	        containerElement: containerElement,
+	        processVariables: processVariables
+	      })
+	    );
 	  });
 
-	  return processVariables;
+	  return Promise.all(allPromises)
+	    .then(() => processVariables);
 	}
 
 	/**
@@ -88723,12 +89073,13 @@
 	 *
 	 * @param {string} scope
 	 * @param {ModdleElement} rootElement element from where to extract all variables
+	 * @param {Array<extractor>} additionalExtractors
 	 *
-	 * @returns {Array<ProcessVariable>}
+	 * @returns {Promise<Array<ProcessVariable>>}
 	 */
-	function getVariablesForScope(scope, rootElement) {
+	async function getVariablesForScope(scope, rootElement, additionalExtractors = []) {
 
-	  var allVariables = getProcessVariables(rootElement);
+	  var allVariables = await getProcessVariables(rootElement, additionalExtractors);
 
 	  var scopeElement = getElement(scope, rootElement);
 
@@ -91739,7 +92090,7 @@
 	/**
 	 * @returns {Array<Entry>} entries
 	 */
-	function ErrorProps$1(props) {
+	function ErrorProps$2(props) {
 	  const {
 	    element
 	  } = props;
@@ -91759,7 +92110,7 @@
 	      isEdited: isEdited$1
 	    }, {
 	      id: 'errorCode',
-	      component: ErrorCode$1,
+	      component: ErrorCode$2,
 	      isEdited: isEdited$1
 	    }];
 	  }
@@ -91875,7 +92226,7 @@
 	    debounce
 	  });
 	}
-	function ErrorCode$1(props) {
+	function ErrorCode$2(props) {
 	  const {
 	    element
 	  } = props;
@@ -93349,7 +93700,7 @@
 	    id: 'error',
 	    label: translate('Error'),
 	    component: Group,
-	    entries: [...ErrorProps$1({
+	    entries: [...ErrorProps$2({
 	      element
 	    })]
 	  };
@@ -93528,8 +93879,8 @@
 	    const [variables, setVariables] = l$1([]);
 	    const eventBus = useService('eventBus');
 	    y(() => {
-	      const callback = () => {
-	        const variables = getVariablesForElement_1(bo);
+	      const callback = async () => {
+	        const variables = await getVariablesForElement_1(bo);
 	        setVariables(variables.map(variable => {
 	          return {
 	            name: variable.name,
@@ -93814,8 +94165,8 @@
 	}
 
 	const DMN_IMPLEMENTATION_OPTION = 'dmn',
-	  JOB_WORKER_IMPLEMENTATION_OPTION = 'jobWorker',
-	  DEFAULT_IMPLEMENTATION_OPTION = '';
+	  JOB_WORKER_IMPLEMENTATION_OPTION$1 = 'jobWorker',
+	  DEFAULT_IMPLEMENTATION_OPTION$1 = '';
 	function BusinessRuleImplementationProps(props) {
 	  const {
 	    element
@@ -93841,10 +94192,10 @@
 	    if (getCalledDecision$1(element)) {
 	      return DMN_IMPLEMENTATION_OPTION;
 	    }
-	    if (getTaskDefinition$2(element)) {
-	      return JOB_WORKER_IMPLEMENTATION_OPTION;
+	    if (getTaskDefinition$3(element)) {
+	      return JOB_WORKER_IMPLEMENTATION_OPTION$1;
 	    }
-	    return DEFAULT_IMPLEMENTATION_OPTION;
+	    return DEFAULT_IMPLEMENTATION_OPTION$1;
 	  };
 
 	  /**
@@ -93857,26 +94208,26 @@
 	    if (value === DMN_IMPLEMENTATION_OPTION) {
 	      extensionElement = getCalledDecision$1(element);
 	      extensionElementType = 'zeebe:CalledDecision';
-	    } else if (value === JOB_WORKER_IMPLEMENTATION_OPTION) {
-	      extensionElement = getTaskDefinition$2(element);
+	    } else if (value === JOB_WORKER_IMPLEMENTATION_OPTION$1) {
+	      extensionElement = getTaskDefinition$3(element);
 	      extensionElementType = 'zeebe:TaskDefinition';
 	    } else {
-	      resetElement(element, commandStack);
+	      resetElement$1(element, commandStack);
 	    }
 	    if (!extensionElement && extensionElementType) {
 	      extensionElement = createElement$1(extensionElementType, {}, null, bpmnFactory);
-	      updateExtensionElements(element, extensionElement, bpmnFactory, commandStack);
+	      updateExtensionElements$1(element, extensionElement, bpmnFactory, commandStack);
 	    }
 	  };
 	  const getOptions = () => {
 	    const options = [{
-	      value: DEFAULT_IMPLEMENTATION_OPTION,
+	      value: DEFAULT_IMPLEMENTATION_OPTION$1,
 	      label: translate('<none>')
 	    }, {
 	      value: DMN_IMPLEMENTATION_OPTION,
 	      label: translate('DMN decision')
 	    }, {
-	      value: JOB_WORKER_IMPLEMENTATION_OPTION,
+	      value: JOB_WORKER_IMPLEMENTATION_OPTION$1,
 	      label: translate('Job worker')
 	    }];
 	    return options;
@@ -93893,7 +94244,7 @@
 
 	// helper ///////////////////////
 
-	function getTaskDefinition$2(element) {
+	function getTaskDefinition$3(element) {
 	  const businessObject = getBusinessObject$1(element);
 	  return getExtensionElementsList$1(businessObject, 'zeebe:TaskDefinition')[0];
 	}
@@ -93902,11 +94253,11 @@
 	  return getExtensionElementsList$1(businessObject, 'zeebe:CalledDecision')[0];
 	}
 	function isBusinessRuleImplementationEdited(element) {
-	  return getTaskDefinition$2(element);
+	  return getTaskDefinition$3(element);
 	}
-	function resetElement(element, commandStack) {
+	function resetElement$1(element, commandStack) {
 	  const businessObject = getBusinessObject$1(element);
-	  const taskDefintion = getTaskDefinition$2(element);
+	  const taskDefintion = getTaskDefinition$3(element);
 	  const calledDecision = getCalledDecision$1(element);
 	  if (taskDefintion) {
 	    removeExtensionElements$1(element, businessObject, taskDefintion, commandStack);
@@ -93915,7 +94266,7 @@
 	    removeExtensionElements$1(element, businessObject, calledDecision, commandStack);
 	  }
 	}
-	function updateExtensionElements(element, extensionElementToAdd, bpmnFactory, commandStack) {
+	function updateExtensionElements$1(element, extensionElementToAdd, bpmnFactory, commandStack) {
 	  const businessObject = getBusinessObject$1(element);
 	  const commands = [];
 	  let extensionElements = businessObject.get('extensionElements');
@@ -93943,7 +94294,7 @@
 	  if (is$5(extensionElementToAdd, 'zeebe:TaskDefinition')) {
 	    extensionElementValues = without(extensionElements.get('values'), getCalledDecision$1(element));
 	  } else if (is$5(extensionElementToAdd, 'zeebe:CalledDecision')) {
-	    extensionElementValues = without(extensionElements.get('values'), getTaskDefinition$2(element));
+	    extensionElementValues = without(extensionElements.get('values'), getTaskDefinition$3(element));
 	  }
 
 	  // (3) add extension element to list
@@ -93973,7 +94324,7 @@
 	    isEdited: isEdited$6
 	  }, {
 	    id: 'resultVariable',
-	    component: ResultVariable$3,
+	    component: ResultVariable$4,
 	    isEdited: isEdited$1
 	  }];
 	}
@@ -94052,7 +94403,7 @@
 	    debounce
 	  });
 	}
-	function ResultVariable$3(props) {
+	function ResultVariable$4(props) {
 	  const {
 	    element,
 	    id
@@ -94232,6 +94583,52 @@
 	  }
 	}
 
+	function ErrorProps$1(props) {
+	  const {
+	    element
+	  } = props;
+	  const error = getError(element);
+	  const entries = [];
+	  if (error) {
+	    entries.push({
+	      id: 'errorCode',
+	      component: ErrorCode$1,
+	      isEdited: isEdited$6
+	    });
+	  }
+	  return entries;
+	}
+	function ErrorCode$1(props) {
+	  const {
+	    element
+	  } = props;
+	  const commandStack = useService('commandStack');
+	  const translate = useService('translate');
+	  const debounce = useService('debounceInput');
+	  const error = getError(element);
+	  const getValue = () => {
+	    return error.get('errorCode');
+	  };
+	  const setValue = value => {
+	    return commandStack.execute('element.updateModdleProperties', {
+	      element,
+	      moddleElement: error,
+	      properties: {
+	        errorCode: value
+	      }
+	    });
+	  };
+	  return FeelEntryWithContext({
+	    element,
+	    id: 'errorCode',
+	    label: translate('Code'),
+	    feel: 'optional',
+	    getValue,
+	    setValue,
+	    debounce
+	  });
+	}
+
 	function FormProps$1(props) {
 	  const {
 	    element,
@@ -94648,9 +95045,9 @@
 	    return !!getMessageEventDefinition(element);
 	  }
 
-	  // A BusinessRuleTask is per default not a ServiceTask, only if it has a TaskDefinition
+	  // BusinessRuleTask and ScriptTask are ServiceTasks only if they have a TaskDefinition
 	  // (ie. if the implementation is set to ==JobWorker)
-	  if (is$5(element, 'bpmn:BusinessRuleTask') && !getTaskDefinition$1(element)) {
+	  if (isAny(element, ['bpmn:BusinessRuleTask', 'bpmn:ScriptTask']) && !getTaskDefinition$2(element)) {
 	    return false;
 	  }
 	  return true;
@@ -94664,7 +95061,7 @@
 
 	// helper ////////////////
 
-	function getTaskDefinition$1(element) {
+	function getTaskDefinition$2(element) {
 	  const businessObject = getBusinessObject$1(element);
 	  return getExtensionElementsList$1(businessObject, 'zeebe:TaskDefinition')[0];
 	}
@@ -94967,7 +95364,7 @@
 	  return getParameters$1.apply(this, [element, 'outputParameters']);
 	}
 	function areInputParametersSupported$1(element) {
-	  return isAny(element, ['bpmn:UserTask', 'bpmn:SubProcess', 'bpmn:CallActivity', 'bpmn:BusinessRuleTask']) || isZeebeServiceTask(element);
+	  return isAny(element, ['bpmn:UserTask', 'bpmn:SubProcess', 'bpmn:CallActivity', 'bpmn:BusinessRuleTask', 'bpmn:ScriptTask']) || isZeebeServiceTask(element);
 	}
 	function areOutputParametersSupported$1(element) {
 	  return isAny(element, ['zeebe:ZeebeServiceTask', 'bpmn:UserTask', 'bpmn:SubProcess', 'bpmn:ReceiveTask', 'bpmn:CallActivity', 'bpmn:Event', 'bpmn:BusinessRuleTask']);
@@ -95010,7 +95407,8 @@
 	      element,
 	      bpmnFactory,
 	      commandStack
-	    })
+	    }),
+	    shouldSort: false
 	  };
 	}
 	function removeFactory$b({
@@ -95691,7 +96089,8 @@
 	      element,
 	      bpmnFactory,
 	      commandStack
-	    })
+	    }),
+	    shouldSort: false
 	  };
 	}
 	function removeFactory$a({
@@ -95806,37 +96205,196 @@
 	  };
 	}
 
-	function TargetProps(props) {
+	const SCRIPT_IMPLEMENTATION_OPTION = 'script',
+	  JOB_WORKER_IMPLEMENTATION_OPTION = 'jobWorker',
+	  DEFAULT_IMPLEMENTATION_OPTION = '';
+	function ScriptImplementationProps(props) {
 	  const {
 	    element
 	  } = props;
-	  if (!is$5(element, 'bpmn:CallActivity')) {
+	  if (!is$5(element, 'bpmn:ScriptTask')) {
 	    return [];
 	  }
 	  return [{
-	    id: 'targetProcessId',
-	    component: TargetProcessId,
+	    id: 'scriptImplementation',
+	    component: ScriptImplementation,
+	    isEdited: () => isScriptImplementationEdited(element)
+	  }];
+	}
+	function ScriptImplementation(props) {
+	  const {
+	    element,
+	    id
+	  } = props;
+	  const commandStack = useService('commandStack');
+	  const bpmnFactory = useService('bpmnFactory');
+	  const translate = useService('translate');
+	  const getValue = () => {
+	    if (getScript$1(element)) {
+	      return SCRIPT_IMPLEMENTATION_OPTION;
+	    }
+	    if (getTaskDefinition$1(element)) {
+	      return JOB_WORKER_IMPLEMENTATION_OPTION;
+	    }
+	    return DEFAULT_IMPLEMENTATION_OPTION;
+	  };
+
+	  /**
+	   * Set value by either creating a zeebe:script or a zeebe:taskDefintion
+	   * extension element. Note that they must not exist both at the same time, however
+	   * this will be ensured by a bpmn-js behavior (and not by the propPanel).
+	   */
+	  const setValue = value => {
+	    let extensionElement, extensionElementType;
+	    if (value === SCRIPT_IMPLEMENTATION_OPTION) {
+	      extensionElement = getScript$1(element);
+	      extensionElementType = 'zeebe:Script';
+	    } else if (value === JOB_WORKER_IMPLEMENTATION_OPTION) {
+	      extensionElement = getTaskDefinition$1(element);
+	      extensionElementType = 'zeebe:TaskDefinition';
+	    } else {
+	      resetElement(element, commandStack);
+	    }
+	    if (!extensionElement && extensionElementType) {
+	      extensionElement = createElement$1(extensionElementType, {}, null, bpmnFactory);
+	      updateExtensionElements(element, extensionElement, bpmnFactory, commandStack);
+	    }
+	  };
+	  const getOptions = () => {
+	    const options = [{
+	      value: DEFAULT_IMPLEMENTATION_OPTION,
+	      label: translate('<none>')
+	    }, {
+	      value: SCRIPT_IMPLEMENTATION_OPTION,
+	      label: translate('FEEL expression')
+	    }, {
+	      value: JOB_WORKER_IMPLEMENTATION_OPTION,
+	      label: translate('Job worker')
+	    }];
+	    return options;
+	  };
+	  return SelectEntry({
+	    element,
+	    id,
+	    label: translate('Implementation'),
+	    getValue,
+	    setValue,
+	    getOptions
+	  });
+	}
+
+	// helper ///////////////////////
+
+	function getTaskDefinition$1(element) {
+	  const businessObject = getBusinessObject$1(element);
+	  return getExtensionElementsList$1(businessObject, 'zeebe:TaskDefinition')[0];
+	}
+	function getScript$1(element) {
+	  const businessObject = getBusinessObject$1(element);
+	  return getExtensionElementsList$1(businessObject, 'zeebe:Script')[0];
+	}
+	function getTaskHeaders$2(element) {
+	  const businessObject = getBusinessObject$1(element);
+	  return getExtensionElementsList$1(businessObject, 'zeebe:TaskHeaders');
+	}
+	function isScriptImplementationEdited(element) {
+	  return getTaskDefinition$1(element) || getScript$1(element);
+	}
+	function resetElement(element, commandStack) {
+	  const businessObject = getBusinessObject$1(element);
+	  const taskDefinition = getTaskDefinition$1(element);
+	  const taskHeaders = getTaskHeaders$2(element);
+	  const script = getScript$1(element);
+	  if (taskDefinition) {
+	    const removed = [taskDefinition, taskHeaders].filter(Boolean);
+	    removeExtensionElements$1(element, businessObject, removed, commandStack);
+	    return;
+	  }
+	  if (script) {
+	    removeExtensionElements$1(element, businessObject, script, commandStack);
+	  }
+	}
+	function updateExtensionElements(element, extensionElementToAdd, bpmnFactory, commandStack) {
+	  const businessObject = getBusinessObject$1(element);
+	  const commands = [];
+	  let extensionElements = businessObject.get('extensionElements');
+	  let extensionElementValues;
+
+	  // (1) create bpmn:ExtensionElements if it doesn't exist
+	  if (!extensionElements) {
+	    extensionElements = createElement$1('bpmn:ExtensionElements', {
+	      values: []
+	    }, businessObject, bpmnFactory);
+	    commands.push({
+	      cmd: 'element.updateModdleProperties',
+	      context: {
+	        element,
+	        moddleElement: businessObject,
+	        properties: {
+	          extensionElements
+	        }
+	      }
+	    });
+	  }
+	  extensionElementToAdd.$parent = extensionElements;
+
+	  // (2) remove old exension element from extensionElements
+	  if (is$5(extensionElementToAdd, 'zeebe:TaskDefinition')) {
+	    extensionElementValues = without(extensionElements.get('values'), getScript$1(element));
+	  } else if (is$5(extensionElementToAdd, 'zeebe:Script')) {
+	    const matcher = extension => isAny(extension, ['zeebe:TaskDefinition', 'zeebe:TaskHeaders']);
+	    extensionElementValues = without(extensionElements.get('values'), matcher);
+	  }
+
+	  // (3) add extension element to list
+	  commands.push({
+	    cmd: 'element.updateModdleProperties',
+	    context: {
+	      element,
+	      moddleElement: extensionElements,
+	      properties: {
+	        values: [...extensionElementValues, extensionElementToAdd]
+	      }
+	    }
+	  });
+	  commandStack.execute('properties-panel.multi-command-executor', commands);
+	}
+
+	function ScriptProps$1(props) {
+	  const {
+	    element
+	  } = props;
+	  if (!is$5(element, 'bpmn:ScriptTask') || !getScript(element)) {
+	    return [];
+	  }
+	  return [{
+	    id: 'scriptExpression',
+	    component: Expression$3,
 	    isEdited: isEdited$6
+	  }, {
+	    id: 'resultVariable',
+	    component: ResultVariable$3,
+	    isEdited: isEdited$1
 	  }];
 	}
-	function TargetProcessId(props) {
+	function Expression$3(props) {
 	  const {
 	    element,
 	    id
 	  } = props;
-	  const commandStack = useService('commandStack'),
-	    bpmnFactory = useService('bpmnFactory'),
-	    translate = useService('translate'),
-	    debounce = useService('debounceInput');
+	  const commandStack = useService('commandStack');
+	  const bpmnFactory = useService('bpmnFactory');
+	  const translate = useService('translate');
+	  const debounce = useService('debounceInput');
 	  const getValue = () => {
-	    return getProcessId(element);
+	    return (getScript(element) || {}).get('expression');
 	  };
 	  const setValue = value => {
 	    const commands = [];
 	    const businessObject = getBusinessObject$1(element);
+	    let extensionElements = businessObject.get('extensionElements');
 
 	    // (1) ensure extension elements
-	    let extensionElements = businessObject.get('extensionElements');
 	    if (!extensionElements) {
 	      extensionElements = createElement$1('bpmn:ExtensionElements', {
 	        values: []
@@ -95853,66 +96411,48 @@
 	      });
 	    }
 
-	    // (2) ensure zeebe:calledElement
-	    let calledElement = getCalledElement$1(businessObject);
-	    if (!calledElement) {
-	      calledElement = createElement$1('zeebe:CalledElement', {}, extensionElements, bpmnFactory);
+	    // (2) ensure script
+	    let script = getScript(element);
+	    if (!script) {
+	      script = createElement$1('zeebe:Script', {}, extensionElements, bpmnFactory);
 	      commands.push({
 	        cmd: 'element.updateModdleProperties',
 	        context: {
 	          element,
 	          moddleElement: extensionElements,
 	          properties: {
-	            values: [...extensionElements.get('values'), calledElement]
+	            values: [...extensionElements.get('values'), script]
 	          }
 	        }
 	      });
 	    }
 
-	    // (3) Update processId attribute
+	    // (3) update script.expression
 	    commands.push({
 	      cmd: 'element.updateModdleProperties',
 	      context: {
 	        element,
-	        moddleElement: calledElement,
+	        moddleElement: script,
 	        properties: {
-	          processId: value
+	          expression: value
 	        }
 	      }
 	    });
 
-	    // (4) Execute the commands
+	    // (4) commit all updates
 	    commandStack.execute('properties-panel.multi-command-executor', commands);
 	  };
 	  return FeelEntryWithContext({
 	    element,
 	    id,
-	    label: translate('Process ID'),
-	    feel: 'optional',
+	    label: translate('FEEL expression'),
+	    feel: 'required',
 	    getValue,
 	    setValue,
 	    debounce
 	  });
 	}
-
-	function TaskDefinitionProps(props) {
-	  const {
-	    element
-	  } = props;
-	  if (!isZeebeServiceTask(element)) {
-	    return [];
-	  }
-	  return [{
-	    id: 'taskDefinitionType',
-	    component: TaskDefinitionType,
-	    isEdited: isEdited$6
-	  }, {
-	    id: 'taskDefinitionRetries',
-	    component: TaskDefinitionRetries,
-	    isEdited: isEdited$6
-	  }];
-	}
-	function TaskDefinitionType(props) {
+	function ResultVariable$3(props) {
 	  const {
 	    element,
 	    id
@@ -95922,7 +96462,195 @@
 	  const translate = useService('translate');
 	  const debounce = useService('debounceInput');
 	  const getValue = () => {
-	    return (getTaskDefinition$3(element) || {}).type;
+	    return (getScript(element) || {}).resultVariable;
+	  };
+	  const setValue = value => {
+	    const commands = [];
+	    const businessObject = getBusinessObject$1(element);
+	    let extensionElements = businessObject.get('extensionElements');
+
+	    // (1) ensure extension elements
+	    if (!extensionElements) {
+	      extensionElements = createElement$1('bpmn:ExtensionElements', {
+	        values: []
+	      }, businessObject, bpmnFactory);
+	      commands.push({
+	        cmd: 'element.updateModdleProperties',
+	        context: {
+	          element,
+	          moddleElement: businessObject,
+	          properties: {
+	            extensionElements
+	          }
+	        }
+	      });
+	    }
+
+	    // (2) ensure script
+	    let script = getScript(element);
+	    if (!script) {
+	      script = createElement$1('zeebe:Script', {}, extensionElements, bpmnFactory);
+	      commands.push({
+	        cmd: 'element.updateModdleProperties',
+	        context: {
+	          element,
+	          moddleElement: extensionElements,
+	          properties: {
+	            values: [...extensionElements.get('values'), script]
+	          }
+	        }
+	      });
+	    }
+
+	    // (3) update script.resultVariable
+	    commands.push({
+	      cmd: 'element.updateModdleProperties',
+	      context: {
+	        element,
+	        moddleElement: script,
+	        properties: {
+	          resultVariable: value
+	        }
+	      }
+	    });
+
+	    // (4) commit all updates
+	    commandStack.execute('properties-panel.multi-command-executor', commands);
+	  };
+	  return TextfieldEntry({
+	    element,
+	    id,
+	    label: translate('Result variable'),
+	    getValue,
+	    setValue,
+	    debounce
+	  });
+	}
+
+	// helper ///////////////////////
+
+	function getScript(element) {
+	  const businessObject = getBusinessObject$1(element);
+	  return getExtensionElementsList$1(businessObject, 'zeebe:Script')[0];
+	}
+
+	function TargetProps(props) {
+	  const {
+	    element
+	  } = props;
+	  if (!is$5(element, 'bpmn:CallActivity')) {
+	    return [];
+	  }
+	  return [{
+	    id: 'targetProcessId',
+	    component: TargetProcessId,
+	    isEdited: isEdited$6
+	  }];
+	}
+	function TargetProcessId(props) {
+	  const {
+	    element,
+	    id
+	  } = props;
+	  const commandStack = useService('commandStack'),
+	    bpmnFactory = useService('bpmnFactory'),
+	    translate = useService('translate'),
+	    debounce = useService('debounceInput');
+	  const getValue = () => {
+	    return getProcessId(element);
+	  };
+	  const setValue = value => {
+	    const commands = [];
+	    const businessObject = getBusinessObject$1(element);
+
+	    // (1) ensure extension elements
+	    let extensionElements = businessObject.get('extensionElements');
+	    if (!extensionElements) {
+	      extensionElements = createElement$1('bpmn:ExtensionElements', {
+	        values: []
+	      }, businessObject, bpmnFactory);
+	      commands.push({
+	        cmd: 'element.updateModdleProperties',
+	        context: {
+	          element,
+	          moddleElement: businessObject,
+	          properties: {
+	            extensionElements
+	          }
+	        }
+	      });
+	    }
+
+	    // (2) ensure zeebe:calledElement
+	    let calledElement = getCalledElement$1(businessObject);
+	    if (!calledElement) {
+	      calledElement = createElement$1('zeebe:CalledElement', {}, extensionElements, bpmnFactory);
+	      commands.push({
+	        cmd: 'element.updateModdleProperties',
+	        context: {
+	          element,
+	          moddleElement: extensionElements,
+	          properties: {
+	            values: [...extensionElements.get('values'), calledElement]
+	          }
+	        }
+	      });
+	    }
+
+	    // (3) Update processId attribute
+	    commands.push({
+	      cmd: 'element.updateModdleProperties',
+	      context: {
+	        element,
+	        moddleElement: calledElement,
+	        properties: {
+	          processId: value
+	        }
+	      }
+	    });
+
+	    // (4) Execute the commands
+	    commandStack.execute('properties-panel.multi-command-executor', commands);
+	  };
+	  return FeelEntryWithContext({
+	    element,
+	    id,
+	    label: translate('Process ID'),
+	    feel: 'optional',
+	    getValue,
+	    setValue,
+	    debounce
+	  });
+	}
+
+	function TaskDefinitionProps(props) {
+	  const {
+	    element
+	  } = props;
+	  if (!isZeebeServiceTask(element)) {
+	    return [];
+	  }
+	  return [{
+	    id: 'taskDefinitionType',
+	    component: TaskDefinitionType,
+	    isEdited: isEdited$6
+	  }, {
+	    id: 'taskDefinitionRetries',
+	    component: TaskDefinitionRetries,
+	    isEdited: isEdited$6
+	  }];
+	}
+	function TaskDefinitionType(props) {
+	  const {
+	    element,
+	    id
+	  } = props;
+	  const commandStack = useService('commandStack');
+	  const bpmnFactory = useService('bpmnFactory');
+	  const translate = useService('translate');
+	  const debounce = useService('debounceInput');
+	  const getValue = () => {
+	    return (getTaskDefinition$4(element) || {}).type;
 	  };
 	  const setValue = value => {
 	    const commands = [];
@@ -95947,7 +96675,7 @@
 	    }
 
 	    // (2) ensure task definition
-	    let taskDefinition = getTaskDefinition$3(element);
+	    let taskDefinition = getTaskDefinition$4(element);
 	    if (!taskDefinition) {
 	      taskDefinition = createElement$1('zeebe:TaskDefinition', {}, extensionElements, bpmnFactory);
 	      commands.push({
@@ -95997,7 +96725,7 @@
 	  const translate = useService('translate');
 	  const debounce = useService('debounceInput');
 	  const getValue = () => {
-	    return (getTaskDefinition$3(element) || {}).retries;
+	    return (getTaskDefinition$4(element) || {}).retries;
 	  };
 	  const setValue = value => {
 	    let commands = [];
@@ -96022,7 +96750,7 @@
 	    }
 
 	    // (2) ensure task definition
-	    let taskDefinition = getTaskDefinition$3(element);
+	    let taskDefinition = getTaskDefinition$4(element);
 	    if (!taskDefinition) {
 	      taskDefinition = createElement$1('zeebe:TaskDefinition', {}, extensionElements, bpmnFactory);
 	      commands.push({
@@ -96063,7 +96791,7 @@
 
 	// helper ///////////////////////
 
-	function getTaskDefinition$3(element) {
+	function getTaskDefinition$4(element) {
 	  const businessObject = getBusinessObject$1(element);
 	  return getExtensionElementsList$1(businessObject, 'zeebe:TaskDefinition')[0];
 	}
@@ -96658,7 +97386,7 @@
 	}
 
 	const LOW_PRIORITY$1 = 500;
-	const ZEEBE_GROUPS = [BusinessRuleImplementationGroup, CalledDecisionGroup, TaskDefinitionGroup, AssignmentDefinitionGroup, FormGroup$1, ConditionGroup$1, TargetGroup, InputGroup$1, OutputPropagationGroup, OutputGroup$1, HeaderGroup, ExtensionPropertiesGroup$1];
+	const ZEEBE_GROUPS = [BusinessRuleImplementationGroup, CalledDecisionGroup, ScriptImplementationGroup, ScriptGroup$1, TaskDefinitionGroup, AssignmentDefinitionGroup, FormGroup$1, ConditionGroup$1, TargetGroup, InputGroup$1, OutputPropagationGroup, OutputGroup$1, HeaderGroup, ExtensionPropertiesGroup$1];
 	class ZeebePropertiesProvider$1 {
 	  constructor(propertiesPanel, injector) {
 	    propertiesPanel.registerProvider(LOW_PRIORITY$1, this);
@@ -96670,6 +97398,7 @@
 	      groups = groups.concat(this._getGroups(element));
 
 	      // (2) update existing groups with zeebe specific properties
+	      updateErrorGroup$1(groups, element);
 	      updateMessageGroup(groups, element);
 	      updateTimerGroup$1(groups, element, this._injector);
 	      updateMultiInstanceGroup$1(groups, element);
@@ -96696,6 +97425,17 @@
 	  };
 	  return group.entries.length ? group : null;
 	}
+	function ScriptGroup$1(element) {
+	  const group = {
+	    id: 'script',
+	    label: 'Script',
+	    entries: [...ScriptProps$1({
+	      element
+	    })],
+	    component: Group
+	  };
+	  return group.entries.length ? group : null;
+	}
 	function TaskDefinitionGroup(element) {
 	  const group = {
 	    id: 'taskDefinition',
@@ -96799,6 +97539,17 @@
 	  };
 	  return group.entries.length ? group : null;
 	}
+	function ScriptImplementationGroup(element) {
+	  const group = {
+	    id: 'scriptImplementation',
+	    label: 'Implementation',
+	    entries: [...ScriptImplementationProps({
+	      element
+	    })],
+	    component: Group
+	  };
+	  return group.entries.length ? group : null;
+	}
 	function AssignmentDefinitionGroup(element) {
 	  const group = {
 	    id: 'assignmentDefinition',
@@ -96826,6 +97577,15 @@
 	  }
 	  return null;
 	}
+	function updateErrorGroup$1(groups, element) {
+	  const errorGroup = findGroup$1(groups, 'error');
+	  if (!errorGroup) {
+	    return;
+	  }
+	  errorGroup.entries = overrideGenericEntries(errorGroup.entries, ErrorProps$1({
+	    element
+	  }));
+	}
 	function updateMessageGroup(groups, element) {
 	  const messageGroup = findGroup$1(groups, 'message');
 	  if (!messageGroup) {
@@ -97750,7 +98510,7 @@
 	  // different conditions but same bindings
 	  return oldProperties.filter(property => !findPropertyWithBinding(newTemplate, property));
 	}
-	function normalizeReplacer(key, value) {
+	function normalizeReplacer$1(key, value) {
 	  if (isObject(value)) {
 	    const keys = Object.keys(value).sort();
 	    return keys.reduce((obj, key) => {
@@ -97761,7 +98521,7 @@
 	  return value;
 	}
 	function equals(a, b) {
-	  return JSON.stringify(a, normalizeReplacer) === JSON.stringify(b, normalizeReplacer);
+	  return JSON.stringify(a, normalizeReplacer$1) === JSON.stringify(b, normalizeReplacer$1);
 	}
 
 	/**
@@ -99240,11 +100000,15 @@
 	    // only keep value if old value is a valid option
 	    return newProperty.choices && newProperty.choices.some(choice => choice.value === currentValue);
 	  }
+
+	  // keep existing old property if
+	  // user changed it from the original
 	  if (oldProperty) {
 	    return propertyChanged$1(element, oldProperty);
-	  } else {
-	    return !!getPropertyValue(element, newProperty);
 	  }
+
+	  // keep existing property value
+	  return !!getPropertyValue(element, newProperty);
 	}
 
 	/**
@@ -100679,14 +101443,172 @@
 	  return groups;
 	}
 
+	/**
+	 * Restores the original order of the template properties
+	 * on the moddle element.
+	 */
+	class UpdateTemplatePropertiesOrder extends CommandInterceptor {
+	  constructor(eventBus, elementTemplates, commandStack, bpmnFactory) {
+	    super(eventBus);
+	    this._eventBus = eventBus;
+	    this._elementTemplates = elementTemplates;
+	    this._commandStack = commandStack;
+	    this._bpmnFactory = bpmnFactory;
+	    this.postExecute(['element.updateProperties', 'element.updateModdleProperties'], this._updatePropertiesOrder, true, this);
+	  }
+	  _updatePropertiesOrder(context) {
+	    const {
+	      element
+	    } = context;
+	    const template = this._elementTemplates.get(element);
+	    const businessObject = element.businessObject;
+	    const commands = [];
+	    if (!template) {
+	      return;
+	    }
+	    const templateProperties = template.properties;
+
+	    // zeebe:Property
+	    const zeebeProperties = findExtension$1(businessObject, 'zeebe:Properties');
+	    if (zeebeProperties) {
+	      this._updateZeebePropertiesOrder(zeebeProperties, templateProperties, commands, context);
+	    }
+
+	    // zeebe:IoMapping
+	    const ioMapping = findExtension$1(businessObject, 'zeebe:IoMapping');
+	    if (ioMapping) {
+	      // zeebe:Input
+	      this._updateInputOrder(ioMapping, templateProperties, commands, context);
+
+	      // zeebe:Output
+	      this._updateOutputOrder(ioMapping, templateProperties, commands, context);
+	    }
+
+	    // zeebe:TaskHeaders
+	    const taskHeaders = findExtension$1(businessObject, 'zeebe:TaskHeaders');
+	    if (taskHeaders) {
+	      this._updateTaskHeadersOrder(taskHeaders, templateProperties, commands, context);
+	    }
+	    if (commands.length) {
+	      const commandsToExecute = commands.filter(command => command !== null);
+	      commandsToExecute.length && this._commandStack.execute('properties-panel.multi-command-executor', commandsToExecute);
+	      return;
+	    }
+	  }
+	  _updateZeebePropertiesOrder(zeebeProperties, templateProperties, commands, context) {
+	    const findIndex = (properties, propertyToFind) => properties.findIndex(prop => prop.binding.type == 'zeebe:property' && prop.binding.name === propertyToFind.get('name'));
+	    const properties = zeebeProperties.get('properties');
+	    if (properties.length < 1) return;
+	    let newPropertiesOrder = [...properties];
+	    sortProperties(newPropertiesOrder, findIndex, templateProperties);
+	    if (!arrayEquals(newPropertiesOrder, properties)) {
+	      commands.push({
+	        cmd: 'element.updateModdleProperties',
+	        context: {
+	          ...context,
+	          moddleElement: zeebeProperties,
+	          properties: {
+	            properties: newPropertiesOrder
+	          }
+	        }
+	      });
+	    }
+	  }
+	  _updateInputOrder(ioMapping, templateProperties, commands, context) {
+	    const findIndex = (properties, propertyToFind) => properties.findIndex(prop => prop.binding.type == 'zeebe:input' && prop.binding.name === propertyToFind.get('target'));
+	    const inputParameters = ioMapping.get('inputParameters');
+	    if (inputParameters.length < 1) return;
+	    let newInputOrder = [...inputParameters];
+	    sortProperties(newInputOrder, findIndex, templateProperties);
+	    if (!arrayEquals(newInputOrder, inputParameters)) {
+	      commands.push({
+	        cmd: 'element.updateModdleProperties',
+	        context: {
+	          ...context,
+	          moddleElement: ioMapping,
+	          properties: {
+	            inputParameters: newInputOrder
+	          }
+	        }
+	      });
+	    }
+	  }
+	  _updateOutputOrder(ioMapping, templateProperties, commands, context) {
+	    const findIndex = (properties, propertyToFind) => properties.findIndex(prop => prop.binding.type == 'zeebe:output' && prop.binding.source === propertyToFind.get('source'));
+	    const outputParameters = ioMapping.get('outputParameters');
+	    if (outputParameters.length < 1) return;
+	    let newOutputOrder = [...outputParameters];
+	    sortProperties(newOutputOrder, findIndex, templateProperties);
+	    if (!arrayEquals(newOutputOrder, outputParameters)) {
+	      commands.push({
+	        cmd: 'element.updateModdleProperties',
+	        context: {
+	          ...context,
+	          moddleElement: ioMapping,
+	          properties: {
+	            outputParameters: newOutputOrder
+	          }
+	        }
+	      });
+	    }
+	  }
+	  _updateTaskHeadersOrder(taskHeaders, templateProperties, commands, context) {
+	    const findIndex = (properties, propertyToFind) => properties.findIndex(prop => prop.binding.type == 'zeebe:taskHeader' && prop.binding.key === propertyToFind.get('key'));
+	    const headers = taskHeaders.get('zeebe:values');
+	    if (headers.length < 1) return;
+	    let newHeadersOrder = [...headers];
+	    sortProperties(newHeadersOrder, findIndex, templateProperties);
+	    if (!arrayEquals(newHeadersOrder, headers)) {
+	      commands.push({
+	        cmd: 'element.updateModdleProperties',
+	        context: {
+	          ...context,
+	          moddleElement: taskHeaders,
+	          properties: {
+	            values: newHeadersOrder
+	          }
+	        }
+	      });
+	    }
+	  }
+	}
+	UpdateTemplatePropertiesOrder.$inject = ['eventBus', 'elementTemplates', 'commandStack', 'bpmnFactory'];
+
+	// helpers
+
+	function normalizeReplacer(key, value) {
+	  if (isObject(value)) {
+	    const keys = Object.keys(value).sort();
+	    return keys.reduce((obj, key) => {
+	      obj[key] = value[key];
+	      return obj;
+	    }, {});
+	  }
+	  return value;
+	}
+	function objectEquals(a, b) {
+	  return JSON.stringify(a, normalizeReplacer) === JSON.stringify(b, normalizeReplacer);
+	}
+	function arrayEquals(a, b) {
+	  return a.every((element, idx) => objectEquals(element, b[idx]));
+	}
+	function sortProperties(array, findIndex, templateProperties) {
+	  return array.sort((a, b) => {
+	    const aIndex = findIndex(templateProperties, a);
+	    const bIndex = findIndex(templateProperties, b);
+	    return aIndex - bIndex;
+	  });
+	}
+
 	var index$1 = {
 	  __depends__: [commandsModule$1, templateElementFactoryModule, translateModule, zeebePropertiesProviderModule],
-	  __init__: ['elementTemplatesLoader', 'replaceBehavior', 'elementTemplatesPropertiesProvider', 'elementTemplatesConditionChecker'],
+	  __init__: ['elementTemplatesLoader', 'replaceBehavior', 'elementTemplatesPropertiesProvider', 'elementTemplatesConditionChecker', 'updateTemplatePropertiesOrder'],
 	  elementTemplates: ['type', ElementTemplates],
 	  elementTemplatesLoader: ['type', ElementTemplatesLoader],
 	  replaceBehavior: ['type', ReplaceBehavior$1],
 	  elementTemplatesPropertiesProvider: ['type', ElementTemplatesPropertiesProvider$1],
-	  elementTemplatesConditionChecker: ['type', ElementTemplatesConditionChecker]
+	  elementTemplatesConditionChecker: ['type', ElementTemplatesConditionChecker],
+	  updateTemplatePropertiesOrder: ['type', UpdateTemplatePropertiesOrder]
 	};
 
 	/**
@@ -102076,6 +102998,124 @@
 	  bpmnRules: [ 'type', CustomRules ]
 	};
 
+	/**
+	 * A replace menu provider that allows to replace elements with
+	 * element templates.
+	 */
+	function ElementTemplatesReplaceProvider(popupMenu, translate, elementTemplates) {
+
+	  this._popupMenu = popupMenu;
+	  this._translate = translate;
+	  this._elementTemplates = elementTemplates;
+
+	  this.register();
+	}
+
+	ElementTemplatesReplaceProvider.$inject = [
+	  'popupMenu',
+	  'translate',
+	  'elementTemplates'
+	];
+
+	/**
+	 * Register replace menu provider in the popup menu
+	 */
+	ElementTemplatesReplaceProvider.prototype.register = function() {
+	  this._popupMenu.registerProvider('bpmn-replace', this);
+	};
+
+	/**
+	 * Adds the element templates to the replace menu.
+	 * @param {djs.model.Base} element
+	 *
+	 * @returns {Object}
+	 */
+	ElementTemplatesReplaceProvider.prototype.getPopupMenuEntries = function(element) {
+
+	  return (entries) => {
+
+	    // convert our entries into something sortable
+	    let entrySet = Object.entries(entries);
+
+	    // add template entries
+	    entrySet = [ ...entrySet, ...this.getTemplateEntries(element) ];
+
+	    // convert back to object
+	    return entrySet.reduce((entries, [ key, value ]) => {
+	      entries[key] = value;
+
+	      return entries;
+	    }, {});
+	  };
+	};
+
+	/**
+	 * Get all element templates that can be used to replace the given element.
+	 *
+	 * @param {djs.model.Base} element
+	 *
+	 * @return {Array<Object>} a list of element templates as menu entries
+	 */
+	ElementTemplatesReplaceProvider.prototype.getTemplateEntries = function(element) {
+
+	  const templates = this._getMatchingTemplates(element);
+	  return templates.map(template => {
+
+	    const {
+	      icon = {},
+	      category,
+	    } = template;
+
+	    const entryId = `replace.template-${template.id}`;
+
+	    const defaultGroup = {
+	      id: 'templates',
+	      name: this._translate('Templates')
+	    };
+
+	    return [ entryId, {
+	      label: template.name,
+	      description: template.description,
+	      documentationRef: template.documentationRef,
+	      imageUrl: icon.contents,
+	      group: category || defaultGroup,
+	      action: () => {
+	        this._elementTemplates.applyTemplate(element, template);
+	      }
+	    } ];
+	  });
+	};
+
+	/**
+	 * Returns the templates that can the element can be replaced with.
+	 *
+	 * @param  {djs.model.Base} element
+	 *
+	 * @return {Array<ElementTemplate>}
+	 */
+	ElementTemplatesReplaceProvider.prototype._getMatchingTemplates = function(element) {
+	  return this._elementTemplates.getLatest().filter(template => {
+	    return isAny(element, template.appliesTo) && !isTemplateApplied(element, template);
+	  });
+	};
+
+
+	// helpers ////////////
+	function isTemplateApplied(element, template) {
+	  const businessObject = getBusinessObject$1(element);
+
+	  if (businessObject) {
+	    return businessObject.get('zeebe:modelerTemplate') === template.id;
+	  }
+
+	  return false;
+	}
+
+	var replaceModule = {
+	  __init__: [ 'elementTemplatesProvider' ],
+	  elementTemplatesProvider: [ 'type', ElementTemplatesReplaceProvider ]
+	};
+
 	const ALL_OPTIONS = Object.values(replaceOptions);
 
 	function getReplaceOptionGroups() {
@@ -102084,23 +103124,18 @@
 
 	/**
 	 * A replace menu provider that allows to replace elements with
-	 * element templates.
+	 * templates applied with the correspondent plain element.
 	 */
-	function ElementTemplatesReplaceProvider(config, popupMenu, translate, elementTemplates) {
+	function UnlinkTemplateReplaceProvider(popupMenu, translate, elementTemplates) {
 
 	  this._popupMenu = popupMenu;
 	  this._translate = translate;
 	  this._elementTemplates = elementTemplates;
 
-	  const enabled = config && config.enabled;
-
-	  if (enabled) {
-	    this.register();
-	  }
+	  this.register();
 	}
 
-	ElementTemplatesReplaceProvider.$inject = [
-	  'config.elementTemplatesReplaceProvider',
+	UnlinkTemplateReplaceProvider.$inject = [
 	  'popupMenu',
 	  'translate',
 	  'elementTemplates'
@@ -102109,7 +103144,7 @@
 	/**
 	 * Register replace menu provider in the popup menu
 	 */
-	ElementTemplatesReplaceProvider.prototype.register = function() {
+	UnlinkTemplateReplaceProvider.prototype.register = function() {
 	  this._popupMenu.registerProvider('bpmn-replace', this);
 	};
 
@@ -102119,7 +103154,7 @@
 	 *
 	 * @returns {Object}
 	 */
-	ElementTemplatesReplaceProvider.prototype.getPopupMenuEntries = function(element) {
+	UnlinkTemplateReplaceProvider.prototype.getPopupMenuEntries = function(element) {
 
 	  return (entries) => {
 
@@ -102129,12 +103164,9 @@
 	    if (this._elementTemplates.get(element)) {
 
 	      // add unlink template option
-	      this._addPlainElementEntry(element, entrySet);
+	      this.addPlainElementEntry(element, entrySet, this._translate, this._elementTemplates);
 	    }
 
-	    // add template entries
-	    entrySet = [ ...entrySet, ...this.getTemplateEntries(element) ];
-
 	    // convert back to object
 	    return entrySet.reduce((entries, [ key, value ]) => {
 	      entries[key] = value;
@@ -102144,15 +103176,16 @@
 	  };
 	};
 
+
 	/**
 	 * Adds the option to replace with plain element (unlink template).
 	 *
 	 * @param {djs.model.Base} element
 	 * @param {Array<Object>} entries
 	 */
-	ElementTemplatesReplaceProvider.prototype._addPlainElementEntry = function(element, entries) {
+	UnlinkTemplateReplaceProvider.prototype.addPlainElementEntry = function(element, entries, translate, elementTemplates) {
 
-	  const replaceOption = this._getPlainEntry(element, entries);
+	  const replaceOption = this.getPlainEntry(element, entries, translate, elementTemplates);
 
 	  if (!replaceOption) {
 	    return;
@@ -102175,7 +103208,7 @@
 	 *
 	 * @returns {Array<Object, number>}
 	 */
-	ElementTemplatesReplaceProvider.prototype._getPlainEntry = function(element, entries) {
+	UnlinkTemplateReplaceProvider.prototype.getPlainEntry = function(element, entries, translate, elementTemplates) {
 
 	  const {
 	    options,
@@ -102190,9 +103223,9 @@
 	  const entry = {
 	    id: 'replace-unlink-element-template',
 	    action: () => {
-	      this._elementTemplates.applyTemplate(element, null);
+	      elementTemplates.applyTemplate(element, null);
 	    },
-	    label: this._translate(option.label),
+	    label: translate(option.label),
 	    className: option.className
 	  };
 
@@ -102223,66 +103256,34 @@
 	  ];
 	};
 
+
 	/**
-	 * Get all element templates that can be used to replace the given element.
-	 *
-	 * @param {djs.model.Base} element
+	 * @param {ModdleElement} element
 	 *
-	 * @return {Array<Object>} a list of element templates as menu entries
+	 * @return { { options: Array<any>, option: any, optionIndex: number } | null }
 	 */
-	ElementTemplatesReplaceProvider.prototype.getTemplateEntries = function(element) {
-
-	  const templates = this._getMatchingTemplates(element);
-	  return templates.map(template => {
-
-	    const {
-	      icon = {},
-	      category,
-	    } = template;
-
-	    const entryId = `replace.template-${template.id}`;
-
-	    const defaultGroup = {
-	      id: 'templates',
-	      name: this._translate('Templates')
-	    };
+	function findReplaceOptions(element) {
 
-	    return [ entryId, {
-	      name: template.name,
-	      description: template.description,
-	      documentationRef: template.documentationRef,
-	      imageUrl: icon.contents,
-	      group: category || defaultGroup,
-	      action: () => {
-	        this._elementTemplates.applyTemplate(element, template);
-	      }
-	    } ];
-	  });
-	};
+	  const isSameType = (element, option) => option.target && !isDifferentType(element)(option);
 
-	/**
-	 * Returns the templates that can the element can be replaced with.
-	 *
-	 * @param  {djs.model.Base} element
-	 *
-	 * @return {Array<ElementTemplate>}
-	 */
-	ElementTemplatesReplaceProvider.prototype._getMatchingTemplates = function(element) {
-	  return this._elementTemplates.getLatest().filter(template => {
-	    return isAny(element, template.appliesTo) && !isTemplateApplied(element, template);
-	  });
-	};
+	  return getReplaceOptionGroups().reduce((result, options) => {
 
+	    if (result) {
+	      return result;
+	    }
 
-	// helpers ////////////
-	function isTemplateApplied(element, template) {
-	  const businessObject = getBusinessObject$1(element);
+	    const optionIndex = options.findIndex(option => isSameType(element, option));
 
-	  if (businessObject) {
-	    return businessObject.get('zeebe:modelerTemplate') === template.id;
-	  }
+	    if (optionIndex === -1) {
+	      return;
+	    }
 
-	  return false;
+	    return {
+	      options,
+	      option: options[optionIndex],
+	      optionIndex
+	    };
+	  }, null);
 	}
 
 	function getOptionIndex(options, index, entries) {
@@ -102297,38 +103298,190 @@
 	  );
 	}
 
-	/**
-	 * @param {ModdleElement} element
-	 *
-	 * @return { { options: Array<any>, option: any, optionIndex: number } | null }
-	 */
-	function findReplaceOptions(element) {
+	var sharedReplaceModule = {
+	  __init__: [
+	    'unlinkTemplateReplaceProvider'
+	  ],
+	  unlinkTemplateReplaceProvider: [ 'type', UnlinkTemplateReplaceProvider ]
+	};
 
-	  const isSameType = (element, option) => option.target && !isDifferentType(element)(option);
+	const colorImageSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"><path d="m12.5 5.5.3-.4 3.6-3.6c.5-.5 1.3-.5 1.7 0l1 1c.5.4.5 1.2 0 1.7l-3.6 3.6-.4.2v.2c0 1.4.6 2 1 2.7v.6l-1.7 1.6c-.2.2-.4.2-.6 0L7.3 6.6a.4.4 0 0 1 0-.6l.3-.3.5-.5.8-.8c.2-.2.4-.1.6 0 .9.5 1.5 1.1 3 1.1zm-9.9 6 4.2-4.2 6.3 6.3-4.2 4.2c-.3.3-.9.3-1.2 0l-.8-.8-.9-.8-2.3-2.9" /></svg>';
+
+	const colorImageUrl = 'data:image/svg+xml;utf8,' + encodeURIComponent(colorImageSvg);
+
+
+	function ColorContextPadProvider(contextPad, popupMenu, canvas, translate) {
+
+	  this._contextPad = contextPad;
+	  this._popupMenu = popupMenu;
+	  this._canvas = canvas;
+	  this._translate = translate;
+
+	  contextPad.registerProvider(this);
+	}
+
+
+	ColorContextPadProvider.$inject = [
+	  'contextPad',
+	  'popupMenu',
+	  'canvas',
+	  'translate'
+	];
+
+
+	ColorContextPadProvider.prototype.getContextPadEntries = function(element) {
+	  return this._createPopupAction([ element ]);
+	};
+
+
+	ColorContextPadProvider.prototype.getMultiElementContextPadEntries = function(elements) {
+
+	  return this._createPopupAction(elements);
+	};
+
+	ColorContextPadProvider.prototype._createPopupAction = function(elements) {
+
+	  const canvas = this._canvas;
+	  const translate = this._translate;
+	  const contextPad = this._contextPad;
+	  const popupMenu = this._popupMenu;
+
+	  return {
+	    'set-color': {
+	      group: 'edit',
+	      className: 'bpmn-icon-color',
+	      title: translate('Set Color'),
+	      imageUrl: colorImageUrl,
+	      action: {
+	        click: (event, element) => {
+
+	          // get start popup draw start position
+	          var position = {
+	            ...getStartPosition(canvas, contextPad, elements),
+	            cursor: {
+	              x: event.x,
+	              y: event.y
+	            }
+	          };
+
+	          // open new color-picker popup
+	          popupMenu.open(elements, 'color-picker', position);
+	        }
+	      }
+	    }
+	  };
+
+	};
+
+
+	// helpers //////////////////////
+
+	function getStartPosition(canvas, contextPad, elements) {
+
+	  var Y_OFFSET = 5;
+
+	  var diagramContainer = canvas.getContainer(),
+	      pad = contextPad.getPad(elements).html;
+
+	  var diagramRect = diagramContainer.getBoundingClientRect(),
+	      padRect = pad.getBoundingClientRect();
+
+	  var top = padRect.top - diagramRect.top;
+	  var left = padRect.left - diagramRect.left;
+
+	  var pos = {
+	    x: left,
+	    y: top + padRect.height + Y_OFFSET
+	  };
+
+	  return pos;
+	}
 
-	  return getReplaceOptionGroups().reduce((result, options) => {
+	const COLORS = [ {
+	  label: 'Default',
+	  fill: undefined,
+	  stroke: undefined
+	}, {
+	  label: 'Blue',
+	  fill: '#BBDEFB',
+	  stroke: '#0D4372'
+	}, {
+	  label: 'Orange',
+	  fill: '#FFE0B2',
+	  stroke: '#6B3C00'
+	}, {
+	  label: 'Green',
+	  fill: '#C8E6C9',
+	  stroke: '#205022'
+	}, {
+	  label: 'Red',
+	  fill: '#FFCDD2',
+	  stroke: '#831311'
+	}, {
+	  label: 'Purple',
+	  fill: '#E1BEE7',
+	  stroke: '#5B176D'
+	} ];
 
-	    if (result) {
-	      return result;
-	    }
 
-	    const optionIndex = options.findIndex(option => isSameType(element, option));
+	function ColorPopupProvider(config, popupMenu, modeling, translate) {
+	  this._popupMenu = popupMenu;
+	  this._modeling = modeling;
+	  this._translate = translate;
 
-	    if (optionIndex === -1) {
-	      return;
-	    }
+	  this._colors = config && config.colors || COLORS;
+
+	  this._popupMenu.registerProvider('color-picker', this);
+	}
+
+
+	ColorPopupProvider.$inject = [
+	  'config.colorPicker',
+	  'popupMenu',
+	  'modeling',
+	  'translate'
+	];
+
+
+	ColorPopupProvider.prototype.getEntries = function(elements) {
+	  var self = this;
+
+	  var colorIcon = domify$1(`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="100%">
+      <rect rx="2" x="1" y="1" width="22" height="22" fill="var(--fill-color)" stroke="var(--stroke-color)"></rect>
+    </svg>
+  `);
+
+	  var entries = this._colors.map(function(color) {
+
+	    colorIcon.style.setProperty('--fill-color', color.fill || 'white');
+	    colorIcon.style.setProperty('--stroke-color', color.stroke || 'rgb(34, 36, 42)');
 
 	    return {
-	      options,
-	      option: options[optionIndex],
-	      optionIndex
+	      title: self._translate(color.label),
+	      id: color.label.toLowerCase() + '-color',
+	      imageUrl: `data:image/svg+xml;utf8,${ encodeURIComponent(colorIcon.outerHTML) }`,
+	      action: createAction(self._modeling, elements, color)
 	    };
-	  }, null);
+	  });
+
+	  return entries;
+	};
+
+
+	function createAction(modeling, element, color) {
+	  return function() {
+	    modeling.setColor(element, color);
+	  };
 	}
 
-	var replaceModule = {
-	  __init__: [ 'elementTemplatesProvider' ],
-	  elementTemplatesProvider: [ 'type', ElementTemplatesReplaceProvider ]
+	var colorPickerModule = {
+	  __init__: [
+	    'colorContextPadProvider',
+	    'colorPopupProvider'
+	  ],
+	  colorContextPadProvider: [ 'type', ColorContextPadProvider ],
+	  colorPopupProvider: [ 'type', ColorPopupProvider ]
 	};
 
 	function getModelerTemplateIcon(element) {
@@ -102872,7 +104025,9 @@
 	  rulesModule,
 	  zeebePropertiesProviderModule,
 	  index$1,
-	  replaceModule
+	  replaceModule,
+	  sharedReplaceModule,
+	  colorPickerModule
 	];
 
 	Modeler.prototype._modules = [].concat(