@plone/volto 17.0.0-alpha.3 → 17.0.0-alpha.30

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,11 +82,19 @@ 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',
   },
+  advancedFacetTitle: {
+    id: 'Advanced facet?',
+    defaultMessage: 'Advanced facet?',
+  },
+  advancedFacetDescription: {
+    id: 'Advanced facets are initially hidden and displayed on demand',
+    defaultMessage:
+      'Advanced facets are initially hidden and displayed on demand',
+  },
   facetWidget: {
     id: 'Facet widget',
     defaultMessage: 'Facet widget',
@@ -131,7 +138,7 @@ const FacetSchema = ({ intl }) => ({
     {
       id: 'default',
       title: 'Default',
-      fields: ['title', 'field', 'type', 'hidden'],
+      fields: ['title', 'field', 'type', 'hidden', 'advanced'],
     },
   ],
   properties: {
@@ -170,17 +177,25 @@ const FacetSchema = ({ intl }) => ({
       default: false,
       description: intl.formatMessage(messages.hideFacetDescription),
     },
+    advanced: {
+      type: 'boolean',
+      title: intl.formatMessage(messages.advancedFacetTitle),
+      default: false,
+      description: intl.formatMessage(messages.advancedFacetDescription),
+    },
     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/Teaser/Body.jsx

@@ -24,7 +24,6 @@ const TeaserBody = (props) => {
 TeaserBody.propTypes = {
   data: PropTypes.objectOf(PropTypes.any).isRequired,
   isEditMode: PropTypes.bool,
-  variation: PropTypes.string,
 };
 
 export default TeaserBody;

package/src/components/manage/Blocks/Teaser/DefaultBody.jsx

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import { Message } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
-import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
-import { getTeaserImageURL } from './utils';
+import { isInternalURL } from '@plone/volto/helpers';
 import { MaybeWrap } from '@plone/volto/components';
 import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
@@ -18,20 +17,14 @@ const messages = defineMessages({
   },
 });
 
-const DefaultImage = (props) => <img {...props} alt={props.alt || ''} />;
-
 const TeaserDefaultTemplate = (props) => {
   const { className, data, isEditMode } = props;
   const intl = useIntl();
   const href = data.href?.[0];
   const image = data.preview_image?.[0];
-  const align = data?.styles?.align;
 
-  const hasImageComponent = config.getComponent('Image').component;
-  const Image = config.getComponent('Image').component || DefaultImage;
+  const Image = config.getComponent('Image').component;
   const { openExternalLinkInNewTab } = config.settings;
-  const defaultImageSrc =
-    href && flattenToAppURL(getTeaserImageURL({ href, image, align }));
 
   return (
     <div className={cx('block teaser', className)}>
@@ -60,9 +53,11 @@ const TeaserDefaultTemplate = (props) => {
               {(href.hasPreviewImage || href.image_field || image) && (
                 <div className="image-wrapper">
                   <Image
-                    src={hasImageComponent ? href : defaultImageSrc}
+                    item={image || href}
+                    imageField={image ? image.image_field : href.image_field}
                     alt=""
                     loading="lazy"
+                    responsive={true}
                   />
                 </div>
               )}

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

@@ -101,3 +101,8 @@ export const TeaserSchema = ({ intl }) => {
 
   return schema;
 };
+
+export const gridTeaserDisableStylingSchema = ({ schema, formData, intl }) => {
+  schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'styling');
+  return schema;
+};

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,16 +1,3 @@
-/**
- * View title/description block.
- * @module volto-slate/blocks/Title/TitleBlockView
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/**
- * View title block component.
- * @class View
- * @extends Component
- */
 const TitleBlockView = ({ properties, metadata }) => {
   return (
     <h1 className="documentFirstHeading">
@@ -19,14 +6,4 @@ const TitleBlockView = ({ properties, metadata }) => {
   );
 };
 
-/**
- * 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/Title/View.test.jsx

@@ -1,10 +1,25 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { MemoryRouter } from 'react-router-dom';
 import View from './View';
 
+const mockStore = configureStore();
+
 test('renders a view title component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
   const component = renderer.create(
-    <View properties={{ title: 'My Title' }} />,
+    <Provider store={store}>
+      <MemoryRouter>
+        <View properties={{ title: 'My Title' }} id="a123" />
+      </MemoryRouter>
+    </Provider>,
   );
   const json = component.toJSON();
   expect(json).toMatchSnapshot();

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

@@ -1,8 +1,37 @@
-const TableOfContentsSchema = ({ data }) => {
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  toc: {
+    id: 'toc',
+    defaultMessage: 'Table of Contents',
+  },
+  Title: {
+    id: 'Title',
+    defaultMessage: 'Title',
+  },
+  HideTitle: {
+    id: 'Hide title',
+    defaultMessage: 'Hide title',
+  },
+  Entries: {
+    id: 'Entries',
+    defaultMessage: 'Entries',
+  },
+  Ordered: {
+    id: 'Ordered',
+    defaultMessage: 'Ordered',
+  },
+  Sticky: {
+    id: 'Sticky',
+    defaultMessage: 'Sticky',
+  },
+});
+
+const TableOfContentsSchema = ({ data, intl }) => {
   const { variation = 'default' } = data;
 
   return {
-    title: 'Table of Contents',
+    title: intl.formatMessage(messages.toc),
     fieldsets: [
       {
         id: 'default',
@@ -10,21 +39,21 @@ const TableOfContentsSchema = ({ data }) => {
         fields: [
           'title',
           'hide_title',
-          ...(variation === 'default' ? ['ordered'] : []),
+          ...(variation === 'default' ? ['ordered'] : ['sticky']),
           'levels',
         ],
       },
     ],
     properties: {
       title: {
-        title: 'Block title',
+        title: intl.formatMessage(messages.Title),
       },
       hide_title: {
-        title: 'Hide title',
+        title: intl.formatMessage(messages.HideTitle),
         type: 'boolean',
       },
       levels: {
-        title: 'Entries',
+        title: intl.formatMessage(messages.Entries),
         isMulti: true,
         choices: [
           ['h1', 'h1'],
@@ -36,7 +65,11 @@ const TableOfContentsSchema = ({ data }) => {
         ],
       },
       ordered: {
-        title: 'Ordered',
+        title: intl.formatMessage(messages.Ordered),
+        type: 'boolean',
+      },
+      sticky: {
+        title: intl.formatMessage(messages.Sticky),
         type: 'boolean',
       },
     },

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

@@ -16,16 +16,79 @@ import {
   getBlocksLayoutFieldname,
 } from '@plone/volto/helpers';
 
+export const getBlocksTocEntries = (properties, tocData) => {
+  const blocksFieldName = getBlocksFieldname(properties);
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
+
+  const blocks = properties[blocksFieldName];
+  const blocks_layout = properties[blocksLayoutFieldname];
+
+  const levels =
+    tocData.levels?.length > 0
+      ? tocData.levels.map((l) => parseInt(l.slice(1)))
+      : [1, 2, 3, 4, 5, 6];
+  let rootLevel = Infinity;
+  let blocksFormEntries = [];
+  let tocEntries = {};
+  let tocEntriesLayout = [];
+
+  blocks_layout.items.forEach((id) => {
+    const block = blocks[id];
+    const blockConfig = config.blocks.blocksConfig[block['@type']];
+
+    if (!block || !blockConfig) {
+      return null;
+    }
+    if (!blockConfig.tocEntries && !blockConfig.tocEntry) {
+      return null;
+    }
+
+    const blockTocEntry = blockConfig.tocEntry?.(block, tocData);
+
+    const blockTocEntries = [
+      ...(blockConfig.tocEntries?.(block, tocData) ||
+        (blockTocEntry ? [blockTocEntry] : [])),
+    ];
+
+    blocksFormEntries = [...blocksFormEntries, ...blockTocEntries];
+
+    blockTocEntries.forEach((entry, index) => {
+      const i = `${id}-${index}`;
+      const level = entry[0];
+      const title = entry[1];
+      const items = [];
+      if (!level || !levels.includes(level)) return;
+      tocEntriesLayout.push(i);
+      tocEntries[i] = {
+        level,
+        title: title || block.plaintext,
+        items,
+        id: i,
+      };
+      if (level < rootLevel) {
+        rootLevel = level;
+      }
+    });
+  });
+
+  return {
+    rootLevel,
+    blocksFormEntries,
+    tocEntries,
+    tocEntriesLayout,
+  };
+};
+
 /**
  * View toc block class.
  * @class View
  * @extends Component
  */
 const View = (props) => {
-  const { properties, data } = props;
+  const { data } = props;
   const { variation } = props;
-  const blocksFieldname = getBlocksFieldname(properties);
-  const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
+  const metadata = props.metadata || props.properties;
+  const blocksFieldname = getBlocksFieldname(metadata);
   const levels = React.useMemo(
     () =>
       data.levels?.length > 0
@@ -34,14 +97,15 @@ const View = (props) => {
     [data],
   );
   const tocEntries = React.useMemo(() => {
-    let rootLevel = Infinity;
     let entries = [];
     let prevEntry = {};
-    let tocEntries = {};
-    let tocEntriesLayout = [];
+    const { rootLevel, tocEntries, tocEntriesLayout } = getBlocksTocEntries(
+      metadata,
+      data,
+    );
 
-    properties[blocksLayoutFieldname].items.forEach((id) => {
-      const block = properties[blocksFieldname][id];
+    tocEntriesLayout.forEach((id) => {
+      const block = metadata[blocksFieldname][id];
       if (typeof block === 'undefined') {
         return null;
       }
@@ -50,16 +114,22 @@ const View = (props) => {
         block,
         data,
       );
+
       if (entry) {
         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] = { level, title: title || block.plaintext, items, id };
-        if (level < rootLevel) {
-          rootLevel = level;
-        }
+        tocEntries[id] = {
+          level,
+          title: title || block.plaintext,
+          items,
+          id,
+          override_toc: block.override_toc,
+          plaintext: block.plaintext,
+        };
       }
     });
 
@@ -91,7 +161,7 @@ const View = (props) => {
     });
 
     return entries;
-  }, [data, levels, properties, blocksFieldname, blocksLayoutFieldname]);
+  }, [data, levels, metadata, blocksFieldname]);
 
   const Renderer = variation?.view;
   return (
@@ -101,7 +171,7 @@ const View = (props) => {
       )}
 
       {Renderer ? (
-        <Renderer {...props} tocEntries={tocEntries} properties={properties} />
+        <Renderer {...props} tocEntries={tocEntries} metadata={metadata} />
       ) : (
         <div>View extension not found</div>
       )}

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

@@ -8,15 +8,20 @@ import PropTypes from 'prop-types';
 import { map } from 'lodash';
 import { List } from 'semantic-ui-react';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import AnchorLink from 'react-anchor-link-smooth-scroll';
+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 } = item;
+    const { id, level, title, override_toc, plaintext } = item;
+    const slug = override_toc
+      ? Slugger.slug(normalizeString(plaintext))
+      : Slugger.slug(normalizeString(title)) || id;
     return (
       item && (
         <List.Item key={id} className={`item headline-${level}`} as="li">
-          <AnchorLink href={`#${id}`}>{title}</AnchorLink>
+          <UniversalLink href={`#${slug}`}>{title}</UniversalLink>
           {item.items?.length > 0 && (
             <List
               ordered={data.ordered}

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

@@ -0,0 +1,44 @@
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { MemoryRouter } from 'react-router-dom';
+import DefaultTocRenderer from './DefaultTocRenderer';
+
+const mockStore = configureStore();
+
+const data = { '@type': 'toc', variation: 'default' };
+
+const tocEntries = [
+  {
+    level: 2,
+    title: 'Hello this is a sample page',
+    items: [
+      {
+        level: 3,
+        title: 'Test level 3',
+        items: [],
+        id: 'be612682-6df9-4a5e-b3a1-9dec5d82ae14',
+        parentId: '3a8bff13-3245-44f6-8a35-e0defef5898e',
+      },
+    ],
+    id: '3a8bff13-3245-44f6-8a35-e0defef5898e',
+  },
+];
+
+test('renders a default toc renderer component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+  const component = renderer.create(
+    <Provider store={store}>
+      <MemoryRouter>
+        <DefaultTocRenderer data={data} tocEntries={tocEntries} />
+      </MemoryRouter>
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});