@bpmn-io/form-js-editor 1.20.1 → 1.21.0

package/dist/assets/form-js-editor-base.css

@@ -304,6 +304,7 @@
   display: flex;
   flex-direction: column;
   padding: 20px;
+  gap: 4px;
 }
 
 .fjs-editor-container .fjs-drop-container-horizontal {

package/dist/assets/form-js-editor.css

@@ -281,6 +281,7 @@
   display: flex;
   flex-direction: column;
   padding: 20px;
+  gap: 4px;
 }
 
 .fjs-editor-container .fjs-drop-container-horizontal {

package/dist/index.cjs

@@ -1373,7 +1373,26 @@ const Slot = props => {
   const fillsAndSeparators = hooks.useMemo(() => {
     return buildFills(groups, fillRoot, separatorFn);
   }, [groups, fillRoot, separatorFn]);
-  return fillsAndSeparators;
+
+  // Framework-agnostic fills from SlotFillManager
+  const editorContext = hooks.useContext(FormEditorContext);
+  const slotFillManager = editorContext ? editorContext.getService('slotFillManager', false) : null;
+  const eventBus = editorContext ? editorContext.getService('eventBus', false) : null;
+  const [managerFills, setManagerFills] = hooks.useState([]);
+  hooks.useEffect(() => {
+    if (!eventBus || !slotFillManager) {
+      return;
+    }
+    setManagerFills(slotFillManager.getFills(name));
+    const onChange = () => setManagerFills(slotFillManager.getFills(name));
+    eventBus.on('slotFillManager.changed', onChange);
+    return () => eventBus.off('slotFillManager.changed', onChange);
+  }, [eventBus, slotFillManager, name]);
+  return jsxRuntime.jsxs(preact.Fragment, {
+    children: [fillsAndSeparators, managerFills.map(fill => jsxRuntime.jsx(FillContainer, {
+      fill: fill
+    }, fill.fillId))]
+  });
 };
 
 /**
@@ -1386,6 +1405,34 @@ const FillFragment = fill => jsxRuntime.jsx(preact.Fragment, {
   children: fill.children
 }, fill.id);
 
+/**
+ * Mounts a single SlotFillManager fill's render callback into a DOM container.
+ */
+function FillContainer({
+  fill
+}) {
+  const containerRef = hooks.useRef(null);
+  const cleanupRef = hooks.useRef(null);
+  hooks.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    cleanupRef.current = fill.render(container) || null;
+    return () => {
+      if (typeof cleanupRef.current === 'function') {
+        cleanupRef.current();
+        cleanupRef.current = null;
+      }
+      container.innerHTML = '';
+    };
+  }, [fill]);
+  return jsxRuntime.jsx("div", {
+    ref: containerRef,
+    "data-slot-fill": fill.fillId
+  });
+}
+
 /**
  * Creates an array of fills, with separators inserted between groups.
  *
@@ -2264,6 +2311,8 @@ function EmptyForm() {
         children: "Drag and drop components here to start designing."
       }), jsxRuntime.jsx("span", {
         children: "Use the preview window to test your form."
+      }), jsxRuntime.jsx(Slot, {
+        name: "editor-empty-state__footer"
       })]
     })
   });
@@ -14269,9 +14318,162 @@ class RenderInjector extends SectionModuleBase {
 }
 RenderInjector.$inject = ['eventBus'];
 
+/**
+ * Framework-agnostic service for managing slot fills.
+ *
+ * Fills are registered as render callbacks: `(container: HTMLElement) => (() => void) | void`.
+ * The optional return value is a cleanup function called when the fill is removed or the slot unmounts.
+ *
+ * @example
+ *
+ * // Via config (simplest):
+ * new FormEditor({
+ *   slots: {
+ *     'editor-empty-state__footer': (container) => {
+ *       container.textContent = 'Hello from vanilla JS';
+ *     }
+ *   }
+ * });
+ *
+ * // Via config (multiple fills per slot):
+ * new FormEditor({
+ *   slots: {
+ *     'editor-empty-state__footer': [
+ *       (container) => { container.textContent = 'First'; },
+ *       { render: (container) => { container.textContent = 'Second'; }, priority: 10 }
+ *     ]
+ *   }
+ * });
+ *
+ * // Via service (runtime):
+ * const slotFillManager = editor.get('slotFillManager');
+ * slotFillManager.addFill('editor-empty-state__footer', 'my-fill', {
+ *   render: (container) => { ... },
+ *   priority: 10,
+ *   group: 'custom'
+ * });
+ */
+class SlotFillManager {
+  /**
+   * @param {Object} slotsConfig
+   * @param {import('../../core/EventBus').EventBus} eventBus
+   */
+  constructor(slotsConfig, eventBus) {
+    this._eventBus = eventBus;
+
+    /** @type {Array<{ slotName: string, fillId: string, render: Function, priority: number, group: string }>} */
+    this._fills = [];
+    this._populateFromConfig(slotsConfig);
+  }
+
+  /**
+   * Register a fill for a named slot.
+   *
+   * @param {string} slotName - The slot to fill.
+   * @param {string} fillId - Unique identifier for this fill.
+   * @param {Function|Object} options - A render callback `(container) => cleanup`, or `{ render, priority?, group? }`.
+   */
+  addFill(slotName, fillId, options) {
+    const fill = normalizeFill(slotName, fillId, options);
+    this._fills = [...this._fills.filter(f => f.fillId !== fillId), fill];
+    this._eventBus.fire('slotFillManager.changed');
+  }
+
+  /**
+   * Remove a fill by its ID.
+   *
+   * @param {string} fillId
+   */
+  removeFill(fillId) {
+    const remaining = this._fills.filter(f => f.fillId !== fillId);
+    if (remaining.length === this._fills.length) {
+      return;
+    }
+    this._fills = remaining;
+    this._eventBus.fire('slotFillManager.changed');
+  }
+
+  /**
+   * Get fills for a given slot, sorted by group (alphabetical) then priority (descending).
+   *
+   * @param {string} slotName
+   * @returns {Array<{ slotName: string, fillId: string, render: Function, priority: number, group: string }>}
+   */
+  getFills(slotName) {
+    const matching = this._fills.filter(f => f.slotName === slotName);
+    return sortFills(matching);
+  }
+
+  /**
+   * @private
+   */
+  _populateFromConfig(slotsConfig) {
+    Object.entries(slotsConfig || {}).forEach(([slotName, value]) => {
+      if (Array.isArray(value)) {
+        value.forEach((entry, index) => {
+          this.addFill(slotName, `config__${slotName}_${index}`, entry);
+        });
+      } else {
+        this.addFill(slotName, `config__${slotName}`, value);
+      }
+    });
+  }
+}
+SlotFillManager.$inject = ['config.slots', 'eventBus'];
+
+// helpers //////////
+
+/**
+ * @param {string} slotName
+ * @param {string} fillId
+ * @param {Function|Object} options
+ * @returns {{ slotName: string, fillId: string, render: Function, priority: number, group: string }}
+ */
+function normalizeFill(slotName, fillId, options) {
+  if (typeof options === 'function') {
+    return {
+      slotName,
+      fillId,
+      render: options,
+      priority: 0,
+      group: 'z_default'
+    };
+  }
+  const {
+    render,
+    priority = 0,
+    group = 'z_default'
+  } = options;
+  return {
+    slotName,
+    fillId,
+    render,
+    priority,
+    group
+  };
+}
+
+/**
+ * Sort fills by group (alphabetical) then by priority (descending) within each group.
+ */
+function sortFills(fills) {
+  const grouped = groupBy(fills, f => f.group);
+  return Object.keys(grouped).sort().flatMap(key => grouped[key].toSorted((a, b) => b.priority - a.priority));
+}
+function groupBy(items, keyFn) {
+  return items.reduce((groups, item) => {
+    const key = keyFn(item);
+    return {
+      ...groups,
+      [key]: [...(groups[key] || []), item]
+    };
+  }, {});
+}
+
 const RenderInjectionModule = {
-  __init__: ['renderInjector'],
-  renderInjector: ['type', RenderInjector]
+  __init__: ['renderInjector', 'slotFillManager'],
+  renderInjector: ['type', RenderInjector],
+  slotFillManager: ['type', SlotFillManager]
 };
 
 var _path;