@plone/volto 18.0.0-alpha.42 → 18.0.0-alpha.43

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

@@ -22,6 +22,7 @@ const TeaserDefaultTemplate = (props) => {
   const intl = useIntl();
   const href = data.href?.[0];
   const image = data.preview_image?.[0];
+  const url = data.preview_image?.[0]?.['@id'];
 
   const Image = config.getComponent('Image').component;
   const { openExternalLinkInNewTab } = config.settings;
@@ -50,16 +51,22 @@ const TeaserDefaultTemplate = (props) => {
             }
           >
             <div className="teaser-item default">
-              {(href.hasPreviewImage || href.image_field || image) && (
+              {url && !image?.image_field ? (
                 <div className="image-wrapper">
-                  <Image
-                    item={image || href}
-                    imageField={image ? image.image_field : href.image_field}
-                    alt=""
-                    loading="lazy"
-                    responsive={true}
-                  />
+                  <Image src={url} alt="" loading="lazy" responsive={true} />
                 </div>
+              ) : (
+                (href.hasPreviewImage || href.image_field || image) && (
+                  <div className="image-wrapper">
+                    <Image
+                      item={image || href}
+                      imageField={image ? image.image_field : href.image_field}
+                      alt=""
+                      loading="lazy"
+                      responsive={true}
+                    />
+                  </div>
+                )
               )}
               <div className="content">
                 {data?.head_title && (

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 import { SidebarPortal } from '@plone/volto/components';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
@@ -6,35 +6,42 @@ import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import TableOfContentsSchema from './Schema';
 import View from './View';
 
-class Edit extends Component {
-  render() {
-    const schema = TableOfContentsSchema(this.props);
+const Edit = (props) => {
+  const {
+    onChangeBlock,
+    data,
+    block,
+    selected,
+    navRoot,
+    contentType,
+    blocksErrors,
+  } = props;
+  const schema = TableOfContentsSchema(props);
 
-    return (
-      <>
-        <View {...this.props} mode="edit" />
+  return (
+    <>
+      <View {...props} mode="edit" />
 
-        <SidebarPortal selected={this.props.selected}>
-          <BlockDataForm
-            schema={schema}
-            title={schema.title}
-            onChangeField={(id, value) => {
-              this.props.onChangeBlock(this.props.block, {
-                ...this.props.data,
-                [id]: value,
-              });
-            }}
-            onChangeBlock={this.props.onChangeBlock}
-            formData={this.props.data}
-            block={this.props.block}
-            navRoot={this.props.navRoot}
-            contentType={this.props.contentType}
-            errors={this.props.blocksErrors}
-          />
-        </SidebarPortal>
-      </>
-    );
-  }
-}
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={onChangeBlock}
+          formData={data}
+          block={block}
+          navRoot={navRoot}
+          contentType={contentType}
+          errors={blocksErrors}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
 
 export default Edit;

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

@@ -1,14 +1,8 @@
-/**
- * Edit video block.
- * @module components/manage/Blocks/Title/Edit
- */
-
-import React, { Component } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import { Button, Input, Message } from 'semantic-ui-react';
 import cx from 'classnames';
-import { isEqual } from 'lodash';
 
 import { Icon, SidebarPortal, VideoSidebar } from '@plone/volto/components';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -16,7 +10,6 @@ import aheadSVG from '@plone/volto/icons/ahead.svg';
 import videoBlockSVG from '@plone/volto/components/manage/Blocks/Video/block-video.svg';
 import Body from '@plone/volto/components/manage/Blocks/Video/Body';
 import { withBlockExtensions } from '@plone/volto/helpers';
-import { compose } from 'redux';
 
 const messages = defineMessages({
   VideoFormDescription: {
@@ -29,183 +22,123 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Edit video block class.
- * @class Edit
- * @extends Component
- */
-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,
-    onChangeBlock: PropTypes.func.isRequired,
-    onSelectBlock: PropTypes.func.isRequired,
-    onDeleteBlock: PropTypes.func.isRequired,
-    onFocusPreviousBlock: PropTypes.func.isRequired,
-    onFocusNextBlock: PropTypes.func.isRequired,
-    handleKeyDown: PropTypes.func.isRequired,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygEditor
-   */
-  constructor(props) {
-    super(props);
-
-    this.onChangeUrl = this.onChangeUrl.bind(this);
-    this.onSubmitUrl = this.onSubmitUrl.bind(this);
-    this.onKeyDownVariantMenuForm = this.onKeyDownVariantMenuForm.bind(this);
-    this.state = {
-      url: '',
-    };
-  }
-
-  /**
-   * Change url handler
-   * @method onChangeUrl
-   * @param {Object} target Target object
-   * @returns {undefined}
-   */
-  onChangeUrl({ target }) {
-    this.setState({
-      url: target.value,
-    });
-  }
+const Edit = (props) => {
+  const { data, block, onChangeBlock, selected } = props;
+  const intl = useIntl();
+  const [url, setUrl] = useState('');
 
-  /**
-   * @param {*} nextProps
-   * @returns {boolean}
-   * @memberof Edit
-   */
-  shouldComponentUpdate(nextProps) {
-    return (
-      this.props.selected ||
-      nextProps.selected ||
-      !isEqual(this.props.data, nextProps.data)
-    );
-  }
+  const onChangeUrl = ({ target }) => {
+    setUrl(target.value);
+  };
 
-  /**
-   * Submit url handler
-   * @method onSubmitUrl
-   * @returns {undefined}
-   */
-  onSubmitUrl() {
-    this.props.onChangeBlock(this.props.block, {
-      ...this.props.data,
-      url: this.state.url,
+  const onSubmitUrl = useCallback(() => {
+    onChangeBlock(block, {
+      ...data,
+      url: url,
     });
-  }
+  }, [onChangeBlock, block, data, url]);
 
-  resetSubmitUrl = () => {
-    this.setState({
-      url: '',
-    });
+  const resetSubmitUrl = () => {
+    setUrl('');
   };
 
-  /**
-   * Keydown handler on Variant Menu Form
-   * This is required since the ENTER key is already mapped to a onKeyDown
-   * event and needs to be overridden 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
-    }
-  }
+  const onKeyDownVariantMenuForm = useCallback(
+    (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        onSubmitUrl();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        // TODO: Do something on ESC key
+      }
+    },
+    [onSubmitUrl],
+  );
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { data } = this.props;
-    const placeholder =
-      this.props.data.placeholder ||
-      this.props.intl.formatMessage(messages.VideoBlockInputPlaceholder);
-    return (
-      <div
-        className={cx(
-          'block video align',
-          {
-            selected: this.props.selected,
-            center: !Boolean(this.props.data.align),
-          },
-          this.props.data.align,
-        )}
-      >
-        {data.url ? (
-          <Body data={this.props.data} isEditMode={true} />
-        ) : (
-          <Message>
-            <center>
-              <img src={videoBlockSVG} alt="" />
-              <div className="toolbar-inner">
-                <Input
-                  onKeyDown={this.onKeyDownVariantMenuForm}
-                  onChange={this.onChangeUrl}
-                  placeholder={placeholder}
-                  value={this.state.url}
-                  // Prevents propagation to the Dropzone and the opening
-                  // of the upload browser dialog
-                  onClick={(e) => e.stopPropagation()}
-                />
-                {this.state.url && (
-                  <Button.Group>
-                    <Button
-                      basic
-                      className="cancel"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        this.setState({ url: '' });
-                      }}
-                    >
-                      <Icon name={clearSVG} size="30px" />
-                    </Button>
-                  </Button.Group>
-                )}
+  const placeholder = useMemo(
+    () =>
+      data.placeholder ||
+      intl.formatMessage(messages.VideoBlockInputPlaceholder),
+    [intl, data],
+  );
+
+  return (
+    <div
+      className={cx(
+        'block video align',
+        {
+          selected: selected,
+          center: !Boolean(data.align),
+        },
+        data.align,
+      )}
+    >
+      {data.url ? (
+        <Body data={data} isEditMode={true} />
+      ) : (
+        <Message>
+          <center>
+            <img src={videoBlockSVG} alt="" />
+            <div className="toolbar-inner">
+              <Input
+                onKeyDown={onKeyDownVariantMenuForm}
+                onChange={onChangeUrl}
+                placeholder={placeholder}
+                value={url}
+                // Prevents propagation to the Dropzone and the opening
+                // of the upload browser dialog
+                onClick={(e) => e.stopPropagation()}
+              />
+              {url && (
                 <Button.Group>
                   <Button
                     basic
-                    primary
+                    className="cancel"
                     onClick={(e) => {
                       e.stopPropagation();
-                      this.onSubmitUrl();
+                      setUrl('');
                     }}
                   >
-                    <Icon name={aheadSVG} size="30px" />
+                    <Icon name={clearSVG} size="30px" />
                   </Button>
                 </Button.Group>
-              </div>
-            </center>
-          </Message>
-        )}
-        <SidebarPortal selected={this.props.selected}>
-          <VideoSidebar {...this.props} resetSubmitUrl={this.resetSubmitUrl} />
-        </SidebarPortal>
-      </div>
-    );
-  }
-}
+              )}
+              <Button.Group>
+                <Button
+                  basic
+                  primary
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onSubmitUrl();
+                  }}
+                >
+                  <Icon name={aheadSVG} size="30px" />
+                </Button>
+              </Button.Group>
+            </div>
+          </center>
+        </Message>
+      )}
+      <SidebarPortal selected={selected}>
+        <VideoSidebar {...props} resetSubmitUrl={resetSubmitUrl} />
+      </SidebarPortal>
+    </div>
+  );
+};
+
+Edit.propTypes = {
+  selected: PropTypes.bool.isRequired,
+  block: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  data: PropTypes.objectOf(PropTypes.any).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,
+};
 
-export default compose(injectIntl, withBlockExtensions)(Edit);
+export default withBlockExtensions(Edit);

package/src/components/manage/Blocks/Video/Edit.stories.jsx

@@ -0,0 +1,57 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import VideoComponent from './Edit';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlVideoComponent = injectIntl(VideoComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlVideoComponent
+        data={{
+          ...args,
+          '@type': 'video',
+        }}
+        selected={false}
+        block="1234"
+        onChangeBlock={() => {}}
+        onSelectBlock={() => {}}
+        onDeleteBlock={() => {}}
+        onFocusPreviousBlock={() => {}}
+        onFocusNextBlock={() => {}}
+        handleKeyDown={() => {}}
+        index={1}
+      />
+    </Wrapper>
+  );
+}
+
+export const Video = StoryComponent.bind({});
+
+Video.args = {
+  url: 'https://www.youtube.com/watch?v=ayjNbKju-8s',
+};
+
+export default {
+  title: 'Public components/Video/Video',
+  component: Video,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '600px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    // controlled value prop
+  },
+};

package/src/components/manage/Contents/Contents.jsx

@@ -1532,6 +1532,9 @@ class Contents extends Component {
                     onCancel={this.onPropertiesCancel}
                     onOk={this.onPropertiesOk}
                     items={this.state.selected}
+                    values={map(this.state.selected, (id) =>
+                      find(this.state.items, { '@id': id }),
+                    ).filter((item) => item)}
                   />
                   {this.state.showWorkflow && (
                     <ContentsWorkflowModal

package/src/components/manage/Contents/ContentsBreadcrumbs.stories.jsx

@@ -0,0 +1,46 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import ContentsBreadcrumbsComponent from './ContentsBreadcrumbs';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlContentBreadcrumbsComponent = injectIntl(
+  ContentsBreadcrumbsComponent,
+);
+const breadcrumbs = [
+  { title: 'Blog', url: '/blog' },
+  { title: 'My first blog', url: '/blog/my-first-blog' },
+];
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlContentBreadcrumbsComponent
+        {...args}
+        pathname="/blog"
+        items={breadcrumbs}
+      />
+    </Wrapper>
+  );
+}
+
+export const ContentBreadcrumbs = StoryComponent.bind({});
+
+export default {
+  title: 'Public components/Contents/Content Breadcrumbs',
+  component: ContentBreadcrumbs,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};