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

package/packages/volto-slate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone/volto-slate",
-  "version": "17.0.0-alpha.13",
+  "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/TextBlockView.jsx

@@ -1,26 +1,30 @@
-import { serializeNodes } from '@plone/volto-slate/editor/render';
+import {
+  serializeNodes,
+  serializeNodesToText,
+} from '@plone/volto-slate/editor/render';
 import config from '@plone/volto/registry';
+import { isEqual } from 'lodash';
+import Slugger from 'github-slugger';
 
 const TextBlockView = (props) => {
   const { id, data, styling = {} } = props;
   const { value, override_toc } = data;
   const metadata = props.metadata || props.properties;
-  return serializeNodes(
-    value,
-    (node, path) => {
-      const res = { ...styling };
-      if (node.type) {
-        if (
-          config.settings.slate.topLevelTargetElements.includes(node.type) ||
-          override_toc
-        ) {
-          res.id = id;
-        }
+  const { topLevelTargetElements } = config.settings.slate;
+
+  const getAttributes = (node, path) => {
+    const res = { ...styling };
+    if (node.type && isEqual(path, [0])) {
+      if (topLevelTargetElements.includes(node.type) || override_toc) {
+        const text = serializeNodesToText(node?.children || []);
+        const slug = Slugger.slug(text);
+        res.id = slug || id;
       }
-      return res;
-    },
-    { metadata: metadata },
-  );
+    }
+    return res;
+  };
+
+  return serializeNodes(value, getAttributes, { metadata: metadata });
 };
 
 export default TextBlockView;

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/config.jsx

@@ -43,6 +43,7 @@ import {
   bTagDeserializer,
   codeTagDeserializer,
 } from './deserialize';
+import { renderLinkElement } from './render';
 
 // Registry of available buttons
 export const buttons = {
@@ -234,10 +235,10 @@ export const defaultBlockType = 'p';
 export const elements = {
   default: ({ attributes, children }) => <p {...attributes}>{children}</p>,
 
-  h1: ({ attributes, children }) => <h1 {...attributes}>{children}</h1>,
-  h2: ({ attributes, children }) => <h2 {...attributes}>{children}</h2>,
-  h3: ({ attributes, children }) => <h3 {...attributes}>{children}</h3>,
-  h4: ({ attributes, children }) => <h4 {...attributes}>{children}</h4>,
+  h1: renderLinkElement('h1'),
+  h2: renderLinkElement('h2'),
+  h3: renderLinkElement('h3'),
+  h4: renderLinkElement('h4'),
 
   li: ({ attributes, children }) => <li {...attributes}>{children}</li>,
   ol: ({ attributes, children }) => <ol {...attributes}>{children}</ol>,

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/less/slate.less

@@ -0,0 +1,28 @@
+h1,
+h2,
+h3,
+h4 {
+  &:hover {
+    a.anchor {
+      svg {
+        opacity: 1;
+        transform: rotate(15deg);
+      }
+    }
+  }
+
+  a.anchor {
+    position: absolute;
+    display: inline-block;
+    margin-left: 5px;
+    vertical-align: middle;
+
+    svg {
+      width: 1.6ch;
+      fill: #42526e;
+      opacity: 0;
+      transform: rotate(15deg) translate(-8px, 2px);
+      transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
+    }
+  }
+}

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

@@ -1,9 +1,18 @@
 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 { 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 +115,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 +156,60 @@ 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 appPathname = addAppURL(location.pathname);
+    // eslint-disable-next-line no-unused-vars
+    const [copied, copy, setCopied] = useClipboard(
+      appPathname.concat(`#${slug}`),
+    );
+    const intl = useIntl();
+
+    return slate.useLinkedHeadings === false ? (
+      <Tag {...attributes} className={className}>
+        {children}
+      </Tag>
+    ) : (
+      <Tag {...attributes} className={className}>
+        {children}
+        {mode === 'view' && slug && (
+          <UniversalLink
+            className="anchor"
+            aria-hidden="true"
+            tabIndex={-1}
+            href={`#${slug}`}
+          >
+            <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/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/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/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/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>
     </>
   );