feat(autocompletion): support nested variables

README.md

@@ -28,8 +28,9 @@ const editor = new FeelEditor({
 
 ### Variables
 
-You can provide a variables array that will be used for auto completion. The Variables
-need to be in the following format:
+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
 const editor = new FeelEditor({
@@ -38,7 +39,13 @@ const editor = new FeelEditor({
     {
       name: 'variablename to match',
       detail: 'optional inline info',
-      info: 'optional pop-out info'
+      info: 'optional pop-out info',
+      entries: [
+        {
+          name: 'nested variable',
+          ...
+        }
+      ]
     }
   ]
 });
@@ -51,7 +58,7 @@ editor.setVariables([
   {
     name: 'newName',
     detail: 'new variable inline info',
-    info: 'new pop-out info
+    info: 'new pop-out info'
   }
 ]);
 ```

package.json

@@ -80,7 +80,7 @@
     "mocha": "^10.0.0",
     "mocha-test-container-support": "^0.2.0",
     "npm-run-all": "^4.1.5",
-    "puppeteer": "^19.2.2",
+    "puppeteer": "^19.3.0",
     "rollup": "^3.3.0",
     "sinon": "^14.0.0",
     "sinon-chai": "^3.7.0",

src/autocompletion/builtins.js

@@ -11,9 +11,10 @@ const options = tags.map(tag => snippetCompletion(
     label: tag.name,
     type: 'function',
     info: () => {
-      const html = domify(tag.description);
+      const html = domify(`<div class="description">${tag.description}<div>`);
       return html;
-    }
+    },
+    boost: -1
   }
 ));
 

src/autocompletion/index.js

@@ -1,6 +1,7 @@
 import { autocompletion, completeFromList } from '@codemirror/autocomplete';
 import { snippets } from 'lang-feel';
 import builtins from './builtins';
+import pathExpression from './pathExpressions';
 
 import variables from './variables';
 
@@ -10,7 +11,8 @@ export default function() {
       override: [
         variables,
         builtins,
-        completeFromList(snippets)
+        completeFromList(snippets.map(s => ({ ...s, boost: -1 }))),
+        pathExpression
       ]
     })
   ];

src/autocompletion/pathExpressions.js

@@ -0,0 +1,106 @@
+import { syntaxTree } from '@codemirror/language';
+import { isPathExpression } from './autocompletionUtil';
+import { variablesFacet } from './VariableFacet';
+
+export default context => {
+  const variables = context.state.facet(variablesFacet)[0];
+  const nodeBefore = 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);
+}

src/index.js

@@ -13,9 +13,11 @@ import theme from './theme';
 
 /**
  * @typedef {object} Variable
- * @property {string} name
- * @property {string} [info]
- * @property {string} [detail]
+ * @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
  */
 
 const autocompletionConf = new Compartment();

test/spec/CodeEditor.spec.js

@@ -32,12 +32,51 @@ return
         {
           name: 'Variable1',
           info: 'Written in Service Task',
-          type: 'Process_1'
+          detail: 'Process_1'
         },
         {
           name: 'Variable2',
           info: 'Written in Service Task',
-          type: 'Process_1'
+          detail: 'Process_1'
+        },
+        {
+          name: 'ContextVariable',
+          info: 'This is a Context Variable',
+          detail: 'Context',
+          entries: [
+            {
+              name: 'child',
+              info: 'This is a child variable',
+              detail: 'Context',
+              entries: [
+                {
+                  name: 'level2',
+                  info: 'This is a level 2 variable',
+                  detail: 'String'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          name: 'ListVariable',
+          info: 'This is a Context Variable',
+          detail: 'List',
+          isList: true,
+          entries: [
+            {
+              name: 'child',
+              info: 'This is a child variable',
+              detail: 'Context',
+              entries: [
+                {
+                  name: 'level2',
+                  info: 'This is a level 2 variable',
+                  detail: 'String'
+                }
+              ]
+            }
+          ]
         }
       ]
     });
@@ -243,12 +282,12 @@ return
           {
             name: 'Variable1',
             info: 'Written in Service Task',
-            type: 'Process_1'
+            detail: 'Process_1'
           },
           {
             name: 'Variable2',
             info: 'Written in Service Task',
-            type: 'Process_1'
+            detail: 'Process_1'
           }
         ]);
       }).not.to.throw();