fix: 🐛 heading and keyword anchor bug

after editing the doc, the id of headings and keywords will be somehow changed if there are "(" or ")" contained in the id now the heading and keyword doms are found according to the innerText instead id
s-elo · Jun 27, 2022 · 07b209b · 07b209b
1 parent a9bc94b
commit 07b209b
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 23 deletions.
diff --git a/client/src/components/DocSearch/DocSearch.tsx b/client/src/components/DocSearch/DocSearch.tsx
@@ -206,13 +206,7 @@ export default function SearchBar() {
                               ),
                             }}
                             onClick={() =>
-                              toResult(
-                                path,
-                                heading
-                                  .replace(/#+\s/g, "")
-                                  .replace(/\s/g, "-")
-                                  .toLowerCase()
-                              )
+                              toResult(path, heading.replace(/#+\s/g, ""))
                             }
                           ></div>
                         ))}

diff --git a/client/src/components/Editor/Editor.tsx b/client/src/components/Editor/Editor.tsx
@@ -97,9 +97,7 @@ export default React.forwardRef<EditorWrappedRef>((_, editorWrappedRef) => {
                 removeEvents,
                 scrollHandler,
                 blurHandler,
-                // addHeadingAnchor,
                 addClipboard,
-                keywordsHandler,
                 anchorHandler,
                 syncMirror,
               } = addons;
@@ -131,11 +129,6 @@ export default React.forwardRef<EditorWrappedRef>((_, editorWrappedRef) => {
                */
               readonly && addClipboard();
 
-              /**
-               * handle keyword anchors (add id to the strong elements)
-               */
-              keywordsHandler(data.keywords);
-
               /**
                * handle anchor
                */

diff --git a/client/src/components/Outline/PureOutline.tsx b/client/src/components/Outline/PureOutline.tsx
@@ -70,7 +70,7 @@ export default function PureOutline({
               <div
                 className="outline-title"
                 onClick={(e) =>
-                  toAnchor(e, pureHeading.replace(/\s/g, "-").toLowerCase())
+                  toAnchor(e, pureHeading)
                 }
                 style={{ ...(headingSize[level - 1] ?? {}), color: "black" }}
                 key={path.join("-") + title}

diff --git a/client/src/utils/hooks/docHookds.ts b/client/src/utils/hooks/docHookds.ts
@@ -101,10 +101,6 @@ export const useCurPath = () => {
 
 /**
  * handler for git restore at working space
- * 1. the untracked files that will be deleted may be current doc
- *    it should be redirected to pure page
- * 2. the modified files that will be restored may be current doc
- *    then the global info of isDirty may be changed
  */
 export const useRetoreHandler = () => {
   const deleteHandler = useDeleteHandler();
@@ -145,14 +141,25 @@ export const useEditorScrollToAnchor = () => {
     }
 
     if (anchor !== "") {
-      const dom = document.getElementById(anchor);
+      const dom = [...document.getElementsByClassName("heading")].find(
+        (head) => (head as HTMLElement).innerText === anchor
+      );
+      const strongDom = [...document.getElementsByClassName("strong")].find(
+        (keyword) => (keyword as HTMLElement).innerText === anchor
+      );
+
+      if (!dom && !strongDom) return;
+
       const parentDom = document.getElementsByClassName(
         "milkdown"
       )[0] as HTMLElement;
 
-      if (dom) {
-        parentDom.scroll({ top: dom.offsetTop, behavior: "smooth" });
-      }
+      parentDom.scroll({
+        top: dom
+          ? (dom as HTMLElement).offsetTop
+          : (strongDom as HTMLElement).offsetTop,
+        behavior: "smooth",
+      });
     }
   };
 };