@bpmn-io/feel-editor 1.3.0 → 1.5.0

package/dist/index.es.js

@@ -3,7 +3,7 @@ import { defaultKeymap } from '@codemirror/commands';
 import { syntaxTree, LanguageSupport, syntaxHighlighting, HighlightStyle, bracketMatching, indentOnInput } from '@codemirror/language';
 import { linter as linter$1, setDiagnosticsEffect } from '@codemirror/lint';
 import { Facet, Compartment, EditorState } from '@codemirror/state';
-import { EditorView, tooltips, keymap } from '@codemirror/view';
+import { EditorView, tooltips, keymap, placeholder } from '@codemirror/view';
 import { snippets, keywordCompletions, feelLanguage } from 'lang-feel';
 import { domify } from 'min-dom';
 import { cmFeelLinter } from '@bpmn-io/feel-lint';
@@ -679,12 +679,7 @@ var variables = context => {
 
   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);
@@ -717,6 +712,55 @@ var variables = context => {
   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({
@@ -813,15 +857,18 @@ var theme = [ baseTheme, highlightTheme, syntaxClasses ];
 
 /**
  * @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
@@ -847,6 +894,7 @@ function FeelEditor({
   onChange = () => {},
   onKeyDown = () => {},
   onLint = () => {},
+  placeholder: placeholder$1 = '',
   readOnly = false,
   value = '',
   variables = []
@@ -903,6 +951,7 @@ function FeelEditor({
     language(),
     linter,
     lintHandler,
+    placeholderConf.of(placeholder(placeholder$1)),
     tooltipLayout,
     theme,
     ...editorExtensions
@@ -977,4 +1026,15 @@ FeelEditor.prototype.setVariables = function(variables) {
   });
 };
 
+/**
+ * Update placeholder text.
+ * @param {string} placeholder
+ * @returns {void}
+ */
+FeelEditor.prototype.setPlaceholder = function(placeholder$1) {
+  this._cmEditor.dispatch({
+    effects: placeholderConf.reconfigure(placeholder(placeholder$1))
+  });
+};
+
 export { FeelEditor as default };

package/dist/index.js

@@ -681,12 +681,7 @@ var variables = context => {
 
   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 = language$1.syntaxTree(context.state).resolve(context.pos, -1);
@@ -719,6 +714,55 @@ var variables = context => {
   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 autocomplete.snippetCompletion(template, {
+    label,
+    type: 'function',
+    info,
+    detail
+  });
+}
+
 function autocompletion() {
   return [
     autocomplete.autocompletion({
@@ -815,15 +859,18 @@ var theme = [ baseTheme, highlightTheme, syntaxClasses ];
 
 /**
  * @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 state.Compartment();
+const placeholderConf = new state.Compartment();
+
 
 /**
  * Creates a FEEL editor in the supplied container
@@ -849,6 +896,7 @@ function FeelEditor({
   onChange = () => {},
   onKeyDown = () => {},
   onLint = () => {},
+  placeholder = '',
   readOnly = false,
   value = '',
   variables = []
@@ -905,6 +953,7 @@ function FeelEditor({
     language(),
     linter,
     lintHandler,
+    placeholderConf.of(view.placeholder(placeholder)),
     tooltipLayout,
     theme,
     ...editorExtensions
@@ -979,4 +1028,15 @@ FeelEditor.prototype.setVariables = function(variables) {
   });
 };
 
+/**
+ * Update placeholder text.
+ * @param {string} placeholder
+ * @returns {void}
+ */
+FeelEditor.prototype.setPlaceholder = function(placeholder) {
+  this._cmEditor.dispatch({
+    effects: placeholderConf.reconfigure(view.placeholder(placeholder))
+  });
+};
+
 module.exports = FeelEditor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/feel-editor",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Editor for FEEL expressions.",
   "files": [
     "dist"