From c37cafb6350811b4289d83db1e5601658d1d95fe Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <git@tilmanvatteroth.de>
Date: Mon, 20 Mar 2023 10:02:54 +0100
Subject: [PATCH] fix: exclude the link icon from the first heading extraction
 text

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
---
 frontend/global-styles/markdown-tweaks.scss            |  1 +
 .../hooks/use-extract-first-headline.ts                | 10 +++++++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/global-styles/markdown-tweaks.scss b/frontend/global-styles/markdown-tweaks.scss
index 226af2663..5d8782155 100644
--- a/frontend/global-styles/markdown-tweaks.scss
+++ b/frontend/global-styles/markdown-tweaks.scss
@@ -37,6 +37,7 @@
 
   h1, h2, h3, h4, h5, h6 {
     .heading-anchor {
+      user-select: none;
       font-size: 0.75em;
       margin-top: 0.25em;
       opacity: 0.3;
diff --git a/frontend/src/components/markdown-renderer/hooks/use-extract-first-headline.ts b/frontend/src/components/markdown-renderer/hooks/use-extract-first-headline.ts
index 30b3063f6..d0fa729b5 100644
--- a/frontend/src/components/markdown-renderer/hooks/use-extract-first-headline.ts
+++ b/frontend/src/components/markdown-renderer/hooks/use-extract-first-headline.ts
@@ -14,9 +14,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react'
  * @return the plain text content
  */
 const extractInnerText = (node: ChildNode | null): string => {
-  if (!node) {
-    return ''
-  } else if (isKatexMathMlElement(node)) {
+  if (!node || isKatexMathMlElement(node) || isHeadlineLinkElement(node)) {
     return ''
   } else if (node.childNodes && node.childNodes.length > 0) {
     return extractInnerTextFromChildren(node)
@@ -33,6 +31,12 @@ const extractInnerText = (node: ChildNode | null): string => {
  */
 const isKatexMathMlElement = (node: ChildNode): boolean => (node as HTMLElement).classList?.contains('katex-mathml')
 
+/**
+ * Determines if the given {@link ChildNode node} is the link icon of a heading.
+ * @param node The node to check
+ */
+const isHeadlineLinkElement = (node: ChildNode): boolean => (node as HTMLElement).classList?.contains('heading-anchor')
+
 /**
  * Extracts the text content of the children of the given {@link ChildNode node}.
  * @param node The node whose children should be processed. The content of the node itself won't be included.