@bpmn-io/form-js-playground 0.14.0 → 0.14.1

package/dist/form-playground.umd.js

@@ -49251,30 +49251,178 @@
     return value;
   }
 
+  const getFlavouredFeelVariableNames = (feelString, feelFlavour, options = {}) => {
+    const {
+      depth = 0,
+      specialDepthAccessors = {}
+    } = options;
+    if (!['expression', 'unaryTest'].includes(feelFlavour)) return [];
+    const tree = feelFlavour === 'expression' ? parseExpressions$1(feelString) : parseUnaryTests$1(feelString);
+    const simpleExpressionTree = _buildSimpleFeelStructureTree(tree, feelString);
+    return function _unfoldVariables(node) {
+      if (node.name === 'PathExpression') {
+        if (Object.keys(specialDepthAccessors).length === 0) {
+          return depth === 0 ? [_getVariableNameAtPathIndex(node, 0)] : [];
+        }
+
+        // if using special depth accessors, use a more complex extraction
+        return Array.from(_smartExtractVariableNames(node, depth, specialDepthAccessors));
+      }
+      if (depth === 0 && node.name === 'VariableName') return [node.variableName];
+
+      // for any other kind of node, traverse its children and flatten the result
+      if (node.children) {
+        return node.children.reduce((acc, child) => {
+          return acc.concat(_unfoldVariables(child));
+        }, []);
+      }
+      return [];
+    }(simpleExpressionTree);
+  };
+
+  /**
+   * Get the variable name at the specified index in a given path expression.
+   *
+   * @param {Object} root - The root node of the path expression tree.
+   * @param {number} index - The index of the variable name to retrieve.
+   * @returns {string|null} The variable name at the specified index or null if index is out of bounds.
+   */
+  const _getVariableNameAtPathIndex = (root, index) => {
+    const accessors = _deconstructPathExpression(root);
+    return accessors[index] || null;
+  };
+
+  /**
+   * Extracts the variables which are required of the external context for a given path expression.
+   * This is done by traversing the path expression tree and keeping track of the current depth relative to the external context.
+   *
+   * @param {Object} node - The root node of the path expression tree.
+   * @param {number} initialDepth - The depth at which the root node is located in the outer context.
+   * @param {Object} specialDepthAccessors - Definitions of special keywords which represent more complex accesses of the outer context.
+   * @returns {Set} - A set containing the extracted variable names.
+   */
+  const _smartExtractVariableNames = (node, initialDepth, specialDepthAccessors) => {
+    // depth info represents the previous (initialised as null) and current depth of the current accessor in the path expression
+    // we track multiple of these to account for the fact that a path expression may be ambiguous due to special keywords
+    let accessorDepthInfos = [{
+      previous: null,
+      current: initialDepth - 1
+    }];
+    const extractedVariables = new Set();
+    const nodeAccessors = _deconstructPathExpression(node);
+    for (let i = 0; i < nodeAccessors.length; i++) {
+      const currentAccessor = nodeAccessors[i];
+      if (currentAccessor in specialDepthAccessors) {
+        const depthOffsets = specialDepthAccessors[currentAccessor];
+
+        // if the current accessor is a special keyword, we need to expand the current depth info set
+        // this is done to account for the ambiguity of keywords like parent, which may be used to access
+        // the parent of the current node, or a child variable of the same name
+        accessorDepthInfos = depthOffsets.reduce((accumulator, offset) => {
+          return [...accumulator, ...accessorDepthInfos.map(depthInfo => ({
+            previous: depthInfo.current,
+            current: depthInfo.current + offset
+          }))];
+        }, []).filter(depthInfo => depthInfo.current >= -1); // discard all depth infos which are out of bounds
+      } else {
+        // if the current accessor is not a special keyword, we know it's simply accessing a child
+        // hence we are now one level deeper in the tree and simply increment
+        accessorDepthInfos = accessorDepthInfos.map(depthInfo => ({
+          previous: depthInfo.current,
+          current: depthInfo.current + 1
+        }));
+      }
+
+      // finally, we check if for the current accessor, there is a scenario where:
+      // previous it was at depth -1 (i.e. the root context), and is now at depth 0 (i.e. a variable)
+      // these are the variables we need to request, so we add them to the set
+      if (accessorDepthInfos.some(depthInfo => depthInfo.previous === -1 && depthInfo.current === 0)) {
+        extractedVariables.add(currentAccessor);
+      }
+    }
+
+    // we return a set to avoid duplicates
+    return new Set(extractedVariables);
+  };
+
+  /**
+   * Deconstructs a path expression tree into an array of components.
+   *
+   * @param {Object} root - The root node of the path expression tree.
+   * @returns {Array<string>} An array of components in the path expression, in the correct order.
+   */
+  const _deconstructPathExpression = root => {
+    let node = root;
+    let parts = [];
+
+    // Traverse the tree and collect path components
+    while (node.name === 'PathExpression') {
+      parts.push(node.children[1].variableName);
+      node = node.children[0];
+    }
+
+    // Add the last component to the array
+    parts.push(node.variableName);
+
+    // Reverse and return the array to get the correct order
+    return parts.reverse();
+  };
+
+  /**
+   * Builds a simplified feel structure tree from the given parse tree and feel string.
+   * The nodes follow this structure: `{ name: string, children: Array, variableName?: string }`
+   *
+   * @param {Object} parseTree - The parse tree generated by a parser.
+   * @param {string} feelString - The feel string used for parsing.
+   * @returns {Object} The simplified feel structure tree.
+   */
+  const _buildSimpleFeelStructureTree = (parseTree, feelString) => {
+    const stack = [{
+      children: []
+    }];
+    parseTree.iterate({
+      enter: node => {
+        const nodeRepresentation = {
+          name: node.type.name,
+          children: []
+        };
+        if (node.type.name === 'VariableName') {
+          nodeRepresentation.variableName = feelString.slice(node.from, node.to);
+        }
+        stack.push(nodeRepresentation);
+      },
+      leave: () => {
+        const result = stack.pop();
+        const parent = stack[stack.length - 1];
+        parent.children.push(result);
+      }
+    });
+    return stack[0].children[0];
+  };
   class FeelExpressionLanguage {
     constructor(eventBus) {
       this._eventBus = eventBus;
     }
 
-    /**
-     * Determines if the given string is a FEEL expression.
-     *
-     * @param {string} value
-     * @returns {boolean}
-     *
+    /**
+     * Determines if the given value is a FEEL expression.
+     *
+     * @param {any} value
+     * @returns {boolean}
+     *
      */
     isExpression(value) {
       return isString$4(value) && value.startsWith('=');
     }
 
-    /**
-     * Retrieve variable names from a given FEEL expression.
-     *
-     * @param {string} expression
-     * @param {object} [options]
-     * @param {string} [options.type]
-     *
-     * @returns {string[]}
+    /**
+     * Retrieve variable names from a given FEEL expression.
+     *
+     * @param {string} expression
+     * @param {object} [options]
+     * @param {string} [options.type]
+     *
+     * @returns {string[]}
      */
     getVariableNames(expression, options = {}) {
       const {
@@ -49283,21 +49431,19 @@
       if (!this.isExpression(expression)) {
         return [];
       }
-      if (type === 'unaryTest') {
-        return this._getUnaryVariableNames(expression);
-      } else if (type === 'expression') {
-        return this._getExpressionVariableNames(expression);
+      if (!['unaryTest', 'expression'].includes(type)) {
+        throw new Error('Unknown expression type: ' + type);
       }
-      throw new Error('Unknown expression type: ' + options.type);
+      return getFlavouredFeelVariableNames(expression, type);
     }
 
-    /**
-     * Evaluate an expression.
-     *
-     * @param {string} expression
-     * @param {import('../../types').Data} [data]
-     *
-     * @returns {any}
+    /**
+     * Evaluate an expression.
+     *
+     * @param {string} expression
+     * @param {import('../../types').Data} [data]
+     *
+     * @returns {any}
      */
     evaluate(expression, data = {}) {
       if (!expression) {
@@ -49316,49 +49462,64 @@
         return null;
       }
     }
-    _getExpressionVariableNames(expression) {
-      const tree = parseExpressions$1(expression);
-      const cursor = tree.cursor();
-      const variables = new Set();
-      do {
-        const node = cursor.node;
-        if (node.type.name === 'VariableName') {
-          variables.add(expression.slice(node.from, node.to));
-        }
-      } while (cursor.next());
-      return Array.from(variables);
-    }
-    _getUnaryVariableNames(unaryTest) {
-      const tree = parseUnaryTests$1(unaryTest);
-      const cursor = tree.cursor();
-      const variables = new Set();
-      do {
-        const node = cursor.node;
-        if (node.type.name === 'VariableName') {
-          variables.add(unaryTest.slice(node.from, node.to));
-        }
-      } while (cursor.next());
-      return Array.from(variables);
-    }
   }
   FeelExpressionLanguage.$inject = ['eventBus'];
   class FeelersTemplating {
     constructor() {}
+
+    /**
+     * Determines if the given value is a feelers template.
+     *
+     * @param {any} value
+     * @returns {boolean}
+     *
+     */
     isTemplate(value) {
-      return isString$4(value) && (value.startsWith('=') || /{{/.test(value));
+      return isString$4(value) && (value.startsWith('=') || /{{.*?}}/.test(value));
     }
 
-    /**
-     * Evaluate a template.
-     *
-     * @param {string} template
-     * @param {Object<string, any>} context
-     * @param {Object} options
-     * @param {boolean} [options.debug = false]
-     * @param {boolean} [options.strict = false]
-     * @param {Function} [options.buildDebugString]
-     *
-     * @returns
+    /**
+     * Retrieve variable names from a given feelers template.
+     *
+     * @param {string} template
+     *
+     * @returns {string[]}
+     */
+    getVariableNames(template) {
+      if (!this.isTemplate(template)) {
+        return [];
+      }
+      const expressions = this._extractExpressionsWithDepth(template);
+
+      // defines special accessors, and the change(s) in depth they could imply (e.g. parent can be used to access the parent context (depth - 1) or a child variable named parent (depth + 1)
+      const specialDepthAccessors = {
+        parent: [-1, 1],
+        _parent_: [-1],
+        this: [0, 1],
+        _this_: [0]
+      };
+      return expressions.reduce((variables, {
+        expression,
+        depth
+      }) => {
+        return variables.concat(getFlavouredFeelVariableNames(expression, 'expression', {
+          depth,
+          specialDepthAccessors
+        }));
+      }, []);
+    }
+
+    /**
+     * Evaluate a template.
+     *
+     * @param {string} template
+     * @param {Object<string, any>} context
+     * @param {Object} options
+     * @param {boolean} [options.debug = false]
+     * @param {boolean} [options.strict = false]
+     * @param {Function} [options.buildDebugString]
+     *
+     * @returns
      */
     evaluate(template, context = {}, options = {}) {
       const {
@@ -49372,12 +49533,56 @@
         buildDebugString
       });
     }
+
+    /**
+    * @typedef {Object} ExpressionWithDepth
+    * @property {number} depth - The depth of the expression in the syntax tree.
+    * @property {string} expression - The extracted expression
+    */
+
+    /**
+    * Extracts all feel expressions in the template along with their depth in the syntax tree.
+    * The depth is incremented for child expressions of loops to account for context drilling.
+    * @name extractExpressionsWithDepth
+    * @param {string} template - A feelers template string.
+    * @returns {Array<ExpressionWithDepth>} An array of objects, each containing the depth and the extracted expression.
+    *
+    * @example
+    * const template = "Hello {{user}}, you have:{{#loop items}}\n- {{amount}} {{name}}{{/loop}}.";
+    * const extractedExpressions = _extractExpressionsWithDepth(template);
+    */
+    _extractExpressionsWithDepth(template) {
+      // build simplified feelers syntax tree
+      const parseTree = parser$1.parse(template);
+      const tree = buildSimpleTree(parseTree, template);
+      return function _traverse(n, depth = 0) {
+        if (['Feel', 'FeelBlock'].includes(n.name)) {
+          return [{
+            depth,
+            expression: n.content
+          }];
+        }
+        if (n.name === 'LoopSpanner') {
+          const loopExpression = n.children[0].content;
+          const childResults = n.children.slice(1).reduce((acc, child) => {
+            return acc.concat(_traverse(child, depth + 1));
+          }, []);
+          return [{
+            depth,
+            expression: loopExpression
+          }, ...childResults];
+        }
+        return n.children.reduce((acc, child) => {
+          return acc.concat(_traverse(child, depth));
+        }, []);
+      }(tree);
+    }
   }
   FeelersTemplating.$inject = [];
 
-  /**
-   * @typedef {object} Condition
-   * @property {string} [hide]
+  /**
+   * @typedef {object} Condition
+   * @property {string} [hide]
    */
 
   class ConditionChecker {
@@ -49386,11 +49591,11 @@
       this._eventBus = eventBus;
     }
 
-    /**
-     * For given data, remove properties based on condition.
-     *
-     * @param {Object<string, any>} properties
-     * @param {Object<string, any>} data
+    /**
+     * For given data, remove properties based on condition.
+     *
+     * @param {Object<string, any>} properties
+     * @param {Object<string, any>} data
      */
     applyConditions(properties, data = {}) {
       const conditions = this._getConditions();
@@ -49409,13 +49614,13 @@
       return newProperties;
     }
 
-    /**
-     * Check if given condition is met. Returns null for invalid/missing conditions.
-     *
-     * @param {string} condition
-     * @param {import('../../types').Data} [data]
-     *
-     * @returns {boolean|null}
+    /**
+     * Check if given condition is met. Returns null for invalid/missing conditions.
+     *
+     * @param {string} condition
+     * @param {import('../../types').Data} [data]
+     *
+     * @returns {boolean|null}
      */
     check(condition, data = {}) {
       if (!condition) {
@@ -49436,12 +49641,12 @@
       }
     }
 
-    /**
-     * Check if hide condition is met.
-     *
-     * @param {Condition} condition
-     * @param {Object<string, any>} data
-     * @returns {boolean}
+    /**
+     * Check if hide condition is met.
+     *
+     * @param {Condition} condition
+     * @param {Object<string, any>} data
+     * @returns {boolean}
      */
     _checkHideCondition(condition, data) {
       if (!condition.hide) {
@@ -49482,12 +49687,12 @@
       this._converter = new showdownExports.Converter();
     }
 
-    /**
-     * Render markdown to HTML.
-     *
-     * @param {string} markdown - The markdown to render
-     *
-     * @returns {string} HTML
+    /**
+     * Render markdown to HTML.
+     *
+     * @param {string} markdown - The markdown to render
+     *
+     * @returns {string} HTML
      */
     render(markdown) {
       return this._converter.makeHtml(markdown);
@@ -50071,23 +50276,23 @@
   };
   FormFieldRegistry$1.$inject = ['eventBus'];
 
-  /**
-   * @typedef { { id: String, components: Array<String> } } FormRow
-   * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
+  /**
+   * @typedef { { id: String, components: Array<String> } } FormRow
+   * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
    */
 
-  /**
-   * Maintains the Form layout in a given structure, for example
-   *
-   *  [
-   *    {
-   *      formFieldId: 'FormField_1',
-   *      rows: [
-   *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
-   *      ]
-   *    }
-   *  ]
-   *
+  /**
+   * Maintains the Form layout in a given structure, for example
+   *
+   *  [
+   *    {
+   *      formFieldId: 'FormField_1',
+   *      rows: [
+   *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
+   *      ]
+   *    }
+   *  ]
+   *
    */
   class FormLayouter {
     constructor(eventBus) {
@@ -50097,8 +50302,8 @@
       this._eventBus = eventBus;
     }
 
-    /**
-     * @param {FormRow} row
+    /**
+     * @param {FormRow} row
      */
     addRow(formFieldId, row) {
       let rowsPerComponent = this._rows.find(r => r.formFieldId === formFieldId);
@@ -50112,18 +50317,18 @@
       rowsPerComponent.rows.push(row);
     }
 
-    /**
-     * @param {String} id
-     * @returns {FormRow}
+    /**
+     * @param {String} id
+     * @returns {FormRow}
      */
     getRow(id) {
       const rows = allRows(this._rows);
       return rows.find(r => r.id === id);
     }
 
-    /**
-     * @param {any} formField
-     * @returns {FormRow}
+    /**
+     * @param {any} formField
+     * @returns {FormRow}
      */
     getRowForField(formField) {
       return allRows(this._rows).find(r => {
@@ -50134,9 +50339,9 @@
       });
     }
 
-    /**
-     * @param {String} formFieldId
-     * @returns { Array<FormRow> }
+    /**
+     * @param {String} formFieldId
+     * @returns { Array<FormRow> }
      */
     getRows(formFieldId) {
       const rowsForField = this._rows.find(r => formFieldId === r.formFieldId);
@@ -50146,15 +50351,15 @@
       return rowsForField.rows;
     }
 
-    /**
-     * @returns {string}
+    /**
+     * @returns {string}
      */
     nextRowId() {
       return this._ids.nextPrefixed('Row_');
     }
 
-    /**
-     * @param {any} formField
+    /**
+     * @param {any} formField
      */
     calculateLayout(formField) {
       const {
@@ -50208,9 +50413,9 @@
     });
   }
 
-  /**
-   * @param {Array<FormRows>} formRows
-   * @returns {Array<FormRow>}
+  /**
+   * @param {Array<FormRows>} formRows
+   * @returns {Array<FormRow>}
    */
   function allRows(formRows) {
     return flatten$3(formRows.map(c => c.rows));
@@ -50286,10 +50491,10 @@
     return injector;
   }
 
-  /**
-   * @param {string?} prefix
-   *
-   * @returns Element
+  /**
+   * @param {string?} prefix
+   *
+   * @returns Element
    */
   function createFormContainer(prefix = 'fjs') {
     const container = document.createElement('div');
@@ -50297,6 +50502,7 @@
     return container;
   }
   const EXPRESSION_PROPERTIES = ['alt', 'source', 'text'];
+  const TEMPLATE_PROPERTIES = ['text'];
   function findErrors(errors, path) {
     return errors[pathStringify(path)];
   }
@@ -50319,24 +50525,24 @@
     return `${type}${generateIndexForType(type)}`;
   }
 
-  /**
-   * @template T
-   * @param {T} data
-   * @param {(this: any, key: string, value: any) => any} [replacer]
-   * @return {T}
+  /**
+   * @template T
+   * @param {T} data
+   * @param {(this: any, key: string, value: any) => any} [replacer]
+   * @return {T}
    */
   function clone(data, replacer) {
     return JSON.parse(JSON.stringify(data, replacer));
   }
 
-  /**
-   * Parse the schema for input variables a form might make use of
-   *
-   * @param {any} schema
-   *
-   * @return {string[]}
+  /**
+   * Parse the schema for input variables a form might make use of
+   *
+   * @param {any} schema
+   *
+   * @return {string[]}
    */
-  function getSchemaVariables(schema, expressionLanguage = new FeelExpressionLanguage(null)) {
+  function getSchemaVariables(schema, expressionLanguage = new FeelExpressionLanguage(null), templating = new FeelersTemplating()) {
     if (!schema.components) {
       return [];
     }
@@ -50371,6 +50577,13 @@
           variables = [...variables, ...expressionVariables];
         }
       });
+      TEMPLATE_PROPERTIES.forEach(prop => {
+        const property = component[prop];
+        if (property && !expressionLanguage.isExpression(property) && templating.isTemplate(property)) {
+          const templateVariables = templating.getVariableNames(property);
+          variables = [...variables, ...templateVariables];
+        }
+      });
       return variables;
     }, []);
 
