Embed FEEL editor in table cell

packages/dmn-js-decision-table/assets/css/dmn-js-decision-table-controls.css

@@ -251,3 +251,23 @@
   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: 1;
+  font-family: monospace;
+}
+
+.dmn-decision-table-container .cell-editor .feel-editor.focussed > :nth-child(2) {
+  display: none;
+}

packages/dmn-js-decision-table/src/features/cell-selection/CellSelectionUtil.js

@@ -7,7 +7,6 @@ import {
 import cssEscape from 'css.escape';
 
 import {
-  setRange,
   getRange
 } from 'selection-ranges';
 
@@ -109,6 +108,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);
   }
 }

packages/dmn-js-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,47 @@ 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() {
+    const { focussed } = this.state;
+    const className = `feel-editor${focussed ? ' focussed' : ''}`;
+
+    // TODO(@barmac): display only a single editor;
+    // required to workaround "replaceChild" error
+    return <div className={ className } onClick={ this.onFocus }>
+      { focussed &&
+        <LiteralExpression
+          { ...this.props }
+          autoFocus={ true }
+          onBlur={ this.onBlur }
+        />
+      }
+      <ContentEditable
+        { ...this.props }
+        onInput={ () => {} }
+        onFocus={ this.onFocus }
+      />
+    </div>;
+  }
+}
+
+class TableCellEditor extends Component {
 
   constructor(props, context) {
     super(props, context);
@@ -164,10 +172,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 +203,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' : '' }
+          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(

packages/dmn-js-decision-table/src/features/decision-table-head/editor/components/InputEditor.js

@@ -44,6 +44,16 @@ export default class InputEditor extends Component {
     return LiteralExpression;
   }
 
+  /**
+   * Supress default menu closure on enter.
+   * @param {KeyboardEvent} event
+   */
+  handleKeyDown = event => {
+    if (event.key === 'Enter') {
+      event.stopPropagation();
+    }
+  };
+
   render() {
 
     const {
@@ -54,7 +64,8 @@ export default class InputEditor extends Component {
     const ExpressionEditor = this.getExpressionEditorComponent();
 
     return (
-      <div className="context-menu-container ref-input-editor input-edit">
+      <div className="context-menu-container ref-input-editor input-edit"
+        onKeyDown={ this.handleKeyDown }>
 
         <div className="dms-form-control">
           <ContentEditable

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;

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();
+    });
+  });
+}