feat: add FEEL editor for table cells

Closes #774
bpmn-io · Sep 22, 2023 · d4e02b0 · d4e02b0
1 parent 6799d52
commit d4e02b0
Show file tree

Hide file tree

Showing 10 changed files with 229 additions and 85 deletions.
diff --git a/packages/dmn-js-decision-table/assets/css/dmn-js-decision-table-controls.css b/packages/dmn-js-decision-table/assets/css/dmn-js-decision-table-controls.css
@@ -251,3 +251,18 @@
   width: 20px;
   right: 0;
 }
+
+/* cell editor */
+.dmn-decision-table-container .cell-editor__placeholder {
+  position: absolute;
+}
+
+.dmn-decision-table-container .cell-editor:focus-within .cell-editor__placeholder,
+.dmn-decision-table-container .cell-editor:focus-within .dmn-expression-language {
+  display: none;
+}
+
+.dmn-decision-table-container .cell-editor,
+.dmn-decision-table-container .cell-editor .cm-scroller {
+  line-height: normal;
+}
diff --git a/packages/dmn-js-decision-table/src/features/cell-selection/CellSelectionUtil.js b/packages/dmn-js-decision-table/src/features/cell-selection/CellSelectionUtil.js
@@ -7,11 +7,15 @@ import {
 import cssEscape from 'css.escape';
 
 import {
-  setRange,
   getRange
 } from 'selection-ranges';
 
-export const SELECTABLE_SELECTOR = '[contenteditable]';
+export const SELECTABLE_SELECTOR = [
+  '[contenteditable]',
+  '[tabindex]:not([tabindex="-1"])',
+  'input',
+  'textarea'
+].join(',');
 
 export const ELEMENT_SELECTOR = '[data-element-id]';
 
@@ -109,6 +113,6 @@ export function ensureFocus(el) {
   const range = getRange(focusEl);
 
   if (!range || range.end === 0) {
-    setRange(focusEl, { start: 5000, end: 5000 });
+    window.getSelection().setPosition(focusEl.firstChild, focusEl.firstChild.length);
   }
 }
diff --git a/...decision-table/src/features/decision-rules/components/DecisionRulesCellEditorComponent.js b/...decision-table/src/features/decision-rules/components/DecisionRulesCellEditorComponent.js
@@ -4,7 +4,8 @@ import { isString } from 'min-dash';
 
 import { is } from 'dmn-js-shared/lib/util/ModelUtil';
 
-import EditableComponent from 'dmn-js-shared/lib/components/EditableComponent';
+import ContentEditable from 'dmn-js-shared/lib/components/ContentEditable';
+import LiteralExpression from 'dmn-js-shared/lib/components/LiteralExpression';
 
 import { Cell } from 'table-js/lib/components';
 
@@ -14,22 +15,14 @@ export default class DecisionRulesCellEditorComponent extends Component {
   constructor(props, context) {
     super(props, context);
 
-    this.state = {
-      isFocussed: false
-    };
-
     this.changeCellValue = this.changeCellValue.bind(this);
-    this.onFocus = this.onFocus.bind(this);
-    this.onBlur = this.onBlur.bind(this);
     this.onElementsChanged = this.onElementsChanged.bind(this);
   }
 
-
   onElementsChanged() {
     this.forceUpdate();
   }
 
-
   componentWillMount() {
     const { injector } = this.context;
 
@@ -42,35 +35,18 @@ export default class DecisionRulesCellEditorComponent extends Component {
     changeSupport.onElementsChanged(cell.id, this.onElementsChanged);
   }
 
-
   componentWillUnmount() {
     const { cell } = this.props;
 
     this._changeSupport.offElementsChanged(cell.id, this.onElementsChanged);
   }
 
-
   changeCellValue(value) {
     const { cell } = this.props;
 
     this._modeling.editCell(cell.businessObject, value);
   }
 
-
-  onFocus() {
-    this.setState({
-      isFocussed: true
-    });
-  }
-
-
-  onBlur() {
-    this.setState({
-      isFocussed: false
-    });
-  }
-
-
   render() {
     const {
       cell,
@@ -80,8 +56,6 @@ export default class DecisionRulesCellEditorComponent extends Component {
       colIndex
     } = this.props;
 
-    const { isFocussed } = this.state;
-
     const isUnaryTest = is(cell, 'dmn:UnaryTests');
     const businessObject = cell.businessObject;
 
@@ -94,12 +68,7 @@ export default class DecisionRulesCellEditorComponent extends Component {
         data-col-id={ col.id }
       >
         <TableCellEditor
-          className="cell-editor"
           placeholder={ isUnaryTest ? '-' : '' }
-          ctrlForNewline={ true }
-          onFocus={ this.onFocus }
-          onBlur={ this.onBlur }
-          isFocussed={ isFocussed }
           onChange={ this.changeCellValue }
           value={ businessObject.text }
           businessObject={ businessObject } />
@@ -108,8 +77,42 @@ export default class DecisionRulesCellEditorComponent extends Component {
   }
 }
 
+class FeelEditor extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = { focussed: false };
 
-class TableCellEditor extends EditableComponent {
+    this.onFocus = this.onFocus.bind(this);
+    this.onBlur = this.onBlur.bind(this);
+  }
+
+  onFocus() {
+    this.setState({ focussed: true });
+  }
+
+  onBlur() {
+    this.setState({ focussed: false });
+  }
+
+  render() {
+    if (this.state.focussed) {
+      return <LiteralExpression
+        { ...this.props }
+        autoFocus={ true }
+        onBlur={ this.onBlur }
+      />;
+    }
+
+    return <div onClick={ this.onFocus }>
+      <ContentEditable
+        { ...this.props }
+        onFocus={ this.onFocus }
+      />
+    </div>;
+  }
+}
+
+class TableCellEditor extends Component {
 
   constructor(props, context) {
     super(props, context);
@@ -164,10 +167,27 @@ class TableCellEditor extends EditableComponent {
     return this._expressionLanguages.getDefault(elementType);
   }
 
+  getEditor() {
+    return this.isFEEL() ? FeelEditor : ContentEditable;
+  }
+
+  isFEEL() {
+    return this.getExpressionLanguage() === 'feel';
+  }
+
+  getExpressionLanguage() {
+    const { businessObject } = this.props;
+
+    return businessObject.expressionLanguage ||
+      this.getDefaultExpressionLanguage(businessObject).value;
+  }
+
   render() {
     const {
       businessObject,
-      isFocussed
+      placeholder,
+      value,
+      onChange
     } = this.props;
 
     const description = this.getDescription(businessObject);
@@ -178,21 +198,23 @@ class TableCellEditor extends EditableComponent {
 
     const isScript = this.isScript(businessObject);
 
+    const Editor = this.getEditor();
+
     return (
-      <div className={ this.getClassName() }>
+      <div className="cell-editor">
         {
           isString(description)
-            && !isFocussed
             && <div className="description-indicator"></div>
         }
+        <Editor
+          className={ isScript ? 'script-editor' : null }
+          ctrlForNewline={ true }
+          onInput={ onChange }
+          value={ value }
+          placeholder={ placeholder }
+        />
         {
-          this.getEditor({
-            className: isScript ? 'script-editor' : null
-          })
-        }
-        {
-          !isDefaultExpressionLanguage &&
-          !isFocussed && (
+          !isDefaultExpressionLanguage && (
             <span
               className="dms-badge dmn-expression-language"
               title={ this._translate(

diff --git a/packages/dmn-js-decision-table/src/features/keyboard/Keyboard.js b/packages/dmn-js-decision-table/src/features/keyboard/Keyboard.js
@@ -102,7 +102,7 @@ export default class Keyboard {
     this._node = node;
 
     // bind key events
-    domEvent.bind(node, 'keydown', this._keyHandler, true);
+    domEvent.bind(node, 'keydown', this._keyHandler);
 
     this._fire('bind');
   }
@@ -118,7 +118,7 @@ export default class Keyboard {
       this._fire('unbind');
 
       // unbind key events
-      domEvent.unbind(node, 'keydown', this._keyHandler, true);
+      domEvent.unbind(node, 'keydown', this._keyHandler);
     }
 
     this._node = null;

diff --git a/packages/dmn-js-decision-table/test/helper/index.js b/packages/dmn-js-decision-table/test/helper/index.js
@@ -259,3 +259,17 @@ export function insertCSS(name, css) {
 
   head.appendChild(style);
 }
+
+/**
+ * Execute function and resolve in next frame.
+ *
+ * @param {Function} fn
+ */
+export function act(fn) {
+  fn();
+  return new Promise(resolve => {
+    requestAnimationFrame(() => {
+      resolve();
+    });
+  });
+}
diff --git a/packages/dmn-js-decision-table/test/spec/EditorSpec.js b/packages/dmn-js-decision-table/test/spec/EditorSpec.js
@@ -12,12 +12,12 @@ describe('DecisionTable', function() {
 
   let dmnJS;
 
-  afterEach(function() {
-    if (dmnJS) {
-      dmnJS.destroy();
-      dmnJS = null;
-    }
-  });
+  // afterEach(function() {
+  //   if (dmnJS) {
+  //     dmnJS.destroy();
+  //     dmnJS = null;
+  //   }
+  // });
 
   beforeEach(function() {
     testContainer = TestContainer.get(this);