@@ -50378,11 +50591,11 @@
     return Array.from(new Set(variables));
   }
   let Importer$1 = class Importer {
-    /**
-     * @constructor
-     * @param { import('../core').FormFieldRegistry } formFieldRegistry
-     * @param { import('../render/FormFields').default } formFields
-     * @param { import('../core').FormLayouter } formLayouter
+    /**
+     * @constructor
+     * @param { import('../core').FormFieldRegistry } formFieldRegistry
+     * @param { import('../render/FormFields').default } formFields
+     * @param { import('../core').FormLayouter } formLayouter
      */
     constructor(formFieldRegistry, formFields, formLayouter) {
       this._formFieldRegistry = formFieldRegistry;
@@ -50390,15 +50603,15 @@
       this._formLayouter = formLayouter;
     }
 
-    /**
-     * Import schema adding `id`, `_parent` and `_path`
-     * information to each field and adding it to the
-     * form field registry.
-     *
-     * @param {any} schema
-     * @param {any} [data]
-     *
-     * @return { { warnings: Array<any>, schema: any, data: any } }
+    /**
+     * Import schema adding `id`, `_parent` and `_path`
+     * information to each field and adding it to the
+     * form field registry.
+     *
+     * @param {any} schema
+     * @param {any} [data]
+     *
+     * @return { { warnings: Array<any>, schema: any, data: any } }
      */
     importSchema(schema, data = {}) {
       // TODO: Add warnings - https://github.com/bpmn-io/form-js/issues/289
@@ -50419,11 +50632,11 @@
       }
     }
 
