@plone/volto 16.21.2 → 16.22.0

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

@@ -5,8 +5,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Segment, Container } from 'semantic-ui-react';
+import { Segment, Container as SemanticContainer } from 'semantic-ui-react';
 import { UniversalLink, PreviewImage } from '@plone/volto/components';
+import config from '@plone/volto/registry';
 
 /**
  * List view component class.
@@ -14,32 +15,37 @@ import { UniversalLink, PreviewImage } from '@plone/volto/components';
  * @params {object} content Content object.
  * @returns {string} Markup of the component.
  */
-const ListingView = ({ content }) => (
-  <Container id="page-home">
-    <section id="content-core">
-      {content.items.map((item) => (
-        <Segment key={item.url} className="listing-item">
-          <Container>
-            <h2>
-              <UniversalLink item={item} title={item['@type']}>
-                {item.title}
-              </UniversalLink>
-            </h2>
-            {item.description && <p>{item.description}</p>}
-          </Container>
-          {item.image_field && (
-            <PreviewImage
-              item={item}
-              size="thumb"
-              alt={item.image_caption ? item.image_caption : item.title}
-              className="ui image"
-            />
-          )}
-        </Segment>
-      ))}
-    </section>
-  </Container>
-);
+const ListingView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container id="page-home">
+      <section id="content-core">
+        {content.items.map((item) => (
+          <Segment key={item.url} className="listing-item">
+            <Container>
+              <h2>
+                <UniversalLink item={item} title={item['@type']}>
+                  {item.title}
+                </UniversalLink>
+              </h2>
+              {item.description && <p>{item.description}</p>}
+            </Container>
+            {item.image_field && (
+              <PreviewImage
+                item={item}
+                size="thumb"
+                alt={item.image_caption ? item.image_caption : item.title}
+                className="ui image"
+              />
+            )}
+          </Segment>
+        ))}
+      </section>
+    </Container>
+  );
+};
 
 /**
  * Property types.

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

@@ -6,9 +6,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
-import { Container } from 'semantic-ui-react';
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
 import PreviewImage from '../PreviewImage/PreviewImage';
+import config from '@plone/volto/registry';
 
 /**
  * Summary view component class.
@@ -16,43 +17,51 @@ import PreviewImage from '../PreviewImage/PreviewImage';
  * @param {Object} content Content object.
  * @returns {string} Markup of the component.
  */
-const SummaryView = ({ content }) => (
-  <Container className="view-wrapper summary-view">
-    <article id="content">
-      <header>
-        <h1 className="documentFirstHeading">{content.title}</h1>
-        {content.description && (
-          <p className="documentDescription">{content.description}</p>
-        )}
-      </header>
-      <section id="content-core">
-        {content.items.map((item) => (
-          <article key={item.url}>
-            <h2>
-              <UniversalLink item={item} title={item['@type']}>
-                {item.title}
-              </UniversalLink>
-            </h2>
-            {item.image_field && (
-              <PreviewImage
-                item={item}
-                alt={item.image_caption ? item.image_caption : item.title}
-                size="thumb"
-                className="ui image floated right clear"
-              />
-            )}
-            {item.description && <p>{item.description}</p>}
-            <p>
-              <UniversalLink item={item}>
-                <FormattedMessage id="Read More…" defaultMessage="Read More…" />
-              </UniversalLink>
-            </p>
-          </article>
-        ))}
-      </section>
-    </article>
-  </Container>
-);
+const SummaryView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container className="view-wrapper summary-view">
+      <article id="content">
+        <header>
+          <h1 className="documentFirstHeading">{content.title}</h1>
+          {content.description && (
+            <p className="documentDescription">{content.description}</p>
+          )}
+        </header>
+        <section id="content-core">
+          {content.items.map((item) => (
+            <article key={item.url}>
+              <h2>
+                <UniversalLink item={item} title={item['@type']}>
+                  {item.title}
+                </UniversalLink>
+              </h2>
+              {item.image_field && (
+                <PreviewImage
+                  item={item}
+                  alt={item.image_caption ? item.image_caption : item.title}
+                  size="thumb"
+                  className="ui image floated right clear"
+                />
+              )}
+              {item.description && <p>{item.description}</p>}
+              <p>
+                <UniversalLink item={item}>
+                  <FormattedMessage
+                    id="Read More…"
+                    defaultMessage="Read More…"
+                  />
+                </UniversalLink>
+              </p>
+            </article>
+          ))}
+        </section>
+      </article>
+    </Container>
+  );
+};
 
 /**
  * Property types.

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

@@ -6,8 +6,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
-import { Container, Table } from 'semantic-ui-react';
+import { Container as SemanticContainer, Table } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
+import config from '@plone/volto/registry';
 
 /**
  * Tabular view component class.
@@ -15,59 +16,64 @@ import { FormattedMessage } from 'react-intl';
  * @param {Object} content Content object.
  * @returns {string} Markup of the component.
  */
