camunda-bpmn-js 4.9.0 → 4.10.0

package/dist/base-modeler.development.js

@@ -85424,6 +85424,51 @@
       themeSpec[".cm-content"] = { caretColor: "transparent !important" };
   }
 
+  let Placeholder$1 = class Placeholder extends WidgetType {
+      constructor(content) {
+          super();
+          this.content = content;
+      }
+      toDOM() {
+          let wrap = document.createElement("span");
+          wrap.className = "cm-placeholder";
+          wrap.style.pointerEvents = "none";
+          wrap.appendChild(typeof this.content == "string" ? document.createTextNode(this.content) : this.content);
+          if (typeof this.content == "string")
+              wrap.setAttribute("aria-label", "placeholder " + this.content);
+          else
+              wrap.setAttribute("aria-hidden", "true");
+          return wrap;
+      }
+      coordsAt(dom) {
+          let rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
+          if (!rects.length)
+              return null;
+          let style = window.getComputedStyle(dom.parentNode);
+          let rect = flattenRect(rects[0], style.direction != "rtl");
+          let lineHeight = parseInt(style.lineHeight);
+          if (rect.bottom - rect.top > lineHeight * 1.5)
+              return { left: rect.left, right: rect.right, top: rect.top, bottom: rect.top + lineHeight };
+          return rect;
+      }
+      ignoreEvent() { return false; }
+  };
+  /**
+  Extension that enables a placeholder—a piece of example content
+  to show when the editor is empty.
+  */
+  function placeholder(content) {
+      return ViewPlugin.fromClass(class {
+          constructor(view) {
+              this.view = view;
+              this.placeholder = content
+                  ? Decoration.set([Decoration.widget({ widget: new Placeholder$1(content), side: 1 }).range(0)])
+                  : Decoration.none;
+          }
+          get decorations() { return this.view.state.doc.length ? Decoration.none : this.placeholder; }
+      }, { decorations: v => v.decorations });
+  }
+
   const Outside = "-10000px";
   class TooltipViewManager {
       constructor(view, facet, createTooltipView, removeTooltipView) {
@@ -95167,12 +95212,7 @@
 
     const variables = context.state.facet(variablesFacet)[0];
 
-    const options = variables.map(v => ({
-      label: v.name,
-      type: 'variable',
-      info: v.info,
-      detail: v.detail
-    }));
+    const options = variables.map(v => createVariableSuggestion(v));
 
     // In most cases, use what is typed before the cursor
     let nodeBefore = syntaxTree(context.state).resolve(context.pos, -1);
@@ -95205,6 +95245,55 @@
     return result;
   };
 
+  /**
+   * @param {import('..').Variable} variable
+   * @returns {import('@codemirror/autocomplete').Completion}
+   */
+  function createVariableSuggestion(variable) {
+    if (variable.type === 'function') {
+      return createFunctionVariable(variable);
+    }
+
+    return {
+      label: variable.name,
+      type: 'variable',
+      info: variable.info,
+      detail: variable.detail
+    };
+  }
+
+  /**
+   * @param {import('..').Variable} variable
+   * @returns {import('@codemirror/autocomplete').Completion}
+   */
+  function createFunctionVariable(variable) {
+    const {
+      name,
+      info,
+      detail,
+      params = []
+    } = variable;
+
+    const paramsWithNames = params.map(({ name, type }, index) => ({
+      name: name || `param ${index + 1}`,
+      type
+    }));
+
+    const template = `${name}(${paramsWithNames.map(p => '${' + p.name + '}').join(', ')})`;
+
+    const paramsSignature = paramsWithNames.map(({ name, type }) => (
+      type ? `${name}: ${type}` : name
+    )).join(', ');
+    const label = `${name}(${paramsSignature})`;
+
+    return snippetCompletion(template, {
+      label,
+      type: 'function',
+      info,
+      detail
+    });
+  }
+
   function autocompletion() {
     return [
       autocompletion$1({
@@ -95301,15 +95390,18 @@
 
   /**
    * @typedef {object} Variable
-   * @typedef {import('@codemirror/state').Extension} Extension
    * @property {string} name name or key of the variable
    * @property {string} [info] short information about the variable, e.g. type
    * @property {string} [detail] longer description of the variable content
    * @property {boolean} [isList] whether the variable is a list
-   * @property {array<Variable>} [schema] array of child variables if the variable is a context or list
+   * @property {Array<Variable>} [schema] array of child variables if the variable is a context or list
+   * @property {'function'|'variable'} [type] type of the variable
+   * @property {Array<{name: string, type: string}>} [params] function parameters
    */
 
   const autocompletionConf = new Compartment();
+  const placeholderConf = new Compartment();
+
 
   /**
    * Creates a FEEL editor in the supplied container
@@ -95335,6 +95427,7 @@
     onChange = () => {},
     onKeyDown = () => {},
     onLint = () => {},
+    placeholder: placeholder$1 = '',
     readOnly = false,
     value = '',
     variables = []
@@ -95391,6 +95484,7 @@
       language(),
       linter,
       lintHandler,
+      placeholderConf.of(placeholder(placeholder$1)),
       tooltipLayout,
       theme,
       ...editorExtensions
@@ -95465,6 +95559,17 @@
     });
   };
 
+  /**
+   * Update placeholder text.
+   * @param {string} placeholder
+   * @returns {void}
+   */
+  FeelEditor.prototype.setPlaceholder = function(placeholder$1) {
+    this._cmEditor.dispatch({
+      effects: placeholderConf.reconfigure(placeholder(placeholder$1))
+    });
+  };
+
   /*!
   * tabbable 6.2.0
   * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
@@ -97837,6 +97942,7 @@
       onFeelToggle = noop$5,
       onLint = noop$5,
       onPopupOpen = noop$5,
+      placeholder,
       popupOpen,
       disabled,
       tooltipContainer,
@@ -97873,6 +97979,7 @@
         onChange: handleInput,
         onKeyDown: onKeyDown,
         onLint: onLint,
+        placeholder: placeholder,
         tooltipContainer: tooltipContainer,
         value: localValue,
         variables: variables,
@@ -97902,6 +98009,12 @@
       }
       editor.setVariables(variables);
     }, [variables]);
+    p(() => {
+      if (!editor) {
+        return;
+      }
+      editor.setPlaceholder(placeholder);
+    }, [placeholder]);
     const handleClick = () => {
       ref.current.focus();
     };
@@ -98621,7 +98734,8 @@
       onInput,
       value,
       onFocus,
-      onBlur
+      onBlur,
+      placeholder
     } = props;
     const inputRef = _();
 
@@ -98654,6 +98768,7 @@
       onInput: e => onInput(e.target.value),
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       value: value || ''
     });
   });
@@ -98711,7 +98826,8 @@
       onInput,
       value,
       onFocus,
-      onBlur
+      onBlur,
+      placeholder
     } = props;
     const inputRef = _();
 
@@ -98739,6 +98855,7 @@
       onInput: e => onInput(e.target.value),
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       value: value || '',
       "data-gramm": "false"
     });
@@ -99379,6 +99496,7 @@
       onFocus,
       onBlur,
       autoResize,
+      placeholder,
       rows = autoResize ? 1 : 2,
       tooltip
     } = props;
@@ -99421,6 +99539,7 @@
         onInput: handleInput,
         onFocus: onFocus,
         onBlur: onBlur,
+        placeholder: placeholder,
         rows: rows,
         value: localValue,
         disabled: disabled,
@@ -99460,6 +99579,7 @@
       validate,
       onFocus,
       onBlur,
+      placeholder,
       autoResize,
       tooltip
     } = props;
@@ -99495,6 +99615,7 @@
         debounce: debounce,
         monospace: monospace,
         disabled: disabled,
+        placeholder: placeholder,
         autoResize: autoResize,
         tooltip: tooltip,
         element: element
@@ -99527,6 +99648,7 @@
       onInput,
       onFocus,
       onBlur,
+      placeholder,
       value = '',
       tooltip
     } = props;
@@ -99568,6 +99690,7 @@
         onInput: handleInput,
         onFocus: onFocus,
         onBlur: onBlur,
+        placeholder: placeholder,
         value: localValue
       })]
     });
@@ -99601,6 +99724,7 @@
       validate,
       onFocus,
       onBlur,
+      placeholder,
       tooltip
     } = props;
     const globalError = useError(id);
@@ -99632,6 +99756,7 @@
         onInput: onInput,
         onFocus: onFocus,
         onBlur: onBlur,
+        placeholder: placeholder,
         value: value,
         tooltip: tooltip,
         element: element