@plone/volto 17.17.0 → 17.18.0

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 = '',
+    onSelectItem,
+  } = 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: onSelectItem
+                              ? 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/config/Widgets.jsx

@@ -54,6 +54,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';
 
 export const DatetimeWidget = loadable(() =>
   import('@plone/volto/components/manage/Widgets/DatetimeWidget'),
@@ -101,6 +102,7 @@ export const widgetMapping = {
     autocomplete: SelectAutoComplete,
     color_picker: ColorPickerWidget,
     select: SelectWidget,
+    image: ImageWidget,
   },
   vocabulary: {
     'plone.app.vocabularies.Catalog': ObjectBrowserWidget,

package/theme/themes/pastanaga/extras/blocks.less

@@ -415,6 +415,48 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
   }
 }
 
+.toolbar-buttons {
+  // used by the ImageUploadWidget
+  display: flex;
+  justify-content: center;
+  gap: 4px;
+}
+
+.image-upload-widget-toolbar {
+  position: absolute;
+  top: 1em;
+  right: 1em;
+
+  .icon.circled {
+    border: 1px solid #e4e8ec;
+    background: #f3f5f7;
+    box-shadow: inset 0 0 0 0.14285714rem transparent !important;
+  }
+}
+
+div.image-upload-widget-image {
+  position: relative;
+
+  img {
+    max-width: 100% !important;
+  }
+}
+
+.image-upload-widget {
+  text-align: center;
+
+  .toolbar-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+}
+
+.ui.active.basic.icon.button {
+  border: 1px solid #2996da;
+  background: transparent !important;
+}
+
 // Hero block
 .block.hero {
   clear: both;

package/theme/themes/pastanaga/extras/widgets.less

@@ -153,3 +153,111 @@ body.babel-view .field.language-independent-field {
 .react-select__option {
   .word-break();
 }
+
+.image-widget {
+  container-type: inline-size;
+
+  .no-image-wrapper {
+    display: flex;
+    width: ~'min(100%, 450px)';
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .toolbar-inner {
+    display: flex;
+    width: ~'min(100%, 450px)';
+    height: 40px;
+    padding: 4px;
+    border-radius: 2px;
+    background-color: rgba(255, 255, 255, 0.975);
+    box-shadow:
+      0 0 8px rgba(0, 0, 0, 0.1),
+      0 2px 4px rgba(0, 0, 0, 0.05);
+
+    .ui.form & .ui.input input[type='text'] {
+      height: initial;
+    }
+
+    & > svg {
+      display: inline-block !important;
+      box-sizing: content-box;
+      padding: 4px;
+      margin-right: 4px;
+      color: @brown !important;
+    }
+
+    .ui.input {
+      width: 100%;
+      margin-left: 8px;
+    }
+
+    .ui.input > input {
+      padding: 0;
+      border: none;
+    }
+
+    .ui.icon.button {
+      padding: 4px;
+      border-radius: 1px;
+      margin-left: -3px;
+      color: @brown !important;
+
+      &:hover {
+        background-color: #edf1f2 !important;
+      }
+    }
+
+    .ui.buttons:first-child {
+      & .ui.icon.button {
+        margin-left: 0;
+      }
+    }
+  }
+
+  @blueArctic: #e2f1fd;
+  @greySnow: #f3f5f7;
+  @greySmoke: #e4e8ec;
+
+  .image-widget-preview-wrapper {
+    position: relative;
+  }
+
+  .ui.basic.button.remove-block-button {
+    position: absolute;
+    z-index: 2;
+    top: 6px;
+    right: 2px;
+    background-color: transparent;
+    box-shadow: none;
+
+    .icon {
+      height: 18px !important;
+    }
+
+    .circled {
+      padding: 8px;
+      border: 1px solid @greySmoke;
+      background: @greySnow;
+
+      &:hover {
+        background-color: @greySmoke;
+      }
+    }
+
+    &:hover {
+      background-color: transparent !important;
+    }
+  }
+
+  .image-widget-filepath-preview {
+    display: flex;
+    align-items: center;
+    padding: 5px;
+    word-break: break-all;
+
+    a {
+      margin-left: 5px;
+    }
+  }
+}

package/types/components/manage/AnchorPlugin/useLinkEditor.d.ts

@@ -0,0 +1,7 @@
+export default useLinkEditor;
+declare function useLinkEditor(): {
+    anchorNode: React.MutableRefObject<undefined>;
+    show: () => void;
+    LinkEditor: (props: any) => JSX.Element;
+};
+import React from 'react';

package/types/components/manage/Widgets/ImageWidget.d.ts

@@ -0,0 +1,116 @@
+export function ImageToolbar({ className, data, id, onChange, selected }: {
+    className: any;
+    data: any;
+    id: any;
+    onChange: any;
+    selected: any;
+}): JSX.Element;
+export const ImageInput: import("react-redux").ConnectedComponent<{
+    new (): {
+        state: {
+            isObjectBrowserOpen: boolean;
+        };
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, }?: {
+            mode: string;
+            dataName: string;
+            onSelectItem: string;
+            overlay: string;
+        }) => void;
+        closeObjectBrowser: () => void;
+        render(): JSX.Element;
+        context: unknown;
+        setState<K extends string | number | symbol>(state: any, callback?: () => void): void;
+        forceUpdate(callback?: () => void): void;
+        readonly props: Readonly<any>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>): any;
+        componentDidUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+    };
+    defaultProps: {
+        onChangeBlock: () => void;
+        data: {};
+        block: string;
+    };
+    contextType?: React.Context<any>;
+}, import("react-redux").Omit<Pick<React.ClassAttributes<{
+    state: {
+        isObjectBrowserOpen: boolean;
+    };
+    openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, }?: {
+        mode: string;
+        dataName: string;
+        onSelectItem: string;
+        overlay: string;
+    }) => void;
+    closeObjectBrowser: () => void;
+    render(): JSX.Element;
+    context: unknown;
+    setState<K extends string | number | symbol>(state: any, callback?: () => void): void;
+    forceUpdate(callback?: () => void): void;
+    readonly props: Readonly<any>;
+    refs: {
+        [key: string]: React.ReactInstance;
+    };
+    componentDidMount?(): void;
+    shouldComponentUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): boolean;
+    componentWillUnmount?(): void;
+    componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+    getSnapshotBeforeUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>): any;
+    componentDidUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any): void;
+    componentWillMount?(): void;
+    UNSAFE_componentWillMount?(): void;
+    componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+    UNSAFE_componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+    componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+    UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+}>, keyof React.ClassAttributes<{
+    state: {
+        isObjectBrowserOpen: boolean;
+    };
+    openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, }?: {
+        mode: string;
+        dataName: string;
+        onSelectItem: string;
+        overlay: string;
+    }) => void;
+    closeObjectBrowser: () => void;
+    render(): JSX.Element;
+    context: unknown;
+    setState<K extends string | number | symbol>(state: any, callback?: () => void): void;
+    forceUpdate(callback?: () => void): void;
+    readonly props: Readonly<any>;
+    refs: {
+        [key: string]: React.ReactInstance;
+    };
+    componentDidMount?(): void;
+    shouldComponentUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): boolean;
+    componentWillUnmount?(): void;
+    componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+    getSnapshotBeforeUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>): any;
+    componentDidUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any): void;
+    componentWillMount?(): void;
+    UNSAFE_componentWillMount?(): void;
+    componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+    UNSAFE_componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+    componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+    UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+}>> & {} & {
+    data?: {};
+    block?: string;
+    onChangeBlock?: () => void;
+}, never>>;
+export default ImageUploadWidget;
+import React from 'react';
+declare function ImageUploadWidget(props: any): JSX.Element;

