html email content inside an iframe

apps/client/package.json

@@ -55,6 +55,7 @@
  "pug": "^3.0.2",
  "react": "18.2.0",
  "react-dom": "18.2.0",
+ "react-frame-component": "^5.2.6",
  "react-hotkeys": "^2.0.0",
  "react-query": "^3.34.7",
  "react-render-html": "^0.6.0",

apps/client/pages/ticket/[id].tsx

@@ -25,6 +25,8 @@ import SubScript from "@tiptap/extension-subscript";
 import Superscript from "@tiptap/extension-superscript";
 import { getCookie } from "cookies-next";
 import useTranslation from "next-translate/useTranslation";
+import Frame from "react-frame-component";
+
 import { useUser } from "../../store/session";
 
 function classNames(...classes: any) {
@@ -623,7 +625,13 @@ export default function Ticket() {
  <div className="">
  {data.ticket.fromImap ? (
  <div className="break-words bg-white rounded-md p-4 text-black">
- {renderHTML(data.ticket.detail)}
+ {/* {renderHTML(data.ticket.detail)} */}
+ <Frame
+ className="min-h-[60vh] h-full w-full"
+ initialContent={data.ticket.detail}
+ >
+ {" "}
+ </Frame>
  </div>
  ) : (
  <div className="">

yarn.lock

@@ -8582,6 +8582,11 @@ react-dom@18.2.0, react-dom@^18.2.0:
  loose-envify "^1.1.0"
  scheduler "^0.23.0"
 
+react-frame-component@^5.2.6:
+ version "5.2.6"
+ resolved "https://registry.yarnpkg.com/react-frame-component/-/react-frame-component-5.2.6.tgz#0d9991d251ff1f7177479d8f370deea06b824b79"
+ integrity sha512-CwkEM5VSt6nFwZ1Op8hi3JB5rPseZlmnp5CGiismVTauE6S4Jsc4TNMlT0O7Cts4WgIC3ZBAQ2p1Mm9XgLbj+w==
+
 react-hotkeys@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-2.0.0.tgz#a7719c7340cbba888b0e9184f806a9ec0ac2c53f"