gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-19 22:58:52 +02:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

fix(collection/presentation): CSS variables not working in shadow DOM

Browse Source
This commit is contained in:
Elian Doran 2025-10-15 20:25:07 +03:00
parent 9281cc9290
commit 9f993363d7
No known key found for this signature in database
1 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/client/src/widgets/collections/presentation/index.tsx
View File

@ -1,11 +1,16 @@
import { ViewModeProps } from "../interface"; import { 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 slideBaseStylesheetUrl from "reveal.js/dist/reveal.css?url"; import slideBaseStylesheet from "reveal.js/dist/reveal.css?raw";
import slideThemeStylesheetUrl from "reveal.js/dist/theme/black.css?url"; import slideThemeStylesheet from "reveal.js/dist/theme/black.css?raw";
import { buildPresentationModel, PresentationModel, PresentationSlideModel } from "./model"; import { buildPresentationModel, PresentationModel, PresentationSlideModel } from "./model";
import ShadowDom from "../../react/ShadowDom"; import ShadowDom from "../../react/ShadowDom";
const stylesheets = [
slideBaseStylesheet,
slideThemeStylesheet
].map(stylesheet => stylesheet.replace(/:root/g, ":host"));
export default function PresentationView({ note }: ViewModeProps<{}>) { export default function PresentationView({ note }: ViewModeProps<{}>) {
const [ presentation, setPresentation ] = useState<PresentationModel>(); const [ presentation, setPresentation ] = useState<PresentationModel>();
@ -15,8 +20,7 @@ export default function PresentationView({ note }: ViewModeProps<{}>) {
return presentation && ( return presentation && (
<ShadowDom className="presentation-container" style={{ width: "100%", height: "100%" }}> <ShadowDom className="presentation-container" style={{ width: "100%", height: "100%" }}>
<link rel="stylesheet" href={slideBaseStylesheetUrl} /> {stylesheets.map(stylesheet => <style>{stylesheet}</style>)}
<link rel="stylesheet" href={slideThemeStylesheetUrl} />
<Presentation presentation={presentation} /> <Presentation presentation={presentation} />
</ShadowDom> </ShadowDom>
) )