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

package/CHANGELOG.md

@@ -8,6 +8,23 @@
 
 <!-- towncrier release notes start -->
 
+## 17.0.0-alpha.15 (2023-06-28)
+
+### Breaking
+
+- Use proper heading tag (depending on the headline) in default listing template @sneridagh [#4848](https://github.com/plone/volto/issues/4848)
+
+### Bugfix
+
+- Remove anonymous function calls. Remove default exports from. @sneridagh [#4917](https://github.com/plone/volto/issues/4917)
+- Fix Annontools StoryBook @sneridagh [#4921](https://github.com/plone/volto/issues/4921)
+- Fix the experimental add new block button position, compensate the icon width to center it correctly @sneridagh [#4924](https://github.com/plone/volto/issues/4924)
+
+### Internal
+
+- Add Storybook story for useDetectClickOutside hook with several demos @sneridagh [#4923](https://github.com/plone/volto/issues/4923)
+
+
 ## 17.0.0-alpha.14 (2023-06-23)
 
 ### Feature

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "17.0.0-alpha.14",
+  "version": "17.0.0-alpha.15",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"

package/packages/volto-slate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone/volto-slate",
-  "version": "17.0.0-alpha.14",
+  "version": "17.0.0-alpha.15",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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

@@ -1,3 +1,3 @@
-export saveSlateBlockSelection from './selection';
+export { default as saveSlateBlockSelection } from './selection';
 export * from './content';
 export * from './plugins';

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

@@ -35,7 +35,7 @@ import textSVG from '@plone/volto/icons/subtext.svg';
 
 export { TextBlockView, TextBlockEdit, TextBlockSchema };
 
-export default (config) => {
+export default function applyConfig(config) {
   config.settings.slate = {
     // TODO: should we inverse order? First here gets executed last
     textblockExtensions: [
@@ -165,4 +165,4 @@ export default (config) => {
     restricted: true,
   };
   return config;
-};
+}

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

@@ -1,9 +1,9 @@
 import * as slateConfig from './config';
 import installDefaultPlugins from './plugins';
-export SlateEditor from './SlateEditor';
-export EditorReference from './EditorReference';
+export { default as SlateEditor } from './SlateEditor';
+export { default as EditorReference } from './EditorReference';
 
-export default (config) => {
+export default function applyConfig(config) {
   config.settings.slate = {
     ...slateConfig,
     // showExpandedToolbar: false,
@@ -11,4 +11,4 @@ export default (config) => {
   };
   config = installDefaultPlugins(config);
   return config;
-};
+}

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/src/components/manage/AnchorPlugin/index.jsx

@@ -44,7 +44,7 @@ function unboundRemoveEntity(editorState) {
   return newEditorState;
 }
 
-export default (config = {}) => {
+export default function AnchorPlugin(config = {}) {
   // ToDo: Get rif of the remainings of having the original CSS modules
   const defaultTheme = {};
 
@@ -79,4 +79,4 @@ export default (config = {}) => {
         setEditorState(removeEntity(getEditorState())),
     }),
   };
-};
+}

package/src/components/manage/AnchorPlugin/utils/EditorUtils.js

@@ -1,4 +1,4 @@
-export default ({ draftJs }) => ({
+const EditorUtils = ({ draftJs }) => ({
   createLinkAtSelection(editorState, url) {
     const contentState = editorState
       .getCurrentContent()
@@ -43,3 +43,5 @@ export default ({ draftJs }) => ({
     return entity && entity.getType() === entityType;
   },
 });
+
+export default EditorUtils;

package/src/components/manage/Blocks/Block/Style.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 
-export default ({ data, detached, children }) => {
+export default function Style({ data, detached, children }) {
   return (
     <div
       className={cx(
@@ -25,4 +25,4 @@ export default ({ data, detached, children }) => {
       </div>
     </div>
   );
-};
+}

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

@@ -2,10 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ConditionalLink, UniversalLink } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
-
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 
-const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
+const DefaultTemplate = ({
+  headlineTag,
+  items,
+  linkTitle,
+  linkHref,
+  isEditMode,
+}) => {
   let link = null;
   let href = linkHref?.[0]?.['@id'] || '';
 
@@ -19,6 +24,16 @@ const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
     link = <UniversalLink href={href}>{linkTitle || href}</UniversalLink>;
   }
 
+  const getTitleTag = (tag) => {
+    const level = tag.slice(-1);
+    if (/\d/.test(level)) {
+      return `h${Number(level) + 1}`;
+    } else {
+      return 'h3';
+    }
+  };
+  const TitleTag = headlineTag ? getTitleTag(headlineTag) : 'h3';
+
   return (
     <>
       <div className="items">
@@ -26,7 +41,7 @@ const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
           <div className="listing-item" key={item['@id']}>
             <ConditionalLink item={item} condition={!isEditMode}>
               <div className="listing-body">
-                <h4>{item.title ? item.title : item.id}</h4>
+                <TitleTag>{item.title ? item.title : item.id}</TitleTag>
                 <p>{item.description}</p>
               </div>
             </ConditionalLink>

package/src/components/manage/Blocks/Listing/getAsyncData.js

@@ -1,13 +1,13 @@
 import { getQueryStringResults } from '@plone/volto/actions';
 import { resolveBlockExtensions } from '@plone/volto/helpers';
 
-const getListingBlockAsyncData = ({
+export default function getListingBlockAsyncData({
   dispatch,
   id,
   data,
   path,
   blocksConfig,
-}) => {
+}) {
   const { resolvedExtensions } = resolveBlockExtensions(data, blocksConfig);
 
   return [
@@ -24,6 +24,4 @@ const getListingBlockAsyncData = ({
       ),
     ),
   ];
-};
-
-export default getListingBlockAsyncData;
+}

package/src/components/manage/Blocks/Search/components/index.js

@@ -1,13 +1,13 @@
-export SearchDetails from './SearchDetails';
-export Facets from './Facets';
-export SelectFacet from './SelectFacet';
-export CheckboxFacet from './CheckboxFacet';
-export DateRangeFacet from './DateRangeFacet';
-export SearchInput from './SearchInput';
-export FilterList from './FilterList';
-export SortOn from './SortOn';
-export ToggleFacet from './ToggleFacet';
-export SelectFacetFilterListEntry from './SelectFacetFilterListEntry';
-export ToggleFacetFilterListEntry from './ToggleFacetFilterListEntry';
-export DateRangeFacetFilterListEntry from './DateRangeFacetFilterListEntry';
-export ViewSwitcher from './ViewSwitcher';
+export { default as SearchDetails } from './SearchDetails';
+export { default as Facets } from './Facets';
+export { default as SelectFacet } from './SelectFacet';
+export { default as CheckboxFacet } from './CheckboxFacet';
+export { default as DateRangeFacet } from './DateRangeFacet';
+export { default as SearchInput } from './SearchInput';
+export { default as FilterList } from './FilterList';
+export { default as SortOn } from './SortOn';
+export { default as ToggleFacet } from './ToggleFacet';
+export { default as SelectFacetFilterListEntry } from './SelectFacetFilterListEntry';
+export { default as ToggleFacetFilterListEntry } from './ToggleFacetFilterListEntry';
+export { default as DateRangeFacetFilterListEntry } from './DateRangeFacetFilterListEntry';
+export { default as ViewSwitcher } from './ViewSwitcher';

package/src/components/manage/Blocks/Search/hocs/index.js

@@ -1,2 +1,2 @@
-export withQueryString from './withQueryString';
-export withSearch from './withSearch';
+export { default as withQueryString } from './withQueryString';
+export { default as withSearch } from './withSearch';

package/src/components/manage/Blocks/Search/hocs/withQueryString.jsx

@@ -10,7 +10,7 @@ function getDisplayName(WrappedComponent) {
  * A HOC that injects querystring metadata information from the backend.
  *
  */
-export default (WrappedComponent) => {
+export default function withQueryString(WrappedComponent) {
   function WithQueryString(props) {
     const dispatch = useDispatch();
 
@@ -29,4 +29,4 @@ export default (WrappedComponent) => {
     WrappedComponent,
   )})`;
   return WithQueryString;
-};
+}

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.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/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/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 {

package/src/middleware/index.js

@@ -4,8 +4,8 @@
  * @example import { api } from 'middleware';
  */
 
-export api from '@plone/volto/middleware/api';
-export blacklistRoutes from './blacklistRoutes';
+export { default as api } from '@plone/volto/middleware/api';
+export { default as blacklistRoutes } from './blacklistRoutes';
 export {
   protectLoadStart,
   protectLoadEnd,

package/src/start-server.js

@@ -4,7 +4,7 @@ import http from 'http';
 import app from './server';
 import debug from 'debug';
 
-export default () => {
+export default function server() {
   const server = http.createServer(app);
   // const host = process.env.HOST || 'localhost';
   const port = process.env.PORT || 3000;
@@ -46,4 +46,4 @@ export default () => {
       currentApp = newApp;
     });
   };
-};
+}

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

@@ -477,7 +477,9 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
 
   &.new-add-block {
     bottom: -26px;
-    left: 50%;
+    left: calc(
+      50% - 12px
+    ); // This is to compensate the width of the icon and center it correctly
     padding: 0 !important;
     border: none !important;
     background: white !important;