@bpmn-io/form-js-editor 1.26.0 → 2.0.0-alpha.0

package/dist/index.es.js

@@ -1,14 +1,14 @@
 import { Ids } from 'ids';
-import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, Label as Label$3, IFrame, Text as Text$1, Html, Table, ExpressionField, DocumentPreview, FormFields, sanitizeImageSource, getSchemaVariables, getAncestryList, FormContext, FormRenderContext, FormComponent, getScrollContainer, FieldFactory, FormLayouter, PathRegistry, Importer, FeelExpressionLanguage, OPTIONS_SOURCES, OPTIONS_SOURCES_PATHS, clone, runRecursively, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, TEXT_VIEW_DEFAULT_TEXT, TIME_USE24H_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_INTERVAL_PATH, TIME_SERIALISING_FORMAT_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISING_FORMATS, TIME_SERIALISINGFORMAT_LABELS, getOptionsSource, OPTIONS_SOURCES_DEFAULTS, OPTIONS_SOURCES_LABELS, SECURITY_ATTRIBUTES_DEFINITIONS, createFormContainer, createInjector, MarkdownRendererModule, schemaVersion } from '@bpmn-io/form-js-viewer';
+import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, Label as Label$3, IFrame, Text as Text$1, Html, Table, ExpressionField, DocumentPreview, FormFields, sanitizeImageSource, getSchemaVariables, getAncestryList, FormContext, FormRenderContext, FormComponent, getScrollContainer as getScrollContainer$1, FieldFactory, FormLayouter, PathRegistry, Importer, FeelExpressionLanguage, OPTIONS_SOURCES, OPTIONS_SOURCES_PATHS, clone, runRecursively, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, TEXT_VIEW_DEFAULT_TEXT, TIME_USE24H_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_INTERVAL_PATH, TIME_SERIALISING_FORMAT_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISING_FORMATS, 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, isString, set as set$1, get, reduce, forEach, uniqueBy, isObject, isDefined, isNil, without, has } from 'min-dash';
+import { isArray, isFunction, isNumber, bind, assign, debounce, isString, isDefined, set as set$1, get, reduce, forEach, uniqueBy, isObject, isNil, without, has } from 'min-dash';
 import classnames from 'classnames';
 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 as createElement$1 } from 'preact';
 import * as React from 'preact/compat';
 import { createPortal, useRef as useRef$1, useContext as useContext$1, useEffect as useEffect$1, forwardRef } from 'preact/compat';
-import { query, domify, classes, event } from 'min-dom';
+import { query, closest, domify, classes, event } from 'min-dom';
 import { EditorView, lineNumbers } from '@codemirror/view';
 import { Annotation } from '@codemirror/state';
 import '@codemirror/language';
@@ -64,7 +64,7 @@ var TranslateModule = {
 };
 
 var FN_REF = '__fn';
-var DEFAULT_PRIORITY$4 = 1000;
+var DEFAULT_PRIORITY$5 = 1000;
 var slice = Array.prototype.slice;
 
 /**
@@ -232,7 +232,7 @@ EventBus.prototype.on = function (events, priority, callback, that) {
   if (isFunction(priority)) {
     that = callback;
     callback = priority;
-    priority = DEFAULT_PRIORITY$4;
+    priority = DEFAULT_PRIORITY$5;
   }
   if (!isNumber(priority)) {
     throw new Error('priority must be a number');
@@ -283,7 +283,7 @@ EventBus.prototype.once = function (events, priority, callback, that) {
   if (isFunction(priority)) {
     that = callback;
     callback = priority;
-    priority = DEFAULT_PRIORITY$4;
+    priority = DEFAULT_PRIORITY$5;
   }
   if (!isNumber(priority)) {
     throw new Error('priority must be a number');
@@ -1365,7 +1365,7 @@ const ModularSection = props => {
   }) => RootElement ? jsx(RootElement, {
     children: children
   }) : jsx("div", {
-    className: rootClass,
+    className: classnames(rootClass, 'bio-theme-parent'),
     children: children
   }), [rootClass, RootElement]);
   return shouldRender ? parent ? createPortal(jsx(Root, {
@@ -2076,7 +2076,8 @@ const EventContext = createContext({
  * @typedef { {
  *   parserDialect?: import('@bpmn-io/feel-editor').ParserDialect,
  *   builtins?: import('@bpmn-io/feel-editor').Variable[],
- *   dialect?: import('@bpmn-io/feel-editor').Dialect
+ *   dialect?: import('@bpmn-io/feel-editor').Dialect,
+ *   engines?: Record<string, string>
  * } } FeelLanguageContextType
  */
 
