@bpmn-io/form-js-editor 1.6.4 → 1.7.0

package/dist/index.es.js

@@ -1,9 +1,9 @@
-import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, IFrame, Text as Text$1, Label as Label$3, Table, FormFields, sanitizeImageSource, getAncestryList, FormContext, FormRenderContext, FormComponent, Importer, PathRegistry, FormLayouter, FieldFactory, runRecursively, clone, OPTIONS_SOURCES, OPTIONS_SOURCES_PATHS, getSchemaVariables, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_SERIALISING_FORMAT_PATH, TIME_SERIALISING_FORMATS, TIME_INTERVAL_PATH, TIME_USE24H_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISINGFORMAT_LABELS, getOptionsSource, OPTIONS_SOURCES_DEFAULTS, OPTIONS_SOURCES_LABELS, FeelExpressionLanguage, createFormContainer, createInjector, MarkdownModule, schemaVersion } from '@bpmn-io/form-js-viewer';
-export { schemaVersion } from '@bpmn-io/form-js-viewer';
 import Ids from 'ids';
-import { isArray, isFunction, isNumber, bind, assign, debounce, forEach, get, isObject, isDefined, isString, uniqueBy, sortBy, find, set as set$1, reduce, isUndefined, without, isNil, has } from 'min-dash';
+import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, Label as Label$3, IFrame, Text as Text$1, Html, Table, FormFields, sanitizeImageSource, getAncestryList, FormContext, FormRenderContext, FormComponent, Importer, PathRegistry, FormLayouter, FieldFactory, FeelExpressionLanguage, OPTIONS_SOURCES, OPTIONS_SOURCES_PATHS, clone, runRecursively, getSchemaVariables, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_SERIALISING_FORMAT_PATH, TIME_SERIALISING_FORMATS, TIME_INTERVAL_PATH, TIME_USE24H_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISINGFORMAT_LABELS, getOptionsSource, OPTIONS_SOURCES_DEFAULTS, OPTIONS_SOURCES_LABELS, SECURITY_ATTRIBUTES_DEFINITIONS, createFormContainer, createInjector, MarkdownRendererModule, schemaVersion } from '@bpmn-io/form-js-viewer';
+export { schemaVersion } from '@bpmn-io/form-js-viewer';
+import { isArray, isFunction, isNumber, bind, assign, debounce, forEach, isString, uniqueBy, isObject, get, isDefined, sortBy, find, set as set$1, reduce, without, isNil, has } from 'min-dash';
 import classnames from 'classnames';
-import { jsx, jsxs, Fragment as Fragment$1 } from 'preact/jsx-runtime';
+import { jsxs, jsx, Fragment as Fragment$1 } from 'preact/jsx-runtime';
 import { useContext, useRef, useEffect, useMemo, useState, useCallback, useLayoutEffect } from 'preact/hooks';
 import { createContext, Fragment, render, createElement } from 'preact';
 import * as React from 'preact/compat';
@@ -13,7 +13,7 @@ import { classes, query, closest, event, matches, domify } from 'min-dom';
 import { mutate } from 'array-move';
 import { FeelersEditor } from 'feelers';
 import FeelEditor from '@bpmn-io/feel-editor';
-import { lineNumbers } from '@codemirror/view';
+import { lineNumbers, EditorView } from '@codemirror/view';
 import * as focusTrap from 'focus-trap';
 import Big from 'big.js';
 