package/types/config/Widgets.d.ts

@@ -36,6 +36,7 @@ export namespace widgetMapping {
         export { SelectAutoComplete as autocomplete };
         export { ColorPickerWidget as color_picker };
         export { SelectWidget as select };
+        export { ImageWidget as image };
     }
     export let vocabulary: {
         'plone.app.vocabularies.Catalog': import("react").ForwardRefExoticComponent<Pick<import("react-intl").WithIntlProps<import("react-intl").WrappedComponentProps<string>>, string> & import("react").RefAttributes<import("react").ComponentType<import("react-intl").WrappedComponentProps<string>>>> & {
@@ -132,6 +133,7 @@ import SelectMetadataWidget from '@plone/volto/components/manage/Blocks/Search/w
 import SelectAutoComplete from '@plone/volto/components/manage/Widgets/SelectAutoComplete';
 import ColorPickerWidget from '@plone/volto/components/manage/Widgets/ColorPickerWidget';
 import SelectWidget from '@plone/volto/components/manage/Widgets/SelectWidget';
+import ImageWidget from '@plone/volto/components/manage/Widgets/ImageWidget';
 import CheckboxWidget from '@plone/volto/components/manage/Widgets/CheckboxWidget';
 import NumberWidget from '@plone/volto/components/manage/Widgets/NumberWidget';
 import { getWidgetView } from '@plone/volto/helpers/Widget/widget';