@@ -2278,7 +2279,7 @@ function Tooltip(props) {
     const tooltipStyle = position || (tooltipPosition ? `right: ${tooltipPosition.right}; top: ${tooltipPosition.top}px;` : undefined);
     const arrowStyle = arrowOffset != null ? `margin-top: ${arrowOffset}px;` : undefined;
     return jsxs("div", {
-      class: `bio-properties-panel-tooltip ${direction}`,
+      class: `bio-properties-panel-tooltip bio-theme-parent ${direction}`,
       role: "tooltip",
       id: "bio-properties-panel-tooltip",
       "aria-labelledby": forId,
@@ -2516,24 +2517,32 @@ function useShowEntryEvent(id) {
  * @param {boolean} value
  */
 
+/**
+ * Resolve scroll container closest to the referenced element.
+ */
+function getScrollContainer(ref, scrollContainerSelector) {
+  return ref.current ? closest(ref.current, scrollContainerSelector, true) : null;
+}
+
 /**
  * Use IntersectionObserver to identify when DOM element is in sticky mode.
+ *
  * If sticky is observered setSticky(true) will be called.
  * If sticky mode is left, setSticky(false) will be called.
  *
- *
  * @param {Object} ref
  * @param {string} scrollContainerSelector
  * @param {setSticky} setSticky
  */
 function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
-  const [scrollContainer, setScrollContainer] = useState(query(scrollContainerSelector));
+  // resolved from the observed element after mount (see effect below)
+  const [scrollContainer, setScrollContainer] = useState(null);
   const updateScrollContainer = useCallback(() => {
-    const newScrollContainer = query(scrollContainerSelector);
+    const newScrollContainer = getScrollContainer(ref, scrollContainerSelector);
     if (newScrollContainer !== scrollContainer) {
       setScrollContainer(newScrollContainer);
     }
-  }, [scrollContainerSelector, scrollContainer]);
+  }, [ref, scrollContainerSelector, scrollContainer]);
   useEffect(() => {
     updateScrollContainer();
   }, [updateScrollContainer]);
@@ -2546,9 +2555,8 @@ function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky)
     if (!Observer) {
       return;
     }
-
-    // TODO(@barmac): test this
-    if (!ref.current || !scrollContainer) {
+    const element = ref.current;
+    if (!element || !scrollContainer) {
       return;
     }
     const observer = new Observer(entries => {
@@ -2569,13 +2577,13 @@ function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky)
       // Use bottom margin to avoid stickyness when scrolling out to bottom
       threshold: [1]
     });
-    observer.observe(ref.current);
+    observer.observe(element);
 
     // Unobserve if unmounted
     return () => {
-      observer.unobserve(ref.current);
+      observer.unobserve(element);
     };
-  }, [ref.current, scrollContainer, setSticky]);
+  }, [ref, scrollContainer, setSticky]);
 }
 
 /**
@@ -2602,23 +2610,6 @@ function useStaticCallback(callback) {
   });
   return useCallback((...args) => callbackRef.current(...args), []);
 }
-function useElementVisible(element) {
-  const [visible, setVisible] = useState(!!element && !!element.clientHeight);
-  useLayoutEffect(() => {
-    if (!element) return;
-    const resizeObserver = new ResizeObserver(([entry]) => {
-      requestAnimationFrame(() => {
-        const newVisible = !!entry.contentRect.height;
-        if (newVisible !== visible) {
-          setVisible(newVisible);
-        }
-      });
-    });
-    resizeObserver.observe(element);
-    return () => resizeObserver.disconnect();
-  }, [element, visible]);
-  return visible;
-}
 
 /**
  * @param {import('../PropertiesPanel').GroupDefinition} props
@@ -2970,7 +2961,7 @@ function PropertiesPanel$1(props) {
             children: jsx(EventContext.Provider, {
               value: eventContext,
               children: jsxs("div", {
-                class: "bio-properties-panel",
+                class: "bio-properties-panel bio-theme-parent",
                 children: [headerProvider ? jsx(Header, {
                   element: element,
                   headerProvider: headerProvider
@@ -3061,16 +3052,17 @@ function CollapsibleEntry(props) {
     }, [onShow, setOpen])
   };
   const placeholderLabel = translate('<empty>');
+  const hasEntries = entries.length > 0;
   return jsxs("div", {
     "data-entry-id": id,
     class: classnames('bio-properties-panel-collapsible-entry', open ? 'open' : ''),
     children: [jsxs("div", {
       class: "bio-properties-panel-collapsible-entry-header",
-      onClick: toggleOpen,
+      onClick: hasEntries ? toggleOpen : null,
       children: [jsx("div", {
         class: classnames('bio-properties-panel-collapsible-entry-header-title', !label && 'empty'),
         children: label || placeholderLabel
-      }), jsx("button", {
+      }), hasEntries && jsx("button", {
         type: "button",
         title: translate('Toggle list item'),
         class: "bio-properties-panel-arrow  bio-properties-panel-collapsible-entry-arrow",
@@ -3586,7 +3578,8 @@ const FeelEditor = forwardRef((props, ref) => {
   const {
     builtins,
     dialect,
-    parserDialect
+    parserDialect,
+    engines
   } = feelLanguageContext || {};
   useBufferedFocus(editor, ref);
   const handleInput = useStaticCallback(newValue => {
@@ -3629,6 +3622,7 @@ const FeelEditor = forwardRef((props, ref) => {
       builtins,
       dialect,
       parserDialect,
+      engines,
       extensions: [...(enableGutters ? [lineNumbers()] : []), EditorView.lineWrapping, EditorView.domEventHandlers({
         blur: handleBlur
       })],
@@ -3663,6 +3657,12 @@ const FeelEditor = forwardRef((props, ref) => {
     }
     editor.setPlaceholder(placeholder);
   }, [placeholder]);
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+    editor.setEngines(engines);
+  }, [engines]);
   const handleClick = () => {
     ref.current.focus();
   };
@@ -4984,16 +4984,10 @@ function isEdited$3(node) {
 function prefixId$4(id) {
   return `bio-properties-panel-${id}`;
 }
-function resizeToContents(element) {
-  element.style.height = 'auto';
-
-  // a 2px pixel offset is required to prevent scrollbar from
-  // appearing on OS with a full length scroll bar (Windows/Linux)
-  element.style.height = `${element.scrollHeight + 2}px`;
-}
 function TextArea(props) {
   const {
     id,
+    element,
     label,
     debounce,
     onInput: commitValue,
@@ -5006,22 +5000,31 @@ function TextArea(props) {
     autoResize = true,
     placeholder,
     rows = autoResize ? 1 : 2,
-    tooltip
+    tooltip,
+    translate = translateFallback
   } = props;
   const [localValue, setLocalValue] = useState(value);
   const ref = useShowEntryEvent(id);
+  const containerRef = useRef();
+
+  // keep a live reference to the current value so callbacks captured by the
+  // popup (frozen at open time) can compare against the latest value
+  const localValueRef = useRef(localValue);
+  localValueRef.current = localValue;
+  const {
+    eventBus
+  } = useContext(EventContext);
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
   const onInput = useCallback(newValue => {
     const newModelValue = newValue === '' ? undefined : newValue;
     commitValue(newModelValue);
   }, [commitValue]);
-  const visible = useElementVisible(ref.current);
 
   /**
    * @type { import('min-dash').DebouncedFunction }
    */
   const handleInput = useDebounce(onInput, debounce);
   const handleLocalInput = e => {
-    autoResize && resizeToContents(e.target);
     if (e.target.value === localValue) {
       return;
     }
@@ -5066,12 +5069,35 @@ function TextArea(props) {
       handleInput.flush?.();
     }
   };
