fix(pipeline-editor): fix not sanitized html for use-instill-form issue

packages/toolkit/package.json

@@ -63,6 +63,7 @@
     "@types/react-avatar-editor": "^13.0.2",
     "@types/react-dom": "18.2.0",
     "@types/react-syntax-highlighter": "^15.5.7",
+    "@types/sanitize-html": "^2.11.0",
     "@types/semver": "^7.5.3",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/uuid": "^9.0.1",
@@ -142,6 +143,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "reactflow": "^11.10.0",
     "recharts": "2.12.7",
+    "sanitize-html": "^2.13.0",
     "semver": "^7.5.4",
     "server-only": "^0.0.1",
     "unique-names-generator": "^4.7.1",

packages/toolkit/src/lib/use-instill-form/components/component-output/MDTextViewer.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import cn from "clsx";
 import Markdown from "markdown-to-jsx";
+import sanitizeHtml from "sanitize-html";
 
 import { Switch } from "@instill-ai/design-system";
 
@@ -12,6 +13,8 @@ import { CopyButton } from "./CopyButton";
 export const MDTextViewer = ({ text }: { text: Nullable<string> }) => {
   const [enableFormattedText, setEnableFormattedText] = React.useState(false);
 
+  const sanitizedHtmlText = sanitizeHtml(text ?? "");
+
   return (
     <React.Fragment>
       {/* The anchor, code, paragraph in the MD viewer will overflow */}
@@ -62,7 +65,7 @@ export const MDTextViewer = ({ text }: { text: Nullable<string> }) => {
             </div>
           </div>
           <div className="ml-auto flex flex-row">
-            <CopyButton className="my-auto" text={text ?? ""} />
+            <CopyButton className="my-auto" text={sanitizedHtmlText} />
           </div>
         </div>
         <div>
@@ -72,15 +75,15 @@ export const MDTextViewer = ({ text }: { text: Nullable<string> }) => {
               enableFormattedText ? "" : "hidden",
             )}
           >
-            <Markdown>{text ?? ""}</Markdown>
+            <Markdown>{sanitizedHtmlText}</Markdown>
           </div>
           <pre
             className={cn(
               "flex w-full flex-1 items-center whitespace-pre-line break-all px-1.5 py-1 text-semantic-fg-primary product-body-text-4-regular",
               enableFormattedText ? "hidden" : "",
             )}
           >
-            {text}
+            {sanitizedHtmlText}
           </pre>
         </div>
       </div>