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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
reader/src/ResourcePage.jsx
View File

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