From 7f1ed01dd6fbefcecc09ebca5aa2ac4ee0a60688 Mon Sep 17 00:00:00 2001
From: Maciej Barelkowski <maciej.barelkowski@camunda.com>
Date: Tue, 26 Sep 2023 14:29:20 +0200
Subject: [PATCH] feat: use FEEL editor in literal expression

Closes #780
---
 .../assets/css/dmn-js-literal-expression.css  |  9 ++----
 .../components/TextareaEditorComponent.js     | 28 +++++++++++++++++++
 2 files changed, 31 insertions(+), 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
index bffd250ec..d07ebf54e 100644
--- 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/packages/dmn-js-literal-expression/src/features/textarea/components/TextareaEditorComponent.js b/packages/dmn-js-literal-expression/src/features/textarea/components/TextareaEditorComponent.js
index 4508b2fa3..ee4f35bac 100644
--- a/packages/dmn-js-literal-expression/src/features/textarea/components/TextareaEditorComponent.js
+++ b/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() {