@bpmn-io/feel-editor 0.5.0 → 0.6.0

package/README.md

@@ -44,6 +44,18 @@ const editor = new FeelEditor({
 });
 ```
 
+The variables can be updated on the instance via `FeelEditor#setVariables()`:
+
+```javascript
+editor.setVariables([
+  {
+    name: 'newName',
+    detail: 'new variable inline info',
+    info: 'new pop-out info
+  }
+]);
+```
+
 ## Hacking the Project
 
 To get the development setup make sure to have [NodeJS](https://nodejs.org/en/download/) installed.

package/dist/index.es.js

@@ -1,9 +1,9 @@
 import { snippetCompletion, autocompletion as autocompletion$1, completeFromList, closeBrackets } from '@codemirror/autocomplete';
 import { defaultKeymap } from '@codemirror/commands';
-import { syntaxTree, LanguageSupport, syntaxHighlighting, HighlightStyle, indentOnInput, bracketMatching } from '@codemirror/language';
+import { syntaxTree, LanguageSupport, syntaxHighlighting, HighlightStyle, bracketMatching, indentOnInput } from '@codemirror/language';
 import { linter as linter$1, setDiagnosticsEffect } from '@codemirror/lint';
-import { EditorState } from '@codemirror/state';
-import { EditorView, keymap } from '@codemirror/view';
+import { Facet, Compartment, EditorState } from '@codemirror/state';
+import { EditorView, tooltips, keymap } from '@codemirror/view';
 import { snippets, feelLanguage } from 'lang-feel';
 import { domify } from 'min-dom';
 import { tags as tags$1 } from '@lezer/highlight';
@@ -407,7 +407,18 @@ var builtins = context => {
   };
 };
 
