@plone/volto 15.0.0-alpha.4 → 15.0.0-alpha.8

package/src/config/RichTextEditor/Blocks.jsx

@@ -1,25 +1,30 @@
-import { Map } from 'immutable';
-import { DefaultDraftBlockRenderMap } from 'draft-js';
+export default (props) => {
+  const { draftJs, immutableLib } = props;
+  const { DefaultDraftBlockRenderMap } = draftJs;
+  const { Map } = immutableLib;
 
-const blockRenderMap = Map({
-  callout: {
-    element: 'p',
-  },
-  unstyled: {
-    element: 'div',
-  },
-});
+  const blockRenderMap = Map({
+    callout: {
+      element: 'p',
+    },
+    unstyled: {
+      element: 'div',
+    },
+  });
 
-const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(blockRenderMap);
+  const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(
+    blockRenderMap,
+  );
 
-const blockStyleFn = (contentBlock) => {
-  const type = contentBlock.getType();
-  if (type === 'callout') {
-    return 'callout';
-  }
-  return null;
-};
+  const blockStyleFn = (contentBlock) => {
+    const type = contentBlock.getType();
+    if (type === 'callout') {
+      return 'callout';
+    }
+    return null;
+  };
 
-const listBlockTypes = ['unordered-list-item', 'ordered-list-item'];
+  const listBlockTypes = ['unordered-list-item', 'ordered-list-item'];
 
-export { extendedBlockRenderMap, blockStyleFn, listBlockTypes };
+  return { extendedBlockRenderMap, blockStyleFn, listBlockTypes };
+};

package/src/config/RichTextEditor/Plugins.jsx

@@ -1,19 +1,6 @@
-import { Separator } from 'draft-js-inline-toolbar-plugin';
-
-import createBlockBreakoutPlugin from 'draft-js-block-breakout-plugin';
 import createLinkPlugin from '@plone/volto/components/manage/AnchorPlugin';
-//import createLinkDetectionPlugin from '@plone/volto/components/manage/LinkDetectionPlugin/link-detection-plugin';
-
-import {
-  BlockquoteButton,
-  BoldButton,
-  CalloutButton,
-  ItalicButton,
-  HeadlineTwoButton,
-  HeadlineThreeButton,
-  OrderedListButton,
-  UnorderedListButton,
-} from './Styles';
+
+import Styles from './Styles';
 
 const breakOutOptions = {
   doubleBreakoutBlocks: [
@@ -31,23 +18,43 @@ const breakOutOptions = {
   ],
 };
 
-const blockBreakoutPlugin = createBlockBreakoutPlugin(breakOutOptions);
-const linkPlugin = createLinkPlugin();
 //const linkDetectionPlugin = createLinkDetectionPlugin();
 
-export const inlineToolbarButtons = [
-  BoldButton,
-  ItalicButton,
-  linkPlugin.LinkButton,
-  Separator,
-  HeadlineTwoButton,
-  HeadlineThreeButton,
-  UnorderedListButton,
-  OrderedListButton,
-  BlockquoteButton,
-  CalloutButton,
-];
-
-const plugins = [linkPlugin, blockBreakoutPlugin]; //linkDetectionPlugin
+const plugins = (props) => {
+  const { draftJsInlineToolbarPlugin, draftJsBlockBreakoutPlugin } = props;
+  const { Separator } = draftJsInlineToolbarPlugin;
+  const blockBreakoutPlugin = draftJsBlockBreakoutPlugin.default(
+    breakOutOptions,
+  );
+
+  const linkPlugin = createLinkPlugin({ libraries: props });
+
+  const buttons = Styles(props);
+  const {
+    BoldButton,
+    ItalicButton,
+    HeadlineTwoButton,
+    HeadlineThreeButton,
+    UnorderedListButton,
+    OrderedListButton,
+    BlockquoteButton,
+    CalloutButton,
+  } = buttons;
+
+  const inlineToolbarButtons = [
+    BoldButton,
+    ItalicButton,
+    linkPlugin.LinkButton,
+    Separator,
+    HeadlineTwoButton,
+    HeadlineThreeButton,
+    UnorderedListButton,
+    OrderedListButton,
+    BlockquoteButton,
+    CalloutButton,
+  ];
+
+  return { inlineToolbarButtons, plugins: [linkPlugin, blockBreakoutPlugin] }; //linkDetectionPlugin
+};
 
 export default plugins;

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/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,15 +88,10 @@ 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'],
     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
@@ -136,6 +123,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

@@ -46,7 +46,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 +81,20 @@ 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 &&
+              request.url !== 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';
 
@@ -214,3 +214,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/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

@@ -26,6 +26,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 +84,7 @@ export {
   withVariationSchemaEnhancer,
   withBlockExtensions,
   applySchemaEnhancer,
+  resolveExtension,
 } from './Extensions';
 export { asyncConnect } from './AsyncConnect';
 export { userHasRoles } from './User/User';

package/src/middleware/api.js

@@ -104,11 +104,13 @@ 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;
   let actionPromise;
 
   if (!request) {
@@ -143,6 +145,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 +160,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 +171,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) => {
@@ -204,7 +213,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 +246,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

@@ -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'],
   });
 

package/test-setup-config.js

@@ -18,11 +18,30 @@ import {
   blockStyleFn,
   listBlockTypes,
 } from '@plone/volto/config/RichTextEditor/Blocks';
+import FromHTMLCustomBlockFn from '@plone/volto/config/RichTextEditor/FromHTML';
 import { contentIcons } from '@plone/volto/config/ContentIcons';
 
-import FromHTMLCustomBlockFn from '@plone/volto/config/RichTextEditor/FromHTML';
 import { controlPanelsIcons } from '@plone/volto/config/ControlPanels';
 
+// we need to do a redefinition here because of circular import issues
+// because draftjs-based components are not really tested, this is basically
+// dummy code.
+const richtextEditorSettings = (props) => {
+  return {
+    extendedBlockRenderMap,
+    blockStyleFn,
+    listBlockTypes,
+    FromHTMLCustomBlockFn,
+    // richTextEditorPlugins: plugins,
+    // richTextEditorInlineToolbarButtons: inlineToolbarButtons,
+  };
+};
+
+const richtextViewSettings = {
+  ToHTMLRenderers,
+  ToHTMLOptions,
+};
+
 config.set('settings', {
   apiPath: 'http://localhost:8080/Plone',
   defaultLanguage: 'en',
@@ -30,12 +49,8 @@ config.set('settings', {
   defaultPageSize: 25,
   isMultilingual: false,
   nonContentRoutes,
-  extendedBlockRenderMap,
-  blockStyleFn,
-  listBlockTypes,
-  FromHTMLCustomBlockFn,
-  ToHTMLRenderers,
-  ToHTMLOptions,
+  richtextEditorSettings,
+  richtextViewSettings,
   contentIcons: contentIcons,
   loadables,
   lazyBundles: {

package/theme/themes/pastanaga/extras/blocks.less

@@ -1057,4 +1057,33 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
       height: 28px !important;
     }
   }
+
+  .daterange-facet {
+    .ui.date-input input {
+      height: auto;
+    }
+
+    .ui-button {
+      margin: 0;
+    }
+
+    .DateInput {
+      width: 40%;
+      min-width: 75px;
+    }
+
+    .DateRangePickerInput_arrow_svg {
+      margin: 0 6px;
+    }
+
+    .DateRangePicker_picker {
+      z-index: 10;
+    }
+
+    .radio {
+      display: flex;
+      min-height: 37px;
+      align-items: center;
+    }
+  }
 }