@plone/volto 18.0.0-alpha.9 → 18.0.0

package/src/components/theme/View/View.test.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
@@ -22,17 +22,19 @@ beforeAll(() => {
   });
   config.settings.publicURL = 'https://plone.org';
 });
+global.__SERVER__ = true; // eslint-disable-line no-underscore-dangle
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
-jest.mock('../SocialSharing/SocialSharing', () =>
-  jest.fn(() => <div id="SocialSharing" />),
+jest.mock('../../manage/Toolbar/Toolbar', () =>
+  jest.fn(() => <div id="Portal" />),
 );
+
 jest.mock('../Comments/Comments', () => jest.fn(() => <div id="Comments" />));
 jest.mock('../Tags/Tags', () => jest.fn(() => <div id="Tags" />));
+jest.mock('../SlotRenderer/SlotRenderer', () =>
+  jest.fn(() => <div id="SlotRenderer" />),
+);
 jest.mock('../ContentMetadataTags/ContentMetadataTags', () =>
   jest.fn(() => <div id="ContentMetadataTags" />),
 );
@@ -147,13 +149,14 @@ describe('View', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <View location={{ pathname: '/test' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders a summary view', () => {
@@ -167,13 +170,14 @@ describe('View', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <View location={{ pathname: '/test' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders a tabular view', () => {
@@ -187,13 +191,14 @@ describe('View', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <View location={{ pathname: '/test' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders a document view', () => {
@@ -207,13 +212,14 @@ describe('View', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <View location={{ pathname: '/test' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders a new view element if the @id changed', () => {
@@ -235,16 +241,18 @@ describe('View', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { rerender } = render(
       <Provider store={store}>
         <View location={{ pathname: '/a' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
     expect(instanceCount).toBe(1);
     store.getState().content.data['@id'] = '/b';
-    component.update(
+    rerender(
       <Provider store={store}>
         <View location={{ pathname: '/b' }} />
+        <div id="toolbar"></div>
       </Provider>,
     );
     expect(instanceCount).toBe(2);

package/src/components/theme/Widgets/ArrayWidget.jsx

@@ -5,14 +5,14 @@ const ArrayWidget = ({ value, children, className }) =>
   value ? (
     <span className={cx(className, 'array', 'widget')}>
       {value.map((item, key) => (
-        <>
+        <React.Fragment key={item.token}>
           {key ? ', ' : ''}
           <span key={item.token || item.title || item}>
             {children
               ? children(item.title || item.token || item)
               : item.title || item.token || item}
           </span>
-        </>
+        </React.Fragment>
       ))}
     </span>
   ) : (

package/src/components/theme/Widgets/BooleanWidget.jsx

@@ -24,8 +24,8 @@ const BooleanWidget = ({ value, children, className, intl }) => {
               : intl.formatMessage(messages.no),
           )
         : value
-        ? intl.formatMessage(messages.yes)
-        : intl.formatMessage(messages.no)}
+          ? intl.formatMessage(messages.yes)
+          : intl.formatMessage(messages.no)}
     </span>
   ) : (
     ''

package/src/config/Blocks.jsx

@@ -1,22 +1,19 @@
 import { defineMessages } from 'react-intl';
+import { cloneDeep } from 'lodash';
 
 import ViewTitleBlock from '@plone/volto/components/manage/Blocks/Title/View';
 import ViewDescriptionBlock from '@plone/volto/components/manage/Blocks/Description/View';
 import ViewToCBlock from '@plone/volto/components/manage/Blocks/ToC/View';
-import ViewTextBlock from '@plone/volto/components/manage/Blocks/Text/View';
 import ViewImageBlock from '@plone/volto/components/manage/Blocks/Image/View';
 import ViewLeadImageBlock from '@plone/volto/components/manage/Blocks/LeadImage/View';
 import ViewListingBlock from '@plone/volto/components/manage/Blocks/Listing/View';
 import ViewVideoBlock from '@plone/volto/components/manage/Blocks/Video/View';
-import ViewHeroImageLeftBlock from '@plone/volto/components/manage/Blocks/HeroImageLeft/View';
 import ViewMapBlock from '@plone/volto/components/manage/Blocks/Maps/View';
 import ViewHTMLBlock from '@plone/volto/components/manage/Blocks/HTML/View';
-import ViewTableBlock from '@plone/volto/components/manage/Blocks/Table/View';
 
 import EditTitleBlock from '@plone/volto/components/manage/Blocks/Title/Edit';
 import EditDescriptionBlock from '@plone/volto/components/manage/Blocks/Description/Edit';
 import EditToCBlock from '@plone/volto/components/manage/Blocks/ToC/Edit';
-import EditTextBlock from '@plone/volto/components/manage/Blocks/Text/Edit';
 import EditImageBlock from '@plone/volto/components/manage/Blocks/Image/Edit';
 import EditLeadImageBlock from '@plone/volto/components/manage/Blocks/LeadImage/Edit';
 import EditListingBlock from '@plone/volto/components/manage/Blocks/Listing/Edit';
@@ -25,20 +22,15 @@ import GalleryNoResultsComponent from '@plone/volto/components/manage/Blocks/Lis
 import DefaultListingBlockTemplate from '@plone/volto/components/manage/Blocks/Listing/DefaultTemplate';
 import SummaryListingBlockTemplate from '@plone/volto/components/manage/Blocks/Listing/SummaryTemplate';
 import EditVideoBlock from '@plone/volto/components/manage/Blocks/Video/Edit';
-import EditHeroImageLeftBlock from '@plone/volto/components/manage/Blocks/HeroImageLeft/Edit';
 import EditMapBlock from '@plone/volto/components/manage/Blocks/Maps/Edit';
 import EditHTMLBlock from '@plone/volto/components/manage/Blocks/HTML/Edit';
-import EditTableBlock from '@plone/volto/components/manage/Blocks/Table/Edit';
 
 import descriptionSVG from '@plone/volto/icons/description.svg';
 import titleSVG from '@plone/volto/icons/text.svg';
-import textSVG from '@plone/volto/icons/subtext.svg';
 import cameraSVG from '@plone/volto/icons/camera.svg';
 import videoSVG from '@plone/volto/icons/videocamera.svg';
 import globeSVG from '@plone/volto/icons/globe.svg';
 import codeSVG from '@plone/volto/icons/code.svg';
-import heroSVG from '@plone/volto/icons/hero.svg';
-import tableSVG from '@plone/volto/icons/table.svg';
 import listingBlockSVG from '@plone/volto/icons/content-listing.svg';
 import tocSVG from '@plone/volto/icons/list-bullet.svg';
 import searchSVG from '@plone/volto/icons/zoom.svg';
@@ -47,7 +39,6 @@ import imagesSVG from '@plone/volto/icons/images.svg';
 
 import ImageGalleryListingBlockTemplate from '@plone/volto/components/manage/Blocks/Listing/ImageGallery';
 import BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema';
-import TextSettingsSchema from '@plone/volto/components/manage/Blocks/Text/Schema';
 import ImageSettingsSchema from '@plone/volto/components/manage/Blocks/Image/LayoutSchema';
 import ToCSettingsSchema from '@plone/volto/components/manage/Blocks/ToC/Schema';
 
@@ -79,7 +70,6 @@ import { getImageBlockSizes } from '@plone/volto/components/manage/Blocks/Image/
 import { getLeadImageBlockSizes } from '@plone/volto/components/manage/Blocks/LeadImage/utils';
 
 // block sidebar schemas (not the Dexterity Layout block settings schemas)
-import HeroImageLeftBlockSchema from '@plone/volto/components/manage/Blocks/HeroImageLeft/schema';
 import ListingBlockSchema from '@plone/volto/components/manage/Blocks/Listing/schema';
 import SearchBlockSchema from '@plone/volto/components/manage/Blocks/Search/schema';
 
@@ -191,6 +181,63 @@ defineMessages({
     id: 'toggleFacet',
     defaultMessage: 'Toggle',
   },
+  // BBB Table messages
+  Table: {
+    id: 'Table',
+    defaultMessage: 'Table',
+  },
+  cell: {
+    id: 'Cell',
+    defaultMessage: 'Cell',
+  },
+  insertRowBefore: {
+    id: 'Insert row before',
+    defaultMessage: 'Insert row before',
+  },
+  insertRowAfter: {
+    id: 'Insert row after',
+    defaultMessage: 'Insert row after',
+  },
+  deleteRow: {
+    id: 'Delete row',
+    defaultMessage: 'Delete row',
+  },
+  insertColBefore: {
+    id: 'Insert col before',
+    defaultMessage: 'Insert col before',
+  },
+  insertColAfter: {
+    id: 'Insert col after',
+    defaultMessage: 'Insert col after',
+  },
+  deleteCol: {
+    id: 'Delete col',
+    defaultMessage: 'Delete col',
+  },
+  fixed: {
+    id: 'Fixed width table cells',
+    defaultMessage: 'Fixed width columns',
+  },
+  compact: {
+    id: 'Make the table compact',
+    defaultMessage: 'Reduce cell padding',
+  },
+  basic: {
+    id: 'Reduce complexity',
+    defaultMessage: 'Minimalistic table design',
+  },
+  celled: {
+    id: 'Divide each row into separate cells',
+    defaultMessage: 'Add border to inner columns',
+  },
+  striped: {
+    id: 'Stripe alternate rows with color',
+    defaultMessage: 'Alternate row background color',
+  },
+  headerCell: {
+    id: 'Header cell',
+    defaultMessage: 'Header cell',
+  },
 });
 
 const groupBlocksOrder = [
@@ -230,25 +277,6 @@ const blocksConfig = {
     blockHasOwnFocusManagement: true,
     sidebarTab: 0,
   },
-  text: {
-    id: 'text',
-    title: 'Text',
-    icon: textSVG,
-    group: 'text',
-    view: ViewTextBlock,
-    edit: EditTextBlock,
-    schema: TextSettingsSchema,
-    restricted: false,
-    mostUsed: false,
-    blockHasOwnFocusManagement: true,
-    sidebarTab: 0,
-    blockHasValue: (data) => {
-      const isEmpty =
-        !data.text ||
-        (data.text?.blocks?.length === 1 && data.text.blocks[0].text === '');
-      return !isEmpty;
-    },
-  },
   image: {
     id: 'image',
     title: 'Image',
@@ -335,21 +363,6 @@ const blocksConfig = {
     mostUsed: false,
     sidebarTab: 1,
   },
-  hero: {
-    id: 'hero',
-    title: 'Hero',
-    icon: heroSVG,
-    group: 'common',
-    view: ViewHeroImageLeftBlock,
-    edit: EditHeroImageLeftBlock,
-    schema: BlockSettingsSchema,
-    blockSchema: HeroImageLeftBlockSchema,
-    restricted: false,
-    mostUsed: false,
-    blockHasOwnFocusManagement: true,
-    sidebarTab: 1,
-  },
-
   maps: {
     id: 'maps',
     title: 'Maps',
@@ -374,19 +387,6 @@ const blocksConfig = {
     mostUsed: false,
     sidebarTab: 0,
   },
-  table: {
-    id: 'table',
-    title: 'Table',
-    icon: tableSVG,
-    group: 'common',
-    view: ViewTableBlock,
-    edit: EditTableBlock,
-    schema: BlockSettingsSchema,
-    restricted: false,
-    mostUsed: false,
-    blockHasOwnFocusManagement: true,
-    sidebarTab: 1,
-  },
   search: {
     id: 'search',
     title: 'Search',
@@ -519,15 +519,11 @@ const blocksConfig = {
 // for the grid block, since we need to modify how the inner teaser
 // block behave in it (= no schemaEnhancer fields for teasers inside a grid)
 // Afterwards, it can be further customized in add-ons using the same technique.
-blocksConfig.gridBlock.blocksConfig = { ...blocksConfig };
-blocksConfig.gridBlock.blocksConfig.teaser = {
-  ...blocksConfig.teaser,
-  schemaEnhancer: gridTeaserDisableStylingSchema,
-};
-blocksConfig.gridBlock.blocksConfig.image = {
-  ...blocksConfig.image,
-  schemaEnhancer: gridImageDisableSizeAndPositionHandlersSchema,
-};
+blocksConfig.gridBlock.blocksConfig = cloneDeep(blocksConfig);
+blocksConfig.gridBlock.blocksConfig.teaser.schemaEnhancer =
+  gridTeaserDisableStylingSchema;
+blocksConfig.gridBlock.blocksConfig.image.schemaEnhancer =
+  gridImageDisableSizeAndPositionHandlersSchema;
 
 const requiredBlocks = ['title'];
 

package/src/config/ControlPanels.js

@@ -19,6 +19,7 @@ import rulesSVG from '@plone/volto/icons/content-existing.svg';
 import undoControlPanelSVG from '@plone/volto/icons/undo-control-panel.svg';
 import linkSVG from '@plone/volto/icons/link.svg';
 import relationsSVG from '@plone/volto/icons/ahead.svg';
+import config from '@plone/volto/registry';
 
 export const controlPanelsIcons = {
   default: settingsSVG,
@@ -44,7 +45,7 @@ export const controlPanelsIcons = {
   relations: relationsSVG,
 };
 
-export const filterControlPanels = (controlpanels) => {
+export const filterControlPanels = (controlpanels = []) => {
   const HIDDEN_CONTROL_PANELS = ['markup', 'content-rules'];
 
   return controlpanels.filter(
@@ -53,55 +54,67 @@ export const filterControlPanels = (controlpanels) => {
   );
 };
 
+export const unwantedControlPanelsFields = {
+  language: ['display_flags', 'always_show_selector'],
+  search: ['enable_livesearch'],
+  site: [
+    'display_publication_date_in_byline',
+    'icon_visibility',
+    'thumb_visibility',
+    'no_thumbs_portlet',
+    'no_thumbs_lists',
+    'no_thumbs_summary',
+    'no_thumbs_tables',
+    'thumb_scale_portlet',
+    'thumb_scale_listing',
+    'thumb_scale_table',
+    'thumb_scale_summary',
+    'toolbar_position',
+    'toolbar_logo',
+    'default_page',
+    'site_favicon',
+    'site_favicon_mimetype',
+    'exposeDCMetaTags',
+    'enable_sitemap',
+    'robots_txt',
+    'webstats_js',
+  ],
+  editing: ['available_editors', 'default_editor', 'ext_editor'],
+  imaging: [
+    'highpixeldensity_scales',
+    'quality_2x',
+    'quality_3x',
+    'picture_variants',
+    'image_captioning',
+  ],
+  navigation: [
+    'generate_tabs',
+    'navigation_depth',
+    'nonfolderish_tabs',
+    'sort_tabs_on',
+    'sort_tabs_reversed',
+    'sitemap_depth',
+  ],
+};
+
 // Filters props.controlpanel.schema to only valid/relevant fields
 export const filterControlPanelsSchema = (controlpanel) => {
   const panelType = controlpanel['@id'].split('/').pop();
 
-  const unwantedSettings = {
-    language: ['display_flags', 'always_show_selector'],
-    search: ['enable_livesearch'],
-    site: [
-      'display_publication_date_in_byline',
-      'icon_visibility',
-      'thumb_visibility',
-      'no_thumbs_portlet',
-      'no_thumbs_lists',
-      'no_thumbs_summary',
-      'no_thumbs_tables',
-      'thumb_scale_portlet',
-      'thumb_scale_listing',
-      'thumb_scale_table',
-      'thumb_scale_summary',
-      'toolbar_position',
-      'toolbar_logo',
-      'default_page',
-      'site_favicon',
-      'site_favicon_mimetype',
-      'exposeDCMetaTags',
-      'enable_sitemap',
-      'robots_txt',
-      'webstats_js',
-    ],
-    editing: ['available_editors', 'default_editor', 'ext_editor'],
-    imaging: [
-      'highpixeldensity_scales',
-      'quality_2x',
-      'quality_3x',
-      'picture_variants',
-      'image_captioning',
-    ],
-  };
+  const { unwantedControlPanelsFields } = config.settings;
 
   // Creates modified version of properties object
   const newPropertiesObj = Object.fromEntries(
     Object.entries(controlpanel.schema.properties).filter(
-      ([key, val]) => !(unwantedSettings[panelType] || []).includes(key),
+      ([key, _val]) =>
+        !(unwantedControlPanelsFields[panelType] || []).includes(key),
     ),
   );
   // Filters props.controlpanel.schema.fieldsets.fields to only valid/relevant fields
   const filterFields = (fields) => {
     return fields.filter(
-      (field) => !(unwantedSettings[panelType] || []).includes(field),
+      (field) =>
+        !(unwantedControlPanelsFields[panelType] || []).includes(field),
     );
   };
   // Creates modified version of fieldsets array

package/src/config/Loadables.jsx

@@ -1,5 +1,20 @@
 import loadable from '@loadable/component';
 
+// This is to make happy the types declaration extractor (tsc) that is not able to
+// extract one private method the types from `@dnd-kit` library:
+// error TS9006: Declaration emit for this file requires using private name
+// 'DefaultDropAnimationSideEffectsOptions' from module '".../node_modules/@dnd-kit/core/dist/components/DragOverlay/hooks/useDropAnimation"'.
+// An explicit type annotation may unblock declaration emit
+
+/**
+ * @typedef {Object} LoadableLib
+ * @property {() => Promise<any>} import
+ * @property {Object} [options]
+ */
+
+/**
+ * @type {{ [key: string]: LoadableLib }}
+ */
 export const loadables = {
   prettierStandalone: loadable.lib(() => import('prettier/standalone')),
   prettierParserHtml: loadable.lib(() => import('prettier/plugins/html')),
@@ -35,26 +50,7 @@ export const loadables = {
   reactDndHtml5Backend: loadable.lib(() => import('react-dnd-html5-backend')),
   reactBeautifulDnd: loadable.lib(() => import('react-beautiful-dnd')),
   rrule: loadable.lib(() => import('rrule')),
-
-  // draftjs libs
-  immutableLib: loadable.lib(() => import('immutable')),
-  draftJs: loadable.lib(() => import('draft-js')),
-  draftJsLibIsSoftNewlineEvent: loadable.lib(() =>
-    import('draft-js/lib/isSoftNewlineEvent'),
-  ),
-  draftJsFilters: loadable.lib(() => import('draftjs-filters')),
-  draftJsInlineToolbarPlugin: loadable.lib(() =>
-    import('draft-js-inline-toolbar-plugin'),
-  ),
-  draftJsImportHtml: loadable.lib(() => import('draft-js-import-html')),
-  draftJsBlockBreakoutPlugin: loadable.lib(() =>
-    import('draft-js-block-breakout-plugin'),
-  ),
-  draftJsCreateInlineStyleButton: loadable.lib(() =>
-    import('draft-js-buttons/lib/utils/createInlineStyleButton'),
-  ),
-  draftJsCreateBlockStyleButton: loadable.lib(() =>
-    import('draft-js-buttons/lib/utils/createBlockStyleButton'),
-  ),
-  draftJsPluginsUtils: loadable.lib(() => import('draft-js-plugins-utils')),
+  dndKitCore: loadable.lib(() => import('@dnd-kit/core')),
+  dndKitSortable: loadable.lib(() => import('@dnd-kit/sortable')),
+  dndKitUtilities: loadable.lib(() => import('@dnd-kit/utilities')),
 };

package/src/config/NonContentRoutes.jsx

@@ -9,7 +9,8 @@ export const nonContentRoutes = [
   '/aliases',
   '/contents',
   '/delete',
-  '/diff',
+  /\/diff$/,
+  /\/diff\?/,
   /\/edit$/,
   '/historyview',
   '/links-to-item',

package/src/config/NonContentRoutesPublic.jsx

@@ -0,0 +1,15 @@
+// PublicUi routes that are nonContentRoutes, and should not be members of isCmsUi
+// You can include either RegEx or a string representing the ending of the
+// nonContentRoute. For example, '/add' will match '/foo/bar/add'.
+export const nonContentRoutesPublic = [
+  '/login',
+  '/logout',
+  '/sitemap',
+  '/register',
+  '/search',
+  '/change-password',
+  '/contact-form',
+  '/register',
+  /\/passwordreset\/.*$/,
+  '/passwordreset',
+];

package/src/config/Views.jsx

@@ -18,8 +18,8 @@ import Unauthorized from '@plone/volto/components/theme/Unauthorized/Unauthorize
 import Forbidden from '@plone/volto/components/theme/Forbidden/Forbidden';
 import ServerError from '@plone/volto/components/theme/Error/ServerError';
 
-const EventView = loadable(() =>
-  import('@plone/volto/components/theme/View/EventView'),
+const EventView = loadable(
+  () => import('@plone/volto/components/theme/View/EventView'),
 );
 
 defineMessages({