-const TabularView = ({ content }) => (
-  <Container className="view-wrapper">
-    <article id="content">
-      <header>
-        <h1 className="documentFirstHeading">{content.title}</h1>
-        {content.description && (
-          <p className="documentDescription">{content.description}</p>
-        )}
-      </header>
-      <section id="content-core">
-        <Table celled padded>
-          <Table.Header>
-            <Table.Row>
-              <Table.HeaderCell>
-                <FormattedMessage id="Title" defaultMessage="Title" />
-              </Table.HeaderCell>
-              <Table.HeaderCell>
-                <FormattedMessage
-                  id="Description"
-                  defaultMessage="Description"
-                />
-              </Table.HeaderCell>
-              <Table.HeaderCell>
-                <FormattedMessage id="Type" defaultMessage="Type" />
-              </Table.HeaderCell>
-              <Table.HeaderCell>
-                <FormattedMessage id="State" defaultMessage="State" />
-              </Table.HeaderCell>
-            </Table.Row>
-          </Table.Header>
-          <Table.Body>
-            {content.items.map((item) => (
-              <Table.Row key={item.url}>
-                <Table.Cell>
-                  <UniversalLink
-                    item={item}
-                    className="summary url"
-                    title={item['@type']}
-                  >
-                    {item.title}
-                  </UniversalLink>
-                </Table.Cell>
-                <Table.Cell>{item.description}</Table.Cell>
-                <Table.Cell>{item['@type']}</Table.Cell>
-                <Table.Cell>{item.review_state}</Table.Cell>
+const TabularView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container className="view-wrapper">
+      <article id="content">
+        <header>
+          <h1 className="documentFirstHeading">{content.title}</h1>
+          {content.description && (
+            <p className="documentDescription">{content.description}</p>
+          )}
+        </header>
+        <section id="content-core">
+          <Table celled padded>
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell>
+                  <FormattedMessage id="Title" defaultMessage="Title" />
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  <FormattedMessage
+                    id="Description"
+                    defaultMessage="Description"
+                  />
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  <FormattedMessage id="Type" defaultMessage="Type" />
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  <FormattedMessage id="State" defaultMessage="State" />
+                </Table.HeaderCell>
               </Table.Row>
-            ))}
-          </Table.Body>
-        </Table>
-      </section>
-    </article>
-  </Container>
-);
+            </Table.Header>
+            <Table.Body>
+              {content.items.map((item) => (
+                <Table.Row key={item.url}>
+                  <Table.Cell>
+                    <UniversalLink
+                      item={item}
+                      className="summary url"
+                      title={item['@type']}
+                    >
+                      {item.title}
+                    </UniversalLink>
+                  </Table.Cell>
+                  <Table.Cell>{item.description}</Table.Cell>
+                  <Table.Cell>{item['@type']}</Table.Cell>
+                  <Table.Cell>{item.review_state}</Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table>
+        </section>
+      </article>
+    </Container>
+  );
+};
 
 /**
  * Property types.

package/src/config/RichTextEditor/Blocks.jsx

@@ -1,4 +1,4 @@
-export default (props) => {
+export default function Blocks(props) {
   const { draftJs, immutableLib } = props;
   const { DefaultDraftBlockRenderMap } = draftJs;
   const { Map } = immutableLib;
@@ -27,4 +27,4 @@ export default (props) => {
   const listBlockTypes = ['unordered-list-item', 'ordered-list-item'];
 
   return { extendedBlockRenderMap, blockStyleFn, listBlockTypes };
-};
+}

package/src/config/RichTextEditor/FromHTML.jsx

@@ -1,8 +1,8 @@
-export default (element) => {
+export default function FromHTMLCustomBlockFn(element) {
   if (element.className === 'callout') {
     return {
       type: 'callout',
     };
   }
   return null;
-};
+}

package/src/config/RichTextEditor/Styles.jsx

@@ -13,7 +13,7 @@ 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';
 
-export default function (props) {
+export default function Styles(props) {
   const createInlineStyleButton = props.draftJsCreateInlineStyleButton.default;
   const createBlockStyleButton = props.draftJsCreateBlockStyleButton.default;
 

package/src/config/index.js

@@ -74,6 +74,7 @@ let config = {
     port,
     // The URL Volto is going to be served (see sensible defaults above)
     publicURL,
+    okRoute: '/ok',
     apiPath,
     apiExpanders: [
       // Add the following expanders for only issuing a single request.

package/src/config/server.js

@@ -1,6 +1,7 @@
 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';
@@ -11,6 +12,7 @@ const settings = {
     filesMiddleware(),
     imagesMiddleware(),
     robotstxtMiddleware(),
+    okMiddleware(),
     sitemapMiddleware(),
     staticsMiddleware(),
   ],

package/src/constants/Indexes.js

@@ -3,7 +3,7 @@
  * @module constants/indexes
  */
 
-export default {
+const Indexes = {
   sortable_title: { label: 'Title', type: 'string', sort_on: 'sortable_title' },
   review_state: { label: 'Review state', type: 'string' },
   ModificationDate: {
@@ -35,6 +35,8 @@ export default {
   Type: { label: 'Type', type: 'string' },
 };
 
+export default Indexes;
+
 export const defaultIndexes = [
   'review_state',
   'ModificationDate',

package/src/express-middleware/devproxy.js

@@ -37,7 +37,7 @@ function getEnv() {
   return _env;
 }
 
-export default function () {
+export default function devProxyMiddleware() {
   const middleware = express.Router();
   const devProxy = createProxyMiddleware(filter, {
     selfHandleResponse: true,

package/src/express-middleware/files.js

@@ -9,7 +9,7 @@ const HEADERS = [
   'Content-Type',
 ];
 
-function fileMiddleware(req, res, next) {
+function filesMiddlewareFn(req, res, next) {
   getAPIResourceWithAuth(req)
     .then((resource) => {
       // Just forward the headers that we need
@@ -24,10 +24,10 @@ function fileMiddleware(req, res, next) {
     .catch(next);
 }
 
-export default function () {
+export default function filesMiddleware() {
   const middleware = express.Router();
 
-  middleware.all(['**/@@download/*', '**/@@display-file/*'], fileMiddleware);
+  middleware.all(['**/@@download/*', '**/@@display-file/*'], filesMiddlewareFn);
   middleware.id = 'filesResourcesProcessor';
   return middleware;
 }

package/src/express-middleware/images.js

@@ -3,7 +3,7 @@ import { getAPIResourceWithAuth } from '@plone/volto/helpers';
 
 const HEADERS = ['content-type', 'content-disposition', 'cache-control'];
 
-function imageMiddleware(req, res, next) {
+function imageMiddlewareFn(req, res, next) {
   getAPIResourceWithAuth(req)
     .then((resource) => {
       // Just forward the headers that we need
@@ -17,11 +17,11 @@ function imageMiddleware(req, res, next) {
     .catch(next);
 }
 
-export default function () {
+export default function imagesMiddleware() {
   const middleware = express.Router();
 
-  middleware.all(['**/@@images/*'], imageMiddleware);
-  middleware.all(['/@portrait/*'], imageMiddleware);
+  middleware.all(['**/@@images/*'], imageMiddlewareFn);
+  middleware.all(['/@portrait/*'], imageMiddlewareFn);
   middleware.id = 'imageResourcesProcessor';
   return middleware;
 }

package/src/express-middleware/ok.js

@@ -0,0 +1,16 @@
+import express from 'express';
+import config from '@plone/volto/registry';
+
+const ok = function (req, res, next) {
+  res.type('text/plain');
+  res.set('Expires', 'Sat, 1 Jan 2000 00:00:00 GMT');
+  res.set('Cache-Control', 'max-age=0, must-revalidate, private');
+  res.send('ok');
+};
+
+export default function () {
+  const middleware = express.Router();
+  middleware.all(config?.settings?.okRoute || '/ok', ok);
+  middleware.id = 'ok';
+  return middleware;
+}

package/src/express-middleware/robotstxt.js

@@ -22,7 +22,7 @@ const envRobots = function (req, res, next) {
   res.send(process.env.VOLTO_ROBOTSTXT);
 };
 
-export default function () {
+export default function robotstxtMiddleware() {
   const middleware = express.Router();
   if (process.env.VOLTO_ROBOTSTXT) {
     middleware.all('**/robots.txt', envRobots);

package/src/express-middleware/sitemap.js

@@ -47,7 +47,7 @@ export const sitemapIndex = function (req, res, next) {
   });
 };
 
-export default function () {
+export default function sitemapMiddleware() {
   const middleware = express.Router();
 
   middleware.all('**/sitemap.xml.gz', sitemap);

package/src/express-middleware/static.js

@@ -2,7 +2,7 @@ import express from 'express';
 import path from 'path';
 import config from '@plone/volto/registry';
 
-const staticMiddleware = express.static(
+const staticMiddlewareFn = express.static(
   process.env.BUILD_DIR
     ? path.join(process.env.BUILD_DIR, 'public')
     : process.env.RAZZLE_PUBLIC_DIR,
@@ -24,9 +24,9 @@ const staticMiddleware = express.static(
   },
 );
 
-export default function () {
+export default function staticsMiddleware() {
   const middleware = express.Router();
-  middleware.all('*', staticMiddleware);
+  middleware.all('*', staticMiddlewareFn);
   middleware.id = 'staticResourcesProcessor';
   return middleware;
 }

package/src/helpers/Extensions/index.js

@@ -1,5 +1,6 @@
 export * from './withBlockSchemaEnhancer';
-export withBlockExtensions, {
+export {
+  default as withBlockExtensions,
   resolveExtension,
   resolveBlockExtensions,
 } from './withBlockExtensions';

package/src/helpers/Url/Url.js

@@ -3,7 +3,7 @@
  * @module helpers/Url
  */
 
-import { last, memoize } from 'lodash';
+import { last, memoize, isArray, isObject, isString } from 'lodash';
 import { urlRegex, telRegex, mailRegex } from './urlRegex';
 import prependHttp from 'prepend-http';
 import config from '@plone/volto/registry';
@@ -251,6 +251,27 @@ export function isUrl(url) {
   return urlRegex().test(url);
 }
 
+/**
+ * Get field url
+ * @method getFieldURL
+ * @param {object} data
+ * @returns {string | any} URL string value if field is of url type or any.
+ */
+export const getFieldURL = (data) => {
+  let url = data;
+  const _isObject = data && isObject(data) && !isArray(data);
+  if (_isObject && data['@type'] === 'URL') {
+    url = data['value'] ?? data['url'] ?? data['href'] ?? data;
+  } else if (_isObject) {
+    url = data['@id'] ?? data['url'] ?? data['href'] ?? data;
+  }
+  if (isArray(data)) {
+    url = data.map((item) => getFieldURL(item));
+  }
+  if (isString(url) && isInternalURL(url)) return flattenToAppURL(url);
+  return url;
+};
+
 /**
  * Normalize URL, adds protocol (if required eg. user has not entered the protocol)
  * @method normalizeUrl

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

@@ -10,6 +10,7 @@ import {
   isCmsUi,
   isInternalURL,
   isUrl,
+  getFieldURL,
   normalizeUrl,
   removeProtocol,
   addAppURL,
@@ -260,6 +261,46 @@ describe('Url', () => {
       expect(isUrl(href)).toBe(false);
     });
   });
+  describe('getFieldURL', () => {
+    it('returns app URL if the field is a string', () => {
+      const field = `${settings.apiPath}/foo/bar`;
+      expect(getFieldURL(field)).toBe('/foo/bar');
+    });
+    it('returns app URL if the field is an object with "@id"', () => {
+      const field = { '@id': '/foo/bar' };
+      expect(getFieldURL(field)).toBe('/foo/bar');
+    });
+    it('returns app URL if the field is an object with type URL', () => {
+      const field = { '@type': 'URL', value: '/foo/bar' };
+      expect(getFieldURL(field)).toBe('/foo/bar');
+    });
+    it('returns app URL if the field is an object with url or href properties', () => {
+      const fieldUrl = { url: '/foo/bar' };
+      const fieldHref = { href: '/foo/bar' };
+      expect(getFieldURL(fieldUrl)).toBe('/foo/bar');
+      expect(getFieldURL(fieldHref)).toBe('/foo/bar');
+    });
+    it('returns array of app URL if the field is an array of strings', () => {
+      const field = [
+        `${settings.apiPath}/foo/bar/1`,
+        `${settings.apiPath}/foo/bar/2`,
+      ];
+      expect(getFieldURL(field)).toStrictEqual(['/foo/bar/1', '/foo/bar/2']);
+    });
+    it('returns array of app URL if the field is an array of objects', () => {
+      const field = [
+        {
+          '@type': 'URL',
+          value: `${settings.apiPath}/foo/bar/1`,
+        },
+        {
+          '@type': 'URL',
+          value: `${settings.apiPath}/foo/bar/2`,
+        },
+      ];
+      expect(getFieldURL(field)).toStrictEqual(['/foo/bar/1', '/foo/bar/2']);
+    });
+  });
   describe('normalizeUrl', () => {
     it('normalizeUrl test', () => {
       const href = `www.example.com`;

package/src/helpers/index.js

@@ -5,9 +5,9 @@
  */
 
 // export { injectLazyLibs } from './Loadable/Loadable';
-export Api from '@plone/volto/helpers/Api/Api';
+export { default as Api } from '@plone/volto/helpers/Api/Api';
 export { getAPIResourceWithAuth } from '@plone/volto/helpers/Api/APIResourceWithAuth';
-export Html from '@plone/volto/helpers/Html/Html';
+export { default as Html } from '@plone/volto/helpers/Html/Html';
 export {
   getAuthToken,
   persistAuthToken,
@@ -59,8 +59,8 @@ export {
   buildStyleClassNamesExtenders,
   getPreviousNextBlock,
 } from '@plone/volto/helpers/Blocks/Blocks';
-export BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
-export ScrollToTop from '@plone/volto/helpers/ScrollToTop/ScrollToTop';
+export { default as BodyClass } from '@plone/volto/helpers/BodyClass/BodyClass';
+export { default as ScrollToTop } from '@plone/volto/helpers/ScrollToTop/ScrollToTop';
 export {
   getBoolean,
   getVocabName,
@@ -70,11 +70,10 @@ export {
   getFieldsVocabulary,
 } from '@plone/volto/helpers/Vocabularies/Vocabularies';
 
-export langmap from './LanguageMap/LanguageMap';
-export Helmet from './Helmet/Helmet';
-export FormValidation, {
-  validateFileUploadSize,
-} from './FormValidation/FormValidation';
+export { default as langmap } from './LanguageMap/LanguageMap';
+export { default as Helmet } from './Helmet/Helmet';
+export { default as FormValidation } from './FormValidation/FormValidation';
+export { validateFileUploadSize } from './FormValidation/FormValidation';
 export {
   difference,
   getColor,
@@ -111,7 +110,7 @@ export { useDetectClickOutside } from './Utils/useDetectClickOutside';
 export { useEvent } from './Utils/useEvent';
 export { usePrevious } from './Utils/usePrevious';
 export { usePagination } from './Utils/usePagination';
-export useUndoManager from './UndoManager/useUndoManager';
+export { default as useUndoManager } from './UndoManager/useUndoManager';
 export { getCookieOptions } from './Cookies/cookies';
 export { getWidgetView } from './Widget/widget';
 export {