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

package/dist/index.cjs

@@ -84,7 +84,7 @@ var TranslateModule = {
 };
 
 var FN_REF = '__fn';
-var DEFAULT_PRIORITY$4 = 1000;
+var DEFAULT_PRIORITY$5 = 1000;
 var slice = Array.prototype.slice;
 
 /**
@@ -252,7 +252,7 @@ EventBus.prototype.on = function (events, priority, callback, that) {
   if (minDash.isFunction(priority)) {
     that = callback;
     callback = priority;
-    priority = DEFAULT_PRIORITY$4;
+    priority = DEFAULT_PRIORITY$5;
   }
   if (!minDash.isNumber(priority)) {
     throw new Error('priority must be a number');
@@ -303,7 +303,7 @@ EventBus.prototype.once = function (events, priority, callback, that) {
   if (minDash.isFunction(priority)) {
     that = callback;
     callback = priority;
-    priority = DEFAULT_PRIORITY$4;
+    priority = DEFAULT_PRIORITY$5;
   }
   if (!minDash.isNumber(priority)) {
     throw new Error('priority must be a number');
@@ -1385,7 +1385,7 @@ const ModularSection = props => {
   }) => RootElement ? jsxRuntime.jsx(RootElement, {
     children: children
   }) : jsxRuntime.jsx("div", {
-    className: rootClass,
+    className: classnames(rootClass, 'bio-theme-parent'),
     children: children
   }), [rootClass, RootElement]);
   return shouldRender ? parent ? React.createPortal(jsxRuntime.jsx(Root, {
@@ -2096,7 +2096,8 @@ const EventContext = preact.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
  */
 
@@ -2298,7 +2299,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 jsxRuntime.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,
@@ -2536,24 +2537,32 @@ function useShowEntryEvent(id) {
  * @param {boolean} value
  */
 
+/**
+ * Resolve scroll container closest to the referenced element.
+ */
+function getScrollContainer(ref, scrollContainerSelector) {
+  return ref.current ? minDom.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] = hooks.useState(minDom.query(scrollContainerSelector));
+  // resolved from the observed element after mount (see effect below)
+  const [scrollContainer, setScrollContainer] = hooks.useState(null);
   const updateScrollContainer = hooks.useCallback(() => {
-    const newScrollContainer = minDom.query(scrollContainerSelector);
+    const newScrollContainer = getScrollContainer(ref, scrollContainerSelector);
     if (newScrollContainer !== scrollContainer) {
       setScrollContainer(newScrollContainer);
     }
-  }, [scrollContainerSelector, scrollContainer]);
+  }, [ref, scrollContainerSelector, scrollContainer]);
   hooks.useEffect(() => {
     updateScrollContainer();
   }, [updateScrollContainer]);