-  useLayoutEffect(() => {
-    autoResize && resizeToContents(ref.current);
+  const handlePopupInput = newValue => {
+    if (newValue === localValueRef.current) {
+      return;
+    }
+    setLocalValue(newValue);
+    handleInput(newValue);
+  };
+  const handleOpenPopup = () => {
+    const isOpen = eventBus.fire('propertiesPanel.openPopup', {
+      element,
+      entryId: id,
+      label,
+      onInput: handlePopupInput,
+      sourceElement: ref.current,
+      value: localValue
+    });
+    if (isOpen) {
+      eventBus.once('propertiesPanelPopup.close', () => {
+        handleInput.flush?.();
+        setIsPopupOpen(false);
+      });
+    }
+    setIsPopupOpen(isOpen === true);
+  };
+  useEffect(() => {
+    return () => {
+      eventBus && eventBus.fire('propertiesPanel.closePopup');
+    };
   }, []);
-  useLayoutEffect(() => {
-    visible && autoResize && resizeToContents(ref.current);
-  }, [visible]);
   useEffect(() => {
     if (value === localValue) {
       return;
@@ -5086,25 +5112,35 @@ function TextArea(props) {
       children: jsx(TooltipWrapper, {
         value: tooltip,
         forId: id,
-        element: props.element,
+        element: element,
         children: label
       })
-    }), jsx("textarea", {
-      ref: ref,
-      id: prefixId$2(id),
-      name: id,
-      spellCheck: "false",
-      class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : '', autoResize ? 'auto-resize' : ''),
-      onInput: handleLocalInput,
-      onFocus: onFocus,
-      onKeyDown: handleOnKeyDown,
-      onBlur: handleOnBlur,
-      onPaste: handleOnPaste,
-      placeholder: placeholder,
-      rows: rows,
-      value: localValue,
-      disabled: disabled,
-      "data-gramm": "false"
+    }), jsxs("div", {
+      class: classnames('bio-properties-panel-textarea-container', isPopupOpen ? 'popupOpen' : null),
+      ref: containerRef,
+      children: [isPopupOpen && jsx("div", {
+        class: "bio-properties-panel-textarea__open-popup-placeholder",
+        children: translate('Opened in editor')
+      }), jsx("textarea", {
+        ref: ref,
+        id: prefixId$2(id),
+        name: id,
+        spellCheck: "false",
+        class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : '', autoResize ? 'auto-resize' : ''),
+        onInput: handleLocalInput,
+        onFocus: onFocus,
+        onKeyDown: handleOnKeyDown,
+        onBlur: handleOnBlur,
+        onPaste: handleOnPaste,
+        placeholder: placeholder,
+        rows: rows,
+        value: localValue,
+        disabled: disabled,
+        "data-gramm": "false"
+      }), eventBus && !disabled && jsx(OpenPopupButton, {
+        onClick: handleOpenPopup,
+        translate: translate
+      })]
     })]
   });
 }
