diff --git a/src/components/manage/Blocks/Title/View.jsx b/src/components/manage/Blocks/Title/View.jsx
index b5836f8109..8486785fe7 100644
--- a/src/components/manage/Blocks/Title/View.jsx
+++ b/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 (
-
- {(metadata || properties)['title'] || ''}
-
+
);
};
diff --git a/src/components/manage/Blocks/Title/View.test.jsx b/src/components/manage/Blocks/Title/View.test.jsx
index 80683d24c9..9c2c53d29e 100644
--- a/src/components/manage/Blocks/Title/View.test.jsx
+++ b/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(
-
,
+
+
+
+
+ ,
);
const json = component.toJSON();
expect(json).toMatchSnapshot();
diff --git a/src/components/manage/Blocks/Title/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/Title/__snapshots__/View.test.jsx.snap
index 4e31d1dc1b..cc62ae1b9c 100644
--- a/src/components/manage/Blocks/Title/__snapshots__/View.test.jsx.snap
+++ b/src/components/manage/Blocks/Title/__snapshots__/View.test.jsx.snap
@@ -3,7 +3,29 @@
exports[`renders a view title component 1`] = `
My Title
+
+
+
`;
diff --git a/src/components/manage/Blocks/ToC/View.jsx b/src/components/manage/Blocks/ToC/View.jsx
index 92f0a5f033..a0cd337f53 100644
--- a/src/components/manage/Blocks/ToC/View.jsx
+++ b/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;
}
diff --git a/src/components/manage/Blocks/ToC/variations/DefaultTocRenderer.jsx b/src/components/manage/Blocks/ToC/variations/DefaultTocRenderer.jsx
index 97fdbbcd10..148a8d88e3 100644
--- a/src/components/manage/Blocks/ToC/variations/DefaultTocRenderer.jsx
+++ b/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 && (
- {title}
+ {
+ history.push({ hash: slug });
+ }}
+ >
+ {title}
+
{item.items?.length > 0 && (
{
* @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'}
>
-
+
);
diff --git a/src/components/manage/Blocks/ToC/variations/HorizontalMenu.jsx b/src/components/manage/Blocks/ToC/variations/HorizontalMenu.jsx
index 8239a96e97..0bd1ccf8b0 100644
--- a/src/components/manage/Blocks/ToC/variations/HorizontalMenu.jsx
+++ b/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 && (
- {title}
+ {title}
{item.items?.length > 0 && }
diff --git a/src/helpers/MessageLabels/MessageLabels.js b/src/helpers/MessageLabels/MessageLabels.js
index a341f329b7..2e1c4f6b90 100644
--- a/src/helpers/MessageLabels/MessageLabels.js
+++ b/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',
diff --git a/src/helpers/ScrollToTop/ScrollToTop.jsx b/src/helpers/ScrollToTop/ScrollToTop.jsx
index 6d4a87bcc7..8122fbea63 100644
--- a/src/helpers/ScrollToTop/ScrollToTop.jsx
+++ b/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);
}
diff --git a/src/hooks/clipboard/useClipboard.js b/src/hooks/clipboard/useClipboard.js
new file mode 100644
index 0000000000..eaabbf7a15
--- /dev/null
+++ b/src/hooks/clipboard/useClipboard.js
@@ -0,0 +1,26 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+export default function useClipboard(clipboardText = '') {
+ const stringToCopy = useRef(clipboardText);
+ const [copied, setCopied] = useState(false);
+
+ //synchronous: window.clipboardData.setData(options.format || "text", text);
+ const copyToClipboard = async (text) => {
+ if ('clipboard' in navigator) {
+ return await navigator.clipboard.writeText(text);
+ } else {
+ return document.execCommand('copy', true, text);
+ }
+ };
+
+ const copyAction = useCallback(() => {
+ const copiedString = copyToClipboard(stringToCopy.current);
+ setCopied(copiedString);
+ }, [stringToCopy]);
+
+ useEffect(() => {
+ stringToCopy.current = clipboardText;
+ }, [clipboardText]);
+
+ return [copied, copyAction, setCopied];
+}
diff --git a/src/hooks/index.js b/src/hooks/index.js
new file mode 100644
index 0000000000..ab9a86a472
--- /dev/null
+++ b/src/hooks/index.js
@@ -0,0 +1,2 @@
+export useClipboard from '@plone/volto/hooks/clipboard/useClipboard';
+export useToken from '@plone/volto/hooks/userSession/useToken';
diff --git a/yarn.lock b/yarn.lock
index c4a6999d35..3188760ebf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2690,6 +2690,7 @@ __metadata:
express: 4.17.3
filesize: 6
full-icu: 1.4.0
+ github-slugger: 1.4.0
glob: 7.1.6
history: 4.10.1
hoist-non-react-statics: 3.3.2
@@ -12198,6 +12199,13 @@ __metadata:
languageName: node
linkType: hard
+"github-slugger@npm:1.4.0":
+ version: 1.4.0
+ resolution: "github-slugger@npm:1.4.0"
+ checksum: 4f52e7a21f5c6a4c5328f01fe4fe13ae8881fea78bfe31f9e72c4038f97e3e70d52fb85aa7633a52c501dc2486874474d9abd22aa61cbe9b113099a495551c6b
+ languageName: node
+ linkType: hard
+
"github-slugger@npm:^1.0.0":
version: 1.5.0
resolution: "github-slugger@npm:1.5.0"