Add anchors to Markdown headers

frontend/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx

@@ -43,6 +43,69 @@ export interface Props {
   allowHTML: boolean
 }
 
+function createAnchorFromText(text: string | null): string {
+  const newAnchor = text
+    ?.toLowerCase()
+    .split(/[^A-Za-z0-9]/)
+    .filter(Boolean)
+    .join("-")
+  return newAnchor || ""
+}
+
+function HeadingWithAnchor({
+  tag,
+  anchor: propsAnchor,
+  children,
+}: any): ReactElement {
+  const [anchor, setAnchor] = React.useState<string | null>(null)
+  const ref = React.useRef<HTMLElement>(null)
+
+  React.useEffect(() => {
+    if (anchor === null && ref.current !== null) {
+      const newAnchor =
+        propsAnchor || createAnchorFromText(ref.current.textContent)
+      if (newAnchor) {
+        setAnchor(newAnchor)
+        if (window.location.hash.slice(1) === newAnchor) {
+          ref.current.scrollIntoView(true)
+        }
+      }
+    }
+  }, [ref.current])
+
+  return React.createElement(
+    tag,
+    { ref },
+    <>
+      {anchor && <a data-anchor={anchor} />}
+      {children}
+    </>
+  )
+}
+
+function CustomHeading(props: any): ReactElement {
+  const { level, children } = props
+  return <HeadingWithAnchor tag={`h${level}`}>{children}</HeadingWithAnchor>
+}
+
+function CustomParsedHtml(props: any): ReactElement {
+  const { element } = props
+
+  const headingElements = ["h1", "h2", "h3", "h4", "h5", "h6"]
+  if (!headingElements.includes(element.type)) {
+    return (ReactMarkdown.renderers.parsedHtml as any)(props)
+  }
+
+  return (
+    <HeadingWithAnchor
+      tag={element.type}
+      anchor={element.props["data-anchor"]}
+    >
+      {element.props.children}
+    </HeadingWithAnchor>
+  )
+}
+
 /**
  * Wraps the <ReactMarkdown> component to include our standard
  * renderers and AST plugins (for syntax highlighting, HTML support, etc).
@@ -71,6 +134,8 @@ class StreamlitMarkdown extends PureComponent<Props> {
       math: (props: { value: string }): ReactElement => (
         <BlockMath>{props.value}</BlockMath>
       ),
+      heading: CustomHeading,
+      parsedHtml: CustomParsedHtml,
     }
 
     const plugins = [RemarkMathPlugin, RemarkEmoji]

lib/streamlit/elements/markdown.py

@@ -78,7 +78,7 @@ def markdown(self, body, unsafe_allow_html=False):
 
         return self.dg._enqueue("markdown", markdown_proto)
 
-    def header(self, body):
+    def header(self, body, anchor=None):
         """Display text in header formatting.
 
         Parameters
@@ -96,10 +96,14 @@ def header(self, body):
 
         """
         header_proto = MarkdownProto()
-        header_proto.body = "## %s" % clean_text(body)
+        if anchor is None:
+            header_proto.body = '## %s' % clean_text(body)
+        else:
+            header_proto.body = '<h2 data-anchor="%s">%s</h2>' % (anchor, clean_text(body))
+            header_proto.allow_html = True
         return self.dg._enqueue("markdown", header_proto)
 
-    def subheader(self, body):
+    def subheader(self, body, anchor=None):
         """Display text in subheader formatting.
 
         Parameters
@@ -117,7 +121,12 @@ def subheader(self, body):
 
         """
         subheader_proto = MarkdownProto()
-        subheader_proto.body = "### %s" % clean_text(body)
+        if anchor is None:
+            subheader_proto.body = '### %s' % clean_text(body)
+        else:
+            subheader_proto.body = '<h3 data-anchor="%s">%s</h3>' % (anchor, clean_text(body))
+            subheader_proto.allow_html = True
+
         return self.dg._enqueue("markdown", subheader_proto)
 
     def code(self, body, language="python"):
@@ -153,7 +162,7 @@ def code(self, body, language="python"):
         code_proto.body = clean_text(markdown)
         return self.dg._enqueue("markdown", code_proto)
 
-    def title(self, body):
+    def title(self, body, anchor=None):
         """Display text in title formatting.
 
         Each document should have a single `st.title()`, although this is not
@@ -174,7 +183,11 @@ def title(self, body):
 
         """
         title_proto = MarkdownProto()
-        title_proto.body = "# %s" % clean_text(body)
+        if anchor is None:
+            title_proto.body = '# %s' % clean_text(body)
+        else:
+            title_proto.body = '<h1 data-anchor="%s">%s</h1>' % (anchor, clean_text(body))
+            title_proto.allow_html = True
         return self.dg._enqueue("markdown", title_proto)
 
     def latex(self, body):