-    /**
-     * @param {any} formField
-     * @param {string} [parentId]
-     *
-     * @return {any} importedField
+    /**
+     * @param {any} formField
+     * @param {string} [parentId]
+     *
+     * @return {any} importedField
      */
     importFormField(formField, parentId) {
       const {
@@ -50474,10 +50687,10 @@
       });
     }
 
-    /**
-     * @param {Object} data
-     *
-     * @return {Object} initializedData
+    /**
+     * @param {Object} data
+     *
+     * @return {Object} initializedData
      */
     initializeFieldValues(data) {
       return this._formFieldRegistry.getAll().reduce((initializedData, formField) => {
@@ -50605,11 +50818,11 @@
   });
   var FormRenderContext$1 = FormRenderContext;
 
-  /**
-   * @param {string} type
-   * @param {boolean} [strict]
-   *
-   * @returns {any}
+  /**
+   * @param {string} type
+   * @param {boolean} [strict]
+   *
+   * @returns {any}
    */
   function getService$2(type, strict) {}
   const FormContext = D$1({
@@ -50783,8 +50996,8 @@
     return getService(type, strict);
   }
 
-  /**
-   * @enum { String }
+  /**
+   * @enum { String }
    */
   const LOAD_STATES = {
     LOADING: 'loading',
@@ -50792,17 +51005,17 @@
     ERROR: 'error'
   };
 
-  /**
-   * @typedef {Object} ValuesGetter
-   * @property {Object[]} values - The values data
-   * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
+  /**
+   * @typedef {Object} ValuesGetter
+   * @property {Object[]} values - The values data
+   * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
    */
 
-  /**
-   * A hook to load values for single and multiselect components.
-   *
-   * @param {Object} field - The form field to handle values for
-   * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
+  /**
+   * A hook to load values for single and multiselect components.
+   *
+   * @param {Object} field - The form field to handle values for
+   * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
    */
   function useValuesAsync(field) {
     const {
@@ -51145,10 +51358,10 @@
   Checklist.sanitizeValue = sanitizeMultiSelectValue;
   Checklist.group = 'selection';
 
-  /**
-   * Returns the conditionally filtered data of a form reactively.
-   * Memoised to minimize re-renders
-   *
+  /**
+   * Returns the conditionally filtered data of a form reactively.
+   * Memoised to minimize re-renders
+   *
    */
   function useFilteredFormData() {
     const {
@@ -51165,12 +51378,12 @@
     }, [conditionChecker, data, initialData]);
   }
 
-  /**
-   * Evaluate if condition is met reactively based on the conditionChecker and form data.
-   *
-   * @param {string | undefined} condition
-   *
-   * @returns {boolean} true if condition is met or no condition or condition checker exists
+  /**
+   * Evaluate if condition is met reactively based on the conditionChecker and form data.
+   *
+   * @param {string | undefined} condition
+   *
+   * @returns {boolean} true if condition is met or no condition or condition checker exists
    */
   function useCondition(condition) {
     const conditionChecker = useService$2('conditionChecker', false);
@@ -51180,13 +51393,13 @@
     }, [conditionChecker, condition, filteredData]);
   }
 
-  /**
-   * Evaluate a string reactively based on the expressionLanguage and form data.
-   * If the string is not an expression, it is returned as is.
-   * Memoised to minimize re-renders.
-   *
-   * @param {string} value
-   *
+  /**
+   * Evaluate a string reactively based on the expressionLanguage and form data.
+   * If the string is not an expression, it is returned as is.
+   * Memoised to minimize re-renders.
+   *
+   * @param {string} value
+   *
    */
   function useExpressionEvaluation(value) {
     const formData = useFilteredFormData();
@@ -51214,16 +51427,16 @@
     });
   }
 
