@plone/volto 17.0.0-alpha.20 → 17.0.0-alpha.22

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

@@ -5,12 +5,8 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container as SemanticContainer, Image } from 'semantic-ui-react';
-import {
-  hasBlocksData,
-  flattenToAppURL,
-  flattenHTMLToAppURL,
-} from '@plone/volto/helpers';
+import { Container as SemanticContainer } from 'semantic-ui-react';
+import { hasBlocksData, flattenHTMLToAppURL } from '@plone/volto/helpers';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 import config from '@plone/volto/registry';
 
@@ -21,6 +17,7 @@ import config from '@plone/volto/registry';
  * @returns {string} Markup of the component.
  */
 const NewsItemView = ({ content }) => {
+  const Image = config.getComponent({ name: 'Image' }).component;
   const Container =
     config.getComponent({ name: 'Container' }).component || SemanticContainer;
 
@@ -41,15 +38,12 @@ const NewsItemView = ({ content }) => {
       )}
       {content.image && (
         <Image
-          className="documentImage"
+          className="documentImage ui right floated image"
           alt={content.title}
           title={content.title}
-          src={
-            content.image['content-type'] === 'image/svg+xml'
-              ? flattenToAppURL(content.image.download)
-              : flattenToAppURL(content.image.scales.mini.download)
-          }
-          floated="right"
+          item={content}
+          imageField="image"
+          responsive={true}
         />
       )}
       {content.text && (

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

@@ -8,7 +8,6 @@ import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
 import { Container as SemanticContainer } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
-import PreviewImage from '../PreviewImage/PreviewImage';
 import config from '@plone/volto/registry';
 
 /**
@@ -20,6 +19,7 @@ import config from '@plone/volto/registry';
 const SummaryView = ({ content }) => {
   const Container =
     config.getComponent({ name: 'Container' }).component || SemanticContainer;
+  const PreviewImage = config.getComponent({ name: 'PreviewImage' }).component;
 
   return (
     <Container className="view-wrapper summary-view">
@@ -41,9 +41,10 @@ const SummaryView = ({ content }) => {
               {item.image_field && (
                 <PreviewImage
                   item={item}
-                  alt={item.image_caption ? item.image_caption : item.title}
-                  size="thumb"
+                  alt={item.image_caption}
                   className="ui image floated right clear"
+                  responsive={true}
+                  loading="lazy"
                 />
               )}
               {item.description && <p>{item.description}</p>}

package/src/config/Blocks.jsx

@@ -75,6 +75,7 @@ import {
   DateRangeFacetFilterListEntry,
 } from '@plone/volto/components/manage/Blocks/Search/components';
 import getListingBlockAsyncData from '@plone/volto/components/manage/Blocks/Listing/getAsyncData';
+import { getImageBlockSizes } from '@plone/volto/components/manage/Blocks/Image/utils';
 
 // block sidebar schemas (not the Dexterity Layout block settings schemas)
 import HeroImageLeftBlockSchema from '@plone/volto/components/manage/Blocks/HeroImageLeft/schema';
@@ -258,6 +259,7 @@ const blocksConfig = {
     restricted: false,
     mostUsed: true,
     sidebarTab: 1,
+    getSizes: getImageBlockSizes,
   },
   leadimage: {
     id: 'leadimage',

package/src/config/Components.jsx

@@ -1,6 +1,8 @@
-import { App, PreviewImage } from '@plone/volto/components';
+import { App, PreviewImage, Image } from '@plone/volto/components';
 
+// Register components.
 export const components = {
   PreviewImage: { component: PreviewImage },
   App: { component: App },
+  Image: { component: Image },
 };

package/src/config/index.js~

@@ -0,0 +1,223 @@
+/**
+ * Config.
+ * @module config
+ */
+import { parse as parseUrl } from 'url';
+import { defaultWidget, widgetMapping } from './Widgets';
+import {
+  layoutViews,
+  contentTypesViews,
+  defaultView,
+  errorViews,
+  layoutViewsNamesMapping,
+} from './Views';
+import { nonContentRoutes } from './NonContentRoutes';
+import {
+  groupBlocksOrder,
+  requiredBlocks,
+  blocksConfig,
+  initialBlocks,
+  initialBlocksFocus,
+} from './Blocks';
+import { components } from './Components';
+import { loadables } from './Loadables';
+import { workflowMapping } from './Workflows';
+
+import { contentIcons } from './ContentIcons';
+import { styleClassNameConverters, styleClassNameExtenders } from './Style';
+import {
+  controlPanelsIcons,
+  filterControlPanels,
+  filterControlPanelsSchema,
+} from './ControlPanels';
+
+import { richtextEditorSettings, richtextViewSettings } from './RichTextEditor';
+
+import applyAddonConfiguration, { addonsInfo } from 'load-volto-addons';
+
+import ConfigRegistry from '@plone/volto/registry';
+
+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);
+  return `${apiPathURL.protocol}//${apiPathURL.hostname}${
+    apiPathURL.port ? `:${apiPathURL.port}` : ''
+  }`;
+};
+
+// Sensible defaults for publicURL
+// 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
+const publicURL =
+  process.env.RAZZLE_PUBLIC_URL ||
+  (__DEVELOPMENT__
+    ? `http://${host}:${port}`
+    : getServerURL(process.env.RAZZLE_API_PATH) || `http://${host}:${port}`);
+
+const serverConfig =
+  typeof __SERVER__ !== 'undefined' && __SERVER__
+    ? require('./server').default
+    : {};
+
+let config = {
+  settings: {
+    host,
+    port,
+    // The URL Volto is going to be served (see sensible defaults above)
+    publicURL,
+    apiPath,
+    apiExpanders: [
+      // Add the following expanders for only issuing a single request.
+      // https://6.docs.plone.org/volto/configuration/settings-reference.html#term-apiExpanders
+      // {
+      //   match: '',
+      //   GET_CONTENT: ['breadcrumbs', 'navigation', 'actions', 'types'],
+      // },
+    ],
+    // Internal proxy to bypass CORS *while developing*. NOT intended for production use.
+    // In production is recommended you use a Seamless mode deployment using a web server in
+    // front of both the frontend and the backend so you can bypass CORS safely.
+    // https://6.docs.plone.org/volto/deploying/seamless-mode.html
+    devProxyToApiPath:
+      process.env.RAZZLE_DEV_PROXY_API_PATH ||
+      process.env.RAZZLE_INTERNAL_API_PATH ||
+      process.env.RAZZLE_API_PATH ||
+      'http://localhost:8080/Plone', // Set it to '' for disabling the proxy
+    // proxyRewriteTarget Set it for set a custom target for the proxy or overide the internal VHM rewrite
+    // proxyRewriteTarget: '/VirtualHostBase/http/localhost:8080/Plone/VirtualHostRoot/_vh_api'
+    // proxyRewriteTarget: 'https://myvoltositeinproduction.com'
+    proxyRewriteTarget: process.env.RAZZLE_PROXY_REWRITE_TARGET || undefined,
+    // apiPath: process.env.RAZZLE_API_PATH || 'http://localhost:8000', // for Volto reference
+    // 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,
+    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,
+    richtextEditorSettings, // Part of draftjs support, to be removed
+    richtextViewSettings, // Part of draftjs support, to be removed
+    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
+    viewableInBrowserObjects: [], //ex: ['File']. List of content-types for which the file will be displayed in browser if the user is not authenticated
+    listingPreviewImageField: 'image', // deprecated from Volto 14 onwards
+    openExternalLinkInNewTab: false,
+    notSupportedBrowsers: ['ie'],
+    defaultPageSize: 25,
+    isMultilingual: false,
+    supportedLanguages: ['en'],
+    defaultLanguage: 'en',
+    navDepth: 1,
+    expressMiddleware: serverConfig.expressMiddleware, // BBB
+    defaultBlockType: 'slate',
+    verticalFormTabs: false,
+    useEmailAsLogin: false,
+    persistentReducers: ['blocksClipboard'],
+    initialReducersBlacklist: [], // reducers in this list won't be hydrated in windows.__data
+    asyncPropsExtenders: [], // per route asyncConnect customizers
+    contentIcons: contentIcons,
+    loadables,
+    lazyBundles: {
+      cms: [
+        'prettierStandalone',
+        'prettierParserHtml',
+        'prismCore',
+        'toastify',
+        'reactSelect',
+        'reactBeautifulDnd',
+        // 'diffLib',
+      ],
+      draftEditor: [
+        'immutableLib',
+        'draftJs',
+        'draftJsLibIsSoftNewlineEvent',
+        'draftJsFilters',
+        'draftJsInlineToolbarPlugin',
+        'draftJsImportHtml',
+        'draftJsBlockBreakoutPlugin',
+      ],
+    },
+    appExtras: [],
+    maxResponseSize: 2000000000, // This is superagent default (200 mb)
+    serverConfig,
+    storeExtenders: [],
+    showTags: true,
+    controlpanels: [],
+    controlPanelsIcons,
+    filterControlPanels,
+    filterControlPanelsSchema,
+    externalRoutes: [
+      // URL to be considered as external
+      // {
+      //   match: {
+      //     path: '/news',
+      //     exact: false,
+      //     strict: false,
+      //   },
+      //   url(payload) {
+      //     return payload.location.pathname;
+      //   },
+      // },
+    ],
+    showSelfRegistration: false,
+    contentMetadataTagsImageField: 'image',
+    hasWorkingCopySupport: false,
+    maxUndoLevels: 200, // undo history size for the main form
+    addonsInfo: addonsInfo,
+    workflowMapping,
+    errorHandlers: [], // callables for unhandled errors
+    styleClassNameConverters,
+    hashLinkSmoothScroll: false,
+    styleClassNameExtenders,
+    querystringSearchGet: false,
+  },
+  experimental: {
+    addBlockButton: {
+      enabled: false,
+    },
+  },
+  widgets: {
+    ...widgetMapping,
+    default: defaultWidget,
+  },
+  views: {
+    layoutViews,
+    contentTypesViews,
+    defaultView,
+    errorViews,
+    layoutViewsNamesMapping,
+  },
+  blocks: {
+    requiredBlocks,
+    blocksConfig,
+    groupBlocksOrder,
+    initialBlocks,
+    initialBlocksFocus,
+    showEditBlocksInBabelView: false,
+  },
+  addonRoutes: [],
+  addonReducers: {},
+  components,
+};
+
+ConfigRegistry.settings = config.settings;
+ConfigRegistry.experimental = config.experimental;
+ConfigRegistry.blocks = config.blocks;
+ConfigRegistry.views = config.views;
+ConfigRegistry.widgets = config.widgets;
+ConfigRegistry.addonRoutes = config.addonRoutes;
+ConfigRegistry.addonReducers = config.addonReducers;
+ConfigRegistry.components = config.components;
+
+applyAddonConfiguration(ConfigRegistry);

