@plone/volto 18.0.0-alpha.35 → 18.0.0-alpha.37

package/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx

@@ -49,8 +49,10 @@ import {
   Form,
   Input,
   Button,
+  Dimmer,
   Segment,
   Table,
+  Loader,
 } from 'semantic-ui-react';
 
 /**
@@ -177,6 +179,9 @@ class UsersControlpanel extends Component {
         search: this.state.search,
       });
     }
+    if (this.props.deleteRequest.loading && nextProps.deleteRequest.loaded) {
+      this.onDeleteUserSuccess();
+    }
     if (this.props.createRequest.loading && nextProps.createRequest.loaded) {
       this.onAddUserSuccess();
     }
@@ -256,10 +261,6 @@ class UsersControlpanel extends Component {
   onDeleteOk() {
     if (this.state.userToDelete) {
       this.props.deleteUser(this.state.userToDelete.id);
-      this.setState({
-        showDelete: false,
-        userToDelete: undefined,
-      });
     }
   }
 
@@ -272,6 +273,7 @@ class UsersControlpanel extends Component {
     this.setState({
       showDelete: false,
       itemsToDelete: [],
+      userToDelete: undefined,
     });
   }
 
@@ -344,6 +346,24 @@ class UsersControlpanel extends Component {
     );
   }
 
+  /**
+   * Handle Success after deleteUser()
+   *
+   * @returns {undefined}
+   */
+  onDeleteUserSuccess() {
+    this.setState({
+      userToDelete: undefined,
+      showDelete: false,
+    });
+    toast.success(
+      <Toast
+        success
+        title={this.props.intl.formatMessage(messages.success)}
+        content={this.props.intl.formatMessage(messages.userDeleted)}
+      />,
+    );
+  }
   /**
    *
    *
@@ -533,6 +553,12 @@ class UsersControlpanel extends Component {
             )}
             content={
               <div className="content">
+                <Dimmer active={this.props?.deleteRequest?.loading}>
+                  <Loader>
+                    <FormattedMessage id="Loading" defaultMessage="Loading." />
+                  </Loader>
+                </Dimmer>
+
                 <ul className="content">
                   <FormattedMessage
                     id="Do you really want to delete the user {username}?"

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>
 

package/src/components/manage/Widgets/ImageWidget.jsx

@@ -0,0 +1,311 @@
+import React, { useEffect, useRef } from 'react';
+import { Button, Dimmer, Loader, Message } from 'semantic-ui-react';
+import { useIntl, defineMessages } from 'react-intl';
+import { useDispatch } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import loadable from '@loadable/component';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import useLinkEditor from '@plone/volto/components/manage/AnchorPlugin/useLinkEditor';
+import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
+
+import {
+  flattenToAppURL,
+  getBaseUrl,
+  isInternalURL,
+  validateFileUploadSize,
+} from '@plone/volto/helpers';
+import { createContent } from '@plone/volto/actions';
+import { readAsDataURL } from 'promise-file-reader';
+import { FormFieldWrapper, Icon } from '@plone/volto/components';
+
+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 linkSVG from '@plone/volto/icons/link.svg';
+import uploadSVG from '@plone/volto/icons/upload.svg';
+
+const Dropzone = loadable(() => import('react-dropzone'));
+
+export const ImageToolbar = ({ className, data, id, onChange, selected }) => (
+  <div className="image-upload-widget-toolbar">
+    <Button.Group>
+      <Button icon basic onClick={() => onChange(id, null)}>
+        <Icon className="circled" name={clearSVG} size="24px" color="#e40166" />
+      </Button>
+    </Button.Group>
+  </div>
+);
+
+const messages = defineMessages({
+  addImage: {
+    id: 'Browse the site, drop an image, or type a URL',
+    defaultMessage: 'Browse the site, drop an image, or use a URL',
+  },
+  pickAnImage: {
+    id: 'pickAnImage',
+    defaultMessage: 'Pick an existing image',
+  },
+  uploadAnImage: {
+    id: 'uploadAnImage',
+    defaultMessage: 'Upload an image from your computer',
+  },
+  linkAnImage: {
+    id: 'linkAnImage',
+    defaultMessage: 'Enter a URL to an image',
+  },
+  uploadingImage: {
+    id: 'Uploading image',
+    defaultMessage: 'Uploading image',
+  },
+});
+
+const UnconnectedImageInput = (props) => {
+  const {
+    id,
+    onChange,
+    onFocus,
+    openObjectBrowser,
+    value,
+    imageSize = 'teaser',
+    selected = true,
+    hideLinkPicker = false,
+    hideObjectBrowserPicker = false,
+    restrictFileUpload = false,
+    objectBrowserPickerType = 'image',
+    description,
+    placeholderLinkInput = '',
+  } = props;
+
+  const intl = useIntl();
+  const linkEditor = useLinkEditor();
+  const location = useLocation();
+  const dispatch = useDispatch();
+  const contextUrl = location.pathname;
+
+  const [uploading, setUploading] = React.useState(false);
+  const [dragging, setDragging] = React.useState(false);
+
+  const imageUploadInputRef = useRef(null);
+
+  const requestId = `image-upload-${id}`;
+
+  const { loading, loaded } = props.request;
+  const { content } = props;
+  const imageId = content?.['@id'];
+  const image = content?.image;
+
+  useEffect(() => {
+    if (uploading && !loading && loaded) {
+      setUploading(false);
+      onChange(id, imageId, {
+        image_field: 'image',
+        image_scales: { image: [image] },
+      });
+    }
+  }, [loading, loaded, uploading, imageId, image, id, onChange]); // Explicitly list all dependencies
+
+  const handleUpload = React.useCallback(
+    (eventOrFile) => {
+      if (restrictFileUpload === true) return;
+      eventOrFile.target && eventOrFile.stopPropagation();
+
+      setUploading(true);
+      const file = eventOrFile.target
+        ? eventOrFile.target.files[0]
+        : eventOrFile[0];
+      if (!validateFileUploadSize(file, intl.formatMessage)) return;
+      readAsDataURL(file).then((fileData) => {
+        const fields = fileData.match(/^data:(.*);(.*),(.*)$/);
+        dispatch(
+          createContent(
+            getBaseUrl(contextUrl),
+            {
+              '@type': 'Image',
+              title: file.name,
+              image: {
+                data: fields[3],
+                encoding: fields[2],
+                'content-type': fields[1],
+                filename: file.name,
+              },
+            },
+            props.block || requestId,
+          ),
+        );
+      });
+    },
+    [
+      restrictFileUpload,
+      intl.formatMessage,
+      dispatch,
+      props,
+      contextUrl,
+      requestId,
+    ],
+  );
+
+  const onDragEnter = React.useCallback(() => {
+    if (restrictFileUpload === false) setDragging(true);
+  }, [restrictFileUpload]);
+  const onDragLeave = React.useCallback(() => setDragging(false), []);
+
+  return value ? (
+    <div
+      className="image-upload-widget-image"
+      onClick={onFocus}
+      onKeyDown={onFocus}
+      role="toolbar"
+    >
+      {selected && <ImageToolbar {...props} />}
+      <img
+        className={props.className}
+        src={`${flattenToAppURL(value)}/@@images/image/${imageSize}`}
+        alt=""
+      />
+    </div>
+  ) : (
+    <div
+      className="image-upload-widget"
+      onClick={onFocus}
+      onKeyDown={onFocus}
+      role="toolbar"
+    >
+      <Dropzone
+        noClick
+        onDrop={handleUpload}
+        onDragEnter={onDragEnter}
+        onDragLeave={onDragLeave}
+        className="dropzone"
+      >
+        {({ getRootProps, getInputProps }) => (
+          <div {...getRootProps()}>
+            <Message>
+              {dragging && <Dimmer active></Dimmer>}
+              {uploading && (
+                <Dimmer active>
+                  <Loader indeterminate>
+                    {intl.formatMessage(messages.uploadingImage)}
+                  </Loader>
+                </Dimmer>
+              )}
+              <img src={imageBlockSVG} alt="" className="placeholder" />
+              <p>{description || intl.formatMessage(messages.addImage)}</p>
+              <div className="toolbar-wrapper">
+                <div className="toolbar-inner" ref={linkEditor.anchorNode}>
+                  {hideObjectBrowserPicker === false && (
+                    <Button.Group>
+                      <Button
+                        aria-label={intl.formatMessage(messages.pickAnImage)}
+                        icon
+                        basic
+                        onClick={(e) => {
+                          onFocus && onFocus();
+                          e.preventDefault();
+                          openObjectBrowser({
+                            mode: objectBrowserPickerType,
+                            onSelectItem: (
+                              url,
+                              { title, image_field, image_scales },
+                            ) => {
+                              onChange(props.id, flattenToAppURL(url), {
+                                title,
+                                image_field,
+                                image_scales,
+                              });
+                            },
+                            currentPath: contextUrl,
+                          });
+                        }}
+                      >
+                        <Icon name={navTreeSVG} size="24px" />
+                      </Button>
+                    </Button.Group>
+                  )}
+                  {restrictFileUpload === false && (
+                    <Button.Group>
+                      <Button
+                        aria-label={intl.formatMessage(messages.uploadAnImage)}
+                        icon
+                        basic
+                        compact
+                        onClick={() => {
+                          imageUploadInputRef.current.click();
+                        }}
+                      >
+                        <Icon name={uploadSVG} size="24px" />
+                      </Button>
+                      <input
+                        {...getInputProps({
+                          type: 'file',
+                          ref: imageUploadInputRef,
+                          onChange: handleUpload,
+                          style: { display: 'none' },
+                        })}
+                      />
+                    </Button.Group>
+                  )}
+
+                  {hideLinkPicker === false && (
+                    <Button.Group>
+                      <Button
+                        icon
+                        basic
+                        aria-label={intl.formatMessage(messages.linkAnImage)}
+                        onClick={(e) => {
+                          !props.selected && onFocus && onFocus();
+                          linkEditor.show();
+                        }}
+                      >
+                        <Icon name={linkSVG} circled size="24px" />
+                      </Button>
+                    </Button.Group>
+                  )}
+                </div>
+                {linkEditor.anchorNode && (
+                  <linkEditor.LinkEditor
+                    value={value}
+                    placeholder={
+                      placeholderLinkInput ||
+                      intl.formatMessage(messages.linkAnImage)
+                    }
+                    objectBrowserPickerType={objectBrowserPickerType}
+                    onChange={(_, e) =>
+                      onChange(
+                        props.id,
+                        isInternalURL(e) ? flattenToAppURL(e) : e,
+                        {},
+                      )
+                    }
+                    id={id}
+                  />
+                )}
+              </div>
+            </Message>
+          </div>
+        )}
+      </Dropzone>
+    </div>
+  );
+};
+
+export const ImageInput = compose(
+  connect(
+    (state, ownProps) => {
+      const requestId = `image-upload-${ownProps.id}`;
+      return {
+        request: state.content.subrequests[ownProps.block || requestId] || {},
+        content: state.content.subrequests[ownProps.block || requestId]?.data,
+      };
+    },
+    { createContent },
+  ),
+)(withObjectBrowser(UnconnectedImageInput));
+
+const ImageUploadWidget = (props) => (
+  <FormFieldWrapper {...props} className="image-upload-widget">
+    <ImageInput {...props} />
+  </FormFieldWrapper>
+);
+
+export default ImageUploadWidget;

package/src/components/manage/Widgets/ImageWidget.stories.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import ImageWidget from './ImageWidget';
+import WidgetStory from './story';
+
+export const Default = WidgetStory.bind({
+  props: { id: 'image_widget', title: 'Image', data: {}, properties: {} },
+  widget: ImageWidget,
+});
+
+export const Filled = WidgetStory.bind({
+  props: {
+    id: 'image_widget',
+    title: 'Image',
+    data: {},
+    properties: {},
+    value: 'halfdome2022.jpeg',
+  },
+  widget: ImageWidget,
+});
+Filled.args = {
+  value: 'halfdome2022.jpeg',
+};
+
+export const Inline = WidgetStory.bind({
+  props: {
+    id: 'image_widget',
+    title: 'Image',
+    data: {},
+    properties: {},
+    inline: true,
+  },
+  widget: ImageWidget,
+});
+
+export default {
+  title: 'Edit Widgets/Image',
+  component: ImageWidget,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};

package/src/config/NonContentRoutes.jsx

@@ -9,7 +9,8 @@ export const nonContentRoutes = [
   '/aliases',
   '/contents',
   '/delete',
-  '/diff',
+  /\/diff$/,
+  /\/diff\?/,
   /\/edit$/,
   '/historyview',
   '/links-to-item',

package/src/config/Widgets.jsx

@@ -50,6 +50,7 @@ import TextViewWidget from '@plone/volto/components/theme/Widgets/TextWidget';
 import TitleViewWidget from '@plone/volto/components/theme/Widgets/TitleWidget';
 import TokenViewWidget from '@plone/volto/components/theme/Widgets/TokenWidget';
 import UrlViewWidget from '@plone/volto/components/theme/Widgets/UrlWidget';
+import ImageWidget from '@plone/volto/components/manage/Widgets/ImageWidget';
 
 // Widgets mapping
 export const widgetMapping = {
@@ -68,6 +69,7 @@ export const widgetMapping = {
     date: DatetimeWidget,
     password: PasswordWidget,
     file: FileWidget,
+    image: ImageWidget,
     align: AlignWidget,
     buttons: ButtonsWidget,
     url: UrlWidget,

package/src/helpers/Blocks/cloneBlocks.test.js

@@ -0,0 +1,54 @@
+import { cloneDeep } from 'lodash';
+import { cloneBlocks } from './cloneBlocks';
+
+describe('cloneBlocks', () => {
+  it('cloneBlocks - basic', () => {
+    const blocksData = {
+      blocks: {
+        a: { '@type': 'slate', value: 1 },
+        b: { '@type': 'slate', value: 2 },
+      },
+      blocks_layout: { items: ['a', 'b'] },
+    };
+    const result = cloneBlocks(blocksData);
+
+    expect(result.blocks_layout.items[0]).not.toBe('a');
+    expect(result.blocks[result.blocks_layout.items[0]]).toStrictEqual({
+      '@type': 'slate',
+      value: 1,
+    });
+  });
+
+  it('cloneBlocks - nested', () => {
+    const blocksData = {
+      blocks: {
+        a: { '@type': 'slate', value: 1 },
+        b: { '@type': 'slate', value: 2 },
+      },
+      blocks_layout: { items: ['a', 'b'] },
+    };
+    blocksData.blocks.c = cloneDeep(blocksData);
+    blocksData.blocks_layout.items.push('c');
+
+    const result = cloneBlocks(blocksData);
+
+    expect(result.blocks_layout.items[0]).not.toBe('a');
+    expect(result.blocks[result.blocks_layout.items[0]]).toStrictEqual({
+      '@type': 'slate',
+      value: 1,
+    });
+
+    expect(
+      result.blocks[result.blocks_layout.items[2]].blocks_layout.items[0],
+    ).not.toBe('c');
+
+    expect(
+      result.blocks[result.blocks_layout.items[2]].blocks[
+        result.blocks[result.blocks_layout.items[2]].blocks_layout.items[0]
+      ],
+    ).toStrictEqual({
+      '@type': 'slate',
+      value: 1,
+    });
+  });
+});

package/src/helpers/Blocks/cloneBlocks.ts

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import { v4 as uuid } from 'uuid';
+import {
+  getBlocksFieldname,
+  getBlocksLayoutFieldname,
+  hasBlocksData,
+} from './Blocks';
+import config from '@plone/registry';
+
+export function cloneBlocks(blocksData) {
+  if (hasBlocksData(blocksData)) {
+    const blocksFieldname = getBlocksFieldname(blocksData);
+    const blocksLayoutFieldname = getBlocksLayoutFieldname(blocksData);
+
+    const cloneWithIds = Object.keys(blocksData.blocks)
+      .map((key) => {
+        const block = blocksData.blocks[key];
+        const blockConfig = config.blocks.blocksConfig[blocksData['@type']];
+        return blockConfig?.cloneData
+          ? blockConfig.cloneData(block)
+          : [uuid(), cloneBlocks(block)];
+      })
+      .filter((info) => !!info); // some blocks may refuse to be copied
+
+    const newBlockData = {
+      ...blocksData,
+      [blocksFieldname]: {
+        ...Object.assign(
+          {},
+          ...cloneWithIds.map(([id, data]) => ({ [id]: data })),
+        ),
+      },
+      [blocksLayoutFieldname]: {
+        ...blocksData[blocksLayoutFieldname],
+        items: [...cloneWithIds.map(([id]) => id)],
+      },
+    };
+
+    return newBlockData;
+  }
+
+  return blocksData;
+}

package/src/helpers/MessageLabels/MessageLabels.js

@@ -110,6 +110,10 @@ export const messages = defineMessages({
     id: 'Add group',
     defaultMessage: 'Add group',
   },
+  groupDeleted: {
+    id: 'Group deleted',
+    defaultMessage: 'Group deleted',
+  },
   addUserFormUsernameTitle: {
     id: 'Username',
     defaultMessage: 'Username',
@@ -213,6 +217,10 @@ export const messages = defineMessages({
     id: 'User created',
     defaultMessage: 'User created',
   },
+  userDeleted: {
+    id: 'User deleted',
+    defaultMessage: 'User deleted',
+  },
   groupCreated: {
     id: 'Group created',
     defaultMessage: 'Group created',

package/src/icons/external-link.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
+  <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
+</svg>

package/theme/themes/pastanaga/collections/form.overrides

@@ -6,6 +6,10 @@
   margin: 0;
 }
 
+.ui.form .inline.field.overwritten input {
+  background-color: rgb(#edc3c2);
+}
+
 .ui.form .inline.field.help .wrapper {
   border-bottom: none;
 }

package/theme/themes/pastanaga/elements/button.overrides

@@ -26,7 +26,8 @@
   }
 }
 
-#main {
+#main,
+.slate-inline-toolbar.slate-toolbar {
   .ui.basic.buttons .button,
   .ui.basic.button {
     -webkit-box-shadow: 0px 0px 0px @basicBorderSize transparent inset !important;