[docs-theme] adjust HeadingTag impl, fix #4342

palantir · Oct 25, 2023 · 67d9133 · 67d9133
1 parent a6d197a
commit 67d9133
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/packages/docs-theme/src/tags/defaults.ts b/packages/docs-theme/src/tags/defaults.ts
@@ -26,8 +26,7 @@ import { TypescriptExample } from "./typescript";
 export function createDefaultRenderers(): Record<string, React.ComponentType<Tag>> {
     return {
         css: CssExample,
-        // HACKHACK https://github.com/palantir/blueprint/issues/4342
-        heading: Heading as React.ComponentType<Tag>,
+        heading: Heading,
         interface: TypescriptExample,
         method: Method,
         page: () => null,

diff --git a/packages/docs-theme/src/tags/heading.tsx b/packages/docs-theme/src/tags/heading.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { HeadingTag } from "@documentalist/client";
+import { isHeadingTag, type Tag } from "@documentalist/client";
 import classNames from "classnames";
 import * as React from "react";
 
@@ -23,15 +23,22 @@ import { Link } from "@blueprintjs/icons";
 
 import { COMPONENT_DISPLAY_NAMESPACE } from "../common";
 
-export const Heading: React.FC<HeadingTag> = ({ level, route, value }) =>
-    // use createElement so we can dynamically choose tag based on depth
-    React.createElement(
-        `h${level}`,
-        { className: classNames(Classes.HEADING, "docs-title") },
+export const Heading: React.FC<Tag> = props => {
+    if (!isHeadingTag(props)) {
+        return null;
+    }
+
+    const { level, route, value } = props;
+    const className = classNames(Classes.HEADING, "docs-title");
+    const children = [
         <a className="docs-anchor" data-route={route} key="anchor" />,
         <a className="docs-anchor-link" href={"#" + route} key="link">
             <Link />
         </a>,
         value,
-    );
+    ];
+
+    // use createElement so we can dynamically choose tag based on depth
+    return React.createElement(`h${level}`, { className }, children);
+};
 Heading.displayName = `${COMPONENT_DISPLAY_NAMESPACE}.Heading`;