package/src/express-middleware/files.js

@@ -2,11 +2,13 @@ import express from 'express';
 import { getAPIResourceWithAuth } from '@plone/volto/helpers';
 
 const HEADERS = [
-  'Accept-Ranges',
-  'Cache-Control',
-  'Content-Disposition',
-  'Content-Range',
-  'Content-Type',
+  'accept-ranges',
+  'cache-control',
+  'content-disposition',
+  'content-range',
+  'content-type',
+  'x-sendfile',
+  'x-accel-redirect',
 ];
 
 function filesMiddlewareFn(req, res, next) {
@@ -14,7 +16,7 @@ function filesMiddlewareFn(req, res, next) {
     .then((resource) => {
       // Just forward the headers that we need
       HEADERS.forEach((header) => {
-        if (resource.get(header)) {
+        if (resource.headers[header]) {
           res.set(header, resource.get(header));
         }
       });

package/src/express-middleware/images.js

@@ -1,7 +1,13 @@
 import express from 'express';
 import { getAPIResourceWithAuth } from '@plone/volto/helpers';
 
-const HEADERS = ['content-type', 'content-disposition', 'cache-control'];
+const HEADERS = [
+  'content-type',
+  'content-disposition',
+  'cache-control',
+  'x-sendfile',
+  'x-accel-redirect',
+];
 
 function imageMiddlewareFn(req, res, next) {
   getAPIResourceWithAuth(req)

package/src/helpers/MessageLabels/MessageLabels.js

@@ -312,6 +312,12 @@ export const messages = defineMessages({
     id: 'flush intIds and rebuild relations',
     defaultMessage: 'flush intIds and rebuild relations',
   },
+  flushAndRebuildRelationsHints: {
+    id: 'flushAndRebuildRelationsHints',
+    defaultMessage:
+      '<ul><li>Regenerate intIds (tokens of relations in relation catalog)</li><li>Rebuild relations</li></ul><p>Check the log for details!</p><p><b>Warning</b>: If you have add-ons relying on intIds, you should not flush them.</p>',
+  },
+
   addPotentialTargetsPath: {
     id: 'target path',
     defaultMessage: 'target path',

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/reducers/relations/relations.js

@@ -103,7 +103,7 @@ export default function relations(state = initialState, action = {}) {
                 error: null,
                 relations: action.result.relations
                   ? action.result.relations
-                  : state.relations,
+                  : [],
                 stats: null,
               },
             },

package/test-setup-config.js

@@ -173,7 +173,15 @@ config.set('widgets', {
   default: BaseWidget('default'),
 });
 
-config.set('components', {});
+config.set('components', {
+  PreviewImage: {
+    component: (props) => <img alt="PreviewImage component mock" {...props} />,
+  },
+  Image: {
+    // eslint-disable-next-line jsx-a11y/img-redundant-alt
+    component: (props) => <img alt="Image component mock" {...props} />,
+  },
+});
 config.set('experimental', {
   addBlockButton: {
     enabled: false,

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

@@ -22,7 +22,7 @@
 
 .block .block:not(.inner)::before {
   position: absolute;
-  z-index: -1;
+  z-index: auto;
   top: -9px;
   left: -9px;
   width: ~'calc(100% + 18px)';
@@ -811,6 +811,7 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
 .listing-item a {
   display: flex;
   width: 100%;
+  align-items: flex-start;
 
   @media only screen and (max-width: (@largestMobileScreen)) {
     flex-direction: column;
@@ -822,6 +823,7 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
 
   img {
     width: 15%;
+    height: auto;
     margin-right: 20px;
 
     @media only screen and (max-width: (@largestMobileScreen)) {

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

@@ -645,6 +645,11 @@ body.has-toolbar-collapsed .mobile-menu {
   transition: transform 0.5s cubic-bezier(0.09, 0.11, 0.24, 0.91);
 }
 
+img.responsive {
+  max-width: 100%;
+  height: auto;
+}
+
 // Deprecated as per https://github.com/plone/volto/issues/1265
 // @import 'utils';
 @import (multiple) '../extras/fonts';

package/packages/volto-slate/build/messages/src/blocks/Table/TableBlockEdit.json

@@ -1,90 +0,0 @@
-[
-  {
-    "id": "Insert row before",
-    "defaultMessage": "Insert row before"
-  },
-  {
-    "id": "Insert row after",
-    "defaultMessage": "Insert row after"
-  },
-  {
-    "id": "Delete row",
-    "defaultMessage": "Delete row"
-  },
-  {
-    "id": "Insert col before",
-    "defaultMessage": "Insert col before"
-  },
-  {
-    "id": "Insert col after",
-    "defaultMessage": "Insert col after"
-  },
-  {
-    "id": "Delete col",
-    "defaultMessage": "Delete col"
-  },
-  {
-    "id": "Hide headers",
-    "defaultMessage": "Hide headers"
-  },
-  {
-    "id": "Make the table sortable",
-    "defaultMessage": "Make the table sortable"
-  },
-  {
-    "id": "Visible only in view mode",
-    "defaultMessage": "Visible only in view mode"
-  },
-  {
-    "id": "Fixed width table cells",
-    "defaultMessage": "Fixed width table cells"
-  },
-  {
-    "id": "Make the table compact",
-    "defaultMessage": "Make the table compact"
-  },
-  {
-    "id": "Reduce complexity",
-    "defaultMessage": "Reduce complexity"
-  },
-  {
-    "id": "Divide each row into separate cells",
-    "defaultMessage": "Divide each row into separate cells"
-  },
-  {
-    "id": "Table color inverted",
-    "defaultMessage": "Table color inverted"
-  },
-  {
-    "id": "Stripe alternate rows with color",
-    "defaultMessage": "Stripe alternate rows with color"
-  },
-  {
-    "id": "Left",
-    "defaultMessage": "Left"
-  },
-  {
-    "id": "Center",
-    "defaultMessage": "Center"
-  },
-  {
-    "id": "Right",
-    "defaultMessage": "Right"
-  },
-  {
-    "id": "Bottom",
-    "defaultMessage": "Bottom"
-  },
-  {
-    "id": "Middle",
-    "defaultMessage": "Middle"
-  },
-  {
-    "id": "Top",
-    "defaultMessage": "Top"
-  },
-  {
-    "id": "Table",
-    "defaultMessage": "Table"
-  }
-]

package/packages/volto-slate/build/messages/src/blocks/Text/DefaultTextBlockEditor.json

@@ -1,6 +0,0 @@
-[
-  {
-    "id": "Type text…",
-    "defaultMessage": "Type text…"
-  }
-]

package/packages/volto-slate/build/messages/src/blocks/Text/DetachedTextBlockEditor.json

@@ -1,6 +0,0 @@
-[
-  {
-    "id": "Type text…",
-    "defaultMessage": "Type text…"
-  }
-]

package/packages/volto-slate/build/messages/src/blocks/Text/SlashMenu.json

@@ -1,6 +0,0 @@
-[
-  {
-    "id": "No matching blocks",
-    "defaultMessage": "No matching blocks"
-  }
-]

package/packages/volto-slate/build/messages/src/editor/plugins/AdvancedLink/index.json

@@ -1,10 +0,0 @@
-[
-  {
-    "id": "Edit link",
-    "defaultMessage": "Edit link"
-  },
-  {
-    "id": "Remove link",
-    "defaultMessage": "Remove link"
-  }
-]

package/packages/volto-slate/build/messages/src/editor/plugins/Link/index.json

@@ -1,10 +0,0 @@
-[
-  {
-    "id": "Add link",
-    "defaultMessage": "Add link"
-  },
-  {
-    "id": "Edit link",
-    "defaultMessage": "Edit link"
-  }
-]