design-comuni-plone-theme 11.10.2 → 12.0.0-alpha.1

package/src/components/ItaliaTheme/manage/Widgets/TextEditorWidget.jsx

@@ -1,16 +1,27 @@
 /**
  * Edit text block.
  * @module components/Widgets/TextEditorWidget/TextEditorWidget
+ *
+ * E' come il componente DetatchedTextBlockEditor di @plone/volto-slate,
+ * ma in più ha il withBlockProperties,
+ * che serve per getire gli handler (le function di focusPrev e focusNext)
  */
 
-import React, { Component } from 'react';
+import React from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { compose } from 'redux';
-import { defineMessages, injectIntl } from 'react-intl';
-import { includes, isEqual } from 'lodash';
-import loadable from '@loadable/component';
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
+import { defineMessages, useIntl } from 'react-intl';
+import { useInView } from 'react-intersection-observer';
+import { SlateEditor } from '@plone/volto-slate/editor';
+import { serializeNodesToText } from '@plone/volto-slate/editor/render';
+import { handleKeyDetached } from '@plone/volto-slate/blocks/Text/keyboard';
+import {
+  uploadContent,
+  saveSlateBlockSelection,
+} from '@plone/volto-slate/actions';
+import SimpleTextEditorWidget from './SimpleTextEditorWidget';
+import { breakList as customBreakList } from 'design-comuni-plone-theme/config/Slate/extensions/breakList';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -20,284 +31,170 @@ const messages = defineMessages({
   },
 });
 
