fix(#208): display description as markdown

Also refactor all other markdown descriptions to use this new component.
daisy · Apr 16, 2024 · 47cf3c0 · 47cf3c0
1 parent 4ba44cc
commit 47cf3c0
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 50 deletions.
diff --git a/src/renderer/components/Fields/CustomField.tsx b/src/renderer/components/Fields/CustomField.tsx
@@ -3,6 +3,7 @@ import { CustomFieldDocumentation } from './CustomFieldDocumentation'
 import { ScriptItemBase, TypeChoice, ValueChoice } from 'shared/types'
 import { useEffect, useState } from 'react'
 import { ControlledInput } from './ControlledInput'
+import { MarkdownDescription } from './MarkdownDescription'
 
 export function CustomField({
     item,
@@ -163,7 +164,9 @@ export function CustomField({
                                             }
                                             style={{ margin: 0 }}
                                         >
-                                            {selectedOptionDescription}
+                                            <MarkdownDescription>
+                                                {selectedOptionDescription}
+                                            </MarkdownDescription>
                                         </p>
                                     )
                                 })}

diff --git a/src/renderer/components/Fields/CustomFieldDocumentation.tsx b/src/renderer/components/Fields/CustomFieldDocumentation.tsx
@@ -1,6 +1,4 @@
-import remarkGfm from 'remark-gfm'
-import { externalLinkClick } from 'renderer/utils'
-import Markdown from 'react-markdown'
+import {MarkdownDescription} from './MarkdownDescription'
 const { App } = window
 
 export function CustomFieldDocumentation({ datatypes }) {
@@ -27,29 +25,7 @@ export function CustomFieldDocumentation({ datatypes }) {
                                 {d.summary}
                                 <div className="details">
                                     {d.details ? (
-                                        <Markdown
-                                            remarkPlugins={[remarkGfm]}
-                                            components={{
-                                                // override the rendering of link elements with a link element that opens in an external browser
-                                                a: (props) => {
-                                                    return (
-                                                        <a
-                                                            href={props.href}
-                                                            onClick={(e) =>
-                                                                externalLinkClick(
-                                                                    e,
-                                                                    App
-                                                                )
-                                                            }
-                                                        >
-                                                            {props.children}
-                                                        </a>
-                                                    )
-                                                },
-                                            }}
-                                        >
-                                            {d.details}
-                                        </Markdown>
+                                        <MarkdownDescription>{d.details}</MarkdownDescription>
                                     ) : (
                                         ''
                                     )}

diff --git a/src/renderer/components/Fields/MarkdownDescription.tsx b/src/renderer/components/Fields/MarkdownDescription.tsx
@@ -0,0 +1,27 @@
+import remarkGfm from 'remark-gfm'
+import Markdown from 'react-markdown'
+import { externalLinkClick } from 'renderer/utils'
+const { App } = window
+
+export function MarkdownDescription(props) {
+    return (
+        <Markdown
+            remarkPlugins={[remarkGfm]}
+            components={{
+                // override the rendering of link elements with a link element that opens in an external browser
+                a: (props) => {
+                    return (
+                        <a
+                            href={props.href}
+                            onClick={(e) => externalLinkClick(e, App)}
+                        >
+                            {props.children}
+                        </a>
+                    )
+                },
+            }}
+        >
+            {props.children}
+        </Markdown>
+    )
+}
diff --git a/src/renderer/components/JobDetailsPane/Results.tsx b/src/renderer/components/JobDetailsPane/Results.tsx
@@ -1,8 +1,6 @@
 import { Job } from 'shared/types'
 import { FileLink } from '../FileLink'
-import remarkGfm from 'remark-gfm'
-import { externalLinkClick } from 'renderer/utils'
-import Markdown from 'react-markdown'
+import { MarkdownDescription } from '../Fields/MarkdownDescription'
 const { App } = window
 
 export function Results({ job }: { job: Job }) {
@@ -14,26 +12,7 @@ export function Results({ job }: { job: Job }) {
                         <span className="nicename">{item.nicename}</span>
                     </FileLink>
                     <div className="description">
-                        <Markdown
-                            remarkPlugins={[remarkGfm]}
-                            components={{
-                                // override the rendering of link elements with a link element that opens in an external browser
-                                a: (props) => {
-                                    return (
-                                        <a
-                                            href={props.href}
-                                            onClick={(e) =>
-                                                externalLinkClick(e, App)
-                                            }
-                                        >
-                                            {props.children}
-                                        </a>
-                                    )
-                                },
-                            }}
-                        >
-                            {item.desc}
-                        </Markdown>
+                        <MarkdownDescription>{item.desc}</MarkdownDescription>
                     </div>
                 </li>
             ))}