vynte-infra/plunk
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

switches dangerouslySetInnerHTML div for iframe in tiptap editor

Browse Source
This commit is contained in:
Mantey
2025-02-02 16:11:16 +00:00
parent d8a98c8415
commit 167ca78f3d
1 changed files with 26 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/dashboard/src/components/Input/MarkdownEditor/Editor.tsx
+26 -11
View File
@@ -6,7 +6,7 @@ import Typography from "@tiptap/extension-typography";
import { EditorContent, useEditor } from "@tiptap/react"; import { EditorContent, useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit"; import StarterKit from "@tiptap/starter-kit";
import { AnimatePresence, motion } from "framer-motion"; import { AnimatePresence, motion } from "framer-motion";
import React, { useCallback, useRef, useState } from "react"; import React, { useCallback, useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { z } from "zod"; import { z } from "zod";
import { Modal } from "../../Overlay"; import { Modal } from "../../Overlay";
@@ -129,6 +129,7 @@ export default function Editor({ value, onChange, mode, modeSwitcher }: Markdown
onUpdate: ({ editor }) => { onUpdate: ({ editor }) => {
onChange(editor.getHTML(), "PLUNK"); onChange(editor.getHTML(), "PLUNK");
}, },
immediatelyRender: false
}); });
const { const {
@@ -280,9 +281,8 @@ export default function Editor({ value, onChange, mode, modeSwitcher }: Markdown
e.preventDefault(); e.preventDefault();
setConfirmModal(true); setConfirmModal(true);
}} }}
className={`w-full flex-1 rounded p-2 text-sm font-medium ${ className={`w-full flex-1 rounded p-2 text-sm font-medium ${mode === "PLUNK" ? "bg-white" : "hover:bg-neutral-50"
mode === "PLUNK" ? "bg-white" : "hover:bg-neutral-50" } transition ease-in-out`}
} transition ease-in-out`}
> >
Plunk Editor Plunk Editor
</button> </button>
@@ -291,9 +291,8 @@ export default function Editor({ value, onChange, mode, modeSwitcher }: Markdown
e.preventDefault(); e.preventDefault();
setConfirmModal(true); setConfirmModal(true);
}} }}
className={`w-full flex-1 rounded p-2 text-sm font-medium ${ className={`w-full flex-1 rounded p-2 text-sm font-medium ${mode === "HTML" ? "bg-white" : "hover:bg-neutral-50"
mode === "HTML" ? "bg-white" : "hover:bg-neutral-50" } transition ease-in-out`}
} transition ease-in-out`}
> >
HTML HTML
</button>{" "} </button>{" "}
@@ -768,10 +767,26 @@ export default function Editor({ value, onChange, mode, modeSwitcher }: Markdown
<label className="block text-sm font-medium text-neutral-700">Preview</label> <label className="block text-sm font-medium text-neutral-700">Preview</label>
<div className={"mt-1 h-full rounded border border-neutral-300 p-3"}> <div className={"mt-1 h-full rounded border border-neutral-300 p-3"}>
<div {/* injects value into iframe with script to dynamically adjust height based on content */}
className={"revert-tailwind"} <iframe
dangerouslySetInnerHTML={{ className="mb-0 overflow-hidden w-full"
__html: value, srcDoc={`
${value}
<script>
window.addEventListener('load', function() {
const height = document.documentElement.offsetHeight;
window.parent.postMessage({ type: 'resize-iframe', height: height }, '*');
});
</script>
`}
onLoad={(e) => {
const handleMessage = (event: MessageEvent) => {
if (event.data?.type === 'resize-iframe') {
(e.target as HTMLIFrameElement).style.height = `${event.data.height}px`;
}
};
window.addEventListener('message', handleMessage);
return () => window.removeEventListener('message', handleMessage);
}} }}
/> />
</div> </div>