@eeacms/volto-eea-website-theme 1.30.0 → 1.32.0

package/CHANGELOG.md

@@ -4,6 +4,36 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.32.0](https://github.com/eea/volto-eea-website-theme/compare/1.31.0...1.32.0) - 21 March 2024
+
+#### :rocket: New Features
+
+- feat(slate): add new h3 slate element [Miu Razvan - [`20a7e93`](https://github.com/eea/volto-eea-website-theme/commit/20a7e9316d5c1de279712c38bc05eb775f8bd326)]
+- feat(slate): add h4 in slate toolbar [Miu Razvan - [`2c523ac`](https://github.com/eea/volto-eea-website-theme/commit/2c523acdeb78ed224c4a37285c48dbf4555604e0)]
+
+#### :nail_care: Enhancements
+
+- change(slate): Use F as icon and renamed title of new heading Slate toolbar button to Figure title [David Ichim - [`7355bb3`](https://github.com/eea/volto-eea-website-theme/commit/7355bb3f3cf527c24fc41a10f72cc854773ab84b)]
+- change(slate): renamed addFormat to addSlateToolbarButton [ichim-david - [`0809c04`](https://github.com/eea/volto-eea-website-theme/commit/0809c040ea9e096c60cbce36e679f9bab23a52a2)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`6971349`](https://github.com/eea/volto-eea-website-theme/commit/69713496d601e4e0b2fe3469a4ffcd8d36105040)]
+- style: Automated code fix [eea-jenkins - [`a292700`](https://github.com/eea/volto-eea-website-theme/commit/a292700cd047bad925add1fde4d834f7fd03ec62)]
+
+#### :hammer_and_wrench: Others
+
+- Update package.json [ichim-david - [`9db96ff`](https://github.com/eea/volto-eea-website-theme/commit/9db96ff3f8e8eedce92c53befe6a1d6e965d8699)]
+- Revert "(fix): In search block on edit, the sort on and sort order are not working (#205)" [David Ichim - [`2045d50`](https://github.com/eea/volto-eea-website-theme/commit/2045d50b3d2f18fab0d6c6794d8030975b1a3f21)]
+### [1.31.0](https://github.com/eea/volto-eea-website-theme/compare/1.30.0...1.31.0) - 14 March 2024
+
+#### :rocket: New Features
+
+- feat: Put default alt as the rights field  than image title - refs #159551 [dobri1408 - [`4f0e60b`](https://github.com/eea/volto-eea-website-theme/commit/4f0e60b02ce1167d92de3b294e75d2577c892c85)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.31.0 [alin - [`36690f7`](https://github.com/eea/volto-eea-website-theme/commit/36690f75e4773e40f5ab4e4ce4b956b650df62b5)]
 ### [1.30.0](https://github.com/eea/volto-eea-website-theme/compare/1.29.0...1.30.0) - 13 March 2024
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.30.0",
+  "version": "1.32.0",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/customizations/volto/components/manage/Sidebar/ObjectBrowserBody.jsx

@@ -0,0 +1,511 @@
+/* this customization is used to put default alt as the rights field
+ */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+import { Input, Segment, Breadcrumb } from 'semantic-ui-react';
+
+import { join } from 'lodash';
+
+// These absolute imports (without using the corresponding centralized index.js) are required
+// to cut circular import problems, this file should never use them. This is because of
+// the very nature of the functionality of the component and its relationship with others
+import { searchContent } from '@plone/volto/actions/search/search';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers/Url/Url';
+import config from '@plone/volto/registry';
+
+import backSVG from '@plone/volto/icons/back.svg';
+import folderSVG from '@plone/volto/icons/folder.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import searchSVG from '@plone/volto/icons/zoom.svg';
+import linkSVG from '@plone/volto/icons/link.svg';
+import homeSVG from '@plone/volto/icons/home.svg';
+
+import ObjectBrowserNav from '@plone/volto/components/manage/Sidebar/ObjectBrowserNav';
+
+const messages = defineMessages({
+  SearchInputPlaceholder: {
+    id: 'Search content',
+    defaultMessage: 'Search content',
+  },
+  SelectedItems: {
+    id: 'Selected items',
+    defaultMessage: 'Selected items',
+  },
+  back: {
+    id: 'Back',
+    defaultMessage: 'Back',
+  },
+  search: {
+    id: 'Search SVG',
+    defaultMessage: 'Search SVG',
+  },
+  of: { id: 'Selected items - x of y', defaultMessage: 'of' },
+});
+
+function getParentURL(url) {
+  return flattenToAppURL(`${join(url.split('/').slice(0, -1), '/')}`) || '/';
+}
+
+/**
+ * ObjectBrowserBody container class.
+ * @class ObjectBrowserBody
+ * @extends Component
+ */
+class ObjectBrowserBody extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    block: PropTypes.string.isRequired,
+    mode: PropTypes.string.isRequired,
+    data: PropTypes.any.isRequired,
+    searchSubrequests: PropTypes.objectOf(PropTypes.any).isRequired,
+    searchContent: PropTypes.func.isRequired,
+    closeObjectBrowser: PropTypes.func.isRequired,
+    onChangeBlock: PropTypes.func.isRequired,
+    onSelectItem: PropTypes.func,
+    dataName: PropTypes.string,
+    maximumSelectionSize: PropTypes.number,
+    contextURL: PropTypes.string,
+    searchableTypes: PropTypes.arrayOf(PropTypes.string),
+  };
+
+  /**
+   * Default properties.
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    image: '',
+    href: '',
+    onSelectItem: null,
+    dataName: null,
+    selectableTypes: [],
+    searchableTypes: null,
+    maximumSelectionSize: null,
+  };
+
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs WysiwygEditor
+   */
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentFolder:
+        this.props.mode === 'multiple' ? '/' : this.props.contextURL || '/',
+      currentImageFolder:
+        this.props.mode === 'multiple'
+          ? '/'
+          : this.props.mode === 'image' && this.props.data?.url
+          ? getParentURL(this.props.data.url)
+          : '/',
+      currentLinkFolder:
+        this.props.mode === 'multiple'
+          ? '/'
+          : this.props.mode === 'link' && this.props.data?.href
+          ? getParentURL(this.props.data.href)
+          : '/',
+      parentFolder: '',
+      selectedImage:
+        this.props.mode === 'multiple'
+          ? ''
+          : this.props.mode === 'image' && this.props.data?.url
+          ? flattenToAppURL(this.props.data.url)
+          : '',
+      selectedHref:
+        this.props.mode === 'multiple'
+          ? ''
+          : this.props.mode === 'link' && this.props.data?.href
+          ? flattenToAppURL(this.props.data.href)
+          : '',
+      showSearchInput: false,
+      // In image mode, the searchable types default to the image types which
+      // can be overridden with the property if specified.
+      searchableTypes:
+        this.props.mode === 'image'
+          ? this.props.searchableTypes || config.settings.imageObjects
+          : this.props.searchableTypes,
+    };
+    this.searchInputRef = React.createRef();
+  }
+
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    this.initialSearch(this.props.mode);
+  }
+
+  initialSearch = (mode) => {
+    const currentSelected =
+      mode === 'multiple'
+        ? ''
+        : mode === 'image'
+        ? this.state.selectedImage
+        : this.state.selectedHref;
+    if (currentSelected && isInternalURL(currentSelected)) {
+      this.props.searchContent(
+        getParentURL(currentSelected),
+        {
+          'path.depth': 1,
+          sort_on: 'getObjPositionInParent',
+          metadata_fields: '_all',
+          b_size: 1000,
+        },
+        `${this.props.block}-${mode}`,
+      );
+    } else {
+      this.props.searchContent(
+        this.state.currentFolder,
+        {
+          'path.depth': 1,
+          sort_on: 'getObjPositionInParent',
+          metadata_fields: '_all',
+          b_size: 1000,
+        },
+        `${this.props.block}-${mode}`,
+      );
+    }
+  };
+
+  navigateTo = (id) => {
+    this.props.searchContent(
+      id,
+      {
+        'path.depth': 1,
+        sort_on: 'getObjPositionInParent',
+        metadata_fields: '_all',
+        b_size: 1000,
+      },
+      `${this.props.block}-${this.props.mode}`,
+    );
+    const parent = `${join(id.split('/').slice(0, -1), '/')}` || '/';
+    this.setState(() => ({
+      parentFolder: parent,
+      currentFolder: id || '/',
+    }));
+  };
+
+  toggleSearchInput = () =>
+    this.setState(
+      (prevState) => ({
+        showSearchInput: !prevState.showSearchInput,
+      }),
+      () => {
+        if (this.searchInputRef?.current) this.searchInputRef.current.focus();
+      },
+    );
+
+  onSearch = (e) => {
+    const text = flattenToAppURL(e.target.value);
+    if (text.startsWith('/')) {
+      this.setState({ currentFolder: text });
+      this.props.searchContent(
+        text,
+        {
+          'path.depth': 1,
+          sort_on: 'getObjPositionInParent',
+          metadata_fields: '_all',
+          portal_type: this.state.searchableTypes,
+        },
+        `${this.props.block}-${this.props.mode}`,
+      );
+    } else {
+      text.length > 2
+        ? this.props.searchContent(
+            '/',
+            {
+              SearchableText: `${text}*`,
+              metadata_fields: '_all',
+              portal_type: this.state.searchableTypes,
+            },
+            `${this.props.block}-${this.props.mode}`,
+          )
+        : this.props.searchContent(
+            '/',
+            {
+              'path.depth': 1,
+              sort_on: 'getObjPositionInParent',
+              metadata_fields: '_all',
+              portal_type: this.state.searchableTypes,
+            },
+            `${this.props.block}-${this.props.mode}`,
+          );
+    }
+  };
+
+  onSelectItem = (item) => {
+    const url = item['@id'];
+    const { block, data, mode, dataName, onChangeBlock } = this.props;
+
+    const updateState = (mode) => {
+      switch (mode) {
+        case 'image':
+          this.setState({
+            selectedImage: url,
+            currentImageFolder: getParentURL(url),
+          });
+          break;
+        case 'link':
+          this.setState({
+            selectedHref: url,
+            currentLinkFolder: getParentURL(url),
+          });
+          break;
+        default:
+          break;
+      }
+    };
+
+    if (dataName) {
+      onChangeBlock(block, {
+        ...data,
+        [dataName]: url,
+      });
+    } else if (this.props.onSelectItem) {
+      this.props.onSelectItem(url, item);
+    } else if (mode === 'image') {
+      onChangeBlock(block, {
+        ...data,
+        url: flattenToAppURL(item.getURL),
+        alt: item.title || item.description || '',
+        copyright: item.rights || '',
+      });
+    } else if (mode === 'link') {
+      onChangeBlock(block, {
+        ...data,
+        href: flattenToAppURL(url),
+      });
+    }
+    updateState(mode);
+  };
+
+  onChangeBlockData = (key, value) => {
+    this.props.onChangeBlock(this.props.block, {
+      ...this.props.data,
+      [key]: value,
+    });
+  };
+
+  isSelectable = (item) => {
+    return this.props.selectableTypes.length > 0
+      ? this.props.selectableTypes.indexOf(item['@type']) >= 0
+      : true;
+  };
+
+  handleClickOnItem = (item) => {
+    if (this.props.mode === 'image') {
+      if (item.is_folderish) {
+        this.navigateTo(item['@id']);
+      }
+      if (config.settings.imageObjects.includes(item['@type'])) {
+        this.onSelectItem(item);
+      }
+    } else {
+      if (this.isSelectable(item)) {
+        if (
+          !this.props.maximumSelectionSize ||
+          this.props.mode === 'multiple' ||
+          !this.props.data ||
+          this.props.data.length < this.props.maximumSelectionSize
+        ) {
+          this.onSelectItem(item);
+          let length = this.props.data ? this.props.data.length : 0;
+
+          let stopSelecting =
+            this.props.mode !== 'multiple' ||
+            (this.props.maximumSelectionSize > 0 &&
+              length + 1 >= this.props.maximumSelectionSize);
+
+          if (stopSelecting) {
+            this.props.closeObjectBrowser();
+          }
+        } else {
+          this.props.closeObjectBrowser();
+        }
+      } else {
+        this.navigateTo(item['@id']);
+      }
+    }
+  };
+
+  handleDoubleClickOnItem = (item) => {
+    if (this.props.mode === 'image') {
+      if (item.is_folderish) {
+        this.navigateTo(item['@id']);
+      }
+      if (config.settings.imageObjects.includes(item['@type'])) {
+        this.onSelectItem(item);
+        this.props.closeObjectBrowser();
+      }
+    } else {
+      if (this.isSelectable(item)) {
+        if (this.props.data.length < this.props.maximumSelectionSize) {
+          this.onSelectItem(item);
+        }
+        this.props.closeObjectBrowser();
+      } else {
+        this.navigateTo(item['@id']);
+      }
+    }
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    return (
+      <Segment.Group raised>
+        <header className="header pulled">
+          <div className="vertical divider" />
+          {this.state.currentFolder === '/' ? (
+            <>
+              {this.props.mode === 'image' ? (
+                <Icon name={folderSVG} size="24px" />
+              ) : (
+                <Icon name={linkSVG} size="24px" />
+              )}
+            </>
+          ) : (
+            <button
+              aria-label={this.props.intl.formatMessage(messages.back)}
+              onClick={() => this.navigateTo(this.state.parentFolder)}
+            >
+              <Icon name={backSVG} size="24px" />
+            </button>
+          )}
+          {this.state.showSearchInput ? (
+            <Input
+              className="search"
+              ref={this.searchInputRef}
+              onChange={this.onSearch}
+              placeholder={this.props.intl.formatMessage(
+                messages.SearchInputPlaceholder,
+              )}
+            />
+          ) : this.props.mode === 'image' ? (
+            <h2>
+              <FormattedMessage
+                id="Choose Image"
+                defaultMessage="Choose Image"
+              />
+            </h2>
+          ) : (
+            <h2>
+              <FormattedMessage
+                id="Choose Target"
+                defaultMessage="Choose Target"
+              />
+            </h2>
+          )}
+
+          <button
+            aria-label={this.props.intl.formatMessage(messages.search)}
+            onClick={this.toggleSearchInput}
+          >
+            <Icon name={searchSVG} size="24px" />
+          </button>
+          <button className="clearSVG" onClick={this.props.closeObjectBrowser}>
+            <Icon name={clearSVG} size="24px" />
+          </button>
+        </header>
+        <Segment secondary className="breadcrumbs" vertical>
+          <Breadcrumb>
+            {this.state.currentFolder !== '/' ? (
+              this.state.currentFolder.split('/').map((item, index, items) => {
+                return (
+                  <React.Fragment key={`divider-${item}-${index}`}>
+                    {index === 0 ? (
+                      <Breadcrumb.Section onClick={() => this.navigateTo('/')}>
+                        <Icon
+                          className="home-icon"
+                          name={homeSVG}
+                          size="18px"
+                        />
+                      </Breadcrumb.Section>
+                    ) : (
+                      <>
+                        <Breadcrumb.Divider key={`divider-${item.url}`} />
+                        <Breadcrumb.Section
+                          onClick={() =>
+                            this.navigateTo(items.slice(0, index + 1).join('/'))
+                          }
+                        >
+                          {item}
+                        </Breadcrumb.Section>
+                      </>
+                    )}
+                  </React.Fragment>
+                );
+              })
+            ) : (
+              <Breadcrumb.Section onClick={() => this.navigateTo('/')}>
+                <Icon className="home-icon" name={homeSVG} size="18px" />
+              </Breadcrumb.Section>
+            )}
+          </Breadcrumb>
+        </Segment>
+        {this.props.mode === 'multiple' && (
+          <Segment className="infos">
+            {this.props.intl.formatMessage(messages.SelectedItems)}:{' '}
+            {this.props.data?.length}
+            {this.props.maximumSelectionSize > 0 && (
+              <>
+                {' '}
+                {this.props.intl.formatMessage(messages.of)}{' '}
+                {this.props.maximumSelectionSize}
+              </>
+            )}
+          </Segment>
+        )}
+        <ObjectBrowserNav
+          currentSearchResults={
+            this.props.searchSubrequests[
+              `${this.props.block}-${this.props.mode}`
+            ]
+          }
+          selected={
+            this.props.mode === 'multiple'
+              ? this.props.data
+              : [
+                  {
+                    '@id':
+                      this.props.mode === 'image'
+                        ? this.state.selectedImage
+                        : this.state.selectedHref,
+                  },
+                ]
+          }
+          handleClickOnItem={this.handleClickOnItem}
+          handleDoubleClickOnItem={this.handleDoubleClickOnItem}
+          mode={this.props.mode}
+          navigateTo={this.navigateTo}
+          isSelectable={this.isSelectable}
+        />
+      </Segment.Group>
+    );
+  }
+}
+
+export default compose(
+  injectIntl,
+  connect(
+    (state) => ({
+      searchSubrequests: state.search.subrequests,
+    }),
+    { searchContent },
+  ),
+)(ObjectBrowserBody);

package/src/icons/font-mono.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6 4H19V6H8V12H18V14H8V21H6V4Z"></path></svg>

package/src/index.js

@@ -373,6 +373,7 @@ const applyConfig = (config) => {
     },
   ];
 
+  // Install slate
   config = installSlate(config);
 
   // Custom block-style colors

package/src/slate.js

@@ -1,6 +1,11 @@
 import React from 'react';
+import cx from 'classnames';
 import { List } from 'semantic-ui-react';
-import { MarkElementButton, ToolbarButton } from '@plone/volto-slate/editor/ui';
+import {
+  MarkElementButton,
+  ToolbarButton,
+  BlockButton,
+} from '@plone/volto-slate/editor/ui';
 import installCallout from '@plone/volto-slate/editor/plugins/Callout';
 import { Icon } from '@plone/volto/components';
 import { Editor, Transforms, Text } from 'slate';
@@ -14,6 +19,39 @@ import alignJustifyIcon from '@plone/volto/icons/align-justify.svg';
 import lightIcon from './icons/light.svg';
 import smallIcon from './icons/small.svg';
 import clearIcon from './icons/eraser.svg';
+import fontMono from './icons/font-mono.svg';
+
+const installSlateToolbarButton = ({
+  config,
+  key,
+  before,
+  button,
+  element,
+}) => {
+  const toolbarButtons = config.settings.slate.toolbarButtons;
+  const index = toolbarButtons.indexOf(key);
+  const beforeIndex = toolbarButtons.indexOf(before);
+  if (index === -1) {
+    if (beforeIndex > -1) {
+      toolbarButtons.splice(beforeIndex + 1, 0, key);
+    } else {
+      toolbarButtons.push(key);
+    }
+  } else if (index > -1 && beforeIndex > -1 && index > beforeIndex + 1) {
+    toolbarButtons.splice(index, 1);
+    toolbarButtons.splice(beforeIndex + 1, 0, key);
+  } else if (index > -1 && index < beforeIndex) {
+    toolbarButtons.splice(index, 1);
+    toolbarButtons.splice(beforeIndex, 0, key);
+  }
+  if (button) {
+    config.settings.slate.buttons[key] = button;
+  }
+  if (element) {
+    config.settings.slate.elements[key] = element;
+  }
+  return config;
+};
 
 const toggleBlockClassFormat = (editor, format) => {
   const levels = Array.from(Editor.levels(editor, editor.selection));
@@ -67,20 +105,16 @@ const clearFormatting = (editor) => {
     Editor.nodes(editor, {
       mode: 'lowest',
       match: (n, p) => {
-        // console.log('node', n, p);
         return Text.isText(n);
       },
       //at: [0], // uncomment if you want everything to be cleared
     }),
   );
 
-  // console.log('sn', sn);
-
   sn.forEach(([n, at]) => {
     const toRemove = Object.keys(n).filter((k) => k.startsWith('style-'));
     if (toRemove.length) {
       Transforms.unsetNodes(editor, toRemove, { at });
-      // console.log('unset', n, at, toRemove);
     }
   });
 
@@ -111,9 +145,46 @@ const ClearFormattingButton = ({ icon, ...props }) => {
 
 export default function installSlate(config) {
   if (config.settings.slate) {
+    let renderLinkElement;
     // Callout slate button
     config = installCallout(config);
 
+    try {
+      renderLinkElement = require('@eeacms/volto-anchors/helpers')
+        .renderLinkElement;
+    } catch {}
+
+    installSlateToolbarButton({
+      config,
+      key: 'h3-light',
+      before: 'heading-three',
+      button: (props) => (
+        <BlockButton
+          title="Figure title"
+          format="h3-light"
+          allowedChildren={config.settings.slate.allowedHeadlineElements}
+          icon={fontMono}
+          {...props}
+        />
+      ),
+      element: renderLinkElement
+        ? (opts) => {
+            return renderLinkElement('h3')({
+              ...opts,
+              className: 'subtitle-light',
+            });
+          }
+        : ({ attributes, children }) => (
+            <h3
+              {...attributes}
+              className={cx(attributes.className, 'subtitle-light')}
+            >
+              {children}
+            </h3>
+          ),
+    });
+    config.settings.slate.topLevelTargetElements.push('h3-light');
+
     config.settings.slate.buttons.clearformatting = (props) => (
       <ClearFormattingButton title="Clear formatting" icon={clearIcon} />
     );

package/src/customizations/volto/components/manage/Blocks/Search/SearchBlockEdit.jsx

@@ -1,106 +0,0 @@
-//this customization is used for fixing: in the search block, on edit sort on and reversed order doesn't work.
-//See here volto pr: https://github.com/plone/volto/pull/5262
-import React, { useEffect } from 'react';
-import { defineMessages } from 'react-intl';
-import { compose } from 'redux';
-
-import { SidebarPortal, BlockDataForm } from '@plone/volto/components';
-import { addExtensionFieldToSchema } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
-import { getBaseUrl } from '@plone/volto/helpers';
-import config from '@plone/volto/registry';
-
-import { SearchBlockViewComponent } from '@plone/volto/components/manage/Blocks/Search/SearchBlockView';
-import Schema from '@plone/volto/components/manage/Blocks/Search/schema';
-import {
-  withSearch,
-  withQueryString,
-} from '@plone/volto/components/manage/Blocks/Search/hocs';
-import { cloneDeep } from 'lodash';
-
-const messages = defineMessages({
-  template: {
-    id: 'Results template',
-    defaultMessage: 'Results template',
-  },
-});
-
-const SearchBlockEdit = (props) => {
-  const {
-    block,
-    onChangeBlock,
-    data,
-    selected,
-    intl,
-    navRoot,
-    contentType,
-    onTriggerSearch,
-    querystring = {},
-  } = props;
-  const { sortable_indexes = {} } = querystring;
-
-  let schema = Schema({ data, intl });
-
-  schema = addExtensionFieldToSchema({
-    schema,
-    name: 'listingBodyTemplate',
-    items: config.blocks.blocksConfig.listing.variations,
-    intl,
-    title: { id: intl.formatMessage(messages.template) },
-  });
-  const listingVariations = config.blocks.blocksConfig?.listing?.variations;
-  let activeItem = listingVariations.find(
-    (item) => item.id === data.listingBodyTemplate,
-  );
-  const listingSchemaEnhancer = activeItem?.schemaEnhancer;
-  if (listingSchemaEnhancer)
-    schema = listingSchemaEnhancer({
-      schema: cloneDeep(schema),
-      data,
-      intl,
-    });
-  schema.properties.sortOnOptions.items = {
-    choices: Object.keys(sortable_indexes).map((k) => [
-      k,
-      sortable_indexes[k].title,
-    ]),
-  };
-
-  const { query = {} } = data || {};
-  // We don't need deep compare here, as this is just json serializable data.
-  const deepQuery = JSON.stringify(query);
-  useEffect(() => {
-    onTriggerSearch(
-      '',
-      data?.facets,
-      data?.query?.sort_on,
-      data?.query?.sort_order,
-    );
-  }, [deepQuery, onTriggerSearch, data]);
-
-  return (
-    <>
-      <SearchBlockViewComponent
-        {...props}
-        path={getBaseUrl(props.pathname)}
-        mode="edit"
-      />
-      <SidebarPortal selected={selected}>
-        <BlockDataForm
-          schema={schema}
-          onChangeField={(id, value) => {
-            onChangeBlock(block, {
-              ...data,
-              [id]: value,
-            });
-          }}
-          onChangeBlock={onChangeBlock}
-          formData={data}
-          navRoot={navRoot}
-          contentType={contentType}
-        />
-      </SidebarPortal>
-    </>
-  );
-};
-
-export default compose(withQueryString, withSearch())(SearchBlockEdit);

package/src/customizations/volto/components/manage/Blocks/Search/hocs/withSearch.jsx

@@ -1,479 +0,0 @@
-//this customization is used for fixing: in the search block, on edit sort on and reversed order doesn't work.
-//See here volto pr: https://github.com/plone/volto/pull/5262
-import React from 'react';
-import { useSelector } from 'react-redux';
-import qs from 'query-string';
-import { useLocation, useHistory } from 'react-router-dom';
-
-import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions';
-import config from '@plone/volto/registry';
-import { usePrevious } from '@plone/volto/helpers';
-import { isEqual } from 'lodash';
-
-function getDisplayName(WrappedComponent) {
-  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
-}
-
-const SEARCH_ENDPOINT_FIELDS = [
-  'SearchableText',
-  'b_size',
-  'limit',
-  'sort_on',
-  'sort_order',
-];
-
-const PAQO = 'plone.app.querystring.operation';
-
-/**
- * Based on URL state, gets an initial internal state for the search
- *
- * @function getInitialState
- *
- */
-function getInitialState(
-  data,
-  facets,
-  urlSearchText,
-  id,
-  sortOnParam,
-  sortOrderParam,
-) {
-  const {
-    types: facetWidgetTypes,
-  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
-  const facetSettings = data?.facets || [];
-
-  return {
-    query: [
-      ...(data.query?.query || []),
-      ...(facetSettings || [])
-        .map((facet) => {
-          if (!facet?.field) return null;
-
-          const { valueToQuery } = resolveExtension(
-            'type',
-            facetWidgetTypes,
-            facet,
-          );
-
-          const name = facet.field.value;
-          const value = facets[name];
-
-          return valueToQuery({ value, facet });
-        })
-        .filter((f) => !!f),
-      ...(urlSearchText
-        ? [
-            {
-              i: 'SearchableText',
-              o: 'plone.app.querystring.operation.string.contains',
-              v: urlSearchText,
-            },
-          ]
-        : []),
-    ],
-    sort_on: sortOnParam || data.query?.sort_on,
-    sort_order: sortOrderParam || data.query?.sort_order,
-    b_size: data.query?.b_size,
-    limit: data.query?.limit,
-    block: id,
-  };
-}
-
-/**
- * "Normalizes" the search state to something that's serializable
- * (for querying) and used to compute data for the ListingBody
- *
- * @function normalizeState
- *
- */
-function normalizeState({
-  query, // base query
-  facets, // facet values
-  id, // block id
-  searchText, // SearchableText
-  sortOn,
-  sortOrder,
-  facetSettings, // data.facets extracted from block data
-}) {
-  const {
-    types: facetWidgetTypes,
-  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
-
-  // Here, we are removing the QueryString of the Listing ones, which is present in the Facet
-  // because we already initialize the facet with those values.
-  const configuredFacets = facetSettings
-    ? facetSettings.map((facet) => facet?.field?.value)
-    : [];
-
-  let copyOfQuery = query.query ? [...query.query] : [];
-
-  const queryWithoutFacet = copyOfQuery.filter((query) => {
-    return !configuredFacets.includes(query.i);
-  });
-
-  const params = {
-    query: [
-      ...(queryWithoutFacet || []),
-      ...(facetSettings || []).map((facet) => {
-        if (!facet?.field) return null;
-
-        const { valueToQuery } = resolveExtension(
-          'type',
-          facetWidgetTypes,
-          facet,
-        );
-
-        const name = facet.field.value;
-        const value = facets[name];
-
-        return valueToQuery({ value, facet });
-      }),
-    ].filter((o) => !!o),
-    sort_on: sortOn || query.sort_on,
-    sort_order: sortOrder || query.sort_order,
-    b_size: query.b_size,
-    limit: query.limit,
-    block: id,
-  };
-
-  // Note Ideally the searchtext functionality should be restructured as being just
-  // another facet. But right now it's the same. This means that if a searchText
-  // is provided, it will override the SearchableText facet.
-  // If there is no searchText, the SearchableText in the query remains in effect.
-  // TODO eventually the searchText should be a distinct facet from SearchableText, and
-  // the two conditions could be combined, in comparison to the current state, when
-  // one overrides the other.
-  if (searchText) {
-    params.query = params.query.reduce(
-      // Remove SearchableText from query
-      (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
-      [],
-    );
-    params.query.push({
-      i: 'SearchableText',
-      o: 'plone.app.querystring.operation.string.contains',
-      v: searchText,
-    });
-  }
-
-  return params;
-}
-
-const getSearchFields = (searchData) => {
-  return Object.assign(
-    {},
-    ...SEARCH_ENDPOINT_FIELDS.map((k) => {
-      return searchData[k] ? { [k]: searchData[k] } : {};
-    }),
-    searchData.query ? { query: serializeQuery(searchData['query']) } : {},
-  );
-};
-
-/**
- * A hook that will mirror the search block state to a hash location
- */
-const useHashState = () => {
-  const location = useLocation();
-  const history = useHistory();
-
-  /**
-   * Required to maintain parameter compatibility.
-    With this we will maintain support for receiving hash (#) and search (?) type parameters.
-  */
-  const oldState = React.useMemo(() => {
-    return {
-      ...qs.parse(location.search),
-      ...qs.parse(location.hash),
-    };
-  }, [location.hash, location.search]);
-
-  // This creates a shallow copy. Why is this needed?
-  const current = Object.assign(
-    {},
-    ...Array.from(Object.keys(oldState)).map((k) => ({ [k]: oldState[k] })),
-  );
-
-  const setSearchData = React.useCallback(
-    (searchData) => {
-      const newParams = qs.parse(location.search);
-
-      let changed = false;
-
-      Object.keys(searchData)
-        .sort()
-        .forEach((k) => {
-          if (searchData[k]) {
-            newParams[k] = searchData[k];
-            if (oldState[k] !== searchData[k]) {
-              changed = true;
-            }
-          }
-        });
-
-      if (changed) {
-        history.push({
-          search: qs.stringify(newParams),
-        });
-      }
-    },
-    [history, oldState, location.search],
-  );
-
-  return [current, setSearchData];
-};
-
-/**
- * A hook to make it possible to switch disable mirroring the search block
- * state to the window location. When using the internal state we "start from
- * scratch", as it's intended to be used in the edit page.
- */
-const useSearchBlockState = (uniqueId, isEditMode) => {
-  const [hashState, setHashState] = useHashState();
-  const [internalState, setInternalState] = React.useState({});
-
-  return isEditMode
-    ? [internalState, setInternalState]
-    : [hashState, setHashState];
-};
-
-// Simple compress/decompress the state in URL by replacing the lengthy string
-const deserializeQuery = (q) => {
-  return JSON.parse(q)?.map((kvp) => ({
-    ...kvp,
-    o: kvp.o.replace(/^paqo/, PAQO),
-  }));
-};
-const serializeQuery = (q) => {
-  return JSON.stringify(
-    q?.map((kvp) => ({ ...kvp, o: kvp.o.replace(PAQO, 'paqo') })),
-  );
-};
-
-const withSearch = (options) => (WrappedComponent) => {
-  const { inputDelay = 1000 } = options || {};
-
-  function WithSearch(props) {
-    const { data, id, editable = false } = props;
-
-    const [locationSearchData, setLocationSearchData] = useSearchBlockState(
-      id,
-      editable,
-    );
-
-    // TODO: Improve the hook dependencies out of the scope of https://github.com/plone/volto/pull/4662
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const urlQuery = locationSearchData.query
-      ? deserializeQuery(locationSearchData.query)
-      : [];
-    const urlSearchText =
-      locationSearchData.SearchableText ||
-      urlQuery.find(({ i }) => i === 'SearchableText')?.v ||
-      '';
-
-    // TODO: refactor, should use only useLocationStateManager()!!!
-    const [searchText, setSearchText] = React.useState(urlSearchText);
-    // TODO: Improve the hook dependencies out of the scope of https://github.com/plone/volto/pull/4662
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const configuredFacets =
-      data.facets?.map((facet) => facet?.field?.value) || [];
-
-    // Here we are getting the initial value of the facet if Listing Query contains the same criteria as
-    // facet.
-    const queryData = data?.query?.query
-      ? deserializeQuery(JSON.stringify(data?.query?.query))
-      : [];
-
-    let intializeFacetWithQueryValue = [];
-
-    for (let value of configuredFacets) {
-      const queryString = queryData.find((item) => item.i === value);
-      if (queryString) {
-        intializeFacetWithQueryValue = [
-          ...intializeFacetWithQueryValue,
-          { [queryString.i]: queryString.v },
-        ];
-      }
-    }
-
-    const multiFacets = data.facets
-      ?.filter((facet) => facet?.multiple)
-      .map((facet) => facet?.field?.value);
-    const [facets, setFacets] = React.useState(
-      Object.assign(
-        {},
-        ...urlQuery.map(({ i, v }) => ({ [i]: v })),
-        // TODO: the 'o' should be kept. This would be a major refactoring of the facets
-        ...intializeFacetWithQueryValue,
-        // support for simple filters like ?Subject=something
-        // TODO: since the move to hash params this is no longer working.
-        // We'd have to treat the location.search and manage it just like the
-        // hash, to support it. We can read it, but we'd have to reset it as
-        // well, so at that point what's the difference to the hash?
-        ...configuredFacets.map((f) =>
-          locationSearchData[f]
-            ? {
-                [f]:
-                  multiFacets.indexOf(f) > -1
-                    ? [locationSearchData[f]]
-                    : locationSearchData[f],
-              }
-            : {},
-        ),
-      ),
-    );
-    const previousUrlQuery = usePrevious(urlQuery);
-
-    // During first render the previousUrlQuery is undefined and urlQuery
-    // is empty so it ressetting the facet when you are navigating but during reload we have urlQuery and we need
-    // to set the facet at first render.
-    const preventOverrideOfFacetState =
-      previousUrlQuery === undefined && urlQuery.length === 0;
-
-    React.useEffect(() => {
-      if (
-        !isEqual(urlQuery, previousUrlQuery) &&
-        !preventOverrideOfFacetState
-      ) {
-        setFacets(
-          Object.assign(
-            {},
-            ...urlQuery.map(({ i, v }) => ({ [i]: v })), // TODO: the 'o' should be kept. This would be a major refactoring of the facets
-
-            // support for simple filters like ?Subject=something
-            // TODO: since the move to hash params this is no longer working.
-            // We'd have to treat the location.search and manage it just like the
-            // hash, to support it. We can read it, but we'd have to reset it as
-            // well, so at that point what's the difference to the hash?
-            ...configuredFacets.map((f) =>
-              locationSearchData[f]
-                ? {
-                    [f]:
-                      multiFacets.indexOf(f) > -1
-                        ? [locationSearchData[f]]
-                        : locationSearchData[f],
-                  }
-                : {},
-            ),
-          ),
-        );
-      }
-    }, [
-      urlQuery,
-      configuredFacets,
-      locationSearchData,
-      multiFacets,
-      previousUrlQuery,
-      preventOverrideOfFacetState,
-    ]);
-
-    const [sortOn, setSortOn] = React.useState(data?.query?.sort_on);
-    const [sortOrder, setSortOrder] = React.useState(data?.query?.sort_order);
-
-    const [searchData, setSearchData] = React.useState(
-      getInitialState(data, facets, urlSearchText, id),
-    );
-
-    const deepFacets = JSON.stringify(facets);
-    const deepData = JSON.stringify(data);
-    React.useEffect(() => {
-      setSearchData(
-        getInitialState(
-          JSON.parse(deepData),
-          JSON.parse(deepFacets),
-          urlSearchText,
-          id,
-          sortOn,
-          sortOrder,
-        ),
-      );
-    }, [deepData, deepFacets, urlSearchText, id, sortOn, sortOrder]);
-
-    const timeoutRef = React.useRef();
-    const facetSettings = data?.facets;
-
-    const deepQuery = JSON.stringify(data.query);
-    const onTriggerSearch = React.useCallback(
-      (
-        toSearchText = undefined,
-        toSearchFacets = undefined,
-        toSortOn = undefined,
-        toSortOrder = undefined,
-      ) => {
-        if (timeoutRef.current) clearTimeout(timeoutRef.current);
-        timeoutRef.current = setTimeout(
-          () => {
-            const newSearchData = normalizeState({
-              id,
-              query: data.query || {},
-              facets: toSearchFacets || facets,
-              searchText: toSearchText ? toSearchText.trim() : '',
-              sortOn: toSortOn || undefined,
-              sortOrder: toSortOrder || sortOrder,
-              facetSettings,
-            });
-            if (toSearchFacets) setFacets(toSearchFacets);
-            if (toSortOn) setSortOn(toSortOn || undefined);
-            if (toSortOrder) setSortOrder(toSortOrder);
-            setSearchData(newSearchData);
-            setLocationSearchData(getSearchFields(newSearchData));
-          },
-          toSearchFacets ? inputDelay / 3 : inputDelay,
-        );
-      },
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [
-        // Use deep comparison of data.query
-        deepQuery,
-        facets,
-        id,
-        setLocationSearchData,
-        searchText,
-        sortOn,
-        sortOrder,
-        facetSettings,
-      ],
-    );
-
-    const removeSearchQuery = () => {
-      let newSearchData = { ...searchData };
-      newSearchData.query = searchData.query.reduce(
-        // Remove SearchableText from query
-        (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
-        [],
-      );
-      setSearchData(newSearchData);
-      setLocationSearchData(getSearchFields(newSearchData));
-    };
-
-    const querystringResults = useSelector(
-      (state) => state.querystringsearch.subrequests,
-    );
-    const totalItems =
-      querystringResults[id]?.total || querystringResults[id]?.items?.length;
-
-    return (
-      <WrappedComponent
-        {...props}
-        searchData={searchData}
-        facets={facets}
-        setFacets={setFacets}
-        setSortOn={setSortOn}
-        setSortOrder={setSortOrder}
-        sortOn={sortOn}
-        sortOrder={sortOrder}
-        searchedText={urlSearchText}
-        searchText={searchText}
-        removeSearchQuery={removeSearchQuery}
-        setSearchText={setSearchText}
-        onTriggerSearch={onTriggerSearch}
-        totalItems={totalItems}
-      />
-    );
-  }
-  WithSearch.displayName = `WithSearch(${getDisplayName(WrappedComponent)})`;
-
-  return WithSearch;
-};
-
-export default withSearch;