Updates header links script to handle duplicate header texts. (#1263)

* Updated the buildHeaderLinks to consider duplicate headings.

* Renamed navigableHeader to headerLinks to make simple and consistent across the products.

rollup.config.js

@@ -141,7 +141,7 @@ const config = args => {
       plugins,
     },
     {
-      input: "./src/components/EditorContent/navigableHeadings.js",
+      input: "./src/components/EditorContent/headerLinks.js",
       output: {
         dir: `${__dirname}/dist`,
         format: "cjs",

src/components/EditorContent/constants.js

@@ -16,5 +16,5 @@ export const VARIABLE_SPAN_REGEX =
 export const LANGUAGE_LIST = [...lowlight.listLanguages(), "html"];
 
 export const EDITOR_CONTENT_DEFAULT_CONFIGURATION = {
-  navigableHeader: false,
+  enableHeaderLinks: false,
 };

src/components/EditorContent/navigableHeadings.js → src/components/EditorContent/headerLinks.js

@@ -1,7 +1,7 @@
-import { makeHeadingsNavigable } from "./utils/headers";
+import { buildHeaderLinks } from "./utils/headers";
 
 document.addEventListener("DOMContentLoaded", () => {
   const editorContent = document.querySelector(".neeto-editor-content");
 
-  if (editorContent) makeHeadingsNavigable(editorContent);
+  if (editorContent) buildHeaderLinks(editorContent);
 });

src/components/EditorContent/index.jsx

@@ -20,7 +20,7 @@ import {
   applyLineHighlighting,
   applySyntaxHighlighting,
 } from "./utils";
-import { makeHeadingsNavigable } from "./utils/headers";
+import { buildHeaderLinks } from "./utils/headers";
 
 const EditorContent = ({
   content = "",
@@ -81,8 +81,8 @@ const EditorContent = ({
     injectCopyButtonToCodeBlocks();
     bindImageClickListener();
     applyLineHighlighting(editorContentRef.current);
-    configuration.navigableHeader &&
-      makeHeadingsNavigable(editorContentRef.current);
+    configuration.enableHeaderLinks &&
+      buildHeaderLinks(editorContentRef.current);
   }, [content]);
 
   return (

src/components/EditorContent/utils/headers.js

@@ -28,13 +28,20 @@ const convertTextToId = text =>
     .replace(/[^a-z0-9\s]/g, "")
     .replace(/\s+/g, "-");
 
-export const makeHeadingsNavigable = editorContentNode => {
+export const buildHeaderLinks = editorContentNode => {
   const headerTags = editorContentNode.querySelectorAll(
     "h1, h2, h3, h4, h5, h6"
   );
+  const usedIds = new Map();
 
   headerTags.forEach(heading => {
-    const headingId = convertTextToId(heading.textContent);
+    let headingId = convertTextToId(heading.textContent);
+    if (usedIds.has(headingId)) {
+      const count = usedIds.get(headingId);
+      usedIds.set(headingId, count + 1);
+      headingId = `${headingId}-${count}`;
+    } else usedIds.set(headingId, 1);
+
     heading.setAttribute("id", headingId);
 
     const anchor = document.createElement("a");

stories/Walkthroughs/Output/EditorContentDemo.jsx

@@ -19,7 +19,7 @@ const EditorContentDemo = () => {
         <EditorContent
           {...{ content }}
           className="neeto-ui-p-4"
-          configuration={{ navigableHeader: true }}
+          configuration={{ enableHeaderLinks: true }}
         />
       </div>
       <div>

stories/constants.js

@@ -42,8 +42,8 @@ export const EDITOR_CONTENT_PROP_TABLE_ROWS = [
   ],
   [
     "configuration",
-    "Accepts an object, navigableHeader can be set to true or false in the configuration, default value is false.",
-    `{navigableHeader: true}`,
+    "Accepts an object, enableHeaderLinks can be set to true or false in the configuration, default value is false.",
+    `{enableHeaderLinks: true}`,
   ],
 ];
 

types.d.ts

@@ -150,7 +150,7 @@ interface AttachmentsProps {
 }
 
 type EditorContentConfigType = {
-  navigableHeader?: boolean;
+  enableHeaderLinks?: boolean;
 }
 
 export function Editor(props: EditorProps): JSX.Element;