markdown helper now accepts CommentDisplayPart

Ref: #2004

Author: Gerrit0

CHANGELOG.md

@@ -6,6 +6,7 @@
 -   Added support for using the comment directly before a constructor parameter that declares a property as the property comment, #2019.
 -   Improved schema generation to give better autocomplete for the `sort` option.
 -   Optional properties are now visually distinguished in the index/sidebar by rendering `prop` as `prop?`, #2023.
+-   `DefaultThemeRenderContext.markdown` now also accepts a `CommentDisplayPart[]` for rendering, #2004.
 
 ### Bug Fixes
 

src/lib/output/themes/default/DefaultThemeRenderContext.ts

@@ -1,6 +1,11 @@
 import type { RendererHooks } from "../..";
-import type { ReferenceType, Reflection } from "../../../models";
-import type { Options } from "../../../utils";
+import type {
+    CommentDisplayPart,
+    ReferenceType,
+    Reflection,
+} from "../../../models";
+import type { NeverIfInternal, Options } from "../../../utils";
+import { displayPartsToMarkdown } from "../lib";
 import type { DefaultTheme } from "./DefaultTheme";
 import { defaultLayout } from "./layouts/default";
 import { index } from "./partials";
@@ -58,7 +63,14 @@ export class DefaultThemeRenderContext {
 
     urlTo = (reflection: Reflection) => this.relativeURL(reflection.url);
 
-    markdown = (md: string | undefined) => {
+    markdown = (
+        md: readonly CommentDisplayPart[] | NeverIfInternal<string | undefined>
+    ) => {
+        if (md instanceof Array) {
+            return this.theme.markedPlugin.parseMarkdown(
+                displayPartsToMarkdown(md, this.urlTo)
+            );
+        }
         return md ? this.theme.markedPlugin.parseMarkdown(md) : "";
     };
 

src/lib/output/themes/default/partials/comment.tsx

@@ -1,20 +1,20 @@
 import type { DefaultThemeRenderContext } from "../DefaultThemeRenderContext";
 import { JSX, Raw } from "../../../../utils";
 import type { Reflection } from "../../../../models";
-import { camelToTitleCase, displayPartsToMarkdown } from "../../lib";
+import { camelToTitleCase } from "../../lib";
 
-export function comment({ markdown, urlTo }: DefaultThemeRenderContext, props: Reflection) {
+export function comment({ markdown }: DefaultThemeRenderContext, props: Reflection) {
     if (!props.comment?.hasVisibleComponent()) return;
 
     // Note: Comment modifiers are handled in `renderFlags`
 
     return (
         <div class="tsd-comment tsd-typography">
-            <Raw html={markdown(displayPartsToMarkdown(props.comment.summary, urlTo))} />
+            <Raw html={markdown(props.comment.summary)} />
             {props.comment.blockTags.map((item) => (
                 <>
                     <h3>{camelToTitleCase(item.tag.substring(1))}</h3>
-                    <Raw html={markdown(displayPartsToMarkdown(item.content, urlTo))} />
+                    <Raw html={markdown(item.content)} />
                 </>
             ))}
         </div>

src/lib/output/themes/default/partials/index.tsx

@@ -1,4 +1,4 @@
-import { classNames, displayPartsToMarkdown, renderName } from "../../lib";
+import { classNames, renderName } from "../../lib";
 import type { DefaultThemeRenderContext } from "../DefaultThemeRenderContext";
 import { JSX, Raw } from "../../../../utils";
 import { ContainerReflection, DeclarationReflection, ReflectionCategory, ReflectionKind } from "../../../../models";
@@ -73,7 +73,7 @@ export function index(context: DefaultThemeRenderContext, props: ContainerReflec
                 props.readme?.length !== 0 && (
                     <section class="tsd-panel-group">
                         <section class="tsd-panel tsd-typography">
-                            <Raw html={context.markdown(displayPartsToMarkdown(props.readme || [], context.urlTo))} />
+                            <Raw html={context.markdown(props.readme || [])} />
                         </section>
                     </section>
                 )}

src/lib/output/themes/default/templates/index.tsx

@@ -2,10 +2,9 @@ import type { DefaultThemeRenderContext } from "../DefaultThemeRenderContext";
 import type { ProjectReflection } from "../../../../models";
 import type { PageEvent } from "../../../events";
 import { JSX, Raw } from "../../../../utils";
-import { displayPartsToMarkdown } from "../../lib";
 
-export const indexTemplate = ({ markdown, urlTo }: DefaultThemeRenderContext, props: PageEvent<ProjectReflection>) => (
+export const indexTemplate = ({ markdown }: DefaultThemeRenderContext, props: PageEvent<ProjectReflection>) => (
     <div class="tsd-panel tsd-typography">
-        <Raw html={markdown(displayPartsToMarkdown(props.model.readme || [], urlTo))} />
+        <Raw html={markdown(props.model.readme || [])} />
     </div>
 );

src/lib/output/themes/lib.tsx

@@ -117,7 +117,10 @@ export function camelToTitleCase(text: string) {
     return text.substring(0, 1).toUpperCase() + text.substring(1).replace(/[a-z][A-Z]/g, (x) => `${x[0]} ${x[1]}`);
 }
 
-export function displayPartsToMarkdown(parts: CommentDisplayPart[], urlTo: DefaultThemeRenderContext["urlTo"]) {
+export function displayPartsToMarkdown(
+    parts: readonly CommentDisplayPart[],
+    urlTo: DefaultThemeRenderContext["urlTo"]
+) {
     const result: string[] = [];
 
     for (const part of parts) {