@plone/volto 19.0.0-alpha.2 → 19.0.0-alpha.20

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

@@ -25,13 +25,11 @@ import { installDefaultBlocks } from './Blocks';
 import { getSiteAsyncPropExtender } from '@plone/volto/helpers/Site';
 import { registerValidators } from './validation';
 
+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);
@@ -44,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__
@@ -63,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.
@@ -97,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,
@@ -111,9 +115,7 @@ let config = {
     openExternalLinkInNewTab: false,
     notSupportedBrowsers: ['ie'],
     defaultPageSize: 25,
-    isMultilingual: false,
-    supportedLanguages: ['en'],
-    defaultLanguage: process.env.SITE_DEFAULT_LANGUAGE || 'en',
+    supportedLanguages: Object.keys(languages),
     navDepth: 1,
     expressMiddleware: serverConfig.expressMiddleware, // BBB
     defaultBlockType: 'slate',
@@ -141,7 +143,7 @@ let config = {
     serverConfig,
     storeExtenders: [],
     showTags: true,
-    showRelatedItems: false,
+    showRelatedItems: true,
     controlpanels: [],
     controlPanelsIcons,
     filterControlPanels,
@@ -198,7 +200,8 @@ config.settings.apiExpanders = [
   ...config.settings.apiExpanders,
   {
     match: '',
-    GET_CONTENT: ['breadcrumbs', 'actions', 'types', 'navroot'],
+    GET_CONTENT: ['breadcrumbs', 'actions', 'types', 'navroot', 'translations'],
+    // Note: translations is removed in the API middleware if the site is not multilingual.
   },
   {
     match: '',
@@ -232,16 +235,6 @@ Object.entries(slots).forEach(([slotName, components]) => {
   });
 });
 
-// Make sure that process.env.SITE_DEFAULT_LANGUAGE is set in availableLanguages
-if (
-  process.env.SITE_DEFAULT_LANGUAGE &&
-  !config.settings.supportedLanguages.includes(
-    process.env.SITE_DEFAULT_LANGUAGE,
-  )
-) {
-  config.settings.supportedLanguages.push(process.env.SITE_DEFAULT_LANGUAGE);
-}
-
 registerValidators(ConfigRegistry);
 installDefaultComponents(ConfigRegistry);
 installDefaultWidgets(ConfigRegistry);

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/express-middleware/devproxy.js

@@ -10,8 +10,16 @@ import querystring from 'querystring';
 import { parse as parseUrl } from 'url';
 
 const filter = function (pathname, req) {
-  // This is the proxy to the API in case the accept header is 'application/json'
-  return config.settings.devProxyToApiPath && pathname.startsWith('/++api++');
+  // 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(`${config.settings.subpathPrefix}/++api++`)
+    );
+  } else {
+    return false;
+  }
 };
 
 let _env = null;