@@ -584,8 +584,8 @@ class FormLayoutValidator {
   /**
    * @constructor
    *
-   * @param { import('./FormLayouter').default } formLayouter
-   * @param { import('./FormFieldRegistry').default } formFieldRegistry
+   * @param { import('./FormLayouter').FormLayouter } formLayouter
+   * @param { import('./FormFieldRegistry').FormFieldRegistry } formFieldRegistry
    */
   constructor(formLayouter, formFieldRegistry) {
     this._formLayouter = formLayouter;
@@ -747,13 +747,21 @@ function createEmptyImage() {
 
 function EditorIFrame(props) {
   const {
-    field
+    field,
+    domId
   } = props;
+  const {
+    label
+  } = field;
   const Icon = iconsByType(field.type);
-  return jsx("div", {
+  return jsxs("div", {
     class: editorFormFieldClasses(field.type),
-    children: jsx("div", {
+    children: [jsx(Label$3, {
+      id: domId,
+      label: label
+    }), jsx("div", {
       class: "fjs-iframe-placeholder",
+      id: domId,
       children: jsxs("p", {
         class: "fjs-iframe-placeholder-text",
         children: [jsx(Icon, {
@@ -762,7 +770,7 @@ function EditorIFrame(props) {
           viewBox: "0 0 56 56"
         }), "iFrame"]
       })
-    })
+    })]
   });
 }
 EditorIFrame.config = IFrame.config;
@@ -770,7 +778,6 @@ EditorIFrame.config = IFrame.config;
 const DragAndDropContext = createContext({
   drake: null
 });
-var DragAndDropContext$1 = DragAndDropContext;
 
 /**
  * @param {string} type
@@ -782,26 +789,28 @@ function getService$1(type, strict) {}
 const FormEditorContext = createContext({
   getService: getService$1
 });
-var FormEditorContext$1 = FormEditorContext;
 
-function useService$1 (type, strict) {
+function useService$1(type, strict) {
   const {
     getService
-  } = useContext(FormEditorContext$1);
+  } = useContext(FormEditorContext);
   return getService(type, strict);
 }
 
-function usePrevious$1(value) {
-  const ref = useRef();
-  useEffect(() => ref.current = value);
+function usePrevious$1(value, defaultValue = null) {
+  const ref = useRef(defaultValue);
+  useEffect(() => ref.current = value, [value]);
   return ref.current;
 }
 
-function useDebounce(fn, dependencies = []) {
+/**
+ * @param {Function} fn - function to debounce
+ */
+function useDebounce(fn) {
   const debounce = useService$1('debounce');
   const callback = useMemo(() => {
     return debounce(fn);
-  }, dependencies);
+  }, [debounce, fn]);
 
   // cleanup async side-effect if callback #flush is provided.
   useEffect(() => {
@@ -1001,6 +1010,54 @@ function EditorText(props) {
 }
 EditorText.config = Text$1.config;
 
+function EditorHtml(props) {
+  const {
+    type,
+    content = ''
+  } = props.field;
+  const Icon = iconsByType(type);
+  const templating = useService$1('templating');
+  const expressionLanguage = useService$1('expressionLanguage');
+  if (!content || !content.trim()) {
+    return jsx("div", {
+      class: editorFormFieldClasses(type),
+      children: jsxs("div", {
+        class: "fjs-form-field-placeholder",
+        children: [jsx(Icon, {
+          viewBox: "0 0 54 54"
+        }), "Html is empty"]
+      })
+    });
+  }
+  if (expressionLanguage.isExpression(content)) {
+    return jsx("div", {
+      class: editorFormFieldClasses(type),
+      children: jsxs("div", {
+        class: "fjs-form-field-placeholder",
+        children: [jsx(Icon, {
+          viewBox: "0 0 54 54"
+        }), "Html is populated by an expression"]
+      })
+    });
+  }
+  if (templating.isTemplate(content)) {
+    return jsx("div", {
+      class: editorFormFieldClasses(type),
+      children: jsxs("div", {
+        class: "fjs-form-field-placeholder",
+        children: [jsx(Icon, {
+          viewBox: "0 0 54 54"
+        }), "Html is templated"]
+      })
+    });
+  }
+  return jsx(Html, {
+    ...props,
+    disableLinks: true
+  });
+}
+EditorHtml.config = Html.config;
+
 function EditorTable(props) {
   const {
     columnsExpression,
@@ -1065,7 +1122,7 @@ function EditorTable(props) {
 }
 EditorTable.config = Table.config;
 
-const editorFormFields = [EditorIFrame, EditorText, EditorTable];
+const editorFormFields = [EditorIFrame, EditorText, EditorHtml, EditorTable];
 
 class EditorFormFields extends FormFields {
   constructor() {
@@ -1076,7 +1133,7 @@ class EditorFormFields extends FormFields {
   }
 }
 
-var ModularSection = (props => {
+const ModularSection = props => {
   const {
     rootClass,
     RootElement,
@@ -1156,7 +1213,7 @@ var ModularSection = (props => {
   }), ParentElement) : jsx(Root, {
     children: children
   }) : null;
-});
+};
 
 const FillContext = createContext({
   addFill(uid, props) {
@@ -1166,11 +1223,10 @@ const FillContext = createContext({
     throw new Error('FillContext.addFill() uninitialized');
   }
 });
-var FillContext$1 = FillContext;
 
-var Fill = (props => {
+const Fill = props => {
   const uid = useRef$1(Symbol('fill_uid'));
-  const fillContext = useContext$1(FillContext$1);
+  const fillContext = useContext$1(FillContext);
   useEffect$1(() => {
     if (!fillContext) {
       return;
@@ -1184,14 +1240,13 @@ var Fill = (props => {
     };
   }, [fillContext, props]);
   return null;
-});
+};
 
 const SlotContext = createContext({
   fills: []
 });
-var SlotContext$1 = SlotContext;
 
-var Slot = (props => {
+const Slot = props => {
   const {
     name,
     fillRoot = FillFragment,
@@ -1201,7 +1256,7 @@ var Slot = (props => {
   } = props;
   const {
     fills
-  } = useContext(SlotContext$1);
+  } = useContext(SlotContext);
   const filtered = useMemo(() => fills.filter(fill => fill.slot === name), [fills, name]);
   const cropped = useMemo(() => limit ? filtered.slice(0, limit) : filtered, [filtered, limit]);
   const groups = useMemo(() => groupFn(cropped), [cropped, groupFn]);
@@ -1209,7 +1264,7 @@ var Slot = (props => {
     return buildFills(groups, fillRoot, separatorFn);
   }, [groups, fillRoot, separatorFn]);
   return fillsAndSeparators;
-});
+};
 
 /**
  * Creates a Fragment for a fill.
@@ -1273,30 +1328,35 @@ const _comparePriority = (a, b) => {
   return (b.priority || 0) - (a.priority || 0);
 };
 
-var SlotFillRoot = (props => {
+const noop = () => {};
+const SlotFillRoot = props => {
   const [fills, setFills] = useState([]);
+  const {
+    onSetFill = noop,
+    onRemoveFill = noop
+  } = props;
   const fillContext = useMemo(() => ({
     addFill: fill => {
       setFills(fills => [...fills.filter(f => f.id !== fill.id), fill]);
-      props.onSetFill && props.onSetFill(fill);
+      onSetFill(fill);
     },
     removeFill: id => {
       setFills(fills => fills.filter(f => f.id !== id));
-      props.onRemoveFill && props.onRemoveFill(id);
+      onRemoveFill(id);
     }
-  }), []);
+  }), [onRemoveFill, onSetFill]);
   const slotContext = useMemo(() => ({
     fills
   }), [fills]);
-  return jsx(SlotContext$1.Provider, {
+  return jsx(SlotContext.Provider, {
     value: slotContext,
-    children: jsx(FillContext$1.Provider, {
+    children: jsx(FillContext.Provider, {
       /* @ts-expect-error */
       value: fillContext,
       children: props.children
     })
   });
-});
+};
 
 function PaletteEntry(props) {
   const {
@@ -1539,7 +1599,7 @@ function getPaletteIcon(entry) {
   return Icon;
 }
 
-var InjectedRendersRoot = (() => {
+const InjectedRendersRoot = () => {
   const renderInjector = useService$1('renderInjector');
   const injectedRenderers = renderInjector.fetchRenderers();
   const injectedProps = useMemo(() => ({
@@ -1556,7 +1616,7 @@ var InjectedRendersRoot = (() => {
       ...injectedProps
     }))
   });
-});
+};
 
 const CURSOR_CLS_PATTERN = /^fjs-cursor-.*$/;
 function set(mode) {
@@ -1588,11 +1648,11 @@ class Dragging {
   /**
    * @constructor
    *
-   * @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
-   * @param { import('../../core/FormLayouter').default } formLayouter
-   * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
-   * @param { import('../../core/EventBus').default } eventBus
-   * @param { import('../modeling/Modeling').default } modeling
+   * @param { import('../../core/FormFieldRegistry').FormFieldRegistry } formFieldRegistry
+   * @param { import('../../core/FormLayouter').FormLayouter } formLayouter
+   * @param { import('../../core/FormLayoutValidator').FormLayoutValidator } formLayoutValidator
+   * @param { import('../../core/EventBus').EventBus } eventBus
+   * @param { import('../modeling/Modeling').Modeling } modeling
    * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
    */
   constructor(formFieldRegistry, formLayouter, formLayoutValidator, eventBus, modeling, pathRegistry) {
@@ -2042,37 +2102,36 @@ function ContextPad(props) {
     children: props.children
   });
 }
+function EmptyGroup() {
+  return jsx("div", {
+    class: "fjs-empty-component",
+    children: jsx("span", {
+      class: "fjs-empty-component-text",
+      children: "Drag and drop components here."
+    })
+  });
+}
+function EmptyForm() {
+  return jsx("div", {
+    class: "fjs-empty-editor",
+    children: jsxs("div", {
+      class: "fjs-empty-editor-card",
+      children: [jsx(EmptyFormIcon, {}), jsx("h2", {
+        children: "Build your form"
+      }), jsx("span", {
+        children: "Drag and drop components here to start designing."
+      }), jsx("span", {
+        children: "Use the preview window to test your form."
+      })]
+    })
+  });
+}
 function Empty(props) {
-  if (props.field.type === 'default') {
-    return jsx("div", {
-      class: "fjs-empty-editor",
-      children: jsxs("div", {
-        class: "fjs-empty-editor-card",
-        children: [jsx(EmptyFormIcon, {}), jsx("h2", {
-          children: "Build your form"
-        }), jsx("span", {
-          children: "Drag and drop components here to start designing."
-        }), jsx("span", {
-          children: "Use the preview window to test your form."
-        })]
-      })
-    });
-  }
-  if (props.field.type === 'group') {
-    return jsx("div", {
-      class: "fjs-empty-component",
-      children: jsx("span", {
-        children: "Drag and drop components here."
-      })
-    });
+  if (['group', 'dynamiclist'].includes(props.field.type)) {
+    return jsx(EmptyGroup, {});
   }
-  if (props.field.type === 'dynamiclist') {
-    return jsx("div", {
-      class: "fjs-empty-component",
-      children: jsxs("span", {
-        children: ["Drag and drop components here ", jsx("br", {}), " to create a repeatable list item."]
-      })
-    });
+  if (props.field.type === 'default') {
+    return jsx(EmptyForm, {});
   }
   return null;
 }
@@ -2096,22 +2155,22 @@ function Element$1(props) {
   } = field;
   const ref = useRef();
   const [hovered, setHovered] = useState(false);
-  function scrollIntoView({
-    selection
-  }) {
-    if (!selection || selection.id !== id || !ref.current) {
-      return;
-    }
-    const elementBounds = ref.current.getBoundingClientRect(),
-      containerBounds = formEditor._container.getBoundingClientRect();
-    if (elementBounds.top < 0 || elementBounds.top > containerBounds.bottom) {
-      ref.current.scrollIntoView();
-    }
-  }
   useEffect(() => {
+    function scrollIntoView({
+      selection
+    }) {
+      if (!selection || selection.id !== id || !ref.current) {
+        return;
+      }
+      const elementBounds = ref.current.getBoundingClientRect(),
+        containerBounds = formEditor._container.getBoundingClientRect();
+      if (elementBounds.top < 0 || elementBounds.top > containerBounds.bottom) {
+        ref.current.scrollIntoView();
+      }
+    }
     eventBus.on('selection.changed', scrollIntoView);
     return () => eventBus.off('selection.changed', scrollIntoView);
-  }, [id]);
+  }, [eventBus, formEditor._container, id]);
   useLayoutEffect(() => {
     if (selection.isSelected(field)) {
       ref.current.focus();
@@ -2259,7 +2318,7 @@ function Column(props) {
     children: props.children
   });
 }
-function FormEditor$1(props) {
+function FormEditor$1() {
   const dragging = useService$1('dragging'),
     eventBus = useService$1('eventBus'),
     formEditor = useService$1('formEditor'),
@@ -2277,16 +2336,19 @@ function FormEditor$1(props) {
   const formContainerRef = useRef(null);
   const propertiesPanelRef = useRef(null);
   const [, setSelection] = useState(schema);
+  const [hasInitialized, setHasInitialized] = useState(false);
   useEffect(() => {
     function handleSelectionChanged(event) {
       setSelection(event.selection || schema);
     }
     eventBus.on('selection.changed', handleSelectionChanged);
-    setSelection(selection.get() || schema);
     return () => {
       eventBus.off('selection.changed', handleSelectionChanged);
     };
-  }, [schema, selection]);
+  }, [eventBus, schema]);
+  useEffect(() => {
+    setSelection(selection.get() || schema);
+  }, [selection, schema]);
   const [drake, setDrake] = useState(null);
   const dragAndDropContext = {
     drake
@@ -2337,11 +2399,15 @@ function FormEditor$1(props) {
 
   // fire event after render to notify interested parties
   useEffect(() => {
+    if (hasInitialized) {
+      return;
+    }
+    setHasInitialized(true);
     eventBus.fire('rendered');
 
     // keep deprecated event to ensure backward compatibility
     eventBus.fire('formEditor.rendered');
-  }, []);
+  }, [eventBus, hasInitialized]);
   const formRenderContext = useMemo(() => ({
     Children,
     Column,
@@ -2385,7 +2451,7 @@ function FormEditor$1(props) {
   return jsx("div", {
     class: "fjs-form-editor",
     children: jsxs(SlotFillRoot, {
-      children: [jsxs(DragAndDropContext$1.Provider, {
+      children: [jsxs(DragAndDropContext.Provider, {
         value: dragAndDropContext,
         children: [jsx(ModularSection, {
           rootClass: "fjs-palette-container",
@@ -2431,56 +2497,56 @@ function getFormFieldIndex(parent, formField) {
 function CreatePreview(props) {
   const {
     drake
-  } = useContext(DragAndDropContext$1);
+  } = useContext(DragAndDropContext);
   const formFields = useService$1('formFields');
-  function handleCloned(clone, original, type) {
-    const fieldType = clone.dataset.fieldType;
+  useEffect(() => {
+    if (!drake) {
+      return;
+    }
+    function handleCloned(clone, original, type) {
+      const fieldType = clone.dataset.fieldType;
 
-    // (1) field preview
-    if (fieldType) {
-      const paletteEntry = findPaletteEntry(fieldType, formFields);
-      if (!paletteEntry) {
-        return;
-      }
-      const {
-        label
-      } = paletteEntry;
-      const Icon = getPaletteIcon(paletteEntry);
-      clone.innerHTML = '';
-      clone.class = 'gu-mirror';
-      clone.classList.add('fjs-field-preview-container');
-      if (original.classList.contains('fjs-palette-field')) {
-        // default to auto columns when creating from palette
-        clone.classList.add('cds--col');
-      }
+      // (1) field preview
+      if (fieldType) {
+        const paletteEntry = findPaletteEntry(fieldType, formFields);
+        if (!paletteEntry) {
+          return;
+        }
+        const {
+          label
+        } = paletteEntry;
+        const Icon = getPaletteIcon(paletteEntry);
+        clone.innerHTML = '';
+        clone.class = 'gu-mirror';
+        clone.classList.add('fjs-field-preview-container');
+        if (original.classList.contains('fjs-palette-field')) {
+          // default to auto columns when creating from palette
+          clone.classList.add('cds--col');
+        }
 
-      // todo(pinussilvestrus): dragula, how to mitigate cursor position
-      // https://github.com/bevacqua/dragula/issues/285
-      render(jsx(FieldDragPreview, {
-        label: label,
-        Icon: Icon
-      }), clone);
-    } else {
-      // (2) row preview
+        // todo(pinussilvestrus): dragula, how to mitigate cursor position
+        // https://github.com/bevacqua/dragula/issues/285
+        render(jsx(FieldDragPreview, {
+          label: label,
+          Icon: Icon
+        }), clone);
+      } else {
+        // (2) row preview
 
-      // remove elements from copy (context pad, row dragger, ...)
-      ['fjs-context-pad', 'fjs-row-dragger', 'fjs-debug-columns'].forEach(cls => {
-        const cloneNode = clone.querySelectorAll('.' + cls);
-        cloneNode.length && cloneNode.forEach(e => e.remove());
-      });
+        // remove elements from copy (context pad, row dragger, ...)
+        ['fjs-context-pad', 'fjs-row-dragger', 'fjs-debug-columns'].forEach(cls => {
+          const cloneNode = clone.querySelectorAll('.' + cls);
+          cloneNode.length && cloneNode.forEach(e => e.remove());
+        });
 
-      // mirror grid
-      clone.classList.add('cds--grid');
-      clone.classList.add('cds--grid--condensed');
-    }
-  }
-  useEffect(() => {
-    if (!drake) {
-      return;
+        // mirror grid
+        clone.classList.add('cds--grid');
+        clone.classList.add('cds--grid--condensed');
+      }
     }
     drake.on('cloned', handleCloned);
     return () => drake.off('cloned', handleCloned);
-  }, [drake]);
+  }, [drake, formFields]);
   return null;
 }
 
@@ -2524,7 +2590,7 @@ class Renderer {
       }
       return jsx("div", {
         class: `fjs-container fjs-editor-container ${compact ? 'fjs-editor-compact' : ''}`,
-        children: jsx(FormEditorContext$1.Provider, {
+        children: jsx(FormEditorContext.Provider, {
           value: formEditorContext,
           children: jsx(FormEditor$1, {})
         })
@@ -2540,14 +2606,14 @@ class Renderer {
 }
 Renderer.$inject = ['config.renderer', 'eventBus', 'formEditor', 'injector'];
 
-var renderModule = {
+const RenderModule = {
   __init__: ['formFields', 'renderer'],
   formFields: ['type', EditorFormFields],
   renderer: ['type', Renderer]
 };
 
-var core = {
-  __depends__: [renderModule],
+const CoreModule = {
+  __depends__: [RenderModule],
   debounce: ['factory', DebounceFactory],
   eventBus: ['type', EventBus],
   importer: ['type', Importer],
@@ -2789,7 +2855,7 @@ function error(action, message) {
 /**
  * @type { import('didi').ModuleDeclaration }
  */
-var EditorActionsModule$1 = {
+var BaseEditorActionsModule = {
   __init__: ['editorActions'],
   editorActions: ['type', EditorActions]
 };
@@ -2838,14 +2904,28 @@ class FormEditorActions extends EditorActions {
 }
 FormEditorActions.$inject = ['eventBus', 'injector'];
 
-var EditorActionsModule = {
-  __depends__: [EditorActionsModule$1],
+const EditorActionsModule = {
+  __depends__: [BaseEditorActionsModule],
   editorActions: ['type', FormEditorActions]
 };
 
-var DraggingModule = {
-  __init__: ['dragging'],
-  dragging: ['type', Dragging]
+class EditorTemplating {
+  // same rules as viewer templating
+  isTemplate(value) {
+    return isString(value) && (value.startsWith('=') || /{{/.test(value));
+  }
+
+  // return the template raw, as we usually just want to display that
+  evaluate(template) {
+    return template;
+  }
+}
+EditorTemplating.$inject = [];
+
+const EditorExpressionLanguageModule = {
+  __init__: ['expressionLanguage', 'templating'],
+  expressionLanguage: ['type', FeelExpressionLanguage],
+  templating: ['type', EditorTemplating]
 };
 
 var KEYS_COPY = ['c', 'C'];
@@ -3237,7 +3317,7 @@ KeyboardBindings.prototype.registerBindings = function (keyboard, editorActions)
 /**
  * @type { import('didi').ModuleDeclaration }
  */
-var KeyboardModule$1 = {
+var KeyboardModule = {
   __init__: ['keyboard', 'keyboardBindings'],
   keyboard: ['type', Keyboard],
   keyboardBindings: ['type', KeyboardBindings]
@@ -3288,640 +3368,487 @@ class FormEditorKeyboardBindings {
 }
 FormEditorKeyboardBindings.$inject = ['eventBus', 'keyboard'];
 
-var KeyboardModule = {
-  __depends__: [KeyboardModule$1],
+const FormEditorKeyboardModule = {
+  __depends__: [KeyboardModule],
   __init__: ['keyboardBindings'],
   keyboardBindings: ['type', FormEditorKeyboardBindings]
 };
 
-function arrayAdd$1(array, index, item) {
-  array.splice(index, 0, item);
-  return array;
-}
-function arrayRemove(array, index) {
-  array.splice(index, 1);
-  return array;
-}
-function updatePath(formFieldRegistry, formField, index) {
-  const parent = formFieldRegistry.get(formField._parent);
-  refreshPathsRecursively(formField, [...parent._path, 'components', index]);
-  return formField;
-}
-function refreshPathsRecursively(formField, path) {
-  formField._path = path;
-  const components = formField.components || [];
-  components.forEach((component, index) => {
-    refreshPathsRecursively(component, [...path, 'components', index]);
-  });
-}
-function updateRow(formField, rowId) {
-  formField.layout = {
-    ...(formField.layout || {}),
-    row: rowId
-  };
-  return formField;
-}
-
-class AddFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
-   */
-  constructor(formEditor, formFieldRegistry) {
-    this._formEditor = formEditor;
-    this._formFieldRegistry = formFieldRegistry;
-  }
-  execute(context) {
-    const {
-      formField,
-      targetFormField,
-      targetIndex
-    } = context;
-    const {
-      schema
-    } = this._formEditor._getState();
-    const targetPath = [...targetFormField._path, 'components'];
-    formField._parent = targetFormField.id;
-
-    // (1) Add new form field
-    arrayAdd$1(get(schema, targetPath), targetIndex, formField);
-
-    // (2) Update internal paths of new form field and its siblings (and their children)
-    get(schema, targetPath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
-
-    // (3) Add new form field to form field registry
-    this._formFieldRegistry.add(formField);
-
-    // TODO: Create updater/change support that automatically updates paths and schema on command execution
-    this._formEditor._setState({
-      schema
-    });
-  }
-  revert(context) {
-    const {
-      formField,
-      targetFormField,
-      targetIndex
-    } = context;
-    const {
-      schema
-    } = this._formEditor._getState();
-    const targetPath = [...targetFormField._path, 'components'];
+const DraggingModule = {
+  __init__: ['dragging'],
+  dragging: ['type', Dragging]
+};
 
-    // (1) Remove new form field
-    arrayRemove(get(schema, targetPath), targetIndex);
+/**
+ * @typedef {import('didi').Injector} Injector
+ *
+ * @typedef {import('../core/Types').ElementLike} ElementLike
+ *
+ * @typedef {import('../core/EventBus').default} EventBus
+ * @typedef {import('./CommandHandler').default} CommandHandler
+ *
+ * @typedef { any } CommandContext
+ * @typedef { {
+ *   new (...args: any[]) : CommandHandler
+ * } } CommandHandlerConstructor
+ * @typedef { {
+ *   [key: string]: CommandHandler;
+ * } } CommandHandlerMap
+ * @typedef { {
+ *   command: string;
+ *   context: any;
+ *   id?: any;
+ * } } CommandStackAction
+ * @typedef { {
+ *   actions: CommandStackAction[];
+ *   dirty: ElementLike[];
+ *   trigger: 'execute' | 'undo' | 'redo' | 'clear' | null;
+ *   atomic?: boolean;
+ * } } CurrentExecution
+ */
 
-    // (2) Update internal paths of new form field and its siblings (and their children)
-    get(schema, targetPath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
+/**
+ * A service that offers un- and redoable execution of commands.
+ *
+ * The command stack is responsible for executing modeling actions
+ * in a un- and redoable manner. To do this it delegates the actual
+ * command execution to {@link CommandHandler}s.
+ *
+ * Command handlers provide {@link CommandHandler#execute(ctx)} and
+ * {@link CommandHandler#revert(ctx)} methods to un- and redo a command
+ * identified by a command context.
+ *
+ *
+ * ## Life-Cycle events
+ *
+ * In the process the command stack fires a number of life-cycle events
+ * that other components to participate in the command execution.
+ *
+ *    * preExecute
+ *    * preExecuted
+ *    * execute
+ *    * executed
+ *    * postExecute
+ *    * postExecuted
+ *    * revert
+ *    * reverted
+ *
+ * A special event is used for validating, whether a command can be
+ * performed prior to its execution.
+ *
+ *    * canExecute
+ *
+ * Each of the events is fired as `commandStack.{eventName}` and
+ * `commandStack.{commandName}.{eventName}`, respectively. This gives
+ * components fine grained control on where to hook into.
+ *
+ * The event object fired transports `command`, the name of the
+ * command and `context`, the command context.
+ *
+ *
+ * ## Creating Command Handlers
+ *
+ * Command handlers should provide the {@link CommandHandler#execute(ctx)}
+ * and {@link CommandHandler#revert(ctx)} methods to implement
+ * redoing and undoing of a command.
+ *
+ * A command handler _must_ ensure undo is performed properly in order
+ * not to break the undo chain. It must also return the shapes that
+ * got changed during the `execute` and `revert` operations.
+ *
+ * Command handlers may execute other modeling operations (and thus
+ * commands) in their `preExecute(d)` and `postExecute(d)` phases. The command
+ * stack will properly group all commands together into a logical unit
+ * that may be re- and undone atomically.
+ *
+ * Command handlers must not execute other commands from within their
+ * core implementation (`execute`, `revert`).
+ *
+ *
+ * ## Change Tracking
+ *
+ * During the execution of the CommandStack it will keep track of all
+ * elements that have been touched during the command's execution.
+ *
+ * At the end of the CommandStack execution it will notify interested
+ * components via an 'elements.changed' event with all the dirty
+ * elements.
+ *
+ * The event can be picked up by components that are interested in the fact
+ * that elements have been changed. One use case for this is updating
+ * their graphical representation after moving / resizing or deletion.
+ *
+ * @see CommandHandler
+ *
+ * @param {EventBus} eventBus
+ * @param {Injector} injector
+ */
+function CommandStack(eventBus, injector) {
+  /**
+   * A map of all registered command handlers.
+   *
+   * @type {CommandHandlerMap}
+   */
+  this._handlerMap = {};
 
-    // (3) Remove new form field from form field registry
-    this._formFieldRegistry.remove(formField);
+  /**
+   * A stack containing all re/undoable actions on the diagram
+   *
+   * @type {CommandStackAction[]}
+   */
+  this._stack = [];
 
-    // TODO: Create updater/change support that automatically updates paths and schema on command execution
-    this._formEditor._setState({
-      schema
-    });
-  }
-}
-AddFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
+  /**
+   * The current index on the stack
+   *
+   * @type {number}
+   */
+  this._stackIdx = -1;
 
-class EditFormFieldHandler {
   /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+   * Current active commandStack execution
+   *
+   * @type {CurrentExecution}
    */
-  constructor(formEditor, formFieldRegistry) {
-    this._formEditor = formEditor;
-    this._formFieldRegistry = formFieldRegistry;
-  }
-  execute(context) {
-    const {
-      formField,
-      properties
-    } = context;
-    let {
-      schema
-    } = this._formEditor._getState();
-    const oldProperties = {};
-    for (let key in properties) {
-      oldProperties[key] = formField[key];
-      const property = properties[key];
-      if (key === 'id') {
-        if (property !== formField.id) {
-          this._formFieldRegistry.updateId(formField, property);
-        }
-      } else {
-        formField[key] = property;
-      }
-    }
-    context.oldProperties = oldProperties;
+  this._currentExecution = {
+    actions: [],
+    dirty: [],
+    trigger: null
+  };
 
-    // TODO: Create updater/change support that automatically updates paths and schema on command execution
-    this._formEditor._setState({
-      schema
-    });
-    return formField;
-  }
-  revert(context) {
-    const {
-      formField,
-      oldProperties
-    } = context;
-    let {
-      schema
-    } = this._formEditor._getState();
-    for (let key in oldProperties) {
-      const property = oldProperties[key];
-      if (key === 'id') {
-        if (property !== formField.id) {
-          this._formFieldRegistry.updateId(formField, property);
-        }
-      } else {
-        formField[key] = property;
-      }
-    }
+  /**
+   * @type {Injector}
+   */
+  this._injector = injector;
 
-    // TODO: Create updater/change support that automatically updates paths and schema on command execution
-    this._formEditor._setState({
-      schema
-    });
-    return formField;
-  }
-}
-EditFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
+  /**
+   * @type EventBus
+   */
+  this._eventBus = eventBus;
 
-class MoveFormFieldHandler {
   /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
-   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
-   * @param { import('@bpmn-io/form-js-viewer').FormLayouter } formLayouter
+   * @type { number }
    */
-  constructor(formEditor, formFieldRegistry, pathRegistry, formLayouter) {
-    this._formEditor = formEditor;
-    this._formFieldRegistry = formFieldRegistry;
-    this._pathRegistry = pathRegistry;
-    this._formLayouter = formLayouter;
+  this._uid = 1;
+  eventBus.on(['diagram.destroy', 'diagram.clear'], function () {
+    this.clear(false);
+  }, this);
+}
+CommandStack.$inject = ['eventBus', 'injector'];
+
+/**
+ * Execute a command.
+ *
+ * @param {string} command The command to execute.
+ * @param {CommandContext} context The context with which to execute the command.
+ */
+CommandStack.prototype.execute = function (command, context) {
+  if (!command) {
+    throw new Error('command required');
   }
-  execute(context) {
-    this.moveFormField(context);
+  this._currentExecution.trigger = 'execute';
+  const action = {
+    command: command,
+    context: context
+  };
+  this._pushAction(action);
+  this._internalExecute(action);
+  this._popAction();
+};
+
+/**
+ * Check whether a command can be executed.
+ *
+ * Implementors may hook into the mechanism on two ways:
+ *
+ *   * in event listeners:
+ *
+ *     Users may prevent the execution via an event listener.
+ *     It must prevent the default action for `commandStack.(<command>.)canExecute` events.
+ *
+ *   * in command handlers:
+ *
+ *     If the method {@link CommandHandler#canExecute} is implemented in a handler
+ *     it will be called to figure out whether the execution is allowed.
+ *
+ * @param {string} command The command to execute.
+ * @param {CommandContext} context The context with which to execute the command.
+ *
+ * @return {boolean} Whether the command can be executed with the given context.
+ */
+CommandStack.prototype.canExecute = function (command, context) {
+  const action = {
+    command: command,
+    context: context
+  };
+  const handler = this._getHandler(command);
+  let result = this._fire(command, 'canExecute', action);
+
+  // handler#canExecute will only be called if no listener
+  // decided on a result already
+  if (result === undefined) {
+    if (!handler) {
+      return false;
+    }
+    if (handler.canExecute) {
+      result = handler.canExecute(context);
+    }
   }
-  revert(context) {
-    let {
-      sourceFormField,
-      targetFormField,
-      sourceIndex,
-      targetIndex,
-      sourceRow,
-      targetRow
-    } = context;
-    this.moveFormField({
-      sourceFormField: targetFormField,
-      targetFormField: sourceFormField,
-      sourceIndex: targetIndex,
-      targetIndex: sourceIndex,
-      sourceRow: targetRow,
-      targetRow: sourceRow
-    }, true);
+  return result;
+};
+
+/**
+ * Clear the command stack, erasing all undo / redo history.
+ *
+ * @param {boolean} [emit=true] Whether to fire an event. Defaults to `true`.
+ */
+CommandStack.prototype.clear = function (emit) {
+  this._stack.length = 0;
+  this._stackIdx = -1;
+  if (emit !== false) {
+    this._fire('changed', {
+      trigger: 'clear'
+    });
   }
-  moveFormField(context, revert) {
-    let {
-      sourceFormField,
-      targetFormField,
-      sourceIndex,
-      targetIndex,
-      targetRow
-    } = context;
-    let {
-      schema
-    } = this._formEditor._getState();
-    const sourcePath = [...sourceFormField._path, 'components'];
-    if (sourceFormField.id === targetFormField.id) {
-      if (revert) {
-        if (sourceIndex > targetIndex) {
-          sourceIndex--;
-        }
-      } else {
-        if (sourceIndex < targetIndex) {
-          targetIndex--;
-        }
+};
+
+/**
+ * Undo last command(s)
+ */
+CommandStack.prototype.undo = function () {
+  let action = this._getUndoAction(),
+    next;
+  if (action) {
+    this._currentExecution.trigger = 'undo';
+    this._pushAction(action);
+    while (action) {
+      this._internalUndo(action);
+      next = this._getUndoAction();
+      if (!next || next.id !== action.id) {
+        break;
       }
-      const formField = get(schema, [...sourcePath, sourceIndex]);
+      action = next;
+    }
+    this._popAction();
+  }
+};
 
-      // (1) Add to row or create new one
-      updateRow(formField, targetRow ? targetRow.id : this._formLayouter.nextRowId());
+/**
+ * Redo last command(s)
+ */
+CommandStack.prototype.redo = function () {
+  let action = this._getRedoAction(),
+    next;
+  if (action) {
+    this._currentExecution.trigger = 'redo';
+    this._pushAction(action);
+    while (action) {
+      this._internalExecute(action, true);
+      next = this._getRedoAction();
+      if (!next || next.id !== action.id) {
+        break;
+      }
+      action = next;
+    }
+    this._popAction();
+  }
+};
 
-      // (2) Move form field
-      mutate(get(schema, sourcePath), sourceIndex, targetIndex);
+/**
+ * Register a handler instance with the command stack.
+ *
+ * @param {string} command Command to be executed.
+ * @param {CommandHandler} handler Handler to execute the command.
+ */
+CommandStack.prototype.register = function (command, handler) {
+  this._setHandler(command, handler);
+};
 
-      // (3) Update internal paths of new form field and its siblings (and their children)
-      get(schema, sourcePath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
-    } else {
-      const formField = get(schema, [...sourcePath, sourceIndex]);
+/**
+ * Register a handler type with the command stack  by instantiating it and
+ * injecting its dependencies.
+ *
+ * @param {string} command Command to be executed.
+ * @param {CommandHandlerConstructor} handlerCls Constructor to instantiate a {@link CommandHandler}.
+ */
+CommandStack.prototype.registerHandler = function (command, handlerCls) {
+  if (!command || !handlerCls) {
+    throw new Error('command and handlerCls must be defined');
+  }
+  const handler = this._injector.instantiate(handlerCls);
+  this.register(command, handler);
+};
 
-      // (1) Deregister form field (and children) from path registry
-      this._pathRegistry.executeRecursivelyOnFields(formField, ({
-        field
-      }) => {
-        this._pathRegistry.unclaimPath(this._pathRegistry.getValuePath(field));
-      });
-      formField._parent = targetFormField.id;
+/**
+ * @return {boolean}
+ */
+CommandStack.prototype.canUndo = function () {
+  return !!this._getUndoAction();
+};
 
-      // (2) Remove form field
-      arrayRemove(get(schema, sourcePath), sourceIndex);
+/**
+ * @return {boolean}
+ */
+CommandStack.prototype.canRedo = function () {
+  return !!this._getRedoAction();
+};
 
-      // (3) Update internal paths of siblings (and their children)
-      get(schema, sourcePath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
-      const targetPath = [...targetFormField._path, 'components'];
+// stack access  //////////////////////
 
-      // (4) Add to row or create new one
-      updateRow(formField, targetRow ? targetRow.id : this._formLayouter.nextRowId());
+CommandStack.prototype._getRedoAction = function () {
+  return this._stack[this._stackIdx + 1];
+};
+CommandStack.prototype._getUndoAction = function () {
+  return this._stack[this._stackIdx];
+};
 
-      // (5) Add form field
-      arrayAdd$1(get(schema, targetPath), targetIndex, formField);
+// internal functionality //////////////////////
 
-      // (6) Update internal paths of siblings (and their children)
-      get(schema, targetPath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
+CommandStack.prototype._internalUndo = function (action) {
+  const command = action.command,
+    context = action.context;
+  const handler = this._getHandler(command);
 
-      // (7) Reregister form field (and children) from path registry
-      this._pathRegistry.executeRecursivelyOnFields(formField, ({
-        field,
-        isClosed,
-        isRepeatable
-      }) => {
-        this._pathRegistry.claimPath(this._pathRegistry.getValuePath(field), {
-          isClosed,
-          isRepeatable,
-          claimerId: field.id
-        });
-      });
+  // guard against illegal nested command stack invocations
+  this._atomicDo(() => {
+    this._fire(command, 'revert', action);
+    if (handler.revert) {
+      this._markDirty(handler.revert(context));
     }
-
-    // TODO: Create updater/change support that automatically updates paths and schema on command execution
-    this._formEditor._setState({
-      schema
-    });
+    this._revertedAction(action);
+    this._fire(command, 'reverted', action);
+  });
+};
+CommandStack.prototype._fire = function (command, qualifier, event) {
+  if (arguments.length < 3) {
+    event = qualifier;
+    qualifier = null;
   }
-}
-MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry', 'pathRegistry', 'formLayouter'];
-
-class RemoveFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
-   */
-  constructor(formEditor, formFieldRegistry) {
-    this._formEditor = formEditor;
-    this._formFieldRegistry = formFieldRegistry;
+  const names = qualifier ? [command + '.' + qualifier, qualifier] : [command];
+  let result;
+  event = this._eventBus.createEvent(event);
+  for (const name of names) {
+    result = this._eventBus.fire('commandStack.' + name, event);
+    if (event.cancelBubble) {
+      break;
+    }
   }
-  execute(context) {
-    const {
-      sourceFormField,
-      sourceIndex
-    } = context;
-    let {
-      schema
-    } = this._formEditor._getState();
-    const sourcePath = [...sourceFormField._path, 'components'];
-    const formField = context.formField = get(schema, [...sourcePath, sourceIndex]);
-
-    // (1) Remove form field
-    arrayRemove(get(schema, sourcePath), sourceIndex);
-
-    // (2) Update internal paths of its siblings (and their children)
-    get(schema, sourcePath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
-
-    // (3) Remove form field and children from form field registry
-    runRecursively(formField, formField => this._formFieldRegistry.remove(formField));
-
-    // TODO: Create updater/change support that automatically updates paths and schema on command execution
-    this._formEditor._setState({
-      schema
-    });
+  return result;
+};
+CommandStack.prototype._createId = function () {
+  return this._uid++;
+};
+CommandStack.prototype._atomicDo = function (fn) {
+  const execution = this._currentExecution;
+  execution.atomic = true;
+  try {
+    fn();
+  } finally {
+    execution.atomic = false;
   }
-  revert(context) {
-    const {
-      formField,
-      sourceFormField,
-      sourceIndex
-    } = context;
-    let {
-      schema
-    } = this._formEditor._getState();
-    const sourcePath = [...sourceFormField._path, 'components'];
-
-    // (1) Add form field
-    arrayAdd$1(get(schema, sourcePath), sourceIndex, formField);
-
-    // (2) Update internal paths of its siblings (and their children)
-    get(schema, sourcePath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
-
-    // (3) Add form field and children to form field registry
-    runRecursively(formField, formField => this._formFieldRegistry.add(formField));
-
-    // TODO: Create updater/change support that automatically updates paths and schema on command execution
-    this._formEditor._setState({
-      schema
-    });
-  }
-}
-RemoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
-
-class UpdateIdClaimHandler {
-  /**
-   * @constructor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
-   */
-  constructor(formFieldRegistry) {
-    this._formFieldRegistry = formFieldRegistry;
-  }
-  execute(context) {
-    const {
-      claiming,
-      formField,
-      id
-    } = context;
-    if (claiming) {
-      this._formFieldRegistry._ids.claim(id, formField);
-    } else {
-      this._formFieldRegistry._ids.unclaim(id);
-    }
+};
+CommandStack.prototype._internalExecute = function (action, redo) {
+  const command = action.command,
+    context = action.context;
+  const handler = this._getHandler(command);
+  if (!handler) {
+    throw new Error('no command handler registered for <' + command + '>');
   }
-  revert(context) {
-    const {
-      claiming,
-      formField,
-      id
-    } = context;
-    if (claiming) {
-      this._formFieldRegistry._ids.unclaim(id);
-    } else {
-      this._formFieldRegistry._ids.claim(id, formField);
+  this._pushAction(action);
+  if (!redo) {
+    this._fire(command, 'preExecute', action);
+    if (handler.preExecute) {
+      handler.preExecute(context);
     }
+    this._fire(command, 'preExecuted', action);
   }
-}
-UpdateIdClaimHandler.$inject = ['formFieldRegistry'];
 
-class UpdateKeyClaimHandler {
-  /**
-   * @constructor
-   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
-   */
-  constructor(pathRegistry) {
-    this._pathRegistry = pathRegistry;
-  }
-  execute(context) {
-    const {
-      claiming,
-      formField,
-      key
-    } = context;
-    const options = {
-      replacements: {
-        [formField.id]: key
-      }
-    };
-    const valuePath = this._pathRegistry.getValuePath(formField, options);
-    if (claiming) {
-      this._pathRegistry.claimPath(valuePath, {
-        isClosed: true,
-        claimerId: formField.id
-      });
-    } else {
-      this._pathRegistry.unclaimPath(valuePath);
+  // guard against illegal nested command stack invocations
+  this._atomicDo(() => {
+    this._fire(command, 'execute', action);
+    if (handler.execute) {
+      // actual execute + mark return results as dirty
+      this._markDirty(handler.execute(context));
     }
 
-    // cache path for revert
-    context.valuePath = valuePath;
-  }
-  revert(context) {
-    const {
-      claiming,
-      formField,
-      valuePath
-    } = context;
-    if (claiming) {
-      this._pathRegistry.unclaimPath(valuePath);
-    } else {
-      this._pathRegistry.claimPath(valuePath, {
-        isClosed: true,
-        claimerId: formField.id
-      });
+    // log to stack
+    this._executedAction(action, redo);
+    this._fire(command, 'executed', action);
+  });
+  if (!redo) {
+    this._fire(command, 'postExecute', action);
+    if (handler.postExecute) {
+      handler.postExecute(context);
     }
+    this._fire(command, 'postExecuted', action);
   }
-}
-UpdateKeyClaimHandler.$inject = ['pathRegistry'];
-
-class UpdatePathClaimHandler {
-  /**
-   * @constructor
-   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
-   */
-  constructor(pathRegistry) {
-    this._pathRegistry = pathRegistry;
-  }
-  execute(context) {
-    const {
-      claiming,
-      formField,
-      path
-    } = context;
-    const options = {
-      replacements: {
-        [formField.id]: path
-      }
-    };
-    const valuePaths = [];
-    if (claiming) {
-      this._pathRegistry.executeRecursivelyOnFields(formField, ({
-        field,
-        isClosed,
-        isRepeatable
-      }) => {
-        const valuePath = this._pathRegistry.getValuePath(field, options);
-        valuePaths.push({
-          valuePath,
-          isClosed,
-          isRepeatable,
-          claimerId: field.id
-        });
-        this._pathRegistry.claimPath(valuePath, {
-          isClosed,
-          isRepeatable,
-          claimerId: field.id
-        });
-      });
-    } else {
-      this._pathRegistry.executeRecursivelyOnFields(formField, ({
-        field,
-        isClosed,
-        isRepeatable
-      }) => {
-        const valuePath = this._pathRegistry.getValuePath(field, options);
-        valuePaths.push({
-          valuePath,
-          isClosed,
-          isRepeatable,
-          claimerId: field.id
-        });
-        this._pathRegistry.unclaimPath(valuePath);
-      });
-    }
-
-    // cache path info for revert
-    context.valuePaths = valuePaths;
+  this._popAction();
+};
+CommandStack.prototype._pushAction = function (action) {
+  const execution = this._currentExecution,
+    actions = execution.actions;
+  const baseAction = actions[0];
+  if (execution.atomic) {
+    throw new Error('illegal invocation in <execute> or <revert> phase (action: ' + action.command + ')');
   }
-  revert(context) {
-    const {
-      claiming,
-      valuePaths
-    } = context;
-    if (claiming) {
-      valuePaths.forEach(({
-        valuePath
-      }) => {
-        this._pathRegistry.unclaimPath(valuePath);
-      });
-    } else {
-      valuePaths.forEach(({
-        valuePath,
-        isClosed,
-        isRepeatable,
-        claimerId
-      }) => {
-        this._pathRegistry.claimPath(valuePath, {
-          isClosed,
-          isRepeatable,
-          claimerId
-        });
-      });
-    }
+  if (!action.id) {
+    action.id = baseAction && baseAction.id || this._createId();
   }
-}
-UpdatePathClaimHandler.$inject = ['pathRegistry'];
-
-class Modeling {
-  constructor(commandStack, eventBus, formEditor, formFieldRegistry, fieldFactory) {
-    this._commandStack = commandStack;
-    this._formEditor = formEditor;
-    this._formFieldRegistry = formFieldRegistry;
-    this._fieldFactory = fieldFactory;
-    eventBus.on('form.init', () => {
-      this.registerHandlers();
+  actions.push(action);
+};
+CommandStack.prototype._popAction = function () {
+  const execution = this._currentExecution,
+    trigger = execution.trigger,
+    actions = execution.actions,
+    dirty = execution.dirty;
+  actions.pop();
+  if (!actions.length) {
+    this._eventBus.fire('elements.changed', {
+      elements: uniqueBy('id', dirty.reverse())
     });
-  }
-  registerHandlers() {
-    Object.entries(this.getHandlers()).forEach(([id, handler]) => {
-      this._commandStack.registerHandler(id, handler);
+    dirty.length = 0;
+    this._fire('changed', {
+      trigger: trigger
     });
+    execution.trigger = null;
   }
-  getHandlers() {
-    return {
-      'formField.add': AddFormFieldHandler,
-      'formField.edit': EditFormFieldHandler,
-      'formField.move': MoveFormFieldHandler,
-      'formField.remove': RemoveFormFieldHandler,
-      'id.updateClaim': UpdateIdClaimHandler,
-      'key.updateClaim': UpdateKeyClaimHandler,
-      'path.updateClaim': UpdatePathClaimHandler
-    };
-  }
-  addFormField(attrs, targetFormField, targetIndex) {
-    const formField = this._fieldFactory.create(attrs);
-    const context = {
-      formField,
-      targetFormField,
-      targetIndex
-    };
-    this._commandStack.execute('formField.add', context);
-    return formField;
-  }
-  editFormField(formField, properties, value) {
-    if (!isObject(properties)) {
-      properties = {
-        [properties]: value
-      };
-    }
-    const context = {
-      formField,
-      properties
-    };
-    this._commandStack.execute('formField.edit', context);
-  }
-  moveFormField(formField, sourceFormField, targetFormField, sourceIndex, targetIndex, sourceRow, targetRow) {
-    const context = {
-      formField,
-      sourceFormField,
-      targetFormField,
-      sourceIndex,
-      targetIndex,
-      sourceRow,
-      targetRow
-    };
-    this._commandStack.execute('formField.move', context);
-  }
-  removeFormField(formField, sourceFormField, sourceIndex) {
-    const context = {
-      formField,
-      sourceFormField,
-      sourceIndex
-    };
-    this._commandStack.execute('formField.remove', context);
-  }
-  claimId(formField, id) {
-    const context = {
-      formField,
-      id,
-      claiming: true
-    };
-    this._commandStack.execute('id.updateClaim', context);
-  }
-  unclaimId(formField, id) {
-    const context = {
-      formField,
-      id,
-      claiming: false
-    };
-    this._commandStack.execute('id.updateClaim', context);
-  }
-  claimKey(formField, key) {
-    const context = {
-      formField,
-      key,
-      claiming: true
-    };
-    this._commandStack.execute('key.updateClaim', context);
+};
+CommandStack.prototype._markDirty = function (elements) {
+  const execution = this._currentExecution;
+  if (!elements) {
+    return;
   }
-  unclaimKey(formField, key) {
-    const context = {
-      formField,
-      key,
-      claiming: false
-    };
-    this._commandStack.execute('key.updateClaim', context);
+  elements = isArray(elements) ? elements : [elements];
+  execution.dirty = execution.dirty.concat(elements);
+};
+CommandStack.prototype._executedAction = function (action, redo) {
+  const stackIdx = ++this._stackIdx;
+  if (!redo) {
+    this._stack.splice(stackIdx, this._stack.length, action);
   }
-  claimPath(formField, path) {
-    const context = {
-      formField,
-      path,
-      claiming: true
-    };
-    this._commandStack.execute('path.updateClaim', context);
+};
+CommandStack.prototype._revertedAction = function (action) {
+  this._stackIdx--;
+};
+CommandStack.prototype._getHandler = function (command) {
+  return this._handlerMap[command];
+};
+CommandStack.prototype._setHandler = function (command, handler) {
+  if (!command || !handler) {
+    throw new Error('command and handler required');
   }
-  unclaimPath(formField, path) {
-    const context = {
-      formField,
-      path,
-      claiming: false
-    };
-    this._commandStack.execute('path.updateClaim', context);
+  if (this._handlerMap[command]) {
+    throw new Error('overriding handler for command <' + command + '>');
   }
-}
-Modeling.$inject = ['commandStack', 'eventBus', 'formEditor', 'formFieldRegistry', 'fieldFactory'];
+  this._handlerMap[command] = handler;
+};
+
+/**
+ * @type { import('didi').ModuleDeclaration }
+ */
+var commandModule = {
+  commandStack: ['type', CommandStack]
+};
 
 /**
  * @typedef {import('../core/Types').ElementLike} ElementLike
@@ -4151,53 +4078,6 @@ function createHook(hook) {
   return hookFn;
 }
 
-class FormLayoutUpdater extends CommandInterceptor {
-  constructor(eventBus, formLayouter, modeling, formEditor) {
-    super(eventBus);
-    this._eventBus = eventBus;
-    this._formLayouter = formLayouter;
-    this._modeling = modeling;
-    this._formEditor = formEditor;
-
-    // @ts-ignore
-    this.preExecute(['formField.add', 'formField.remove', 'formField.move', 'id.updateClaim'], event => this.updateRowIds(event));
-
-    // we need that as the state got updates
-    // on the next tick (not in post execute)
-    eventBus.on('changed', context => {
-      const {
-        schema
-      } = context;
-      this.updateLayout(schema);
-    });
-  }
-  updateLayout(schema) {
-    this._formLayouter.clear();
-    this._formLayouter.calculateLayout(clone(schema));
-  }
-  updateRowIds(event) {
-    const {
-      schema
-    } = this._formEditor._getState();
-    const setRowIds = parent => {
-      if (!parent.components || !parent.components.length) {
-        return;
-      }
-      parent.components.forEach(formField => {
-        const row = this._formLayouter.getRowForField(formField);
-        updateRow(formField, row.id);
-
-        // handle children recursively
-        setRowIds(formField);
-      });
-    };
-
-    // make sure rows are persisted in schema (e.g. for migration case)
-    setRowIds(schema);
-  }
-}
-FormLayoutUpdater.$inject = ['eventBus', 'formLayouter', 'modeling', 'formEditor'];
-
 class IdBehavior extends CommandInterceptor {
   constructor(eventBus, modeling) {
     super(eventBus);
@@ -4438,7 +4318,7 @@ class TableDataSourceBehavior extends CommandInterceptor {
 }
 TableDataSourceBehavior.$inject = ['eventBus'];
 
-var behaviorModule = {
+const BehaviorModule = {
   __init__: ['idBehavior', 'keyBehavior', 'pathBehavior', 'validateBehavior', 'optionsSourceBehavior', 'columnsSourceBehavior', 'tableDataSourceBehavior'],
   idBehavior: ['type', IdBehavior],
   keyBehavior: ['type', KeyBehavior],
@@ -4449,479 +4329,684 @@ var behaviorModule = {
   tableDataSourceBehavior: ['type', TableDataSourceBehavior]
 };
 
-/**
- * @typedef {import('didi').Injector} Injector
- *
- * @typedef {import('../core/Types').ElementLike} ElementLike
- *
- * @typedef {import('../core/EventBus').default} EventBus
- * @typedef {import('./CommandHandler').default} CommandHandler
- *
- * @typedef { any } CommandContext
- * @typedef { {
- *   new (...args: any[]) : CommandHandler
- * } } CommandHandlerConstructor
- * @typedef { {
- *   [key: string]: CommandHandler;
- * } } CommandHandlerMap
- * @typedef { {
- *   command: string;
- *   context: any;
- *   id?: any;
- * } } CommandStackAction
- * @typedef { {
- *   actions: CommandStackAction[];
- *   dirty: ElementLike[];
- *   trigger: 'execute' | 'undo' | 'redo' | 'clear' | null;
- *   atomic?: boolean;
- * } } CurrentExecution
- */
+function arrayAdd$1(array, index, item) {
+  array.splice(index, 0, item);
+  return array;
+}
+function arrayRemove(array, index) {
+  array.splice(index, 1);
+  return array;
+}
+function updatePath(formFieldRegistry, formField, index) {
+  const parent = formFieldRegistry.get(formField._parent);
+  refreshPathsRecursively(formField, [...parent._path, 'components', index]);
+  return formField;
+}
+function refreshPathsRecursively(formField, path) {
+  formField._path = path;
+  const components = formField.components || [];
+  components.forEach((component, index) => {
+    refreshPathsRecursively(component, [...path, 'components', index]);
+  });
+}
+function updateRow(formField, rowId) {
+  formField.layout = {
+    ...(formField.layout || {}),
+    row: rowId
+  };
+  return formField;
+}
 
-/**
- * A service that offers un- and redoable execution of commands.
- *
- * The command stack is responsible for executing modeling actions
- * in a un- and redoable manner. To do this it delegates the actual
- * command execution to {@link CommandHandler}s.
- *
- * Command handlers provide {@link CommandHandler#execute(ctx)} and
- * {@link CommandHandler#revert(ctx)} methods to un- and redo a command
- * identified by a command context.
- *
- *
- * ## Life-Cycle events
- *
- * In the process the command stack fires a number of life-cycle events
- * that other components to participate in the command execution.
- *
- *    * preExecute
- *    * preExecuted
- *    * execute
- *    * executed
- *    * postExecute
- *    * postExecuted
- *    * revert
- *    * reverted
- *
- * A special event is used for validating, whether a command can be
- * performed prior to its execution.
- *
- *    * canExecute
- *
- * Each of the events is fired as `commandStack.{eventName}` and
- * `commandStack.{commandName}.{eventName}`, respectively. This gives
- * components fine grained control on where to hook into.
- *
- * The event object fired transports `command`, the name of the
- * command and `context`, the command context.
- *
- *
- * ## Creating Command Handlers
- *
- * Command handlers should provide the {@link CommandHandler#execute(ctx)}
- * and {@link CommandHandler#revert(ctx)} methods to implement
- * redoing and undoing of a command.
- *
- * A command handler _must_ ensure undo is performed properly in order
- * not to break the undo chain. It must also return the shapes that
- * got changed during the `execute` and `revert` operations.
- *
- * Command handlers may execute other modeling operations (and thus
- * commands) in their `preExecute(d)` and `postExecute(d)` phases. The command
- * stack will properly group all commands together into a logical unit
- * that may be re- and undone atomically.
- *
- * Command handlers must not execute other commands from within their
- * core implementation (`execute`, `revert`).
- *
- *
- * ## Change Tracking
- *
- * During the execution of the CommandStack it will keep track of all
- * elements that have been touched during the command's execution.
- *
- * At the end of the CommandStack execution it will notify interested
- * components via an 'elements.changed' event with all the dirty
- * elements.
- *
- * The event can be picked up by components that are interested in the fact
- * that elements have been changed. One use case for this is updating
- * their graphical representation after moving / resizing or deletion.
- *
- * @see CommandHandler
- *
- * @param {EventBus} eventBus
- * @param {Injector} injector
- */
-function CommandStack(eventBus, injector) {
+class FormLayoutUpdater extends CommandInterceptor {
+  constructor(eventBus, formLayouter, modeling, formEditor) {
+    super(eventBus);
+    this._eventBus = eventBus;
+    this._formLayouter = formLayouter;
+    this._modeling = modeling;
+    this._formEditor = formEditor;
+
+    // @ts-ignore
+    this.preExecute(['formField.add', 'formField.remove', 'formField.move', 'id.updateClaim'], event => this.updateRowIds(event));
+
+    // we need that as the state got updates
+    // on the next tick (not in post execute)
+    eventBus.on('changed', context => {
+      const {
+        schema
+      } = context;
+      this.updateLayout(schema);
+    });
+  }
+  updateLayout(schema) {
+    this._formLayouter.clear();
+    this._formLayouter.calculateLayout(clone(schema));
+  }
+  updateRowIds(event) {
+    const {
+      schema
+    } = this._formEditor._getState();
+    const setRowIds = parent => {
+      if (!parent.components || !parent.components.length) {
+        return;
+      }
+      parent.components.forEach(formField => {
+        const row = this._formLayouter.getRowForField(formField);
+        updateRow(formField, row.id);
+
+        // handle children recursively
+        setRowIds(formField);
+      });
+    };
+
+    // make sure rows are persisted in schema (e.g. for migration case)
+    setRowIds(schema);
+  }
+}
+FormLayoutUpdater.$inject = ['eventBus', 'formLayouter', 'modeling', 'formEditor'];
+
+class AddFormFieldHandler {
   /**
-   * A map of all registered command handlers.
-   *
-   * @type {CommandHandlerMap}
+   * @constructor
+   * @param { import('../../../FormEditor').FormEditor } formEditor
+   * @param { import('../../../core/FormFieldRegistry').FormFieldRegistry } formFieldRegistry
    */
-  this._handlerMap = {};
+  constructor(formEditor, formFieldRegistry) {
+    this._formEditor = formEditor;
+    this._formFieldRegistry = formFieldRegistry;
+  }
+  execute(context) {
+    const {
+      formField,
+      targetFormField,
+      targetIndex
+    } = context;
+    const {
+      schema
+    } = this._formEditor._getState();
+    const targetPath = [...targetFormField._path, 'components'];
+    formField._parent = targetFormField.id;
+
+    // (1) Add new form field
+    arrayAdd$1(get(schema, targetPath), targetIndex, formField);
+
+    // (2) Update internal paths of new form field and its siblings (and their children)
+    get(schema, targetPath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
+
+    // (3) Add new form field to form field registry
+    this._formFieldRegistry.add(formField);
+
+    // TODO: Create updater/change support that automatically updates paths and schema on command execution
+    this._formEditor._setState({
+      schema
+    });
+  }
+  revert(context) {
+    const {
+      formField,
+      targetFormField,
+      targetIndex
+    } = context;
+    const {
+      schema
+    } = this._formEditor._getState();
+    const targetPath = [...targetFormField._path, 'components'];
+
+    // (1) Remove new form field
+    arrayRemove(get(schema, targetPath), targetIndex);
+
+    // (2) Update internal paths of new form field and its siblings (and their children)
+    get(schema, targetPath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
+
+    // (3) Remove new form field from form field registry
+    this._formFieldRegistry.remove(formField);
+
+    // TODO: Create updater/change support that automatically updates paths and schema on command execution
+    this._formEditor._setState({
+      schema
+    });
+  }
+}
+AddFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
+
+class EditFormFieldHandler {
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').FormEditor } formEditor
+   * @param { import('../../../core/FormFieldRegistry').FormFieldRegistry } formFieldRegistry
+   */
+  constructor(formEditor, formFieldRegistry) {
+    this._formEditor = formEditor;
+    this._formFieldRegistry = formFieldRegistry;
+  }
+  execute(context) {
+    const {
+      formField,
+      properties
+    } = context;
+    let {
+      schema
+    } = this._formEditor._getState();
+    const oldProperties = {};
+    for (let key in properties) {
+      oldProperties[key] = formField[key];
+      const property = properties[key];
+      if (key === 'id') {
+        if (property !== formField.id) {
+          this._formFieldRegistry.updateId(formField, property);
+        }
+      } else {
+        formField[key] = property;
+      }
+    }
+    context.oldProperties = oldProperties;
+
+    // TODO: Create updater/change support that automatically updates paths and schema on command execution
+    this._formEditor._setState({
+      schema
+    });
+    return formField;
+  }
+  revert(context) {
+    const {
+      formField,
+      oldProperties
+    } = context;
+    let {
+      schema
+    } = this._formEditor._getState();
+    for (let key in oldProperties) {
+      const property = oldProperties[key];
+      if (key === 'id') {
+        if (property !== formField.id) {
+          this._formFieldRegistry.updateId(formField, property);
+        }
+      } else {
+        formField[key] = property;
+      }
+    }
+
+    // TODO: Create updater/change support that automatically updates paths and schema on command execution
+    this._formEditor._setState({
+      schema
+    });
+    return formField;
+  }
+}
+EditFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
+
+class MoveFormFieldHandler {
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').FormEditor } formEditor
+   * @param { import('../../../core/FormFieldRegistry').FormFieldRegistry } formFieldRegistry
+   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
+   * @param { import('@bpmn-io/form-js-viewer').FormLayouter } formLayouter
+   */
+  constructor(formEditor, formFieldRegistry, pathRegistry, formLayouter) {
+    this._formEditor = formEditor;
+    this._formFieldRegistry = formFieldRegistry;
+    this._pathRegistry = pathRegistry;
+    this._formLayouter = formLayouter;
+  }
+  execute(context) {
+    this.moveFormField(context);
+  }
+  revert(context) {
+    let {
+      sourceFormField,
+      targetFormField,
+      sourceIndex,
+      targetIndex,
+      sourceRow,
+      targetRow
+    } = context;
+    this.moveFormField({
+      sourceFormField: targetFormField,
+      targetFormField: sourceFormField,
+      sourceIndex: targetIndex,
+      targetIndex: sourceIndex,
+      sourceRow: targetRow,
+      targetRow: sourceRow
+    }, true);
+  }
+  moveFormField(context, revert) {
+    let {
+      sourceFormField,
+      targetFormField,
+      sourceIndex,
+      targetIndex,
+      targetRow
+    } = context;
+    let {
+      schema
+    } = this._formEditor._getState();
+    const sourcePath = [...sourceFormField._path, 'components'];
+    if (sourceFormField.id === targetFormField.id) {
+      if (revert) {
+        if (sourceIndex > targetIndex) {
+          sourceIndex--;
+        }
+      } else {
+        if (sourceIndex < targetIndex) {
+          targetIndex--;
+        }
+      }
+      const formField = get(schema, [...sourcePath, sourceIndex]);
+
+      // (1) Add to row or create new one
+      updateRow(formField, targetRow ? targetRow.id : this._formLayouter.nextRowId());
+
+      // (2) Move form field
+      mutate(get(schema, sourcePath), sourceIndex, targetIndex);
+
+      // (3) Update internal paths of new form field and its siblings (and their children)
+      get(schema, sourcePath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
+    } else {
+      const formField = get(schema, [...sourcePath, sourceIndex]);
+
+      // (1) Deregister form field (and children) from path registry
+      this._pathRegistry.executeRecursivelyOnFields(formField, ({
+        field
+      }) => {
+        this._pathRegistry.unclaimPath(this._pathRegistry.getValuePath(field));
+      });
+      formField._parent = targetFormField.id;
+
+      // (2) Remove form field
+      arrayRemove(get(schema, sourcePath), sourceIndex);
+
+      // (3) Update internal paths of siblings (and their children)
+      get(schema, sourcePath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
+      const targetPath = [...targetFormField._path, 'components'];
+
+      // (4) Add to row or create new one
+      updateRow(formField, targetRow ? targetRow.id : this._formLayouter.nextRowId());
 
-  /**
-   * A stack containing all re/undoable actions on the diagram
-   *
-   * @type {CommandStackAction[]}
-   */
-  this._stack = [];
+      // (5) Add form field
+      arrayAdd$1(get(schema, targetPath), targetIndex, formField);
 
-  /**
-   * The current index on the stack
-   *
-   * @type {number}
-   */
-  this._stackIdx = -1;
+      // (6) Update internal paths of siblings (and their children)
+      get(schema, targetPath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
 
-  /**
-   * Current active commandStack execution
-   *
-   * @type {CurrentExecution}
-   */
-  this._currentExecution = {
-    actions: [],
-    dirty: [],
-    trigger: null
-  };
+      // (7) Reregister form field (and children) from path registry
+      this._pathRegistry.executeRecursivelyOnFields(formField, ({
+        field,
+        isClosed,
+        isRepeatable
+      }) => {
+        this._pathRegistry.claimPath(this._pathRegistry.getValuePath(field), {
+          isClosed,
+          isRepeatable,
+          claimerId: field.id
+        });
+      });
+    }
 
-  /**
-   * @type {Injector}
-   */
-  this._injector = injector;
+    // TODO: Create updater/change support that automatically updates paths and schema on command execution
+    this._formEditor._setState({
+      schema
+    });
+  }
+}
+MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry', 'pathRegistry', 'formLayouter'];
 
+class RemoveFormFieldHandler {
   /**
-   * @type EventBus
+   * @constructor
+   * @param { import('../../../FormEditor').FormEditor } formEditor
+   * @param { import('../../../core/FormFieldRegistry').FormFieldRegistry } formFieldRegistry
    */
-  this._eventBus = eventBus;
+  constructor(formEditor, formFieldRegistry) {
+    this._formEditor = formEditor;
+    this._formFieldRegistry = formFieldRegistry;
+  }
+  execute(context) {
+    const {
+      sourceFormField,
+      sourceIndex
+    } = context;
+    let {
+      schema
+    } = this._formEditor._getState();
+    const sourcePath = [...sourceFormField._path, 'components'];
+    const formField = context.formField = get(schema, [...sourcePath, sourceIndex]);
 
-  /**
-   * @type { number }
-   */
-  this._uid = 1;
-  eventBus.on(['diagram.destroy', 'diagram.clear'], function () {
-    this.clear(false);
-  }, this);
-}
-CommandStack.$inject = ['eventBus', 'injector'];
+    // (1) Remove form field
+    arrayRemove(get(schema, sourcePath), sourceIndex);
 
-/**
- * Execute a command.
- *
- * @param {string} command The command to execute.
- * @param {CommandContext} context The context with which to execute the command.
- */
-CommandStack.prototype.execute = function (command, context) {
-  if (!command) {
-    throw new Error('command required');
+    // (2) Update internal paths of its siblings (and their children)
+    get(schema, sourcePath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
+
+    // (3) Remove form field and children from form field registry
+    runRecursively(formField, formField => this._formFieldRegistry.remove(formField));
+
+    // TODO: Create updater/change support that automatically updates paths and schema on command execution
+    this._formEditor._setState({
+      schema
+    });
   }
-  this._currentExecution.trigger = 'execute';
-  const action = {
-    command: command,
-    context: context
-  };
-  this._pushAction(action);
-  this._internalExecute(action);
-  this._popAction();
-};
+  revert(context) {
+    const {
+      formField,
+      sourceFormField,
+      sourceIndex
+    } = context;
+    let {
+      schema
+    } = this._formEditor._getState();
+    const sourcePath = [...sourceFormField._path, 'components'];
 
-/**
- * Check whether a command can be executed.
- *
- * Implementors may hook into the mechanism on two ways:
- *
- *   * in event listeners:
- *
- *     Users may prevent the execution via an event listener.
- *     It must prevent the default action for `commandStack.(<command>.)canExecute` events.
- *
- *   * in command handlers:
- *
- *     If the method {@link CommandHandler#canExecute} is implemented in a handler
- *     it will be called to figure out whether the execution is allowed.
- *
- * @param {string} command The command to execute.
- * @param {CommandContext} context The context with which to execute the command.
- *
- * @return {boolean} Whether the command can be executed with the given context.
- */
-CommandStack.prototype.canExecute = function (command, context) {
-  const action = {
-    command: command,
-    context: context
-  };
-  const handler = this._getHandler(command);
-  let result = this._fire(command, 'canExecute', action);
+    // (1) Add form field
+    arrayAdd$1(get(schema, sourcePath), sourceIndex, formField);
 
-  // handler#canExecute will only be called if no listener
-  // decided on a result already
-  if (result === undefined) {
-    if (!handler) {
-      return false;
+    // (2) Update internal paths of its siblings (and their children)
+    get(schema, sourcePath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
+
+    // (3) Add form field and children to form field registry
+    runRecursively(formField, formField => this._formFieldRegistry.add(formField));
+
+    // TODO: Create updater/change support that automatically updates paths and schema on command execution
+    this._formEditor._setState({
+      schema
+    });
+  }
+}
+RemoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
+
+class UpdateIdClaimHandler {
+  /**
+   * @constructor
+   * @param { import('../../../core/FormFieldRegistry').FormFieldRegistry } formFieldRegistry
+   */
+  constructor(formFieldRegistry) {
+    this._formFieldRegistry = formFieldRegistry;
+  }
+  execute(context) {
+    const {
+      claiming,
+      formField,
+      id
+    } = context;
+    if (claiming) {
+      this._formFieldRegistry._ids.claim(id, formField);
+    } else {
+      this._formFieldRegistry._ids.unclaim(id);
     }
-    if (handler.canExecute) {
-      result = handler.canExecute(context);
+  }
+  revert(context) {
+    const {
+      claiming,
+      formField,
+      id
+    } = context;
+    if (claiming) {
+      this._formFieldRegistry._ids.unclaim(id);
+    } else {
+      this._formFieldRegistry._ids.claim(id, formField);
     }
   }
-  return result;
-};
+}
+UpdateIdClaimHandler.$inject = ['formFieldRegistry'];
 
-/**
- * Clear the command stack, erasing all undo / redo history.
- *
- * @param {boolean} [emit=true] Whether to fire an event. Defaults to `true`.
- */
-CommandStack.prototype.clear = function (emit) {
-  this._stack.length = 0;
-  this._stackIdx = -1;
-  if (emit !== false) {
-    this._fire('changed', {
-      trigger: 'clear'
-    });
+class UpdateKeyClaimHandler {
+  /**
+   * @constructor
+   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
+   */
+  constructor(pathRegistry) {
+    this._pathRegistry = pathRegistry;
   }
-};
-
-/**
- * Undo last command(s)
- */
-CommandStack.prototype.undo = function () {
-  let action = this._getUndoAction(),
-    next;
-  if (action) {
-    this._currentExecution.trigger = 'undo';
-    this._pushAction(action);
-    while (action) {
-      this._internalUndo(action);
-      next = this._getUndoAction();
-      if (!next || next.id !== action.id) {
-        break;
+  execute(context) {
+    const {
+      claiming,
+      formField,
+      key
+    } = context;
+    const options = {
+      replacements: {
+        [formField.id]: key
       }
-      action = next;
+    };
+    const valuePath = this._pathRegistry.getValuePath(formField, options);
+    if (claiming) {
+      this._pathRegistry.claimPath(valuePath, {
+        isClosed: true,
+        claimerId: formField.id
+      });
+    } else {
+      this._pathRegistry.unclaimPath(valuePath);
+    }
+
+    // cache path for revert
+    context.valuePath = valuePath;
+  }
+  revert(context) {
+    const {
+      claiming,
+      formField,
+      valuePath
+    } = context;
+    if (claiming) {
+      this._pathRegistry.unclaimPath(valuePath);
+    } else {
+      this._pathRegistry.claimPath(valuePath, {
+        isClosed: true,
+        claimerId: formField.id
+      });
     }
-    this._popAction();
   }
-};
+}
+UpdateKeyClaimHandler.$inject = ['pathRegistry'];
 
-/**
- * Redo last command(s)
- */
-CommandStack.prototype.redo = function () {
-  let action = this._getRedoAction(),
-    next;
-  if (action) {
-    this._currentExecution.trigger = 'redo';
-    this._pushAction(action);
-    while (action) {
-      this._internalExecute(action, true);
-      next = this._getRedoAction();
-      if (!next || next.id !== action.id) {
-        break;
+class UpdatePathClaimHandler {
+  /**
+   * @constructor
+   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
+   */
+  constructor(pathRegistry) {
+    this._pathRegistry = pathRegistry;
+  }
+  execute(context) {
+    const {
+      claiming,
+      formField,
+      path
+    } = context;
+    const options = {
+      replacements: {
+        [formField.id]: path
       }
-      action = next;
+    };
+    const valuePaths = [];
+    if (claiming) {
+      this._pathRegistry.executeRecursivelyOnFields(formField, ({
+        field,
+        isClosed,
+        isRepeatable
+      }) => {
+        const valuePath = this._pathRegistry.getValuePath(field, options);
+        valuePaths.push({
+          valuePath,
+          isClosed,
+          isRepeatable,
+          claimerId: field.id
+        });
+        this._pathRegistry.claimPath(valuePath, {
+          isClosed,
+          isRepeatable,
+          claimerId: field.id
+        });
+      });
+    } else {
+      this._pathRegistry.executeRecursivelyOnFields(formField, ({
+        field,
+        isClosed,
+        isRepeatable
+      }) => {
+        const valuePath = this._pathRegistry.getValuePath(field, options);
+        valuePaths.push({
+          valuePath,
+          isClosed,
+          isRepeatable,
+          claimerId: field.id
+        });
+        this._pathRegistry.unclaimPath(valuePath);
+      });
     }
-    this._popAction();
-  }
-};
-
-/**
- * Register a handler instance with the command stack.
- *
- * @param {string} command Command to be executed.
- * @param {CommandHandler} handler Handler to execute the command.
- */
-CommandStack.prototype.register = function (command, handler) {
-  this._setHandler(command, handler);
-};
 
-/**
- * Register a handler type with the command stack  by instantiating it and
- * injecting its dependencies.
- *
- * @param {string} command Command to be executed.
- * @param {CommandHandlerConstructor} handlerCls Constructor to instantiate a {@link CommandHandler}.
- */
-CommandStack.prototype.registerHandler = function (command, handlerCls) {
-  if (!command || !handlerCls) {
-    throw new Error('command and handlerCls must be defined');
+    // cache path info for revert
+    context.valuePaths = valuePaths;
   }
-  const handler = this._injector.instantiate(handlerCls);
-  this.register(command, handler);
-};
-
-/**
- * @return {boolean}
- */
-CommandStack.prototype.canUndo = function () {
-  return !!this._getUndoAction();
-};
-
-/**
- * @return {boolean}
- */
-CommandStack.prototype.canRedo = function () {
-  return !!this._getRedoAction();
-};
-
-// stack access  //////////////////////
-
-CommandStack.prototype._getRedoAction = function () {
-  return this._stack[this._stackIdx + 1];
-};
-CommandStack.prototype._getUndoAction = function () {
-  return this._stack[this._stackIdx];
-};
-
-// internal functionality //////////////////////
-
-CommandStack.prototype._internalUndo = function (action) {
-  const command = action.command,
-    context = action.context;
-  const handler = this._getHandler(command);
-
-  // guard against illegal nested command stack invocations
-  this._atomicDo(() => {
-    this._fire(command, 'revert', action);
-    if (handler.revert) {
-      this._markDirty(handler.revert(context));
+  revert(context) {
+    const {
+      claiming,
+      valuePaths
+    } = context;
+    if (claiming) {
+      valuePaths.forEach(({
+        valuePath
+      }) => {
+        this._pathRegistry.unclaimPath(valuePath);
+      });
+    } else {
+      valuePaths.forEach(({
+        valuePath,
+        isClosed,
+        isRepeatable,
+        claimerId
+      }) => {
+        this._pathRegistry.claimPath(valuePath, {
+          isClosed,
+          isRepeatable,
+          claimerId
+        });
+      });
     }
-    this._revertedAction(action);
-    this._fire(command, 'reverted', action);
-  });
-};
-CommandStack.prototype._fire = function (command, qualifier, event) {
-  if (arguments.length < 3) {
-    event = qualifier;
-    qualifier = null;
   }
-  const names = qualifier ? [command + '.' + qualifier, qualifier] : [command];
-  let result;
-  event = this._eventBus.createEvent(event);
-  for (const name of names) {
-    result = this._eventBus.fire('commandStack.' + name, event);
-    if (event.cancelBubble) {
-      break;
-    }
+}
+UpdatePathClaimHandler.$inject = ['pathRegistry'];
+
+class Modeling {
+  constructor(commandStack, eventBus, formEditor, formFieldRegistry, fieldFactory) {
+    this._commandStack = commandStack;
+    this._formEditor = formEditor;
+    this._formFieldRegistry = formFieldRegistry;
+    this._fieldFactory = fieldFactory;
+    eventBus.on('form.init', () => {
+      this.registerHandlers();
+    });
   }
-  return result;
-};
-CommandStack.prototype._createId = function () {
-  return this._uid++;
-};
-CommandStack.prototype._atomicDo = function (fn) {
-  const execution = this._currentExecution;
-  execution.atomic = true;
-  try {
-    fn();
-  } finally {
-    execution.atomic = false;
+  registerHandlers() {
+    Object.entries(this.getHandlers()).forEach(([id, handler]) => {
+      this._commandStack.registerHandler(id, handler);
+    });
   }
-};
-CommandStack.prototype._internalExecute = function (action, redo) {
-  const command = action.command,
-    context = action.context;
-  const handler = this._getHandler(command);
-  if (!handler) {
-    throw new Error('no command handler registered for <' + command + '>');
+  getHandlers() {
+    return {
+      'formField.add': AddFormFieldHandler,
+      'formField.edit': EditFormFieldHandler,
+      'formField.move': MoveFormFieldHandler,
+      'formField.remove': RemoveFormFieldHandler,
+      'id.updateClaim': UpdateIdClaimHandler,
+      'key.updateClaim': UpdateKeyClaimHandler,
+      'path.updateClaim': UpdatePathClaimHandler
+    };
   }
-  this._pushAction(action);
-  if (!redo) {
-    this._fire(command, 'preExecute', action);
-    if (handler.preExecute) {
-      handler.preExecute(context);
+  addFormField(attrs, targetFormField, targetIndex) {
+    const formField = this._fieldFactory.create(attrs);
+    const context = {
+      formField,
+      targetFormField,
+      targetIndex
+    };
+    this._commandStack.execute('formField.add', context);
+    return formField;
+  }
+  editFormField(formField, properties, value) {
+    if (!isObject(properties)) {
+      properties = {
+        [properties]: value
+      };
     }
-    this._fire(command, 'preExecuted', action);
+    const context = {
+      formField,
+      properties
+    };
+    this._commandStack.execute('formField.edit', context);
   }
-
-  // guard against illegal nested command stack invocations
-  this._atomicDo(() => {
-    this._fire(command, 'execute', action);
-    if (handler.execute) {
-      // actual execute + mark return results as dirty
-      this._markDirty(handler.execute(context));
-    }
-
-    // log to stack
-    this._executedAction(action, redo);
-    this._fire(command, 'executed', action);
-  });
-  if (!redo) {
-    this._fire(command, 'postExecute', action);
-    if (handler.postExecute) {
-      handler.postExecute(context);
-    }
-    this._fire(command, 'postExecuted', action);
+  moveFormField(formField, sourceFormField, targetFormField, sourceIndex, targetIndex, sourceRow, targetRow) {
+    const context = {
+      formField,
+      sourceFormField,
+      targetFormField,
+      sourceIndex,
+      targetIndex,
+      sourceRow,
+      targetRow
+    };
+    this._commandStack.execute('formField.move', context);
   }
-  this._popAction();
-};
-CommandStack.prototype._pushAction = function (action) {
-  const execution = this._currentExecution,
-    actions = execution.actions;
-  const baseAction = actions[0];
-  if (execution.atomic) {
-    throw new Error('illegal invocation in <execute> or <revert> phase (action: ' + action.command + ')');
+  removeFormField(formField, sourceFormField, sourceIndex) {
+    const context = {
+      formField,
+      sourceFormField,
+      sourceIndex
+    };
+    this._commandStack.execute('formField.remove', context);
   }
-  if (!action.id) {
-    action.id = baseAction && baseAction.id || this._createId();
+  claimId(formField, id) {
+    const context = {
+      formField,
+      id,
+      claiming: true
+    };
+    this._commandStack.execute('id.updateClaim', context);
   }
-  actions.push(action);
-};
-CommandStack.prototype._popAction = function () {
-  const execution = this._currentExecution,
-    trigger = execution.trigger,
-    actions = execution.actions,
-    dirty = execution.dirty;
-  actions.pop();
-  if (!actions.length) {
-    this._eventBus.fire('elements.changed', {
-      elements: uniqueBy('id', dirty.reverse())
-    });
-    dirty.length = 0;
-    this._fire('changed', {
-      trigger: trigger
-    });
-    execution.trigger = null;
+  unclaimId(formField, id) {
+    const context = {
+      formField,
+      id,
+      claiming: false
+    };
+    this._commandStack.execute('id.updateClaim', context);
   }
-};
-CommandStack.prototype._markDirty = function (elements) {
-  const execution = this._currentExecution;
-  if (!elements) {
-    return;
+  claimKey(formField, key) {
+    const context = {
+      formField,
+      key,
+      claiming: true
+    };
+    this._commandStack.execute('key.updateClaim', context);
   }
-  elements = isArray(elements) ? elements : [elements];
-  execution.dirty = execution.dirty.concat(elements);
-};
-CommandStack.prototype._executedAction = function (action, redo) {
-  const stackIdx = ++this._stackIdx;
-  if (!redo) {
-    this._stack.splice(stackIdx, this._stack.length, action);
+  unclaimKey(formField, key) {
+    const context = {
+      formField,
+      key,
+      claiming: false
+    };
+    this._commandStack.execute('key.updateClaim', context);
   }
-};
-CommandStack.prototype._revertedAction = function (action) {
-  this._stackIdx--;
-};
-CommandStack.prototype._getHandler = function (command) {
-  return this._handlerMap[command];
-};
-CommandStack.prototype._setHandler = function (command, handler) {
-  if (!command || !handler) {
-    throw new Error('command and handler required');
+  claimPath(formField, path) {
+    const context = {
+      formField,
+      path,
+      claiming: true
+    };
+    this._commandStack.execute('path.updateClaim', context);
   }
-  if (this._handlerMap[command]) {
-    throw new Error('overriding handler for command <' + command + '>');
+  unclaimPath(formField, path) {
+    const context = {
+      formField,
+      path,
+      claiming: false
+    };
+    this._commandStack.execute('path.updateClaim', context);
   }
-  this._handlerMap[command] = handler;
-};
-
-/**
- * @type { import('didi').ModuleDeclaration }
- */
-var commandModule = {
-  commandStack: ['type', CommandStack]
-};
+}
+Modeling.$inject = ['commandStack', 'eventBus', 'formEditor', 'formFieldRegistry', 'fieldFactory'];
 
-var ModelingModule = {
-  __depends__: [behaviorModule, commandModule],
+const ModelingModule = {
+  __depends__: [BehaviorModule, commandModule],
   __init__: ['formLayoutUpdater', 'modeling'],
   formLayoutUpdater: ['type', FormLayoutUpdater],
   modeling: ['type', Modeling]
@@ -4992,7 +5077,7 @@ class SelectionBehavior {
 }
 SelectionBehavior.$inject = ['eventBus', 'selection'];
 
-var SelectionModule = {
+const SelectionModule = {
   __init__: ['selection', 'selectionBehavior'],
   selection: ['type', Selection],
   selectionBehavior: ['type', SelectionBehavior]
@@ -5063,15 +5148,15 @@ class SectionModuleBase {
   }
 }
 
-let PaletteModule$1 = class PaletteModule extends SectionModuleBase {
+class PaletteRenderer extends SectionModuleBase {
   constructor(eventBus) {
     super(eventBus, 'palette');
   }
-};
-PaletteModule$1.$inject = ['eventBus'];
+}
+PaletteRenderer.$inject = ['eventBus'];
 
-var PaletteModule = {
-  palette: ['type', PaletteModule$1]
+const PaletteModule = {
+  palette: ['type', PaletteRenderer]
 };
 
 var ArrowIcon = function ArrowIcon(props) {
@@ -5198,6 +5283,24 @@ HelpIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 32 32"
 };
+var PopupIcon = function PopupIcon(props) {
+  return jsxs("svg", {
+    ...props,
+    children: [jsx("path", {
+      fill: "currentColor",
+      d: "M28 4H10a2.006 2.006 0 0 0-2 2v14a2.006 2.006 0 0 0 2 2h18a2.006 2.006 0 0 0 2-2V6a2.006 2.006 0 0 0-2-2Zm0 16H10V6h18Z"
+    }), jsx("path", {
+      fill: "currentColor",
+      d: "M18 26H4V16h2v-2H4a2.006 2.006 0 0 0-2 2v10a2.006 2.006 0 0 0 2 2h14a2.006 2.006 0 0 0 2-2v-2h-2Z"
+    })]
+  });
+};
+PopupIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 32 32"
+};
 function Header(props) {
   const {
     element,
@@ -5268,6 +5371,7 @@ const ErrorsContext = createContext({
  *
  * @returns void
  */
+
 const EventContext = createContext({
   eventBus: null
 });
@@ -5323,7 +5427,9 @@ function Tooltip(props) {
   const {
     forId,
     value,
-    parent
+    parent,
+    direction = 'right',
+    position
   } = props;
   const [visible, setShow] = useState(false);
   const [focusedViaKeyboard, setFocusedViaKeyboard] = useState(false);
@@ -5392,11 +5498,11 @@ function Tooltip(props) {
   }, [wrapperRef.current, visible, focusedViaKeyboard]);
   const renderTooltip = () => {
     return jsxs("div", {
-      class: "bio-properties-panel-tooltip",
+      class: `bio-properties-panel-tooltip ${direction}`,
       role: "tooltip",
       id: "bio-properties-panel-tooltip",
       "aria-labelledby": forId,
-      style: getTooltipPosition(wrapperRef.current),
+      style: position || getTooltipPosition(wrapperRef.current),
       ref: tooltipRef,
       onClick: e => e.stopPropagation(),
       children: [jsx("div", {
@@ -6010,7 +6116,7 @@ const CodeEditor = forwardRef((props, ref) => {
       tooltipContainer: tooltipContainer,
       value: localValue,
       variables: variables,
-      extensions: [...(enableGutters ? [lineNumbers()] : [])]
+      extensions: [...(enableGutters ? [lineNumbers()] : []), EditorView.lineWrapping]
     });
     setEditor(editor);
     return () => {
@@ -6053,7 +6159,7 @@ const CodeEditor = forwardRef((props, ref) => {
       title: "Open pop-up editor",
       class: "bio-properties-panel-open-feel-popup",
       onClick: () => onPopupOpen(),
-      children: jsx(ExternalLinkIcon, {})
+      children: jsx(PopupIcon, {})
     })]
   });
 });
@@ -6264,6 +6370,7 @@ function PopupComponent(props, globalRef) {
     }
     return () => focusTrapRef.current && focusTrapRef.current.deactivate();
   }, [popupRef]);
+  useEvent('propertiesPanel.detach', onClose);
   return createPortal(jsx("div", {
     "aria-label": title,
     tabIndex: -1,
@@ -6442,7 +6549,13 @@ function FEELPopupRoot(props) {
     setSourceElement(_sourceElement);
     emit('open');
   };
-  const handleClose = () => {
+  const handleClose = (event = {}) => {
+    const {
+      id
+    } = event;
+    if (id && id !== source) {
+      return;
+    }
     setOpen(false);
     setSource(null);
   };
@@ -6612,7 +6725,7 @@ function FeelPopupComponent(props) {
     }), jsx(Popup.Footer, {
       children: jsx("button", {
         type: "button",
-        onClick: onClose,
+        onClick: () => onClose(),
         title: "Close pop-up editor",
         class: "bio-properties-panel-feel-popup__close-btn",
         children: "Close"
@@ -6788,18 +6901,14 @@ function NumberField(props) {
   } = props;
   const [localValue, setLocalValue] = useState(value);
   const handleInputCallback = useMemo(() => {
-    return debounce(event => {
-      const {
-        validity,
-        value
-      } = event.target;
-      if (validity.valid) {
-        onInput(value ? parseFloat(value) : undefined);
+    return debounce(target => {
+      if (target.validity.valid) {
+        onInput(target.value ? parseFloat(target.value) : undefined);
       }
     });
   }, [onInput, debounce]);
   const handleInput = e => {
-    handleInputCallback(e);
+    handleInputCallback(e.target);
     setLocalValue(e.target.value);
   };
   useEffect(() => {
@@ -6876,7 +6985,7 @@ function NumberFieldEntry(props) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onInput = newValue => {
     let newValidationError = null;
     if (isFunction(validate)) {
@@ -6921,7 +7030,7 @@ function prefixId$6(id) {
   return `bio-properties-panel-${id}`;
 }
 const noop$2 = () => {};
-function FeelTextfield(props) {
+function FeelTextfieldComponent(props) {
   const {
     debounce,
     id,
@@ -6998,9 +7107,7 @@ function FeelTextfield(props) {
       onError(undefined);
       return;
     }
-    const error = lint[0];
-    const message = `${error.source}: ${error.message}`;
-    onError(message);
+    onError('Unparsable FEEL expression.');
   });
   const handlePopupOpen = (type = 'feel') => {
     const popupOptions = {
@@ -7123,6 +7230,7 @@ function FeelTextfield(props) {
     })]
   });
 }
+const FeelTextfield = withAutoClosePopup(FeelTextfieldComponent);
 const OptionalFeelInput = forwardRef((props, ref) => {
   const {
     id,
@@ -7375,7 +7483,7 @@ function FeelEntry(props) {
       const newValidationError = validate(value) || null;
       setValidationError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onInput = useStaticCallback(newValue => {
     let newValidationError = null;
     if (isFunction(validate)) {
@@ -7547,6 +7655,27 @@ function getPopupTitle(element, label) {
   }
   return `${popupTitle}${label}`;
 }
+function withAutoClosePopup(Component) {
+  return function (props) {
+    const {
+      id
+    } = props;
+    const {
+      close
+    } = useContext(FeelPopupContext);
+    const closePopup = useStaticCallback(close);
+    useEffect(() => {
+      return () => {
+        closePopup({
+          id
+        });
+      };
+    }, []);
+    return jsx(Component, {
+      ...props
+    });
+  };
+}
 const DEFAULT_LAYOUT = {};
 const DEFAULT_DESCRIPTION = {};
 const DEFAULT_TOOLTIP = {};
@@ -7631,7 +7760,7 @@ const DEFAULT_TOOLTIP = {};
  * @param {HTMLElement} [props.feelPopupContainer]
  * @param {Object} [props.eventBus]
  */
-function PropertiesPanel(props) {
+function PropertiesPanel$1(props) {
   const {
     element,
     headerProvider,
@@ -8350,7 +8479,7 @@ function SelectEntry(props) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onChange = newValue => {
     let newValidationError = null;
     if (isFunction(validate)) {
@@ -8418,12 +8547,10 @@ function TextArea(props) {
   const [localValue, setLocalValue] = useState(value);
   const ref = useShowEntryEvent(id);
   const handleInputCallback = useMemo(() => {
-    return debounce(({
-      target
-    }) => onInput(target.value.length ? target.value : undefined));
+    return debounce(target => onInput(target.value.length ? target.value : undefined));
   }, [onInput, debounce]);
   const handleInput = e => {
-    handleInputCallback(e);
+    handleInputCallback(e.target);
     autoResize && resizeToContents(e.target);
     setLocalValue(e.target.value);
   };
@@ -8506,7 +8633,7 @@ function TextAreaEntry(props) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onInput = newValue => {
     let newValidationError = null;
     if (isFunction(validate)) {
@@ -8567,12 +8694,10 @@ function Textfield(props) {
   const [localValue, setLocalValue] = useState(value || '');
   const ref = useShowEntryEvent(id);
   const handleInputCallback = useMemo(() => {
-    return debounce(({
-      target
-    }) => onInput(target.value.length ? target.value : undefined));
+    return debounce(target => onInput(target.value.length ? target.value : undefined));
   }, [onInput, debounce]);
   const handleInput = e => {
-    handleInputCallback(e);
+    handleInputCallback(e.target);
     setLocalValue(e.target.value);
   };
   useEffect(() => {
@@ -8647,7 +8772,7 @@ function TextfieldEntry(props) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onInput = newValue => {
     let newValidationError = null;
     if (isFunction(validate)) {
@@ -8737,10 +8862,9 @@ var index = {
  * @returns {any}
  */
 function getService(type, strict) {}
-const PropertiesPanelContext = createContext({
+const FormPropertiesPanelContext = createContext({
   getService
 });
-var FormPropertiesPanelContext = PropertiesPanelContext;
 
 function arrayAdd(array, index, item) {
   const copy = [...array];
@@ -8752,6 +8876,12 @@ function countDecimals(number) {
   if (num.toString() === num.toFixed(0)) return 0;
   return num.toFixed().split('.')[1].length || 0;
 }
+
+/**
+ *
+ * @param {unknown} value
+ * @returns {boolean}
+ */
 function isValidNumber(value) {
   return (typeof value === 'number' || typeof value === 'string') && value !== '' && !isNaN(Number(value));
 }
@@ -8774,6 +8904,7 @@ function textToLabel(text) {
 function isValidDotPath(path) {
   return /^\w+(\.\w+)*$/.test(path);
 }
+const LABELED_NON_INPUTS = ['button', 'group', 'dynamiclist', 'iframe', 'table'];
 const INPUTS = ['checkbox', 'checklist', 'datetime', 'number', 'radio', 'select', 'taglist', 'textfield', 'textarea'];
 const OPTIONS_INPUTS = ['checklist', 'radio', 'select', 'taglist'];
 function hasEntryConfigured(formFieldDefinition, entryId) {
@@ -8802,7 +8933,7 @@ function hasIntegerPathSegment(path) {
   return path.split('.').some(segment => /^\d+$/.test(segment));
 }
 
-function useService (type, strict) {
+function useService(type, strict) {
   const {
     getService
   } = useContext(FormPropertiesPanelContext);
@@ -8820,12 +8951,13 @@ function useVariables() {
   return getSchemaVariables(schema);
 }
 
+const headerlessTypes = ['spacer', 'separator', 'html'];
 const PropertiesPanelHeaderProvider = {
   getElementLabel: field => {
     const {
       type
     } = field;
-    if (type === 'spacer') {
+    if (headerlessTypes.includes(type)) {
       return '';
     }
     if (type === 'text') {
@@ -8894,7 +9026,7 @@ const PropertiesPanelPlaceholderProvider = {
   }
 };
 
-function FormPropertiesPanel(props) {
+function PropertiesPanel(props) {
   const {
     eventBus,
     getProviders,
@@ -8964,7 +9096,7 @@ function FormPropertiesPanel(props) {
     onBlurCapture: onBlur,
     children: jsx(FormPropertiesPanelContext.Provider, {
       value: propertiesPanelContext,
-      children: jsx(PropertiesPanel, {
+      children: jsx(PropertiesPanel$1, {
         element: selectedFormField,
         eventBus: eventBus,
         groups: groups,
@@ -8980,7 +9112,7 @@ const DEFAULT_PRIORITY = 1000;
 
 /**
  * @typedef { { parent: Element } } PropertiesPanelConfig
- * @typedef { import('../../core/EventBus').default } EventBus
+ * @typedef { import('../../core/EventBus').EventBus } EventBus
  * @typedef { import('../../types').Injector } Injector
  * @typedef { { getGroups: ({ formField, editFormField }) => ({ groups}) => Array } } PropertiesProvider
  */
@@ -9040,7 +9172,7 @@ class PropertiesPanelRenderer {
     }
   }
   _render() {
-    render(jsx(FormPropertiesPanel, {
+    render(jsx(PropertiesPanel, {
       getProviders: this._getProviders.bind(this),
       eventBus: this._eventBus,
       injector: this._injector
@@ -9200,9 +9332,9 @@ function Columns(props) {
   } = props;
   const debounce = useService('debounce');
   const formLayoutValidator = useService('formLayoutValidator');
-  const validate = value => {
+  const validate = useCallback(value => {
     return formLayoutValidator.validateField(field, value ? parseInt(value) : null);
-  };
+  }, [field, formLayoutValidator]);
   const setValue = (value, error) => {
     if (error) {
       return;
@@ -9295,7 +9427,7 @@ function Description(props) {
 }
 
 const EMPTY_OPTION = null;
-function DefaultOptionEntry(props) {
+function DefaultValueEntry(props) {
   const {
     editField,
     field
@@ -9313,26 +9445,26 @@ function DefaultOptionEntry(props) {
       return matchers(field);
     };
   }
-  const defaultOptions = {
+  const defaulValueBase = {
     editField,
     field,
     id: 'defaultValue',
     label: 'Default value'
   };
   entries.push({
-    ...defaultOptions,
+    ...defaulValueBase,
     component: DefaultValueCheckbox,
     isEdited: isEdited$3,
     isDefaultVisible: isDefaultVisible(field => field.type === 'checkbox')
   });
   entries.push({
-    ...defaultOptions,
+    ...defaulValueBase,
     component: DefaultValueNumber,
     isEdited: isEdited,
     isDefaultVisible: isDefaultVisible(field => field.type === 'number')
   });
   entries.push({
-    ...defaultOptions,
+    ...defaulValueBase,
     component: DefaultValueSingleSelect,
     isEdited: isEdited$3,
     isDefaultVisible: isDefaultVisible(field => field.type === 'radio' || field.type === 'select')
@@ -9341,13 +9473,13 @@ function DefaultOptionEntry(props) {
   // todo(Skaiir): implement a multiselect equivalent (cf. https://github.com/bpmn-io/form-js/issues/265)
 
   entries.push({
-    ...defaultOptions,
+    ...defaulValueBase,
     component: DefaultValueTextfield,
     isEdited: isEdited,
     isDefaultVisible: isDefaultVisible(field => field.type === 'textfield')
   });
   entries.push({
-    ...defaultOptions,
+    ...defaulValueBase,
     component: DefaultValueTextarea,
     isEdited: isEdited$1,
     isDefaultVisible: isDefaultVisible(field => field.type === 'textarea')
@@ -9420,6 +9552,17 @@ function DefaultValueNumber(props) {
     return editField(field, path, newValue);
   };
   const decimalDigitsSet = decimalDigits || decimalDigits === 0;
+  const validate = useCallback(value => {
+    if (value === undefined || value === null) {
+      return;
+    }
+    if (!isValidNumber(value)) {
+      return 'Should be a valid number';
+    }
+    if (decimalDigitsSet && countDecimals(value) > decimalDigits) {
+      return `Should not contain more than ${decimalDigits} decimal digits`;
+    }
+  }, [decimalDigitsSet, decimalDigits]);
   return TextfieldEntry({
     debounce,
     label,
@@ -9427,11 +9570,7 @@ function DefaultValueNumber(props) {
     getValue,
     id,
     setValue,
-    validate: value => {
-      if (value === undefined || value === null) return;
-      if (!isValidNumber(value)) return 'Should be a valid number';
-      if (decimalDigitsSet && countDecimals(value) > decimalDigits) return `Should not contain more than ${decimalDigits} decimal digits`;
-    }
+    validate
   });
 }
 function DefaultValueSingleSelect(props) {
@@ -9605,8 +9744,8 @@ function Id(props) {
     }
     return editField(field, path, value);
   };
-  const validate = value => {
-    if (isUndefined(value) || !value.length) {
+  const validate = useCallback(value => {
+    if (typeof value !== 'string' || value.length === 0) {
       return 'Must not be empty.';
     }
     const assigned = formFieldRegistry._ids.assigned(value);
@@ -9614,7 +9753,7 @@ function Id(props) {
       return 'Must be unique.';
     }
     return validateId(value) || null;
-  };
+  }, [formFieldRegistry, field]);
   return TextfieldEntry({
     debounce,
     element: field,
@@ -9691,7 +9830,7 @@ function Key$2(props) {
     }
     return editField(field, path, value);
   };
-  const validate = value => {
+  const validate = useCallback(value => {
     if (value === field.key) {
       return null;
     }
@@ -9723,7 +9862,7 @@ function Key$2(props) {
       claimerId: field.id
     });
     return canClaim ? null : 'Must not conflict with other key/path assignments.';
-  };
+  }, [field, pathRegistry]);
   return TextfieldEntry({
     debounce,
     description: 'Binds to a form variable',
@@ -9779,7 +9918,7 @@ function Path(props) {
     }
     return editField(field, path, value);
   };
-  const validate = value => {
+  const validate = useCallback(value => {
     if (!value && isRepeating) {
       return 'Must not be empty';
     }
@@ -9825,7 +9964,7 @@ function Path(props) {
 
     // If all checks pass
     return null;
-  };
+  }, [field, isRepeating, pathRegistry]);
   const tooltip = isRepeating ? 'Routes the children of this component into a form variable, may be left empty to route at the root level.' : 'Routes the children of this component into a form variable.';
   return TextfieldEntry({
     debounce,
@@ -9943,8 +10082,7 @@ function simpleRangeIntegerEntryFactory(options) {
     path,
     props,
     min,
-    max,
-    defaultValue
+    max
   } = options;
   const {
     editField,
@@ -9958,9 +10096,8 @@ function simpleRangeIntegerEntryFactory(options) {
     editField,
     min,
     max,
-    defaultValue,
     component: SimpleRangeIntegerEntry,
-    isEdited: isEdited$7
+    isEdited: isEdited
   };
 }
 const SimpleRangeIntegerEntry = props => {
@@ -9970,28 +10107,43 @@ const SimpleRangeIntegerEntry = props => {
     path,
     field,
     editField,
-    min,
-    max,
-    defaultValue
+    min = Number.MIN_SAFE_INTEGER,
+    max = Number.MAX_SAFE_INTEGER
   } = props;
   const debounce = useService('debounce');
   const getValue = () => {
-    const value = get(field, path, defaultValue);
-    return Number.isInteger(value) ? value : defaultValue;
+    const value = get(field, path);
+    const isValid = isValidNumber(value) && Number.isInteger(value);
+    return isValid ? value : null;
   };
-  const setValue = value => {
-    editField(field, path, value);
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, path, Number(value));
   };
-  return NumberFieldEntry({
+  const validate = useCallback(value => {
+    if (value === undefined || value === null || value === '') {
+      return;
+    }
+    if (!Number.isInteger(Number(value))) {
+      return 'Should be an integer.';
+    }
+    if (Big(value).cmp(min) < 0) {
+      return `Should be at least ${min}.`;
+    }
+    if (Big(value).cmp(max) > 0) {
+      return `Should be at most ${max}.`;
+    }
+  }, [min, max]);
+  return TextfieldEntry({
     debounce,
     label,
     element: field,
-    step: 1,
-    min,
-    max,
     getValue,
     id,
-    setValue
+    setValue,
+    validate
   });
 };
 
@@ -10040,13 +10192,16 @@ function LabelEntry(props) {
       return field.type === 'datetime' && (field.subtype === DATETIME_SUBTYPES.TIME || field.subtype === DATETIME_SUBTYPES.DATETIME);
     }
   });
+  const isSimplyLabled = field => {
+    return [...INPUTS.filter(input => input !== 'datetime'), ...LABELED_NON_INPUTS].includes(field.type);
+  };
   entries.push({
     id: 'label',
     component: Label$2,
     editField,
     field,
     isEdited: isEdited$6,
-    isDefaultVisible: field => [...INPUTS, 'button', 'group', 'table', 'iframe', 'dynamiclist'].includes(field.type)
+    isDefaultVisible: isSimplyLabled
   });
   return entries;
 }
@@ -10207,14 +10362,28 @@ function Height(props) {
     id,
     getValue,
     setValue,
-    validate: value => {
-      if (value === undefined || value === null) return;
-      if (value < 1) return 'Should be greater than zero.';
-      if (!Number.isInteger(value)) return 'Should be an integer.';
-    }
+    validate: validate$7
   });
 }
 
+// helpers //////////
+
+/**
+  * @param {number|void} value
+  * @returns {string|null}
+  */
+const validate$7 = value => {
+  if (typeof value !== 'number') {
+    return null;
+  }
+  if (!Number.isInteger(value)) {
+    return 'Should be an integer.';
+  }
+  if (value < 1) {
+    return 'Should be greater than zero.';
+  }
+};
+
 function IFrameHeightEntry(props) {
   return [...HeightEntry({
     ...props,
@@ -10259,14 +10428,6 @@ function Url(props) {
   const setValue = value => {
     return editField(field, path, value);
   };
-  const validate = value => {
-    if (!value) {
-      return;
-    }
-    if (!HTTPS_PATTERN.test(value)) {
-      return 'For security reasons the URL must start with "https".';
-    }
-  };
   return FeelTemplatingEntry({
     debounce,
     element: field,
@@ -10276,15 +10437,15 @@ function Url(props) {
     label: 'URL',
     setValue,
     singleLine: true,
-    tooltip: getTooltip(),
-    validate,
+    tooltip: getTooltip$1(),
+    validate: validate$6,
     variables
   });
 }
 
 // helper //////////////////////
 
-function getTooltip() {
+function getTooltip$1() {
   return jsxs(Fragment$1, {
     children: [jsx("p", {
       children: "Enter a HTTPS URL to a source or populate it dynamically via a template or an expression (e.g., to pass a value from the variable)."
@@ -10300,7 +10461,20 @@ function getTooltip() {
   });
 }
 
-function SourceEntry(props) {
+/**
+  * @param {string|void} value
+  * @returns {string|null}
+  */
+const validate$6 = value => {
+  if (!value || value.startsWith('=')) {
+    return;
+  }
+  if (!HTTPS_PATTERN.test(value)) {
+    return 'For security reasons the URL must start with "https".';
+  }
+};
+
+function ImageSourceEntry(props) {
   const {
     editField,
     field
@@ -10380,16 +10554,9 @@ function Text(props) {
   const setValue = value => {
     return editField(field, path, value || '');
   };
-  const description = useMemo(() => jsxs(Fragment$1, {
-    children: ["Supports markdown and templating. ", jsx("a", {
-      href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-text/",
-      target: "_blank",
-      children: "Learn more"
-    })]
-  }), []);
   return FeelTemplatingEntry({
     debounce,
-    description,
+    description: description$1,
     element: field,
     getValue,
     id,
@@ -10399,6 +10566,85 @@ function Text(props) {
     variables
   });
 }
+const description$1 = jsxs(Fragment$1, {
+  children: ["Supports markdown and templating. ", jsx("a", {
+    href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-text/",
+    target: "_blank",
+    children: "Learn more"
+  })]
+});
+
+function HtmlEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const entries = [{
+    id: 'content',
+    component: Content,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$6,
+    isDefaultVisible: field => field.type === 'html'
+  }];
+  return entries;
+}
+function Content(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = ['content'];
+  const getValue = () => {
+    return get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value || '');
+  };
+  return FeelTemplatingEntry({
+    debounce,
+    description,
+    element: field,
+    getValue,
+    id,
+    label: 'Content',
+    hostLanguage: 'html',
+    validate: validate$5,
+    setValue,
+    variables
+  });
+}
+
+// helpers //////////
+
+const description = jsxs(Fragment$1, {
+  children: ["Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component. ", jsx("a", {
+    href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-html/",
+    target: "_blank",
+    children: "Learn more"
+  })]
+});
+
+/**
+  * @param {string|void} value
+  * @returns {string|null}
+  */
+const validate$5 = value => {
+  // allow empty state
+  if (typeof value !== 'string' || value === '') {
+    return null;
+  }
+
+  // allow expressions
+  if (value.startsWith('=')) {
+    return null;
+  }
+};
 
 function NumberEntries(props) {
   const {
@@ -10447,11 +10693,7 @@ function NumberDecimalDigits(props) {
     getValue,
     id,
     setValue,
-    validate: value => {
-      if (value === undefined || value === null) return;
-      if (value < 0) return 'Should be greater than or equal to zero.';
-      if (!Number.isInteger(value)) return 'Should be an integer.';
-    }
+    validate: validateNumberEntries
   });
 }
 function NumberArrowStep(props) {
@@ -10481,6 +10723,26 @@ function NumberArrowStep(props) {
     editField(field, ['increment'], clearLeadingZeroes(value));
   };
   const decimalDigitsSet = decimalDigits || decimalDigits === 0;
+  const validate = useCallback(value => {
+    if (value === undefined || value === null) {
+      return;
+    }
+    if (!isValidNumber(value)) {
+      return 'Should be a valid number.';
+    }
+    if (Big(value).cmp(0) <= 0) {
+      return 'Should be greater than zero.';
+    }
+    if (decimalDigitsSet) {
+      const minimumValue = Big(`1e-${decimalDigits}`);
+      if (Big(value).cmp(minimumValue) < 0) {
+        return `Should be at least ${minimumValue.toString()}.`;
+      }
+      if (countDecimals(value) > decimalDigits) {
+        return `Should not contain more than ${decimalDigits} decimal digits.`;
+      }
+    }
+  }, [decimalDigitsSet, decimalDigits]);
   return TextfieldEntry({
     debounce,
     label: 'Increment',
@@ -10488,19 +10750,28 @@ function NumberArrowStep(props) {
     getValue,
     id,
     setValue,
-    validate: value => {
-      if (value === undefined || value === null) return;
-      if (!isValidNumber(value)) return 'Should be a valid number.';
-      if (Big(value).cmp(0) <= 0) return 'Should be greater than zero.';
-      if (decimalDigitsSet) {
-        const minimumValue = Big(`1e-${decimalDigits}`);
-        if (Big(value).cmp(minimumValue) < 0) return `Should be at least ${minimumValue.toString()}.`;
-        if (countDecimals(value) > decimalDigits) return `Should not contain more than ${decimalDigits} decimal digits.`;
-      }
-    }
+    validate
   });
 }
 
+// helpers //////////
+
+/**
+ * @param {number|void} value
+ * @returns {string|void}
+ */
+const validateNumberEntries = value => {
+  if (typeof value !== 'number') {
+    return;
+  }
+  if (!Number.isInteger(value)) {
+    return 'Should be an integer.';
+  }
+  if (value < 0) {
+    return 'Should be greater than or equal to zero.';
+  }
+};
+
 function NumberSerializationEntry(props) {
   const {
     editField,
@@ -10825,6 +11096,7 @@ function Label$1(props) {
   const getValue = () => {
     return get(field, ['values', index, 'label']);
   };
+  const validate = useMemo(() => validateFactory(get(field, ['values', index, 'label']), entry => entry.label), [field, index, validateFactory]);
   return TextfieldEntry({
     debounce,
     element: field,
@@ -10832,7 +11104,7 @@ function Label$1(props) {
     id,
     label: 'Label',
     setValue,
-    validate: validateFactory(getValue(), entry => entry.label)
+    validate
   });
 }
 function Value$1(props) {
@@ -10854,6 +11126,7 @@ function Value$1(props) {
   const getValue = () => {
     return get(field, ['values', index, 'value']);
   };
+  const validate = useMemo(() => validateFactory(get(field, ['values', index, 'value']), entry => entry.value), [field, index, validateFactory]);
   return TextfieldEntry({
     debounce,
     element: field,
@@ -10861,7 +11134,7 @@ function Value$1(props) {
     id,
     label: 'Value',
     setValue,
-    validate: validateFactory(getValue(), entry => entry.value)
+    validate
   });
 }
 
@@ -10912,6 +11185,7 @@ function Key$1(props) {
   const getValue = () => {
     return Object.keys(get(field, ['properties']))[index];
   };
+  const validate = useMemo(() => validateFactory(Object.keys(get(field, ['properties']))[index]), [validateFactory, field, index]);
   return TextfieldEntry({
     debounce,
     element: field,
@@ -10919,7 +11193,7 @@ function Key$1(props) {
     id,
     label: 'Key',
     setValue,
-    validate: validateFactory(getValue())
+    validate
   });
 }
 function Value(props) {
@@ -11113,15 +11387,6 @@ function InputValuesKey(props) {
     }
     editField(field, path, value || '');
   };
-  const validate = value => {
-    if (isUndefined(value) || !value.length) {
-      return 'Must not be empty.';
-    }
-    if (/\s/.test(value)) {
-      return 'Must not contain spaces.';
-    }
-    return null;
-  };
   return TextfieldEntry({
     debounce,
     description: 'Define which input property to populate the values from',
@@ -11131,10 +11396,26 @@ function InputValuesKey(props) {
     id,
     label: 'Input values key',
     setValue,
-    validate
+    validate: validate$4
   });
 }
 
+// helpers //////////
+
+/**
+  * @param {string|void} value
+  * @returns {string|null}
+  */
+const validate$4 = value => {
+  if (typeof value !== 'string' || value.length === 0) {
+    return 'Must not be empty.';
+  }
+  if (/\s/.test(value)) {
+    return 'Must not contain spaces.';
+  }
+  return null;
+};
+
 function StaticOptionsSourceEntry(props) {
   const {
     editField,
@@ -11158,7 +11439,7 @@ function StaticOptionsSourceEntry(props) {
       if (value === key) {
         return;
       }
-      if (isUndefined(value) || !value.length) {
+      if (typeof value !== 'string' || value.length === 0) {
         return 'Must not be empty.';
       }
       const isValueAssigned = values.find(entry => getValue(entry) === value);
@@ -11383,7 +11664,7 @@ function RepeatableEntry(props) {
     id: 'defaultRepetitions',
     path: ['defaultRepetitions'],
     label: 'Default number of items',
-    min: 0,
+    min: 1,
     max: 20,
     props
   }), simpleBoolEntryFactory({
@@ -11544,26 +11825,6 @@ function Source(props) {
     }
     editField(field, path, value);
   };
-
-  /**
-   * @param {string|void} value
-   * @returns {string|null}
-   */
-  const validate = value => {
-    if (!isString(value) || value.length === 0) {
-      return 'Must not be empty.';
-    }
-    if (value.startsWith('=')) {
-      return null;
-    }
-    if (!isValidDotPath(value)) {
-      return 'Must be a variable or a dot separated path.';
-    }
-    if (hasIntegerPathSegment(value)) {
-      return 'Must not contain numerical path segments.';
-    }
-    return null;
-  };
   return FeelTemplatingEntry({
     debounce,
     description: 'Specify the source from which to populate the table',
@@ -11576,10 +11837,32 @@ function Source(props) {
     setValue,
     singleLine: true,
     variables,
-    validate
+    validate: validate$3
   });
 }
 
+// helper ////////////////
+
+/**
+   * @param {string|void} value
+   * @returns {string|null}
+   */
+const validate$3 = value => {
+  if (!isString(value) || value.length === 0) {
+    return 'Must not be empty.';
+  }
+  if (value.startsWith('=')) {
+    return null;
+  }
+  if (!isValidDotPath(value)) {
+    return 'Must be a variable or a dot separated path.';
+  }
+  if (hasIntegerPathSegment(value)) {
+    return 'Must not contain numerical path segments.';
+  }
+  return null;
+};
+
 function PaginationEntry(props) {
   const {
     editField,
@@ -11661,26 +11944,6 @@ function RowCount(props) {
     }
     editField(field, path$2, value);
   };
-
-  /**
-   * @param {string|void} value
-   * @returns {string|null}
-   */
-  const validate = value => {
-    if (isNil(value)) {
-      return null;
-    }
-    if (!isNumber(value)) {
-      return 'Must be number';
-    }
-    if (!Number.isInteger(value)) {
-      return 'Should be an integer.';
-    }
-    if (value < 1) {
-      return 'Should be greater than zero.';
-    }
-    return null;
-  };
   return NumberFieldEntry({
     debounce,
     label: 'Number of rows per page',
@@ -11688,10 +11951,32 @@ function RowCount(props) {
     id,
     getValue,
     setValue,
-    validate
+    validate: validate$2
   });
 }
 
+// helpers //////////
+
+/**
+   * @param {string|void} value
+   * @returns {string|null}
+   */
+const validate$2 = value => {
+  if (isNil(value)) {
+    return null;
+  }
+  if (!isNumber(value)) {
+    return 'Must be number';
+  }
+  if (!Number.isInteger(value)) {
+    return 'Should be an integer.';
+  }
+  if (value < 1) {
+    return 'Should be greater than zero.';
+  }
+  return null;
+};
+
 const OPTIONS = {
   static: {
     label: 'List of items',
@@ -11830,17 +12115,6 @@ function ColumnsExpression(props) {
     }
     editField(field, PATH, value);
   };
-
-  /**
-   * @param {string|void} value
-   * @returns {string|null}
-   */
-  const validate = value => {
-    if (!isString(value) || value.length === 0 || value === '=') {
-      return 'Must not be empty.';
-    }
-    return null;
-  };
   const schema = '[\n  {\n    "key": "column_1",\n    "label": "Column 1"\n  }\n]';
   const tooltip = jsxs("div", {
     children: ["The expression may result in an array of simple values or alternatively follow this schema:", jsx("pre", {
@@ -11861,10 +12135,23 @@ function ColumnsExpression(props) {
     setValue,
     singleLine: true,
     variables,
-    validate
+    validate: validate$1
   });
 }
 
+// helpers //////////
+
+/**
+   * @param {string|void} value
+   * @returns {string|null}
+   */
+const validate$1 = value => {
+  if (!isString(value) || value.length === 0 || value === '=') {
+    return 'Must not be empty.';
+  }
+  return null;
+};
+
 const path$1 = 'columns';
 const labelPath = 'label';
 const keyPath = 'key';
@@ -11873,8 +12160,7 @@ function ColumnEntry(props) {
     editField,
     field,
     idPrefix,
-    index,
-    validateFactory
+    index
   } = props;
   const entries = [{
     component: Label,
@@ -11882,16 +12168,14 @@ function ColumnEntry(props) {
     field,
     id: idPrefix + '-label',
     idPrefix,
-    index,
-    validateFactory
+    index
   }, {
     component: Key,
     editField,
     field,
     id: idPrefix + '-key',
     idPrefix,
-    index,
-    validateFactory
+    index
   }];
   return entries;
 }
@@ -12041,7 +12325,7 @@ function GeneralGroup(field, editField, getService) {
     field,
     editField,
     getService
-  }), ...DefaultOptionEntry({
+  }), ...DefaultValueEntry({
     field,
     editField
   }), ...ActionEntry({
@@ -12054,6 +12338,10 @@ function GeneralGroup(field, editField, getService) {
     field,
     editField,
     getService
+  }), ...HtmlEntry({
+    field,
+    editField,
+    getService
   }), ...IFrameUrlEntry({
     field,
     editField
@@ -12066,7 +12354,7 @@ function GeneralGroup(field, editField, getService) {
   }), ...NumberEntries({
     field,
     editField
-  }), ...SourceEntry({
+  }), ...ImageSourceEntry({
     field,
     editField
   }), ...AltTextEntry({
@@ -12476,7 +12764,7 @@ function CustomPropertiesGroup(field, editField) {
       if (value === key) {
         return;
       }
-      if (isUndefined(value) || !value.length) {
+      if (typeof value !== 'string' || value.length === 0) {
         return 'Must not be empty.';
       }
       if (has(properties, value)) {
@@ -12580,6 +12868,75 @@ function LayoutGroup(field, editField) {
   };
 }
 
+function SecurityAttributesGroup(field, editField) {
+  const {
+    type
+  } = field;
+  if (type !== 'iframe') {
+    return null;
+  }
+  const entries = createEntries({
+    field,
+    editField
+  });
+  if (!entries.length) {
+    return null;
+  }
+  return {
+    id: 'securityAttributes',
+    label: 'Security attributes',
+    entries,
+    tooltip: getTooltip()
+  };
+}
+function createEntries(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const securityEntries = SECURITY_ATTRIBUTES_DEFINITIONS.map(definition => {
+    const {
+      label,
+      property
+    } = definition;
+    return simpleBoolEntryFactory({
+      id: property,
+      label: label,
+      isDefaultVisible: field => field.type === 'iframe',
+      path: ['security', property],
+      props,
+      getValue: () => get(field, ['security', property]),
+      setValue: value => {
+        const security = get(field, ['security'], {});
+        editField(field, ['security'], set$1(security, [property], value));
+      }
+    });
+  });
+  return [{
+    component: Advisory
+  }, ...securityEntries];
+}
+const Advisory = props => {
+  return jsx("div", {
+    class: "bio-properties-panel-description fjs-properties-panel-detached-description",
+    children: "These options can incur security risks, especially if used in combination with dynamic links. Ensure that you are aware of them, that you trust the source url and only enable what your use case requires."
+  });
+};
+
+// helpers //////////
+
+function getTooltip() {
+  return jsx(Fragment$1, {
+    children: jsxs("p", {
+      children: ["Allow the iframe to access more functionality of your browser, details regarding the various options can be found in the ", jsx("a", {
+        target: "_blank",
+        href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe",
+        children: "MDN iFrame documentation."
+      })]
+    })
+  });
+}
+
 function ConditionGroup(field, editField) {
   const {
     type
@@ -12682,7 +13039,7 @@ class PropertiesProvider {
         return groups;
       }
       const getService = (type, strict = true) => this._injector.get(type, strict);
-      groups = [...groups, GeneralGroup(field, editField, getService), ...TableHeaderGroups(field, editField), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ...OptionsGroups(field, editField, getService), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomPropertiesGroup(field, editField)].filter(group => group != null);
+      groups = [...groups, GeneralGroup(field, editField, getService), ...TableHeaderGroups(field, editField), SecurityAttributesGroup(field, editField), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ...OptionsGroups(field, editField, getService), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomPropertiesGroup(field, editField)].filter(group => group != null);
       this._filterVisibleEntries(groups, field, getService);
 
       // contract: if a group has no entries or items, it should not be displayed at all
@@ -12694,7 +13051,7 @@ class PropertiesProvider {
 }
 PropertiesProvider.$inject = ['propertiesPanel', 'injector'];
 
-var PropertiesPanelModule = {
+const PropertiesPanelModule = {
   __depends__: [index],
   __init__: ['propertiesPanel', 'propertiesProvider'],
   propertiesPanel: ['type', PropertiesPanelRenderer],
@@ -12743,7 +13100,7 @@ class RenderInjector extends SectionModuleBase {
 }
 RenderInjector.$inject = ['eventBus'];
 
-var RenderInjectionModule = {
+const RenderInjectionModule = {
   __init__: ['renderInjector'],
   renderInjector: ['type', RenderInjector]
 };
@@ -12763,7 +13120,7 @@ var SvgRepeat = function SvgRepeat(props) {
 };
 var RepeatSvg = SvgRepeat;
 
-class RepeatRenderManager {
+class EditorRepeatRenderManager {
   constructor(formFields, formFieldRegistry) {
     this._formFields = formFields;
     this._formFieldRegistry = formFieldRegistry;
@@ -12793,30 +13150,11 @@ class RepeatRenderManager {
     });
   }
 }
-RepeatRenderManager.$inject = ['formFields', 'formFieldRegistry'];
+EditorRepeatRenderManager.$inject = ['formFields', 'formFieldRegistry'];
 
-var RepeatRenderManagerModule = {
+const RepeatRenderModule = {
   __init__: ['repeatRenderManager'],
-  repeatRenderManager: ['type', RepeatRenderManager]
-};
-
-class EditorTemplating {
-  // same rules as viewer templating
-  isTemplate(value) {
-    return isString(value) && (value.startsWith('=') || /{{/.test(value));
-  }
-
-  // return the template raw, as we usually just want to display that
-  evaluate(template) {
-    return template;
-  }
-}
-EditorTemplating.$inject = [];
-
-var ExpressionLanguageModule = {
-  __init__: ['expressionLanguage', 'templating'],
-  expressionLanguage: ['type', FeelExpressionLanguage],
-  templating: ['type', EditorTemplating]
+  repeatRenderManager: ['type', EditorRepeatRenderManager]
 };
 
 const ids = new Ids([32, 36, 1]);
@@ -13040,7 +13378,7 @@ class FormEditor {
       config: ['value', enrichedConfig]
     }, {
       formEditor: ['value', this]
-    }, core, ...modules, ...additionalModules]);
+    }, CoreModule, ...modules, ...additionalModules]);
   }
 
   /**
@@ -13072,7 +13410,7 @@ class FormEditor {
    * @internal
    */
   _getModules() {
-    return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, MarkdownModule, PropertiesPanelModule, RenderInjectionModule, RepeatRenderManagerModule];
+    return [ModelingModule, EditorActionsModule, FormEditorKeyboardModule, DraggingModule, SelectionModule, PaletteModule, EditorExpressionLanguageModule, MarkdownRendererModule, PropertiesPanelModule, RenderInjectionModule, RepeatRenderModule];
   }
 
   /**