@plone/volto 15.0.0-alpha.0 → 15.0.0-alpha.11

package/src/config/RichTextEditor/Styles.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import createInlineStyleButton from 'draft-js-buttons/lib/utils/createInlineStyleButton';
-import createBlockStyleButton from 'draft-js-buttons/lib/utils/createBlockStyleButton';
+// import createInlineStyleButton from 'draft-js-buttons/lib/utils/createInlineStyleButton';
+// import createBlockStyleButton from 'draft-js-buttons/lib/utils/createBlockStyleButton';
 
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 
@@ -13,53 +13,57 @@ import orderedListSVG from '@plone/volto/icons/list-numbered.svg';
 import blockquoteSVG from '@plone/volto/icons/quote.svg';
 import calloutSVG from '@plone/volto/icons/megaphone.svg';
 
-const BoldButton = createInlineStyleButton({
-  style: 'BOLD',
-  children: <Icon name={boldSVG} size="24px" />,
-});
+export default function (props) {
+  const createInlineStyleButton = props.draftJsCreateInlineStyleButton.default;
+  const createBlockStyleButton = props.draftJsCreateBlockStyleButton.default;
 
-const ItalicButton = createInlineStyleButton({
-  style: 'ITALIC',
-  children: <Icon name={italicSVG} size="24px" />,
-});
+  const BoldButton = createInlineStyleButton({
+    style: 'BOLD',
+    children: <Icon name={boldSVG} size="24px" />,
+  });
 
-const HeadlineTwoButton = createBlockStyleButton({
-  blockType: 'header-two',
-  children: <Icon name={textSVG} size="24px" />,
-});
+  const ItalicButton = createInlineStyleButton({
+    style: 'ITALIC',
+    children: <Icon name={italicSVG} size="24px" />,
+  });
 
-const HeadlineThreeButton = createBlockStyleButton({
-  blockType: 'header-three',
-  children: <Icon name={subtextSVG} size="24px" />,
-});
+  const HeadlineTwoButton = createBlockStyleButton({
+    blockType: 'header-two',
+    children: <Icon name={textSVG} size="24px" />,
+  });
 
-const UnorderedListButton = createBlockStyleButton({
-  blockType: 'unordered-list-item',
-  children: <Icon name={unorderedListSVG} size="24px" />,
-});
+  const HeadlineThreeButton = createBlockStyleButton({
+    blockType: 'header-three',
+    children: <Icon name={subtextSVG} size="24px" />,
+  });
 
-const OrderedListButton = createBlockStyleButton({
-  blockType: 'ordered-list-item',
-  children: <Icon name={orderedListSVG} size="24px" />,
-});
+  const UnorderedListButton = createBlockStyleButton({
+    blockType: 'unordered-list-item',
+    children: <Icon name={unorderedListSVG} size="24px" />,
+  });
 
-const BlockquoteButton = createBlockStyleButton({
-  blockType: 'blockquote',
-  children: <Icon name={blockquoteSVG} size="24px" />,
-});
+  const OrderedListButton = createBlockStyleButton({
+    blockType: 'ordered-list-item',
+    children: <Icon name={orderedListSVG} size="24px" />,
+  });
 
-const CalloutButton = createBlockStyleButton({
-  blockType: 'callout',
-  children: <Icon name={calloutSVG} size="24px" />,
-});
+  const BlockquoteButton = createBlockStyleButton({
+    blockType: 'blockquote',
+    children: <Icon name={blockquoteSVG} size="24px" />,
+  });
 
-export {
-  BlockquoteButton,
-  BoldButton,
-  CalloutButton,
-  ItalicButton,
-  HeadlineTwoButton,
-  HeadlineThreeButton,
-  OrderedListButton,
-  UnorderedListButton,
-};
+  const CalloutButton = createBlockStyleButton({
+    blockType: 'callout',
+    children: <Icon name={calloutSVG} size="24px" />,
+  });
+  return {
+    BlockquoteButton,
+    BoldButton,
+    CalloutButton,
+    ItalicButton,
+    HeadlineTwoButton,
+    HeadlineThreeButton,
+    OrderedListButton,
+    UnorderedListButton,
+  };
+}

