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 ( ; + } +} + class Editor extends EditableComponent { render() { diff --git a/packages/dmn-js-literal-expression/test/spec/features/textarea/TextareaEditorSpec.js b/packages/dmn-js-literal-expression/test/spec/features/textarea/TextareaEditorSpec.js index 6db559669..c3060ce7e 100644 --- a/packages/dmn-js-literal-expression/test/spec/features/textarea/TextareaEditorSpec.js +++ b/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(); + }); + }); +}