@eeacms/volto-eea-website-theme 1.34.0 → 2.0.0

package/src/customizations/@plone/volto-slate/elementEditor/utils.js

@@ -158,88 +158,89 @@ export const _isActiveElement = (elementType) => (editor) => {
  * @param {string|Object[]} elementType - this can be a string or an array of strings
  * @returns {Object|null} - found node
  */
-export const _getActiveElement = (elementType) => (
-  editor,
-  direction = 'any',
-) => {
-  const selection = editor.selection || editor.getSavedSelection();
-  let found = [];
-
-  try {
-    found = Array.from(
-      Editor.nodes(editor, {
-        match: (n) =>
-          Array.isArray(elementType)
-            ? elementType.includes(n.type)
-            : n.type === elementType,
-        at: selection,
-      }),
-    );
-  } catch (e) {
-    return null;
-  }
-
-  if (found.length) return found[0];
-
-  if (!selection) return null;
+export const _getActiveElement =
+  (elementType) =>
+  (editor, direction = 'any') => {
+    const selection = editor.selection || editor.getSavedSelection();
+    let found = [];
 
-  if (direction === 'any' || direction === 'backward') {
-    const { path } = selection.anchor;
-    const isAtStart =
-      selection.anchor.offset === 0 && selection.focus.offset === 0;
+    try {
+      found = Array.from(
+        Editor.nodes(editor, {
+          match: (n) =>
+            Array.isArray(elementType)
+              ? elementType.includes(n.type)
+              : n.type === elementType,
+          at: selection,
+        }),
+      );
+    } catch (e) {
+      return null;
+    }
 
-    if (isAtStart) {
-      let found;
-      try {
-        found = Editor.previous(editor, {
-          at: path,
-        });
-      } catch (ex) {
-        // eslint-disable-next-line no-console
-        console.warn('Unable to find previous node', editor, path);
-        return;
-      }
-      if (found && found[0] && found[0].type === elementType) {
-        if (
-          (Array.isArray(elementType) && elementType.includes(found[0].type)) ||
-          found[0].type === elementType
-        ) {
-          return found;
+    if (found.length) return found[0];
+
+    if (!selection) return null;
+
+    if (direction === 'any' || direction === 'backward') {
+      const { path } = selection.anchor;
+      const isAtStart =
+        selection.anchor.offset === 0 && selection.focus.offset === 0;
+
+      if (isAtStart) {
+        let found;
+        try {
+          found = Editor.previous(editor, {
+            at: path,
+          });
+        } catch (ex) {
+          // eslint-disable-next-line no-console
+          console.warn('Unable to find previous node', editor, path);
+          return;
+        }
+        if (found && found[0] && found[0].type === elementType) {
+          if (
+            (Array.isArray(elementType) &&
+              elementType.includes(found[0].type)) ||
+            found[0].type === elementType
+          ) {
+            return found;
+          }
+        } else {
+          return null;
         }
-      } else {
-        return null;
       }
     }
-  }
-
-  if (direction === 'any' || direction === 'forward') {
-    const { path } = selection.anchor;
-    const isAtStart =
-      selection.anchor.offset === 0 && selection.focus.offset === 0;
 
-    if (isAtStart) {
-      let found;
-      try {
-        found = Editor.next(editor, {
-          at: path,
-        });
-      } catch (e) {
-        // eslint-disable-next-line
-        console.warn('Unable to find next node', editor, path);
-        return;
-      }
-      if (found && found[0] && found[0].type === elementType) {
-        if (
-          (Array.isArray(elementType) && elementType.includes(found[0].type)) ||
-          found[0].type === elementType
-        ) {
-          return found;
+    if (direction === 'any' || direction === 'forward') {
+      const { path } = selection.anchor;
+      const isAtStart =
+        selection.anchor.offset === 0 && selection.focus.offset === 0;
+
+      if (isAtStart) {
+        let found;
+        try {
+          found = Editor.next(editor, {
+            at: path,
+          });
+        } catch (e) {
+          // eslint-disable-next-line
+          console.warn('Unable to find next node', editor, path);
+          return;
+        }
+        if (found && found[0] && found[0].type === elementType) {
+          if (
+            (Array.isArray(elementType) &&
+              elementType.includes(found[0].type)) ||
+            found[0].type === elementType
+          ) {
+            return found;
+          }
+        } else {
+          return null;
         }
-      } else {
-        return null;
       }
     }
-  }
 
-  return null;
-};
+    return null;
+  };

package/src/customizations/volto/components/manage/Blocks/Grid/Edit.jsx

@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { useState } from 'react';
+import ContainerEdit from '@plone/volto/components/manage/Blocks/Container/Edit';
+
+const convertTeaserToGridIfNecessary = (data) => {
+  if (data?.['@type'] === 'teaserGrid')
+    return {
+      ...data,
+      '@type': 'gridBlock',
+      blocks_layout: { items: data?.columns.map((c) => c.id) },
+      blocks: data?.columns?.reduce((acc, current) => {
+        return {
+          ...acc,
+          [current?.id]: current,
+        };
+      }, {}),
+    };
+  return data;
+};
+
+const GridBlockEdit = (props) => {
+  const { data } = props;
+
+  const columnsLength =
+    data?.blocks_layout?.items?.length || data?.columns?.length || 0;
+
+  const [selectedBlock, setSelectedBlock] = useState(null);
+
+  //convert to gridBlock if necessary
+  if (data?.['@type'] === 'teaserGrid') {
+    props.onChangeBlock(props.block, convertTeaserToGridIfNecessary(data));
+  }
+
+  return (
+    <div
+      className={cx({
+        one: columnsLength === 1,
+        two: columnsLength === 2,
+        three: columnsLength === 3,
+        four: columnsLength >= 4,
+        'grid-items': true,
+      })}
+      // This is required to enabling a small "in-between" clickable area
+      // for bringing the Grid sidebar alive once you have selected an inner block
+      onClick={(e) => {
+        if (!e.block) setSelectedBlock(null);
+      }}
+      role="presentation"
+    >
+      <ContainerEdit
+        {...props}
+        data={data}
+        selectedBlock={selectedBlock}
+        setSelectedBlock={setSelectedBlock}
+        direction="horizontal"
+      />
+    </div>
+  );
+};
+
+GridBlockEdit.propTypes = {
+  block: PropTypes.string.isRequired,
+  onChangeBlock: PropTypes.func.isRequired,
+  pathname: PropTypes.string.isRequired,
+  selected: PropTypes.bool.isRequired,
+  manage: PropTypes.bool.isRequired,
+};
+
+export default GridBlockEdit;

package/src/customizations/volto/components/manage/Blocks/Grid/View.jsx

@@ -0,0 +1,61 @@
+import { Grid } from 'semantic-ui-react';
+import cx from 'classnames';
+import { RenderBlocks } from '@plone/volto/components';
+import { withBlockExtensions } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+const convertTeaserToGridIfNecessary = (data) => {
+  if (data?.['@type'] === 'teaserGrid')
+    return {
+      ...data,
+      '@type': 'gridBlock',
+      blocks_layout: { items: data?.columns.map((c) => c.id) },
+      blocks: data?.columns?.reduce((acc, current) => {
+        return {
+          ...acc,
+          [current?.id]: current,
+        };
+      }, {}),
+    };
+  return data;
+};
+
+const GridBlockView = (props) => {
+  const { data, path, className, style } = props;
+  const metadata = props.metadata || props.properties;
+  const columns = data?.blocks_layout?.items || data?.columns;
+  const blocksConfig =
+    config.blocks.blocksConfig[data['@type']].blocksConfig ||
+    props.blocksConfig;
+  const location = {
+    pathname: path,
+  };
+
+  return (
+    <div
+      className={cx('block', data['@type'], className, {
+        one: columns?.length === 1,
+        two: columns?.length === 2,
+        three: columns?.length === 3,
+        four: columns?.length === 4,
+      })}
+      style={style}
+    >
+      {data.headline && <h2 className="headline">{data.headline}</h2>}
+
+      <Grid stackable stretched columns={columns?.length}>
+        <RenderBlocks
+          {...props}
+          blockWrapperTag={Grid.Column}
+          metadata={metadata}
+          content={convertTeaserToGridIfNecessary(data)}
+          location={location}
+          blocksConfig={blocksConfig}
+          isContainer
+        />
+      </Grid>
+    </div>
+  );
+};
+
+export default withBlockExtensions(GridBlockView);

package/src/customizations/volto/components/manage/Blocks/Grid/readme.md

@@ -0,0 +1 @@
+These two customizations ensure backward compatibility with the legacy @kitconcept/volto-blocks-grid. For more details, refer to the ticket here: https://taskman.eionet.europa.eu/issues/265726.

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

@@ -16,7 +16,6 @@ import { isEqual } from 'lodash';
 
 import { Icon, ImageSidebar, SidebarPortal } from '@plone/volto/components';
 import { Icon as IconSemantic } from 'semantic-ui-react';
-import { withBlockExtensions } from '@plone/volto/helpers';
 import { createContent } from '@plone/volto/actions';
 import { Copyright } from '@eeacms/volto-eea-design-system/ui';
 
@@ -24,13 +23,33 @@ 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';
+
+// please Volto 16 test
+export const getImageBlockSizes = function (data) {
+  if (data.align === 'full') return '100vw';
+  if (data.align === 'center') {
+    if (data.size === 'l') return '100vw';
+    if (data.size === 'm') return '50vw';
+    if (data.size === 's') return '25vw';
+  }
+  if (data.align === 'left' || data.align === 'right') {
+    if (data.size === 'l') return '50vw';
+    if (data.size === 'm') return '25vw';
+    if (data.size === 's') return '15vw';
+  }
+  return undefined;
+};
+
 const Dropzone = loadable(() => import('react-dropzone'));
 
 const messages = defineMessages({
@@ -38,6 +57,10 @@ const messages = defineMessages({
     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',
+  },
 });
 
 /**
@@ -56,7 +79,7 @@ class Edit extends Component {
     block: PropTypes.string.isRequired,
     index: PropTypes.number.isRequired,
     data: PropTypes.objectOf(PropTypes.any).isRequired,
-    content: PropTypes.objectOf(PropTypes.any).isRequired,
+    content: PropTypes.objectOf(PropTypes.any),
     request: PropTypes.shape({
       loading: PropTypes.bool,
       loaded: PropTypes.bool,
@@ -85,6 +108,7 @@ class Edit extends Component {
    * @returns {undefined}
    */
   UNSAFE_componentWillReceiveProps(nextProps) {
+    // Update block data after upload finished
     if (
       this.props.request.loading &&
       nextProps.request.loaded &&
@@ -96,6 +120,8 @@ class Edit extends Component {
       this.props.onChangeBlock(this.props.block, {
         ...this.props.data,
         url: nextProps.content['@id'],
+        image_field: 'image',
+        image_scales: { image: [nextProps.content.image] },
         alt: '',
       });
     }
@@ -123,6 +149,7 @@ class Edit extends Component {
   onUploadImage = (e) => {
     e.stopPropagation();
     const file = e.target.files[0];
+    if (!validateFileUploadSize(file, this.props.intl.formatMessage)) return;
     this.setState({
       uploading: true,
     });
@@ -167,6 +194,8 @@ class Edit extends Component {
     this.props.onChangeBlock(this.props.block, {
       ...this.props.data,
       url: flattenToAppURL(this.state.url),
+      image_field: undefined,
+      image_scales: undefined,
     });
   };
 
@@ -176,23 +205,25 @@ class Edit extends Component {
    * @param {array} files File objects
    * @returns {undefined}
    */
-  onDrop = (file) => {
-    this.setState({
-      uploading: true,
-    });
+  onDrop = (files) => {
+    if (!validateFileUploadSize(files[0], this.props.intl.formatMessage)) {
+      this.setState({ dragging: false });
+      return;
+    }
+    this.setState({ uploading: true });
 
-    readAsDataURL(file[0]).then((data) => {
+    readAsDataURL(files[0]).then((data) => {
       const fields = data.match(/^data:(.*);(.*),(.*)$/);
       this.props.createContent(
         getBaseUrl(this.props.pathname),
         {
           '@type': 'Image',
-          title: file[0].name,
+          title: files[0].name,
           image: {
             data: fields[3],
             encoding: fields[2],
             'content-type': fields[1],
-            filename: file[0].name,
+            filename: files[0].name,
           },
         },
         this.props.block,
@@ -234,6 +265,7 @@ class Edit extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    const Image = config.getComponent({ name: 'Image' }).component;
     const { data } = this.props;
     const placeholder =
       this.props.data.placeholder ||
@@ -265,7 +297,7 @@ class Edit extends Component {
         >
           {data.url ? (
             <>
-              <img
+              <Image
                 className={cx(
                   {
                     'full-width': data.align === 'full',
@@ -275,18 +307,23 @@ class Edit extends Component {
                   },
                   data?.styles?.objectPosition,
                 )}
+                item={
+                  data.image_scales
+                    ? {
+                        '@id': data.url,
+                        image_field: data.image_field,
+                        image_scales: data.image_scales,
+                      }
+                    : undefined
+                }
                 src={
-                  isInternalURL(data.url)
+                  data.image_scales
+                    ? undefined
+                    : isInternalURL(data.url)
                     ? // Backwards compat in the case that the block is storing the full server URL
                       (() => {
-                        if (data.align === 'full')
-                          return `${flattenToAppURL(
-                            data.url,
-                          )}/@@images/image/huge`;
                         if (data.size === 'l')
-                          return `${flattenToAppURL(
-                            data.url,
-                          )}/@@images/image/great`;
+                          return `${flattenToAppURL(data.url)}/@@images/image`;
                         if (data.size === 'm')
                           return `${flattenToAppURL(
                             data.url,
@@ -295,13 +332,14 @@ class Edit extends Component {
                           return `${flattenToAppURL(
                             data.url,
                           )}/@@images/image/mini`;
-                        return `${flattenToAppURL(
-                          data.url,
-                        )}/@@images/image/great`;
+                        return `${flattenToAppURL(data.url)}/@@images/image`;
                       })()
                     : data.url
                 }
+                sizes={config.blocks.blocksConfig.image.getSizes(data)}
                 alt={data.alt || ''}
+                loading="lazy"
+                responsive={true}
               />
               <div className={`copyright-wrapper ${copyrightPosition}`}>
                 {copyright && showCopyright ? (
@@ -332,7 +370,11 @@ class Edit extends Component {
                         {this.state.dragging && <Dimmer active></Dimmer>}
                         {this.state.uploading && (
                           <Dimmer active>
-                            <Loader indeterminate>Uploading image</Loader>
+                            <Loader indeterminate>
+                              {this.props.intl.formatMessage(
+                                messages.uploadingImage,
+                              )}
+                            </Loader>
                           </Dimmer>
                         )}
                         <div className="no-image-wrapper">
@@ -345,7 +387,24 @@ class Edit extends Component {
                                 onClick={(e) => {
                                   e.stopPropagation();
                                   e.preventDefault();
-                                  this.props.openObjectBrowser();
+                                  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" />

package/src/customizations/volto/components/manage/Blocks/Image/Edit.test.jsx

@@ -1,10 +1,16 @@
-import React from 'react';
+import config from '@plone/volto/registry';
+import '@testing-library/jest-dom/extend-expect';
 import { render } from '@testing-library/react';
+import React from 'react';
 import { Provider } from 'react-intl-redux';
 import configureMockStore from 'redux-mock-store';
 import Edit from './Edit';
-import config from '@plone/volto/registry';
-import '@testing-library/jest-dom/extend-expect';
+import { Image } from '@plone/volto/components';
+import { getImageBlockSizes } from './Edit';
+
+config.set('components', {
+  Image: { component: Image },
+});
 
 const mockStore = configureMockStore();
 const { settings } = config;
@@ -25,6 +31,7 @@ config.blocks.blocksConfig = {
       addPermission: [],
       view: [],
     },
+    getSizes: getImageBlockSizes,
   },
 };
 const blockId = '1234';