@plone/volto 18.0.0-alpha.34 → 18.0.0-alpha.36

package/src/components/manage/Blocks/Image/Edit.jsx

@@ -3,256 +3,57 @@
  * @module components/manage/Blocks/Image/Edit
  */
 
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { readAsDataURL } from 'promise-file-reader';
-import { Button, Dimmer, Input, Loader, Message } from 'semantic-ui-react';
-import { defineMessages, injectIntl } from 'react-intl';
-import loadable from '@loadable/component';
-import cx from 'classnames';
-import { isEqual } from 'lodash';
 
-import { Icon, ImageSidebar, SidebarPortal } from '@plone/volto/components';
+import { injectIntl } from 'react-intl';
+import cx from 'classnames';
+import { ImageSidebar, SidebarPortal } from '@plone/volto/components';
 import { createContent } from '@plone/volto/actions';
+
 import {
   flattenToAppURL,
-  getBaseUrl,
   isInternalURL,
   withBlockExtensions,
-  validateFileUploadSize,
 } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
-import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
-import clearSVG from '@plone/volto/icons/clear.svg';
-import navTreeSVG from '@plone/volto/icons/nav.svg';
-import aheadSVG from '@plone/volto/icons/ahead.svg';
-import uploadSVG from '@plone/volto/icons/upload.svg';
-
-const Dropzone = loadable(() => import('react-dropzone'));
-
-const messages = defineMessages({
-  ImageBlockInputPlaceholder: {
-    id: 'Browse the site, drop an image, or type an URL',
-    defaultMessage: 'Browse the site, drop an image, or type an URL',
-  },
-  uploadingImage: {
-    id: 'Uploading image',
-    defaultMessage: 'Uploading image',
-  },
-});
+import { ImageInput } from '@plone/volto/components/manage/Widgets/ImageWidget';
 
 /**
- * Edit image block class.
- * @class Edit
- * @extends Component
+ * Edit image block function.
+ * @function Edit
  */
-class Edit extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    selected: PropTypes.bool.isRequired,
-    block: PropTypes.string.isRequired,
-    index: PropTypes.number.isRequired,
-    data: PropTypes.objectOf(PropTypes.any).isRequired,
-    content: PropTypes.objectOf(PropTypes.any),
-    request: PropTypes.shape({
-      loading: PropTypes.bool,
-      loaded: PropTypes.bool,
-    }).isRequired,
-    pathname: PropTypes.string.isRequired,
-    onChangeBlock: PropTypes.func.isRequired,
-    onSelectBlock: PropTypes.func.isRequired,
-    onDeleteBlock: PropTypes.func.isRequired,
-    onFocusPreviousBlock: PropTypes.func.isRequired,
-    onFocusNextBlock: PropTypes.func.isRequired,
-    handleKeyDown: PropTypes.func.isRequired,
-    createContent: PropTypes.func.isRequired,
-    openObjectBrowser: PropTypes.func.isRequired,
-  };
 
