feat: use FEEL editor in literal expression

Closes #780
bpmn-io · Sep 26, 2023 · 7f1ed01 · 7f1ed01
1 parent eb6eaf9
commit 7f1ed01
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/packages/dmn-js-literal-expression/assets/css/dmn-js-literal-expression.css b/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;

diff --git a/...ges/dmn-js-literal-expression/src/features/textarea/components/TextareaEditorComponent.js b/...ges/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() {