package/src/config/RichTextEditor/index.js

@@ -0,0 +1,25 @@
+import ToHTMLRenderers, { options as ToHTMLOptions } from './ToHTML';
+import Blocks from './Blocks';
+import Plugins from './Plugins';
+import FromHTMLCustomBlockFn from './FromHTML';
+
+export const richtextEditorSettings = (props) => {
+  const { plugins, inlineToolbarButtons } = Plugins(props);
+  const { extendedBlockRenderMap, blockStyleFn, listBlockTypes } = Blocks(
+    props,
+  );
+
+  return {
+    extendedBlockRenderMap,
+    blockStyleFn: blockStyleFn,
+    listBlockTypes: listBlockTypes,
+    richTextEditorPlugins: plugins,
+    richTextEditorInlineToolbarButtons: inlineToolbarButtons,
+    FromHTMLCustomBlockFn,
+  };
+};
+
+export const richtextViewSettings = {
+  ToHTMLRenderers,
+  ToHTMLOptions,
+};

package/src/config/Widgets.jsx

@@ -7,6 +7,7 @@ import AlignWidget from '@plone/volto/components/manage/Widgets/AlignWidget';
 import ArrayWidget from '@plone/volto/components/manage/Widgets/ArrayWidget';
 import CheckboxWidget from '@plone/volto/components/manage/Widgets/CheckboxWidget';
 import FileWidget from '@plone/volto/components/manage/Widgets/FileWidget';
+import IdWidget from '@plone/volto/components/manage/Widgets/IdWidget';
 import PasswordWidget from '@plone/volto/components/manage/Widgets/PasswordWidget';
 import QueryWidget from '@plone/volto/components/manage/Widgets/QueryWidget';
 import QuerySortOnWidget from '@plone/volto/components/manage/Widgets/QuerySortOnWidget';
