camunda-bpmn-js 1.0.0 → 1.1.0

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

@@ -28375,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}
 
@@ -28402,7 +28402,7 @@
 	    onClick
 	  } = props;
 
-	  return m$2`
+	  return m$3`
     <li
       class=${ clsx('entry', { selected }) }
       data-id=${ entry.id }
@@ -28415,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 }
@@ -28434,7 +28434,7 @@
           </span>
         ` }
       </div>
-      ${ entry.documentationRef && m$2`
+      ${ entry.documentationRef && m$3`
         <div class="djs-popup-entry-docs">
           <a
             href="${ entry.documentationRef }"
@@ -28489,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 }
@@ -28717,7 +28717,7 @@
 
 	  const displayHeader = F$2(() => title || headerEntries.length > 0, [ title, headerEntries ]);
 
-	  return m$2`
+	  return m$3`
     <${PopupMenuWrapper}
       onClose=${ onClose }
       onKeyup=${ handleKey }
@@ -28727,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) }
@@ -28739,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"/>
@@ -28772,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>
         ` }
       ` }
@@ -28825,7 +28825,7 @@
 	    popupRef.current && popupRef.current.focus();
 	  }, []);
 
-	  return m$2`
+	  return m$3`
     <div
       class="djs-popup-backdrop"
       onClick=${ checkClose }
@@ -28956,7 +28956,7 @@
 	  const onSelect = (event, entry) => this.trigger(event, entry);
 
 	  P$2(
-	    m$2`
+	    m$3`
       <${PopupMenuComponent}
         onClose=${ onClose }
         onSelect=${ onSelect }
@@ -29080,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);
 
@@ -64515,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
@@ -67348,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;
@@ -68484,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)
@@ -68759,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;
@@ -68781,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())
@@ -68814,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;
 	                }
@@ -68857,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 */;
@@ -68868,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
@@ -70542,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
@@ -70714,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));
@@ -70735,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)
@@ -70749,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;
 	    }
@@ -70952,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);
@@ -72414,7 +72479,7 @@
 	    });
 	}
 	const baseTheme$1$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
-	    "&.cm-editor": {
+	    "&": {
 	        position: "relative !important",
 	        boxSizing: "border-box",
 	        "&.cm-focused": {
@@ -72445,7 +72510,6 @@
 	        margin: 0,
 	        flexGrow: 2,
 	        flexShrink: 0,
-	        minHeight: "100%",
 	        display: "block",
 	        whiteSpace: "pre",
 	        wordWrap: "normal",
@@ -72467,14 +72531,13 @@
 	    "&dark .cm-content": { caretColor: "white" },
 	    ".cm-line": {
 	        display: "block",
-	        padding: "0 2px 0 4px"
-	    },
-	    ".cm-selectionLayer": {
-	        zIndex: -1,
-	        contain: "size style"
+	        padding: "0 2px 0 6px"
 	    },
-	    ".cm-selectionBackground": {
-	        position: "absolute",
+	    ".cm-layer": {
+	        contain: "size style",
+	        "& > *": {
+	            position: "absolute"
+	        }
 	    },
 	    "&light .cm-selectionBackground": {
 	        background: "#d9d9d9"
@@ -72489,8 +72552,6 @@
 	        background: "#233"
 	    },
 	    ".cm-cursorLayer": {
-	        zIndex: 100,
-	        contain: "size style",
 	        pointerEvents: "none"
 	    },
 	    "&.cm-focused .cm-cursorLayer": {
@@ -72502,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",
@@ -72596,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",
@@ -72688,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)
@@ -72898,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 = [];
@@ -72936,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();
@@ -73260,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);
@@ -73363,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);
@@ -73748,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) {
@@ -74423,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;
@@ -74660,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)
@@ -74703,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",
@@ -75268,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) {
@@ -75287,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) {
@@ -75327,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
@@ -75536,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,
@@ -75615,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) {
@@ -75724,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) {
@@ -75750,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; }
@@ -75815,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;
@@ -75844,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;
@@ -75858,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; }
@@ -75867,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);
@@ -75895,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
@@ -75918,8 +76016,6 @@
 	            this.yieldBuf(node.index);
 	        }
 	    }
-	    /// Shorthand for `.type.name`.
-	    get name() { return this.type.name; }
 	    yieldNode(node) {
 	        if (!node)
 	            return false;
@@ -75964,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)
@@ -75996,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); }
@@ -76045,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))
@@ -76055,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.
@@ -76171,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;
 	            }
@@ -76298,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;
@@ -76334,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;
@@ -76384,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;) {
@@ -76445,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
@@ -76698,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);
@@ -76713,7 +76809,7 @@
 	                        break;
 	                    let next = part[pos++];
 	                    if (pos == part.length && next == "!") {
-	                        mode = 0 /* Opaque */;
+	                        mode = 0 /* Mode.Opaque */;
 	                        break;
 	                    }
 	                    if (next != "/")
@@ -76737,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;
@@ -76749,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.
@@ -76836,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);
@@ -76854,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;
 	                    }
@@ -78795,6 +78891,7 @@
 	            closeOnBlur: true,
 	            maxRenderedOptions: 100,
 	            defaultKeymap: true,
+	            tooltipClass: () => "",
 	            optionClass: () => "",
 	            aboveCursor: false,
 	            icons: true,
@@ -78805,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)
 	        });
@@ -78883,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) {
@@ -78911,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)
@@ -79177,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)
@@ -79538,6 +79652,7 @@
 	            maxWidth: "min(700px, 95vw)",
 	            minWidth: "250px",
 	            maxHeight: "10em",
+	            height: "100%",
 	            listStyle: "none",
 	            margin: 0,
 	            padding: 0,
@@ -80492,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;
@@ -84465,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) {
@@ -84828,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
 	  }
 	));
 
@@ -84869,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}
 	 */
@@ -84920,7 +85221,8 @@
 	      override: [
 	        variables,
 	        builtins,
-	        completeFromList(snippets)
+	        completeFromList(snippets.map(s => ({ ...s, boost: -1 }))),
+	        pathExpression
 	      ]
 	    })
 	  ];
@@ -84930,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': {
@@ -85044,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();
@@ -86939,7 +87197,7 @@
 	    label,
 	    onChange,
 	    options = [],
-	    value,
+	    value = '',
 	    disabled,
 	    onFocus,
 	    onBlur
@@ -87984,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);
 	}
 
 	/**
@@ -88017,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);
 
@@ -88044,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) {
@@ -88750,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);
 	}
 
 	/**
@@ -88785,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);
 
@@ -91801,7 +92090,7 @@
 	/**
 	 * @returns {Array<Entry>} entries
 	 */
-	function ErrorProps$1(props) {
+	function ErrorProps$2(props) {
 	  const {
 	    element
 	  } = props;
@@ -91821,7 +92110,7 @@
 	      isEdited: isEdited$1
 	    }, {
 	      id: 'errorCode',
-	      component: ErrorCode$1,
+	      component: ErrorCode$2,
 	      isEdited: isEdited$1
 	    }];
 	  }
@@ -91937,7 +92226,7 @@
 	    debounce
 	  });
 	}
-	function ErrorCode$1(props) {
+	function ErrorCode$2(props) {
 	  const {
 	    element
 	  } = props;
@@ -93411,7 +93700,7 @@
 	    id: 'error',
 	    label: translate('Error'),
 	    component: Group,
-	    entries: [...ErrorProps$1({
+	    entries: [...ErrorProps$2({
 	      element
 	    })]
 	  };
@@ -93590,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,
@@ -93876,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
@@ -93903,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;
 	  };
 
 	  /**
@@ -93919,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;
@@ -93955,7 +94244,7 @@
 
 	// helper ///////////////////////
 
-	function getTaskDefinition$2(element) {
+	function getTaskDefinition$3(element) {
 	  const businessObject = getBusinessObject$1(element);
 	  return getExtensionElementsList$1(businessObject, 'zeebe:TaskDefinition')[0];
 	}
@@ -93964,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);
@@ -93977,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');
@@ -94005,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
@@ -94035,7 +94324,7 @@
 	    isEdited: isEdited$6
 	  }, {
 	    id: 'resultVariable',
-	    component: ResultVariable$3,
+	    component: ResultVariable$4,
 	    isEdited: isEdited$1
 	  }];
 	}
@@ -94114,7 +94403,7 @@
 	    debounce
 	  });
 	}
-	function ResultVariable$3(props) {
+	function ResultVariable$4(props) {
 	  const {
 	    element,
 	    id
@@ -94294,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,
@@ -94710,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;
@@ -94726,7 +95061,7 @@
 
 	// helper ////////////////
 
-	function getTaskDefinition$1(element) {
+	function getTaskDefinition$2(element) {
 	  const businessObject = getBusinessObject$1(element);
 	  return getExtensionElementsList$1(businessObject, 'zeebe:TaskDefinition')[0];
 	}
@@ -95029,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']);
@@ -95072,7 +95407,8 @@
 	      element,
 	      bpmnFactory,
 	      commandStack
-	    })
+	    }),
+	    shouldSort: false
 	  };
 	}
 	function removeFactory$b({
@@ -95753,7 +96089,8 @@
 	      element,
 	      bpmnFactory,
 	      commandStack
-	    })
+	    }),
+	    shouldSort: false
 	  };
 	}
 	function removeFactory$a({
@@ -95868,6 +96205,335 @@
 	  };
 	}
 
+	const SCRIPT_IMPLEMENTATION_OPTION = 'script',
+	  JOB_WORKER_IMPLEMENTATION_OPTION = 'jobWorker',
+	  DEFAULT_IMPLEMENTATION_OPTION = '';
+	function ScriptImplementationProps(props) {
+	  const {
+	    element
+	  } = props;
+	  if (!is$5(element, 'bpmn:ScriptTask')) {
+	    return [];
+	  }
+	  return [{
+	    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 Expression$3(props) {
+	  const {
+	    element,
+	    id
+	  } = props;
+	  const commandStack = useService('commandStack');
+	  const bpmnFactory = useService('bpmnFactory');
+	  const translate = useService('translate');
+	  const debounce = useService('debounceInput');
+	  const getValue = () => {
+	    return (getScript(element) || {}).get('expression');
+	  };
+	  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.expression
+	    commands.push({
+	      cmd: 'element.updateModdleProperties',
+	      context: {
+	        element,
+	        moddleElement: script,
+	        properties: {
+	          expression: value
+	        }
+	      }
+	    });
+
+	    // (4) commit all updates
+	    commandStack.execute('properties-panel.multi-command-executor', commands);
+	  };
+	  return FeelEntryWithContext({
+	    element,
+	    id,
+	    label: translate('FEEL expression'),
+	    feel: 'required',
+	    getValue,
+	    setValue,
+	    debounce
+	  });
+	}
+	function ResultVariable$3(props) {
+	  const {
+	    element,
+	    id
+	  } = props;
+	  const commandStack = useService('commandStack');
+	  const bpmnFactory = useService('bpmnFactory');
+	  const translate = useService('translate');
+	  const debounce = useService('debounceInput');
+	  const getValue = () => {
+	    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
@@ -95984,7 +96650,7 @@
 	  const translate = useService('translate');
 	  const debounce = useService('debounceInput');
 	  const getValue = () => {
-	    return (getTaskDefinition$3(element) || {}).type;
+	    return (getTaskDefinition$4(element) || {}).type;
 	  };
 	  const setValue = value => {
 	    const commands = [];
@@ -96009,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({
@@ -96059,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 = [];
@@ -96084,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({
@@ -96125,7 +96791,7 @@
 
 	// helper ///////////////////////
 
-	function getTaskDefinition$3(element) {
+	function getTaskDefinition$4(element) {
 	  const businessObject = getBusinessObject$1(element);
 	  return getExtensionElementsList$1(businessObject, 'zeebe:TaskDefinition')[0];
 	}
@@ -96720,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);
@@ -96732,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);
@@ -96758,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',
@@ -96861,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',
@@ -96888,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) {
@@ -97812,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) => {
@@ -97823,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);
 	}
 
 	/**
@@ -99302,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);
 	}
 
 	/**
@@ -100741,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]
 	};
 
 	/**