Fix the single image not visible issue, remove the hard coded HTML tags

Author: billsedison

src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownCode.tsx

@@ -109,7 +109,7 @@ function LineNumbers(props: LineNumbersProps): React.ReactElement | null {
         return () => {
             clearTimeout(debounceTimer.current)
         }
-    }, [size.width, onVisibilityChange, codeRef.current])
+    }, [size.width, onVisibilityChange, codeRef])
 
     if (!showLineNumbers) {
         // tslint:disable-next-line no-null-keyword

src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownImages.module.scss

@@ -57,8 +57,18 @@
     }
 }
 
+.imageBlock {
+    position: relative;
+    margin: auto;
+    overflow: hidden;
+    background-color: $black-5;
+    border-radius: 8px;
+    text-align: center;
+}
+
 .imageContainer {
     max-width: 481px;
+    margin: auto;
 }
 
 @include ltelg {

src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/MarkdownImages.tsx

@@ -85,7 +85,7 @@ const MarkdownImages: React.FC<MarkdownImagesProps> = ({
             </div>
         )
     }
-    return (
+    return children.length > 1 ? (
         // @ts-ignore
         <Carousel
             itemsToShow={1}
@@ -104,6 +104,12 @@ const MarkdownImages: React.FC<MarkdownImagesProps> = ({
                 </div>
             ))}
         </Carousel>
+    ) : (
+        <>
+            <div key={`md-image-single`} className={`${styles['imageBlock']}}`}>
+                <div className={styles['imageContainer']}>{children[0]}</div>
+            </div>
+        </>
     )
 }
 

src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/TableOfContents.tsx

@@ -65,18 +65,18 @@ function useOnScroll({ onScroll }: { onScroll: () => void }): void {
     const debounceTimer: React.MutableRefObject<
         ReturnType<typeof setTimeout> | undefined
     > = React.useRef<ReturnType<typeof setTimeout>>()
-    const handleScroll: () => void = () => {
-        if (debounceTimer.current) {
-            clearTimeout(debounceTimer.current)
-            debounceTimer.current = undefined
+    React.useEffect(() => {
+        const handleScroll: () => void = () => {
+            if (debounceTimer.current) {
+                clearTimeout(debounceTimer.current)
+                debounceTimer.current = undefined
+            }
+            debounceTimer.current = setTimeout(() => {
+                debounceTimer.current = undefined
+                onScroll()
+            }, 1)
         }
-        debounceTimer.current = setTimeout(() => {
-            debounceTimer.current = undefined
-            onScroll()
-        }, 1)
-    }
 
-    React.useEffect(() => {
         onScroll()
         window.addEventListener('scroll', handleScroll)
         return () => {

src-ts/tools/dev-center/dev-center-lib/MarkdownDoc/markdownRenderer/renderer.tsx

@@ -14,9 +14,21 @@ export type MarkdownString = string
 export type MarkdownResult = React.ReactNode
 export type TOC = Array<{ headingId: string; level: number; title: string }>
 
+enum MarkdownHeaderTag {
+    h1 = 'h1',
+    h2 = 'h2',
+    h3 = 'h3',
+    h4 = 'h4',
+    h5 = 'h5',
+    h6 = 'h6',
+}
+
+enum MarkdownParagraphTag {
+    p = 'p',
+}
 export interface MarkdownRenderOptions {
     baseUrl?: string
-    groupBy?: 'h2'
+    groupBy?: MarkdownHeaderTag.h2
     highlightCode?: (code: string, lang: string) => string
     sanitize?: boolean
     toc?: TOC
@@ -102,7 +114,7 @@ export class Renderer implements MarkdownRenderer {
         const isH1Tag: (tagName: keyof JSX.IntrinsicElements) => boolean = (
             tagName: keyof JSX.IntrinsicElements
         ) => {
-            return tagName === 'h1'
+            return tagName === MarkdownHeaderTag.h1
         }
         const isGroupByTag: (
             tagName: keyof JSX.IntrinsicElements
@@ -196,7 +208,7 @@ export class Renderer implements MarkdownRenderer {
                 t.tokens
                     .filter((child) => !isLineBreak(child))
                     .every((child) => child.type === 'image') &&
-                t.tokens.filter((child) => !isLineBreak(child)).length >= 2
+                t.tokens.filter((child) => !isLineBreak(child)).length >= 1
             ) {
                 return true
             }
@@ -334,20 +346,21 @@ export class Renderer implements MarkdownRenderer {
         }
 
         const tag: string = extractTag(html)
-        if (
-            tag &&
-            ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].indexOf(tag) !== -1
-        ) {
-            let id: string | undefined
-            if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].indexOf(tag) !== -1) {
-                token = token as marked.Tokens.Heading
-                id = extractId(html, `h${token.depth}`).trim()
+        if (tag) {
+            const isParagraphTag: boolean = tag === MarkdownParagraphTag.p
+            const isHeaderTag: boolean = Object.values(MarkdownHeaderTag).indexOf(tag as MarkdownHeaderTag) !== -1
+            if (isParagraphTag || isHeaderTag) {
+                let id: string | undefined
+                if (isHeaderTag) {
+                    token = token as marked.Tokens.Heading
+                    id = extractId(html, `h${token.depth}`).trim()
+                }
+                return React.createElement(tag, {
+                    className: getClassname(token),
+                    dangerouslySetInnerHTML: { __html: stripTag(html, tag) },
+                    id,
+                })
             }
-            return React.createElement(tag, {
-                className: getClassname(token),
-                dangerouslySetInnerHTML: { __html: stripTag(html, tag) },
-                id,
-            })
         }
 
         return (