@eeacms/volto-clms-theme 1.0.185 → 1.0.187

package/CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.0.187](https://github.com/eea/volto-clms-theme/compare/1.0.186...1.0.187) - 15 March 2023
+
+#### :hammer_and_wrench: Others
+
+- disable no-direct-mutatuion [ionlizarazu - [`dd11dfd`](https://github.com/eea/volto-clms-theme/commit/dd11dfd1cce62ff29771809f27c01c30aad10e9f)]
+- add an empty slate text editor if there are no children in the slate editor [ionlizarazu - [`fb77de2`](https://github.com/eea/volto-clms-theme/commit/fb77de261fd0d40fae42fa6301ea9b485e144320)]
+- mv files to override and initial original copy of SlateEditor.jsx [ionlizarazu - [`cebd0fc`](https://github.com/eea/volto-clms-theme/commit/cebd0fc3ed517cc0b586a5e3060da77ce94763d1)]
+### [1.0.186](https://github.com/eea/volto-clms-theme/compare/1.0.185...1.0.186) - 14 March 2023
+
+#### :bug: Bug Fixes
+
+- fix: formatConversionTable condition to avoid cart first loading error [ionlizarazu - [`054be8e`](https://github.com/eea/volto-clms-theme/commit/054be8e9603d481665d9efeefcb168288aebba40)]
+- fix: remove icon title to avoid duplicated messages [ionlizarazu - [`d4f562a`](https://github.com/eea/volto-clms-theme/commit/d4f562ae4e66847bf02f80d0448e6515da1093e6)]
+
+#### :hammer_and_wrench: Others
+
+- logged in buttons for editor style [ionlizarazu - [`da560b0`](https://github.com/eea/volto-clms-theme/commit/da560b09e92029ae9cc0c193a35771ea4ec8bf1f)]
 ### [1.0.185](https://github.com/eea/volto-clms-theme/compare/1.0.184...1.0.185) - 13 March 2023
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.185",
+  "version": "1.0.187",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/CLMSDatasetDetailView/CLMSDatasetDetailView.jsx

@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { connect, useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { compose } from 'redux';
-import { Modal, Segment } from 'semantic-ui-react';
+import { Modal, Segment, Grid } from 'semantic-ui-react';
 
 import { getUser } from '@plone/volto/actions';
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
@@ -77,191 +77,209 @@ const CLMSDatasetDetailView = ({ content, token }) => {
       {user?.roles && user.roles.includes('Manager') && (
         <>
           <h2>MapLayers importation options:</h2>
-          <Segment.Group compact horizontal>
-            <Segment
-              padded={'very'}
-              color={'olive'}
-              key={'wms-layers-import'}
-              loading={wms_layers_importation?.loading}
-              circular
-              style={{ width: '50%' }}
-            >
-              <Modal
-                onClose={() => {
-                  setOpen({ ...open, 'wms-layers-import': false });
-                }}
-                onOpen={() => {
-                  setOpen({ ...open, 'wms-layers-import': true });
-                }}
-                open={open['wms-layers-import']}
-                trigger={
-                  <CclButton>
-                    <FormattedMessage
-                      id="Import WMS Layers"
-                      defaultMessage="Import WMS Layers"
-                    />
-                  </CclButton>
-                }
-                className={'modal-clms'}
-              >
-                <div className={'modal-clms-background'}>
-                  <div className={'modal-clms-container'}>
-                    <div className={'modal-close modal-clms-close'}>
-                      <span
-                        className="ccl-icon-close"
-                        aria-label="Close"
-                        onClick={() => {
-                          setOpen({ ...open, 'wms-layers-import': false });
-                        }}
-                        onKeyDown={() => {
-                          setOpen({ ...open, 'wms-layers-import': false });
-                        }}
-                        tabIndex="0"
-                        role="button"
-                      ></span>
-                    </div>
-                    <div className="modal-login-text">
-                      <h1>
+          <Segment basic>
+            <Grid columns={2} compact horizontal>
+              <Grid.Column>
+                <Segment
+                  padded={'very'}
+                  color={'olive'}
+                  key={'wms-layers-import'}
+                  loading={wms_layers_importation?.loading}
+                  style={{
+                    width: '100%',
+                    display: 'flex',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <Modal
+                    onClose={() => {
+                      setOpen({ ...open, 'wms-layers-import': false });
+                    }}
+                    onOpen={() => {
+                      setOpen({ ...open, 'wms-layers-import': true });
+                    }}
+                    open={open['wms-layers-import']}
+                    trigger={
+                      <CclButton>
                         <FormattedMessage
                           id="Import WMS Layers"
                           defaultMessage="Import WMS Layers"
                         />
-                      </h1>
-                      This action will import the WMS Layers from the view
-                      service defined in the dataset or from GeoNetwork if the
-                      view service is not defined and a linked geonetwork record
-                      has a valid WMS service link
-                      <br />
-                      <br />
+                      </CclButton>
+                    }
+                    className={'modal-clms'}
+                  >
+                    <div className={'modal-clms-background'}>
+                      <div className={'modal-clms-container'}>
+                        <div className={'modal-close modal-clms-close'}>
+                          <span
+                            className="ccl-icon-close"
+                            aria-label="Close"
+                            onClick={() => {
+                              setOpen({ ...open, 'wms-layers-import': false });
+                            }}
+                            onKeyDown={() => {
+                              setOpen({ ...open, 'wms-layers-import': false });
+                            }}
+                            tabIndex="0"
+                            role="button"
+                          ></span>
+                        </div>
+                        <div className="modal-login-text">
+                          <h1>
+                            <FormattedMessage
+                              id="Import WMS Layers"
+                              defaultMessage="Import WMS Layers"
+                            />
+                          </h1>
+                          This action will import the WMS Layers from the view
+                          service defined in the dataset or from GeoNetwork if
+                          the view service is not defined and a linked
+                          geonetwork record has a valid WMS service link
+                          <br />
+                          <br />
+                        </div>
+                        <CclButton
+                          onClick={() => {
+                            handleWMSImport();
+                            setOpen({ ...open, 'wms-layers-import': false });
+                          }}
+                          mode="filled"
+                        >
+                          <FormattedMessage
+                            id="Import data"
+                            defaultMessage="Import data"
+                          />
+                        </CclButton>
+                      </div>
                     </div>
-                    <CclButton
-                      onClick={() => {
-                        handleWMSImport();
-                        setOpen({ ...open, 'wms-layers-import': false });
-                      }}
-                      mode="filled"
-                    >
-                      <FormattedMessage
-                        id="Import data"
-                        defaultMessage="Import data"
-                      />
-                    </CclButton>
-                  </div>
-                </div>
-              </Modal>
-              {wms_layers_importation?.imported_wms_layers?.status && (
-                <p>
-                  {wms_layers_importation?.loaded &&
-                    wms_layers_importation?.error === null && (
+                  </Modal>
+                  {wms_layers_importation?.imported_wms_layers?.status && (
+                    <p>
+                      {wms_layers_importation?.loaded &&
+                        wms_layers_importation?.error === null && (
+                          <strong>
+                            {' '}
+                            {
+                              wms_layers_importation?.imported_wms_layers
+                                ?.message
+                            }
+                          </strong>
+                        )}
+                    </p>
+                  )}
+                  {wms_layers_importation?.imported_wms_layers?.status ===
+                    'error' && (
+                    <p>
                       <strong>
                         {' '}
                         {wms_layers_importation?.imported_wms_layers?.message}
                       </strong>
-                    )}
-                </p>
-              )}
-              {wms_layers_importation?.imported_wms_layers?.status ===
-                'error' && (
-                <p>
-                  <strong>
-                    {' '}
-                    {wms_layers_importation?.imported_wms_layers?.message}
-                  </strong>
-                </p>
-              )}
-            </Segment>
-            <Segment
-              padded={'very'}
-              color={'olive'}
-              key={'wms-fields-import'}
-              loading={wms_fields_importation?.loading}
-              circular
-              style={{ width: '50%' }}
-            >
-              <Modal
-                onClose={() => {
-                  setOpen({ ...open, 'wms-fields-import': false });
-                }}
-                onOpen={() => {
-                  setOpen({ ...open, 'wms-fields-import': true });
-                }}
-                open={open['wms-fields-import']}
-                trigger={
-                  <CclButton>
-                    <FormattedMessage
-                      id="Import WMS Fields"
-                      defaultMessage="Import WMS Fields"
-                    />
-                  </CclButton>
-                }
-                className={'modal-clms'}
-              >
-                <div className={'modal-clms-background'}>
-                  <div className={'modal-clms-container'}>
-                    <div className={'modal-close modal-clms-close'}>
-                      <span
-                        className="ccl-icon-close"
-                        aria-label="Close"
-                        onClick={() => {
-                          setOpen({ ...open, 'wms-fields-import': false });
-                        }}
-                        onKeyDown={() => {
-                          setOpen({ ...open, 'wms-fields-import': false });
-                        }}
-                        tabIndex="0"
-                        role="button"
-                      ></span>
-                    </div>
-                    <div className="modal-login-text">
-                      <h1>
+                    </p>
+                  )}
+                </Segment>
+              </Grid.Column>
+              <Grid.Column>
+                <Segment
+                  padded={'very'}
+                  color={'olive'}
+                  key={'wms-fields-import'}
+                  loading={wms_fields_importation?.loading}
+                  style={{
+                    width: '100%',
+                    display: 'flex',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <Modal
+                    onClose={() => {
+                      setOpen({ ...open, 'wms-fields-import': false });
+                    }}
+                    onOpen={() => {
+                      setOpen({ ...open, 'wms-fields-import': true });
+                    }}
+                    open={open['wms-fields-import']}
+                    trigger={
+                      <CclButton>
                         <FormattedMessage
                           id="Import WMS Fields"
                           defaultMessage="Import WMS Fields"
                         />
-                      </h1>
-                      This action will import the WMS Fields from the view
-                      service defined in the dataset if this WMS service is
-                      Arcgis based
-                      <br />
-                      <br />
+                      </CclButton>
+                    }
+                    className={'modal-clms'}
+                  >
+                    <div className={'modal-clms-background'}>
+                      <div className={'modal-clms-container'}>
+                        <div className={'modal-close modal-clms-close'}>
+                          <span
+                            className="ccl-icon-close"
+                            aria-label="Close"
+                            onClick={() => {
+                              setOpen({ ...open, 'wms-fields-import': false });
+                            }}
+                            onKeyDown={() => {
+                              setOpen({ ...open, 'wms-fields-import': false });
+                            }}
+                            tabIndex="0"
+                            role="button"
+                          ></span>
+                        </div>
+                        <div className="modal-login-text">
+                          <h1>
+                            <FormattedMessage
+                              id="Import WMS Fields"
+                              defaultMessage="Import WMS Fields"
+                            />
+                          </h1>
+                          This action will import the WMS Fields from the view
+                          service defined in the dataset if this WMS service is
+                          Arcgis based
+                          <br />
+                          <br />
+                        </div>
+                        <CclButton
+                          onClick={() => {
+                            handleWMSFieldimport();
+                            setOpen({ ...open, 'wms-fields-import': false });
+                          }}
+                          mode="filled"
+                        >
+                          <FormattedMessage
+                            id="Import data"
+                            defaultMessage="Import data"
+                          />
+                        </CclButton>
+                      </div>
                     </div>
-                    <CclButton
-                      onClick={() => {
-                        handleWMSFieldimport();
-                        setOpen({ ...open, 'wms-fields-import': false });
-                      }}
-                      mode="filled"
-                    >
-                      <FormattedMessage
-                        id="Import data"
-                        defaultMessage="Import data"
-                      />
-                    </CclButton>
-                  </div>
-                </div>
-              </Modal>
-              {wms_fields_importation?.imported_wms_fields?.status && (
-                <p>
-                  {wms_fields_importation?.loaded &&
-                    wms_fields_importation?.error === null && (
+                  </Modal>
+                  {wms_fields_importation?.imported_wms_fields?.status && (
+                    <p>
+                      {wms_fields_importation?.loaded &&
+                        wms_fields_importation?.error === null && (
+                          <strong>
+                            {' '}
+                            {
+                              wms_fields_importation?.imported_wms_fields
+                                ?.message
+                            }
+                          </strong>
+                        )}
+                    </p>
+                  )}
+                  {wms_fields_importation?.imported_wms_fields?.status ===
+                    'error' && (
+                    <p>
                       <strong>
                         {' '}
                         {wms_fields_importation?.imported_wms_fields?.message}
                       </strong>
-                    )}
-                </p>
-              )}
-              {wms_fields_importation?.imported_wms_fields?.status ===
-                'error' && (
-                <p>
-                  <strong>
-                    {' '}
-                    {wms_fields_importation?.imported_wms_fields?.message}
-                  </strong>
-                </p>
-              )}
-            </Segment>
-          </Segment.Group>
+                    </p>
+                  )}
+                </Segment>
+              </Grid.Column>
+            </Grid>
+          </Segment>
         </>
       )}
 

package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx

@@ -287,7 +287,7 @@ const CLMSCartContent = (props) => {
       getCollectionByItem(item).collection ?? '-'
     );
   };
-  const FormatNaming = ({ item }) => {
+  const FormatNaming = ({ item, formatConversionTable }) => {
     const format_options = getAvailableConversion(
       formatConversionTable,
       originalFormatNaming(item),
@@ -405,7 +405,12 @@ const CLMSCartContent = (props) => {
                         <CollectionNaming item={item} />
                       </td>
                       <td className="table-td-format">
-                        <FormatNaming item={item} />
+                        {formatConversionTable && item && (
+                          <FormatNaming
+                            item={item}
+                            formatConversionTable={formatConversionTable}
+                          />
+                        )}
                       </td>
                       <td className="table-td-projections">
                         {!item.file_id ? (
@@ -455,11 +460,7 @@ const CLMSCartContent = (props) => {
                                 outline: 'inherit',
                               }}
                             >
-                              <Icon
-                                name={addDocumentSVG}
-                                size={25}
-                                title={'Add a duplicated row below'}
-                              />
+                              <Icon name={addDocumentSVG} size={25} />
                             </button>
                           </span>
                         ) : (
@@ -493,7 +494,6 @@ const CLMSCartContent = (props) => {
                                 name={removeSVG}
                                 size={25}
                                 color="#e40166"
-                                title={'Remove this row from the cart'}
                               />
                             </button>
                           </span>

package/src/components/CLMSMeetingView/CLMSMeetingView.jsx

@@ -314,13 +314,19 @@ export const CLMSMeetingView = (props) => {
                 </strong>
                 <br />
                 <br />
-                <CclButton url={location.pathname + '/subscribers'}>
+                <CclButton
+                  url={location.pathname + '/subscribers'}
+                  style={{ marginLeft: '10px', marginRight: '10px' }}
+                >
                   <FormattedMessage
                     id="Participants"
                     defaultMessage="Participants"
                   />
                 </CclButton>
-                <CclButton url={location.pathname + '/emails'}>
+                <CclButton
+                  url={location.pathname + '/emails'}
+                  style={{ marginLeft: '10px', marginRight: '10px' }}
+                >
                   <FormattedMessage
                     id="Mail archive"
                     defaultMessage="Mail archive"

package/src/customizations/@plone/volto-slate/editor/SlateEditor.jsx

@@ -0,0 +1,378 @@
+import ReactDOM from 'react-dom';
+import cx from 'classnames';
+import { isEqual } from 'lodash';
+import { Transforms, Editor } from 'slate'; // , Transforms
+import { Slate, Editable, ReactEditor } from 'slate-react';
+import React, { Component } from 'react'; // , useState
+import { v4 as uuid } from 'uuid';
+
+import config from '@plone/volto/registry';
+
+import { Element, Leaf } from '@plone/volto-slate/editor/render';
+
+import withTestingFeatures from '@plone/volto-slate/editor/extensions/withTestingFeatures';
+import {
+  makeEditor,
+  toggleInlineFormat,
+  toggleMark,
+  parseDefaultSelection,
+} from '@plone/volto-slate/utils';
+import { InlineToolbar } from '@plone/volto-slate/editor/ui';
+import EditorContext from '@plone/volto-slate/editor/EditorContext';
+
+import isHotkey from 'is-hotkey';
+
+import '@plone/volto-slate/editor/less/editor.less';
+
+import Toolbar from './ui/Toolbar';
+
+const handleHotKeys = (editor, event, config) => {
+  let wasHotkey = false;
+
+  for (const hk of Object.entries(config.hotkeys)) {
+    const [shortcut, { format, type }] = hk;
+    if (isHotkey(shortcut, event)) {
+      event.preventDefault();
+
+      if (type === 'inline') {
+        toggleInlineFormat(editor, format);
+      } else {
+        // type === 'mark'
+        toggleMark(editor, format);
+      }
+
+      wasHotkey = true;
+    }
+  }
+
+  return wasHotkey;
+};
+
+// TODO: implement onFocus
+class SlateEditor extends Component {
+  constructor(props) {
+    super(props);
+
+    this.createEditor = this.createEditor.bind(this);
+    this.multiDecorator = this.multiDecorator.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.getSavedSelection = this.getSavedSelection.bind(this);
+    this.setSavedSelection = this.setSavedSelection.bind(this);
+
+    this.savedSelection = null;
+
+    const uid = uuid(); // used to namespace the editor's plugins
+
+    this.slateSettings = props.slateSettings || config.settings.slate;
+
+    this.state = {
+      editor: this.createEditor(uid),
+      showExpandedToolbar: config.settings.slate.showExpandedToolbar,
+      internalValue: this.props.value || this.slateSettings.defaultValue(),
+      uid,
+    };
+
+    this.editor = null;
+    this.selectionTimeout = null;
+  }
+
+  getSavedSelection() {
+    return this.savedSelection;
+  }
+  setSavedSelection(selection) {
+    this.savedSelection = selection;
+  }
+
+  createEditor(uid) {
+    // extensions are "editor plugins" or "editor wrappers". It's a similar
+    // similar to OOP inheritance, where a callable creates a new copy of the
+    // editor, while replacing or adding new capabilities to that editor.
+    // Extensions are purely JS, no React components.
+    const editor = makeEditor({ extensions: this.props.extensions });
+
+    // When the editor loses focus it no longer has a valid selections. This
+    // makes it impossible to have complex types of interactions (like filling
+    // in another text box, operating a select menu, etc). For this reason we
+    // save the active selection
+
+    editor.getSavedSelection = this.getSavedSelection;
+    editor.setSavedSelection = this.setSavedSelection;
+    editor.uid = uid || this.state.uid;
+
+    return editor;
+  }
+
+  handleChange(value) {
+    ReactDOM.unstable_batchedUpdates(() => {
+      this.setState({ internalValue: value });
+      if (this.props.onChange && !isEqual(value, this.props.value)) {
+        this.props.onChange(value, this.editor);
+      }
+    });
+  }
+
+  multiDecorator([node, path]) {
+    // Decorations (such as higlighting node types, selection, etc).
+    const { runtimeDecorators = [] } = this.slateSettings;
+    return runtimeDecorators.reduce(
+      (acc, deco) => deco(this.state.editor, [node, path], acc),
+      [],
+    );
+  }
+
+  componentDidMount() {
+    // watch the dom change
+
+    if (this.props.selected) {
+      let focused = true;
+      try {
+        focused = ReactEditor.isFocused(this.state.editor);
+      } catch {}
+      if (!focused) {
+        setTimeout(() => {
+          try {
+            ReactEditor.focus(this.state.editor);
+          } catch {}
+        }, 100); // flush
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    this.isUnmounted = true;
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!isEqual(prevProps.extensions, this.props.extensions)) {
+      this.setState({ editor: this.createEditor() });
+      return;
+    }
+
+    if (
+      this.props.value &&
+      !isEqual(this.props.value, this.state.internalValue)
+    ) {
+      const { editor } = this.state;
+      editor.children = this.props.value;
+
+      if (this.props.defaultSelection) {
+        const selection = parseDefaultSelection(
+          editor,
+          this.props.defaultSelection,
+        );
+
+        ReactEditor.focus(editor);
+        Transforms.select(editor, selection);
+      } else {
+        Transforms.select(editor, Editor.end(editor, []));
+      }
+
+      this.setState({
+        internalValue: this.props.value,
+      });
+      return;
+    }
+
+    const { editor } = this.state;
+
+    if (!prevProps.selected && this.props.selected) {
+      // if the SlateEditor becomes selected from unselected
+      if (window.getSelection().type === 'None') {
+        // TODO: why is this condition checked?
+        if (this.state.editor.children.length === 0) {
+          // eslint-disable-next-line react/no-direct-mutation-state
+          this.state.editor.children = [
+            { children: [{ text: '' }], type: 'p' },
+          ];
+        }
+        Transforms.select(
+          this.state.editor,
+          Editor.range(this.state.editor, Editor.start(this.state.editor, [])),
+        );
+      }
+
+      ReactEditor.focus(this.state.editor);
+    }
+
+    if (this.props.selected && this.props.onUpdate) {
+      this.props.onUpdate(editor);
+    }
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    const { selected = true, value, readOnly } = nextProps;
+    const res =
+      selected ||
+      this.props.selected !== selected ||
+      this.props.readOnly !== readOnly ||
+      !isEqual(value, this.props.value);
+    return res;
+  }
+
+  render() {
+    const {
+      selected,
+      placeholder,
+      onKeyDown,
+      testingEditorRef,
+      readOnly,
+      className,
+      renderExtensions = [],
+      editableProps = {},
+    } = this.props;
+    const slateSettings = this.slateSettings;
+
+    // renderExtensions is needed because the editor is memoized, so if these
+    // extensions need an updated state (for example to insert updated
+    // blockProps) then we need to always wrap the editor with them
+    const editor = renderExtensions.reduce(
+      (acc, apply) => apply(acc),
+      this.state.editor,
+    );
+
+    // Reset selection if field is reset
+    if (
+      editor.selection &&
+      this.props.value?.length === 1 &&
+      this.props.value[0].children.length === 1 &&
+      this.props.value[0].children[0].text === ''
+    ) {
+      Transforms.select(editor, {
+        anchor: { path: [0, 0], offset: 0 },
+        focus: { path: [0, 0], offset: 0 },
+      });
+    }
+    this.editor = editor;
+
+    if (testingEditorRef) {
+      testingEditorRef.current = editor;
+    }
+
+    // debug-values are `data-` HTML attributes in withTestingFeatures HOC
+
+    return (
+      <div
+        {...this.props['debug-values']}
+        className={cx('slate-editor', {
+          'show-toolbar': this.state.showExpandedToolbar,
+          selected,
+        })}
+        tabIndex={-1}
+      >
+        <EditorContext.Provider value={editor}>
+          <Slate
+            editor={editor}
+            value={this.props.value || slateSettings.defaultValue()}
+            onChange={this.handleChange}
+          >
+            {selected ? (
+              <>
+                <InlineToolbar
+                  editor={editor}
+                  className={className}
+                  slateSettings={this.props.slateSettings}
+                />
+                {Object.keys(slateSettings.elementToolbarButtons).map(
+                  (t, i) => {
+                    return (
+                      <Toolbar elementType={t} key={i}>
+                        {slateSettings.elementToolbarButtons[t].map(
+                          (Btn, b) => {
+                            return <Btn editor={editor} key={b} />;
+                          },
+                        )}
+                      </Toolbar>
+                    );
+                  },
+                )}
+              </>
+            ) : (
+              ''
+            )}
+            <Editable
+              tabIndex={this.props.tabIndex || 0}
+              readOnly={readOnly}
+              placeholder={placeholder}
+              renderElement={(props) => <Element {...props} />}
+              renderLeaf={(props) => <Leaf {...props} />}
+              decorate={this.multiDecorator}
+              spellCheck={false}
+              scrollSelectionIntoView={
+                slateSettings.scrollIntoView ? undefined : () => null
+              }
+              onBlur={() => {
+                this.props.onBlur && this.props.onBlur();
+                return null;
+              }}
+              onClick={this.props.onClick}
+              onSelect={(e) => {
+                if (!selected && this.props.onFocus) {
+                  // we can't overwrite the onFocus of Editable, as the onFocus
+                  // in Slate has too much builtin behaviour that's not
+                  // accessible otherwise. Instead we try to detect such an
+                  // event based on observing selected state
+                  if (!editor.selection) {
+                    setTimeout(() => {
+                      this.props.onFocus();
+                    }, 100); // TODO: why 100 is chosen here?
+                  }
+                }
+
+                if (this.selectionTimeout) clearTimeout(this.selectionTimeout);
+                this.selectionTimeout = setTimeout(() => {
+                  if (
+                    editor.selection &&
+                    !isEqual(editor.selection, this.savedSelection) &&
+                    !this.isUnmounted
+                  ) {
+                    this.setState((state) => ({ update: !this.state.update }));
+                    this.setSavedSelection(
+                      JSON.parse(JSON.stringify(editor.selection)),
+                    );
+                  }
+                }, 200);
+              }}
+              onKeyDown={(event) => {
+                const handled = handleHotKeys(editor, event, slateSettings);
+                if (handled) return;
+                onKeyDown && onKeyDown({ editor, event });
+              }}
+              {...editableProps}
+            />
+            {selected &&
+              slateSettings.persistentHelpers.map((Helper, i) => {
+                return <Helper key={i} editor={editor} />;
+              })}
+            {this.props.debug ? (
+              <ul>
+                <li>{selected ? 'selected' : 'no-selected'}</li>
+                <li>
+                  savedSelection: {JSON.stringify(editor.getSavedSelection())}
+                </li>
+                <li>live selection: {JSON.stringify(editor.selection)}</li>
+                <li>children: {JSON.stringify(editor.children)}</li>
+                <li> {selected ? 'selected' : 'notselected'}</li>
+                <li>
+                  {ReactEditor.isFocused(editor) ? 'focused' : 'unfocused'}
+                </li>
+              </ul>
+            ) : (
+              ''
+            )}
+            {this.props.children}
+          </Slate>
+        </EditorContext.Provider>
+      </div>
+    );
+  }
+}
+
+SlateEditor.defaultProps = {
+  extensions: [],
+  className: '',
+};
+
+// May be needed to wrap in React.memo(), it used to be wrapped in connect()
+export default __CLIENT__ && window?.Cypress
+  ? withTestingFeatures(SlateEditor)
+  : SlateEditor;