tomas.mirchev/med-notes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix iframe scrolling in edit

Browse Source
This commit is contained in:
Tomas Mirchev
2025-06-30 17:33:56 +00:00
parent 0bf9588acb
commit 6807c632da
1 changed files with 15 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
reader/src/ResourcePage.jsx
View File

@@ -143,6 +143,8 @@ const ResourcePage = ({ topics }) => {
const htmlContent = useMemo(() => { const htmlContent = useMemo(() => {
let fileContent = content || "**No Data!**"; let fileContent = content || "**No Data!**";
fileContent = marked.parse(fileContent); fileContent = marked.parse(fileContent);
console.log({ content, fileContent });
fileContent = ` fileContent = `
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
@@ -156,9 +158,7 @@ const ResourcePage = ({ topics }) => {
color: #333; color: #333;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
margin: 0; height: 100%;
padding: 0;
overflow: hidden;
} }
</style> </style>
</head> </head>
@@ -171,12 +171,15 @@ const ResourcePage = ({ topics }) => {
}, [content]); }, [content]);
const handleLoad = () => { const handleLoad = () => {
return;
const iframe = iframeRef.current; const iframe = iframeRef.current;
if (iframe) { if (iframe) {
try { try {
// Only works for same-origin content // Only works for same-origin content
const contentHeight = iframe.contentDocument.body.scrollHeight; const contentHeight = iframe.contentDocument.body.scrollHeight;
if (contentHeight > 100) {
iframe.style.height = contentHeight + "px"; iframe.style.height = contentHeight + "px";
}
} catch (error) { } catch (error) {
console.log("Cross-origin iframe - cannot access content height"); console.log("Cross-origin iframe - cannot access content height");
} }
@@ -299,21 +302,16 @@ const ResourcePage = ({ topics }) => {
{/* Content Editor */} {/* Content Editor */}
<div className="flex-1 overflow-scroll"> <div className="flex-1 overflow-scroll">
<div className="min-h-full flex"> <div className="min-h-full flex h-[5000px]">
<div <textarea
contentEditable={!isLoading && !isSavingLoading} id="content"
suppressContentEditableWarning={true} disabled={isLoading || isSavingLoading}
onInput={(e) => setContent(e.currentTarget.textContent || "")} value={content || ""}
className="flex-1 min-h-full px-3 py-2 bg-gray-100 border-r border-gray-300 outline-none font-mono text-sm whitespace-pre-wrap" onChange={(e) => setContent(e.target.value)}
ref={(el) => { className="flex-1 min-h-full resize-none p-2 bg-gray-100 border-r border-gray-300 outline-none font-mono text-sm"
if (el && el.textContent !== content) { placeholder="Въведете вашето Markdown съдържание тук..."
el.textContent = content || "";
}
}}
/> />
<iframe <iframe
ref={iframeRef}
onLoad={handleLoad}
srcDoc={htmlContent} srcDoc={htmlContent}
title="MD Content" title="MD Content"
className="flex-1 min-h-full border-none p-4" className="flex-1 min-h-full border-none p-4"