@bpmn-io/feel-editor

@bpmn-io/feel-editor

Embeddable Editor for FEEL expressions.

Usage

To get started, create a feel-editor instance:

import FeelEditor from '@bpmn-io/feel-editor';

const editor = new FeelEditor({
  container
});

Configure the FEEL dialect (expression or unary tests):

const editor = new FeelEditor({
  container,
  dialect: 'unaryTests' // defaults to 'expression'
});

You can provide a starting document and listen for changes:

const editor = new FeelEditor({
  container,
  onChange,
  onKeyDown,
  onLint,
  value
});

Variables

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:

const editor = new FeelEditor({
  container,
  variables: [
    {
      name: 'variablename to match',
      detail: 'optional inline info',
      info: 'optional pop-out info',
      entries: [
        {
          name: 'nested variable',
          ...
        }
      ]
    }
  ]
});

The variables can be updated on the instance via FeelEditor#setVariables():

editor.setVariables([
  {
    name: 'newName',
    detail: 'new variable inline info',
    info: 'new pop-out info'
  }
]);

Content attributes

You can provide attributes which will be set on the content editable div:

const editor = new FeelEditor({
  container,
  contentAttributes: {
    'aria-label': 'Expression editor'
  }
});

Events

You can listen to events fired by the editor:

const editor = new FeelEditor({
  container
});

editor.on('lint', ({ diagnostics }) => console.log(diagnostics));

Hacking the Project

To get the development setup make sure to have NodeJS installed. As soon as you are set up, clone the project and execute

npm install
npm start

License

MIT