@plone/volto 19.0.0-alpha.8 → 19.0.0

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

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import { CookiesProvider } from 'react-cookie';
 
 import View from './View';
 import config from '@plone/volto/registry';
@@ -158,10 +159,12 @@ describe('View', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <>
-          <View location={{ pathname: '/test' }} />
-          <div id="toolbar"></div>
-        </>
+        <CookiesProvider>
+          <>
+            <View location={{ pathname: '/test' }} />
+            <div id="toolbar"></div>
+          </>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -181,10 +184,12 @@ describe('View', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <>
-          <View location={{ pathname: '/test' }} />
-          <div id="toolbar"></div>
-        </>
+        <CookiesProvider>
+          <>
+            <View location={{ pathname: '/test' }} />
+            <div id="toolbar"></div>
+          </>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -204,10 +209,12 @@ describe('View', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <>
-          <View location={{ pathname: '/test' }} />
-          <div id="toolbar"></div>
-        </>
+        <CookiesProvider>
+          <>
+            <View location={{ pathname: '/test' }} />
+            <div id="toolbar"></div>
+          </>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -227,10 +234,12 @@ describe('View', () => {
     });
     const { container } = render(
       <Provider store={store}>
-        <>
-          <View location={{ pathname: '/test' }} />
-          <div id="toolbar"></div>
-        </>
+        <CookiesProvider>
+          <>
+            <View location={{ pathname: '/test' }} />
+            <div id="toolbar"></div>
+          </>
+        </CookiesProvider>
       </Provider>,
     );
 
@@ -258,20 +267,24 @@ describe('View', () => {
     });
     const { rerender } = render(
       <Provider store={store}>
-        <>
-          <View location={{ pathname: '/test' }} />
-          <div id="toolbar"></div>
-        </>
+        <CookiesProvider>
+          <>
+            <View location={{ pathname: '/test' }} />
+            <div id="toolbar"></div>
+          </>
+        </CookiesProvider>
       </Provider>,
     );
     expect(instanceCount).toBe(1);
     store.getState().content.data['@id'] = '/b';
     rerender(
       <Provider store={store}>
-        <>
-          <View location={{ pathname: '/test' }} />
-          <div id="toolbar"></div>
-        </>
+        <CookiesProvider>
+          <>
+            <View location={{ pathname: '/test' }} />
+            <div id="toolbar"></div>
+          </>
+        </CookiesProvider>
       </Provider>,
     );
     expect(instanceCount).toBe(2);

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

@@ -1,17 +1,16 @@
 import React from 'react';
 import cx from 'classnames';
-import moment from 'moment';
 import { useSelector } from 'react-redux';
 import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
+import { formatDate } from '@plone/volto/helpers/Utils/Date';
 
 const DateWidget = ({ value, children, className, format = 'll' }) => {
   const lang = useSelector((state) => state.intl.locale);
-  moment.locale(toBackendLang(lang));
+  const locale = toBackendLang(lang);
+  const formatted = formatDate({ date: value, format, locale });
   return value ? (
     <span className={cx(className, 'date', 'widget')}>
-      {children
-        ? children(moment(value).format(format))
-        : moment(value).format(format)}
+      {children ? children(formatted) : formatted}
     </span>
   ) : (
     ''

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

@@ -1,17 +1,16 @@
 import React from 'react';
 import cx from 'classnames';
-import moment from 'moment';
 import { useSelector } from 'react-redux';
 import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
+import { formatDate } from '@plone/volto/helpers/Utils/Date';
 
 const DatetimeWidget = ({ value, children, className, format = 'lll' }) => {
   const lang = useSelector((state) => state.intl.locale);
-  moment.locale(toBackendLang(lang));
+  const locale = toBackendLang(lang);
+  const formatted = formatDate({ date: value, format, locale });
   return value ? (
     <span className={cx(className, 'datetime', 'widget')}>
-      {children
-        ? children(moment(value).format(format))
-        : moment(value).format(format)}
+      {children ? children(formatted) : formatted}
     </span>
   ) : (
     ''

package/src/components/theme/Widgets/ImageWidget.test.jsx

@@ -1,17 +1,35 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import ImageWidget from './ImageWidget';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+
+const mockStore = configureStore();
 
 describe('ImageWidget', () => {
+  const store = mockStore({
+    intl: { locale: 'en', messages: {} },
+    site: { data: { 'plone.image_scales': { preview: {}, listing: {} } } },
+  });
+
   it('renders an empty image view widget component', () => {
-    const component = renderer.create(<ImageWidget />);
+    const component = renderer.create(
+      <Provider store={store}>
+        <ImageWidget />
+      </Provider>,
+    );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
 
   it('renders an image view widget component', () => {
     const component = renderer.create(
-      <ImageWidget className="metadata" value={{ download: '/foo-bar.png' }} />,
+      <Provider store={store}>
+        <ImageWidget
+          className="metadata"
+          value={{ download: '/foo-bar.png' }}
+        />
+      </Provider>,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
@@ -19,15 +37,17 @@ describe('ImageWidget', () => {
 
   it('renders an image view widget component with children', () => {
     const component = renderer.create(
-      <ImageWidget
-        className="metadata"
-        value={{
-          download: '/foo-bar.png',
-          file_name: 'foo-bar.png',
-        }}
-      >
-        {(child) => <strong>{child}</strong>}
-      </ImageWidget>,
+      <Provider store={store}>
+        <ImageWidget
+          className="metadata"
+          value={{
+            download: '/foo-bar.png',
+            file_name: 'foo-bar.png',
+          }}
+        >
+          {(child) => <strong>{child}</strong>}
+        </ImageWidget>
+      </Provider>,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();

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

@@ -3,7 +3,7 @@ import cx from 'classnames';
 
 const RichTextWidget = ({ value, className }) =>
   value ? (
-    <p
+    <div
       className={cx(className, 'richtext', 'widget')}
       dangerouslySetInnerHTML={{
         __html: value.data,

package/src/config/Blocks.jsx

@@ -68,6 +68,7 @@ import {
 import getListingBlockAsyncData from '@plone/volto/components/manage/Blocks/Listing/getAsyncData';
 import { getImageBlockSizes } from '@plone/volto/components/manage/Blocks/Image/utils';
 import { getLeadImageBlockSizes } from '@plone/volto/components/manage/Blocks/LeadImage/utils';
+import { getTeaserBlockSizes } from '@plone/volto/components/manage/Blocks/Teaser/utils';
 
 // block sidebar schemas (not the Dexterity Layout block settings schemas)
 import ListingBlockSchema from '@plone/volto/components/manage/Blocks/Listing/schema';
@@ -351,6 +352,7 @@ const blocksConfig = {
     restricted: false,
     mostUsed: true,
     sidebarTab: 1,
+    allowedPeertubeInstances: [],
   },
   toc: {
     id: 'toc',
@@ -506,6 +508,7 @@ const blocksConfig = {
     sidebarTab: 1,
     blockSchema: TeaserSchema,
     dataAdapter: TeaserBlockDataAdapter,
+    getSizes: getTeaserBlockSizes,
     variations: [
       {
         id: 'default',

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 contentListingSVG from '@plone/volto/icons/content-listing.svg';
 import config from '@plone/volto/registry';
 
 export const controlPanelsIcons = {
@@ -43,6 +44,7 @@ export const controlPanelsIcons = {
   undo: undoControlPanelSVG,
   aliases: linkSVG,
   relations: relationsSVG,
+  'block-types': contentListingSVG,
 };
 
 export const filterControlPanels = (controlpanels = []) => {

package/src/config/Loadables.jsx

@@ -24,9 +24,6 @@ export const loadables = {
   reactVirtualized: loadable.lib(() => import('react-virtualized'), {
     ssr: false,
   }),
-  reactSortableHOC: loadable.lib(() => import('react-sortable-hoc'), {
-    ssr: false,
-  }),
   reactSelectAsyncPaginate: loadable.lib(
     () => import('react-select-async-paginate'),
     { ssr: false },
@@ -46,11 +43,10 @@ export const loadables = {
   diffLib: loadable.lib(() => import('diff')),
   moment: loadable.lib(() => import('moment')),
   reactDates: loadable.lib(() => import('react-dates')),
-  reactDnd: loadable.lib(() => import('react-dnd')),
-  reactDndHtml5Backend: loadable.lib(() => import('react-dnd-html5-backend')),
   reactBeautifulDnd: loadable.lib(() => import('react-beautiful-dnd')),
   rrule: loadable.lib(() => import('rrule')),
   dndKitCore: loadable.lib(() => import('@dnd-kit/core')),
+  dndKitModifiers: loadable.lib(() => import('@dnd-kit/modifiers')),
   dndKitSortable: loadable.lib(() => import('@dnd-kit/sortable')),
   dndKitUtilities: loadable.lib(() => import('@dnd-kit/utilities')),
 };

package/src/config/Widgets.jsx

@@ -35,6 +35,9 @@ import {
   RecurrenceWidget,
   RadioGroupWidget,
   CheckboxGroupWidget,
+  Size,
+  BlockAlignment,
+  BlockWidth,
 } from '@plone/volto/components/manage/Widgets';
 
 import ArrayViewWidget from '@plone/volto/components/theme/Widgets/ArrayWidget';
@@ -102,6 +105,10 @@ export const widgetMapping = {
     hidden: HiddenWidget,
     radio_group: RadioGroupWidget,
     checkbox_group: CheckboxGroupWidget,
+    // SemanticUI Free widgets
+    blockAlignment: BlockAlignment,
+    blockWidth: BlockWidth,
+    size: Size,
   },
   vocabulary: {
     'plone.app.vocabularies.Catalog': ObjectBrowserWidget,

package/src/config/index.js

@@ -30,10 +30,6 @@ import languages from '@plone/volto/constants/Languages.cjs';
 const host = process.env.HOST || 'localhost';
 const port = process.env.PORT || '3000';
 
-const apiPath =
-  process.env.RAZZLE_API_PATH ||
-  (__DEVELOPMENT__ ? `http://${host}:${port}` : '');
-
 const getServerURL = (url) => {
   if (!url) return;
   const apiPathURL = parseUrl(url);
@@ -46,12 +42,14 @@ const getServerURL = (url) => {
 // if RAZZLE_PUBLIC_URL is present, use it
 // if in DEV, use the host/port combination by default
 // if in PROD, assume it's RAZZLE_API_PATH server name (no /api or alikes) or fallback
-// to DEV settings if RAZZLE_API_PATH is not present
+// to DEV settings if RAZZLE_API_PATH is not present.
+// Finally, add the subpath, if there is one.
 const publicURL =
-  process.env.RAZZLE_PUBLIC_URL ||
-  (__DEVELOPMENT__
-    ? `http://${host}:${port}`
-    : getServerURL(process.env.RAZZLE_API_PATH) || `http://${host}:${port}`);
+  (process.env.RAZZLE_PUBLIC_URL ||
+    (__DEVELOPMENT__
+      ? `http://${host}:${port}`
+      : getServerURL(process.env.RAZZLE_API_PATH) ||
+        `http://${host}:${port}`)) + (process.env.RAZZLE_SUBPATH_PREFIX || '');
 
 const serverConfig =
   typeof __SERVER__ !== 'undefined' && __SERVER__
@@ -65,7 +63,10 @@ let config = {
     // The URL Volto is going to be served (see sensible defaults above)
     publicURL,
     okRoute: '/ok',
-    apiPath,
+    // Base URL for API requests from the browser.
+    // If not explicitly set, use the publicURL (seamless mode) --
+    // but in that case it will be updated in server.jsx for each request.
+    apiPath: process.env.RAZZLE_API_PATH || publicURL,
     apiExpanders: [
       // Added here for documentation purposes, added at the end because it
       // depends on a value of this object.
@@ -99,6 +100,7 @@ let config = {
     // apiPath: process.env.RAZZLE_API_PATH || 'http://localhost:8081/db/web', // for guillotina
     actions_raising_api_errors: ['GET_CONTENT', 'UPDATE_CONTENT'],
     internalApiPath: process.env.RAZZLE_INTERNAL_API_PATH || undefined,
+    subpathPrefix: process.env.RAZZLE_SUBPATH_PREFIX || '',
     websockets: process.env.RAZZLE_WEBSOCKETS || false,
     // TODO: legacyTraverse to be removed when the use of the legacy traverse is deprecated.
     legacyTraverse: process.env.RAZZLE_LEGACY_TRAVERSE || false,
@@ -115,11 +117,12 @@ let config = {
     defaultPageSize: 25,
     supportedLanguages: Object.keys(languages),
     navDepth: 1,
+    siteMapDepth: 4,
     expressMiddleware: serverConfig.expressMiddleware, // BBB
     defaultBlockType: 'slate',
     verticalFormTabs: false,
     useEmailAsLogin: false,
-    persistentReducers: ['blocksClipboard'],
+    persistentReducers: ['blocksClipboard.cut', 'blocksClipboard.copy'],
     initialReducersBlacklist: [], // reducers in this list won't be hydrated in windows.__data
     asyncPropsExtenders: [getSiteAsyncPropExtender], // per route asyncConnect customizers
     contentIcons: contentIcons,
@@ -177,11 +180,19 @@ let config = {
       includeSiteTitle: false,
       titleAndSiteTitleSeparator: '-',
     },
+    layout: {
+      // used to set `sizes` for images
+      tabletBreakpoint: 768,
+      defaultContainerWidth: 1200,
+    },
   },
   experimental: {
     addBlockButton: {
       enabled: true,
     },
+    saveAsDraft: {
+      enabled: false,
+    },
   },
   widgets: {},
   views: {},

package/src/config/server.js

@@ -1,7 +1,6 @@
 import imagesMiddleware from '@plone/volto/express-middleware/images';
 import filesMiddleware from '@plone/volto/express-middleware/files';
 import robotstxtMiddleware from '@plone/volto/express-middleware/robotstxt';
-import okMiddleware from '@plone/volto/express-middleware/ok';
 import sitemapMiddleware from '@plone/volto/express-middleware/sitemap';
 import staticsMiddleware from '@plone/volto/express-middleware/static';
 import devProxyMiddleware from '@plone/volto/express-middleware/devproxy';
@@ -12,7 +11,6 @@ const settings = {
     filesMiddleware(),
     imagesMiddleware(),
     robotstxtMiddleware(),
-    okMiddleware(),
     sitemapMiddleware(),
     staticsMiddleware(),
   ],

package/src/config/slots.js

@@ -1,7 +1,26 @@
+import loadable from '@loadable/component';
 import RelatedItems from '@plone/volto/components/theme/RelatedItems/RelatedItems';
 import Tags from '@plone/volto/components/theme/Tags/Tags';
+import { isCmsUi } from '@plone/volto/helpers/Url/Url';
+
+const InjectPloneComponentsCSS = loadable(
+  () =>
+    import(
+      '@plone/volto/components/theme/InjectPloneComponentsCSS/InjectPloneComponentsCSS'
+    ),
+  { fallback: null },
+);
+
+const onlyCMSUI = ({ location }) => isCmsUi(location?.pathname);
 
 const slots = {
+  aboveApp: [
+    {
+      name: 'plone-components-css',
+      component: InjectPloneComponentsCSS,
+      predicates: [onlyCMSUI],
+    },
+  ],
   belowContent: [
     {
       name: 'tags',

package/src/config/validation.ts

@@ -16,6 +16,7 @@ import {
   endEventDateRangeValidator,
   patternValidator,
   defaultLanguageControlPanelValidator,
+  sizeValidator,
 } from '@plone/volto/helpers/FormValidation/validators';
 
 const registerValidators = (config: ConfigType) => {
@@ -33,6 +34,13 @@ const registerValidators = (config: ConfigType) => {
     method: maxLengthValidator,
   });
 
+  config.registerUtility({
+    name: 'size',
+    type: 'validator',
+    dependencies: { fieldType: 'object' },
+    method: sizeValidator,
+  });
+
   config.registerUtility({
     name: 'pattern',
     type: 'validator',

package/src/constants/ActionTypes.js

@@ -148,3 +148,4 @@ export const GET_NAVROOT = 'GET_NAVROOT';
 export const SET_FORM_DATA = 'SET_FORM_DATA';
 export const SET_UI_STATE = 'SET_UI_STATE';
 export const UPDATE_UPLOADED_FILES = 'UPDATE_UPLOADED_FILES';
+export const GET_BLOCKTYPES_INDEX = 'GET_BLOCKTYPES_INDEX';

package/src/express-middleware/devproxy.js

@@ -13,7 +13,10 @@ const filter = function (pathname, req) {
   // Check if pathname is defined, there are some corner cases that pathname is null
   if (pathname) {
     // This is the proxy to the API in case the accept header is 'application/json'
-    return config.settings.devProxyToApiPath && pathname.startsWith('/++api++');
+    return (
+      config.settings.devProxyToApiPath &&
+      pathname.startsWith(`${config.settings.subpathPrefix}/++api++`)
+    );
   } else {
     return false;
   }
@@ -78,17 +81,26 @@ export default function devProxyMiddleware() {
     },
     pathRewrite: (path, req) => {
       const { apiPathURL, instancePath } = getEnv();
+      const vhSubpath = config.settings.subpathPrefix
+        ? config.settings.subpathPrefix
+            .split('/')
+            .filter(Boolean)
+            .map((part) => '/_vh_' + part)
+            .join('')
+        : '';
+      const port =
+        apiPathURL.port || (apiPathURL.protocol === 'https:' ? 443 : 80);
       const target =
         config.settings.proxyRewriteTarget ||
         `/VirtualHostBase/${apiPathURL.protocol.slice(0, -1)}/${
           apiPathURL.hostname
-        }:${apiPathURL.port}${instancePath}/++api++/VirtualHostRoot`;
+        }:${port}${instancePath}/++api++/VirtualHostRoot${vhSubpath}`;
 
-      return `${target}${path.replace('/++api++', '')}`;
+      return `${target}${path.replace(`${config.settings.subpathPrefix}/++api++`, '')}`;
     },
+    changeOrigin: true,
     logLevel: process.env.DEBUG_HPM ? 'debug' : 'silent',
     ...(process.env.RAZZLE_DEV_PROXY_INSECURE && {
-      changeOrigin: true,
       secure: false,
     }),
   });

package/src/express-middleware/files.js

@@ -3,6 +3,7 @@ import { getAPIResourceWithAuth } from '@plone/volto/helpers/Api/APIResourceWith
 
 const HEADERS = [
   'accept-ranges',
+  'cache-status',
   'cache-control',
   'content-disposition',
   'content-range',

package/src/express-middleware/files.test.js

@@ -0,0 +1,59 @@
+import filesMiddleware from './files';
+import { getAPIResourceWithAuth } from '@plone/volto/helpers/Api/APIResourceWithAuth';
+
+vi.mock('@plone/volto/helpers/Api/APIResourceWithAuth', () => ({
+  getAPIResourceWithAuth: vi.fn(),
+}));
+
+describe('files middleware', () => {
+  it('handles requests containing @@download and forwards headers/body', async () => {
+    getAPIResourceWithAuth.mockResolvedValue({
+      headers: {
+        'content-type': 'text/plain',
+        'cache-status': 'Souin; hit; ttl=664',
+      },
+      body: 'OK',
+      get(name) {
+        return this.headers[name];
+      },
+      statusCode: 200,
+    });
+
+    const mw = filesMiddleware();
+    const layer = mw.stack.find(
+      (l) => l.regexp && l.regexp.source.includes('@@download'),
+    );
+    expect(layer).toBeTruthy();
+
+    const req = {
+      path: '/some/@@download',
+      method: 'GET',
+      app: { locals: {} },
+    };
+    const res = {
+      headers: {},
+      set(name, val) {
+        this.headers[name] = val;
+      },
+      status(code) {
+        this.statusCode = code;
+        return this;
+      },
+      send(body) {
+        this.body = body;
+      },
+    };
+
+    // invoke the middleware handler for that layer
+    layer.handle(req, res, (err) => {
+      if (err) throw err;
+    });
+
+    await new Promise(process.nextTick);
+
+    expect(res.body).toBe('OK');
+    expect(res.statusCode).toBe(200);
+    expect(res.headers['content-type']).toBe('text/plain');
+    expect(res.headers['cache-status']).toBe('Souin; hit; ttl=664');
+  });
+});

package/src/express-middleware/images.js

@@ -4,6 +4,7 @@ import { getAPIResourceWithAuth } from '@plone/volto/helpers/Api/APIResourceWith
 const HEADERS = [
   'content-type',
   'content-disposition',
+  'cache-status',
   'cache-control',
   'x-sendfile',
   'x-accel-redirect',

package/src/express-middleware/images.test.js

@@ -0,0 +1,50 @@
+import imagesMiddleware from './images';
+import { getAPIResourceWithAuth } from '@plone/volto/helpers/Api/APIResourceWithAuth';
+
+vi.mock('@plone/volto/helpers/Api/APIResourceWithAuth', () => ({
+  getAPIResourceWithAuth: vi.fn(),
+}));
+
+describe('images middleware', () => {
+  it('handles requests containing @@images and forwards headers/body', async () => {
+    getAPIResourceWithAuth.mockResolvedValue({
+      headers: {
+        'content-type': 'image/png',
+        'cache-status': 'Souin; hit; ttl=664',
+      },
+      body: 'OK',
+    });
+
+    const mw = imagesMiddleware();
+    const layer = mw.stack.find(
+      (l) => l.regexp && l.regexp.source.includes('@@images'),
+    );
+    expect(layer).toBeTruthy();
+
+    const req = {
+      path: '/some/@@images/image',
+      method: 'GET',
+      app: { locals: {} },
+    };
+    const res = {
+      headers: {},
+      set(name, val) {
+        this.headers[name] = val;
+      },
+      send(body) {
+        this.body = body;
+      },
+    };
+
+    // invoke the middleware handler for that layer
+    layer.handle(req, res, (err) => {
+      if (err) throw err;
+    });
+
+    await new Promise(process.nextTick);
+
+    expect(res.body).toBe('OK');
+    expect(res.headers['content-type']).toBe('image/png');
+    expect(res.headers['cache-status']).toBe('Souin; hit; ttl=664');
+  });
+});