@@ -47,6 +48,7 @@ export const widgetMapping = {
     query: QuerystringWidget,
     recurrence: RecurrenceWidget,
     remoteUrl: UrlWidget,
+    id: IdWidget,
   },
   widget: {
     richtext: WysiwygWidget,

package/src/config/index.js

@@ -11,16 +11,6 @@ import {
   errorViews,
 } from './Views';
 import { nonContentRoutes } from './NonContentRoutes';
-import ToHTMLRenderers, {
-  options as ToHTMLOptions,
-} from './RichTextEditor/ToHTML';
-import {
-  extendedBlockRenderMap,
-  blockStyleFn,
-  listBlockTypes,
-} from './RichTextEditor/Blocks';
-import plugins, { inlineToolbarButtons } from './RichTextEditor/Plugins';
-import FromHTMLCustomBlockFn from './RichTextEditor/FromHTML';
 import {
   groupBlocksOrder,
   requiredBlocks,
@@ -34,6 +24,8 @@ import { sentryOptions } from './Sentry';
 import { contentIcons } from './ContentIcons';
 import { controlPanelsIcons } from './ControlPanels';
 
+import { richtextEditorSettings, richtextViewSettings } from './RichTextEditor';
+
 import applyAddonConfiguration from 'load-volto-addons';
 
 import ConfigRegistry from '@plone/volto/registry';
@@ -96,16 +88,12 @@ let config = {
     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,
+    cookieExpires: 15552000, //in seconds. Default is 6 month (15552000)
     nonContentRoutes,
-    extendedBlockRenderMap,
-    blockStyleFn,
-    listBlockTypes,
-    FromHTMLCustomBlockFn,
-    richTextEditorInlineToolbarButtons: inlineToolbarButtons,
-    richTextEditorPlugins: plugins,
-    ToHTMLRenderers,
-    ToHTMLOptions,
+    richtextEditorSettings,
+    richtextViewSettings,
     imageObjects: ['Image'],
+    reservedIds: ['login', 'layout', 'plone', 'zip', 'properties'],
     downloadableObjects: ['File'], //list of content-types for which the direct download of the file will be carried out if the user is not authenticated
     listingPreviewImageField: 'image', // deprecated from Volto 14 onwards
     customStyleMap: null,
@@ -136,6 +124,15 @@ let config = {
         'reactBeautifulDnd',
         // 'diffLib',
       ],
+      draftEditor: [
+        'immutableLib',
+        'draftJs',
+        'draftJsLibIsSoftNewlineEvent',
+        'draftJsFilters',
+        'draftJsInlineToolbarPlugin',
+        'draftJsImportHtml',
+        'draftJsBlockBreakoutPlugin',
+      ],
     },
     appExtras: [],
     maxResponseSize: 2000000000, // This is superagent default (200 mb)

package/src/helpers/Api/Api.js

@@ -6,6 +6,7 @@
 import superagent from 'superagent';
 import Cookies from 'universal-cookie';
 import config from '@plone/volto/registry';
+import { stripQuerystring } from '@plone/volto/helpers';
 
 const methods = ['get', 'post', 'put', 'patch', 'del'];
 
@@ -46,7 +47,10 @@ class Api {
     const cookies = new Cookies();
 
     methods.forEach((method) => {
-      this[method] = (path, { params, data, type, headers = {} } = {}) => {
+      this[method] = (
+        path,
+        { params, data, type, headers = {}, checkUrl = false } = {},
+      ) => {
         let request;
         let promise = new Promise((resolve, reject) => {
           request = superagent[method](formatUrl(path));
@@ -78,9 +82,21 @@ class Api {
             request.send(data);
           }
 
-          request.end((err, response) =>
-            err ? reject(err) : resolve(response.body || response.text),
-          );
+          request.end((err, response) => {
+            if (
+              checkUrl &&
+              request.url &&
+              request.xhr &&
+              stripQuerystring(request.url) !==
+                stripQuerystring(request.xhr.responseURL)
+            ) {
+              return reject({
+                code: 301,
+                url: request.xhr.responseURL,
+              });
+            }
+            return err ? reject(err) : resolve(response.body || response.text);
+          });
         });
         promise.request = request;
         return promise;

package/src/helpers/Extensions/index.js

@@ -1,2 +1,2 @@
 export * from './withBlockSchemaEnhancer';
-export withBlockExtensions from './withBlockExtensions';
+export withBlockExtensions, { resolveExtension } from './withBlockExtensions';

package/src/helpers/Extensions/withBlockExtensions.js

@@ -5,6 +5,10 @@
 import React from 'react';
 import config from '@plone/volto/registry';
 
+/**
+ * Retrieves the extension (variation) settings from the provided
+ * configuration, based on incoming data.
+ */
 export function resolveExtension(name, extensions, data) {
   const selectedExtension = data[name];
 

package/src/helpers/Extensions/withBlockExtensions.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import withBlockExtensions from './withBlockExtensions';
+import withBlockExtensions, { resolveExtension } from './withBlockExtensions';
 import config from '@plone/volto/registry';
 import { render } from '@testing-library/react';
 
@@ -56,3 +56,28 @@ describe('withBlockExtensions', () => {
     expect(container).toMatchSnapshot();
   });
 });
+
+describe('resolveExtensions', () => {
+  it('resolves the extensions from provided configuration', () => {
+    const data = { variation: 'extB' };
+    const extensions = {
+      variations: [
+        {
+          id: 'extA',
+          payload: 'extA specific',
+        },
+        {
+          id: 'extB',
+          payload: 'extB specific',
+        },
+      ],
+    };
+
+    const resolved = resolveExtension(
+      'variation',
+      extensions['variations'],
+      data,
+    );
+    expect(resolved.payload).toEqual('extB specific');
+  });
+});

package/src/helpers/Url/Url.js

@@ -4,7 +4,7 @@
  */
 
 import { last, memoize } from 'lodash';
-import urlRegex from './urlRegex';
+import { urlRegex, telRegex, mailRegex } from './urlRegex';
 import prependHttp from 'prepend-http';
 import config from '@plone/volto/registry';
 
@@ -102,6 +102,15 @@ export function flattenToAppURL(url) {
       .replace(settings.publicURL, '')
   );
 }
+/**
+ * Given a URL it remove the querystring from the URL.
+ * @method stripQuerystring
+ * @param {string} url URL of the object
+ * @returns {string} URL without querystring
+ */
+export function stripQuerystring(url) {
+  return url.replace(/\?.*$/, '');
+}
 
 /**
  * Given a URL if it starts with the API server URL
@@ -214,3 +223,34 @@ export function normalizeUrl(url) {
 export function removeProtocol(url) {
   return url.replace('https://', '').replace('http://', '');
 }
+
+export function isMail(text) {
+  return mailRegex().test(text);
+}
+
+export function isTelephone(text) {
+  return telRegex().test(text);
+}
+
+export function normaliseMail(email) {
+  if (email.toLowerCase().startsWith('mailto:')) {
+    return email;
+  }
+  return `mailto:${email}`;
+}
+
+export function normalizeTelephone(tel) {
+  if (tel.toLowerCase().startsWith('tel:')) {
+    return tel;
+  }
+  return `tel:${tel}`;
+}
+
+export const URLUtils = {
+  normalizeTelephone,
+  normaliseMail,
+  normalizeUrl,
+  isTelephone,
+  isMail,
+  isUrl,
+};

package/src/helpers/Url/Url.test.js

@@ -3,6 +3,7 @@ import config from '@plone/volto/registry';
 import {
   flattenToAppURL,
   flattenHTMLToAppURL,
+  stripQuerystring,
   toPublicURL,
   getBaseUrl,
   getView,
@@ -84,6 +85,12 @@ describe('Url', () => {
     });
   });
 
+  describe('stripQuerystring', () => {
+    it('returns stripped URL given a URL with a querystring', () => {
+      expect(stripQuerystring('/content?search=test')).toBe('/content');
+    });
+  });
+
   describe('toPublicURL', () => {
     it('returns public URL given the app URL', () => {
       const savedPublicURL = settings.publicURL;

package/src/helpers/Url/urlRegex.js

@@ -2,6 +2,12 @@
 /* eslint-disable  no-confusing-arrow */
 import tlds from 'tlds';
 
+export const mailRegex = () =>
+  /^((mailto:[^<>()/[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
+
+export const telRegex = () =>
+  /^[tel:]*[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s./0-9]*$/g;
+
 const v4 =
   '(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])(?:\\.(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])){3}';
 const v6seg = '[0-9a-fA-F]{1,4}';
@@ -31,7 +37,7 @@ ipRegex.v4 = (opts) =>
 ipRegex.v6 = (opts) =>
   opts && opts.exact ? new RegExp(`^${v6}$`) : new RegExp(v6, 'g');
 
-export default (_opts) => {
+export const urlRegex = (_opts) => {
   const opts = Object.assign({ strict: true }, _opts);
   const protocol = `(?:(?:[a-z]+:)?//)${opts.strict ? '' : '?'}`;
   const auth = '(?:\\S+(?::\\S*)?@)?';

package/src/helpers/index.js

@@ -16,6 +16,7 @@ export {
   addAppURL,
   flattenHTMLToAppURL,
   flattenToAppURL,
+  stripQuerystring,
   toPublicURL,
   isInternalURL,
   getParentUrl,
@@ -26,6 +27,7 @@ export {
   isUrl,
   normalizeUrl,
   removeProtocol,
+  URLUtils,
 } from '@plone/volto/helpers/Url/Url';
 export { generateSitemap } from '@plone/volto/helpers/Sitemap/Sitemap';
 export { generateRobots } from '@plone/volto/helpers/Robots/Robots';
@@ -83,6 +85,7 @@ export {
   withVariationSchemaEnhancer,
   withBlockExtensions,
   applySchemaEnhancer,
+  resolveExtension,
 } from './Extensions';
 export { asyncConnect } from './AsyncConnect';
 export { userHasRoles } from './User/User';

package/src/middleware/api.js

@@ -12,11 +12,13 @@ import qs from 'query-string';
 import config from '@plone/volto/registry';
 
 import {
+  GET_CONTENT,
   LOGIN,
   RESET_APIERROR,
   SET_APIERROR,
 } from '@plone/volto/constants/ActionTypes';
-
+import { changeLanguage } from '@plone/volto/actions';
+import { normalizeLanguageName } from '@plone/volto/helpers';
 let socket = null;
 
 /**
@@ -104,11 +106,15 @@ function sendOnSocket(request) {
  * @returns {Promise} Action promise.
  */
 export default (api) => ({ dispatch, getState }) => (next) => (action) => {
+  const { settings } = config;
+
   if (typeof action === 'function') {
     return action(dispatch, getState);
   }
 
-  const { request, type, mode = 'paralel', ...rest } = action;
+  const { request, type, mode = 'parallel', ...rest } = action;
+  const { subrequest } = action; // We want subrequest remains in `...rest` above
+
   let actionPromise;
 
   if (!request) {
@@ -143,6 +149,9 @@ export default (api) => ({ dispatch, getState }) => (next) => (action) => {
                 type: item.type,
                 headers: item.headers,
                 params: request.params,
+                checkUrl: settings.actions_raising_api_errors.includes(
+                  action.type,
+                ),
               }).then((reqres) => {
                 return [...acc, reqres];
               });
@@ -155,6 +164,9 @@ export default (api) => ({ dispatch, getState }) => (next) => (action) => {
                 type: item.type,
                 headers: item.headers,
                 params: request.params,
+                checkUrl: settings.actions_raising_api_errors.includes(
+                  action.type,
+                ),
               }),
             ),
           )
@@ -163,6 +175,7 @@ export default (api) => ({ dispatch, getState }) => (next) => (action) => {
           type: request.type,
           headers: request.headers,
           params: request.params,
+          checkUrl: settings.actions_raising_api_errors.includes(action.type),
         });
     actionPromise.then(
       (result) => {
@@ -173,6 +186,15 @@ export default (api) => ({ dispatch, getState }) => (next) => (action) => {
             type: RESET_APIERROR,
           });
         }
+        if (type === GET_CONTENT) {
+          const lang = result?.language?.token;
+          if (lang && getState().intl.language !== lang && !subrequest) {
+            const langFileName = normalizeLanguageName(lang);
+            import('~/../locales/' + langFileName + '.json').then((locale) => {
+              dispatch(changeLanguage(lang, locale.default));
+            });
+          }
+        }
         if (type === LOGIN && settings.websockets) {
           const cookies = new Cookies();
           cookies.set('auth_token', result.token, {
@@ -204,7 +226,6 @@ export default (api) => ({ dispatch, getState }) => (next) => (action) => {
         return next({ ...rest, result, type: `${type}_SUCCESS` });
       },
       (error) => {
-        const { settings } = config;
         // Only SRR can set ECONNREFUSED
         if (error.code === 'ECONNREFUSED') {
           next({
@@ -238,6 +259,17 @@ export default (api) => ({ dispatch, getState }) => (next) => (action) => {
           });
         }
 
+        // Redirect
+        else if (error?.code === 301) {
+          next({
+            ...rest,
+            error,
+            statusCode: error.code,
+            connectionRefused: false,
+            type: SET_APIERROR,
+          });
+        }
+
         // The rest
         else if (settings.actions_raising_api_errors.includes(action.type)) {
           if (error?.response?.statusCode === 401) {

package/src/server.jsx

@@ -18,7 +18,7 @@ import { CookiesProvider } from 'react-cookie';
 import cookiesMiddleware from 'universal-cookie-express';
 import debug from 'debug';
 
-import routes from '~/routes';
+import routes from '@root/routes';
 import config from '@plone/volto/registry';
 
 import {
@@ -44,7 +44,7 @@ let locales = {};
 if (config.settings) {
   config.settings.supportedLanguages.forEach((lang) => {
     const langFileName = normalizeLanguageName(lang);
-    import('~/../locales/' + langFileName + '.json').then((locale) => {
+    import('@root/../locales/' + langFileName + '.json').then((locale) => {
       locales = { ...locales, [lang]: locale.default };
     });
   });
@@ -58,7 +58,13 @@ const supported = new locale.Locales(keys(languages), 'en');
 
 const server = express()
   .disable('x-powered-by')
-  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
+  .use(
+    express.static(
+      process.env.BUILD_DIR
+        ? path.join(process.env.BUILD_DIR, 'public')
+        : process.env.RAZZLE_PUBLIC_DIR,
+    ),
+  )
   .head('/*', function (req, res) {
     // Support for HEAD requests. Required by start-test utility in CI.
     res.send('');
@@ -179,8 +185,9 @@ server.get('/*', (req, res) => {
   const { store, api, errorHandler } = req.app.locals;
 
   // @loadable/server extractor
+  const buildDir = process.env.BUILD_DIR || 'build';
   const extractor = new ChunkExtractor({
-    statsFile: path.resolve('build/loadable-stats.json'),
+    statsFile: path.resolve(path.join(buildDir, 'loadable-stats.json')),
     entrypoints: ['client'],
   });
 
@@ -192,11 +199,18 @@ server.get('/*', (req, res) => {
       // The content info is in the store at this point thanks to the asynconnect
       // features, then we can force the current language info into the store when
       // coming from an SSR request
-      const updatedLang =
+      const contentLang =
         store.getState().content.data?.language?.token ||
         config.settings.defaultLanguage;
 
-      store.dispatch(changeLanguage(updatedLang, locales[updatedLang]));
+      const cookie_lang =
+        req.universalCookies.get('I18N_LANGUAGE') ||
+        config.settings.defaultLanguage ||
+        req.headers['accept-language'];
+
+      if (cookie_lang !== contentLang) {
+        store.dispatch(changeLanguage(contentLang, locales[contentLang], req));
+      }
 
       const context = {};
       resetServerContext();

package/src/start-client.jsx

@@ -1,5 +1,5 @@
 import '@plone/volto/config'; // This is the bootstrap for the global config - client side
-import '~/theme';
+import '@root/theme';
 import React from 'react';
 import { hydrate } from 'react-dom';
 import { Provider } from 'react-redux';
@@ -10,7 +10,7 @@ import { ReduxAsyncConnect } from '@plone/volto/helpers/AsyncConnect';
 import { loadableReady } from '@loadable/component';
 import { CookiesProvider } from 'react-cookie';
 import debug from 'debug';
-import routes from '~/routes';
+import routes from '@root/routes';
 import config from '@plone/volto/registry';
 
 import configureStore from '@plone/volto/store';

package/src/store.js

@@ -5,7 +5,7 @@ import { connectRouter, routerMiddleware } from 'connected-react-router';
 import { save, load } from 'redux-localstorage-simple';
 
 import config from '@plone/volto/registry';
-import reducers from '~/reducers';
+import reducers from '@root/reducers';
 
 import { api, crashReporter, blacklistRoutes } from '@plone/volto/middleware';