From 9bea49ebb7e375a365abc183b7fbcb1a867b163e Mon Sep 17 00:00:00 2001 From: Deepak Jose Date: Thu, 7 Nov 2024 10:40:27 +0530 Subject: [PATCH 1/2] Updated the buildHeaderLinks to consider duplicate headings. --- src/components/EditorContent/utils/headers.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/EditorContent/utils/headers.js b/src/components/EditorContent/utils/headers.js index 9777de14..736eddb4 100644 --- a/src/components/EditorContent/utils/headers.js +++ b/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"); From cad010f1ec44e19ef17c2072e8ca628d57314124 Mon Sep 17 00:00:00 2001 From: Deepak Jose Date: Thu, 7 Nov 2024 10:42:04 +0530 Subject: [PATCH 2/2] Renamed navigableHeader to headerLinks to make simple and consistent across the products. --- rollup.config.js | 2 +- src/components/EditorContent/constants.js | 2 +- .../EditorContent/{navigableHeadings.js => headerLinks.js} | 4 ++-- src/components/EditorContent/index.jsx | 6 +++--- stories/Walkthroughs/Output/EditorContentDemo.jsx | 2 +- stories/constants.js | 4 ++-- types.d.ts | 2 +- 7 files changed, 11 insertions(+), 11 deletions(-) rename src/components/EditorContent/{navigableHeadings.js => headerLinks.js} (53%) diff --git a/rollup.config.js b/rollup.config.js index 1d82648f..677d48b7 100644 --- a/rollup.config.js +++ b/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", diff --git a/src/components/EditorContent/constants.js b/src/components/EditorContent/constants.js index 888ad7c1..99146481 100644 --- a/src/components/EditorContent/constants.js +++ b/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, }; diff --git a/src/components/EditorContent/navigableHeadings.js b/src/components/EditorContent/headerLinks.js similarity index 53% rename from src/components/EditorContent/navigableHeadings.js rename to src/components/EditorContent/headerLinks.js index d9d5663f..a7b5e4c6 100644 --- a/src/components/EditorContent/navigableHeadings.js +++ b/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); }); diff --git a/src/components/EditorContent/index.jsx b/src/components/EditorContent/index.jsx index 817d290b..2ce02d37 100644 --- a/src/components/EditorContent/index.jsx +++ b/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 ( diff --git a/stories/Walkthroughs/Output/EditorContentDemo.jsx b/stories/Walkthroughs/Output/EditorContentDemo.jsx index e3e6dfdf..f648cc6c 100644 --- a/stories/Walkthroughs/Output/EditorContentDemo.jsx +++ b/stories/Walkthroughs/Output/EditorContentDemo.jsx @@ -19,7 +19,7 @@ const EditorContentDemo = () => {
diff --git a/stories/constants.js b/stories/constants.js index 15486d85..3c94384f 100644 --- a/stories/constants.js +++ b/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}`, ], ]; diff --git a/types.d.ts b/types.d.ts index 90a55dd6..0a21fd05 100644 --- a/types.d.ts +++ b/types.d.ts @@ -150,7 +150,7 @@ interface AttachmentsProps { } type EditorContentConfigType = { - navigableHeader?: boolean; + enableHeaderLinks?: boolean; } export function Editor(props: EditorProps): JSX.Element;