@bpmn-io/form-js-editor 1.21.3 → 1.23.0

package/dist/index.es.js

@@ -11,14 +11,20 @@ import { createPortal, useRef as useRef$1, useContext as useContext$1, useEffect
 import dragula from '@bpmn-io/draggle';
 import { classes, query, event, domify } from 'min-dom';
 import { arrayMoveMutable } from 'array-move';
-import { FeelersEditor } from 'feelers';
-import Editor from '@bpmn-io/feel-editor';
 import { EditorView, lineNumbers } from '@codemirror/view';
+import { Annotation } from '@codemirror/state';
+import '@codemirror/language';
+import '@codemirror/autocomplete';
+import '@codemirror/commands';
+import { jsonParseLinter } from '@codemirror/lang-json';
+import '@codemirror/lint';
+import { FeelersEditor } from '@bpmn-io/feelers-editor';
+import Editor from '@bpmn-io/feel-editor';
 import * as focusTrap from 'focus-trap';
 import Big from 'big.js';
 
 var FN_REF = '__fn';
-var DEFAULT_PRIORITY$3 = 1000;
+var DEFAULT_PRIORITY$4 = 1000;
 var slice = Array.prototype.slice;
 
 /**
@@ -186,7 +192,7 @@ EventBus.prototype.on = function (events, priority, callback, that) {
   if (isFunction(priority)) {
     that = callback;
     callback = priority;
-    priority = DEFAULT_PRIORITY$3;
+    priority = DEFAULT_PRIORITY$4;
   }
   if (!isNumber(priority)) {
     throw new Error('priority must be a number');
@@ -237,7 +243,7 @@ EventBus.prototype.once = function (events, priority, callback, that) {
   if (isFunction(priority)) {
     that = callback;
     callback = priority;
-    priority = DEFAULT_PRIORITY$3;
+    priority = DEFAULT_PRIORITY$4;
   }
   if (!isNumber(priority)) {
     throw new Error('priority must be a number');
@@ -2271,6 +2277,27 @@ function ContextPad(props) {
     children: props.children
   });
 }
+function ContextPadContent(props) {
+  const {
+    field
+  } = props;
+  const formFieldContextActions = useService$1('formFieldContextActions');
+  const selection = useService$1('selection');
+  if (!selection.isSelected(field) || field.type === 'default') {
+    return null;
+  }
+  const entries = formFieldContextActions.getEntries(field);
+  const actionEntries = Object.entries(entries).filter(([, entry]) => entry.group !== 'morph');
+  return jsx(ContextPad, {
+    children: actionEntries.map(([entryId, entry]) => jsx("button", {
+      type: "button",
+      title: entry.title,
+      class: "fjs-context-pad-item",
+      onClick: entry.action,
+      children: jsx(SvgDelete, {})
+    }, entryId))
+  });
+}
 function EmptyGroup() {
   return jsx("div", {
     class: "fjs-empty-component",
@@ -2308,9 +2335,6 @@ function Empty(props) {
 }
 function Element$1(props) {
   const eventBus = useService$1('eventBus'),
-    formFieldRegistry = useService$1('formFieldRegistry'),
-    formFields = useService$1('formFields'),
-    modeling = useService$1('modeling'),
     selection = useService$1('selection');
   const {
     hoverInfo
@@ -2383,12 +2407,6 @@ function Element$1(props) {
     }
     return classes.join(' ');
   }, [hovered, isSelected, props.class, showOutline, type]);
-  const onRemove = event => {
-    event.stopPropagation();
-    const parentField = formFieldRegistry.get(field._parent);
-    const index = getFormFieldIndex(parentField, field);
-    modeling.removeFormField(field, parentField, index);
-  };
   const onKeyPress = event => {
     if (event.key === 'Enter') {
       event.stopPropagation();
@@ -2413,14 +2431,8 @@ function Element$1(props) {
     ref: ref,
     children: [jsx(DebugColumns, {
       field: field
-    }), jsx(ContextPad, {
-      children: selection.isSelected(field) && field.type !== 'default' ? jsx("button", {
-        type: "button",
-        title: getRemoveButtonTitle(field, formFields),
-        class: "fjs-context-pad-item",
-        onClick: onRemove,
-        children: jsx(SvgDelete, {})
-      }) : null
+    }), jsx(ContextPadContent, {
+      field: field
     }), props.children, jsx(FieldResizer, {
       position: "left",
       field: field
@@ -2449,9 +2461,16 @@ function Children(props) {
     field
   } = props;
   const {
-    id
+    id,
+    type,
+    _parent
   } = field;
   const classes = ['fjs-children', DROP_CONTAINER_VERTICAL_CLS];
+
+  // mark the top-level (root form) drop container
+  if (type === 'default' && !_parent) {
+    classes.push('fjs-editor-form-root');
+  }
   if (props.class) {
     classes.push(...props.class.split(' '));
   }
@@ -2668,17 +2687,6 @@ function FormEditor$1() {
     })
   });
 }
-function getFormFieldIndex(parent, formField) {
-  let fieldFormIndex = parent.components.length;
-  parent.components.forEach(({
-    id
-  }, index) => {
-    if (id === formField.id) {
-      fieldFormIndex = index;
-    }
-  });
-  return fieldFormIndex;
-}
 function CreatePreview(props) {
   const {
     drake
@@ -2693,7 +2701,7 @@ function CreatePreview(props) {
 
       // (1) field preview
       if (fieldType) {
-        const paletteEntry = findPaletteEntry(fieldType, formFields);
+        const paletteEntry = findPaletteEntry$1(fieldType, formFields);
         if (!paletteEntry) {
           return;
         }
@@ -2737,19 +2745,12 @@ function CreatePreview(props) {
 
 // helper //////
 
-function findPaletteEntry(type, formFields) {
+function findPaletteEntry$1(type, formFields) {
   return collectPaletteEntries(formFields).find(entry => entry.type === type);
 }
 function defaultPropertiesPanel(propertiesPanelConfig) {
   return !(propertiesPanelConfig && propertiesPanelConfig.parent);
 }
-function getRemoveButtonTitle(formField, formFields) {
-  const entry = findPaletteEntry(formField.type, formFields);
-  if (!entry) {
-    return 'Remove form field';
-  }
-  return `Remove ${entry.label}`;
-}
 
 class Renderer {
   constructor(renderConfig, eventBus, formEditor, injector) {
@@ -2837,6 +2838,155 @@ const CoreModule = {
   fieldFactory: ['type', FieldFactory]
 };
 
+const DEFAULT_PRIORITY$3 = 1000;
+
+/**
+ * A service that manages context pad action providers for form fields.
+ * Providers can register to contribute context pad entries for specific
+ * form field types.
+ *
+ * Inspired by the diagram-js ContextPad + provider pattern.
+ *
+ * @param {import('../../core/EventBus').EventBus} eventBus
+ */
+class FormFieldContextActions {
+  constructor(eventBus) {
+    this._eventBus = eventBus;
+  }
+
+  /**
+   * Register a context pad provider with the default priority.
+   *
+   * @overlord
+   * @param {Object} provider
+   */
+
+  /**
+   * Register a context pad provider with the given priority.
+   *
+   * @param {number} priority
+   * @param {Object} provider
+   */
+  registerProvider(priority, provider) {
+    if (!provider) {
+      provider = priority;
+      priority = DEFAULT_PRIORITY$3;
+    }
+    this._eventBus.on('formFieldContextActions.getProviders', priority, function (event) {
+      event.providers.push(provider);
+    });
+  }
+
+  /**
+   * Get context pad entries for the given form field.
+   *
+   * @param {Object} formField
+   *
+   * @return {Object} entries map
+   */
+  getEntries(formField) {
+    const providers = this._getProviders();
+    let entries = {};
+    forEach(providers, function (provider) {
+      if (!isFunction(provider.getContextPadEntries)) {
+        return;
+      }
+      const entriesOrUpdater = provider.getContextPadEntries(formField);
+      if (isFunction(entriesOrUpdater)) {
+        entries = entriesOrUpdater(entries);
+      } else {
+        forEach(entriesOrUpdater, function (entry, id) {
+          entries[id] = entry;
+        });
+      }
+    });
+    return entries;
+  }
+  _getProviders() {
+    const event = this._eventBus.createEvent({
+      type: 'formFieldContextActions.getProviders',
+      providers: []
+    });
+    this._eventBus.fire(event);
+    return event.providers;
+  }
+}
+FormFieldContextActions.$inject = ['eventBus'];
+
+/**
+ * A context pad provider that contributes the delete action for form fields.
+ *
+ * @param {import('./FormFieldContextActions').FormFieldContextActions} formFieldContextActions
+ * @param {import('../modeling/Modeling').Modeling} modeling
+ * @param {import('../../core/FormFieldRegistry').FormFieldRegistry} formFieldRegistry
+ * @param {import('../../render/EditorFormFields').EditorFormFields} formFields
+ */
+class DeleteActionProvider {
+  constructor(formFieldContextActions, modeling, formFieldRegistry, formFields) {
+    this._modeling = modeling;
+    this._formFieldRegistry = formFieldRegistry;
+    this._formFields = formFields;
+    formFieldContextActions.registerProvider(500, this);
+  }
+
+  /**
+   * @param {Object} formField
+   * @return {Object} entries
+   */
+  getContextPadEntries(formField) {
+    if (formField.type === 'default') {
+      return {};
+    }
+    const modeling = this._modeling;
+    const formFieldRegistry = this._formFieldRegistry;
+    const formFields = this._formFields;
+    return {
+      delete: {
+        action: event => {
+          event.stopPropagation();
+          const parentField = formFieldRegistry.get(formField._parent);
+          const index = getFormFieldIndex(parentField, formField);
+          modeling.removeFormField(formField, parentField, index);
+        },
+        title: getRemoveButtonTitle(formField, formFields),
+        icon: 'delete',
+        group: 'actions'
+      }
+    };
+  }
+}
+DeleteActionProvider.$inject = ['formFieldContextActions', 'modeling', 'formFieldRegistry', 'formFields'];
+
+// helpers //////////
+
+function getFormFieldIndex(parent, formField) {
+  let fieldFormIndex = parent.components.length;
+  parent.components.forEach(({
+    id
+  }, index) => {
+    if (id === formField.id) {
+      fieldFormIndex = index;
+    }
+  });
+  return fieldFormIndex;
+}
+function findPaletteEntry(type, formFields) {
+  return collectPaletteEntries(formFields).find(entry => entry.type === type);
+}
+function getRemoveButtonTitle(formField, formFields) {
+  const entry = findPaletteEntry(formField.type, formFields);
+  if (!entry) {
+    return 'Remove form field';
+  }
+  return `Remove ${entry.label}`;
+}
+
+const ContextPadModule = {
+  __init__: ['formFieldContextActions', 'deleteActionProvider'],
+  formFieldContextActions: ['type', FormFieldContextActions],
+  deleteActionProvider: ['type', DeleteActionProvider]
+};
+
 /**
  * @typedef {import('didi').Injector} Injector
  *
@@ -5564,6 +5714,28 @@ OpenPopupIcon.defaultProps = {
   viewBox: "0 0 16 16"
 };
 
+/**
+ * @typedef { {
+ *   [key: string]: string;
+ * } } TranslateReplacements
+ */
+
+/**
+ * A simple translation stub to be used for multi-language support.
+ * Can be easily replaced with a more sophisticated solution.
+ *
+ * @param {string} template to interpolate
+ * @param {TranslateReplacements} [replacements] a map with substitutes
+ *
+ * @return {string} the translated string
+ */
+function translateFallback(template, replacements) {
+  replacements = replacements || {};
+  return template.replace(/{([^}]+)}/g, function (_, key) {
+    return replacements[key] || '{' + key + '}';
+  });
+}
+
 /**
  * @typedef { {
  *  getElementLabel: (element: object) => string,
@@ -5575,13 +5747,15 @@ OpenPopupIcon.defaultProps = {
 
 /**
  * @param {Object} props
- * @param {Object} props.element,
+ * @param {Object} props.element
  * @param {HeaderProvider} props.headerProvider
+ * @param {Function} [props.translate]
  */
 function Header(props) {
   const {
     element,
-    headerProvider
+    headerProvider,
+    translate = translateFallback
   } = props;
   const {
     getElementIcon,
@@ -5617,7 +5791,7 @@ function Header(props) {
         rel: "noreferrer",
         class: "bio-properties-panel-header-link",
         href: documentationRef,
-        title: "Open documentation",
+        title: translate('Open documentation'),
         target: "_blank",
         children: jsx(ExternalLinkIcon, {})
       }) : null
@@ -5957,10 +6131,10 @@ function useDescriptionContext(id, element) {
 function useDebounce(callback, debounceFn) {
   const debouncedCallback = useCallback(debounceFn(callback), [callback, debounceFn]);
 
-  // make sure previous call is not stalled
+  // flush pending calls before unmount the debounced function
   useEffect(() => {
     return () => {
-      debouncedCallback.cancel?.();
+      debouncedCallback.flush?.();
     };
   }, [debouncedCallback]);
   return debouncedCallback;
@@ -6208,7 +6382,8 @@ function Group(props) {
     entries = [],
     id,
     label,
-    shouldOpen = false
+    shouldOpen = false,
+    translate = translateFallback
   } = props;
   const groupRef = useRef(null);
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], shouldOpen);
@@ -6261,17 +6436,17 @@ function Group(props) {
           value: props.tooltip,
           forId: 'group-' + id,
           element: element,
-          parent: groupRef,
           children: label
         })
       }), jsxs("div", {
         class: "bio-properties-panel-group-header-buttons",
         children: [jsx(DataMarker, {
           edited: edited,
-          hasErrors: hasErrors
+          hasErrors: hasErrors,
+          translate: translate
         }), jsx("button", {
           type: "button",
-          title: "Toggle section",
+          title: translate('Toggle section'),
           class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
           children: jsx(ArrowIcon, {
             class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
@@ -6300,17 +6475,18 @@ function Group(props) {
 function DataMarker(props) {
   const {
     edited,
-    hasErrors
+    hasErrors,
+    translate = translateFallback
   } = props;
   if (hasErrors) {
     return jsx("div", {
-      title: "Section contains an error",
+      title: translate('Section contains an error'),
       class: "bio-properties-panel-dot bio-properties-panel-dot--error"
     });
   }
   if (edited) {
     return jsx("div", {
-      title: "Section contains edits",
+      title: translate('Section contains edits'),
       class: "bio-properties-panel-dot"
     });
   }
@@ -6359,7 +6535,7 @@ const DEFAULT_TOOLTIP = {};
  *    autoOpen?: Boolean,
  *    entries: Array<EntryDefinition>,
  *    id: String,
- *    label: String,
+ *    label: String|import('preact').ComponentChildren,
  *    remove: (event: MouseEvent) => void
  * } } ListItemDefinition
  *
@@ -6370,7 +6546,8 @@ const DEFAULT_TOOLTIP = {};
  *    id: String,
  *    items: Array<ListItemDefinition>,
  *    label: String,
- *    shouldOpen?: Boolean
+ *    shouldOpen?: Boolean,
+ *    translate?: Function
  * } } ListGroupDefinition
  *
  * @typedef { {
@@ -6378,7 +6555,8 @@ const DEFAULT_TOOLTIP = {};
  *    entries: Array<EntryDefinition>,
  *    id: String,
  *    label: String,
- *    shouldOpen?: Boolean
+ *    shouldOpen?: Boolean,
+ *    translate?: Function
  * } } GroupDefinition
  *
  *  @typedef { {
@@ -6412,9 +6590,12 @@ const DEFAULT_TOOLTIP = {};
  * A basic properties panel component. Describes *how* content will be rendered, accepts
  * data from implementor to describe *what* will be rendered.
  *
+ * If `headerProvider` is omitted (or `null`), the built-in `<Header>` is not rendered;
+ * consumers can render `<Header>` standalone elsewhere using the same provider shape.
+ *
  * @param {Object} props
  * @param {Object|Array} props.element
- * @param {import('./components/Header').HeaderProvider} props.headerProvider
+ * @param {import('./components/Header').HeaderProvider} [props.headerProvider]
  * @param {PlaceholderProvider} [props.placeholderProvider]
  * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
  * @param {Object} [props.layoutConfig]
@@ -6543,10 +6724,10 @@ function PropertiesPanel$1(props) {
               value: eventContext,
               children: jsxs("div", {
                 class: "bio-properties-panel",
-                children: [jsx(Header, {
+                children: [headerProvider ? jsx(Header, {
                   element: element,
                   headerProvider: headerProvider
-                }), jsx("div", {
+                }) : null, jsx("div", {
                   class: "bio-properties-panel-scroll-container",
                   children: groups.map(group => {
                     const {
@@ -6608,28 +6789,6 @@ function useUpdateLayoutEffect(effect, deps) {
     }
   }, deps);
 }
-
-/**
- * @typedef { {
- *   [key: string]: string;
- * } } TranslateReplacements
- */
-
-/**
- * A simple translation stub to be used for multi-language support.
- * Can be easily replaced with a more sophisticated solution.
- *
- * @param {string} template to interpolate
- * @param {TranslateReplacements} [replacements] a map with substitutes
- *
- * @return {string} the translated string
- */
-function translateFallback(template, replacements) {
-  replacements = replacements || {};
-  return template.replace(/{([^}]+)}/g, function (_, key) {
-    return replacements[key] || '{' + key + '}';
-  });
-}
 function CollapsibleEntry(props) {
   const {
     element,
@@ -6807,7 +6966,6 @@ function ListGroup(props) {
           value: props.tooltip,
           forId: 'group-' + id,
           element: element,
-          parent: groupRef,
           children: label
         })
       }), jsxs("div", {
@@ -6997,7 +7155,7 @@ function CheckboxEntry(props) {
     })]
   });
 }
-function isEdited$8(node) {
+function isEdited$9(node) {
   return node && !!node.checked;
 }
 
@@ -7006,6 +7164,8 @@ function isEdited$8(node) {
 function prefixId$8(id) {
   return `bio-properties-panel-${id}`;
 }
+Annotation.define();
+jsonParseLinter();
 
 /**
  * Button to open popups.
@@ -7013,13 +7173,14 @@ function prefixId$8(id) {
  * @param {Object} props
  * @param {Function} props.onClick - Callback to trigger when the button is clicked.
  * @param {string} [props.title] - Tooltip text for the button.
- * @param {boolean} [props.disabled] - Whether the button is disabled.
- * @param {string} [props.className] - Additional class names for the button.
+ * @param {Function} [props.translate] - Translation function for built-in strings.
  */
 function OpenPopupButton({
   onClick,
-  title = 'Open pop-up editor'
+  title,
+  translate = translateFallback
 }) {
+  title = title ?? translate('Open pop-up editor');
   return jsx("button", {
     type: "button",
     title: title,
@@ -7160,6 +7321,7 @@ const FeelEditor = forwardRef((props, ref) => {
     value,
     onInput,
     onKeyDown: onKeyDownProp = noop$4,
+    onBlur = noop$4,
     onFeelToggle = noop$4,
     onLint = noop$4,
     onOpenPopup = noop$4,
@@ -7168,7 +7330,8 @@ const FeelEditor = forwardRef((props, ref) => {
     disabled,
     tooltipContainer,
     variables,
-    feelLanguageContext
+    feelLanguageContext,
+    translate = translateFallback
   } = props;
   const inputRef = useRef();
   const [editor, setEditor] = useState();
@@ -7183,6 +7346,9 @@ const FeelEditor = forwardRef((props, ref) => {
     onInput(newValue);
     setLocalValue(newValue);
   });
+  const handleBlur = useStaticCallback(() => {
+    onBlur();
+  });
   useEffect(() => {
     let editor;
 
@@ -7209,13 +7375,16 @@ const FeelEditor = forwardRef((props, ref) => {
       onKeyDown: onKeyDown,
       onLint: onLint,
       placeholder: placeholder,
+      readOnly: disabled,
       tooltipContainer: tooltipContainer,
       value: localValue,
       variables,
       builtins,
       dialect,
       parserDialect,
-      extensions: [...(enableGutters ? [lineNumbers()] : []), EditorView.lineWrapping],
+      extensions: [...(enableGutters ? [lineNumbers()] : []), EditorView.lineWrapping, EditorView.domEventHandlers({
+        blur: handleBlur
+      })],
       contentAttributes
     });
     setEditor(editor);
@@ -7254,14 +7423,15 @@ const FeelEditor = forwardRef((props, ref) => {
     class: classnames('bio-properties-panel-feel-editor-container', disabled ? 'disabled' : null, popupOpen ? 'popupOpen' : null),
     children: [popupOpen && jsx("div", {
       class: "bio-properties-panel-feel-editor__open-popup-placeholder",
-      children: "Opened in editor"
+      children: translate('Opened in editor')
     }), jsx("div", {
       name: props.name,
       class: classnames('bio-properties-panel-input', localValue ? 'edited' : null),
       ref: inputRef,
       onClick: handleClick
     }), !disabled && jsx(OpenPopupButton, {
-      onClick: () => onOpenPopup('feel')
+      onClick: () => onOpenPopup('feel'),
+      translate: translate
     })]
   });
 });
@@ -7283,16 +7453,22 @@ const noop$3 = () => {};
  * @param {Object} props
  * @param {Object} props.label
  * @param {String} props.feel
+ * @param {boolean} props.active
+ * @param {boolean} props.disabled
+ * @param {Function} props.onClick
+ * @param {Function} props.translate
+ * @returns {import('preact').Component}
  */
 function FeelIcon(props) {
   const {
     feel = false,
     active,
     disabled = false,
-    onClick = noop$3
+    onClick = noop$3,
+    translate = translateFallback
   } = props;
-  const feelRequiredLabel = 'FEEL expression is mandatory';
-  const feelOptionalLabel = `Click to ${active ? 'remove' : 'set a'} dynamic value with FEEL expression`;
+  const feelRequiredLabel = translate('FEEL expression is mandatory');
+  const feelOptionalLabel = translate(`Click to ${active ? 'remove' : 'set a'} dynamic value with FEEL expression`);
   const handleClick = e => {
     onClick(e);
 
@@ -7561,12 +7737,14 @@ function NumberFieldEntry(props) {
     }
   }, [value, validate]);
   const onInput = newValue => {
-    let newValidationError = null;
-    if (isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
+    if (newValue !== value) {
+      let newValidationError = null;
+      if (isFunction(validate)) {
+        newValidationError = validate(newValue) || null;
+      }
+      setValue(newValue, newValidationError);
+      setLocalError(newValidationError);
     }
-    setValue(newValue, newValidationError);
-    setLocalError(newValidationError);
   };
   const error = globalError || localError;
   return jsxs("div", {
@@ -7629,6 +7807,7 @@ const noop$2 = () => {};
  * @param {Array} props.variables
  * @param {string} [props.placeholder]
  * @param {string | import('preact').Component} props.tooltip
+ * @param {Function} props.translate
  */
 function FeelTextfield(props) {
   const {
@@ -7648,7 +7827,8 @@ function FeelTextfield(props) {
     singleLine,
     tooltipContainer,
     OptionalComponent = OptionalFeelInput,
-    tooltip
+    tooltip,
+    translate
   } = props;
   const [localValue, setLocalValue] = useState(getInitialFeelLocalValue(feel, value));
   const editorRef = useShowEntryEvent(id);
@@ -7679,19 +7859,23 @@ function FeelTextfield(props) {
    * @type { import('min-dash').DebouncedFunction }
    */
   const handleInput = useDebounce(onInput, debounce);
+  const setAndCommitValue = newValue => {
+    // cancel any pending debounced value
+    handleInput.cancel?.();
+    setLocalValue(newValue);
+    onInput(newValue);
+  };
   const handleFeelToggle = useStaticCallback(() => {
     if (feel === 'required') {
       return;
     }
     if (!feelActive) {
-      setLocalValue('=' + localValue);
-      handleInput('=' + localValue);
+      setAndCommitValue('=' + localValue);
     } else {
-      setLocalValue(feelOnlyValue);
-      handleInput(feelOnlyValue);
+      setAndCommitValue(feelOnlyValue);
     }
   });
-  const handleLocalInput = (newValue, useDebounce = true) => {
+  const handleInputChange = newValue => {
     if (feelActive) {
       newValue = '=' + newValue;
     }
@@ -7699,28 +7883,32 @@ function FeelTextfield(props) {
       return;
     }
     setLocalValue(newValue);
-    if (useDebounce) {
-      handleInput(newValue);
-    } else {
-      onInput(newValue);
-    }
+    handleInput(newValue);
     if (!feelActive && isString(newValue) && newValue.startsWith('=')) {
       // focus is behind `=` sign that will be removed
       setFocus(-1);
     }
   };
-  const handleOnBlur = e => {
-    handleInput.cancel?.();
+  const handleOptionalInputOnBlur = e => {
     if (e.target.type === 'checkbox') {
-      onInput(e.target.checked);
+      setAndCommitValue(e.target.checked);
     } else {
       const trimmedValue = e.target.value.trim();
-      handleLocalInput(trimmedValue, false);
+      if (trimmedValue !== localValue) {
+        // Trim changed the value — commit trimmed
+        setAndCommitValue(trimmedValue);
+      } else {
+        // Value unchanged — flush any pending debounce
+        handleInput.flush?.();
+      }
     }
     if (onBlur) {
       onBlur(e);
     }
   };
+  const handleFeelEditorOnBlur = () => {
+    handleInput.flush?.();
+  };
   const handleOnKeyDown = e => {
     if (isCmdWithChar(e)) {
       handleInput.flush?.();
@@ -7729,7 +7917,7 @@ function FeelTextfield(props) {
   const handleLint = useStaticCallback((lint = []) => {
     const syntaxError = lint.some(report => report.type === 'Syntax Error');
     if (syntaxError) {
-      onError('Unparsable FEEL expression.');
+      onError(translate('Unparsable FEEL expression.'));
     } else {
       onError(undefined);
     }
@@ -7740,7 +7928,7 @@ function FeelTextfield(props) {
       entryId: id,
       hostLanguage,
       label,
-      onInput: handleLocalInput,
+      onInput: handleInputChange,
       singleLine,
       sourceElement: editorRef.current,
       tooltipContainer,
@@ -7800,14 +7988,18 @@ function FeelTextfield(props) {
         });
         return;
       }
-      const input = event.target;
-      const isFieldEmpty = !input.value;
-      const isAllSelected = input.selectionStart === 0 && input.selectionEnd === input.value.length;
+      const target = event.target;
+
+      // Skip for non-input/textArea elements (e.g. CodeMirror contenteditable)
+      if (!(target instanceof HTMLInputElement) && !(target instanceof HTMLTextAreaElement)) {
+        return;
+      }
+      const isFieldEmpty = !target.value;
+      const isAllSelected = target.selectionStart === 0 && target.selectionEnd === target.value.length;
       if (isFieldEmpty || isAllSelected) {
         const textData = event.clipboardData.getData('text');
         const trimmedValue = textData.trim();
-        setLocalValue(trimmedValue);
-        handleInput(trimmedValue);
+        setAndCommitValue(trimmedValue);
         if (!feelActive && isString(trimmedValue) && trimmedValue.startsWith('=')) {
           setFocus(trimmedValue.length - 1);
         }
@@ -7840,7 +8032,8 @@ function FeelTextfield(props) {
         label: label,
         feel: feel,
         onClick: handleFeelToggle,
-        active: feelActive
+        active: feelActive,
+        translate: translate
       })]
     }), jsxs("div", {
       class: "bio-properties-panel-feel-container",
@@ -7851,7 +8044,8 @@ function FeelTextfield(props) {
         onClick: handleFeelToggle
       }), feelActive ? jsx(FeelEditor, {
         name: id,
-        onInput: handleLocalInput,
+        onInput: handleInputChange,
+        onBlur: handleFeelEditorOnBlur,
         onKeyDown: handleOnKeyDown,
         contentAttributes: {
           'id': prefixId$5(id),
@@ -7870,13 +8064,14 @@ function FeelTextfield(props) {
         variables: variables,
         feelLanguageContext: feelLanguageContext,
         ref: editorRef,
-        tooltipContainer: tooltipContainer
+        tooltipContainer: tooltipContainer,
+        translate: translate
       }) : jsx(OptionalComponent, {
         ...props,
         popupOpen: isPopupOpen,
-        onInput: handleLocalInput,
+        onInput: handleInputChange,
         onKeyDown: handleOnKeyDown,
-        onBlur: handleOnBlur,
+        onBlur: handleOptionalInputOnBlur,
         contentAttributes: {
           'id': prefixId$5(id),
           'aria-label': label
@@ -8139,7 +8334,8 @@ function FeelEntry(props) {
     onFocus,
     onBlur,
     placeholder,
-    tooltip
+    tooltip,
+    translate = translateFallback
   } = props;
   const [validationError, setValidationError] = useState(null);
   const [localError, setLocalError] = useState(null);
@@ -8152,16 +8348,16 @@ function FeelEntry(props) {
   }, [value, validate]);
   const onInput = useStaticCallback(newValue => {
     const value = getValue(element);
-    let newValidationError = null;
-    if (isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
-    }
 
-    // don't create multiple commandStack entries for the same value
+    // don't create multiple commandStack entries and do validation for the same value
     if (newValue !== value) {
+      let newValidationError = null;
+      if (isFunction(validate)) {
+        newValidationError = validate(newValue) || null;
+      }
       setValue(newValue, newValidationError);
+      setValidationError(newValidationError);
     }
-    setValidationError(newValidationError);
   });
   const onError = useCallback(err => {
     setLocalError(err);
@@ -8188,6 +8384,7 @@ function FeelEntry(props) {
       hostLanguage: hostLanguage,
       singleLine: singleLine,
       show: show,
+      translate: translate,
       value: value,
       variables: variables,
       tooltipContainer: tooltipContainer,
@@ -8497,12 +8694,14 @@ function SelectEntry(props) {
     }
   }, [value, validate]);
   const onChange = newValue => {
-    let newValidationError = null;
-    if (isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
+    if (newValue !== value) {
+      let newValidationError = null;
+      if (isFunction(validate)) {
+        newValidationError = validate(newValue) || null;
+      }
+      setValue(newValue, newValidationError);
+      setLocalError(newValidationError);
     }
-    setValue(newValue, newValidationError);
-    setLocalError(newValidationError);
   };
   const error = globalError || localError;
   return jsxs("div", {
@@ -8711,14 +8910,14 @@ function TextAreaEntry(props) {
   }, [value, validate]);
   const onInput = useStaticCallback(newValue => {
     const value = getValue(element);
-    let newValidationError = null;
-    if (isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
-    }
     if (newValue !== value) {
+      let newValidationError = null;
+      if (isFunction(validate)) {
+        newValidationError = validate(newValue) || null;
+      }
       setValue(newValue, newValidationError);
+      setLocalError(newValidationError);
     }
-    setLocalError(newValidationError);
   });
   const error = globalError || localError;
   return jsxs("div", {
@@ -8909,14 +9108,14 @@ function TextfieldEntry(props) {
   }, [value, validate]);
   const onInput = useStaticCallback(newValue => {
     const value = getValue(element);
-    let newValidationError = null;
-    if (isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
-    }
     if (newValue !== value) {
+      let newValidationError = null;
+      if (isFunction(validate)) {
+        newValidationError = validate(newValue) || null;
+      }
       setValue(newValue, newValidationError);
+      setLocalError(newValidationError);
     }
-    setLocalError(newValidationError);
   });
   const error = globalError || localError;
   return jsxs("div", {
@@ -11299,7 +11498,7 @@ function Text(props) {
   };
   return FeelTemplatingEntry({
     debounce,
-    description: description$3,
+    description: description$2,
     element: field,
     getValue,
     id,
@@ -11309,7 +11508,7 @@ function Text(props) {
     variables
   });
 }
-const description$3 = jsxs(Fragment$1, {
+const description$2 = 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",
@@ -11352,7 +11551,7 @@ function Content(props) {
   };
   return FeelTemplatingEntry({
     debounce,
-    description: description$2,
+    description: description$1,
     element: field,
     getValue,
     id,
@@ -11366,7 +11565,7 @@ function Content(props) {
 
 // helpers //////////
 
-const description$2 = jsxs(Fragment$1, {
+const description$1 = 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",
@@ -11603,7 +11802,7 @@ function NumberSerializationEntry(props) {
   entries.push({
     id: 'serialize-to-string',
     component: SerializeToString,
-    isEdited: isEdited$8,
+    isEdited: isEdited$9,
     editField,
     field,
     isDefaultVisible: field => field.type === 'number'
@@ -11656,7 +11855,7 @@ function DateTimeEntry(props) {
   entries.push({
     id: 'use24h',
     component: Use24h,
-    isEdited: isEdited$8,
+    isEdited: isEdited$9,
     editField,
     field,
     isDefaultVisible: field => field.type === 'datetime' && (field.subtype === DATETIME_SUBTYPES.TIME || field.subtype === DATETIME_SUBTYPES.DATETIME)
@@ -11769,7 +11968,7 @@ function DateTimeConstraintsEntry(props) {
   entries.push({
     id: id + '-disallowPassedDates',
     component: DisallowPassedDates,
-    isEdited: isEdited$8,
+    isEdited: isEdited$9,
     editField,
     field,
     isDefaultVisible: isDefaultVisible([DATETIME_SUBTYPES.DATE, DATETIME_SUBTYPES.DATETIME])
@@ -13242,13 +13441,13 @@ function Accept(props) {
     singleLine: true,
     setValue,
     variables,
-    description: description$1
+    description
   });
 }
 
 // helpers //////////
 
-const description$1 = jsxs(Fragment$1, {
+const description = jsxs(Fragment$1, {
   children: ["A comma-separated list of", ' ', jsx("a", {
     href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers",
     target: "_blank",
@@ -13433,7 +13632,7 @@ function MaxHeight(props) {
     getValue,
     setValue,
     validate,
-    description
+    tooltip
   });
 }
 
@@ -13457,9 +13656,7 @@ const validate = value => {
     return 'Should be greater than zero.';
   }
 };
-const description = jsx(Fragment$1, {
-  children: "Documents with height that exceeds the defined value will be vertically scrollable"
-});
+const tooltip = 'Documents whose height exceeds the defined value in pixels will be vertically scrollable';
 
 function GeneralGroup(field, editField, getService) {
   const entries = [...IdEntry({
@@ -13628,7 +13825,7 @@ function ValidationGroup(field, editField) {
     component: Required,
     getValue,
     field,
-    isEdited: isEdited$8,
+    isEdited: isEdited$9,
     onChange,
     isDefaultVisible: field => INPUTS.includes(field.type)
   }];
@@ -14761,7 +14958,7 @@ class FormEditor {
    * @internal
    */
   _getModules() {
-    return [ModelingModule, EditorActionsModule, FormEditorKeyboardModule, DraggingModule, SelectionModule, PaletteModule, EditorExpressionLanguageModule, MarkdownRendererModule, PropertiesPanelModule, RenderInjectionModule, RepeatRenderModule];
+    return [ContextPadModule, ModelingModule, EditorActionsModule, FormEditorKeyboardModule, DraggingModule, SelectionModule, PaletteModule, EditorExpressionLanguageModule, MarkdownRendererModule, PropertiesPanelModule, RenderInjectionModule, RepeatRenderModule];
   }
 
   /**
@@ -14813,5 +15010,5 @@ function createFormEditor(options) {
   });
 }
 
-export { FormEditor, createFormEditor, useDebounce$1 as useDebounce, usePrevious$1 as usePrevious, useService as usePropertiesPanelService, useService$1 as useService, useVariables };
+export { ContextPadModule, FormEditor, FormFieldContextActions, createFormEditor, useDebounce$1 as useDebounce, usePrevious$1 as usePrevious, useService as usePropertiesPanelService, useService$1 as useService, useVariables };
 //# sourceMappingURL=index.es.js.map