@plone/volto 17.0.0-alpha.8 → 17.0.0

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

@@ -13,6 +13,7 @@ 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');
 
@@ -133,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,

package/src/actions/index.js

@@ -75,6 +75,7 @@ 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';
@@ -137,6 +138,7 @@ export {
   login,
   loginRenew,
   logout,
+  resetLoginRequest,
 } from '@plone/volto/actions/userSession/userSession';
 export {
   getVocabulary,
@@ -170,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/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/relations/rebuild.js

@@ -12,14 +12,14 @@ import { REBUILD_RELATIONS } from '@plone/volto/constants/ActionTypes';
  * @returns {Object} Rebuild relation action.
  */
 export function rebuildRelations(flush = false) {
-  let path = '/@relations';
-  var searchParams = new URLSearchParams();
-  searchParams.append('rebuild', '1');
-  flush && searchParams.append('flush', '1');
-  const searchParamsToString = searchParams.toString();
-  path += `?${searchParamsToString}`;
+  let path = '/@relations/rebuild';
+  const data = flush === true ? { flush: 1 } : {};
   return {
     type: REBUILD_RELATIONS,
-    request: { op: 'get', path: path },
+    request: {
+      op: 'post',
+      path: path,
+      data: data,
+    },
   };
 }

package/src/actions/relations/relations.js

@@ -7,6 +7,7 @@ import {
   CREATE_RELATIONS,
   DELETE_RELATIONS,
   LIST_RELATIONS,
+  STATS_RELATIONS,
 } from '@plone/volto/constants/ActionTypes';
 
 /**
@@ -84,3 +85,19 @@ export function queryRelations(
     },
   };
 }
+
+/** 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/site/site.js

@@ -0,0 +1,16 @@
+import { GET_SITE } from '@plone/volto/constants/ActionTypes';
+
+/**
+ * Get the Site information.
+ * @function getSite
+ * @returns {Object} site info
+ */
+export function getSite() {
+  return {
+    type: GET_SITE,
+    request: {
+      op: 'get',
+      path: '/@site',
+    },
+  };
+}

package/src/actions/site/site.test.js

@@ -0,0 +1,15 @@
+import { getSite } from './site';
+import { GET_SITE } from '@plone/volto/constants/ActionTypes';
+
+describe('Site action', () => {
+  describe('getSite', () => {
+    it('should create an action to get the site config', () => {
+      const url = 'http://localhost';
+      const action = getSite(url);
+
+      expect(action.type).toEqual(GET_SITE);
+      expect(action.request.op).toEqual('get');
+      expect(action.request.path).toEqual(`/@site`);
+    });
+  });
+});

package/src/actions/userSession/userSession.js

@@ -3,7 +3,12 @@
  * @module actions/search/search
  */
 
-import { LOGIN, LOGIN_RENEW, LOGOUT } from '@plone/volto/constants/ActionTypes';
+import {
+  LOGIN,
+  LOGIN_RENEW,
+  LOGOUT,
+  RESET_LOGIN_REQUEST,
+} from '@plone/volto/constants/ActionTypes';
 
 /**
  * Login function.
@@ -52,3 +57,14 @@ export function logout() {
     },
   };
 }
+
+/**
+ * Reset login request data function
+ * @function resetLoginRequest
+ * @returns {Object} Get content action
+ */
+export function resetLoginRequest() {
+  return {
+    type: RESET_LOGIN_REQUEST,
+  };
+}