@eeacms/volto-eea-website-theme 1.31.0 → 1.32.1

package/CHANGELOG.md

@@ -4,6 +4,35 @@ 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.1](https://github.com/eea/volto-eea-website-theme/compare/1.32.0...1.32.1) - 26 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)]
+
+#### :bug: Bug Fixes
+
+- fix(slate): insert/remove element fix, refs #261770 [Miu Razvan - [`b121ffd`](https://github.com/eea/volto-eea-website-theme/commit/b121ffd2de5c5973f9819b949be1c83400d72edb)]
+
+#### :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
+
+- fix conflicts [Miu Razvan - [`9ad80fc`](https://github.com/eea/volto-eea-website-theme/commit/9ad80fc98a3057d96f573150456bc43b5f822782)]
+- fix conflicts [Miu Razvan - [`dee94db`](https://github.com/eea/volto-eea-website-theme/commit/dee94db33c47a2d963ea912712723768de547719)]
+- 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.32.0](https://github.com/eea/volto-eea-website-theme/compare/1.31.0...1.32.0) - 25 March 2024
+
 ### [1.31.0](https://github.com/eea/volto-eea-website-theme/compare/1.30.0...1.31.0) - 14 March 2024
 
 #### :rocket: New Features

package/README.md

@@ -27,6 +27,8 @@ See [Storybook](https://eea.github.io/eea-storybook/).
 
 ## Volto customizations
 
+- `volto-slate/elementEditor/utils` -> https://github.com/plone/volto/pull/5926
+
 - `volto-slate/editor/SlateEditor` -> When two slates looks at the same prop changing one slate and updating the other should be handled properly. This change makes replacing the old value of slate work in sync with the other slates that watches the same prop [ref](https://taskman.eionet.europa.eu/issues/264239#note-11).
 
   **!!IMPORTANT**: This change requires volto@^16.26.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.31.0",
+  "version": "1.32.1",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -79,4 +79,4 @@
     "cypress:open": "make cypress-open",
     "prepare": "husky install"
   }
-}
+}

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

@@ -0,0 +1,245 @@
+import { Editor, Transforms, Node } from 'slate';
+
+/**
+ * @description Creates or updates an existing $elementType. It also takes care
+ * of the saved selection and uses PathRef.
+ *
+ * @param {Editor} editor The Slate editor for the context
+ * @param {object} data Relevant data for this element
+ *
+ * @returns {boolean} true if an element was possibly inserted, false otherwise
+ * (currently we do not check here if the element was already applied to the
+ * editor)
+ */
+export const _insertElement = (elementType) => (editor, data) => {
+  if (editor.getSavedSelection()) {
+    const selection = editor.selection || editor.getSavedSelection();
+
+    const rangeRef = Editor.rangeRef(editor, selection);
+
+    const res = Array.from(
+      Editor.nodes(editor, {
+        match: (n) => n.type === elementType,
+        mode: 'highest',
+        at: selection,
+      }),
+    );
+
+    if (res.length) {
+      const [, path] = res[0];
+      Transforms.setNodes(
+        editor,
+        { data },
+        {
+          at: path ? path : null,
+          match: path ? (n) => n.type === elementType : null,
+        },
+      );
+    } else {
+      Transforms.wrapNodes(
+        editor,
+        { type: elementType, data },
+        {
+          split: true,
+          at: selection,
+          match: (node) => {
+            return Node.string(node).length !== 0;
+          },
+        },
+      );
+    }
+
+    const sel = JSON.parse(JSON.stringify(rangeRef.current));
+
+    setTimeout(() => {
+      Transforms.select(editor, sel);
+      editor.setSavedSelection(sel);
+    });
+
+    return true;
+  }
+
+  return false;
+};
+
+/**
+ * Will unwrap a node that has as type the one received or one from an array.
+ * It identifies the current target element and expands the selection to it, in
+ * case the selection was just partial. This allows a "clear and reassign"
+ * operation, for example for the Link plugin.
+ *
+ * @param {string|Object[]} elementType - this can be a string or an array of strings
+ * @returns {Object|null} - current node
+ */
+export const _unwrapElement = (elementType) => (editor) => {
+  const selection = editor.selection || editor.getSavedSelection();
+  let [link] = Editor.nodes(editor, {
+    at: selection,
+    match: (node) => node?.type === elementType,
+  });
+  const isAtStart =
+    selection.anchor.offset === 0 && selection.focus.offset === 0;
+
+  if (!link && !isAtStart) return false;
+
+  if (!link) {
+    try {
+      link = Editor.previous(editor, {
+        at: selection.anchor.path,
+      });
+    } catch (ex) {
+      link = [];
+    }
+  }
+
+  const [, path] = link;
+  const [start, end] = Editor.edges(editor, path);
+  const range = { anchor: start, focus: end };
+
+  const ref = Editor.rangeRef(editor, range);
+
+  Transforms.select(editor, range);
+  Transforms.unwrapNodes(editor, {
+    match: (n) =>
+      Array.isArray(elementType)
+        ? elementType.includes(n.type)
+        : n.type === elementType,
+    at: range,
+  });
+
+  const current = ref.current;
+  ref.unref();
+
+  return current;
+};
+
+export const _isActiveElement = (elementType) => (editor) => {
+  const selection = editor.selection || editor.getSavedSelection();
+  let found;
+  try {
+    found = Array.from(
+      Editor.nodes(editor, {
+        match: (n) => n.type === elementType,
+        at: selection,
+      }) || [],
+    );
+  } catch (e) {
+    // eslint-disable-next-line
+    // console.warn('Error in finding active element', e);
+    return false;
+  }
+  if (found.length) return true;
+
+  if (selection) {
+    const { path } = selection.anchor;
+    const isAtStart =
+      selection.anchor.offset === 0 && selection.focus.offset === 0;
+
+    if (isAtStart) {
+      try {
+        found = Editor.previous(editor, {
+          at: path,
+          // match: (n) => n.type === MENTION,
+        });
+      } catch (ex) {
+        found = [];
+      }
+      if (found && found[0] && found[0].type === elementType) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+};
+
+/**
+ * Will look for a node that has as type the one received or one from an array
+ * @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;
+
+  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;
+      }
+    }
+  }
+
+  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;
+      }
+    }
+  }
+
+  return null;
+};

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;