@@ -5125,6 +5161,7 @@ function TextArea(props) {
  * @param {boolean} props.monospace
  * @param {Function} [props.validate]
  * @param {boolean} [props.disabled]
+ * @param {Function} [props.translate]
  */
 function TextAreaEntry(props) {
   const {
@@ -5144,7 +5181,8 @@ function TextAreaEntry(props) {
     onPaste,
     placeholder,
     autoResize,
-    tooltip
+    tooltip,
+    translate
   } = props;
   const globalError = useError(id);
   const [localError, setLocalError] = useState(null);
@@ -5185,6 +5223,7 @@ function TextAreaEntry(props) {
       placeholder: placeholder,
       autoResize: autoResize,
       tooltip: tooltip,
+      translate: translate,
       element: element
     }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
@@ -5400,6 +5439,16 @@ function isEdited(node) {
 function prefixId$1(id) {
   return `bio-properties-panel-${id}`;
 }
+function getPopupTitle({
+  element,
+  label
+}) {
+  let popupTitle = '';
+  if (element && element.type) {
+    popupTitle = `${element.type} / `;
+  }
+  return `${popupTitle}${label}`;
+}
 
 /**
  * Add a dragger that calls back the passed function with
@@ -5484,6 +5533,9 @@ const noop = () => {};
  * @param {Function} [props.onPostDeactivate]
  * @param {boolean} [props.returnFocus]
  * @param {boolean} [props.closeOnEscape]
+ * @param {(event: KeyboardEvent) => boolean} [props.allowFocusMove] -
+ *   Whether a Tab keypress may move focus. Return false to leave the keypress
+ *   to the focused element, e.g. an editor navigating snippet placeholders.
  * @param {string} props.title
  * @param {Ref} [ref]
  */
@@ -5499,6 +5551,7 @@ function PopupComponent(props, globalRef) {
     onPostDeactivate = noop,
     returnFocus = true,
     closeOnEscape = true,
+    allowFocusMove = () => true,
     title
   } = props;
   const focusTrapRef = useRef(null);
@@ -5518,13 +5571,14 @@ function PopupComponent(props, globalRef) {
       focusTrapRef.current.activate();
     }
   };
-  let style = {};
-  if (position) {
-    style = {
-      ...style,
-      top: position.top + 'px',
-      left: position.left + 'px'
-    };
+  const {
+    top,
+    left
+  } = position || getCenterPosition(width, height);
+  const style = {};
+  if (isDefined(top) && isDefined(left)) {
+    style.top = top + 'px';
+    style.left = left + 'px';
   }
   if (width) {
     style.width = width + 'px';
@@ -5548,6 +5602,8 @@ function PopupComponent(props, globalRef) {
         clickOutsideDeactivates: true,
         delayInitialFocus,
         fallbackFocus: popupRef.current,
+        isKeyForward: event => isTab(event) && !event.shiftKey && allowFocusMove(event),
+        isKeyBackward: event => isTab(event) && event.shiftKey && allowFocusMove(event),
         onPostActivate,
         onPostDeactivate,
         returnFocusOnDeactivate: returnFocus
@@ -5562,21 +5618,23 @@ function PopupComponent(props, globalRef) {
     ref: popupRef,
     onKeyDown: handleKeydown,
     role: "dialog",
-    class: classnames('bio-properties-panel-popup', className),
+    class: classnames('bio-properties-panel-popup', 'bio-theme-parent', className),
     style: style,
     children: props.children
   });
 }
-const Popup = forwardRef(PopupComponent);
-Popup.Title = Title;
-Popup.Body = Body;
-Popup.Footer = Footer;
+const Popup$1 = forwardRef(PopupComponent);
+Popup$1.Title = Title;
+Popup$1.Body = Body;
+Popup$1.Footer = Footer;
 function Title(props) {
+  const {
+    eventBus
+  } = useContext(EventContext);
   const {
     children,
     className,
     draggable,
-    eventBus,
     title,
     showCloseButton = false,
     closeButtonTooltip = 'Close popup',
@@ -5681,6 +5739,26 @@ function Footer(props) {
 
 // helpers //////////////////////
 
+/**
+ * Center the popup in the viewport, based on its own dimensions.
+ *
+ * @param {number} [width]
+ * @param {number} [height]
+ */
+function getCenterPosition(width, height) {
+  if (!width || !height) {
+    return {};
+  }
+  const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+  const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+  return {
+    left: Math.max(0, (viewportWidth - width) / 2),
+    top: Math.max(0, (viewportHeight - height) / 2)
+  };
+}
+function isTab(event) {
+  return event.key === 'Tab';
+}
 function getPopupParent(node) {
   return node.closest('.bio-properties-panel-popup');
 }
@@ -5699,22 +5777,20 @@ function cancel(event) {
  * @property {string} value
  * @property {Array} [links]
  * @property {Array|Object} [variables]
- * @property {Object} [position]
  * @property {string} [hostLanguage]
  * @property {boolean} [singleLine]
  * @property {HTMLElement} [sourceElement]
  * @property {HTMLElement|string} [tooltipContainer]
- * @property {Object} [eventBus]
  */
 
 const FEEL_POPUP_WIDTH = 700;
-const FEEL_POPUP_HEIGHT = 250;
+const FEEL_POPUP_HEIGHT = 400;
 
 /**
  * FEEL expression editor popup component
  * @param {FeelPopupProps} props
  */
-function FeelPopup$1(props) {
+function FeelPopup(props) {
   const {
     entryId,
     onInput,
@@ -5724,12 +5800,10 @@ function FeelPopup$1(props) {
     value,
     links,
     variables,
-    position,
     hostLanguage,
     singleLine,
     sourceElement,
     tooltipContainer,
-    eventBus,
     feelLanguageContext
   } = props;
   const editorRef = useRef();
@@ -5759,20 +5833,19 @@ function FeelPopup$1(props) {
       editorRef.current.focus();
     }
   }, [editorRef]);
-  return jsxs(Popup, {
+  return jsxs(Popup$1, {
     className: "bio-properties-panel-feel-popup",
-    position: position,
     title: title,
     returnFocus: false,
     closeOnEscape: false,
     delayInitialFocus: false,
+    allowFocusMove: event => !isSnippetNavigation(event),
     onPostDeactivate: handleSetReturnFocus,
     height: FEEL_POPUP_HEIGHT,
     width: FEEL_POPUP_WIDTH,
     ref: popupRef,
-    children: [jsx(Popup.Title, {
+    children: [jsx(Popup$1.Title, {
       title: title,
-      eventBus: eventBus,
       showCloseButton: true,
       closeButtonTooltip: "Save and close",
       onClose: onClose,
@@ -5788,14 +5861,13 @@ function FeelPopup$1(props) {
           }, index);
         })
       })
-    }), jsx(Popup.Body, {
+    }), jsx(Popup$1.Body, {
       children: jsxs("div", {
         onKeyDownCapture: onKeyDownCapture,
         onKeyDown: onKeyDown,
         class: "bio-properties-panel-feel-popup__body",
         children: [type === 'feel' && jsx(FeelEditor, {
           enableGutters: true,
-          id: prefixId(entryId),
           name: entryId,
           onInput: onInput,
           value: value,
@@ -5804,7 +5876,6 @@ function FeelPopup$1(props) {
           ref: editorRef,
           tooltipContainer: tooltipContainer
         }), type === 'feelers' && jsx(TemplatingEditor, {
-          id: prefixId(entryId),
           contentAttributes: {
             'aria-label': title
           },
@@ -5821,34 +5892,107 @@ function FeelPopup$1(props) {
     })]
   });
 }
-function prefixId(id) {
-  return `bio-properties-panel-${id}`;
-}
 function autoCompletionOpen(element) {
   const editor = element.closest('.cm-editor');
   return editor ? editor.querySelector('.cm-tooltip-autocomplete') : null;
 }
-function getPopupTitle({
-  element,
-  label
-}) {
-  let popupTitle = '';
-  if (element && element.type) {
-    popupTitle = `${element.type} / `;
-  }
-  return `${popupTitle}${label}`;
+
+// while a snippet is active, Tab navigates its placeholders inside the editor
+function isSnippetNavigation(event) {
+  const editor = event.target.closest('.cm-editor');
+  return !!(editor && editor.querySelector('.cm-snippetField'));
 }
-function getPopupPosition() {
-  const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
-  const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-  return {
-    left: Math.max(0, (viewportWidth - FEEL_POPUP_WIDTH) / 2),
-    top: Math.max(0, (viewportHeight - FEEL_POPUP_HEIGHT) / 2)
+
+/**
+ * @typedef {Object} TextPopupProps
+ * @property {string} entryId
+ * @property {Function} onInput
+ * @property {Function} onClose
+ * @property {string} title
+ * @property {string} value
+ * @property {HTMLElement} [sourceElement]
+ */
+
+const TEXT_POPUP_WIDTH = 700;
+const TEXT_POPUP_HEIGHT = 400;
+
+/**
+ * Plain text editor popup component.
+ *
+ * Intentionally kept separate from the FEEL popup: the two are expected to
+ * diverge as we add FEEL-specific capabilities that do not apply to plain text.
+ *
+ * @param {TextPopupProps} props
+ */
+function TextPopup(props) {
+  const {
+    entryId,
+    onInput,
+    onClose,
+    title,
+    value,
+    sourceElement
+  } = props;
+  const editorRef = useRef();
+  const popupRef = useRef();
+  const handleSetReturnFocus = () => {
+    sourceElement && sourceElement.focus();
   };
+  useEffect(() => {
+    // set focus on editor when popup is opened
+    if (editorRef.current) {
+      editorRef.current.focus();
+    }
+  }, [editorRef]);
+  return jsxs(Popup$1, {
+    className: "bio-properties-panel-text-popup",
+    title: title,
+    returnFocus: false,
+    closeOnEscape: true,
+    delayInitialFocus: false,
+    onClose: onClose,
+    onPostDeactivate: handleSetReturnFocus,
+    height: TEXT_POPUP_HEIGHT,
+    width: TEXT_POPUP_WIDTH,
+    ref: popupRef,
+    children: [jsx(Popup$1.Title, {
+      title: title,
+      showCloseButton: true,
+      closeButtonTooltip: "Save and close",
+      onClose: onClose,
+      draggable: true
+    }), jsx(Popup$1.Body, {
+      children: jsx("textarea", {
+        id: prefixId(entryId),
+        name: entryId,
+        class: "bio-properties-panel-input",
+        ref: editorRef,
+        onInput: e => onInput(e.target.value),
+        value: value || '',
+        spellCheck: "false",
+        autoComplete: "off",
+        "aria-label": title,
+        "data-gramm": "false"
+      })
+    })]
+  });
+}
+
+// The in-panel field stays mounted (hidden) while the popup is open, so we
+// scope the popup editor id to keep it unique in the DOM.
+function prefixId(id) {
+  return `bio-properties-panel-popup-${id}`;
 }
+const DEFAULT_POPUP_TYPE = 'text';
+
+// consumers registering via #registerProvider default to DEFAULT_PRIORITY,
+// so their providers take precedence over the LOW_PRIORITY built-ins.
+const DEFAULT_PRIORITY$4 = 1000;
+const LOW_PRIORITY$2 = 500;
 
 /**
- * FEEL popup component, built as a singleton.
+ * Popup manager, built as a singleton. Renders the registered provider for a
+ * given popup type; consumers may plug in their own via #registerProvider.
  *
  * In order to implement a custom replacement, handle the following events:
  * - `propertiesPanel.openPopup`
@@ -5861,16 +6005,19 @@ function getPopupPosition() {
  *  - `feelPopup.close` - fired before the popup is unmounted. Event context contains the DOM node of the popup as `domNode`
  *  - `feelPopup.closed` - fired after the popup is unmounted
  */
-class FeelPopup {
+class Popup {
   constructor(eventBus, config = {}) {
     this._eventBus = eventBus;
     this._config = config;
     this._isOpen = false;
-    eventBus.on('propertiesPanel.openPopup', (_, context) => {
-      this.open(context.entryId, context, context.sourceElement);
 
-      // return true to indicate that popup was opened
-      return true;
+    // built-in providers, registered at LOW_PRIORITY so consumers can
+    // override them via #registerProvider using the default priority
+    this.registerProvider('feel', LOW_PRIORITY$2, FeelPopup);
+    this.registerProvider('feelers', LOW_PRIORITY$2, FeelPopup);
+    this.registerProvider('text', LOW_PRIORITY$2, TextPopup);
+    eventBus.on('propertiesPanel.openPopup', (_, context) => {
+      return this.open(context.entryId, context, context.sourceElement);
     });
     eventBus.on(['propertiesPanel.closePopup', 'propertiesPanel.detach'], () => {
       this.close();
@@ -5878,7 +6025,43 @@ class FeelPopup {
   }
 
   /**
-   * Check if the FEEL popup is open.
+   * Register a popup provider (component) for a given type.
+   *
+   * A higher `priority` wins when multiple providers are registered for the
+   * same type; the built-in providers use a low priority so consumers override
+   * them by default.
+   *
+   * @param {string} type
+   * @param {number} [priority=DEFAULT_PRIORITY]
+   * @param {Function|import('preact').Component} provider
+   */
+  registerProvider(type, priority, provider) {
+    if (!provider) {
+      provider = priority;
+      priority = DEFAULT_PRIORITY$4;
+    }
+    this._eventBus.on('propertiesPanelPopup.getProviders.' + type, priority, function (event) {
+      event.providers.push(provider);
+    });
+  }
+
+  /**
+   * Get the popup providers registered for a type.
+   *
+   * @param {string} type
+   * @return {Array<Function|import('preact').Component>}
+   */
+  _getProviders(type) {
+    const event = this._eventBus.createEvent({
+      type: 'propertiesPanelPopup.getProviders.' + type,
+      providers: []
+    });
+    this._eventBus.fire(event);
+    return event.providers;
+  }
+
+  /**
+   * Check if the popup is open.
    * @return {Boolean}
    */
   isOpen() {
@@ -5886,7 +6069,7 @@ class FeelPopup {
   }
 
   /**
-   * Open the FEEL popup.
+   * Open the popup.
    *
    * @param {String} entryId
    * @param {Object} popupConfig
@@ -5895,7 +6078,7 @@ class FeelPopup {
   open(entryId, popupConfig, sourceElement) {
     // close before opening a new one
     this.close();
-    this._openPopup({
+    return this._openPopup({
       ...popupConfig,
       entryId,
       sourceElement
@@ -5903,7 +6086,7 @@ class FeelPopup {
   }
 
   /**
-   * Close the FEEL popup.
+   * Close the popup.
    */
   close() {
     this._closePopup();
@@ -5913,13 +6096,18 @@ class FeelPopup {
       element,
       label,
       sourceElement,
-      type
+      type = DEFAULT_POPUP_TYPE
     } = context;
+    const component = this._getProviders(type)[0];
+    if (!component) {
+      return false;
+    }
     this._isOpen = true;
     this._eventBus.fire('propertiesPanelPopup.open', {
       container: this._config.feelPopupContainer,
       config: {
         ...context,
+        component,
         links: this._config.getFeelPopupLinks?.(type) || [],
         onClose: () => {
           this._closePopup();
@@ -5929,13 +6117,13 @@ class FeelPopup {
             sourceElement && sourceElement.focus();
           }, 0);
         },
-        position: getPopupPosition(),
         title: getPopupTitle({
           element,
           label
         })
       }
     });
+    return true;
   }
   _closePopup() {
     if (this._isOpen) {
@@ -5944,8 +6132,8 @@ class FeelPopup {
     }
   }
 }
-FeelPopup.$inject = ['eventBus', 'config.propertiesPanel'];
-class FeelPopupRenderer {
+Popup.$inject = ['eventBus', 'config.propertiesPanel'];
+class PopupRenderer {
   constructor(eventBus) {
     this._eventBus = eventBus;
     this._container = null;
@@ -5965,15 +6153,16 @@ class FeelPopupRenderer {
     container = this._container = getContainer(container) || document.body;
     const element = this._element = createElement();
     container.appendChild(element);
-
-    // TODO(philippfromme): there is no useService in this context, so we need
-    // to pass the event bus as a prop or create a context provider, however,
-    // a custom renderer would have to use that context provider as well to have
-    // access to the event bus and other services
     this._emit('feelPopup.open');
-    render(jsx(FeelPopup$1, {
-      ...config,
-      eventBus: this._eventBus
+    const Component = config.component;
+    render(jsx(EventContext.Provider, {
+      value: {
+        eventBus: this._eventBus
+      },
+      children: jsx(Component, {
+        ...config,
+        eventBus: this._eventBus
+      })
     }), element);
     this._emit('feelPopup.opened', {
       domNode: element
@@ -5989,13 +6178,14 @@ class FeelPopupRenderer {
     render(null, this._element);
     this._container.removeChild(this._element);
     this._container = null;
+    this._element = null;
     this._emit('feelPopup.closed');
   }
   _emit(event, context) {
     this._eventBus.fire(event, context);
   }
 }
-FeelPopupRenderer.$inject = ['eventBus'];
+PopupRenderer.$inject = ['eventBus'];
 
 // helpers /////////////////
 
@@ -6012,8 +6202,8 @@ function getContainer(container) {
 }
 var index = {
   __init__: ['feelPopup', 'feelPopupRenderer'],
-  feelPopup: ['type', FeelPopup],
-  feelPopupRenderer: ['type', FeelPopupRenderer]
+  feelPopup: ['type', Popup],
+  feelPopupRenderer: ['type', PopupRenderer]
 };
 
 function getPropertiesPanelHeaderProvider(options = {}) {
@@ -6775,7 +6965,7 @@ function Element$1(props) {
     function scrollIntoView({
       selection
     }) {
-      const scrollContainer = getScrollContainer(ref.current);
+      const scrollContainer = getScrollContainer$1(ref.current);
       if (!selection || selection.type === 'default' || selection.id !== id || !scrollContainer || !ref.current) {
         return;
       }