Partially working Slate.js-based Table Edit component

src/Table/Cell.jsx

@@ -6,7 +6,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import SlateEditor from 'volto-slate/editor';
-import SlateEditorContext from 'volto-slate/editor/SlateEditorContext';
 
 /**
  * Edit text cell class.
@@ -23,7 +22,7 @@ class Cell extends Component {
     onSelectCell: PropTypes.func.isRequired,
     row: PropTypes.number,
     cell: PropTypes.number,
-    value: PropTypes.array,
+    value: PropTypes.object,
     selected: PropTypes.bool,
     onChange: PropTypes.func.isRequired,
     isTableBlockSelected: PropTypes.bool,
@@ -49,16 +48,14 @@ class Cell extends Component {
       this.state = {
         // selected: this.props.selected,
         // TODO: use utils function that creates the empty default value
-        slateValue: this.props.value || [
-          { type: 'p', children: [{ text: 'Replace me with a default text' }] },
+        slateValue: [
+          this.props.value || {
+            type: 'p',
+            children: [{ text: '' }],
+          },
         ],
-        slateEditorContextData: {
-          focused: false,
-        },
       };
     }
-
-    this.onChange = this.onChange.bind(this);
   }
 
   /**
@@ -67,18 +64,22 @@ class Cell extends Component {
    * @returns {undefined}
    */
   componentDidMount() {
-    // this.setState({ selected: this.props.selected }, () => {
-    //   this.props.onSelectCell(this.props.row, this.props.cell);
-    // });
+    this.setState({ selected: this.props.selected }, () => {
+      this.props.onSelectCell(this.props.row, this.props.cell);
+    });
   }
 
-  // handleBlur() {
-  //   console.log('blur', this.props.row, this.props.column);
-  // }
+  handleBlur() {
+    console.log('blur', this.props.row, this.props.column);
+    this.setState({ selected: false });
+  }
 
-  // handleFocus() {
-  //   console.log('focus', this.props.row, this.props.column);
-  // }
+  handleFocus() {
+    this.setState({ selected: true }, () => {
+      this.props.onSelectCell(this.props.row, this.props.cell);
+    });
+    console.log('focus', this.props.row, this.props.cell);
+  }
 
   /**
    * Component will receive props
@@ -103,14 +104,17 @@ class Cell extends Component {
    * @param {object} editorState Editor state.
    * @returns {undefined}
    */
-  onChange(slateValue) {
+  onChange(val) {
     this.setState(
       {
-        ...this.state,
-        slateValue,
+        slateValue: val,
       },
       () => {
-        this.props.onChange(this.props.row, this.props.cell, slateValue);
+        this.props.onChange(
+          this.props.row,
+          this.props.cell,
+          this.state.slateValue,
+        );
       },
     );
   }
@@ -127,13 +131,13 @@ class Cell extends Component {
 
     return (
       <div>
-        <SlateEditorContext.Provider value={this.state.slateEditorContextData}>
-          <SlateEditor
-            onChange={this.onChange}
-            value={this.state.slateValue}
-            selected={this.slateEditorContextData.focused}
-          />
-        </SlateEditorContext.Provider>
+        <SlateEditor
+          onChange={this.onChange.bind(this)}
+          value={this.state.slateValue}
+          selected={true}
+          onFocus={this.handleFocus.bind(this)}
+          onBlur={this.handleBlur.bind(this)}
+        />
       </div>
     );
   }

src/Table/Edit.jsx

@@ -7,7 +7,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { map, remove } from 'lodash';
 import { Button, Segment, Table, Form } from 'semantic-ui-react';
-import { convertToRaw } from 'draft-js';
 import { Portal } from 'react-portal';
 import cx from 'classnames';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
@@ -22,7 +21,7 @@ import deleteSVG from '@plone/volto/icons/delete.svg';
 const getId = () => Math.floor(Math.random() * Math.pow(2, 24)).toString(32);
 
 function getEmptyParagraph() {
-  return [{ type: 'p', children: [{ text: '' }] }];
+  return { type: 'p', children: [{ text: '' }] };
 }
 
 const emptyCell = (type) => ({

src/editor/SlateEditor.jsx

@@ -14,8 +14,6 @@ import withTestingFeatures from './extensions/withTestingFeatures';
 import { fixSelection } from 'volto-slate/utils';
 // import { toggleMark } from './utils';
 
-import SlateEditorContextSetter from './SlateEditorContextSetter';
-
 import './less/editor.less';
 
 const SlateEditor = ({
@@ -29,6 +27,8 @@ const SlateEditor = ({
   extensions,
   renderExtensions = [],
   testingEditorRef,
+  onFocus,
+  onBlur,
   ...rest
 }) => {
   const { slate } = settings;
@@ -101,7 +101,6 @@ const SlateEditor = ({
       className={cx('slate-editor', { 'show-toolbar': showToolbar, selected })}
     >
       <Slate editor={editor} value={value || initialValue} onChange={onChange}>
-        <SlateEditorContextSetter />
         <SlateToolbar
           selected={selected}
           showToolbar={showToolbar}
@@ -113,6 +112,8 @@ const SlateEditor = ({
           renderElement={Element}
           renderLeaf={Leaf}
           decorate={multiDecorate}
+          onFocus={onFocus}
+          onBlur={onBlur}
           onKeyDown={(event) => {
             // let wasHotkey = false;
             //