@bpmn-io/feel-editor 1.4.0 → 1.6.0

package/dist/index.js

@@ -6,15 +6,113 @@ var language$1 = require('@codemirror/language');
 var lint = require('@codemirror/lint');
 var state = require('@codemirror/state');
 var view = require('@codemirror/view');
-var langFeel = require('lang-feel');
-var minDom = require('min-dom');
 var feelLint = require('@bpmn-io/feel-lint');
 var highlight = require('@lezer/highlight');
+var langFeel = require('lang-feel');
+var minDom = require('min-dom');
+
+var linter = [ lint.linter(feelLint.cmFeelLinter()) ];
+
+const baseTheme = view.EditorView.theme({
+  '& .cm-content': {
+    padding: '0px',
+  },
+  '& .cm-line': {
+    padding: '0px',
+  },
+  '&.cm-editor.cm-focused': {
+    outline: 'none',
+  },
+  '& .cm-completionInfo': {
+    whiteSpace: 'pre-wrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  },
+
+  // Don't wrap whitespace for custom HTML
+  '& .cm-completionInfo > *': {
+    whiteSpace: 'normal'
+  },
+  '& .cm-completionInfo ul': {
+    margin: 0,
+    paddingLeft: '15px'
+  },
+  '& .cm-completionInfo pre': {
+    marginBottom: 0,
+    whiteSpace: 'pre-wrap'
+  },
+  '& .cm-completionInfo p': {
+    marginTop: 0,
+  },
+  '& .cm-completionInfo p:not(:last-of-type)': {
+    marginBottom: 0,
+  }
+});
+
+const highlightTheme = view.EditorView.baseTheme({
+  '& .variableName': {
+    color: '#10f'
+  },
+  '& .number': {
+    color: '#164'
+  },
+  '& .string': {
+    color: '#a11'
+  },
+  '& .bool': {
+    color: '#219'
+  },
+  '& .function': {
+    color: '#aa3731',
+    fontWeight: 'bold'
+  },
+  '& .control': {
+    color: '#708'
+  }
+});
+
+const syntaxClasses = language$1.syntaxHighlighting(
+  language$1.HighlightStyle.define([
+    { tag: highlight.tags.variableName, class: 'variableName' },
+    { tag: highlight.tags.name, class: 'variableName' },
+    { tag: highlight.tags.number, class: 'number' },
+    { tag: highlight.tags.string, class: 'string' },
+    { tag: highlight.tags.bool, class: 'bool' },
+    { tag: highlight.tags.function(highlight.tags.variableName), class: 'function' },
+    { tag: highlight.tags.function(highlight.tags.special(highlight.tags.variableName)), class: 'function' },
+    { tag: highlight.tags.controlKeyword, class: 'control' },
+    { tag: highlight.tags.operatorKeyword, class: 'control' }
+  ])
+);
+
+var theme = [ baseTheme, highlightTheme, syntaxClasses ];
 
 // helpers ///////////////////////////////
 
-function isNodeEmpty(node) {
-  return node.from === node.to;
+function _isEmpty(node) {
+  return node && node.from === node.to;
+}
+
+/**
+ * @param {any} node
+ * @param {number} pos
+ *
+ * @return {boolean}
+ */
+function isEmpty(node, pos) {
+
+  // For the special case of empty nodes, we need to check the current node
+  // as well. The previous node could be part of another token, e.g.
+  // when typing functions "abs(".
+  const nextNode = node.nextSibling;
+
+  return _isEmpty(node) || (
+    nextNode && nextNode.from === pos && _isEmpty(nextNode)
+  );
+}
+
+function isVariableName(node) {
+  return node && node.parent && node.parent.name === 'VariableName';
 }
 
 function isPathExpression(node) {
@@ -29,7 +127,382 @@ function isPathExpression(node) {
   return isPathExpression(node.parent);
 }
 
-var tags = [
+/**
+ * @typedef { import('../core').Variable } Variable
+ * @typedef { import('@codemirror/autocomplete').CompletionSource } CompletionSource
+ */
+
+/**
+ * @param { {
+ *   variables?: Variable[],
+ * } } options
+ *
+ * @return { CompletionSource }
+ */
+function pathExpressionCompletion({ variables }) {
+
+  return (context) => {
+
+    const nodeBefore = language$1.syntaxTree(context.state).resolve(context.pos, -1);
+
+    if (!isPathExpression(nodeBefore)) {
+      return;
+    }
+
+    const expression = findPathExpression(nodeBefore);
+
+    // if the cursor is directly after the `.`, variable starts at the cursor position
+    const from = nodeBefore === expression ? context.pos : nodeBefore.from;
+
+    const path = getPath(expression, context);
+
+    let options = variables;
+    for (var i = 0; i < path.length - 1; i++) {
+      var childVar = options.find(val => val.name === path[i].name);
+
+      if (!childVar) {
+        return null;
+      }
+
+      // only suggest if variable type matches
+      if (
+        childVar.isList !== 'optional' &&
+        !!childVar.isList !== path[i].isList
+      ) {
+        return;
+      }
+
+      options = childVar.entries;
+    }
+
+    if (!options) return;
+
+    options = options.map(v => ({
+      label: v.name,
+      type: 'variable',
+      info: v.info,
+      detail: v.detail
+    }));
+
+    const result = {
+      from: from,
+      options: options
+    };
+
+    return result;
+  };
+}
+
+
+function findPathExpression(node) {
+  while (node) {
+    if (node.name === 'PathExpression') {
+      return node;
+    }
+    node = node.parent;
+  }
+}
+
+// parses the path expression into a list of variable names with type information
+// e.g. foo[0].bar => [ { name: 'foo', isList: true }, { name: 'bar', isList: false } ]
+function getPath(node, context) {
+  let path = [];
+
+  for (let child = node.firstChild; child; child = child.nextSibling) {
+    if (child.name === 'PathExpression') {
+      path.push(...getPath(child, context));
+    } else if (child.name === 'FilterExpression') {
+      path.push(...getFilter(child, context));
+    }
+    else {
+      path.push({
+        name: getNodeContent(child, context),
+        isList: false
+      });
+    }
+  }
+  return path;
+}
+
+function getFilter(node, context) {
+  const list = node.firstChild;
+
+  if (list.name === 'PathExpression') {
+    const path = getPath(list, context);
+    const last = path[path.length - 1];
+    last.isList = true;
+
+    return path;
+  }
+
+  return [ {
+    name: getNodeContent(list, context),
+    isList: true
+  } ];
+}
+
+function getNodeContent(node, context) {
+  return context.state.sliceDoc(node.from, node.to);
+}
+
+/**
+ * @typedef { import('../core').Variable } Variable
+ * @typedef { import('@codemirror/autocomplete').CompletionSource } CompletionSource
+ */
+
+/**
+ * @param { {
+ *   variables?: Variable[],
+ *   builtins?: Variable[]
+ * } } options
+ *
+ * @return { CompletionSource }
+ */
+function variableCompletion({ variables = [], builtins = [] }) {
+
+  const options = getVariableSuggestions(variables, builtins);
+
+  if (!options.length) {
+    return (context) => null;
+  }
+
+  return (context) => {
+
+    const {
+      pos,
+      state
+    } = context;
+
+    // in most cases, use what is typed before the cursor
+    const nodeBefore = language$1.syntaxTree(state).resolve(pos, -1);
+
+    if (isEmpty(nodeBefore, pos)) {
+      return context.explicit ? {
+        from: pos,
+        options
+      } : null;
+    }
+
+    // only auto-complete variables
+    if (!isVariableName(nodeBefore) || isPathExpression(nodeBefore)) {
+      return null;
+    }
+
+    return {
+      from: nodeBefore.from,
+      options
+    };
+  };
+}
+
+/**
+ * @param { Variable[] } variables
+ * @param { Variable[] } builtins
+ *
+ * @returns {import('@codemirror/autocomplete').Completion[]}
+ */
+function getVariableSuggestions(variables, builtins) {
+  return [].concat(
+    variables.map(v => createVariableSuggestion(v)),
+    builtins.map(b => createVariableSuggestion(b))
+  );
+}
+
+/**
+ * @param {import('..').Variable} variable
+ * @param {number} boost
+
+ * @returns {import('@codemirror/autocomplete').Completion}
+ */
+function createVariableSuggestion(variable, boost) {
+  if (variable.type === 'function') {
+    return createFunctionVariable(variable, boost);
+  }
+
+  return {
+    label: variable.name,
+    type: 'variable',
+    info: variable.info,
+    detail: variable.detail,
+    boost
+  };
+}
+
+/**
+ * @param {import('..').Variable} variable
+ * @param {number} boost
+ *
+ * @returns {import('@codemirror/autocomplete').Completion}
+ */
+function createFunctionVariable(variable, boost) {
+  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,
+    boost
+  });
+}
+
+/**
+ * @typedef { import('../core').Variable } Variable
+ * @typedef { import('@codemirror/autocomplete').CompletionSource } CompletionSource
+ */
+
+/**
+ * @param { {
+ *   variables?: Variable[],
+ *   builtins?: Variable[]
+ * } } options
+ *
+ * @return { CompletionSource[] }
+ */
+function completions({ variables = [], builtins = [] }) {
+
+  return [
+    pathExpressionCompletion({ variables }),
+    variableCompletion({ variables, builtins }),
+    langFeel.snippetCompletion(langFeel.snippets.map(snippet => ({ ...snippet, boost: -1 }))),
+    ...langFeel.keywordCompletions
+  ];
+}
+
+/**
+ * @typedef { 'expression' | 'unaryTests' } Dialect
+ */
+
+/**
+ * @param { {
+ *   dialect?: Dialect,
+ *   context?: Record<string, any>,
+ *   completions?: import('@codemirror/autocomplete').CompletionSource[]
+ * } } options
+ *
+ * @return { import('@codemirror/language').LanguageSupport }
+ */
+function language(options) {
+  return langFeel.feel(options);
+}
+
+/**
+ * @param { import('../core').Variable[] } variables
+ *
+ * @return {Record<string, any>}
+ */
+function createContext(variables, builtins) {
+  return variables.slice().reverse().reduce((context, builtin) => {
+    context[builtin.name] = new Function();
+
+    return context;
+  }, {});
+}
+
+/**
+ * @typedef { 'expression' | 'unaryTests' } Dialect
+ * @typedef { import('..').Variable } Variable
+ */
+
+/**
+ * @type {Facet<Variable[]>}
+ */
+const builtinsFacet = state.Facet.define();
+
+/**
+ * @type {Facet<Variable[]>}
+ */
+const variablesFacet = state.Facet.define();
+
+/**
+ * @type {Facet<dialect>}
+ */
+const dialectFacet = state.Facet.define();
+
+/**
+ * @typedef {object} Variable
+ * @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 {'function'|'variable'} [type] type of the variable
+ * @property {Array<{name: string, type: string}>} [params] function parameters
+ */
+
+/**
+ * @typedef { {
+ *   dialect?: import('../language').Dialect,
+ *   variables?: Variable[],
+ *   builtins?: Variable[]
+ * } } CoreConfig
+ *
+ * @typedef { import('@codemirror/autocomplete').CompletionSource } CompletionSource
+ * @typedef { import('@codemirror/state').Extension } Extension
+ */
+
+/**
+ * @param { CoreConfig & { completions?: CompletionSource[] } } config
+ *
+ * @return { Extension  }
+ */
+function configure({
+  dialect = 'expression',
+  variables = [],
+  builtins = [],
+  completions: completions$1 = completions({ builtins, variables })
+}) {
+
+  const context = createContext([ ...variables, ...builtins ]);
+
+  return [
+    dialectFacet.of(dialect),
+    builtinsFacet.of(builtins),
+    variablesFacet.of(variables),
+    language({
+      dialect,
+      context,
+      completions: completions$1
+    })
+  ];
+}
+
+/**
+ * @param {import('@codemirror/state').EditorState } state
+ *
+ * @return { CoreConfig }
+ */
+function get(state) {
+
+  const builtins = state.facet(builtinsFacet)[0];
+  const variables = state.facet(variablesFacet)[0];
+  const dialect = state.facet(dialectFacet)[0];
+
+  return {
+    builtins,
+    variables,
+    dialect
+  };
+}
+
+var camundaTags = [
 	{
 		name: "not(negand)",
 		description: "<p>Returns the logical negation of the given value.</p>\n<p><strong>Function signature</strong></p>\n<pre><code class=\"language-feel\">not(negand: boolean): boolean\n</code></pre>\n<p><strong>Examples</strong></p>\n<pre><code class=\"language-feel\">not(true)\n// false\n\nnot(null)\n// null\n</code></pre>\n"
@@ -108,7 +581,7 @@ var tags = [
 	},
 	{
 		name: "date and time(from)",
-		description: "<p>Parses the given string into a date and time.</p>\n<p><strong>Function signature</strong></p>\n<pre><code class=\"language-feel\">date and time(from: string): date and time\n</code></pre>\n<p><strong>Examples</strong></p>\n<pre><code class=\"language-feel\">date and time(&quot;2018-04-29T009:30:00&quot;)\n// date and time(&quot;2018-04-29T009:30:00&quot;)\n</code></pre>\n"
+		description: "<p>Parses the given string into a date and time.</p>\n<p><strong>Function signature</strong></p>\n<pre><code class=\"language-feel\">date and time(from: string): date and time\n</code></pre>\n<p><strong>Examples</strong></p>\n<pre><code class=\"language-feel\">date and time(&quot;2018-04-29T09:30:00&quot;)\n// date and time(&quot;2018-04-29T09:30:00&quot;)\n</code></pre>\n"
 	},
 	{
 		name: "date and time(date, time)",
@@ -496,379 +969,75 @@ var tags = [
 	},
 	{
 		name: "week of year(date)",
-		description: "<p>Returns the Gregorian number of the week within the year, according to ISO 8601.</p>\n<p><strong>Function signature</strong></p>\n<pre><code class=\"language-feel\">week of year(date: date): number\n</code></pre>\n<pre><code class=\"language-feel\">week of year(date: date and time): number\n</code></pre>\n<p><strong>Examples</strong></p>\n<pre><code class=\"language-feel\">week of year(date(&quot;2019-09-17&quot;))\n// 38\n\nweek of year(date and time(&quot;2019-09-17T12:00:00&quot;))\n// 38\n</code></pre>\n"
-	},
-	{
-		name: "month of year(date)",
-		description: "<p>Returns the month of the year according to the Gregorian calendar. Note that it always returns the English name of the month.</p>\n<p><strong>Function signature</strong></p>\n<pre><code class=\"language-feel\">month of year(date: date): string\n</code></pre>\n<pre><code class=\"language-feel\">month of year(date: date and time): string\n</code></pre>\n<p><strong>Examples</strong></p>\n<pre><code class=\"language-feel\">month of year(date(&quot;2019-09-17&quot;))\n// &quot;September&quot;\n\nmonth of year(date and time(&quot;2019-09-17T12:00:00&quot;))\n// &quot;September&quot;\n</code></pre>\n"
-	},
-	{
-		name: "abs(n)",
-		description: "<p>Returns the absolute value of a given duration.</p>\n<p><strong>Function signature</strong></p>\n<pre><code class=\"language-feel\">abs(n: days and time duration): days and time duration\n</code></pre>\n<pre><code class=\"language-feel\">abs(n: years and months duration): years and months duration\n</code></pre>\n<p><strong>Examples</strong></p>\n<pre><code class=\"language-feel\">abs(duration(&quot;-PT5H&quot;))\n// &quot;duration(&quot;PT5H&quot;)&quot;\n\nabs(duration(&quot;PT5H&quot;))\n// &quot;duration(&quot;PT5H&quot;)&quot;\n\nabs(duration(&quot;-P2M&quot;))\n// duration(&quot;P2M&quot;)\n</code></pre>\n"
-	},
-	{
-		name: "last day of month(date)",
-		description: "<p><em>Camunda Extension</em></p>\n<p>Takes the month of the given date or date-time value and returns the last day of this month.</p>\n<p><strong>Function signature</strong></p>\n<pre><code class=\"language-feel\">last day of month(date: date): date\n</code></pre>\n<pre><code class=\"language-feel\">last day of month(date: date and time): date\n</code></pre>\n<p><strong>Examples</strong></p>\n<pre><code class=\"language-feel\">last day of month(date(&quot;2022-10-01&quot;))\n// date(&quot;2022-10-31&quot;))\n\nlast day of month(date and time(&quot;2022-10-16T12:00:00&quot;))\n// date(&quot;2022-10-31&quot;))\n</code></pre>\n"
-	}
-];
-
-const options = tags.map(tag => {
-  const match = tag.name.match(/^([\w\s]+)\((.*)\)$/);
-  const functionName = match[1];
-  const functionArguments = match[2];
-
-  const placeHolders = functionArguments
-    .split(', ')
-    .map((arg) => `\${${arg}}`)
-    .join(', ');
-
-  return autocomplete.snippetCompletion(
-    `${functionName}(${placeHolders})`,
-    {
-      label: tag.name,
-      type: 'function',
-      info: () => {
-        const html = minDom.domify(`<div class="description">${tag.description}<div>`);
-        return html;
-      },
-      boost: -1
-    }
-  );
-});
-
-var builtins = context => {
-
-  let nodeBefore = language$1.syntaxTree(context.state).resolve(context.pos, -1);
-
-  // For the special case of empty nodes, we need to check the current node
-  // as well. The previous node could be part of another token, e.g.
-  // when typing functions "abs(".
-  let nextNode = nodeBefore.nextSibling;
-  const isInEmptyNode =
-        isNodeEmpty(nodeBefore) ||
-        nextNode && nextNode.from === context.pos && isNodeEmpty(nextNode);
-
-  if (isInEmptyNode) {
-    return context.explicit ? {
-      from: context.pos,
-      options: options
-    } : null;
-  }
-
-  // Don't auto-complete on path expressions/context keys/...
-  if ((nodeBefore.parent && nodeBefore.parent.name !== 'VariableName') || isPathExpression(nodeBefore)) {
-    return null;
-  }
-
-  return {
-    from: nodeBefore.from,
-    options: options
-  };
-};
+		description: "<p>Returns the Gregorian number of the week within the year, according to ISO 8601.</p>\n<p><strong>Function signature</strong></p>\n<pre><code class=\"language-feel\">week of year(date: date): number\n</code></pre>\n<pre><code class=\"language-feel\">week of year(date: date and time): number\n</code></pre>\n<p><strong>Examples</strong></p>\n<pre><code class=\"language-feel\">week of year(date(&quot;2019-09-17&quot;))\n// 38\n\nweek of year(date and time(&quot;2019-09-17T12:00:00&quot;))\n// 38\n</code></pre>\n"
+	},
+	{
+		name: "month of year(date)",
+		description: "<p>Returns the month of the year according to the Gregorian calendar. Note that it always returns the English name of the month.</p>\n<p><strong>Function signature</strong></p>\n<pre><code class=\"language-feel\">month of year(date: date): string\n</code></pre>\n<pre><code class=\"language-feel\">month of year(date: date and time): string\n</code></pre>\n<p><strong>Examples</strong></p>\n<pre><code class=\"language-feel\">month of year(date(&quot;2019-09-17&quot;))\n// &quot;September&quot;\n\nmonth of year(date and time(&quot;2019-09-17T12:00:00&quot;))\n// &quot;September&quot;\n</code></pre>\n"
+	},
+	{
+		name: "abs(n)",
+		description: "<p>Returns the absolute value of a given duration.</p>\n<p><strong>Function signature</strong></p>\n<pre><code class=\"language-feel\">abs(n: days and time duration): days and time duration\n</code></pre>\n<pre><code class=\"language-feel\">abs(n: years and months duration): years and months duration\n</code></pre>\n<p><strong>Examples</strong></p>\n<pre><code class=\"language-feel\">abs(duration(&quot;-PT5H&quot;))\n// &quot;duration(&quot;PT5H&quot;)&quot;\n\nabs(duration(&quot;PT5H&quot;))\n// &quot;duration(&quot;PT5H&quot;)&quot;\n\nabs(duration(&quot;-P2M&quot;))\n// duration(&quot;P2M&quot;)\n</code></pre>\n"
+	},
+	{
+		name: "last day of month(date)",
+		description: "<p><em>Camunda Extension</em></p>\n<p>Takes the month of the given date or date-time value and returns the last day of this month.</p>\n<p><strong>Function signature</strong></p>\n<pre><code class=\"language-feel\">last day of month(date: date): date\n</code></pre>\n<pre><code class=\"language-feel\">last day of month(date: date and time): date\n</code></pre>\n<p><strong>Examples</strong></p>\n<pre><code class=\"language-feel\">last day of month(date(&quot;2022-10-01&quot;))\n// date(&quot;2022-10-31&quot;))\n\nlast day of month(date and time(&quot;2022-10-16T12:00:00&quot;))\n// date(&quot;2022-10-31&quot;))\n</code></pre>\n"
+	}
+];
 
 /**
- * @type {Facet<import('..').Variable[]>} Variable
+ * @param { import('..').Builtin[] } builtins
+ *
+ * @returns {import('..').Variable[] } variable
  */
-const variablesFacet = state.Facet.define();
-
-var pathExpression = context => {
-  const variables = context.state.facet(variablesFacet)[0];
-  const nodeBefore = language$1.syntaxTree(context.state).resolve(context.pos, -1);
-
-  if (!isPathExpression(nodeBefore)) {
-    return;
-  }
-
-  const expression = findPathExpression(nodeBefore);
-
-  // if the cursor is directly after the `.`, variable starts at the cursor position
-  const from = nodeBefore === expression ? context.pos : nodeBefore.from;
-
-  const path = getPath(expression, context);
-
-  let options = variables;
-  for (var i = 0; i < path.length - 1; i++) {
-    var childVar = options.find(val => val.name === path[i].name);
-
-    if (!childVar) {
-      return null;
-    }
-
-    // only suggest if variable type matches
-    if (
-      childVar.isList !== 'optional' &&
-      !!childVar.isList !== path[i].isList
-    ) {
-      return;
-    }
-
-    options = childVar.entries;
-  }
-
-  if (!options) return;
-
-  options = options.map(v => ({
-    label: v.name,
-    type: 'variable',
-    info: v.info,
-    detail: v.detail
-  }));
-
-  const result = {
-    from: from,
-    options: options
-  };
-
-  return result;
-};
-
-
-function findPathExpression(node) {
-  while (node) {
-    if (node.name === 'PathExpression') {
-      return node;
-    }
-    node = node.parent;
-  }
-}
-
-// parses the path expression into a list of variable names with type information
-// e.g. foo[0].bar => [ { name: 'foo', isList: true }, { name: 'bar', isList: false } ]
-function getPath(node, context) {
-  let path = [];
-
-  for (let child = node.firstChild; child; child = child.nextSibling) {
-    if (child.name === 'PathExpression') {
-      path.push(...getPath(child, context));
-    } else if (child.name === 'FilterExpression') {
-      path.push(...getFilter(child, context));
-    }
-    else {
-      path.push({
-        name: getNodeContent(child, context),
-        isList: false
-      });
-    }
-  }
-  return path;
-}
-
-function getFilter(node, context) {
-  const list = node.firstChild;
-
-  if (list.name === 'PathExpression') {
-    const path = getPath(list, context);
-    const last = path[path.length - 1];
-    last.isList = true;
-
-    return path;
-  }
-
-  return [ {
-    name: getNodeContent(list, context),
-    isList: true
-  } ];
-}
-
-function getNodeContent(node, context) {
-  return context.state.sliceDoc(node.from, node.to);
+function parseBuiltins(builtins) {
+  return builtins.map(parseBuiltin);
 }
 
 /**
- * @type {import('@codemirror/autocomplete').CompletionSource}
- */
-var variables = context => {
-
-  const variables = context.state.facet(variablesFacet)[0];
-
-  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);
-
-  // For the special case of empty nodes, we need to check the current node
-  // as well. The previous node could be part of another token, e.g.
-  // when typing functions "abs(".
-  let nextNode = nodeBefore.nextSibling;
-  const isInEmptyNode =
-        isNodeEmpty(nodeBefore) ||
-        nextNode && nextNode.from === context.pos && isNodeEmpty(nextNode);
-
-  if (isInEmptyNode) {
-    return context.explicit ? {
-      from: context.pos,
-      options: options
-    } : null;
-  }
-
-  const result = {
-    from: nodeBefore.from,
-    options: options
-  };
-
-  // Only auto-complete variables
-  if ((nodeBefore.parent && nodeBefore.parent.name !== 'VariableName') || isPathExpression(nodeBefore)) {
-    return null;
-  }
-
-  return result;
-};
-
-/**
- * @param {import('..').Variable} variable
- * @returns {import('@codemirror/autocomplete').Completion}
+ * @param { import('..').Builtin } builtin
+ *
+ * @returns { import('..').Variable } variable
  */
-function createVariableSuggestion(variable) {
-  if (variable.type === 'function') {
-    return createFunctionVariable(variable);
-  }
-
-  return {
-    label: variable.name,
-    type: 'variable',
-    info: variable.info,
-    detail: variable.detail
-  };
-}
+function parseBuiltin(builtin) {
 
-/**
- * @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
-  }));
+    description
+  } = builtin;
 
-  const template = `${name}(${paramsWithNames.map(p => '${' + p.name + '}').join(', ')})`;
+  const match = name.match(/^([\w\s]+)\((.*)\)$/);
+  const functionName = match[1];
+  const functionArguments = match[2];
 
-  const paramsSignature = paramsWithNames.map(({ name, type }) => (
-    type ? `${name}: ${type}` : name
-  )).join(', ');
-  const label = `${name}(${paramsSignature})`;
+  const params = functionArguments.split(', ').map(name => ({ name }));
 
-  return autocomplete.snippetCompletion(template, {
-    label,
+  return {
+    name: functionName,
     type: 'function',
-    info,
-    detail
-  });
-}
-
-function autocompletion() {
-  return [
-    autocomplete.autocompletion({
-      override: [
-        variables,
-        builtins,
-        autocomplete.completeFromList(langFeel.snippets.map(s => ({ ...s, boost: -1 }))),
-        pathExpression,
-        ...langFeel.keywordCompletions
-      ]
-    })
-  ];
-}
-
-function language() {
-  return new language$1.LanguageSupport(langFeel.feelLanguage, [ ]);
+    params,
+    info: () => {
+      return minDom.domify(`<div class="description">${description}<div>`);
+    },
+    boost: 0
+  };
 }
 
-var linter = [ lint.linter(feelLint.cmFeelLinter()) ];
-
-const baseTheme = view.EditorView.theme({
-  '& .cm-content': {
-    padding: '0px',
-  },
-  '& .cm-line': {
-    padding: '0px',
-  },
-  '&.cm-editor.cm-focused': {
-    outline: 'none',
-  },
-  '& .cm-completionInfo': {
-    whiteSpace: 'pre-wrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
-  },
-
-  // Don't wrap whitespace for custom HTML
-  '& .cm-completionInfo > *': {
-    whiteSpace: 'normal'
-  },
-  '& .cm-completionInfo ul': {
-    margin: 0,
-    paddingLeft: '15px'
-  },
-  '& .cm-completionInfo pre': {
-    marginBottom: 0,
-    whiteSpace: 'pre-wrap'
-  },
-  '& .cm-completionInfo p': {
-    marginTop: 0,
-  },
-  '& .cm-completionInfo p:not(:last-of-type)': {
-    marginBottom: 0,
-  }
-});
-
-const highlightTheme = view.EditorView.baseTheme({
-  '& .variableName': {
-    color: '#10f'
-  },
-  '& .number': {
-    color: '#164'
-  },
-  '& .string': {
-    color: '#a11'
-  },
-  '& .bool': {
-    color: '#219'
-  },
-  '& .function': {
-    color: '#aa3731',
-    fontWeight: 'bold'
-  },
-  '& .control': {
-    color: '#708'
-  }
-});
-
-const syntaxClasses = language$1.syntaxHighlighting(
-  language$1.HighlightStyle.define([
-    { tag: highlight.tags.variableName, class: 'variableName' },
-    { tag: highlight.tags.name, class: 'variableName' },
-    { tag: highlight.tags.number, class: 'number' },
-    { tag: highlight.tags.string, class: 'string' },
-    { tag: highlight.tags.bool, class: 'bool' },
-    { tag: highlight.tags.function(highlight.tags.variableName), class: 'function' },
-    { tag: highlight.tags.function(highlight.tags.special(highlight.tags.variableName)), class: 'function' },
-    { tag: highlight.tags.controlKeyword, class: 'control' },
-    { tag: highlight.tags.operatorKeyword, class: 'control' }
-  ])
-);
+const camunda = parseBuiltins(camundaTags);
 
-var theme = [ baseTheme, highlightTheme, syntaxClasses ];
+/**
+ * @typedef { import('./core').Variable } Variable
+ */
 
 /**
- * @typedef {object} Variable
- * @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 {'function'|'variable'} [type] type of the variable
- * @property {Array<{name: string, type: string}>} [params] function parameters
+ * @typedef {object} Builtin
+ * @property {string} name
+ * @property {string} description
  */
 
-const autocompletionConf = new state.Compartment();
+const coreConf = new state.Compartment();
+const placeholderConf = new state.Compartment();
+
 
 /**
  * Creates a FEEL editor in the supplied container
@@ -876,6 +1045,7 @@ const autocompletionConf = new state.Compartment();
  * @param {Object} config
  * @param {DOMNode} config.container
  * @param {Extension[]} [config.extensions]
+ * @param {Dialect} [config.dialect='expression']
  * @param {DOMNode|String} [config.tooltipContainer]
  * @param {Function} [config.onChange]
  * @param {Function} [config.onKeyDown]
@@ -883,19 +1053,23 @@ const autocompletionConf = new state.Compartment();
  * @param {Boolean} [config.readOnly]
  * @param {String} [config.value]
  * @param {Variable[]} [config.variables]
+ * @param {Variable[]} [config.builtins]
  *
  * @returns {Object} editor
  */
 function FeelEditor({
   extensions: editorExtensions = [],
+  dialect = 'expression',
   container,
   contentAttributes = {},
   tooltipContainer,
   onChange = () => {},
   onKeyDown = () => {},
   onLint = () => {},
+  placeholder = '',
   readOnly = false,
   value = '',
+  builtins = camunda,
   variables = []
 }) {
 
@@ -936,21 +1110,25 @@ function FeelEditor({
   }) : [];
 
   const extensions = [
-    autocompletionConf.of(variablesFacet.of(variables)),
-    autocompletion(),
+    autocomplete.autocompletion(),
+    coreConf.of(configure({
+      dialect,
+      builtins,
+      variables
+    })),
     language$1.bracketMatching(),
-    changeHandler,
+    language$1.indentOnInput(),
     autocomplete.closeBrackets(),
     view.EditorView.contentAttributes.of(contentAttributes),
-    language$1.indentOnInput(),
+    changeHandler,
     keyHandler,
     view.keymap.of([
       ...commands.defaultKeymap,
     ]),
-    language(),
     linter,
     lintHandler,
     tooltipLayout,
+    placeholderConf.of(view.placeholder(placeholder)),
     theme,
     ...editorExtensions
   ];
@@ -962,7 +1140,7 @@ function FeelEditor({
   this._cmEditor = new view.EditorView({
     state: state.EditorState.create({
       doc: value,
-      extensions: extensions
+      extensions
     }),
     parent: container
   });
@@ -1015,12 +1193,35 @@ FeelEditor.prototype.getSelection = function() {
 
 /**
  * Set variables to be used for autocompletion.
+ *
  * @param {Variable[]} variables
- * @returns {void}
  */
 FeelEditor.prototype.setVariables = function(variables) {
+
+  const {
+    dialect,
+    builtins
+  } = get(this._cmEditor.state);
+
+  this._cmEditor.dispatch({
+    effects: [
+      coreConf.reconfigure(configure({
+        dialect,
+        builtins,
+        variables
+      }))
+    ]
+  });
+};
+
+/**
+ * Update placeholder text.
+ *
+ * @param {string} placeholder
+ */
+FeelEditor.prototype.setPlaceholder = function(placeholder) {
   this._cmEditor.dispatch({
-    effects: autocompletionConf.reconfigure(variablesFacet.of(variables))
+    effects: placeholderConf.reconfigure(view.placeholder(placeholder))
   });
 };