From 4211102787cf03cb7b72ab11564af1b0eb3352a3 Mon Sep 17 00:00:00 2001
From: Kaan Genc <kaan@dendron.so>
Date: Tue, 22 Feb 2022 03:54:53 -0500
Subject: [PATCH] fix(publish): Table of Contents is missing user tags, inline
 code, dashes and underline

#2456
---
 .../src/markdown/remark/utils.ts              |  7 ++++
 packages/engine-server/src/markdown/types.ts  |  1 +
 .../src/presets/engine-server/getAnchors.ts   | 41 +++++++++++++++++++
 .../nextjs-template/components/DendronTOC.tsx |  5 ++-
 .../vault/dendron.links.heading-anchors.md    | 25 ++++++++++-
 5 files changed, 77 insertions(+), 2 deletions(-)

diff --git a/packages/engine-server/src/markdown/remark/utils.ts b/packages/engine-server/src/markdown/remark/utils.ts
index 4c696bb3ba..56c4bd7a1f 100644
--- a/packages/engine-server/src/markdown/remark/utils.ts
+++ b/packages/engine-server/src/markdown/remark/utils.ts
@@ -42,6 +42,7 @@ import type {
   FrontmatterContent,
   Heading,
   Image,
+  InlineCode,
   Link,
   List,
   ListItem,
@@ -786,6 +787,12 @@ export class AnchorUtils {
         case DendronASTTypes.HASHTAG:
           headerText.push((node as HashTag).value);
           break;
+        case DendronASTTypes.USERTAG:
+          headerText.push((node as UserTag).value);
+          break;
+        case DendronASTTypes.INLINE_CODE:
+          headerText.push((node as InlineCode).value);
+          break;
         default:
         /* nothing */
       }
diff --git a/packages/engine-server/src/markdown/types.ts b/packages/engine-server/src/markdown/types.ts
index cdb8a8a57a..475254b4b1 100644
--- a/packages/engine-server/src/markdown/types.ts
+++ b/packages/engine-server/src/markdown/types.ts
@@ -53,6 +53,7 @@ export enum DendronASTTypes {
   IMAGE = "image",
   FRONTMATTER = "yaml",
   LINK = "link",
+  INLINE_CODE = "inlineCode",
   FOOTNOTE_DEFINITION = "footnoteDefinition",
   FOOTNOTE_REFERENCE = "footnoteReference",
 }
diff --git a/packages/engine-test-utils/src/presets/engine-server/getAnchors.ts b/packages/engine-test-utils/src/presets/engine-server/getAnchors.ts
index 6f875a47a1..662437fe0b 100644
--- a/packages/engine-test-utils/src/presets/engine-server/getAnchors.ts
+++ b/packages/engine-test-utils/src/presets/engine-server/getAnchors.ts
@@ -2,6 +2,7 @@ import { NoteUtils } from "@dendronhq/common-all";
 import {
   TestPresetEntryV4,
   NOTE_PRESETS_V4,
+  NoteTestUtilsV4,
 } from "@dendronhq/common-test-utils";
 import _ from "lodash";
 
@@ -68,6 +69,46 @@ const NOTES = {
       },
     }
   ),
+  /** Test for cases where there are headers that have markdown in them, like
+   * code blocks or wikilinks. Make sure the correct text is extracted, which is
+   * important because the text will be displayed to the user in the ToC when
+   * published.
+   */
+  HEADERS_WITH_MARKDOWN: new TestPresetEntryV4(
+    async ({ vaults, engine }) => {
+      const note = NoteUtils.getNoteByFnameFromEngine({
+        fname: "test",
+        engine,
+        vault: vaults[0],
+      });
+
+      const { data } = await engine.getAnchors({
+        note: note!,
+      });
+      return [
+        {
+          actual: Object.entries(data!).map(([_key, anchor]) => anchor.text),
+          expected: ["root", "alias", "code", "@user", "#tag"],
+        },
+      ];
+    },
+    {
+      preSetupHook: async ({ vaults, wsRoot }) => {
+        await NoteTestUtilsV4.createNote({
+          fname: "test",
+          vault: vaults[0],
+          wsRoot,
+          body: [
+            "## [[root]]",
+            "## [[alias|root]]",
+            "## `code`",
+            "## @user",
+            "## #tag",
+          ].join("\n"),
+        });
+      },
+    }
+  ),
 };
 export const ENGINE_GET_ANCHORS_PRESETS = {
   NOTES,
diff --git a/packages/nextjs-template/components/DendronTOC.tsx b/packages/nextjs-template/components/DendronTOC.tsx
index 7d3e260b2e..8c773a50fb 100644
--- a/packages/nextjs-template/components/DendronTOC.tsx
+++ b/packages/nextjs-template/components/DendronTOC.tsx
@@ -29,7 +29,10 @@ export const DendronTOC = ({
             <Link
               key={key}
               href={`#${key}`}
-              title={unslug(entry?.text ?? entry?.value)}
+              // `anchor.text` contains clean, user displayable text for
+              // headings. It should always exist for exported notes, but we
+              // have this fallback just in case.
+              title={entry?.text ?? unslug(entry?.value)}
             />
           ) : (
             <></>
diff --git a/test-workspace/vault/dendron.links.heading-anchors.md b/test-workspace/vault/dendron.links.heading-anchors.md
index 9dd5c0ee8c..24571fd62a 100644
--- a/test-workspace/vault/dendron.links.heading-anchors.md
+++ b/test-workspace/vault/dendron.links.heading-anchors.md
@@ -2,7 +2,7 @@
 id: FSi3bKWQeQXYTjE1PoTB0
 title: Heading Anchors
 desc: ''
-updated: 1633004714929
+updated: 1645515843913
 created: 1632988925249
 ---
 
@@ -38,3 +38,26 @@ created: 1632988925249
 
 ## heading-2
 * content-2
+
+
+## Heading anchors tests
+
+### 1 start `code` end
+
+The heading above should have the word `code` in the middle
+
+### 2 start - end
+
+The heading above should have a dash in the middle
+
+### 3 start _ end
+
+The heading above should have an underscore in the middle
+
+### 4 start #test end
+
+The heading above should have a hashtag in the middle.
+
+### 5 start @example.username end
+
+The heading above should have a user tag in the middle.