@plone/volto 17.0.0-alpha.26 → 17.0.0-alpha.28

package/src/components/manage/Blocks/Block/Settings.test.jsx

@@ -8,23 +8,25 @@ import { Provider } from 'react-intl-redux';
 
 const mockStore = configureStore();
 
-const withStateManagement = (Component) => ({ ...props }) => {
-  const [formData, onChangeFormData] = React.useState(props.formData || {});
-  const onChangeField = (id, value) => {
-    onChangeFormData({ ...formData, [id]: value });
-  };
+const withStateManagement =
+  (Component) =>
+  ({ ...props }) => {
+    const [formData, onChangeFormData] = React.useState(props.formData || {});
+    const onChangeField = (id, value) => {
+      onChangeFormData({ ...formData, [id]: value });
+    };
 
-  // NOTE: onChangeBlock here is not "really" implemented
+    // NOTE: onChangeBlock here is not "really" implemented
 
-  return (
-    <Component
-      {...props}
-      onChangeField={onChangeField}
-      onChangeBlock={(block, data) => onChangeFormData(data)}
-      formData={formData}
-    />
-  );
-};
+    return (
+      <Component
+        {...props}
+        onChangeField={onChangeField}
+        onChangeBlock={(block, data) => onChangeFormData(data)}
+        formData={formData}
+      />
+    );
+  };
 
 beforeAll(() => {
   config.widgets = {

package/src/components/manage/Blocks/HTML/Edit.jsx

@@ -149,14 +149,14 @@ class Edit extends Component {
    * @method onPreview
    * @returns {undefined}
    */
-  onPreview() {
+  async onPreview() {
     try {
-      const code = this.props.prettierStandalone
-        .format(this.getValue(), {
+      const code = (
+        await this.props.prettierStandalone.format(this.getValue(), {
           parser: 'html',
           plugins: [this.props.prettierParserHtml],
         })
-        .trim();
+      ).trim();
       this.setState(
         {
           isPreview: !this.state.isPreview,
@@ -174,14 +174,14 @@ class Edit extends Component {
    * @method onPrettify
    * @returns {undefined}
    */
-  onPrettify = () => {
+  onPrettify = async () => {
     try {
-      const code = this.props.prettierStandalone
-        .format(this.getValue(), {
+      const code = (
+        await this.props.prettierStandalone.format(this.getValue(), {
           parser: 'html',
           plugins: [this.props.prettierParserHtml],
         })
-        .trim();
+      ).trim();
       this.onChangeCode(code);
     } catch (ex) {
       // error while parsing the user-typed HTML

package/src/components/manage/Blocks/HeroImageLeft/Edit.jsx

@@ -126,9 +126,8 @@ class EditComponent extends Component {
         },
       });
 
-      this.extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(
-        blockTitleRenderMap,
-      );
+      this.extendedBlockRenderMap =
+        DefaultDraftBlockRenderMap.merge(blockTitleRenderMap);
 
       this.extendedDescripBlockRenderMap = DefaultDraftBlockRenderMap.merge(
         blockDescriptionRenderMap,
@@ -321,24 +320,26 @@ class EditComponent extends Component {
           selected: this.props.selected,
         })}
       >
-        {this.props.selected && this.props.editable && !!this.props.data.url && (
-          <div className="toolbar">
-            <Button.Group>
-              <Button
-                icon
-                basic
-                onClick={() =>
-                  this.props.onChangeBlock(this.props.block, {
-                    ...this.props.data,
-                    url: '',
-                  })
-                }
-              >
-                <Icon name={clearSVG} size="24px" color="#e40166" />
-              </Button>
-            </Button.Group>
-          </div>
-        )}
+        {this.props.selected &&
+          this.props.editable &&
+          !!this.props.data.url && (
+            <div className="toolbar">
+              <Button.Group>
+                <Button
+                  icon
+                  basic
+                  onClick={() =>
+                    this.props.onChangeBlock(this.props.block, {
+                      ...this.props.data,
+                      url: '',
+                    })
+                  }
+                >
+                  <Icon name={clearSVG} size="24px" color="#e40166" />
+                </Button>
+              </Button.Group>
+            </div>
+          )}
         <div className="block-inner-wrapper">
           {this.props.data.url ? (
             <img
@@ -391,7 +392,8 @@ class EditComponent extends Component {
                 placeholder={this.props.intl.formatMessage(messages.title)}
                 blockStyleFn={() => 'title-editor'}
                 onUpArrow={() => {
-                  const selectionState = this.state.titleEditorState.getSelection();
+                  const selectionState =
+                    this.state.titleEditorState.getSelection();
                   const { titleEditorState } = this.state;
                   if (
                     titleEditorState
@@ -407,7 +409,8 @@ class EditComponent extends Component {
                   }
                 }}
                 onDownArrow={() => {
-                  const selectionState = this.state.titleEditorState.getSelection();
+                  const selectionState =
+                    this.state.titleEditorState.getSelection();
                   const { titleEditorState } = this.state;
                   if (
                     titleEditorState
@@ -435,7 +438,8 @@ class EditComponent extends Component {
                 )}
                 blockStyleFn={() => 'description-editor'}
                 onUpArrow={() => {
-                  const selectionState = this.state.descriptionEditorState.getSelection();
+                  const selectionState =
+                    this.state.descriptionEditorState.getSelection();
                   const currentCursorPosition = selectionState.getStartOffset();
 
                   if (currentCursorPosition === 0) {
@@ -444,7 +448,8 @@ class EditComponent extends Component {
                   }
                 }}
                 onDownArrow={() => {
-                  const selectionState = this.state.descriptionEditorState.getSelection();
+                  const selectionState =
+                    this.state.descriptionEditorState.getSelection();
                   const { descriptionEditorState } = this.state;
                   const currentCursorPosition = selectionState.getStartOffset();
                   const blockLength = descriptionEditorState

package/src/components/manage/Blocks/Listing/ListingBody.jsx

@@ -7,17 +7,19 @@ import { Icon } from '@plone/volto/components';
 import { renderLinkElement } from '@plone/volto-slate/editor/render';
 import config from '@plone/volto/registry';
 import withQuerystringResults from './withQuerystringResults';
+import { normalizeString } from '@plone/volto/helpers';
 
 import paginationLeftSVG from '@plone/volto/icons/left-key.svg';
 import paginationRightSVG from '@plone/volto/icons/right-key.svg';
 
 const Headline = ({ headlineTag, id, data = {}, listingItems, isEditMode }) => {
   let attr = { id };
-  const slug = Slugger.slug(data.headline);
+  const slug = Slugger.slug(normalizeString(data.headline));
   attr.id = slug || id;
-  const LinkedHeadline = useMemo(() => renderLinkElement(headlineTag), [
-    headlineTag,
-  ]);
+  const LinkedHeadline = useMemo(
+    () => renderLinkElement(headlineTag),
+    [headlineTag],
+  );
   return (
     <LinkedHeadline
       mode={!isEditMode && 'view'}

package/src/components/manage/Blocks/Maps/Edit.test.jsx

@@ -40,8 +40,7 @@ test('renders an edit map block component', () => {
       <Edit
         data={{
           '@type': 'maps',
-          url:
-            'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7835278268726!2d14.38842915203974!3d40.634655679238854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x133b994881d943cb%3A0x6ab93db57d3272f0!2sHotel+Mediterraneo+Sorrento!5e0!3m2!1sen!2ses!4v1550168740166',
+          url: 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7835278268726!2d14.38842915203974!3d40.634655679238854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x133b994881d943cb%3A0x6ab93db57d3272f0!2sHotel+Mediterraneo+Sorrento!5e0!3m2!1sen!2ses!4v1550168740166',
         }}
         selected={false}
         block="1234"

package/src/components/manage/Blocks/Maps/View.test.jsx

@@ -36,8 +36,7 @@ test('renders a view map component', () => {
       <View
         data={{
           '@type': 'maps',
-          url:
-            'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7835278268726!2d14.38842915203974!3d40.634655679238854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x133b994881d943cb%3A0x6ab93db57d3272f0!2sHotel+Mediterraneo+Sorrento!5e0!3m2!1sen!2ses!4v1550168740166',
+          url: 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7835278268726!2d14.38842915203974!3d40.634655679238854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x133b994881d943cb%3A0x6ab93db57d3272f0!2sHotel+Mediterraneo+Sorrento!5e0!3m2!1sen!2ses!4v1550168740166',
         }}
       />
     </Provider>,

package/src/components/manage/Blocks/Search/components/Facets.jsx

@@ -103,9 +103,8 @@ const Facets = (props) => {
 
           let value = stateToValue({ facetSettings, index, selectedValue });
 
-          const {
-            rewriteOptions = (name, options) => options,
-          } = search.extensions.facetWidgets;
+          const { rewriteOptions = (name, options) => options } =
+            search.extensions.facetWidgets;
 
           return FacetWrapper && (isEditMode || showFacet(index)) ? (
             <FacetWrapper

package/src/components/manage/Blocks/Search/components/FilterList.jsx

@@ -36,9 +36,8 @@ const FilterList = (props) => {
       !isEmpty(facets[field.value]),
   ).length;
 
-  const {
-    types: facetWidgetTypes,
-  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
+  const { types: facetWidgetTypes } =
+    config.blocks.blocksConfig.search.extensions.facetWidgets;
 
   const intl = useIntl();
 
@@ -70,9 +69,8 @@ const FilterList = (props) => {
       <Accordion.Content className="filter-list-content" active={isOpened}>
         <div className="filter-list">
           {data.facets?.map((facetSettings, i) => {
-            const {
-              filterListComponent: FilterListComponent,
-            } = resolveExtension('type', facetWidgetTypes, facetSettings);
+            const { filterListComponent: FilterListComponent } =
+              resolveExtension('type', facetWidgetTypes, facetSettings);
             const facet = facetSettings?.field?.value;
             if (!facet) return null;
 

package/src/components/manage/Blocks/Search/components/SelectFacet.jsx

@@ -13,15 +13,8 @@ import {
 } from './base';
 
 const SelectFacet = (props) => {
-  const {
-    facet,
-    choices,
-    reactSelect,
-    isMulti,
-    onChange,
-    value,
-    isEditMode,
-  } = props;
+  const { facet, choices, reactSelect, isMulti, onChange, value, isEditMode } =
+    props;
   const Select = reactSelect.default;
   const v = Array.isArray(value) && value.length === 0 ? null : value;
 

package/src/components/manage/Blocks/Search/hocs/withQueryString.jsx

@@ -15,6 +15,9 @@ export default function withQueryString(WrappedComponent) {
     const dispatch = useDispatch();
 
     const qs = useSelector((state) => state.querystring);
+    // This showed up after updating eslint-plugin-react-hooks
+    // TODO: fix it properly
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const indexes = qs?.indexes || {};
 
     React.useEffect(() => {

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

@@ -29,9 +29,8 @@ const PAQO = 'plone.app.querystring.operation';
  *
  */
 function getInitialState(data, facets, urlSearchText, id) {
-  const {
-    types: facetWidgetTypes,
-  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
+  const { types: facetWidgetTypes } =
+    config.blocks.blocksConfig.search.extensions.facetWidgets;
   const facetSettings = data?.facets || [];
 
   return {
@@ -87,9 +86,8 @@ function normalizeState({
   sortOrder,
   facetSettings, // data.facets extracted from block data
 }) {
-  const {
-    types: facetWidgetTypes,
-  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
+  const { types: facetWidgetTypes } =
+    config.blocks.blocksConfig.search.extensions.facetWidgets;
 
   const params = {
     query: [
@@ -240,6 +238,8 @@ const withSearch = (options) => (WrappedComponent) => {
       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)
       : [];
@@ -250,6 +250,8 @@ const withSearch = (options) => (WrappedComponent) => {
 
     // 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) || [];
     const multiFacets = data.facets

package/src/components/manage/Blocks/Search/schema.js

@@ -37,8 +37,7 @@ const messages = defineMessages({
     defaultMessage: 'Show search button?',
   },
   showSearchButtonDescription: {
-    id:
-      'The button presence disables the live search, the query is issued when you press ENTER',
+    id: 'The button presence disables the live search, the query is issued when you press ENTER',
     defaultMessage:
       'The button presence disables the live search, the query is issued when you press ENTER',
   },
@@ -83,8 +82,7 @@ const messages = defineMessages({
     defaultMessage: 'Hide facet?',
   },
   hideFacetDescription: {
-    id:
-      'Hidden facets will still filter the results if proper parameters are passed in URLs',
+    id: 'Hidden facets will still filter the results if proper parameters are passed in URLs',
     defaultMessage:
       'Hidden facets will still filter the results if proper parameters are passed in URLs',
   },
@@ -187,15 +185,17 @@ const FacetSchema = ({ intl }) => ({
     },
     type: {
       title: intl.formatMessage(messages.facetWidget),
-      choices: config.blocks.blocksConfig.search.extensions.facetWidgets.types.map(
-        ({ id, title }) => [
-          id,
-          `${intl.formatMessage({ id: id, defaultMessage: title })}`,
-        ],
-      ),
-      defaultValue: config.blocks.blocksConfig.search.extensions.facetWidgets.types.find(
-        ({ isDefault }) => isDefault,
-      ).id,
+      choices:
+        config.blocks.blocksConfig.search.extensions.facetWidgets.types.map(
+          ({ id, title }) => [
+            id,
+            `${intl.formatMessage({ id: id, defaultMessage: title })}`,
+          ],
+        ),
+      defaultValue:
+        config.blocks.blocksConfig.search.extensions.facetWidgets.types.find(
+          ({ isDefault }) => isDefault,
+        ).id,
     },
   },
   required: ['field'],

package/src/components/manage/Blocks/Table/Cell.jsx

@@ -157,9 +157,8 @@ class CellComponent extends Component {
               const selectionState = this.state.editorState.getSelection();
               const anchorKey = selectionState.getAnchorKey();
               const currentContent = this.state.editorState.getCurrentContent();
-              const currentContentBlock = currentContent.getBlockForKey(
-                anchorKey,
-              );
+              const currentContentBlock =
+                currentContent.getBlockForKey(anchorKey);
               const blockType = currentContentBlock.getType();
               if (!includes(this.draftConfig.listBlockTypes, blockType)) {
                 this.props.onSelectBlock(

package/src/components/manage/Blocks/Text/Edit.jsx

@@ -275,9 +275,8 @@ export class EditComponent extends Component {
               const selectionState = this.state.editorState.getSelection();
               const anchorKey = selectionState.getAnchorKey();
               const currentContent = this.state.editorState.getCurrentContent();
-              const currentContentBlock = currentContent.getBlockForKey(
-                anchorKey,
-              );
+              const currentContentBlock =
+                currentContent.getBlockForKey(anchorKey);
               const blockType = currentContentBlock.getType();
               if (!includes(this.draftConfig.listBlockTypes, blockType)) {
                 this.props.onSelectBlock(

package/src/components/manage/Blocks/Title/View.jsx

@@ -1,42 +1,9 @@
-/**
- * View title/description block.
- * @module volto-slate/blocks/Title/TitleBlockView
- */
-
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import Slugger from 'github-slugger';
-import { renderLinkElement } from '@plone/volto-slate/editor/render';
-
-/**
- * View title block component.
- * @class View
- * @extends Component
- */
-const TitleBlockView = ({ properties, metadata, id, children }) => {
-  let attr = { id };
-  const title = (properties || metadata)['title'];
-  const slug = Slugger.slug(title);
-  attr.id = slug || id;
-  const LinkedTitle = useMemo(() => renderLinkElement('h1'), []);
+const TitleBlockView = ({ properties, metadata }) => {
   return (
-    <LinkedTitle
-      mode="view"
-      children={title ?? children}
-      attributes={attr}
-      className={'documentFirstHeading'}
-    />
+    <h1 className="documentFirstHeading">
+      {(metadata || properties)['title'] || ''}
+    </h1>
   );
 };
 
-/**
- * Property types.
- * @property {Object} propTypes Property types.
- * @static
- */
-TitleBlockView.propTypes = {
-  properties: PropTypes.objectOf(PropTypes.any).isRequired,
-  metadata: PropTypes.objectOf(PropTypes.any),
-};
-
 export default TitleBlockView;

package/src/components/manage/Blocks/ToC/View.jsx

@@ -119,6 +119,7 @@ const View = (props) => {
         const level = entry[0];
         const title = entry[1];
         const items = [];
+        if (!title?.trim() && !block.plaintext?.trim()) return;
         if (!level || !levels.includes(level)) return;
         tocEntriesLayout.push(id);
         tocEntries[id] = {

package/src/components/manage/Blocks/ToC/variations/DefaultTocRenderer.jsx

@@ -10,13 +10,14 @@ import { List } from 'semantic-ui-react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import Slugger from 'github-slugger';
 import { UniversalLink } from '@plone/volto/components';
+import { normalizeString } from '@plone/volto/helpers';
 
 const RenderListItems = ({ items, data }) => {
   return map(items, (item) => {
     const { id, level, title, override_toc, plaintext } = item;
     const slug = override_toc
-      ? Slugger.slug(plaintext)
-      : Slugger.slug(title) || id;
+      ? Slugger.slug(normalizeString(plaintext))
+      : Slugger.slug(normalizeString(title)) || id;
     return (
       item && (
         <List.Item key={id} className={`item headline-${level}`} as="li">

package/src/components/manage/Blocks/ToC/variations/HorizontalMenu.jsx

@@ -5,13 +5,14 @@ import { Menu, Dropdown } from 'semantic-ui-react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import AnchorLink from 'react-anchor-link-smooth-scroll';
 import Slugger from 'github-slugger';
+import { normalizeString } from '@plone/volto/helpers';
 
 const RenderMenuItems = ({ items }) => {
   return map(items, (item) => {
     const { id, level, title, override_toc, plaintext } = item;
     const slug = override_toc
-      ? Slugger.slug(plaintext)
-      : Slugger.slug(title) || id;
+      ? Slugger.slug(normalizeString(plaintext))
+      : Slugger.slug(normalizeString(title)) || id;
     return (
       item && (
         <React.Fragment key={id}>