@@ -73,17 +81,24 @@ 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 target =
         config.settings.proxyRewriteTarget ||
         `/VirtualHostBase/${apiPathURL.protocol.slice(0, -1)}/${
           apiPathURL.hostname
-        }:${apiPathURL.port}${instancePath}/++api++/VirtualHostRoot`;
+        }:${apiPathURL.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/helpers/Api/APIResourceWithAuth.js

@@ -6,6 +6,7 @@
 import superagent from 'superagent';
 import config from '@plone/volto/registry';
 import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
+import { stripSubpathPrefix } from '@plone/volto/helpers/Url/Url';
 
 /**
  * Get a resource image/file with authenticated (if token exist) API headers
@@ -16,9 +17,9 @@ import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
 export const getAPIResourceWithAuth = (req) =>
   new Promise((resolve, reject) => {
     const { settings } = config;
-    const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
-
+    const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
     let apiPath = '';
+
     if (settings.internalApiPath && __SERVER__) {
       apiPath = settings.internalApiPath;
     } else if (__DEVELOPMENT__ && settings.devProxyToApiPath) {
@@ -26,8 +27,12 @@ export const getAPIResourceWithAuth = (req) =>
     } else {
       apiPath = settings.apiPath;
     }
+
+    //strip subpath if any
+    const contentPath = stripSubpathPrefix(req.path);
+
     const request = superagent
-      .get(`${apiPath}${__DEVELOPMENT__ ? '' : APISUFIX}${req.path}`)
+      .get(`${apiPath}${__DEVELOPMENT__ ? '' : apiSuffix}${contentPath}`)
       .maxResponseSize(settings.maxResponseSize)
       .responseType('blob');
     const authToken = req.universalCookies.get('auth_token');

package/src/helpers/Api/Api.js

@@ -7,7 +7,10 @@ import superagent from 'superagent';
 import Cookies from 'universal-cookie';
 import config from '@plone/volto/registry';
 import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
-import { stripQuerystring } from '@plone/volto/helpers/Url/Url';
+import {
+  stripQuerystring,
+  stripSubpathPrefix,
+} from '@plone/volto/helpers/Url/Url';
 
 const methods = ['get', 'post', 'put', 'patch', 'del'];
 
@@ -19,11 +22,10 @@ const methods = ['get', 'post', 'put', 'patch', 'del'];
  */
 export function formatUrl(path) {
   const { settings } = config;
-  const APISUFIX = settings.legacyTraverse ? '' : '/++api++';
+  const apiSuffix = settings.legacyTraverse ? '' : '/++api++';
 
   if (path.startsWith('http://') || path.startsWith('https://')) return path;
 
-  const adjustedPath = path[0] !== '/' ? `/${path}` : path;
   let apiPath = '';
   if (settings.internalApiPath && __SERVER__) {
     apiPath = settings.internalApiPath;
@@ -31,7 +33,8 @@ export function formatUrl(path) {
     apiPath = settings.apiPath;
   }
 
-  return `${apiPath}${APISUFIX}${adjustedPath}`;
+  const contentPath = stripSubpathPrefix(path[0] !== '/' ? `/${path}` : path);
+  return `${apiPath}${apiSuffix}${contentPath}`;
 }
 
 /**

package/src/helpers/AsyncConnect/ssr.js

@@ -1,6 +1,7 @@
 import { matchRoutes } from 'react-router-config';
 import { mapSeries, isPromise } from './utils';
 import { endGlobalLoad } from '@plone/volto/actions/asyncConnect/asyncConnect';
+import { stripSubpathPrefix } from '@plone/volto/helpers/Url/Url';
 
 export function filterComponents(branch) {
   return branch.reduce((result, { route, match }) => {
@@ -18,7 +19,9 @@ export function loadAsyncConnect({
   filter = () => true,
   ...rest
 }) {
-  const layered = filterComponents(matchRoutes(routes, location.pathname));
+  const layered = filterComponents(
+    matchRoutes(routes, stripSubpathPrefix(location.pathname)),
+  );
 
   if (layered.length === 0) {
     return Promise.resolve();

package/src/helpers/Content/Content.js

@@ -11,6 +11,7 @@ import keys from 'lodash/keys';
 import endsWith from 'lodash/endsWith';
 import find from 'lodash/find';
 import config from '@plone/volto/registry';
+import omit from 'lodash/omit';
 
 /**
  * Nest content.
@@ -85,3 +86,25 @@ export function getLanguageIndependentFields(schema) {
       properties[field]['multilingual_options']?.['language_independent'],
   );
 }
+
+/**
+ * Flattens static behaviors into the parent object with dot-notation keys.
+ * @function flattenStaticBehaviors
+ * @param {Object} result The result object containing static behaviors.
+ * @returns {Object} Result object with flattened static behaviors.
+ */
+export function flattenStaticBehaviors(result) {
+  if (!result['@static_behaviors']) {
+    return result;
+  }
+
+  let flattened = Object.assign({}, result);
+  map(result['@static_behaviors'], (behavior) => {
+    flattened = {
+      ...omit(flattened, behavior),
+      ...mapKeys(flattened[behavior], (value, key) => `${behavior}.${key}`),
+    };
+  });
+
+  return flattened;
+}

package/src/helpers/Content/Content.test.js

@@ -2,6 +2,7 @@ import {
   nestContent,
   getContentIcon,
   getLanguageIndependentFields,
+  flattenStaticBehaviors,
 } from './Content';
 import contentExistingSVG from '@plone/volto/icons/content-existing.svg';
 import linkSVG from '@plone/volto/icons/link.svg';
@@ -96,4 +97,42 @@ describe('Content', () => {
       expect(getLanguageIndependentFields(schema)).toStrictEqual(['lif']);
     });
   });
