@plone/volto 17.0.0-alpha.13 → 17.0.0-alpha.15

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/Blocks/ToC/variations/index.js

@@ -1,7 +1,7 @@
 import DefaultTocRenderer from './DefaultTocRenderer';
 import HorizontalMenu from './HorizontalMenu';
 
-export default [
+const ToCVariations = [
   {
     id: 'default',
     title: 'Listing (default)',
@@ -14,3 +14,5 @@ export default [
     view: HorizontalMenu,
   },
 ];
+
+export default ToCVariations;

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.stories.jsx

@@ -1,15 +1,25 @@
 import React from 'react';
-import { Anontools as AnontoolsDefault } from './Anontools';
+import AnontoolsDefault from './Anontools';
 import Wrapper from '@plone/volto/storybook';
 
 const AnontoolsComponent = ({ children, ...args }) => {
   return (
-    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+    <Wrapper
+      anonymous
+      location={{ pathname: '/folder2/folder21/doc212' }}
+      customStore={{
+        content: {
+          data: { '@id': 'http://myreturnURL' },
+          get: {
+            loaded: false,
+            loading: false,
+            error: null,
+          },
+        },
+      }}
+    >
       <div className="ui segment form attached" style={{ width: '400px' }}>
-        <AnontoolsDefault
-          userSession={{ token: null }}
-          content={{ '@id': 'myid' }}
-        />
+        <AnontoolsDefault />
       </div>
     </Wrapper>
   );

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/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/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/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/MessageLabels/MessageLabels.js

@@ -260,6 +260,10 @@ export const messages = defineMessages({
     id: 'Show groups of users below',
     defaultMessage: 'Show groups of users below',
   },
+  urlClipboardCopy: {
+    id: 'Link copied to clipboard',
+    defaultMessage: 'Link copied to clipboard',
+  },
   inspectRelations: {
     id: 'Inspect relations',
     defaultMessage: 'Inspect relations',

package/src/helpers/ScrollToTop/ScrollToTop.jsx

@@ -28,15 +28,17 @@ class ScrollToTop extends React.Component {
    * @memberof ScrollToTop
    */
   componentDidUpdate(prevProps) {
+    const { location } = this.props;
     const noInitialBlocksFocus = // Do not scroll on /edit
       config.blocks?.initialBlocksFocus === null
         ? this.props.location?.pathname.slice(-5) !== '/edit'
         : true;
+
+    const isHash = location?.hash || location?.pathname.hash;
     if (
-      !this.props.location?.hash &&
-      !this.props.location?.pathname.hash &&
+      !isHash &&
       noInitialBlocksFocus &&
-      this.props.location?.pathname !== prevProps.location?.pathname
+      location?.pathname !== prevProps.location?.pathname
     ) {
       window.scrollTo(0, 0);
     }

package/src/helpers/Utils/UseDetectClickOutside.stories.jsx

@@ -0,0 +1,191 @@
+import React from 'react';
+import { useDetectClickOutside } from './useDetectClickOutside';
+import { Portal } from 'react-portal';
+import { usePopper } from 'react-popper';
+import { BlockChooser } from '@plone/volto/components';
+
+function OpenedChooser(props) {
+  const blockChooserRef = useDetectClickOutside({
+    onTriggered: () => props.setOpenMenu(false),
+    triggerKeys: ['Escape'],
+  });
+
+  return (
+    <div ref={blockChooserRef} style={{ marginLeft: '20px' }}>
+      Hello
+    </div>
+  );
+}
+
+function TestComponent(props) {
+  const [isOpenMenu, setOpenMenu] = React.useState(false);
+
+  return (
+    <div style={{ display: 'flex', marginBottom: '20px' }}>
+      <button onClick={() => setOpenMenu(true)}>Click me</button>
+      {isOpenMenu && <OpenedChooser setOpenMenu={setOpenMenu} />}
+    </div>
+  );
+}
+
+function StoryComponent(args) {
+  return (
+    <>
+      <TestComponent />
+      <TestComponent />
+      <TestComponent />
+    </>
+  );
+}
+
+function OpenedChooserWithPortal(props) {
+  const blockChooserRef = useDetectClickOutside({
+    onTriggered: () => props.setOpenMenu(false),
+    triggerKeys: ['Escape'],
+  });
+
+  return (
+    <Portal node={document.getElementById('body')}>
+      <div ref={blockChooserRef}>{`Hello ${props.id}`}</div>
+    </Portal>
+  );
+}
+
+function TestComponentWithPortal(props) {
+  const [isOpenMenu, setOpenMenu] = React.useState(false);
+
+  return (
+    <div style={{ display: 'flex', marginBottom: '20px' }}>
+      <button
+        onClick={() => setOpenMenu(true)}
+      >{`Click me ${props.id}`}</button>
+      {isOpenMenu && (
+        <OpenedChooserWithPortal {...props} setOpenMenu={setOpenMenu} />
+      )}
+    </div>
+  );
+}
+
+function StoryComponentWithPortal(args) {
+  return (
+    <>
+      <TestComponentWithPortal id={1} />
+      <TestComponentWithPortal id={2} />
+      <TestComponentWithPortal id={3} />
+    </>
+  );
+}
+
+function OpenedChooserWithPortalAndPopper(props) {
+  const { showBlockChooser } = props;
+
+  const blockChooserRef = useDetectClickOutside({
+    onTriggered: () => props.setOpenMenu(false),
+    triggerKeys: ['Escape'],
+  });
+
+  return showBlockChooser ? (
+    <BlockChooser
+      // onMutateBlock={onMutateBlock}
+      // currentBlock={block}
+      showRestricted
+      // blocksConfig={blocksConfig}
+      ref={blockChooserRef}
+    />
+  ) : (
+    <div ref={blockChooserRef}>{`Hello ${props.id}`}</div>
+  );
+}
+
+function TestComponentWithPortalAndPopper(props) {
+  const [isOpenMenu, setOpenMenu] = React.useState(false);
+  const [referenceElement, setReferenceElement] = React.useState(null);
+  const [popperElement, setPopperElement] = React.useState(null);
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: 'right',
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [-10, 10],
+        },
+      },
+      {
+        name: 'flip',
+        options: {
+          fallbackPlacements: ['top-start'],
+        },
+      },
+    ],
+  });
+  return (
+    <div style={{ display: 'flex', marginBottom: '20px' }}>
+      <button
+        ref={setReferenceElement}
+        onClick={() => setOpenMenu(true)}
+      >{`Click me ${props.id}`}</button>
+      <Portal node={document.getElementById('body')}>
+        <div
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          {isOpenMenu && (
+            <OpenedChooserWithPortalAndPopper
+              {...props}
+              setOpenMenu={setOpenMenu}
+            />
+          )}
+        </div>
+      </Portal>
+    </div>
+  );
+}
+
+function StoryComponentWithPortalAndPopper(args) {
+  const { showBlockChooser } = args;
+  return (
+    <>
+      <TestComponentWithPortalAndPopper
+        id={1}
+        showBlockChooser={showBlockChooser}
+      />
+      <TestComponentWithPortalAndPopper
+        id={2}
+        showBlockChooser={showBlockChooser}
+      />
+      <TestComponentWithPortalAndPopper
+        id={3}
+        showBlockChooser={showBlockChooser}
+      />
+    </>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {};
+
+export const WithPortal = StoryComponentWithPortal.bind({});
+WithPortal.args = {};
+
+export const WithPortalAndPopper = StoryComponentWithPortalAndPopper.bind({});
+WithPortalAndPopper.args = {};
+
+export const WithPortalAndPopperUsingBlockChooser = StoryComponentWithPortalAndPopper.bind(
+  {},
+);
+WithPortalAndPopperUsingBlockChooser.args = {
+  showBlockChooser: true,
+};
+
+export default {
+  title: 'Internal Components/useDetectClickOutside',
+  component: TestComponent,
+  decorators: [
+    (Story) => (
+      <div style={{ width: '600px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};

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,
@@ -58,8 +58,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,
@@ -69,11 +69,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 {