@plone/volto 17.0.0-alpha.3 → 17.0.0-alpha.30

package/packages/volto-slate/src/editor/plugins/StyleMenu/StyleMenu.jsx

@@ -28,13 +28,13 @@ const StyleMenuButton = ({ icon, active, ...props }) => (
   <ToolbarButton {...props} icon={icon} active={active} />
 );
 
-const MenuOpts = ({ editor, toSelect, option, ...rest }) => {
+const MenuOpts = ({ editor, toSelect, option, type }) => {
   const isActive = toSelect.includes(option);
   return (
     <Dropdown.Item
       as="span"
       active={isActive}
-      className={cx({ active: isActive })}
+      className={cx(`${type}-${option.value}`, { active: isActive })}
       {...omit(option, ['isBlock'])}
       data-isblock={option.isBlock}
       onClick={(event, selItem) => {
@@ -118,7 +118,12 @@ const StylingsButton = (props) => {
               content={intl.formatMessage(messages.inlineStyle)}
             />
             {inlineOpts.map((option, index) => (
-              <MenuOpts {...menuItemProps} option={option} key={index} />
+              <MenuOpts
+                {...menuItemProps}
+                type="inline-style"
+                option={option}
+                key={index}
+              />
             ))}
           </>
         )}
@@ -129,7 +134,12 @@ const StylingsButton = (props) => {
               content={intl.formatMessage(messages.paragraphStyle)}
             />
             {blockOpts.map((option, index) => (
-              <MenuOpts {...menuItemProps} option={option} key={index} />
+              <MenuOpts
+                {...menuItemProps}
+                type="block-style"
+                option={option}
+                key={index}
+              />
             ))}
           </>
         )}

package/packages/volto-slate/src/editor/plugins/StyleMenu/utils.js

@@ -72,19 +72,28 @@ export const toggleInlineStyle = (editor, style) => {
 };
 
 export const isBlockStyleActive = (editor, style) => {
+  const keyName = `style-${style}`;
   const sn = Array.from(
     Editor.nodes(editor, {
-      match: (n) => !Editor.isEditor(n) && typeof n.styleName === 'string',
-      mode: 'highest',
+      match: (n) => {
+        const isStyle = typeof n.styleName === 'string' || n[keyName];
+        return !Editor.isEditor(n) && isStyle;
+      },
+      mode: 'all',
     }),
   );
 
   for (const [n] of sn) {
-    if (n.styleName.split(' ').filter((x) => x === style).length > 0) {
+    if (typeof n.styleName === 'string') {
+      if (n.styleName.split(' ').filter((x) => x === style).length > 0) {
+        return true;
+      }
+    } else if (
+      n[keyName] &&
+      keyName.split('-').filter((x) => x === style).length > 0
+    )
       return true;
-    }
   }
-
   return false;
 };
 

package/packages/volto-slate/src/editor/render.jsx

@@ -1,9 +1,19 @@
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
+import { useLocation } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { useIntl } from 'react-intl';
+import { useSelector } from 'react-redux';
 import { Node, Text } from 'slate';
 import cx from 'classnames';
-import { isEmpty, isEqual, omit } from 'lodash';
+import { isEmpty, omit } from 'lodash';
+import { UniversalLink, Toast } from '@plone/volto/components';
+import { messages, addAppURL } from '@plone/volto/helpers';
+import useClipboard from '@plone/volto/hooks/clipboard/useClipboard';
 import config from '@plone/volto/registry';
+import linkSVG from '@plone/volto/icons/link.svg';
+
+import './less/slate.less';
 
 const OMITTED = ['editor', 'path'];
 
@@ -106,13 +116,7 @@ export const serializeNodes = (nodes, getAttributes, extras = {}) => {
           mode="view"
           key={path}
           data-slate-data={node.data ? serializeData(node) : null}
-          attributes={
-            isEqual(path, [0])
-              ? getAttributes
-                ? getAttributes(node, path)
-                : null
-              : null
-          }
+          attributes={getAttributes ? getAttributes(node, path) : null}
           extras={extras}
         >
           {_serializeNodes(Array.from(Node.children(editor, path)))}
@@ -153,3 +157,68 @@ export const serializeNodesToText = (nodes) => {
 
 export const serializeNodesToHtml = (nodes) =>
   renderToStaticMarkup(serializeNodes(nodes));
+
+export const renderLinkElement = (tagName) => {
+  function LinkElement({
+    attributes,
+    children,
+    mode = 'edit',
+    className = null,
+  }) {
+    const { slate = {} } = config.settings;
+    const Tag = tagName;
+    const slug = attributes.id || '';
+    const location = useLocation();
+    const token = useSelector((state) => state.userSession.token);
+    const appPathname = addAppURL(location.pathname);
+    // eslint-disable-next-line no-unused-vars
+    const [copied, copy, setCopied] = useClipboard(
+      appPathname.concat(`#${slug}`),
+    );
+    const intl = useIntl();
+    return !token || slate.useLinkedHeadings === false ? (
+      <Tag {...attributes} className={className} tabIndex={0}>
+        {children}
+      </Tag>
+    ) : (
+      <Tag {...attributes} className={className} tabIndex={0}>
+        {children}
+        {mode === 'view' && slug && (
+          <UniversalLink
+            className="anchor"
+            aria-hidden="true"
+            tabIndex={-1}
+            href={`#${slug}`}
+          >
+            <style>
+              {/* Prettify the unstyled flash of the link icon on development */}
+              {`
+              a.anchor svg {
+                height: var(--anchor-svg-height, 24px);
+              }
+              `}
+            </style>
+            <svg
+              {...linkSVG.attributes}
+              dangerouslySetInnerHTML={{ __html: linkSVG.content }}
+              height={null}
+              onClick={() => {
+                copy();
+
+                toast.info(
+                  <Toast
+                    info
+                    title={intl.formatMessage(messages.success)}
+                    content={intl.formatMessage(messages.urlClipboardCopy)}
+                  />,
+                );
+              }}
+            ></svg>
+          </UniversalLink>
+        )}
+      </Tag>
+    );
+  }
+  LinkElement.displayName = `${tagName}LinkElement`;
+  return LinkElement;
+};

package/packages/volto-slate/src/editor/ui/SlateContextToolbar.jsx

@@ -3,11 +3,11 @@ import Toolbar from './Toolbar';
 
 // A toolbar that conditionally renders itself based on the presense of
 // children
-export default ({ editor, plugins, show }) => {
+export default function SlateContextToolbar({ editor, plugins, show }) {
   if (!show) {
     return null;
   }
 
   const components = plugins.map((plug) => plug(editor)).filter((c) => !!c);
   return components.length ? <Toolbar>{components}</Toolbar> : '';
-};
+}

package/packages/volto-slate/src/editor/ui/index.js

@@ -1,15 +1,15 @@
-export BasicToolbar from './BasicToolbar';
-export BlockButton from './BlockButton';
-export ClearFormattingButton from './ClearFormattingButton';
-export ExpandedToolbar from './ExpandedToolbar';
-export Expando from './Expando';
-export MarkButton from './MarkButton';
-export Menu from './Menu';
-export Separator from './Separator';
-export SlateContextToolbar from './SlateContextToolbar';
-export SlateToolbar from './SlateToolbar';
-export Toolbar from './Toolbar';
-export ToolbarButton from './ToolbarButton';
-export MarkElementButton from './MarkElementButton';
-export PositionedToolbar from './PositionedToolbar';
-export InlineToolbar from './InlineToolbar';
+export { default as BasicToolbar } from './BasicToolbar';
+export { default as BlockButton } from './BlockButton';
+export { default as ClearFormattingButton } from './ClearFormattingButton';
+export { default as ExpandedToolbar } from './ExpandedToolbar';
+export { default as Expando } from './Expando';
+export { default as MarkButton } from './MarkButton';
+export { default as Menu } from './Menu';
+export { default as Separator } from './Separator';
+export { default as SlateContextToolbar } from './SlateContextToolbar';
+export { default as SlateToolbar } from './SlateToolbar';
+export { default as Toolbar } from './Toolbar';
+export { default as ToolbarButton } from './ToolbarButton';
+export { default as MarkElementButton } from './MarkElementButton';
+export { default as PositionedToolbar } from './PositionedToolbar';
+export { default as InlineToolbar } from './InlineToolbar';

package/packages/volto-slate/src/index.js

@@ -8,7 +8,7 @@ import RichTextWidgetView from './widgets/RichTextWidgetView';
 import HtmlSlateWidget from './widgets/HtmlSlateWidget';
 import ObjectByTypeWidget from './widgets/ObjectByTypeWidget';
 
-export default (config) => {
+export default function applyConfig(config) {
   config = [installSlate, installTextBlock, installTableBlock].reduce(
     (acc, apply) => apply(acc),
     config,
@@ -58,4 +58,4 @@ export default (config) => {
   }
 
   return config;
-};
+}

package/packages/volto-slate/src/utils/blocks.js

@@ -125,6 +125,13 @@ export function createEmptyParagraph() {
   };
 }
 
+export function createParagraph(text) {
+  return {
+    type: config.settings.slate.defaultBlockType,
+    children: [{ text }],
+  };
+}
+
 export const isSingleBlockTypeActive = (editor, format) => {
   const [match] = Editor.nodes(editor, {
     match: (n) => n.type === format,

package/packages/volto-slate/src/widgets/RichTextWidget.jsx

@@ -4,13 +4,26 @@
  */
 
 import React from 'react';
+import isUndefined from 'lodash/isUndefined';
+import isString from 'lodash/isString';
 import { FormFieldWrapper } from '@plone/volto/components';
 import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
 
-import { createEmptyParagraph } from '../utils/blocks';
+import { createEmptyParagraph, createParagraph } from '../utils/blocks';
 
 import './style.css';
 
+const getValue = (value) => {
+  if (isUndefined(value) || !isUndefined(value?.data)) {
+    return [createEmptyParagraph()];
+  }
+  // Previously this was a text field
+  if (isString(value)) {
+    return [createParagraph(value)];
+  }
+  return value;
+};
+
 const SlateRichTextWidget = (props) => {
   const {
     id,
@@ -42,13 +55,7 @@ const SlateRichTextWidget = (props) => {
           readOnly={readOnly}
           id={id}
           name={id}
-          value={
-            typeof value === 'undefined' ||
-            typeof value?.data !==
-              'undefined' /* previously this was a Draft block */
-              ? [createEmptyParagraph()]
-              : value
-          }
+          value={getValue(value)}
           onChange={(newValue) => {
             onChange(id, newValue);
           }}

package/razzle.config.js

@@ -8,10 +8,12 @@ const fs = require('fs');
 const RootResolverPlugin = require('./webpack-plugins/webpack-root-resolver');
 const RelativeResolverPlugin = require('./webpack-plugins/webpack-relative-resolver');
 const createAddonsLoader = require('./create-addons-loader');
+const createThemeAddonsLoader = require('./create-theme-addons-loader');
 const AddonConfigurationRegistry = require('./addon-registry');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
 
 const fileLoaderFinder = makeLoaderFinder('file-loader');
 
@@ -132,12 +134,9 @@ const defaultModify = ({
     }
 
     config.plugins.unshift(
-      // restrict moment.js locales to en/de
-      // see https://github.com/jmblog/how-to-optimize-momentjs-with-webpack for details
-      new webpack.ContextReplacementPlugin(
-        /moment[/\\]locale$/,
-        new RegExp(Object.keys(languages).join('|')),
-      ),
+      // restrict moment.js locales to supported languages
+      // see https://momentjs.com/docs/#/use-it/webpack/ for details
+      new MomentLocalesPlugin({ localesToKeep: Object.keys(languages) }),
       new LodashModuleReplacementPlugin({
         shorthands: true,
         cloning: true,
@@ -245,6 +244,28 @@ const defaultModify = ({
     'lodash-es': path.dirname(require.resolve('lodash')),
   };
 
+  const [
+    addonsThemeLoaderVariablesPath,
+    addonsThemeLoaderMainPath,
+  ] = createThemeAddonsLoader(registry.getCustomThemeAddons());
+
+  // Automatic Theme Loading
+  if (registry.theme) {
+    // The themes should be located in `src/theme`
+    const themePath = registry.packages[registry.theme].modulePath;
+    const themeConfigPath = `${themePath}/theme/theme.config`;
+    config.resolve.alias['../../theme.config$'] = themeConfigPath;
+    config.resolve.alias['../../theme.config'] = themeConfigPath;
+
+    // We create an alias for each custom theme insertion point (variables, main)
+    config.resolve.alias[
+      'addonsThemeCustomizationsVariables'
+    ] = addonsThemeLoaderVariablesPath;
+    config.resolve.alias[
+      'addonsThemeCustomizationsMain'
+    ] = addonsThemeLoaderMainPath;
+  }
+
   config.performance = {
     maxAssetSize: 10000000,
     maxEntrypointSize: 10000000,
@@ -318,6 +339,11 @@ const defaultModify = ({
 
   if (config.devServer) {
     config.devServer.static.watch.ignored = /node_modules\/(?!@plone\/volto)/;
+    config.snapshot = {
+      managedPaths: [
+        /^(.+?[\\/]node_modules[\\/](?!(@plone[\\/]volto))(@.+?[\\/])?.+?)[\\/]/,
+      ],
+    };
   }
 
   return config;

package/src/actions/index.js

@@ -71,6 +71,13 @@ export {
   purgeMessages,
 } from '@plone/volto/actions/messages/messages';
 export { getNavigation } from '@plone/volto/actions/navigation/navigation';
+export {
+  createRelations,
+  deleteRelations,
+  queryRelations,
+  getRelationStats,
+} from '@plone/volto/actions/relations/relations';
+export { rebuildRelations } from '@plone/volto/actions/relations/rebuild';
 export { listRoles } from '@plone/volto/actions/roles/roles';
 export {
   getSchema,
@@ -131,6 +138,7 @@ export {
   login,
   loginRenew,
   logout,
+  resetLoginRequest,
 } from '@plone/volto/actions/userSession/userSession';
 export {
   getVocabulary,
@@ -164,3 +172,5 @@ export {
 } from './workingcopy/workingcopy';
 export { getUserSchema } from './userschema/userschema';
 export { getUpgradeInformation, runUpgrade } from './upgrade/upgrade';
+export { getSite } from './site/site';
+export { getNavroot } from './navroot/navroot';

package/src/actions/language/language.js

@@ -1,5 +1,9 @@
 import { updateIntl } from 'react-intl-redux';
-import { normalizeLanguageName, getCookieOptions } from '@plone/volto/helpers';
+import {
+  toGettextLang,
+  toReactIntlLang,
+  getCookieOptions,
+} from '@plone/volto/helpers';
 import Cookies from 'universal-cookie';
 
 export function changeLanguageCookies(language, req) {
@@ -7,18 +11,15 @@ export function changeLanguageCookies(language, req) {
 
   const cookieOptions = getCookieOptions({
     secure: req?.protocol?.startsWith('https') ? true : false,
+    sameSite: 'strict',
   });
 
   if (!req) {
-    cookies.set(
-      'I18N_LANGUAGE',
-      normalizeLanguageName(language) || '',
-      cookieOptions,
-    );
+    cookies.set('I18N_LANGUAGE', toGettextLang(language) || '', cookieOptions);
   } else {
     req.universalCookies.set(
       'I18N_LANGUAGE',
-      normalizeLanguageName(language) || '',
+      toGettextLang(language) || '',
       cookieOptions,
     );
   }
@@ -35,7 +36,7 @@ export function changeLanguage(language, locale, req) {
   changeLanguageCookies(language, req);
 
   return updateIntl({
-    locale: language,
+    locale: toReactIntlLang(language),
     messages: locale,
   });
 }

package/src/actions/navroot/navroot.js

@@ -0,0 +1,16 @@
+import { GET_NAVROOT } from '@plone/volto/constants/ActionTypes';
+
+/**
+ * Get the navigation root information.
+ * @function getNavroot
+ * @returns {Object} navroot
+ */
+export function getNavroot(url) {
+  return {
+    type: GET_NAVROOT,
+    request: {
+      op: 'get',
+      path: `${url}/@navroot`,
+    },
+  };
+}

package/src/actions/navroot/navroot.test.js

@@ -0,0 +1,15 @@
+import { getNavroot } from './navroot';
+import { GET_NAVROOT } from '@plone/volto/constants/ActionTypes';
+
+describe('Breadcrumbs action', () => {
+  describe('getBreadcrumbs', () => {
+    it('should create an action to get the breadcrumbs', () => {
+      const url = 'http://localhost';
+      const action = getNavroot(url);
+
+      expect(action.type).toEqual(GET_NAVROOT);
+      expect(action.request.op).toEqual('get');
+      expect(action.request.path).toEqual(`${url}/@navroot`);
+    });
+  });
+});

package/src/actions/querystringsearch/querystringsearch.js

@@ -31,24 +31,30 @@ export function getQueryStringResults(path, data, subrequest, page) {
     }
   }
 
+  const query = {
+    ...requestData,
+    ...(!requestData.b_size && {
+      b_size: settings.defaultPageSize,
+    }),
+    ...(page && {
+      b_start: requestData.b_size
+        ? data.b_size * (page - 1)
+        : settings.defaultPageSize * (page - 1),
+    }),
+    query: requestData?.query,
+  };
+
   return {
     type: GET_QUERYSTRING_RESULTS,
     subrequest,
     request: {
-      op: 'post',
-      path: `${path}/@querystring-search`,
-      data: {
-        ...requestData,
-        ...(!requestData.b_size && {
-          b_size: settings.defaultPageSize,
-        }),
-        ...(page && {
-          b_start: requestData.b_size
-            ? data.b_size * (page - 1)
-            : settings.defaultPageSize * (page - 1),
-        }),
-        query: requestData?.query,
-      },
+      op: settings.querystringSearchGet ? 'get' : 'post',
+      path: `${path}/@querystring-search${
+        settings.querystringSearchGet
+          ? `?query=${encodeURIComponent(JSON.stringify(query))}`
+          : ''
+      }`,
+      data: settings.querystringSearchGet ? null : query,
     },
   };
 }

package/src/actions/relations/rebuild.js

@@ -0,0 +1,25 @@
+/**
+ * Rebuild relations action.
+ * @module actions/relations/rebuild
+ */
+
+import { REBUILD_RELATIONS } from '@plone/volto/constants/ActionTypes';
+
+/**
+ * Rebuild relation function.
+ * @function rebuildRelations
+ * @param {Boolean} flush Flush intids
+ * @returns {Object} Rebuild relation action.
+ */
+export function rebuildRelations(flush = false) {
+  let path = '/@relations/rebuild';
+  const data = flush === true ? { flush: 1 } : {};
+  return {
+    type: REBUILD_RELATIONS,
+    request: {
+      op: 'post',
+      path: path,
+      data: data,
+    },
+  };
+}

package/src/actions/relations/relations.js

@@ -0,0 +1,103 @@
+/**
+ * Relations actions.
+ * @module actions/relations/relations
+ */
+
+import {
+  CREATE_RELATIONS,
+  DELETE_RELATIONS,
+  LIST_RELATIONS,
+  STATS_RELATIONS,
+} from '@plone/volto/constants/ActionTypes';
+
+/**
+ * Create relation function.
+ * @function createRelations
+ * @param {Object|Array} content Relation data.
+ * @returns {Object} Create relation action.
+ */
+export function createRelations(content) {
+  return {
+    type: CREATE_RELATIONS,
+    request: {
+      op: 'post',
+      path: '/@relations',
+      data: {
+        items: content,
+      },
+    },
+  };
+}
+
+/**
+ * Delete relation function.
+ * @function deleteRelations
+ * @param {string} id Relation id
+ * @returns {Object} Delete relation action.
+ */
+export function deleteRelations(content) {
+  return {
+    type: DELETE_RELATIONS,
+    request: {
+      op: 'del',
+      path: `/@relations`,
+      data: {
+        items: content,
+      },
+    },
+  };
+}
+
+/**
+ * Query relations
+ * @function queryRelations
+ * @param {string} relation Name of relation
+ * @param {boolean} onlyBroken
+ * @returns {Object} List relations action
+ */
+export function queryRelations(
+  relation = null,
+  onlyBroken = false,
+  subrequest = null,
+  source = null,
+  target = null,
+  query_source = null,
+  query_target = null,
+) {
+  let path = '/@relations';
+  var searchParams = new URLSearchParams();
+  relation && searchParams.append('relation', relation);
+  onlyBroken && searchParams.append('onlyBroken', onlyBroken);
+  source && searchParams.append('source', source);
+  target && searchParams.append('target', target);
+  query_source && searchParams.append('query_source', query_source);
+  query_target && searchParams.append('query_target', query_target);
+  const searchParamsToString = searchParams.toString();
+  if (searchParamsToString) {
+    path += `?${searchParamsToString}`;
+  }
+  return {
+    type: LIST_RELATIONS,
+    subrequest,
+    request: {
+      op: 'get',
+      path: path,
+    },
+  };
+}
+
+/** Get relation stats
+ * @function getRelationStats
+ * @returns {Object} Relation stats
+ */
+
+export function getRelationStats() {
+  let path = '/@relations';
+  return {
+    type: STATS_RELATIONS,
+    request: {
+      op: 'get',
+      path: path,
+    },
+  };
+}

package/src/actions/relations/relations.test.js

@@ -0,0 +1,15 @@
+import { queryRelations } from './relations';
+import { LIST_RELATIONS } from '@plone/volto/constants/ActionTypes';
+
+describe('Relations action', () => {
+  describe('queryRelations', () => {
+    it('should create an action to get relations of type "relatedItems"', () => {
+      const relation = 'relatedItems';
+      const action = queryRelations(relation);
+
+      expect(action.type).toEqual(LIST_RELATIONS);
+      expect(action.request.op).toEqual('get');
+      expect(action.request.path).toEqual(`/@relations?relation=${relation}`);
+    });
+  });
+});