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(
"rhs",
2,
`<html>
<head>
<link rel="stylesheet" href="/.client/main.css" />
<style>
${css}
${customStyles ?? ""}
</style>
</head>
<body>
<div id="root" class="sb-preview">${html}</div>
</body>
</html>`,
`
<link rel="stylesheet" href="/.client/main.css" />
<style>
${css}
${customStyles ?? ""}
</style>
<div id="root" class="sb-preview">${html}</div>
`,
`
document.documentElement.dataset.theme = ${JSON.stringify(theme)};

36
web/components/panel.tsx
View File

@ -11,24 +11,30 @@ export function Panel({
editor: Client;
}) {
const iFrameRef = useRef<HTMLIFrameElement>(null);
useEffect(() => {
function loadContent() {
if (iFrameRef.current?.contentWindow) {
iFrameRef.current.contentWindow.postMessage({
type: "html",
html: config.html,
script: config.script,
});
}
}
if (!iFrameRef.current) {
function updateContent() {
if (!iFrameRef.current?.contentWindow) {
return;
}
iFrameRef.current.contentWindow.postMessage({
type: "html",
html: config.html,
script: config.script,
});
}
useEffect(() => {
const iframe = iFrameRef.current;
iframe.onload = loadContent;
loadContent();
if (!iframe) {
return;
}
iframe.addEventListener("load", updateContent)
updateContent();
return () => {
iframe.onload = null;
iframe.removeEventListener("load", updateContent);
};
}, [config.html, config.script]);
@ -82,7 +88,7 @@ export function Panel({
return (
<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>
);
}

3
web/components/panel_html.ts
View File

@ -3,6 +3,7 @@ export const panelHtml = `<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<base target="_top">
<meta name='color-scheme' content='dark light'>
<script>
const pendingRequests = new Map();
let syscallReqId = 0;
@ -80,7 +81,7 @@ function updateHeight() {
if(height !== oldHeight) {
oldHeight = height;
api({
type: "setHeight",
type: "setHeight",
height: height,
});
}

37
web/styles/main.scss
View File

@ -104,7 +104,7 @@ body {
display: block;
-webkit-app-region: drag;
.cm-scroller {
font-family: var(--ui-font);
}
@ -178,14 +178,6 @@ body {
.sb-panel {
flex: 1;
iframe {
border: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
}
}
@ -203,14 +195,6 @@ body {
.sb-panel {
height: 100%;
iframe {
border: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
}
}
@ -220,13 +204,16 @@ body {
.sb-panel {
height: 100%;
iframe {
border: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
}
}
.sb-panel {
iframe {
background-color: var(--root-background-color);
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;
}
html[data-theme="light"] {
color-scheme: light;
}
html[data-theme="dark"] {
color-scheme: dark;