@@ -2566,9 +2575,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 => {
@@ -2589,13 +2597,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]);
 }
 
 /**
@@ -2622,23 +2630,6 @@ function useStaticCallback(callback) {
   });
   return hooks.useCallback((...args) => callbackRef.current(...args), []);
 }
-function useElementVisible(element) {
-  const [visible, setVisible] = hooks.useState(!!element && !!element.clientHeight);
-  hooks.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
@@ -2990,7 +2981,7 @@ function PropertiesPanel$1(props) {
             children: jsxRuntime.jsx(EventContext.Provider, {
               value: eventContext,
               children: jsxRuntime.jsxs("div", {
-                class: "bio-properties-panel",
+                class: "bio-properties-panel bio-theme-parent",
                 children: [headerProvider ? jsxRuntime.jsx(Header, {
                   element: element,
                   headerProvider: headerProvider
@@ -3081,16 +3072,17 @@ function CollapsibleEntry(props) {
     }, [onShow, setOpen])
   };
   const placeholderLabel = translate('<empty>');
+  const hasEntries = entries.length > 0;
   return jsxRuntime.jsxs("div", {
     "data-entry-id": id,
     class: classnames('bio-properties-panel-collapsible-entry', open ? 'open' : ''),
     children: [jsxRuntime.jsxs("div", {
       class: "bio-properties-panel-collapsible-entry-header",
-      onClick: toggleOpen,
+      onClick: hasEntries ? toggleOpen : null,
       children: [jsxRuntime.jsx("div", {
         class: classnames('bio-properties-panel-collapsible-entry-header-title', !label && 'empty'),
         children: label || placeholderLabel
-      }), jsxRuntime.jsx("button", {
+      }), hasEntries && jsxRuntime.jsx("button", {
         type: "button",
         title: translate('Toggle list item'),
         class: "bio-properties-panel-arrow  bio-properties-panel-collapsible-entry-arrow",
@@ -3606,7 +3598,8 @@ const FeelEditor = React.forwardRef((props, ref) => {
   const {
     builtins,
     dialect,
-    parserDialect
+    parserDialect,
+    engines
   } = feelLanguageContext || {};
   useBufferedFocus(editor, ref);
   const handleInput = useStaticCallback(newValue => {
@@ -3649,6 +3642,7 @@ const FeelEditor = React.forwardRef((props, ref) => {
       builtins,
       dialect,
       parserDialect,
+      engines,
       extensions: [...(enableGutters ? [view.lineNumbers()] : []), view.EditorView.lineWrapping, view.EditorView.domEventHandlers({
         blur: handleBlur
       })],
@@ -3683,6 +3677,12 @@ const FeelEditor = React.forwardRef((props, ref) => {
     }
     editor.setPlaceholder(placeholder);
   }, [placeholder]);
+  hooks.useEffect(() => {
+    if (!editor) {
+      return;
+    }
+    editor.setEngines(engines);
+  }, [engines]);
   const handleClick = () => {
     ref.current.focus();
   };
@@ -5004,16 +5004,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,
@@ -5026,22 +5020,31 @@ function TextArea(props) {
     autoResize = true,
     placeholder,
     rows = autoResize ? 1 : 2,
-    tooltip
+    tooltip,
+    translate = translateFallback
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value);
   const ref = useShowEntryEvent(id);
+  const containerRef = hooks.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 = hooks.useRef(localValue);
+  localValueRef.current = localValue;
+  const {
+    eventBus
+  } = hooks.useContext(EventContext);
+  const [isPopupOpen, setIsPopupOpen] = hooks.useState(false);
   const onInput = hooks.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;
     }
@@ -5086,12 +5089,35 @@ function TextArea(props) {
       handleInput.flush?.();
     }
   };
-  hooks.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);
+  };
+  hooks.useEffect(() => {
+    return () => {
+      eventBus && eventBus.fire('propertiesPanel.closePopup');
+    };
   }, []);
-  hooks.useLayoutEffect(() => {
-    visible && autoResize && resizeToContents(ref.current);
-  }, [visible]);
   hooks.useEffect(() => {
     if (value === localValue) {
       return;
@@ -5106,25 +5132,35 @@ function TextArea(props) {
       children: jsxRuntime.jsx(TooltipWrapper, {
         value: tooltip,
         forId: id,
-        element: props.element,
+        element: element,
         children: label
       })
-    }), jsxRuntime.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"
+    }), jsxRuntime.jsxs("div", {
+      class: classnames('bio-properties-panel-textarea-container', isPopupOpen ? 'popupOpen' : null),
+      ref: containerRef,
+      children: [isPopupOpen && jsxRuntime.jsx("div", {
+        class: "bio-properties-panel-textarea__open-popup-placeholder",
+        children: translate('Opened in editor')
+      }), jsxRuntime.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 && jsxRuntime.jsx(OpenPopupButton, {
+        onClick: handleOpenPopup,
+        translate: translate
+      })]
     })]
   });
 }
@@ -5145,6 +5181,7 @@ function TextArea(props) {
  * @param {boolean} props.monospace
  * @param {Function} [props.validate]
  * @param {boolean} [props.disabled]
+ * @param {Function} [props.translate]
  */
 function TextAreaEntry(props) {
   const {
@@ -5164,7 +5201,8 @@ function TextAreaEntry(props) {
     onPaste,
     placeholder,
     autoResize,
-    tooltip
+    tooltip,
+    translate
   } = props;
   const globalError = useError(id);
   const [localError, setLocalError] = hooks.useState(null);
@@ -5205,6 +5243,7 @@ function TextAreaEntry(props) {
       placeholder: placeholder,
       autoResize: autoResize,
       tooltip: tooltip,
+      translate: translate,
       element: element
     }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
@@ -5420,6 +5459,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
@@ -5504,6 +5553,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]
  */
@@ -5519,6 +5571,7 @@ function PopupComponent(props, globalRef) {
     onPostDeactivate = noop,
     returnFocus = true,
     closeOnEscape = true,
+    allowFocusMove = () => true,
     title
   } = props;
   const focusTrapRef = hooks.useRef(null);
@@ -5538,13 +5591,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 (minDash.isDefined(top) && minDash.isDefined(left)) {
+    style.top = top + 'px';
+    style.left = left + 'px';
   }
   if (width) {
     style.width = width + 'px';
@@ -5568,6 +5622,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
@@ -5582,21 +5638,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 = React.forwardRef(PopupComponent);
-Popup.Title = Title;
-Popup.Body = Body;
-Popup.Footer = Footer;
+const Popup$1 = React.forwardRef(PopupComponent);
+Popup$1.Title = Title;
+Popup$1.Body = Body;
+Popup$1.Footer = Footer;
 function Title(props) {
+  const {
+    eventBus
+  } = hooks.useContext(EventContext);
   const {
     children,
     className,
     draggable,
-    eventBus,
     title,
     showCloseButton = false,
     closeButtonTooltip = 'Close popup',
@@ -5701,6 +5759,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');
 }
@@ -5719,22 +5797,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,
@@ -5744,12 +5820,10 @@ function FeelPopup$1(props) {
     value,
     links,
     variables,
-    position,
     hostLanguage,
     singleLine,
     sourceElement,
     tooltipContainer,
-    eventBus,
     feelLanguageContext
   } = props;
   const editorRef = hooks.useRef();
@@ -5779,20 +5853,19 @@ function FeelPopup$1(props) {
       editorRef.current.focus();
     }
   }, [editorRef]);
-  return jsxRuntime.jsxs(Popup, {
+  return jsxRuntime.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: [jsxRuntime.jsx(Popup.Title, {
+    children: [jsxRuntime.jsx(Popup$1.Title, {
       title: title,
-      eventBus: eventBus,
       showCloseButton: true,
       closeButtonTooltip: "Save and close",
       onClose: onClose,
@@ -5808,14 +5881,13 @@ function FeelPopup$1(props) {
           }, index);
         })
       })
-    }), jsxRuntime.jsx(Popup.Body, {
+    }), jsxRuntime.jsx(Popup$1.Body, {
       children: jsxRuntime.jsxs("div", {
         onKeyDownCapture: onKeyDownCapture,
         onKeyDown: onKeyDown,
         class: "bio-properties-panel-feel-popup__body",
         children: [type === 'feel' && jsxRuntime.jsx(FeelEditor, {
           enableGutters: true,
-          id: prefixId(entryId),
           name: entryId,
           onInput: onInput,
           value: value,
@@ -5824,7 +5896,6 @@ function FeelPopup$1(props) {
           ref: editorRef,
           tooltipContainer: tooltipContainer
         }), type === 'feelers' && jsxRuntime.jsx(TemplatingEditor, {
-          id: prefixId(entryId),
           contentAttributes: {
             'aria-label': title
           },
@@ -5841,34 +5912,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 = hooks.useRef();
+  const popupRef = hooks.useRef();
+  const handleSetReturnFocus = () => {
+    sourceElement && sourceElement.focus();
   };
+  hooks.useEffect(() => {
+    // set focus on editor when popup is opened
+    if (editorRef.current) {
+      editorRef.current.focus();
+    }
+  }, [editorRef]);
+  return jsxRuntime.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: [jsxRuntime.jsx(Popup$1.Title, {
+      title: title,
+      showCloseButton: true,
+      closeButtonTooltip: "Save and close",
+      onClose: onClose,
+      draggable: true
+    }), jsxRuntime.jsx(Popup$1.Body, {
+      children: jsxRuntime.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`
@@ -5881,16 +6025,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();
@@ -5898,7 +6045,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() {
@@ -5906,7 +6089,7 @@ class FeelPopup {
   }
 
   /**
-   * Open the FEEL popup.
+   * Open the popup.
    *
    * @param {String} entryId
    * @param {Object} popupConfig
@@ -5915,7 +6098,7 @@ class FeelPopup {
   open(entryId, popupConfig, sourceElement) {
     // close before opening a new one
     this.close();
-    this._openPopup({
+    return this._openPopup({
       ...popupConfig,
       entryId,
       sourceElement
@@ -5923,7 +6106,7 @@ class FeelPopup {
   }
 
   /**
-   * Close the FEEL popup.
+   * Close the popup.
    */
   close() {
     this._closePopup();
@@ -5933,13 +6116,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();
@@ -5949,13 +6137,13 @@ class FeelPopup {
             sourceElement && sourceElement.focus();
           }, 0);
         },
-        position: getPopupPosition(),
         title: getPopupTitle({
           element,
           label
         })
       }
     });
+    return true;
   }
   _closePopup() {
     if (this._isOpen) {
@@ -5964,8 +6152,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;
@@ -5985,15 +6173,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');
-    preact.render(jsxRuntime.jsx(FeelPopup$1, {
-      ...config,
-      eventBus: this._eventBus
+    const Component = config.component;
+    preact.render(jsxRuntime.jsx(EventContext.Provider, {
+      value: {
+        eventBus: this._eventBus
+      },
+      children: jsxRuntime.jsx(Component, {
+        ...config,
+        eventBus: this._eventBus
+      })
     }), element);
     this._emit('feelPopup.opened', {
       domNode: element
@@ -6009,13 +6198,14 @@ class FeelPopupRenderer {
     preact.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 /////////////////
 
@@ -6032,8 +6222,8 @@ function getContainer(container) {
 }
 var index = {
   __init__: ['feelPopup', 'feelPopupRenderer'],
-  feelPopup: ['type', FeelPopup],
-  feelPopupRenderer: ['type', FeelPopupRenderer]
+  feelPopup: ['type', Popup],
+  feelPopupRenderer: ['type', PopupRenderer]
 };
 
 function getPropertiesPanelHeaderProvider(options = {}) {