fix: markdown parent name (#2062)

Co-authored-by: Alex Varchuk <olexandr.varchuk@gmail.com>

src/components/ContentItems/ContentItems.tsx

@@ -79,7 +79,11 @@ export class SectionItem extends React.Component<ContentItemProps> {
             </Header>
           </MiddlePanel>
         </Row>
-        <AdvancedMarkdown source={description || ''} htmlWrap={middlePanelWrap} />
+        <AdvancedMarkdown
+          parentId={this.props.item.id}
+          source={description || ''}
+          htmlWrap={middlePanelWrap}
+        />
         {externalDocs && (
           <Row>
             <MiddlePanel>

src/components/Markdown/AdvancedMarkdown.tsx

@@ -9,6 +9,7 @@ import { StoreConsumer } from '../StoreBuilder';
 
 export interface AdvancedMarkdownProps extends BaseMarkdownProps {
   htmlWrap?: (part: JSX.Element) => JSX.Element;
+  parentId?: string;
 }
 
 export class AdvancedMarkdown extends React.Component<AdvancedMarkdownProps> {
@@ -28,7 +29,7 @@ export class AdvancedMarkdown extends React.Component<AdvancedMarkdownProps> {
       throw new Error('When using components in markdown, store prop must be provided');
     }
 
-    const renderer = new MarkdownRenderer(options);
+    const renderer = new MarkdownRenderer(options, this.props.parentId);
     const parts = renderer.renderMdWithComponents(source);
 
     if (!parts.length) {

src/services/MarkdownRenderer.ts

@@ -46,7 +46,8 @@ export class MarkdownRenderer {
   private headingEnhanceRenderer: marked.Renderer;
   private originalHeadingRule: typeof marked.Renderer.prototype.heading;
 
-  constructor(public options?: RedocNormalizedOptions) {
+  constructor(public options?: RedocNormalizedOptions, public parentId?: string) {
+    this.parentId = parentId;
     this.parser = new marked.Parser();
     this.headingEnhanceRenderer = new marked.Renderer();
     this.originalHeadingRule = this.headingEnhanceRenderer.heading.bind(
@@ -63,7 +64,9 @@ export class MarkdownRenderer {
   ): MarkdownHeading {
     name = unescapeHTMLChars(name);
     const item: MarkdownHeading = {
-      id: parentId ? `${parentId}/${safeSlugify(name)}` : `section/${safeSlugify(name)}`,
+      id: parentId
+        ? `${parentId}/${safeSlugify(name)}`
+        : `${this.parentId || 'section'}/${safeSlugify(name)}`,
       name,
       level,
       items: [],

src/services/MenuBuilder.ts

@@ -41,7 +41,7 @@ export class MenuBuilder {
     initialDepth: number,
     options: RedocNormalizedOptions,
   ): ContentItemModel[] {
-    const renderer = new MarkdownRenderer(options);
+    const renderer = new MarkdownRenderer(options, parent?.id);
     const headings = renderer.extractHeadings(description || '');
 
     if (headings.length && parent && parent.description) {