-var variables = variables => context => {
+/**
+ * @type {Facet<import('..').Variable[]>} Variable
+ */
+const variablesFacet = Facet.define();
+
+/**
+ * @type {import('@codemirror/autocomplete').CompletionSource}
+ */
+var variables = context => {
+
+  const variables = context.state.facet(variablesFacet)[0];
+
   const options = variables.map(v => ({
     label: v.name,
     type: 'variable',
@@ -446,11 +457,11 @@ var variables = variables => context => {
   return result;
 };
 
-function autocompletion(context) {
+function autocompletion() {
   return [
     autocompletion$1({
       override: [
-        variables(context),
+        variables,
         builtins,
         completeFromList(snippets)
       ]
@@ -574,22 +585,33 @@ const syntaxClasses = syntaxHighlighting(
 
 var theme = [ baseTheme, highlightTheme, syntaxClasses ];
 
+/**
+ * @typedef {object} Variable
+ * @property {string} name
+ * @property {string} [info]
+ * @property {string} [detail]
+ */
+
+const autocompletionConf = new Compartment();
+
 /**
  * Creates a FEEL editor in the supplied container
  *
  * @param {Object} config
  * @param {DOMNode} config.container
+ * @param {DOMNode|String} [config.tooltipContainer]
  * @param {Function} [config.onChange]
  * @param {Function} [config.onKeyDown]
  * @param {Function} [config.onLint]
  * @param {Boolean} [config.readOnly]
  * @param {String} [config.value]
- * @param {Array} [config.variables]
+ * @param {Variable[]} [config.variables]
  *
  * @returns {Object} editor
  */
 function FeelEditor({
   container,
+  tooltipContainer,
   onChange = () => {},
   onKeyDown = () => {},
   onLint = () => {},
@@ -624,20 +646,32 @@ function FeelEditor({
     }
   );
 
+  if (typeof tooltipContainer === 'string') {
+    tooltipContainer = document.querySelector(tooltipContainer);
+  }
+
+  const tooltipLayout = tooltipContainer ? tooltips({
+    tooltipSpace: function() {
+      return tooltipContainer.getBoundingClientRect();
+    }
+  }) : [];
+
   const extensions = [
+    autocompletionConf.of(variablesFacet.of(variables)),
+    autocompletion(),
+    bracketMatching(),
+    changeHandler,
+    closeBrackets(),
+    indentOnInput(),
+    keyHandler,
     keymap.of([
       ...defaultKeymap,
     ]),
-    changeHandler,
-    keyHandler,
     language(),
-    autocompletion(variables),
-    theme,
     linter,
-    indentOnInput(),
-    bracketMatching(),
-    closeBrackets(),
-    lintHandler
+    lintHandler,
+    tooltipLayout,
+    theme
   ];
 
   if (readOnly) {
@@ -698,4 +732,15 @@ FeelEditor.prototype.getSelection = function() {
   return this._cmEditor.state.selection;
 };
 
+/**
+ * Set variables to be used for autocompletion.
+ * @param {Variable[]} variables
+ * @returns {void}
+ */
+FeelEditor.prototype.setVariables = function(variables) {
+  this._cmEditor.dispatch({
+    effects: autocompletionConf.reconfigure(variablesFacet.of(variables))
+  });
+};
+
 export { FeelEditor as default };

package/dist/index.js

@@ -409,7 +409,18 @@ var builtins = context => {
   };
 };
 
-var variables = variables => context => {
+/**
+ * @type {Facet<import('..').Variable[]>} Variable
+ */
+const variablesFacet = state.Facet.define();
+
+/**
+ * @type {import('@codemirror/autocomplete').CompletionSource}
+ */
+var variables = context => {
+
+  const variables = context.state.facet(variablesFacet)[0];
+
   const options = variables.map(v => ({
     label: v.name,
     type: 'variable',
@@ -448,11 +459,11 @@ var variables = variables => context => {
   return result;
 };
 
-function autocompletion(context) {
+function autocompletion() {
   return [
     autocomplete.autocompletion({
       override: [
-        variables(context),
+        variables,
         builtins,
         autocomplete.completeFromList(langFeel.snippets)
       ]
@@ -576,22 +587,33 @@ const syntaxClasses = language$1.syntaxHighlighting(
 
 var theme = [ baseTheme, highlightTheme, syntaxClasses ];
 
+/**
+ * @typedef {object} Variable
+ * @property {string} name
+ * @property {string} [info]
+ * @property {string} [detail]
+ */
+
+const autocompletionConf = new state.Compartment();
+
 /**
  * Creates a FEEL editor in the supplied container
  *
  * @param {Object} config
  * @param {DOMNode} config.container
+ * @param {DOMNode|String} [config.tooltipContainer]
  * @param {Function} [config.onChange]
  * @param {Function} [config.onKeyDown]
  * @param {Function} [config.onLint]
  * @param {Boolean} [config.readOnly]
  * @param {String} [config.value]
- * @param {Array} [config.variables]
+ * @param {Variable[]} [config.variables]
  *
  * @returns {Object} editor
  */
 function FeelEditor({
   container,
+  tooltipContainer,
   onChange = () => {},
   onKeyDown = () => {},
   onLint = () => {},
@@ -626,20 +648,32 @@ function FeelEditor({
     }
   );
 
+  if (typeof tooltipContainer === 'string') {
+    tooltipContainer = document.querySelector(tooltipContainer);
+  }
+
+  const tooltipLayout = tooltipContainer ? view.tooltips({
+    tooltipSpace: function() {
+      return tooltipContainer.getBoundingClientRect();
+    }
+  }) : [];
+
   const extensions = [
+    autocompletionConf.of(variablesFacet.of(variables)),
+    autocompletion(),
+    language$1.bracketMatching(),
+    changeHandler,
+    autocomplete.closeBrackets(),
+    language$1.indentOnInput(),
+    keyHandler,
     view.keymap.of([
       ...commands.defaultKeymap,
     ]),
-    changeHandler,
-    keyHandler,
     language(),
-    autocompletion(variables),
-    theme,
     linter,
-    language$1.indentOnInput(),
-    language$1.bracketMatching(),
-    autocomplete.closeBrackets(),
-    lintHandler
+    lintHandler,
+    tooltipLayout,
+    theme
   ];
 
   if (readOnly) {
@@ -700,4 +734,15 @@ FeelEditor.prototype.getSelection = function() {
   return this._cmEditor.state.selection;
 };
 
+/**
+ * Set variables to be used for autocompletion.
+ * @param {Variable[]} variables
+ * @returns {void}
+ */
+FeelEditor.prototype.setVariables = function(variables) {
+  this._cmEditor.dispatch({
+    effects: autocompletionConf.reconfigure(variablesFacet.of(variables))
+  });
+};
+
 module.exports = FeelEditor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/feel-editor",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Editor for FEEL expressions.",
   "files": [
     "dist"
@@ -45,17 +45,16 @@
   "license": "MIT",
   "dependencies": {
     "@babel/core": "^7.20.2",
-    "@codemirror/autocomplete": "^6.1.1",
-    "@codemirror/commands": "^6.0.0",
-    "@codemirror/language": "^6.0.0",
-    "@codemirror/lint": "^6.0.0",
-    "@codemirror/state": "^6.0.0",
-    "@codemirror/view": "^6.0.0",
-    "@lezer/highlight": "^1.0.0",
+    "@codemirror/autocomplete": "^6.3.2",
+    "@codemirror/commands": "^6.1.2",
+    "@codemirror/language": "^6.3.1",
+    "@codemirror/lint": "^6.1.0",
+    "@codemirror/state": "^6.1.4",
+    "@codemirror/view": "^6.5.1",
+    "@lezer/highlight": "^1.1.2",
     "babel-loader": "^9.1.0",
     "babel-plugin-istanbul": "^6.1.1",
-    "lang-feel": "^0.0.3",
-    "lezer-feel": "^0.14.1",
+    "lang-feel": "^0.1.0",
     "min-dom": "^4.0.1"
   },
   "devDependencies": {