-const Editor = loadable(() => import('draft-js-plugins-editor'));
-
-/**
- * TextEditorWidget class.
- * @class Edit
- * @extends Component
- */
-class TextEditorWidgetComponent extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    data: PropTypes.objectOf(PropTypes.any).isRequired,
-    fieldName: PropTypes.string.isRequired,
-    selected: PropTypes.bool.isRequired,
-    block: PropTypes.string.isRequired,
-    onChangeBlock: PropTypes.func.isRequired,
-    placeholder: PropTypes.string,
-    focusOn: PropTypes.func,
-    nextFocus: PropTypes.any,
-    prevFocus: PropTypes.any,
-    onFocusNextBlock: PropTypes.any,
-    onFocusPreviousBlock: PropTypes.any,
-    showToolbar: PropTypes.bool,
-    onSelectBlock: PropTypes.func,
-    onAddBlock: PropTypes.func,
-    disableMoveToNearest: PropTypes.bool,
-  };
-
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    showToolbar: true,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygEditor
-   */
-  constructor(props) {
-    super(props);
-    const { settings } = config;
-
-    this.draftConfig = settings.richtextEditorSettings(props);
-
-    const { EditorState, convertFromRaw } = props.draftJs;
-    const createInlineToolbarPlugin = props.draftJsInlineToolbarPlugin.default;
-
-    if (!__SERVER__) {
-      let editorState;
-      if (props.data && props.data[props.fieldName]) {
-        editorState = EditorState.createWithContent(
-          convertFromRaw(props.data[props.fieldName]),
-        );
-      } else {
-        editorState = EditorState.createEmpty();
-      }
-
-      const inlineToolbarPlugin = createInlineToolbarPlugin({
-        structure: this.draftConfig.richTextEditorInlineToolbarButtons,
-      });
-
-      this.state = {
-        editorState,
-        inlineToolbarPlugin,
-        addNewBlockOpened: false,
+const TextEditorWidget = (props) => {
+  const {
+    showToolbar = true,
+    setSelected,
+    wrapClass,
+    index,
+    properties,
+    value,
+    fieldName,
+    block,
+    selected,
+    onSelectBlock,
+    onChangeBlock,
+    data = {},
+    ...otherProps
+  } = props;
+
+  const { slate } = config.settings;
+  const { textblockExtensions } = slate;
+  const withBlockProperties = React.useCallback(
+    (editor) => {
+      const p = {
+        ...props,
+        showToolbar: showToolbar,
+        data: { ...props.data, disableNewBlocks: true },
       };
+      editor.getBlockProps = () => p;
+      return editor;
+    },
+    [props, showToolbar],
+  );
+  //const [uid, setUid] = useState();
+  // const getEditor = React.useCallback((editor) => {
+  //   setUid(editor.uid);
+  //   return editor;
+  // });
+
+  //const link_pid = `${uid}-link`;
+  // const show_sidebar_editor = useSelector((state) => {
+  //   return state['slate_plugins']?.[link_pid]?.show_sidebar_editor;
+  // });
+
+  const intl = useIntl();
+  const placeholder =
+    otherProps.placeholder || intl.formatMessage(messages.text);
+
+  const { ref, inView } = useInView({
+    threshold: 0,
+    rootMargin: '0px 0px 200px 0px',
+  });
+
+  const _value = fieldName ? data[fieldName] : value;
+
+  const selectThis = () => {
+    if (setSelected) {
+      setSelected(fieldName ?? true);
+    } else if (onSelectBlock) {
+      onSelectBlock(block);
     }
-  }
-
-  /**
-   * Component will receive props
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    if (this.props.selected && this.node) {
-      setTimeout(this.node.focus, 0);
-    }
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!this.props.selected && nextProps.selected) {
-      // See https://github.com/draft-js-plugins/draft-js-plugins/issues/800
-      setTimeout(this.node.focus, 0);
-      const { EditorState } = this.props.draftJs;
-
-      this.setState({
-        editorState: EditorState.moveFocusToEnd(this.state.editorState),
-      });
-    }
-  }
-
-  /**
-   * Change handler
-   * @method onChange
-   * @param {object} editorState Editor state.
-   * @returns {undefined}
-   */
-  onChange = (editorState) => {
-    const { convertToRaw } = this.props.draftJs;
-    if (
-      !isEqual(
-        convertToRaw(editorState.getCurrentContent()),
-        convertToRaw(this.state.editorState.getCurrentContent()),
-      )
-    ) {
-      this.props.onChangeBlock({
-        ...this.props.data,
-        [this.props.fieldName]: convertToRaw(editorState.getCurrentContent()),
-      });
-    }
-    this.setState({ editorState });
   };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    if (__SERVER__) {
-      return <div />;
+  const extensions = [...textblockExtensions].map((f) => {
+    if (f.name === 'breakList') {
+      return customBreakList;
     }
-
-    const { InlineToolbar } = this.state.inlineToolbarPlugin;
-    let placeholder = this.props.placeholder
-      ? this.props.placeholder
-      : this.props.intl.formatMessage(messages.text);
-    let disableMoveToNearest = this.props.disableMoveToNearest;
-    const isSoftNewlineEvent = this.props.draftJsLibIsSoftNewlineEvent.default;
-    const { RichUtils } = this.props.draftJs;
-
-    return (
-      <>
-        <div className={[this.props.fieldName]}>
-          <Editor
-            onChange={this.onChange}
-            editorState={this.state.editorState}
-            plugins={[
-              this.state.inlineToolbarPlugin,
-              ...this.draftConfig.richTextEditorPlugins,
-            ]}
-            blockRenderMap={this.draftConfig.extendedBlockRenderMap}
-            blockStyleFn={this.draftConfig.blockStyleFn}
-            customStyleMap={this.draftConfig.customStyleMap}
-            placeholder={placeholder}
-            handleReturn={(e) => {
-              // if (disableMoveToNearest) {
-              //   e.stopPropagation();
-              // }
-              if (isSoftNewlineEvent(e)) {
-                this.onChange(
-                  RichUtils.insertSoftNewline(this.state.editorState),
-                );
-                return 'handled';
+    return f;
+  });
+  return (
+    <div
+      className={wrapClass}
+      onClick={() => selectThis()}
+      onFocus={() => selectThis()}
+      onKeyDown={() => selectThis()}
+      role={'textbox'}
+      tabIndex="-1"
+    >
+      {showToolbar ? (
+        <div
+          className="text-slate-editor-inner detached-slate-editor"
+          ref={ref}
+        >
+          <SlateEditor
+            index={index}
+            readOnly={!inView}
+            properties={properties}
+            extensions={extensions}
+            renderExtensions={[withBlockProperties /*, getEditor*/]}
+            value={_value}
+            block={block /* is this needed? */}
+            slateSettings={otherProps.slateSettings}
+            onFocus={() => {
+              if (!selected) {
+                selectThis();
               }
-
-              if (
-                !disableMoveToNearest &&
-                this.props.onSelectBlock &&
-                this.props.onAddBlock
-              ) {
-                const selectionState = this.state.editorState.getSelection();
-                const anchorKey = selectionState.getAnchorKey();
-                const currentContent =
-                  this.state.editorState.getCurrentContent();
-                const currentContentBlock =
-                  currentContent.getBlockForKey(anchorKey);
-                const blockType = currentContentBlock.getType();
-                if (!includes(this.draftConfig.listBlockTypes, blockType)) {
-                  this.props.onSelectBlock(
-                    this.props.onAddBlock('text', this.props.index + 1),
-                  );
-                  return 'handled';
-                }
-                return 'un-handled';
-              }
-
-              return {};
             }}
-            onUpArrow={(e) => {
-              if (this.props.prevFocus) {
-                this.props.setFocus(this.props.prevFocus);
-                e.stopPropagation();
-              } else {
-                if (this.props.disableMoveToNearest) {
-                  e.stopPropagation();
-                } else {
-                  if (this.props.onFocusPreviousBlock) {
-                    const selectionState =
-                      this.state.editorState.getSelection();
-                    const currentCursorPosition =
-                      selectionState.getStartOffset();
+            onChange={(value, selection, editor) => {
+              let v = value;
 
-                    if (currentCursorPosition === 0) {
-                      this.props.onFocusPreviousBlock(
-                        this.props.block,
-                        this.node,
-                      );
-                    }
-                  }
-                }
-              }
-            }}
-            onDownArrow={(e) => {
-              if (this.props.nextFocus) {
-                this.props.setFocus(this.props.nextFocus);
-                e.stopPropagation();
-              } else {
-                if (this.props.disableMoveToNearest) {
-                  e.stopPropagation();
-                } else {
-                  if (this.props.onFocusNextBlock) {
-                    const selectionState =
-                      this.state.editorState.getSelection();
-                    const { editorState } = this.state;
-                    const currentCursorPosition =
-                      selectionState.getStartOffset();
-                    const blockLength = editorState
-                      .getCurrentContent()
-                      .getFirstBlock()
-                      .getLength();
+              let retVal = {
+                value: v,
+                plaintext: serializeNodesToText(value || []),
+              };
 
-                    if (currentCursorPosition === blockLength) {
-                      this.props.onFocusNextBlock(this.props.block, this.node);
-                    }
-                  }
-                }
+              if (fieldName) {
+                retVal = { [fieldName]: v };
               }
+              onChangeBlock(block, {
+                ...data,
+                ...retVal,
+              });
             }}
-            ref={(node) => {
-              this.node = node;
+            selected={selected}
+            placeholder={placeholder}
+            onKeyDown={handleKeyDetached}
+            editableProps={{
+              'aria-multiline': 'true',
+            }}
+            onBlur={() => {
+              // //fix: click on toolbar dropdown items. But you cannot reselect h2 text for example if you go out of the block
+              // if (!show_sidebar_editor) {
+              //   setSelected(fieldName ? null : false);
+              // }
             }}
           />
-          {this.props.showToolbar && this.node && <InlineToolbar />}
         </div>
-      </>
-    );
-  }
-}
-
-export const TextEditorWidget = React.memo(
-  compose(
-    injectIntl,
-    injectLazyLibs([
-      'draftJs',
-      'draftJsLibIsSoftNewlineEvent',
-      'draftJsFilters',
-      'draftJsInlineToolbarPlugin',
-      'draftJsBlockBreakoutPlugin',
-      'draftJsCreateInlineStyleButton',
-      'draftJsCreateBlockStyleButton',
-      'immutableLib',
-      // TODO: add all plugin dependencies, also in Wysiwyg and Cell
-    ]),
-  )(TextEditorWidgetComponent),
-);
+      ) : (
+        <div className="text-editor-inner simple-text">
+          <SimpleTextEditorWidget {...props} index={index} value={_value} />
+        </div>
+      )}
+    </div>
+  );
+};
 
-const Preloader = (props) => {
-  const [loaded, setLoaded] = React.useState(false);
-  React.useEffect(() => {
-    Editor.load().then(() => setLoaded(true));
-  }, []);
-  return loaded ? <TextEditorWidget {...props} /> : null;
+TextEditorWidget.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+  setSelected: PropTypes.func,
+  onChangeBlock: PropTypes.func.isRequired,
+  block: PropTypes.string.isRequired,
+  selected: PropTypes.bool.isRequired,
+  showToolbar: PropTypes.bool,
+  wrapClass: PropTypes.string,
+  focusPrevField: PropTypes.func,
+  focusNextField: PropTypes.func,
+  //from block props:
+  properties: PropTypes.objectOf(PropTypes.any).isRequired,
+  onFocusPreviousBlock: PropTypes.func.isRequired,
+  onFocusNextBlock: PropTypes.func.isRequired,
+  onSelectBlock: PropTypes.func.isRequired,
 };
 
-export default Preloader;
+export default connect(
+  (state, props) => {
+    const blockId = props.block;
+    return {
+      defaultSelection: blockId
+        ? state.slate_block_selections?.[blockId]
+        : null,
+      uploadRequest: state.upload_content?.[props.block]?.upload || {},
+      uploadedContent: state.upload_content?.[props.block]?.data || {},
+    };
+  },
+  {
+    uploadContent,
+    saveSlateBlockSelection, // needed as editor blockProps
+  },
+)(TextEditorWidget);

package/src/config/Blocks/ListingOptions/index.js

@@ -1,7 +1,6 @@
 export {
   addSchemaField,
   templatesOptions,
-  cloneBlock,
 } from 'design-comuni-plone-theme/config/Blocks/ListingOptions/utils';
 export addDefaultOptions from 'design-comuni-plone-theme/config/Blocks/ListingOptions/defaultOptions';
 export addDefaultAdditionalOptions from 'design-comuni-plone-theme/config/Blocks/ListingOptions/defaultAdditionalOptions';

package/src/config/Blocks/ListingOptions/utils.js

@@ -1,5 +1,4 @@
 import { defineMessages } from 'react-intl';
-import { v4 as uuid } from 'uuid';
 
 const messages = defineMessages({
   show_icon: {
@@ -179,9 +178,3 @@ export const addLighthouseField = (schema, intl, position = 1) => {
 
   return pos;
 };
-
-export const cloneBlock = (blockData) => {
-  const blockID = uuid();
-  const clonedData = { ...blockData, block: blockID };
-  return [blockID, clonedData];
-};

package/src/config/Blocks/blocks.js

@@ -65,7 +65,11 @@ import countDownSVG from 'design-comuni-plone-theme/icons/count-down.svg';
 import CountDownBlockView from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/CountDown/View';
 import CountDownBlockEdit from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/CountDown/Edit';
 
-import { cloneBlock } from 'design-comuni-plone-theme/config/Blocks/ListingOptions';
+import calloutSVG from '@plone/volto/icons/megaphone.svg';
+import CalloutView from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Callout/View';
+import CalloutEdit from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Callout/Edit';
+
+import { cloneBlock } from 'design-comuni-plone-theme/helpers/blocks';
 
 const italiaBlocks = {
   highlitedContent: {
@@ -204,7 +208,6 @@ const italiaBlocks = {
     restricted: false,
     mostUsed: false,
     cloneData: cloneBlock,
-    blockHasOwnFocusManagement: true,
     security: {
       addPermission: [],
       view: [],
@@ -222,7 +225,6 @@ const italiaBlocks = {
     restricted: false,
     mostUsed: false,
     cloneData: cloneBlock,
-    blockHasOwnFocusManagement: true,
     security: {
       addPermission: [],
       view: [],
@@ -238,7 +240,6 @@ const italiaBlocks = {
     restricted: false,
     mostUsed: false,
     cloneData: cloneBlock,
-    blockHasOwnFocusManagement: true,
     security: {
       addPermission: [],
       view: [],
@@ -277,6 +278,7 @@ const italiaBlocks = {
       view: [],
     },
     sidebarTab: 1,
+    blockHasOwnFocusManagement: true,
   },
   iconBlocks: {
     id: 'iconBlocks',
@@ -293,6 +295,7 @@ const italiaBlocks = {
       view: [],
     },
     sidebarTab: 1,
+    blockHasOwnFocusManagement: true,
   },
   contacts: {
     id: 'contacts',
@@ -309,6 +312,7 @@ const italiaBlocks = {
       view: [],
     },
     sidebarTab: 1,
+    blockHasOwnFocusManagement: true,
   },
 
   video_gallery: {
@@ -337,7 +341,6 @@ const italiaBlocks = {
     restricted: false,
     mostUsed: false,
     cloneData: cloneBlock,
-    blockHasOwnFocusManagement: true,
     security: {
       addPermission: [],
       view: [],
@@ -359,15 +362,33 @@ const italiaBlocks = {
       view: [],
     },
     sidebarTab: 1,
+    blockHasOwnFocusManagement: true,
+  },
+  callout_block: {
+    id: 'callout_block',
+    title: 'Callout',
+    icon: calloutSVG,
+    group: 'text',
+    view: CalloutView,
+    edit: CalloutEdit,
+    restricted: false,
+    mostUsed: false,
+    cloneData: cloneBlock,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    sidebarTab: 1,
+    blockHasOwnFocusManagement: true,
   },
 };
 
 const getItaliaBlocks = (config) => {
   delete config.blocks.blocksConfig.teaser;
   config.blocks.blocksConfig.gridBlock.allowedBlocks =
-    config.blocks.blocksConfig.gridBlock.allowedBlocks
-      .filter((item) => !['slate', 'teaser'].includes(item))
-      .concat(['text']);
+    config.blocks.blocksConfig.gridBlock.allowedBlocks.filter(
+      (item) => !['teaser'].includes(item),
+    );
   return italiaBlocks;
 };
 export default getItaliaBlocks;

package/src/config/Blocks/listingVariations.js

@@ -66,8 +66,8 @@ import {
   addLinkMoreOptions,
   addSmallBlockLinksTemplateOptions,
   addAttachmentCardTemplateOptions,
-  cloneBlock,
 } from 'design-comuni-plone-theme/config/Blocks/ListingOptions';
+import { cloneBlock } from 'design-comuni-plone-theme/helpers/blocks';
 
 import { addLighthouseField } from 'design-comuni-plone-theme/config/Blocks/ListingOptions/utils';