feat(collection/presentation): add support for vertical slides

apps/client/src/widgets/collections/presentation/index.tsx

@@ -85,9 +85,18 @@ function Presentation({ presentation } : { presentation: PresentationModel }) {
 }
 
 function Slide({ slide }: { slide: PresentationSlideModel }) {
-    return (
-        <section dangerouslySetInnerHTML={slide.content}>
-            {slide.content}
-        </section>
-    );
+    if (!slide.verticalSlides) {
+        // Normal slide.
+        return <section dangerouslySetInnerHTML={slide.content} />;
+    } else {
+        // Slide with sub notes (show as vertical slides).
+        return (
+            <section>
+                <section dangerouslySetInnerHTML={slide.content} />
+                {slide.verticalSlides.map((slide) => (
+                    <section dangerouslySetInnerHTML={slide.content} />
+                ))}
+            </section>
+        )
+    }
 }

apps/client/src/widgets/collections/presentation/model.ts

@@ -1,7 +1,14 @@
 import FNote from "../../../entities/fnote";
 
+type DangerouslySetInnerHTML = { __html: string; };
+
 export interface PresentationSlideModel {
-    content: { __html: string; };
+    content: DangerouslySetInnerHTML;
+    verticalSlides: PresentationVerticalSlideModel[] | undefined;
+}
+
+interface PresentationVerticalSlideModel {
+    content: DangerouslySetInnerHTML;
 }
 
 export interface PresentationModel {
@@ -15,13 +22,27 @@ export async function buildPresentationModel(note: FNote): Promise<PresentationM
 
     for (const slideNote of slideNotes) {
         slides.push({
-            content: {
-                __html: await slideNote.getContent() ?? ""
-            }
+            content: processContent(await slideNote.getContent() ?? ""),
+            verticalSlides: await buildVerticalSlides(slideNote)
         })
     }
 
-    return {
-        slides
-    };
+    return { slides };
+}
+
+async function buildVerticalSlides(parentSlideNote: FNote): Promise<undefined | PresentationVerticalSlideModel[]> {
+    const children = await parentSlideNote.getChildNotes();
+    if (!children.length) return;
+
+    const slides: PresentationVerticalSlideModel[] = [];
+    for (const child of children) {
+        slides.push({
+            content: processContent(await child.getContent())
+        });
+    }
+    return slides;
+}
+
+function processContent(content: string | undefined): DangerouslySetInnerHTML {
+    return { __html: content ?? "" };
 }