@bpmn-io/feel-editor 1.2.0 → 1.4.0

package/README.md

@@ -28,8 +28,8 @@ const editor = new FeelEditor({
 
 ### Variables
 
-You can provide a variables array that will be used for auto completion. Nested 
-structures are supported.  
+You can provide a variables array that will be used for auto completion. Nested
+structures are supported.
 The Variables need to be in the following format:
 
 ```JavaScript
@@ -63,6 +63,19 @@ editor.setVariables([
 ]);
 ```
 
+### Content attributes
+
+You can provide attributes which will be set on the content editable div:
+
+```javascript
+const editor = new FeelEditor({
+  container,
+  contentAttributes: {
+    'aria-label': 'Expression editor'
+  }
+});
+```
+
 ## Hacking the Project
 
 To get the development setup make sure to have [NodeJS](https://nodejs.org/en/download/) installed.

package/dist/index.es.js

@@ -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,12 +857,13 @@ 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();
@@ -842,6 +887,7 @@ const autocompletionConf = new Compartment();
 function FeelEditor({
   extensions: editorExtensions = [],
   container,
+  contentAttributes = {},
   tooltipContainer,
   onChange = () => {},
   onKeyDown = () => {},
@@ -893,6 +939,7 @@ function FeelEditor({
     bracketMatching(),
     changeHandler,
     closeBrackets(),
+    EditorView.contentAttributes.of(contentAttributes),
     indentOnInput(),
     keyHandler,
     keymap.of([

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,12 +859,13 @@ 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();
@@ -844,6 +889,7 @@ const autocompletionConf = new state.Compartment();
 function FeelEditor({
   extensions: editorExtensions = [],
   container,
+  contentAttributes = {},
   tooltipContainer,
   onChange = () => {},
   onKeyDown = () => {},
@@ -895,6 +941,7 @@ function FeelEditor({
     language$1.bracketMatching(),
     changeHandler,
     autocomplete.closeBrackets(),
+    view.EditorView.contentAttributes.of(contentAttributes),
     language$1.indentOnInput(),
     keyHandler,
     view.keymap.of([

package/package.json

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