-  state = {
-    uploading: false,
-    url: '',
-    dragging: false,
-  };
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    // Update block data after upload finished
-    if (
-      this.props.request.loading &&
-      nextProps.request.loaded &&
-      this.state.uploading
-    ) {
-      this.setState({
-        uploading: false,
-      });
-      this.props.onChangeBlock(this.props.block, {
-        ...this.props.data,
-        url: nextProps.content['@id'],
-        image_field: 'image',
-        image_scales: { image: [nextProps.content.image] },
-        alt: '',
+// const messages = defineMessages({
+//   notImage: {
+//     id: 'The provided link does not lead to an image.',
+//     defaultMessage: 'The provided link does not lead to an image.',
+//   },
+// });
+
+function Edit(props) {
+  const { data } = props;
+  const Image = config.getComponent({ name: 'Image' }).component;
+
+  const handleChange = React.useCallback(
+    async (id, image, { title, image_field, image_scales } = {}) => {
+      const url = image ? image['@id'] || image : '';
+
+      props.onChangeBlock(props.block, {
+        ...props.data,
+        url: flattenToAppURL(url),
+        image_field,
+        image_scales,
+        alt: props.data.alt || title || '',
       });
-    }
-  }
-
-  /**
-   * @param {*} nextProps
-   * @returns {boolean}
-   * @memberof Edit
-   */
-  shouldComponentUpdate(nextProps) {
-    return (
-      this.props.selected ||
-      nextProps.selected ||
-      !isEqual(this.props.data, nextProps.data)
-    );
-  }
-
-  /**
-   * Upload image handler (not used), but useful in case that we want a button
-   * not powered by react-dropzone
-   * @method onUploadImage
-   * @returns {undefined}
-   */
-  onUploadImage = (e) => {
-    e.stopPropagation();
-    const file = e.target.files[0];
-    if (!validateFileUploadSize(file, this.props.intl.formatMessage)) return;
-    this.setState({
-      uploading: true,
-    });
-    readAsDataURL(file).then((data) => {
-      const fields = data.match(/^data:(.*);(.*),(.*)$/);
-      this.props.createContent(
-        getBaseUrl(this.props.pathname),
-        {
-          '@type': 'Image',
-          title: file.name,
-          image: {
-            data: fields[3],
-            encoding: fields[2],
-            'content-type': fields[1],
-            filename: file.name,
-          },
-        },
-        this.props.block,
-      );
-    });
-  };
+    },
+    [props],
+  );
 
-  /**
-   * Change url handler
-   * @method onChangeUrl
-   * @param {Object} target Target object
-   * @returns {undefined}
-   */
-  onChangeUrl = ({ target }) => {
-    this.setState({
-      url: target.value,
-    });
-  };
-
-  /**
-   * Submit url handler
-   * @method onSubmitUrl
-   * @param {object} e Event
-   * @returns {undefined}
-   */
-  onSubmitUrl = () => {
-    this.props.onChangeBlock(this.props.block, {
-      ...this.props.data,
-      url: flattenToAppURL(this.state.url),
-      image_field: undefined,
-      image_scales: undefined,
-    });
-  };
-
-  /**
-   * Drop handler
-   * @method onDrop
-   * @param {array} files File objects
-   * @returns {undefined}
-   */
-  onDrop = (files) => {
-    if (!validateFileUploadSize(files[0], this.props.intl.formatMessage)) {
-      this.setState({ dragging: false });
-      return;
-    }
-    this.setState({ uploading: true });
-
-    readAsDataURL(files[0]).then((data) => {
-      const fields = data.match(/^data:(.*);(.*),(.*)$/);
-      this.props.createContent(
-        getBaseUrl(this.props.pathname),
-        {
-          '@type': 'Image',
-          title: files[0].name,
-          image: {
-            data: fields[3],
-            encoding: fields[2],
-            'content-type': fields[1],
-            filename: files[0].name,
-          },
-        },
-        this.props.block,
-      );
-    });
-  };
-
-  /**
-   * Keydown handler on Variant Menu Form
-   * This is required since the ENTER key is already mapped to a onKeyDown
-   * event and needs to be overriden with a child onKeyDown.
-   * @method onKeyDownVariantMenuForm
-   * @param {Object} e Event object
-   * @returns {undefined}
-   */
-  onKeyDownVariantMenuForm = (e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      e.stopPropagation();
-      this.onSubmitUrl();
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      e.stopPropagation();
-      // TODO: Do something on ESC key
-    }
-  };
-  onDragEnter = () => {
-    this.setState({ dragging: true });
-  };
-  onDragLeave = () => {
-    this.setState({ dragging: false });
-  };
-
-  node = React.createRef();
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const Image = config.getComponent({ name: 'Image' }).component;
-    const { data } = this.props;
-    const placeholder =
-      this.props.data.placeholder ||
-      this.props.intl.formatMessage(messages.ImageBlockInputPlaceholder);
-
-    return (
+  return (
+    <>
       <div
         className={cx(
           'block image align',
@@ -303,123 +104,20 @@ class Edit extends Component {
             responsive={true}
           />
         ) : (
-          <div>
-            {this.props.editable && (
-              <Dropzone
-                noClick
-                onDrop={this.onDrop}
-                onDragEnter={this.onDragEnter}
-                onDragLeave={this.onDragLeave}
-                className="dropzone"
-              >
-                {({ getRootProps, getInputProps }) => (
-                  <div {...getRootProps()}>
-                    <Message>
-                      {this.state.dragging && <Dimmer active></Dimmer>}
-                      {this.state.uploading && (
-                        <Dimmer active>
-                          <Loader indeterminate>
-                            {this.props.intl.formatMessage(
-                              messages.uploadingImage,
-                            )}
-                          </Loader>
-                        </Dimmer>
-                      )}
-                      <div className="no-image-wrapper">
-                        <img src={imageBlockSVG} alt="" />
-                        <div className="toolbar-inner">
-                          <Button.Group>
-                            <Button
-                              basic
-                              icon
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                e.preventDefault();
-                                this.props.openObjectBrowser({
-                                  onSelectItem: (
-                                    url,
-                                    { title, image_field, image_scales },
-                                  ) => {
-                                    this.props.onChangeBlock(this.props.block, {
-                                      ...this.props.data,
-                                      url,
-                                      image_field,
-                                      image_scales,
-                                      alt: this.props.data.alt || title || '',
-                                    });
-                                  },
-                                });
-                              }}
-                            >
-                              <Icon name={navTreeSVG} size="24px" />
-                            </Button>
-                          </Button.Group>
-                          <Button.Group>
-                            <label className="ui button basic icon">
-                              <Icon name={uploadSVG} size="24px" />
-                              <input
-                                {...getInputProps({
-                                  type: 'file',
-                                  onChange: this.onUploadImage,
-                                  style: { display: 'none' },
-                                })}
-                              />
-                            </label>
-                          </Button.Group>
-                          <Input
-                            onKeyDown={this.onKeyDownVariantMenuForm}
-                            onChange={this.onChangeUrl}
-                            placeholder={placeholder}
-                            value={this.state.url}
-                            onClick={(e) => {
-                              e.target.focus();
-                            }}
-                            onFocus={(e) => {
-                              this.props.onSelectBlock(this.props.id);
-                            }}
-                          />
-                          {this.state.url && (
-                            <Button.Group>
-                              <Button
-                                basic
-                                className="cancel"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  this.setState({ url: '' });
-                                }}
-                              >
-                                <Icon name={clearSVG} size="30px" />
-                              </Button>
-                            </Button.Group>
-                          )}
-                          <Button.Group>
-                            <Button
-                              basic
-                              primary
-                              disabled={!this.state.url}
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                this.onSubmitUrl();
-                              }}
-                            >
-                              <Icon name={aheadSVG} size="30px" />
-                            </Button>
-                          </Button.Group>
-                        </div>
-                      </div>
-                    </Message>
-                  </div>
-                )}
-              </Dropzone>
-            )}
-          </div>
+          <ImageInput
+            onChange={handleChange}
+            placeholderLinkInput={data.placeholder}
+            block={props.block}
+            id={props.block}
+            objectBrowserPickerType={'image'}
+          />
         )}
