gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-19 14:49:01 +02:00
Code Issues Actions 119 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 { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
import Reveal from "reveal.js";
import slideBaseStylesheetUrl from "reveal.js/dist/reveal.css?url";
import slideThemeStylesheetUrl from "reveal.js/dist/theme/black.css?url";
import slideBaseStylesheet from "reveal.js/dist/reveal.css?raw";
import slideThemeStylesheet from "reveal.js/dist/theme/black.css?raw";
import { buildPresentationModel, PresentationModel, PresentationSlideModel } from "./model";
import ShadowDom from "../../react/ShadowDom";
const stylesheets = [
slideBaseStylesheet,
slideThemeStylesheet
].map(stylesheet => stylesheet.replace(/:root/g, ":host"));
export default function PresentationView({ note }: ViewModeProps<{}>) {
const [ presentation, setPresentation ] = useState<PresentationModel>();
@ -15,8 +20,7 @@ export default function PresentationView({ note }: ViewModeProps<{}>) {
return presentation && (
<ShadowDom className="presentation-container" style={{ width: "100%", height: "100%" }}>
<link rel="stylesheet" href={slideBaseStylesheetUrl} />
<link rel="stylesheet" href={slideThemeStylesheetUrl} />
{stylesheets.map(stylesheet => <style>{stylesheet}</style>)}
<Presentation presentation={presentation} />
</ShadowDom>
)