improve slides display

apps/client/src/features/editor/components/presentation/presentation-modal.module.css

@@ -25,11 +25,14 @@
   overflow: hidden;
   display: flex;
   justify-content: center;
+  align-items: center;
   padding: 6vh 5vw 10vh;
 }
 
 .scrollable {
   overflow-y: auto;
+  align-items: flex-start;
+  zoom: 0.85;
 }
 
 .measurementArea {

apps/client/src/features/editor/components/presentation/presentation-modal.tsx

@@ -3,11 +3,12 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ActionIcon, Box, Modal, Text, Title, Tooltip } from "@mantine/core";
 import { IconChevronLeft, IconChevronRight, IconX } from "@tabler/icons-react";
 import { useHotkeys } from "@mantine/hooks";
-import { EditorProvider, isNodeEmpty, type JSONContent } from "@tiptap/react";
+import { EditorProvider, type JSONContent } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
 import { mainExtensions } from "@/features/editor/extensions/extensions";
 import { TransclusionLookupProvider } from "@/features/editor/components/transclusion/transclusion-lookup-context";
 import classes from "./presentation-modal.module.css";
+import { useParams } from "react-router-dom";
 
 type PresentationSlide =
   | { kind: "title" }
@@ -18,8 +19,6 @@ type MeasuredContentSlide = {
   scrollable: boolean;
 };
 
-type MeasuredNode = { node: JSONContent; rect: DOMRect };
-
 interface PresentationModalProps {
   title: string;
   content: JSONContent;
@@ -41,6 +40,9 @@ const isDivider = (node: JSONContent) => node.type === "horizontalRule";
 const isSectionHeading = (node: JSONContent) =>
   node.type === "heading" && node.attrs?.level === 1;
 
+const isEndOfSection = (node: JSONContent) =>
+  node.type === "base" || node.type === "table";
+
 function getAvailableHeight(area: HTMLElement): number {
   const styles = window.getComputedStyle(area);
   return (
@@ -57,10 +59,11 @@ export default function PresentationModal({
   onClose,
 }: PresentationModalProps) {
   const { t } = useTranslation();
+  const { pageSlug } = useParams();
   const [slideIndex, setSlideIndex] = useState(0);
-  const [contentSlides, setContentSlides] = useState<MeasuredContentSlide[] | null>(
+  const [contentSlides, setContentSlides] = useState<
-    null
+    MeasuredContentSlide[] | null
-  );
+  >(null);
   const slideAreaRef = useRef<HTMLDivElement>(null);
 
   const extensions = useMemo(
@@ -68,6 +71,12 @@ export default function PresentationModal({
     []
   );
 
+  useEffect(() => {
+    if (opened) {
+      onClose();
+    }
+  }, [pageSlug]);
+
   useEffect(() => {
     if (opened) {
       setSlideIndex(0);
@@ -122,7 +131,9 @@ export default function PresentationModal({
         return;
       }
 
-      const renderedNodes = Array.from(editor.view.dom.children) as HTMLElement[];
+      const renderedNodes = Array.from(
+        editor.view.dom.children
+      ) as HTMLElement[];
       if (!renderedNodes.length) {
         setContentSlides([]);
         return;
@@ -170,6 +181,10 @@ export default function PresentationModal({
 
         currentSlide.push(node);
         currentSlideBottom = rect.bottom;
+
+        if (isEndOfSection(node)) {
+          saveCurrentSlide();
+        }
       }
 
       saveCurrentSlide();
@@ -211,6 +226,7 @@ export default function PresentationModal({
   );
 
   const currentSlide = slides[slideIndex];
+  const scrollable = currentSlide.kind === "content" && currentSlide.scrollable;
 
   return (
     <Modal.Root
@@ -237,10 +253,9 @@ export default function PresentationModal({
           </Tooltip>
 
           <Box
+            onClick={goToNext}
             className={`${classes.slideArea} ${
-              currentSlide?.kind === "content" && currentSlide.scrollable
+              scrollable ? classes.scrollable : ""
-                ? classes.scrollable
-                : ""
             }`}
             ref={slideAreaRef}
           >