-  /**
-   * Template a string reactively based on form data. If the string is not a template, it is returned as is.
-   * Memoised to minimize re-renders
-   *
-   * @param {string} value
-   * @param {Object} options
-   * @param {boolean} [options.debug = false]
-   * @param {boolean} [options.strict = false]
-   * @param {Function} [options.buildDebugString]
-   *
+  /**
+   * Template a string reactively based on form data. If the string is not a template, it is returned as is.
+   * Memoised to minimize re-renders
+   *
+   * @param {string} value
+   * @param {Object} options
+   * @param {boolean} [options.debug = false]
+   * @param {boolean} [options.strict = false]
+   * @param {Function} [options.buildDebugString]
+   *
    */
   function useTemplateEvaluation(value, options) {
     const filteredData = useFilteredFormData();
@@ -51992,10 +52205,10 @@
   Datetime.label = 'Date time';
   Datetime.group = 'basic-input';
 
-  /**
-   * This file must not be changed or exchanged.
-   *
-   * @see http://bpmn.io/license for more information.
+  /**
+   * This file must not be changed or exchanged.
+   *
+   * @see http://bpmn.io/license for more information.
    */
   function Logo() {
     return e$1("svg", {
@@ -52120,11 +52333,11 @@
 
   const FORM_ELEMENT = document.createElement('form');
 
-  /**
-   * Sanitize a HTML string and return the cleaned, safe version.
-   *
-   * @param {string} html
-   * @return {string}
+  /**
+   * Sanitize a HTML string and return the cleaned, safe version.
+   *
+   * @param {string} html
+   * @return {string}
    */
 
   // see https://github.com/developit/snarkdown/issues/70
@@ -52142,29 +52355,29 @@
     }
   }
 
-  /**
-   * Sanitizes an image source to ensure we only allow for data URI and links
-   * that start with http(s).
-   *
-   * Note: Most browsers anyway do not support script execution in <img> elements.
-   *
-   * @param {string} src
-   * @returns {string}
+  /**
+   * Sanitizes an image source to ensure we only allow for data URI and links
+   * that start with http(s).
+   *
+   * Note: Most browsers anyway do not support script execution in <img> elements.
+   *
+   * @param {string} src
+   * @returns {string}
    */
   function sanitizeImageSource(src) {
     const valid = ALLOWED_IMAGE_SRC_PATTERN.test(src);
     return valid ? src : '';
   }
 
-  /**
-   * Recursively sanitize a HTML node, potentially
-   * removing it, its children or attributes.
-   *
-   * Inspired by https://github.com/developit/snarkdown/issues/70
-   * and https://github.com/cure53/DOMPurify. Simplified
-   * for our use-case.
-   *
-   * @param {Element} node
+  /**
+   * Recursively sanitize a HTML node, potentially
+   * removing it, its children or attributes.
+   *
+   * Inspired by https://github.com/developit/snarkdown/issues/70
+   * and https://github.com/cure53/DOMPurify. Simplified
+   * for our use-case.
+   *
+   * @param {Element} node
    */
   function sanitizeNode(node) {
     // allow text nodes
@@ -52208,13 +52421,13 @@
     }
   }
 
-  /**
-   * Validates attributes for validity.
-   *
-   * @param {string} lcTag
-   * @param {string} lcName
-   * @param {string} value
-   * @return {boolean}
+  /**
+   * Validates attributes for validity.
+   *
+   * @param {string} lcTag
+   * @param {string} lcName
+   * @param {string} value
+   * @return {boolean}
    */
   function isValidAttribute(lcTag, lcName, value) {
     // disallow most attributes based on whitelist
@@ -52978,6 +53191,12 @@
         errors,
         disabled
       }),
