fix: Slate in blocks

src/components/ItaliaTheme/Blocks/Callout/Edit.jsx

@@ -6,7 +6,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, useIntl } from 'react-intl';
-import { isEqual } from 'lodash';
 import { SidebarPortal } from '@plone/volto/components';
 
 import { Callout, CalloutTitle, CalloutText } from 'design-react-kit';
@@ -34,7 +33,6 @@ const Edit = ({
   onChangeBlock,
   block,
   onSelectBlock,
-  onAddBlock,
   selected,
   ...otherProps
 }) => {

src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/BodyWrapper.jsx

@@ -8,7 +8,7 @@ const BodyWrapper = ({ inEditMode, children }) => {
         'public-ui': inEditMode,
       })}
     >
-      <div>{children}</div>
+      {children}
     </div>
   );
 };

src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Edit.jsx

@@ -3,92 +3,127 @@
  * @module components/Blocks/TitleVM/Edit
  */
 
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import Block from './Block';
-import { injectIntl } from 'react-intl';
-import { isEqual } from 'lodash';
+import { defineMessages, useIntl } from 'react-intl';
+import { Card, CardBody, CardTitle, CardText } from 'design-react-kit';
+import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import BodyWrapper from './BodyWrapper';
 
+const messages = defineMessages({
+  simple_card_title: {
+    id: 'Type the title…',
+    defaultMessage: 'Type the title…',
+  },
+  simple_card_content: {
+    id: 'Type description…',
+    defaultMessage: 'Digita la descrizione…',
+  },
+  simple_card_click: {
+    id: 'Type text…',
+    defaultMessage: 'Digita il testo…',
+  },
+});
 /**
- * Edit title block class.
+ * Edit Calloout block class.
  * @class Edit
  * @extends Component
  */
-class Edit extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    properties: PropTypes.objectOf(PropTypes.any).isRequired,
-    selected: PropTypes.bool.isRequired,
-    index: PropTypes.number.isRequired,
-    onChangeField: PropTypes.func.isRequired,
-    onSelectBlock: PropTypes.func.isRequired,
-    onDeleteBlock: PropTypes.func.isRequired,
-    onAddBlock: PropTypes.func.isRequired,
-    onFocusPreviousBlock: PropTypes.func.isRequired,
-    onFocusNextBlock: PropTypes.func.isRequired,
-    block: PropTypes.string.isRequired,
-  };
+const Edit = ({
+  data,
+  onChangeBlock,
+  block,
+  onSelectBlock,
+  selected,
+  ...otherProps
+}) => {
+  const intl = useIntl();
+  const [selectedField, setSelectedField] = useState('title');
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs SimpleCard Edit block
-   */
-  constructor(props) {
-    super(props);
-
-    if (!__SERVER__) {
+  useEffect(() => {
+    if (selected && !selectedField) {
+      setSelectedField('title');
+    } else if (!selected) {
+      setSelectedField(null);
     }
-  }
-
-  /**
-   * Component did mount lifecycle method
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {}
+  }, [selected]);
 
-  /**
-   * Change handler
-   * @method onChange
-   * @param {object} editorState Editor state.
-   * @returns {undefined}
-   */
-  onChange(obj, fieldname) {
-    if (!isEqual(obj[fieldname], this.props.data[fieldname])) {
-      this.props.onChangeBlock(this.props.block, {
-        ...this.props.data,
-        [fieldname]: obj[fieldname],
-      });
+  useEffect(() => {
+    if (!selected && selectedField) {
+      onSelectBlock(block);
     }
-  }
+  }, [selectedField]);
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    if (__SERVER__) {
-      return <div />;
-    }
-    return (
-      <BodyWrapper data={this.props.data} inEditMode={true}>
-        <Block
-          {...this.props}
-          data={this.props.data}
-          onChange={(obj, fieldname) => this.onChange(obj, fieldname)}
-          inEditMode={true}
-        />
-      </BodyWrapper>
-    );
-  }
-}
+  return __SERVER__ ? (
+    <div />
+  ) : (
+    <BodyWrapper data={data} inEditMode={true}>
+      <div className="simple-text-card-wrapper">
+        <Card
+          color="white"
+          className="card-bg rounded"
+          noWrapper={false}
+          space
+          tag="div"
+        >
+          <CardBody>
+            <div className="cms-ui">
+              <CardTitle tag="h4">
+                <TextEditorWidget
+                  {...otherProps}
+                  showToolbar={false}
+                  data={data}
+                  block={block}
+                  fieldName="simple_card_title"
+                  selected={selectedField === 'title'}
+                  onChangeBlock={onChangeBlock}
+                  placeholder={intl.formatMessage(messages.simple_card_title)}
+                  setSelected={() => {
+                    setSelectedField('title');
+                  }}
+                  focusNextField={() => {
+                    setSelectedField('content');
+                  }}
+                />
+              </CardTitle>
+              <div>
+                <CardText>
+                  <TextEditorWidget
+                    {...otherProps}
+                    showToolbar={true}
+                    data={data}
+                    fieldName="simple_card_content"
+                    selected={selectedField === 'content'}
+                    block={block}
+                    onChangeBlock={onChangeBlock}
+                    placeholder={intl.formatMessage(
+                      messages.simple_card_content,
+                    )}
+                    focusPrevField={() => {
+                      setSelectedField('title');
+                    }}
+                  />
+                </CardText>
+              </div>
+            </div>
+          </CardBody>
+        </Card>
+      </div>
+    </BodyWrapper>
+  );
+};
+
+Edit.propTypes = {
+  properties: PropTypes.objectOf(PropTypes.any).isRequired,
+  selected: PropTypes.bool.isRequired,
+  index: PropTypes.number.isRequired,
+  onChangeField: PropTypes.func.isRequired,
+  onSelectBlock: PropTypes.func.isRequired,
+  onDeleteBlock: PropTypes.func.isRequired,
+  onAddBlock: PropTypes.func.isRequired,
+  onFocusPreviousBlock: PropTypes.func.isRequired,
+  onFocusNextBlock: PropTypes.func.isRequired,
+  block: PropTypes.string.isRequired,
+};
 
-export default injectIntl(Edit);
+export default Edit;