@plone/volto 17.0.0-alpha.12 → 17.0.0-alpha.14

package/src/components/manage/Blocks/Listing/ListingBody.jsx

@@ -1,14 +1,35 @@
-import React, { createRef } from 'react';
+import React, { createRef, useMemo } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import cx from 'classnames';
 import { Pagination, Dimmer, Loader } from 'semantic-ui-react';
+import Slugger from 'github-slugger';
 import { Icon } from '@plone/volto/components';
+import { renderLinkElement } from '@plone/volto-slate/editor/render';
 import config from '@plone/volto/registry';
 import withQuerystringResults from './withQuerystringResults';
 
 import paginationLeftSVG from '@plone/volto/icons/left-key.svg';
 import paginationRightSVG from '@plone/volto/icons/right-key.svg';
 
+const Headline = ({ headlineTag, id, data = {}, listingItems, isEditMode }) => {
+  let attr = { id };
+  const slug = Slugger.slug(data.headline);
+  attr.id = slug || id;
+  const LinkedHeadline = useMemo(() => renderLinkElement(headlineTag), [
+    headlineTag,
+  ]);
+  return (
+    <LinkedHeadline
+      mode={!isEditMode && 'view'}
+      children={data.headline}
+      attributes={attr}
+      className={cx('headline', {
+        emptyListing: !listingItems?.length > 0,
+      })}
+    />
+  );
+};
+
 const ListingBody = withQuerystringResults((props) => {
   const {
     data = {},
@@ -22,6 +43,7 @@ const ListingBody = withQuerystringResults((props) => {
     nextBatch,
     isFolderContentsListing,
     hasLoaded,
+    id,
   } = props;
 
   let ListingBodyTemplate;
@@ -50,13 +72,13 @@ const ListingBody = withQuerystringResults((props) => {
   return (
     <>
       {data.headline && (
-        <HeadlineTag
-          className={cx('headline', {
-            emptyListing: !listingItems?.length > 0,
-          })}
-        >
-          {data.headline}
-        </HeadlineTag>
+        <Headline
+          headlineTag={HeadlineTag}
+          id={id}
+          listingItems={listingItems}
+          data={data}
+          isEditMode={isEditMode}
+        />
       )}
       {listingItems?.length > 0 ? (
         <div ref={listingRef}>

package/src/components/manage/Blocks/Title/View.jsx

@@ -3,19 +3,29 @@
  * @module volto-slate/blocks/Title/TitleBlockView
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
+import Slugger from 'github-slugger';
+import { renderLinkElement } from '@plone/volto-slate/editor/render';
 
 /**
  * View title block component.
  * @class View
  * @extends Component
  */
-const TitleBlockView = ({ properties, metadata }) => {
+const TitleBlockView = ({ properties, metadata, id, children }) => {
+  let attr = { id };
+  const title = (properties || metadata)['title'];
+  const slug = Slugger.slug(title);
+  attr.id = slug || id;
+  const LinkedTitle = useMemo(() => renderLinkElement('h1'), []);
   return (
-    <h1 className="documentFirstHeading">
-      {(metadata || properties)['title'] || ''}
-    </h1>
+    <LinkedTitle
+      mode="view"
+      children={title ?? children}
+      attributes={attr}
+      className={'documentFirstHeading'}
+    />
   );
 };
 

package/src/components/manage/Blocks/Title/View.test.jsx

@@ -1,10 +1,25 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { MemoryRouter } from 'react-router-dom';
 import View from './View';
 
+const mockStore = configureStore();
+
 test('renders a view title component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
   const component = renderer.create(
-    <View properties={{ title: 'My Title' }} />,
+    <Provider store={store}>
+      <MemoryRouter>
+        <View properties={{ title: 'My Title' }} id="a123" />
+      </MemoryRouter>
+    </Provider>,
   );
   const json = component.toJSON();
   expect(json).toMatchSnapshot();

package/src/components/manage/Blocks/ToC/View.jsx

@@ -56,7 +56,14 @@ const View = (props) => {
         const items = [];
         if (!level || !levels.includes(level)) return;
         tocEntriesLayout.push(id);
-        tocEntries[id] = { level, title: title || block.plaintext, items, id };
+        tocEntries[id] = {
+          level,
+          title: title || block.plaintext,
+          items,
+          id,
+          override_toc: block.override_toc,
+          plaintext: block.plaintext,
+        };
         if (level < rootLevel) {
           rootLevel = level;
         }

package/src/components/manage/Blocks/ToC/variations/DefaultTocRenderer.jsx

@@ -8,15 +8,27 @@ import PropTypes from 'prop-types';
 import { map } from 'lodash';
 import { List } from 'semantic-ui-react';
 import { FormattedMessage, injectIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
 import AnchorLink from 'react-anchor-link-smooth-scroll';
+import Slugger from 'github-slugger';
 
-const RenderListItems = ({ items, data }) => {
+const RenderListItems = ({ items, data, history }) => {
   return map(items, (item) => {
-    const { id, level, title } = item;
+    const { id, level, title, override_toc, plaintext } = item;
+    const slug = override_toc
+      ? Slugger.slug(plaintext)
+      : Slugger.slug(title) || id;
     return (
       item && (
         <List.Item key={id} className={`item headline-${level}`} as="li">
-          <AnchorLink href={`#${id}`}>{title}</AnchorLink>
+          <AnchorLink
+            href={`#${slug}`}
+            onClick={(e) => {
+              history.push({ hash: slug });
+            }}
+          >
+            {title}
+          </AnchorLink>
           {item.items?.length > 0 && (
             <List
               ordered={data.ordered}
@@ -38,6 +50,7 @@ const RenderListItems = ({ items, data }) => {
  * @extends Component
  */
 const View = ({ data, tocEntries }) => {
+  const history = useHistory();
   return (
     <>
       {data.title && !data.hide_title ? (
@@ -57,7 +70,7 @@ const View = ({ data, tocEntries }) => {
         bulleted={!data.ordered}
         as={data.ordered ? 'ol' : 'ul'}
       >
-        <RenderListItems items={tocEntries} data={data} />
+        <RenderListItems items={tocEntries} data={data} history={history} />
       </List>
     </>
   );

package/src/components/manage/Blocks/ToC/variations/HorizontalMenu.jsx

@@ -9,15 +9,19 @@ import { map } from 'lodash';
 import { Menu } from 'semantic-ui-react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import AnchorLink from 'react-anchor-link-smooth-scroll';
+import Slugger from 'github-slugger';
 
 const RenderMenuItems = ({ items }) => {
   return map(items, (item) => {
-    const { id, level, title } = item;
+    const { id, level, title, override_toc, plaintext } = item;
+    const slug = override_toc
+      ? Slugger.slug(plaintext)
+      : Slugger.slug(title) || id;
     return (
       item && (
         <React.Fragment key={id}>
           <Menu.Item className={`headline-${level}`}>
-            <AnchorLink href={`#${id}`}>{title}</AnchorLink>
+            <AnchorLink href={`#${slug}`}>{title}</AnchorLink>
           </Menu.Item>
           {item.items?.length > 0 && <RenderMenuItems items={item.items} />}
         </React.Fragment>

package/src/components/manage/Contents/ContentsUploadModal.jsx

@@ -25,6 +25,7 @@ import { readAsDataURL } from 'promise-file-reader';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import { FormattedRelativeDate } from '@plone/volto/components';
 import { createContent } from '@plone/volto/actions';
+import { validateFileUploadSize } from '@plone/volto/helpers';
 
 const Dropzone = loadable(() => import('react-dropzone'));
 
@@ -121,14 +122,18 @@ class ContentsUploadModal extends Component {
    * @returns {undefined}
    */
   onDrop = async (files) => {
+    const validFiles = [];
     for (let i = 0; i < files.length; i++) {
-      await readAsDataURL(files[i]).then((data) => {
-        const fields = data.match(/^data:(.*);(.*),(.*)$/);
-        files[i].preview = fields[0];
-      });
+      if (validateFileUploadSize(files[i], this.props.intl.formatMessage)) {
+        await readAsDataURL(files[i]).then((data) => {
+          const fields = data.match(/^data:(.*);(.*),(.*)$/);
+          files[i].preview = fields[0];
+        });
+        validFiles.push(files[i]);
+      }
     }
     this.setState({
-      files: concat(this.state.files, files),
+      files: concat(this.state.files, validFiles),
     });
   };
 

package/src/components/manage/Toast/Toast.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Icon } from '@plone/volto/components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 
 import successSVG from '@plone/volto/icons/ready.svg';
 import infoSVG from '@plone/volto/icons/info.svg';

package/src/components/manage/Widgets/FileWidget.jsx

@@ -11,7 +11,7 @@ import { injectIntl } from 'react-intl';
 import deleteSVG from '@plone/volto/icons/delete.svg';
 import { Icon, FormFieldWrapper } from '@plone/volto/components';
 import loadable from '@loadable/component';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { flattenToAppURL, validateFileUploadSize } from '@plone/volto/helpers';
 import { defineMessages, useIntl } from 'react-intl';
 
 const imageMimetypes = [
@@ -95,6 +95,7 @@ const FileWidget = (props) => {
    */
   const onDrop = (files) => {
     const file = files[0];
+    if (!validateFileUploadSize(file, intl.formatMessage)) return;
     readAsDataURL(file).then((data) => {
       const fields = data.match(/^data:(.*);(.*),(.*)$/);
       onChange(id, {

package/src/components/theme/Anontools/Anontools.jsx

@@ -1,83 +1,56 @@
-/**
- * Anontools component.
- * @module components/theme/Anontools/Anontools
- */
-
-import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Menu } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { useToken } from '@plone/volto/hooks/userSession/useToken';
+import { useContent } from '@plone/volto/hooks/content/useContent';
 import config from '@plone/volto/registry';
 
-/**
- * Anontools container class.
- */
-export class Anontools extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    token: PropTypes.string,
-    content: PropTypes.shape({
-      '@id': PropTypes.string,
-    }),
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    token: null,
-    content: {
-      '@id': null,
-    },
-  };
+const Anontools = () => {
+  const token = useToken();
+  const { data: content } = useContent();
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { settings } = config;
-    return (
-      !this.props.token && (
-        <Menu pointing secondary floated="right">
+  const { settings } = config;
+  return (
+    !token && (
+      <Menu pointing secondary floated="right">
+        <Menu.Item>
+          <Link
+            aria-label="login"
+            to={`/login${
+              content?.['@id']
+                ? `?return_url=${flattenToAppURL(content['@id'])}`
+                : ''
+            }`}
+          >
+            <FormattedMessage id="Log in" defaultMessage="Log in" />
+          </Link>
+        </Menu.Item>
+        {settings.showSelfRegistration && (
           <Menu.Item>
-            <Link
-              aria-label="login"
-              to={`/login${
-                this.props.content?.['@id']
-                  ? `?return_url=${this.props.content['@id'].replace(
-                      settings.apiPath,
-                      '',
-                    )}`
-                  : ''
-              }`}
-            >
-              <FormattedMessage id="Log in" defaultMessage="Log in" />
+            <Link aria-label="register" to="/register">
+              <FormattedMessage id="Register" defaultMessage="Register" />
             </Link>
           </Menu.Item>
-          {settings.showSelfRegistration && (
-            <Menu.Item>
-              <Link aria-label="register" to="/register">
-                <FormattedMessage id="Register" defaultMessage="Register" />
-              </Link>
-            </Menu.Item>
-          )}
-        </Menu>
-      )
-    );
-  }
-}
+        )}
+      </Menu>
+    )
+  );
+};
+
+export default Anontools;
+
+Anontools.propTypes = {
+  token: PropTypes.string,
+  content: PropTypes.shape({
+    '@id': PropTypes.string,
+  }),
+};
 
-export default connect((state) => ({
-  token: state.userSession.token,
-  content: state.content.data,
-}))(Anontools);
+Anontools.defaultProps = {
+  token: null,
+  content: {
+    '@id': null,
+  },
+};

package/src/components/theme/Anontools/Anontools.test.jsx

@@ -12,7 +12,14 @@ describe('Anontools', () => {
   it('renders an anontools component when no token is specified', () => {
     const store = mockStore({
       userSession: { token: null },
-      content: { data: { '@id': 'myid' } },
+      content: {
+        data: { '@id': 'myid' },
+        get: {
+          loading: false,
+          loaded: true,
+          error: null,
+        },
+      },
       intl: {
         locale: 'en',
         messages: {},
@@ -32,7 +39,14 @@ describe('Anontools', () => {
   it('should not render an anontools component when a token is specified', () => {
     const store = mockStore({
       userSession: { token: '1234' },
-      content: { data: {} },
+      content: {
+        data: {},
+        get: {
+          loading: false,
+          loaded: true,
+          error: null,
+        },
+      },
       intl: {
         locale: 'en',
         messages: {},

package/src/config/index.js

@@ -150,6 +150,7 @@ let config = {
     },
     appExtras: [],
     maxResponseSize: 2000000000, // This is superagent default (200 mb)
+    maxFileUploadSize: null,
     serverConfig,
     storeExtenders: [],
     showTags: true,

package/src/helpers/Extensions/withBlockSchemaEnhancer.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { defineMessages } from 'react-intl';
 import { useIntl } from 'react-intl';
+import { find, isEmpty } from 'lodash';
 import config from '@plone/volto/registry';
 import { cloneDeepSchema } from '@plone/volto/helpers/Utils/Utils';
 
@@ -291,20 +292,23 @@ export const EMPTY_STYLES_SCHEMA = {
 };
 
 /**
- * Creates the `styles` field and fieldset in a schema
+ * Adds the `styles` field and 'styling' fieldset in a given schema
  */
 export const addStyling = ({ schema, formData, intl }) => {
-  schema.fieldsets.push({
-    id: 'styling',
-    title: intl.formatMessage(messages.styling),
-    fields: ['styles'],
-  });
+  if (isEmpty(find(schema.fieldsets, { id: 'styling' }))) {
+    schema.fieldsets.push({
+      id: 'styling',
+      title: intl.formatMessage(messages.styling),
+      fields: ['styles'],
+    });
+
+    schema.properties.styles = {
+      widget: 'object',
+      title: intl.formatMessage(messages.styling),
+      schema: cloneDeepSchema(EMPTY_STYLES_SCHEMA),
+    };
+  }
 
-  schema.properties.styles = {
-    widget: 'object',
-    title: intl.formatMessage(messages.styling),
-    schema: EMPTY_STYLES_SCHEMA,
-  };
   return schema;
 };
 

package/src/helpers/Extensions/withBlockSchemaEnhancer.test.js

@@ -2,6 +2,7 @@ import {
   addExtensionFieldToSchema,
   applySchemaEnhancer,
   composeSchema,
+  addStyling,
 } from './withBlockSchemaEnhancer';
 
 import config from '@plone/volto/registry';
@@ -246,3 +247,147 @@ describe('composeSchema', () => {
     expect(res).toStrictEqual([6, 9]);
   });
 });
+
+describe('addStyling', () => {
+  it('returns an enhanced schema with the styling wrapper object on it', () => {
+    const intl = { formatMessage: () => 'Styling' };
+
+    const schema = {
+      fieldsets: [
+        {
+          id: 'default',
+          title: 'Default',
+          fields: [],
+        },
+      ],
+      properties: {},
+      required: [],
+    };
+
+    const result = addStyling({ schema, intl });
+
+    expect(result).toStrictEqual({
+      fieldsets: [
+        { id: 'default', title: 'Default', fields: [] },
+        { id: 'styling', title: 'Styling', fields: ['styles'] },
+      ],
+      properties: {
+        styles: {
+          widget: 'object',
+          title: 'Styling',
+          schema: {
+            fieldsets: [
+              {
+                fields: [],
+                id: 'default',
+                title: 'Default',
+              },
+            ],
+            properties: {},
+            required: [],
+          },
+        },
+      },
+      required: [],
+    });
+  });
+
+  it('multiple schema enhancers', () => {
+    const intl = { formatMessage: () => 'Styling' };
+
+    const schema1 = {
+      fieldsets: [
+        {
+          id: 'default',
+          title: 'Default',
+          fields: [],
+        },
+      ],
+      properties: {},
+      required: [],
+    };
+
+    const schema2 = {
+      fieldsets: [
+        {
+          id: 'default',
+          title: 'Default',
+          fields: [],
+        },
+      ],
+      properties: {},
+      required: [],
+    };
+
+    const result = addStyling({ schema: schema1, intl });
+
+    // We add some fields to the styling schema
+    result.properties.styles.schema.properties.align = {
+      widget: 'align',
+      title: 'align',
+      actions: ['left', 'right', 'center'],
+      default: 'left',
+    };
+
+    result.properties.styles.schema.fieldsets[0].fields = ['align'];
+
+    const result2 = addStyling({ schema: schema2, intl });
+
+    expect(result).toStrictEqual({
+      fieldsets: [
+        { id: 'default', title: 'Default', fields: [] },
+        { id: 'styling', title: 'Styling', fields: ['styles'] },
+      ],
+      properties: {
+        styles: {
+          widget: 'object',
+          title: 'Styling',
+          schema: {
+            fieldsets: [
+              {
+                fields: ['align'],
+                id: 'default',
+                title: 'Default',
+              },
+            ],
+            properties: {
+              align: {
+                widget: 'align',
+                title: 'align',
+                actions: ['left', 'right', 'center'],
+                default: 'left',
+              },
+            },
+            required: [],
+          },
+        },
+      },
+      required: [],
+    });
+
+    expect(result2).toStrictEqual({
+      fieldsets: [
+        { id: 'default', title: 'Default', fields: [] },
+        { id: 'styling', title: 'Styling', fields: ['styles'] },
+      ],
+      properties: {
+        styles: {
+          widget: 'object',
+          title: 'Styling',
+          schema: {
+            fieldsets: [
+              {
+                fields: [],
+                id: 'default',
+                title: 'Default',
+              },
+            ],
+            properties: {},
+            required: [],
+          },
+        },
+      },
+      required: [],
+    });
+  });
+});

package/src/helpers/FormValidation/FormValidation.js

@@ -1,5 +1,8 @@
 import { map, uniq, keys, intersection, isEmpty } from 'lodash';
 import { messages } from '../MessageLabels/MessageLabels';
+import config from '@plone/volto/registry';
+import { toast } from 'react-toastify';
+import Toast from '@plone/volto/components/manage/Toast/Toast';
 
 /**
  * Will return the intl message if invalid
@@ -369,3 +372,29 @@ class FormValidation {
 }
 
 export default FormValidation;
+
+/**
+ * Check if a file upload is within the maximum size limit.
+ * @param {File} file
+ * @param {Function} intlFunc
+ * @returns {Boolean}
+ */
+export const validateFileUploadSize = (file, intlFunc) => {
+  const isValid =
+    !config.settings.maxFileUploadSize ||
+    file.size <= config.settings.maxFileUploadSize;
+  if (!isValid) {
+    toast.error(
+      <Toast
+        error
+        title={intlFunc(messages.error)}
+        content={intlFunc(messages.fileTooLarge, {
+          limit: `${Math.floor(
+            config.settings.maxFileUploadSize / 1024 / 1024,
+          )}MB`,
+        })}
+      />,
+    );
+  }
+  return isValid;
+};