-        <SidebarPortal selected={this.props.selected}>
-          <ImageSidebar {...this.props} />
+        <SidebarPortal selected={props.selected}>
+          <ImageSidebar {...props} />
         </SidebarPortal>
       </div>
-    );
-  }
+    </>
+  );
 }
 
 export default compose(

package/src/components/manage/Blocks/Teaser/Data.jsx

@@ -1,10 +1,14 @@
 import React from 'react';
+import { useDispatch } from 'react-redux';
 import { defineMessages, useIntl } from 'react-intl';
 import { Button } from 'semantic-ui-react';
 import { Icon } from '@plone/volto/components';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { getContent } from '@plone/volto/actions';
 import { isEmpty } from 'lodash';
 
+import reloadSVG from '@plone/volto/icons/reload.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
 
 const messages = defineMessages({
@@ -12,11 +16,16 @@ const messages = defineMessages({
     id: 'Reset the block',
     defaultMessage: 'Reset the block',
   },
+  refreshTeaser: {
+    id: 'Refresh source content',
+    defaultMessage: 'Refresh source content',
+  },
 });
 
 const TeaserData = (props) => {
   const { block, blocksConfig, data, onChangeBlock, navRoot, contentType } =
     props;
+  const dispatch = useDispatch();
   const intl = useIntl();
 
   const reset = () => {
@@ -29,6 +38,48 @@ const TeaserData = (props) => {
     });
   };
 
+  const dataTransformer = (resp, data) => {
+    let hrefData = {
+      '@id': flattenToAppURL(resp['@id']),
+      '@type': resp?.['@type'],
+      Description: resp?.description,
+      Title: resp.title,
+      hasPreviewImage: resp?.preview_image ? true : false,
+      head_title: resp.head_title ?? null,
+      image_field: resp?.preview_image
+        ? 'preview_image'
+        : resp?.image
+          ? 'image'
+          : null,
+      image_scales: {
+        preview_image: [resp?.preview_image],
+        image: [resp?.image],
+      },
+      title: resp.title,
+    };
+    let blockData = {
+      '@type': data['@type'],
+      description: resp?.description,
+      head_title: resp?.head_title,
+      overwrite: data.overwrite,
+      href: [hrefData],
+      styles: data.styles,
+      title: resp.title,
+    };
+    return blockData;
+  };
+
+  const refresh = () => {
+    dispatch(
+      getContent(flattenToAppURL(data.href[0]['@id']), null, `${block}-teaser`),
+    ).then((resp) => {
+      if (resp) {
+        let blockData = dataTransformer(resp, data);
+        onChangeBlock(block, blockData);
+      }
+    });
+  };
+
   const isReseteable =
     isEmpty(data.href) && !data.title && !data.description && !data.head_title;
 
@@ -45,7 +96,23 @@ const TeaserData = (props) => {
     </Button.Group>
   );
 
-  const schema = blocksConfig[data['@type']].blockSchema({ intl });
+  const ActionButton = (
+    <Button.Group className="refresh teaser">
+      <Button
+        aria-label={intl.formatMessage(messages.refreshTeaser)}
+        basic
+        onClick={() => refresh()}
+      >
+        {intl.formatMessage(messages.refreshTeaser)}
+        <Icon name={reloadSVG} size="20px" color="#00000099" />
+      </Button>
+    </Button.Group>
+  );
+
+  const schema = blocksConfig[data['@type']].blockSchema({
+    data,
+    intl,
+  });
   const dataAdapter = blocksConfig[data['@type']].dataAdapter;
 
   return (
@@ -66,6 +133,7 @@ const TeaserData = (props) => {
       block={block}
       blocksConfig={blocksConfig}
       headerActions={HeaderActions}
+      actionButton={data.overwrite && ActionButton}
       navRoot={navRoot}
       contentType={contentType}
     />

package/src/components/manage/Blocks/Teaser/schema.js

@@ -34,16 +34,31 @@ const messages = defineMessages({
     id: 'Alignment',
     defaultMessage: 'Alignment',
   },
+  overwrite: {
+    id: 'Customize teaser content',
+    defaultMessage: 'Customize teaser content',
+  },
+  overwriteDescription: {
+    id: 'Check this box to customize the title, description, or image of the target content item for this teaser. Leave it unchecked to show updates to the target content item if it is edited later.',
+    defaultMessage:
+      'Check this box to customize the title, description, or image of the target content item for this teaser. Leave it unchecked to show updates to the target content item if it is edited later.',
+  },
 });
 
-export const TeaserSchema = ({ intl }) => {
+export const TeaserSchema = ({ data, intl }) => {
   const schema = {
     title: intl.formatMessage(messages.teaser),
     fieldsets: [
       {
         id: 'default',
         title: 'Default',
-        fields: ['href', 'title', 'head_title', 'description', 'preview_image'],
+        fields: [
+          'href',
+          'overwrite',
+          ...(data?.overwrite
+            ? ['title', 'head_title', 'description', 'preview_image']
+            : []),
+        ],
       },
     ],
 
@@ -63,6 +78,12 @@ export const TeaserSchema = ({ intl }) => {
         ],
         allowExternals: true,
       },
+      overwrite: {
+        title: intl.formatMessage(messages.overwrite),
+        description: intl.formatMessage(messages.overwriteDescription),
+        type: 'boolean',
+        default: false,
+      },
       title: {
         title: intl.formatMessage(messages.title),
       },
@@ -85,7 +106,7 @@ export const TeaserSchema = ({ intl }) => {
         type: 'boolean',
       },
     },
-    required: [],
+    required: ['href'],
   };
 
   addStyling({ schema, intl });

package/src/components/manage/Form/BlocksToolbar.jsx

@@ -20,6 +20,7 @@ import copySVG from '@plone/volto/icons/copy.svg';
 import cutSVG from '@plone/volto/icons/cut.svg';
 import pasteSVG from '@plone/volto/icons/paste.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
+import { cloneBlocks } from '@plone/volto/helpers/Blocks/cloneBlocks';
 
 export class BlocksToolbarComponent extends React.Component {
   constructor(props) {
@@ -79,9 +80,9 @@ export class BlocksToolbarComponent extends React.Component {
     const { formData } = this.props;
     const blocksFieldname = getBlocksFieldname(formData);
     const blocks = formData[blocksFieldname];
-    const blocksData = this.props.selectedBlocks.map(
-      (blockId) => blocks[blockId],
-    );
+    const blocksData = this.props.selectedBlocks
+      .map((blockId) => [blockId, blocks[blockId]])
+      .filter(([blockId]) => !!blockId); // Removes null blocks
     this.props.setBlocksClipboard({ [actionType]: blocksData });
     this.props.onSetSelectedBlocks([]);
   }
@@ -91,14 +92,14 @@ export class BlocksToolbarComponent extends React.Component {
     const mode = Object.keys(blocksClipboard).includes('cut') ? 'cut' : 'copy';
     const blocksData = blocksClipboard[mode] || [];
     const cloneWithIds = blocksData
-      .filter((blockData) => !!blockData['@type'])
-      .map((blockData) => {
+      .filter(([blockId, blockData]) => blockId && !!blockData['@type']) // Removes null blocks
+      .map(([blockId, blockData]) => {
         const blockConfig = config.blocks.blocksConfig[blockData['@type']];
         return mode === 'copy'
           ? blockConfig.cloneData
             ? blockConfig.cloneData(blockData)
-            : [uuid(), blockData]
-          : [uuid(), blockData]; // if cut/pasting blocks, we don't clone
+            : [uuid(), cloneBlocks(blockData)]
+          : [blockId, blockData]; // if cut/pasting blocks, we don't clone
       })
       .filter((info) => !!info); // some blocks may refuse to be copied
     const blocksFieldname = getBlocksFieldname(formData);

package/src/components/manage/Form/Form.jsx

@@ -774,7 +774,14 @@ class Form extends Component {
                                     id={field}
                                     fieldSet={fieldset.title.toLowerCase()}
                                     formData={formData}
-                                    focus={this.state.inFocus[field]}
+                                    focus={
+                                      this.state.isClient &&
+                                      document
+                                        .getElementById('sidebar-metadata')
+                                        ?.contains(document.activeElement)
+                                        ? this.state.inFocus[field]
+                                        : false
+                                    }
                                     value={formData?.[field]}
                                     required={
                                       schema.required.indexOf(field) !== -1

package/src/components/manage/Form/InlineForm.jsx

@@ -48,6 +48,7 @@ const InlineForm = (props) => {
     title,
     icon,
     headerActions,
+    actionButton,
     footer,
     focusIndex,
     intl,
@@ -160,6 +161,9 @@ const InlineForm = (props) => {
               block={block}
             />
           ))}
+          {actionButton && (
+            <Segment className="attached actions">{actionButton}</Segment>
+          )}
         </Segment>
       </div>