feat: use FEEL editor in literal expression

packages/dmn-js-literal-expression/assets/css/dmn-js-literal-expression.css

@@ -70,17 +70,12 @@
 }
 
 .dmn-literal-expression-container .decision-name:not(.editable),
-.dmn-literal-expression-container .decision-name .content-editable {
+.dmn-literal-expression-container .decision-name [contenteditable="true"] {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
 
-.dmn-literal-expression-container .textarea .content,
-.dmn-literal-expression-container .textarea .content-editable {
-  padding: 12px;
-}
-
 .dmn-literal-expression-container .textarea .content-editable {
   height: 100%;
   box-sizing: border-box;
@@ -98,7 +93,9 @@
 .dmn-literal-expression-container .textarea {
   box-sizing: border-box;
   width: 100%;
+  padding: 12px;
   font-family: var(--literal-expression-font-family-monospace);
+  line-height: 1.4;
   border: 1px solid var(--textarea-border-color);
   border-bottom-width: 1px;
   white-space: pre;

packages/dmn-js-literal-expression/src/features/textarea/components/TextareaEditorComponent.js

@@ -1,6 +1,7 @@
 import { Component } from 'inferno';
 
 import EditableComponent from 'dmn-js-shared/lib/components/EditableComponent';
+import LiteralExpression from 'dmn-js-shared/lib/components/LiteralExpression';
 
 
 export default class TextareaEditorComponent extends Component {
@@ -10,6 +11,7 @@ export default class TextareaEditorComponent extends Component {
     this._modeling = context.injector.get('modeling');
 
     this._viewer = context.injector.get('viewer');
+    this._expressionLanguages = context.injector.get('expressionLanguages');
 
     this.editLiteralExpressionText = this.editLiteralExpressionText.bind(this);
     this.onElementsChanged = this.onElementsChanged.bind(this);
@@ -32,10 +34,26 @@ export default class TextareaEditorComponent extends Component {
     this._modeling.editLiteralExpressionText(text);
   }
 
+  getEditor() {
+    return this.isFeel() ? FeelEditor : Editor;
+  }
+
+  isFeel() {
+    return this.getExpressionLanguage() === 'feel';
+  }
+
+  getExpressionLanguage() {
+    const businessObject = this.getLiteralExpression();
+
+    return businessObject.expressionLanguage ||
+      this._expressionLanguages.getDefault().value;
+  }
+
   render() {
 
     // there is only one single element
     const { text } = this.getLiteralExpression();
+    const Editor = this.getEditor();
 
     return (
       <Editor
@@ -46,6 +64,16 @@ export default class TextareaEditorComponent extends Component {
   }
 }
 
+class FeelEditor extends Component {
+  render() {
+    return <LiteralExpression
+      className={ this.props.className }
+      value={ this.props.value }
+      onChange={ this.props.onChange }
+    />;
+  }
+}
+
 class Editor extends EditableComponent {
 
   render() {

packages/dmn-js-literal-expression/test/spec/features/textarea/TextareaEditorSpec.js

@@ -4,6 +4,8 @@ import { query as domQuery } from 'min-dom';
 
 import { queryEditor } from 'dmn-js-shared/test/util/EditorUtil';
 
+import ExpressionLanguagesModule from 'dmn-js-shared/lib/features/expression-languages';
+
 import { triggerInputEvent } from 'dmn-js-shared/test/util/EventUtil';
 
 import TestContainer from 'mocha-test-container-support';
@@ -23,7 +25,8 @@ describe('textarea editor', function() {
     modules: [
       CoreModule,
       TextareaEditorModule,
-      ModelingModule
+      ModelingModule,
+      ExpressionLanguagesModule
     ],
     debounceInput: false
   }));
@@ -42,9 +45,25 @@ describe('textarea editor', function() {
   });
 
 
-  it('should edit literal expression text', inject(function(viewer) {
+  it('should edit literal expression text (FEEL)', inject(async function(viewer) {
+
+    // given
+    const editor = queryEditor('.textarea', testContainer);
+
+    editor.focus();
+
+    // when
+    await changeInput(editor, 'foo');
+
+    // then
+    expect(viewer.getDecision().decisionLogic.text).to.equal('foo');
+  }));
+
+
+  it('should edit literal expression text (non-FEEL)', inject(function(viewer) {
 
     // given
+    viewer.get('modeling').editExpressionLanguage('javascript');
     const editor = queryEditor('.textarea', testContainer);
 
     editor.focus();
@@ -57,3 +76,19 @@ describe('textarea editor', function() {
   }));
 
 });
+
+// helpers //////////
+
+/**
+ * @param {HTMLElement} input
+ * @param {string} value
+ */
+function changeInput(input, value) {
+  input.textContent = value;
+
+  return new Promise(resolve => {
+    requestAnimationFrame(() => {
+      resolve();
+    });
+  });
+}