+
+  describe('flattenStaticBehaviors', () => {
+    it('returns object unchanged when no @static_behaviors', () => {
+      const input = {
+        title: 'Example',
+        creator: 'admin',
+      };
+      expect(flattenStaticBehaviors(input)).toEqual(input);
+    });
+
+    it('flattens static behaviors into dot-notation keys', () => {
+      const input = {
+        title: 'Example',
+        '@static_behaviors': [
+          'guillotina_cms.interfaces.blocks.IBlocks',
+          'guillotina_cms.interfaces.dublin_core.IDublinCore',
+        ],
+        'guillotina_cms.interfaces.blocks.IBlocks': {
+          blocks: 'blocks',
+          blocks_layout: 'blocks_layout',
+        },
+        'guillotina_cms.interfaces.dublin_core.IDublinCore': {
+          creator: 'creator',
+        },
+      };
+      expect(flattenStaticBehaviors(input)).toEqual({
+        title: 'Example',
+        '@static_behaviors': [
+          'guillotina_cms.interfaces.blocks.IBlocks',
+          'guillotina_cms.interfaces.dublin_core.IDublinCore',
+        ],
+        'guillotina_cms.interfaces.blocks.IBlocks.blocks': 'blocks',
+        'guillotina_cms.interfaces.blocks.IBlocks.blocks_layout':
+          'blocks_layout',
+        'guillotina_cms.interfaces.dublin_core.IDublinCore.creator': 'creator',
+      });
+    });
+  });
 });

package/src/helpers/Content/withClientSideContent.jsx

@@ -0,0 +1,35 @@
+/*
+This is a HOC for use with the volto Edit component.
+It makes sure that we fetch the content from the API on the client side
+when the Edit component is mounted, if there is an internalApiPath
+that is different from the public API path. Otherwise we might end up
+saving backend API paths back to the server.
+
+It's admittedly a bit of a workaround.
+Ideally the volto SSR should produce correct URLs
+so that we don't have to do this on the client side.
+But, that requires refactoring that won't happen quickly...
+*/
+
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import config from '@plone/volto/registry';
+import { getContent } from '@plone/volto/actions/content/content';
+
+export default function withClientSideContent(WrappedComponent) {
+  function WithClientSideContent(props) {
+    const { internalApiPath } = config.settings;
+    const dispatch = useDispatch();
+    const content = useSelector((state) => state.content);
+    const id = content.data?.['@id'];
+    useEffect(() => {
+      if (internalApiPath && id?.startsWith(internalApiPath)) {
+        dispatch(getContent(id.substring(internalApiPath.length)));
+      }
+    }, [internalApiPath, dispatch, id]);
+    return <WrappedComponent {...props} />;
+  }
+
+  return hoistNonReactStatics(WithClientSideContent, WrappedComponent);
+}

package/src/helpers/Extensions/withBlockSchemaEnhancer.jsx

@@ -305,8 +305,11 @@ export const EMPTY_STYLES_SCHEMA = {
 
 /**
  * Adds the `styles` field and 'styling' fieldset in a given schema
+ * @param {object} params Helper params
+ * @param {import('@plone/types').JSONSchema} params.schema Schema to enhance
+ * @param {import('react-intl').IntlShape} params.intl intl helper for translations
  */
-export const addStyling = ({ schema, formData, intl }) => {
+export const addStyling = ({ schema, intl }) => {
   if (isEmpty(find(schema.fieldsets, { id: 'styling' }))) {
     schema.fieldsets.push({
       id: 'styling',

package/src/helpers/Html/Html.jsx

@@ -9,6 +9,7 @@ import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import serialize from 'serialize-javascript';
 import join from 'lodash/join';
 import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
+import { addSubpathPrefix } from '@plone/volto/helpers/Url/Url';
 import { runtimeConfig } from '@plone/volto/runtime_config';
 import config from '@plone/volto/registry';
 
@@ -122,21 +123,26 @@ class Html extends Component {
                 ...(publicURL && {
                   publicURL,
                 }),
-                ...(process.env.SITE_DEFAULT_LANGUAGE && {
-                  defaultLanguage: process.env.SITE_DEFAULT_LANGUAGE,
-                }),
               })};`,
             }}
           />
 
-          <link rel="icon" href="/favicon.ico" sizes="any" />
-          <link rel="icon" href="/icon.svg" type="image/svg+xml" />
+          <link
+            rel="icon"
+            href={addSubpathPrefix('/favicon.ico')}
+            sizes="any"
+          />
+          <link
+            rel="icon"
+            href={addSubpathPrefix('/icon.svg')}
+            type="image/svg+xml"
+          />
           <link
             rel="apple-touch-icon"
             sizes="180x180"
-            href="/apple-touch-icon.png"
+            href={addSubpathPrefix('/apple-touch-icon.png')}
           />
-          <link rel="manifest" href="/site.webmanifest" />
+          <link rel="manifest" href={addSubpathPrefix('/site.webmanifest')} />
           <meta name="generator" content="Plone 6 - https://plone.org" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <meta name="mobile-web-app-capable" content="yes" />