fix: run script in HTML type

TexteaInc · Dec 23, 2023 · 572afa9 · 572afa9
1 parent e55dce7
commit 572afa9
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 12 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -21,6 +21,7 @@
     "@types/react-dom": "^18.0.6",
     "@types/react-pdf": "^6.2.0",
     "@types/uuid": "^9.0.2",
+    "dangerously-set-html-content": "^1.1.0",
     "jotai": "^1.7.4",
     "localforage": "^1.10.0",
     "material-ui-popup-state": "^4.0.2",

diff --git a/frontend/src/components/FunixFunction/ObjectFieldExtendedTemplate.tsx b/frontend/src/components/FunixFunction/ObjectFieldExtendedTemplate.tsx
@@ -56,6 +56,7 @@ import FileUploadWidget from "./FileUploadWidget";
 import { useAtom } from "jotai";
 import { storeAtom } from "../../store";
 import { DataGrid } from "../../Key";
+import InnerHTML from "dangerously-set-html-content";
 
 let rowIdCounter = 0;
 
@@ -512,10 +513,8 @@ const ObjectFieldExtendedTemplate = (props: ObjectFieldProps) => {
           break;
         case "html":
           rowElement = (
-            <div
-              dangerouslySetInnerHTML={{
-                __html: rowItem.content !== undefined ? rowItem.content : "",
-              }}
+            <InnerHTML
+              html={rowItem.content !== undefined ? rowItem.content : ""}
             />
           );
           break;

diff --git a/frontend/src/components/FunixFunction/OutputPanel.tsx b/frontend/src/components/FunixFunction/OutputPanel.tsx
@@ -31,6 +31,7 @@ import { ExpandMore } from "@mui/icons-material";
 import ThemeReactJson from "../Common/ThemeReactJson";
 import { DataGrid } from "../../Key";
 import OutputDataframe from "./OutputComponents/OutputDataframe";
+import InnerHTML from "dangerously-set-html-content";
 
 const guessJSON = (response: string | null): object | false => {
   if (response === null) return false;
@@ -237,7 +238,7 @@ const OutputPanel = (props: {
       case "Markdown":
         return <MarkdownDiv markdown={response} isRenderInline={false} />;
       case "HTML":
-        return <div dangerouslySetInnerHTML={{ __html: response }} />;
+        return <InnerHTML html={response} />;
       case "Images":
       case "Videos":
       case "Audios":
@@ -321,13 +322,12 @@ const OutputPanel = (props: {
                 break;
               case "html":
                 itemElement = (
-                  <div
-                    dangerouslySetInnerHTML={{
-                      __html:
-                        (Array.isArray(item.content)
-                          ? item.content[0]
-                          : item.content) || "",
-                    }}
+                  <InnerHTML
+                    html={
+                      Array.isArray(item.content)
+                        ? item.content[0]
+                        : item.content || ""
+                    }
                   />
                 );
                 break;

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -4178,6 +4178,11 @@ damerau-levenshtein@^1.0.8:
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
   integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
 
+dangerously-set-html-content@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/dangerously-set-html-content/-/dangerously-set-html-content-1.1.0.tgz#cffd83f2a8e3d59eca7302feecad1b068e94a4c3"
+  integrity sha512-kUHpnYZ9EgT6BKUEgrgccg17Pa0YdI9MlWdDYeu49HIXYONCxZpKr6Tj24q+LwFmbmtL3IJ1Rvj+aaTTzFOepg==
+
 data-urls@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"