+      onKeyDown: event => {
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      },
       children: [e$1(Label$1, {
         id: prefixId(id, formId),
         label: label,
@@ -53127,6 +53346,12 @@
         errors,
         disabled
       }),
+      onKeyDown: event => {
+        if (event.key === 'Enter') {
+          event.stopPropagation();
+          event.preventDefault();
+        }
+      },
       children: [e$1(Label$1, {
         label: label,
         required: required,
@@ -58083,10 +58308,10 @@
     return fn.apply(null, args);
   }
 
-  /**
-   * A factory to create a configurable debouncer.
-   *
-   * @param {number|boolean} [config=true]
+  /**
+   * A factory to create a configurable debouncer.
+   *
+   * @param {number|boolean} [config=true]
    */
   function DebounceFactory(config = true) {
     const timeout = typeof config === 'number' ? config : config ? 300 : 0;
@@ -58098,11 +58323,11 @@
   }
   DebounceFactory.$inject = ['config.debounce'];
   class FieldFactory {
-    /**
-     * @constructor
-     *
-     * @param { import('./FormFieldRegistry').default } formFieldRegistry
-     * @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
+    /**
+     * @constructor
+     *
+     * @param { import('./FormFieldRegistry').default } formFieldRegistry
+     * @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
      */
     constructor(formFieldRegistry, formFields) {
       this._formFieldRegistry = formFieldRegistry;
@@ -58161,11 +58386,11 @@
   }
   FieldFactory.$inject = ['formFieldRegistry', 'formFields'];
   class FormFieldRegistry extends FormFieldRegistry$1 {
-    /**
-     * Updates a form fields id.
-     *
-     * @param {Object} formField
-     * @param {string} newId
+    /**
+     * Updates a form fields id.
+     *
+     * @param {Object} formField
+     * @param {string} newId
      */
     updateId(formField, newId) {
       this._validateId(newId);
@@ -58186,13 +58411,13 @@
       }
     }
 
-    /**
-     * Validate the suitability of the given id and signals a problem
-     * with an exception.
-     *
-     * @param {string} id
-     *
-     * @throws {Error} if id is empty or already assigned
+    /**
+     * Validate the suitability of the given id and signals a problem
+     * with an exception.
+     *
+     * @param {string} id
+     *
+     * @throws {Error} if id is empty or already assigned
      */
     _validateId(id) {
       if (!id) {
@@ -58204,11 +58429,11 @@
     }
   }
   class FormLayoutValidator {
-    /**
-     * @constructor
-     *
-     * @param { import('./FormLayouter').default } formLayouter
-     * @param { import('./FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     *
+     * @param { import('./FormLayouter').default } formLayouter
+     * @param { import('./FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formLayouter, formFieldRegistry) {
       this._formLayouter = formLayouter;
@@ -58260,11 +58485,11 @@
   }
   FormLayoutValidator.$inject = ['formLayouter', 'formFieldRegistry'];
   class Importer {
-    /**
-     * @constructor
-     * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
-     * @param { import('../core/FieldFactory').default } fieldFactory
-     * @param { import('../core/FormLayouter').default } formLayouter
+    /**
+     * @constructor
+     * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
+     * @param { import('../core/FieldFactory').default } fieldFactory
+     * @param { import('../core/FormLayouter').default } formLayouter
      */
     constructor(formFieldRegistry, fieldFactory, formLayouter) {
       this._formFieldRegistry = formFieldRegistry;
@@ -58272,21 +58497,21 @@
       this._formLayouter = formLayouter;
     }
 
-    /**
-     * Import schema creating rows, fields, attaching additional
-     * information to each field and adding fields to the
-     * field registry.
-     *
-     * Additional information attached:
-     *
-     *   * `id` (unless present)
-     *   * `_parent`
-     *   * `_path`
-     *
-     * @param {any} schema
-     *
-     * @typedef {{ warnings: Error[], schema: any }} ImportResult
-     * @returns {ImportResult}
+    /**
+     * Import schema creating rows, fields, attaching additional
+     * information to each field and adding fields to the
+     * field registry.
+     *
+     * Additional information attached:
+     *
+     *   * `id` (unless present)
+     *   * `_parent`
+     *   * `_path`
+     *
+     * @param {any} schema
+     *
+     * @typedef {{ warnings: Error[], schema: any }} ImportResult
+     * @returns {ImportResult}
      */
     importSchema(schema) {
       // TODO: Add warnings
@@ -58304,12 +58529,12 @@
       }
     }
 
-    /**
-     * @param {{[x: string]: any}} fieldAttrs
-     * @param {String} [parentId]
-     * @param {number} [index]
-     *
-     * @return {any} field
+    /**
+     * @param {{[x: string]: any}} fieldAttrs
+     * @param {String} [parentId]
+     * @param {number} [index]
+     *
+     * @return {any} field
      */
     importFormField(fieldAttrs, parentId, index) {
       const {
@@ -58346,11 +58571,11 @@
       return field;
     }
 
-    /**
-     * @param {Array<any>} components
-     * @param {string} parentId
-     *
-     * @return {Array<any>} imported components
+    /**
+     * @param {Array<any>} components
+     * @param {string} parentId
+     *
+     * @return {Array<any>} imported components
      */
     importFormFields(components, parentId) {
       return components.map((component, index) => {
@@ -58377,11 +58602,11 @@
   });
   var DragAndDropContext$1 = DragAndDropContext;
 
-  /**
-   * @param {string} type
-   * @param {boolean} [strict]
-   *
-   * @returns {any}
+  /**
+   * @param {string} type
+   * @param {boolean} [strict]
+   *
+   * @returns {any}
    */
   function getService$1(type, strict) {}
   const FormEditorContext = D$1({
@@ -58715,19 +58940,19 @@
   const DRAG_NO_MOVE_CLS = 'fjs-no-move';
   const ERROR_DROP_CLS = 'fjs-error-drop';
 
-  /**
-   * @typedef { { id: String, components: Array<any> } } FormRow
+  /**
+   * @typedef { { id: String, components: Array<any> } } FormRow
    */
 
   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
+    /**
+     * @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
      */
     constructor(formFieldRegistry, formLayouter, formLayoutValidator, eventBus, modeling) {
       this._formFieldRegistry = formFieldRegistry;
@@ -58737,13 +58962,13 @@
       this._modeling = modeling;
     }
 
-    /**
-     * Calculcates position in form schema given the dropped place.
-     *
-     * @param { FormRow } targetRow
-     * @param { any } targetFormField
-     * @param { HTMLElement } sibling
-     * @returns { number }
+    /**
+     * Calculcates position in form schema given the dropped place.
+     *
+     * @param { FormRow } targetRow
+     * @param { any } targetFormField
+     * @param { HTMLElement } sibling
+     * @returns { number }
      */
     getTargetIndex(targetRow, targetFormField, sibling) {
       /** @type HTMLElement */
@@ -58845,8 +59070,8 @@
       }
     }
 
-    /**
-     * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
+    /**
+     * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
      */
     createDragulaInstance(options) {
       const {
@@ -59089,7 +59314,7 @@
       return null;
     }
     return e$1("div", {
-      style: "width: fit-content;\r padding: 2px 6px;\r height: 16px;\r background: var(--color-blue-205-100-95);\r display: flex;\r justify-content: center;\r align-items: center;\r position: absolute;\r bottom: -2px;\r z-index: 2;\r font-size: 10px;\r right: 3px;",
+      style: "width: fit-content; padding: 2px 6px; height: 16px; background: var(--color-blue-205-100-95); display: flex; justify-content: center; align-items: center; position: absolute; bottom: -2px; z-index: 2; font-size: 10px; right: 3px;",
       class: "fjs-debug-columns",
       children: (field.layout || {}).columns || 'auto'
     });
@@ -60120,10 +60345,10 @@
     return formField;
   }
   class AddFormFieldHandler {
-    /**
-     * @constructor
-     * @param { import('../../../FormEditor').default } formEditor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../FormEditor').default } formEditor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formEditor, formFieldRegistry) {
       this._formEditor = formEditor;
@@ -60183,10 +60408,10 @@
   }
   AddFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
   class EditFormFieldHandler {
-    /**
-     * @constructor
-     * @param { import('../../../FormEditor').default } formEditor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../FormEditor').default } formEditor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formEditor, formFieldRegistry) {
       this._formEditor = formEditor;
@@ -60248,10 +60473,10 @@
   }
   EditFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
   class MoveFormFieldHandler {
-    /**
-     * @constructor
-     * @param { import('../../../FormEditor').default } formEditor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../FormEditor').default } formEditor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formEditor, formFieldRegistry) {
       this._formEditor = formEditor;
@@ -60339,10 +60564,10 @@
   }
   MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
   class RemoveFormFieldHandler {
-    /**
-     * @constructor
-     * @param { import('../../../FormEditor').default } formEditor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../FormEditor').default } formEditor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formEditor, formFieldRegistry) {
       this._formEditor = formEditor;
@@ -60401,9 +60626,9 @@
   }
   RemoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
   class UpdateIdClaimHandler {
-    /**
-     * @constructor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formFieldRegistry) {
       this._formFieldRegistry = formFieldRegistry;
@@ -60435,9 +60660,9 @@
   }
   UpdateIdClaimHandler.$inject = ['formFieldRegistry'];
   class UpdateKeyClaimHandler {
-    /**
-     * @constructor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formFieldRegistry) {
       this._formFieldRegistry = formFieldRegistry;
@@ -60781,8 +61006,8 @@
     constructor(eventBus) {
       super(eventBus);
 
-      /**
-       * Remove custom validation if <validationType> is about to be added.
+      /**
+       * Remove custom validation if <validationType> is about to be added.
        */
       // @ts-ignore-next-line
       this.preExecute('formField.edit', function (context) {
@@ -61320,10 +61545,10 @@
       });
     }
 
-    /**
-     * Attach the palette to a parent node.
-     *
-     * @param {HTMLElement} container
+    /**
+     * Attach the palette to a parent node.
+     *
+     * @param {HTMLElement} container
      */
     attachTo(container) {
       if (!container) {
@@ -61343,8 +61568,8 @@
       this._eventBus.fire('palette.attach');
     }
 
-    /**
-     * Detach the palette from its parent node.
+    /**
+     * Detach the palette from its parent node.
      */
     detach() {
       const parentNode = this._container.parentNode;
@@ -63699,11 +63924,11 @@
     return `bio-properties-panel-${id}`;
   }
 
-  /**
-   * @param {string} type
-   * @param {boolean} [strict]
-   *
-   * @returns {any}
+  /**
+   * @param {string} type
+   * @param {boolean} [strict]
+   *
+   * @returns {any}
    */
   function getService(type, strict) {}
   const PropertiesPanelContext = D$1({
@@ -63790,8 +64015,8 @@
     }
   };
 
-  /**
-   * Provide placeholders for empty and multiple state.
+  /**
+   * Provide placeholders for empty and multiple state.
    */
   const PropertiesPanelPlaceholderProvider = {
     getEmpty: () => {
@@ -63861,10 +64086,10 @@
     return getService(type, strict);
   }
 
-  /**
-   * Retrieve list of variables from the form schema.
-   *
-   * @returns { string[] } list of variables used in form schema
+  /**
+   * Retrieve list of variables from the form schema.
+   *
+   * @returns { string[] } list of variables used in form schema
    */
   function useVariables() {
     const form = useService('formEditor');
@@ -65122,7 +65347,7 @@
       id,
       label: 'Label',
       setValue,
-      validate: validateFactory(getValue())
+      validate: validateFactory(getValue(), entry => entry.label)
     });
   }
   function Value$1(props) {
@@ -65148,7 +65373,7 @@
       id,
       label: 'Value',
       setValue,
-      validate: validateFactory(getValue())
+      validate: validateFactory(getValue(), entry => entry.value)
     });
   }
   function CustomValueEntry(props) {
@@ -65237,14 +65462,14 @@
 
   // helpers //////////
 
-  /**
-   * Returns copy of object with updated value.
-   *
-   * @param {Object} properties
-   * @param {string} key
-   * @param {string} value
-   *
-   * @returns {Object}
+  /**
+   * Returns copy of object with updated value.
+   *
+   * @param {Object} properties
+   * @param {string} key
+   * @param {string} value
+   *
+   * @returns {Object}
    */
   function updateValue(properties, key, value) {
     return {
@@ -65253,14 +65478,14 @@
     };
   }
 
-  /**
-   * Returns copy of object with updated key.
-   *
-   * @param {Object} properties
-   * @param {string} oldKey
-   * @param {string} newKey
-   *
-   * @returns {Object}
+  /**
+   * Returns copy of object with updated key.
+   *
+   * @param {Object} properties
+   * @param {string} oldKey
+   * @param {string} newKey
+   *
+   * @returns {Object}
    */
   function updateKey(properties, oldKey, newKey) {
     return Object.entries(properties).reduce((newProperties, entry) => {
@@ -65386,13 +65611,13 @@
     const addEntry = e => {
       e.stopPropagation();
       const index = values.length + 1;
-      const entry = getIndexedEntry(index);
+      const entry = getIndexedEntry(index, values);
       editField(field, VALUES_SOURCES_PATHS[VALUES_SOURCES.STATIC], arrayAdd(values, values.length, entry));
     };
     const removeEntry = entry => {
       editField(field, VALUES_SOURCES_PATHS[VALUES_SOURCES.STATIC], without(values, entry));
     };
-    const validateFactory = key => {
+    const validateFactory = (key, getValue) => {
       return value => {
         if (value === key) {
           return;
@@ -65400,7 +65625,7 @@
         if (isUndefined(value) || !value.length) {
           return 'Must not be empty.';
         }
-        const isValueAssigned = values.find(entry => entry.value === value);
+        const isValueAssigned = values.find(entry => getValue(entry) === value);
         if (isValueAssigned) {
           return 'Must be unique.';
         }
@@ -65431,17 +65656,23 @@
 
   // helper
 
-  function getIndexedEntry(index) {
+  function getIndexedEntry(index, values) {
     const entry = {
       label: 'Value',
       value: 'value'
     };
+    while (labelOrValueIsAlreadyAssignedForIndex(index, values)) {
+      index++;
+    }
     if (index > 1) {
       entry.label += ` ${index}`;
       entry.value += `${index}`;
     }
     return entry;
   }
+  function labelOrValueIsAlreadyAssignedForIndex(index, values) {
+    return values.some(existingEntry => existingEntry.label === `Value ${index}` || existingEntry.value === `value${index}`);
+  }
   function AdornerEntry(props) {
     const {
       editField,
@@ -65886,8 +66117,8 @@
     };
     const valuesSourceId = `${fieldId}-valuesSource`;
 
-    /**
-     * @type {Array<Group|ListGroup>}
+    /**
+     * @type {Array<Group|ListGroup>}
      */
     const groups = [{
       id: valuesSourceId,
@@ -65934,12 +66165,13 @@
     }
     const addEntry = event => {
       event.stopPropagation();
-      const index = Object.keys(properties).length + 1;
-      const key = `key${index}`,
-        value = 'value';
+      let index = Object.keys(properties).length + 1;
+      while (`key${index}` in properties) {
+        index++;
+      }
       editField(field, ['properties'], {
         ...properties,
-        [key]: value
+        [`key${index}`]: 'value'
       });
     };
     const validateFactory = key => {
@@ -65987,13 +66219,13 @@
 
   // helpers //////////
 
-  /**
-   * Returns copy of object without key.
-   *
-   * @param {Object} properties
-   * @param {string} oldKey
-   *
-   * @returns {Object}
+  /**
+   * Returns copy of object without key.
+   *
+   * @param {Object} properties
+   * @param {string} oldKey
+   *
+   * @returns {Object}
    */
   function removeKey(properties, oldKey) {
     return Object.entries(properties).reduce((newProperties, entry) => {
@@ -66103,9 +66335,9 @@
     }, []);
     h(() => {
       const onFieldChanged = () => {
-        /**
-         * TODO(pinussilvestrus): update with actual updated element,
-         * once we have a proper updater/change support
+        /**
+         * TODO(pinussilvestrus): update with actual updated element,
+         * once we have a proper updater/change support
          */
         _update(selection.get() || schema);
       };
@@ -66155,10 +66387,10 @@
       });
     }
 
-    /**
-     * Attach the properties panel to a parent node.
-     *
-     * @param {HTMLElement} container
+    /**
+     * Attach the properties panel to a parent node.
+     *
+     * @param {HTMLElement} container
      */
     attachTo(container) {
       if (!container) {
@@ -66178,8 +66410,8 @@
       this._eventBus.fire('propertiesPanel.attach');
     }
 
-    /**
-     * Detach the properties panel from its parent node.
+    /**
+     * Detach the properties panel from its parent node.
      */
     detach() {
       const parentNode = this._container.parentNode;
@@ -66214,48 +66446,48 @@
   };
   const ids = new Ids([32, 36, 1]);
 
-  /**
-   * @typedef { import('./types').Injector } Injector
-   * @typedef { import('./types').Module } Module
-   * @typedef { import('./types').Schema } Schema
-   *
-   * @typedef { import('./types').FormEditorOptions } FormEditorOptions
-   * @typedef { import('./types').FormEditorProperties } FormEditorProperties
-   *
-   * @typedef { {
-   *   properties: FormEditorProperties,
-   *   schema: Schema
-   * } } State
-   *
-   * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
-   * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
-   * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
+  /**
+   * @typedef { import('./types').Injector } Injector
+   * @typedef { import('./types').Module } Module
+   * @typedef { import('./types').Schema } Schema
+   *
+   * @typedef { import('./types').FormEditorOptions } FormEditorOptions
+   * @typedef { import('./types').FormEditorProperties } FormEditorProperties
+   *
+   * @typedef { {
+   *   properties: FormEditorProperties,
+   *   schema: Schema
+   * } } State
+   *
+   * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
+   * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
+   * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
    */
 
-  /**
-   * The form editor.
+  /**
+   * The form editor.
    */
   class FormEditor {
-    /**
-     * @constructor
-     * @param {FormEditorOptions} options
+    /**
+     * @constructor
+     * @param {FormEditorOptions} options
      */
     constructor(options = {}) {
-      /**
-       * @public
-       * @type {OnEventType}
+      /**
+       * @public
+       * @type {OnEventType}
        */
       this.on = this._onEvent;
 
-      /**
-       * @public
-       * @type {String}
+      /**
+       * @public
+       * @type {String}
        */
       this._id = ids.next();
 
-      /**
-       * @private
-       * @type {Element}
+      /**
+       * @private
+       * @type {Element}
        */
       this._container = createFormContainer();
       this._container.setAttribute('input-handle-modified-keys', 'z,y');
@@ -66266,15 +66498,15 @@
         properties = {}
       } = options;
 
-      /**
-       * @private
-       * @type {any}
+      /**
+       * @private
+       * @type {any}
        */
       this.exporter = exporter;
 
-      /**
-       * @private
-       * @type {State}
+      /**
+       * @private
+       * @type {State}
        */
       this._state = {
         properties,
@@ -66303,10 +66535,10 @@
       this._detach(false);
     }
 
-    /**
-     * @param {Schema} schema
-     *
-     * @return {Promise<{ warnings: Array<any> }>}
+    /**
+     * @param {Schema} schema
+     *
+     * @return {Promise<{ warnings: Array<any> }>}
      */
     importSchema(schema) {
       return new Promise((resolve, reject) => {
@@ -66335,15 +66567,15 @@
       });
     }
 
-    /**
-     * @returns {Schema}
+    /**
+     * @returns {Schema}
      */
     saveSchema() {
       return this.getSchema();
     }
 
-    /**
-     * @returns {Schema}
+    /**
+     * @returns {Schema}
      */
     getSchema() {
       const {
@@ -66352,8 +66584,8 @@
       return exportSchema(schema, this.exporter, schemaVersion);
     }
 
-    /**
-     * @param {Element|string} parentNode
+    /**
+     * @param {Element|string} parentNode
      */
     attachTo(parentNode) {
       if (!parentNode) {
@@ -66371,10 +66603,10 @@
       this._detach();
     }
 
-    /**
-     * @internal
-     *
-     * @param {boolean} [emit]
+    /**
+     * @internal
+     *
+     * @param {boolean} [emit]
      */
     _detach(emit = true) {
       const container = this._container,
@@ -66388,9 +66620,9 @@
       parentNode.removeChild(container);
     }
 
-    /**
-     * @param {any} property
-     * @param {any} value
+    /**
+     * @param {any} property
+     * @param {any} value
      */
     setProperty(property, value) {
       const properties = set$1(this._getState().properties, [property], value);
@@ -66399,21 +66631,21 @@
       });
     }
 
-    /**
-     * @param {string} type
-     * @param {Function} handler
+    /**
+     * @param {string} type
+     * @param {Function} handler
      */
     off(type, handler) {
       this.get('eventBus').off(type, handler);
     }
 
-    /**
-     * @internal
-     *
-     * @param {FormEditorOptions} options
-     * @param {Element} container
-     *
-     * @returns {Injector}
+    /**
+     * @internal
+     *
+     * @param {FormEditorOptions} options
+     * @param {Element} container
+     *
+     * @returns {Injector}
      */
     _createInjector(options, container) {
       const {
@@ -66435,22 +66667,22 @@
       }, core, ...modules, ...additionalModules]);
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _emit(type, data) {
       this.get('eventBus').fire(type, data);
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _getState() {
       return this._state;
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _setState(state) {
       this._state = {
@@ -66460,15 +66692,15 @@
       this._emit('changed', this._getState());
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _getModules() {
       return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, MarkdownModule, PropertiesPanelModule];
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _onEvent(type, priority, handler) {
       this.get('eventBus').on(type, priority, handler);
@@ -67971,8 +68203,8 @@
     return new LanguageSupport(jsonLanguage);
   }
 
-  /**
-   * @type {Facet<import('..').Variables>} Variables
+  /**
+   * @type {Facet<import('..').Variables>} Variables
    */
   const variablesFacet = Facet.define();
 
@@ -68011,8 +68243,8 @@
     let language = new Compartment().of(json());
     let tabSize = new Compartment().of(EditorState.tabSize.of(2));
 
-    /**
-     * @typedef {Array<string>} Variables
+    /**
+     * @typedef {Array<string>} Variables
      */
 
     const autocompletionConf = new Compartment();
@@ -68051,8 +68283,8 @@
       return view.state.doc.toString();
     };
 
-    /**
-     * @param {Variables} variables
+    /**
+     * @param {Variables} variables
      */
     this.setVariables = function (variables) {
       view.setVariables(variables);