refactor(ai-help): extract Markdown component

mdn · Nov 8, 2023 · 4e9a454 · 4e9a454
1 parent d758d26
commit 4e9a454
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 81 deletions.
diff --git a/client/src/plus/ai-help/index.tsx b/client/src/plus/ai-help/index.tsx
@@ -1,14 +1,4 @@
-import Prism from "prismjs";
-import {
-  Children,
-  MutableRefObject,
-  ReactElement,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
+import { MutableRefObject, useEffect, useRef, useState } from "react";
 
 import { Message, MessageRole, Quota, useAiChat } from "./use-ai";
 import { AiLoginBanner, AiUpsellBanner } from "./banners";
@@ -26,11 +16,11 @@ import { GleanThumbs } from "../../ui/atoms/thumbs";
 import NoteCard from "../../ui/molecules/notecards";
 import { Loading } from "../../ui/atoms/loading";
 import { useLocation } from "react-router-dom";
-import { isExternalUrl } from "./utils";
 import { useGleanClick } from "../../telemetry/glean-context";
 import { AI_HELP } from "../../telemetry/constants";
 import MDNModal from "../../ui/atoms/modal";
 import { AI_FEEDBACK_GITHUB_REPO } from "../../env";
+import { Markdown } from "./markdown";
 
 type Category = "apis" | "css" | "html" | "http" | "js" | "learn";
 
@@ -213,76 +203,9 @@ export function AIHelpInner() {
                     message.content
                   ) : (
                     <>
-                      <ReactMarkdown
-                        remarkPlugins={[remarkGfm]}
-                        components={{
-                          a: ({ node, ...props }) => {
-                            if (isExternalUrl(props.href ?? "")) {
-                              props = {
-                                ...props,
-                                className: "external",
-                                rel: "noopener noreferrer",
-                                target: "_blank",
-                              };
-                            }
-                            // eslint-disable-next-line jsx-a11y/anchor-has-content
-                            return <a {...props} />;
-                          },
-                          pre: ({ node, className, children, ...props }) => {
-                            const code = Children.toArray(children)
-                              .map(
-                                (child) =>
-                                  /language-(\w+)/.exec(
-                                    (child as ReactElement)?.props?.className ||
-                                      ""
-                                  )?.[1]
-                              )
-                              .find(Boolean);
-
-                            if (!code) {
-                              return (
-                                <pre {...props} className={className}>
-                                  {children}
-                                </pre>
-                              );
-                            }
-                            return (
-                              <div className="code-example">
-                                <p className="example-header">
-                                  <span className="language-name">{code}</span>
-                                </p>
-                                <pre className={`brush: ${code}`}>
-                                  {children}
-                                </pre>
-                              </div>
-                            );
-                          },
-                          code: ({ inline, className, children, ...props }) => {
-                            const match = /language-(\w+)/.exec(
-                              className || ""
-                            );
-                            const lang = Prism.languages[match?.[1]];
-                            return !inline && lang ? (
-                              <code
-                                {...props}
-                                className={className}
-                                dangerouslySetInnerHTML={{
-                                  __html: Prism.highlight(
-                                    String(children),
-                                    lang
-                                  ),
-                                }}
-                              />
-                            ) : (
-                              <code {...props} className={className}>
-                                {children}
-                              </code>
-                            );
-                          },
-                        }}
-                      >
+                      <Markdown>
                         {message.content.replace(SORRY_BACKEND, SORRY_FRONTEND)}
-                      </ReactMarkdown>
+                      </Markdown>
                       {message.status === "complete" &&
                         !message.content.includes(SORRY_BACKEND) && (
                           <>

diff --git a/client/src/plus/ai-help/markdown.tsx b/client/src/plus/ai-help/markdown.tsx
@@ -0,0 +1,72 @@
+import Prism from "prismjs";
+import { Children, ReactElement } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { isExternalUrl } from "./utils";
+
+export function Markdown({ children }: { children: string }) {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      components={{
+        a: ({ node, ...props }) => {
+          if (isExternalUrl(props.href ?? "")) {
+            props = {
+              ...props,
+              className: "external",
+              rel: "noopener noreferrer",
+              target: "_blank",
+            };
+          }
+          // eslint-disable-next-line jsx-a11y/anchor-has-content
+          return <a {...props} />;
+        },
+        pre: ({ node, className, children, ...props }) => {
+          const code = Children.toArray(children)
+            .map(
+              (child) =>
+                /language-(\w+)/.exec(
+                  (child as ReactElement)?.props?.className || ""
+                )?.[1]
+            )
+            .find(Boolean);
+
+          if (!code) {
+            return (
+              <pre {...props} className={className}>
+                {children}
+              </pre>
+            );
+          }
+          return (
+            <div className="code-example">
+              <p className="example-header">
+                <span className="language-name">{code}</span>
+              </p>
+              <pre className={`brush: ${code}`}>{children}</pre>
+            </div>
+          );
+        },
+        code: ({ inline, className, children, ...props }) => {
+          const match = /language-(\w+)/.exec(className || "");
+          const lang = Prism.languages[match?.[1]];
+          return !inline && lang ? (
+            <code
+              {...props}
+              className={className}
+              dangerouslySetInnerHTML={{
+                __html: Prism.highlight(String(children), lang),
+              }}
+            />
+          ) : (
+            <code {...props} className={className}>
+              {children}
+            </code>
+          );
+        },
+      }}
+    >
+      {children}
+    </ReactMarkdown>
+  );
+}