fix horizontal menu variation

eea · Apr 1, 2024 · 9d339f8 · 9d339f8
1 parent be8de3b
commit 9d339f8
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/src/Block/variations/DefaultTocRenderer.jsx b/src/Block/variations/DefaultTocRenderer.jsx
@@ -9,8 +9,8 @@ import { map } from 'lodash';
 import { List } from 'semantic-ui-react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import Slugger from 'github-slugger';
-import { UniversalLink } from '@plone/volto/components';
-import { normalizeString } from '@plone/volto/helpers';
+import AnchorLink from 'react-anchor-link-smooth-scroll';
+import { normalizeString } from './helpers';
 
 const RenderListItems = ({ items, data }) => {
   return map(items, (item) => {
@@ -21,7 +21,7 @@ const RenderListItems = ({ items, data }) => {
     return (
       item && (
         <List.Item key={id} className={`item headline-${level}`} as="li">
-          <UniversalLink href={`#${slug}`}>{title}</UniversalLink>
+          <AnchorLink href={`#${slug}`}>{title}</AnchorLink>
           {item.items?.length > 0 && (
             <List
               ordered={data.ordered}

diff --git a/src/Block/variations/HorizontalMenu.jsx b/src/Block/variations/HorizontalMenu.jsx
@@ -4,15 +4,20 @@ import { map } from 'lodash';
 import { Menu, Dropdown } from 'semantic-ui-react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import AnchorLink from 'react-anchor-link-smooth-scroll';
+import Slugger from 'github-slugger';
+import { normalizeString } from './helpers';
 
 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(normalizeString(plaintext))
+      : Slugger.slug(normalizeString(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>

diff --git a/src/Block/variations/helpers.js b/src/Block/variations/helpers.js
@@ -0,0 +1,5 @@
+//to be removed when upgrade to Volto 17
+
+export function normalizeString(str) {
+  return str.normalize('NFD').replace(/\p{Diacritic}/gu, '');
+}