mirror of
https://github.com/zadam/trilium.git
synced 2025-10-21 07:38:53 +02:00
fix(client/print): variables not loading for printing presentations
This commit is contained in:
parent
df176c4e4a
commit
b0234a75f8
@ -1,4 +1,4 @@
|
|||||||
import { ViewModeProps } from "../interface";
|
import { ViewModeMedia, ViewModeProps } from "../interface";
|
||||||
import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
|
import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
|
||||||
import Reveal from "reveal.js";
|
import Reveal from "reveal.js";
|
||||||
import slideBaseStylesheet from "reveal.js/dist/reveal.css?raw";
|
import slideBaseStylesheet from "reveal.js/dist/reveal.css?raw";
|
||||||
@ -18,7 +18,7 @@ export default function PresentationView({ note, noteIds, media }: ViewModeProps
|
|||||||
const [ presentation, setPresentation ] = useState<PresentationModel>();
|
const [ presentation, setPresentation ] = useState<PresentationModel>();
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
const [ api, setApi ] = useState<Reveal.Api>();
|
const [ api, setApi ] = useState<Reveal.Api>();
|
||||||
const stylesheets = usePresentationStylesheets(note);
|
const stylesheets = usePresentationStylesheets(note, media);
|
||||||
|
|
||||||
function refresh() {
|
function refresh() {
|
||||||
buildPresentationModel(note).then(setPresentation);
|
buildPresentationModel(note).then(setPresentation);
|
||||||
@ -62,17 +62,22 @@ export default function PresentationView({ note, noteIds, media }: ViewModeProps
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function usePresentationStylesheets(note: FNote) {
|
function usePresentationStylesheets(note: FNote, media: ViewModeMedia) {
|
||||||
const [ themeName ] = useNoteLabelWithDefault(note, "presentation:theme", DEFAULT_THEME);
|
const [ themeName ] = useNoteLabelWithDefault(note, "presentation:theme", DEFAULT_THEME);
|
||||||
const [ stylesheets, setStylesheets ] = useState<string[]>();
|
const [ stylesheets, setStylesheets ] = useState<string[]>();
|
||||||
|
|
||||||
useLayoutEffect(() => {
|
useLayoutEffect(() => {
|
||||||
loadPresentationTheme(themeName).then((themeStylesheet) => {
|
loadPresentationTheme(themeName).then((themeStylesheet) => {
|
||||||
setStylesheets([
|
let stylesheets = [
|
||||||
slideBaseStylesheet,
|
slideBaseStylesheet,
|
||||||
themeStylesheet,
|
themeStylesheet,
|
||||||
slideCustomStylesheet
|
slideCustomStylesheet
|
||||||
].map(stylesheet => stylesheet.replace(/:root/g, ":host")));
|
];
|
||||||
|
if (media === "screen") {
|
||||||
|
// We are rendering in the shadow DOM, so the global variables are not set correctly.
|
||||||
|
stylesheets = stylesheets.map(stylesheet => stylesheet.replace(/:root/g, ":host"));
|
||||||
|
}
|
||||||
|
setStylesheets(stylesheets);
|
||||||
});
|
});
|
||||||
}, [ themeName ]);
|
}, [ themeName ]);
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user