mingzailao
/
silverbullet
mirror of https://github.com/silverbulletmd/silverbullet.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix for flashing markdown preview (#880)

pull/882/head
MrMugame 2024-06-07 08:19:26 +02:00 committed by GitHub
parent 99aaae23f1
commit 8524c0f96f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 48 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
plugs/markdown/preview.ts
View File

@ -31,18 +31,15 @@ export async function updateMarkdownPreview() {
await editor.showPanel( await editor.showPanel(
"rhs", "rhs",
2, 2,
`<html> `
<head> <link rel="stylesheet" href="/.client/main.css" />
<link rel="stylesheet" href="/.client/main.css" /> <style>
<style> ${css}
${css} ${customStyles ?? ""}
${customStyles ?? ""} </style>
</style>
</head> <div id="root" class="sb-preview">${html}</div>
<body> `,
<div id="root" class="sb-preview">${html}</div>
</body>
</html>`,
` `
document.documentElement.dataset.theme = ${JSON.stringify(theme)}; document.documentElement.dataset.theme = ${JSON.stringify(theme)};

36
web/components/panel.tsx
View File

@ -11,24 +11,30 @@ export function Panel({
editor: Client; editor: Client;
}) { }) {
const iFrameRef = useRef<HTMLIFrameElement>(null); const iFrameRef = useRef<HTMLIFrameElement>(null);
useEffect(() => {
function loadContent() { function updateContent() {
if (iFrameRef.current?.contentWindow) { if (!iFrameRef.current?.contentWindow) {
iFrameRef.current.contentWindow.postMessage({
type: "html",
html: config.html,
script: config.script,
});
}
}
if (!iFrameRef.current) {
return; return;
} }
iFrameRef.current.contentWindow.postMessage({
type: "html",
html: config.html,
script: config.script,
});
}
useEffect(() => {
const iframe = iFrameRef.current; const iframe = iFrameRef.current;
iframe.onload = loadContent; if (!iframe) {
loadContent(); return;
}
iframe.addEventListener("load", updateContent)
updateContent();
return () => { return () => {
iframe.onload = null; iframe.removeEventListener("load", updateContent);
}; };
}, [config.html, config.script]); }, [config.html, config.script]);
@ -82,7 +88,7 @@ export function Panel({
return ( return (
<div className="sb-panel" style={{ flex: config.mode }}> <div className="sb-panel" style={{ flex: config.mode }}>
<iframe srcDoc={panelHtml} ref={iFrameRef} /> <iframe srcDoc={panelHtml} ref={iFrameRef} style={{ visibility: 'hidden' }} onLoad={() => iFrameRef.current!.style.visibility = "visible" }/>
</div> </div>
); );
} }

1
web/components/panel_html.ts
View File

@ -3,6 +3,7 @@ export const panelHtml = `<!DOCTYPE html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<base target="_top"> <base target="_top">
<meta name='color-scheme' content='dark light'>
<script> <script>
const pendingRequests = new Map(); const pendingRequests = new Map();
let syscallReqId = 0; let syscallReqId = 0;

35
web/styles/main.scss
View File

@ -178,14 +178,6 @@ body {
.sb-panel { .sb-panel {
flex: 1; flex: 1;
iframe {
border: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
} }
} }
@ -203,14 +195,6 @@ body {
.sb-panel { .sb-panel {
height: 100%; height: 100%;
iframe {
border: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
} }
} }
@ -220,13 +204,16 @@ body {
.sb-panel { .sb-panel {
height: 100%; height: 100%;
}
iframe { }
border: 0;
width: 100%; .sb-panel {
height: 100%; iframe {
padding: 0; background-color: var(--root-background-color);
margin: 0; border: 0;
} width: 100%;
height: 100%;
padding: 0;
margin: 0;
} }
} }

4
web/styles/theme.scss
View File

@ -128,6 +128,10 @@ html {
--editor-width: 800px; --editor-width: 800px;
} }
html[data-theme="light"] {
color-scheme: light;
}
html[data-theme="dark"] { html[data-theme="dark"] {
color-scheme: dark; color-scheme: dark;