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.