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

chore(collection/presentation): render with shadow DOM

Browse Source
This commit is contained in:
Elian Doran 2025-10-15 20:05:39 +03:00
parent f9754cd82d
commit 1a000fdb33
No known key found for this signature in database
2 changed files with 34 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,10 +1,10 @@
import { ViewModeProps } from "../interface";
import FNote from "../../../entities/fnote";
import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
import Reveal from "reveal.js";
import "reveal.js/dist/reveal.css";
import "reveal.js/dist/theme/black.css";
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";
export default function PresentationView({ note }: ViewModeProps<{}>) {
const [ presentation, setPresentation ] = useState<PresentationModel>();
@ -14,7 +14,11 @@ export default function PresentationView({ note }: ViewModeProps<{}>) {
}, [ note ]);
return presentation && (
<Presentation presentation={presentation} />
<ShadowDom className="presentation-container" style={{ width: "100%", height: "100%" }}>
<style>{slideBaseStylesheet}</style>
<style>{slideThemeStylesheet}</style>
<Presentation presentation={presentation} />
</ShadowDom>
)
}

26
apps/client/src/widgets/react/ShadowDom.tsx Normal file
View File

@ -0,0 +1,26 @@
import { ComponentChildren, HTMLAttributes, JSX, render } from "preact";
import { useEffect, useRef, useState } from "preact/hooks";
interface ShadowDomProps extends HTMLAttributes<HTMLDivElement> {
children: ComponentChildren;
}
export default function ShadowDom({ children, ...containerProps }: ShadowDomProps) {
const containerRef = useRef<HTMLDivElement>(null);
const [ shadowRoot, setShadowRoot ] = useState<ShadowRoot | null>(null);
// Create the shadow root.
useEffect(() => {
if (!containerRef.current || shadowRoot) return;
const shadow = containerRef.current.attachShadow({ mode: "open" });
setShadowRoot(shadow);
}, [ shadowRoot ]);
// Render the child elements.
useEffect(() => {
if (!shadowRoot) return;
render(<>{children}</>, shadowRoot);
}, [ shadowRoot, children ]);
return <div ref={containerRef} {...containerProps} />
}