feat: lightbox media display (#2420)

* lightbox media display init

* revert uninteded changes

* load page media more accurately

* restrict lock file changes to installed packages

* revert changes in lock file

* update lockfile

* - support diagrams
- support readonly mode
- use softer backdrop
- other enhancments

---------

Co-authored-by: Philipinho <16838612+Philipinho@users.noreply.github.com>

apps/client/package.json

@@ -64,6 +64,7 @@
     "react-router-dom": "7.18.2",
     "semver": "7.7.4",
     "socket.io-client": "4.8.3",
+    "yet-another-react-lightbox": "^3.32.2",
     "zod": "4.3.6"
   },
   "devDependencies": {

apps/client/public/locales/en-US/translation.json

@@ -294,6 +294,7 @@
   "Export space": "Export space",
   "Export {{type}}": "Export {{type}}",
   "File exceeds the {{limit}} attachment limit": "File exceeds the {{limit}} attachment limit",
+  "Media": "Media",
   "Align left": "Align left",
   "Align right": "Align right",
   "Align center": "Align center",

apps/client/src/features/editor/atoms/editor-atoms.ts

@@ -16,6 +16,14 @@ export const showAiMenuAtom = atom(false);
 
 export const showLinkMenuAtom = atom(false);
 
+export type LightboxRequest = {
+  src: string;
+  type: "image" | "video";
+} | null;
+
+const initialLightboxRequest: LightboxRequest = null;
+export const lightboxRequestAtom = atom(initialLightboxRequest);
+
 // Current page's edit mode — initialized from the user's saved preference on
 // first load, can be toggled locally without persisting to the server.
 export const currentPageEditModeAtom = atom<PageEditMode>(PageEditMode.Edit);

apps/client/src/features/editor/components/bubble-menu/bubble-menu.tsx

@@ -23,11 +23,21 @@ import {
 } from "@/features/comment/atoms/comment-atom";
 import { useAtom, useAtomValue } from "jotai";
 import { v7 as uuid7 } from "uuid";
-import { isCellSelection, isEditorReady, isTextSelected } from "@docmost/editor-ext";
+import {
+  isCellSelection,
+  isEditorReady,
+  isTextSelected,
+} from "@docmost/editor-ext";
 import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector.tsx";
 import { useTranslation } from "react-i18next";
-import { showAiMenuAtom, showLinkMenuAtom } from "@/features/editor/atoms/editor-atoms";
+import {
-import { userAtom, workspaceAtom } from "@/features/user/atoms/current-user-atom";
+  showAiMenuAtom,
+  showLinkMenuAtom,
+} from "@/features/editor/atoms/editor-atoms";
+import {
+  userAtom,
+  workspaceAtom,
+} from "@/features/user/atoms/current-user-atom";
 
 export interface BubbleMenuItem {
   name: string;
@@ -217,7 +227,12 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
 
             <ActionIcon.Group>
               {items.map((item, index) => (
-                <Tooltip key={index} label={t(item.name)} withArrow>
+                <Tooltip
+                  key={index}
+                  label={t(item.name)}
+                  withArrow
+                  withinPortal={false}
+                >
                   <ActionIcon
                     key={index}
                     variant="default"
@@ -226,7 +241,9 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
                     aria-label={t(item.name)}
                     className={clsx({ [classes.active]: item.isActive() })}
                     style={{ border: "none" }}
-                    onClick={() => isEditorReady(props.editor) && item.command()}
+                    onClick={() =>
+                      isEditorReady(props.editor) && item.command()
+                    }
                   >
                     <item.icon style={{ width: rem(16) }} stroke={2} />
                   </ActionIcon>
@@ -256,7 +273,9 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
               radius="6px"
               aria-label={t(commentItem.name)}
               style={{ border: "none" }}
-              onClick={() => isEditorReady(props.editor) && commentItem.command()}
+              onClick={() =>
+                isEditorReady(props.editor) && commentItem.command()
+              }
             >
               <IconMessage size={16} stroke={2} />
             </ActionIcon>

apps/client/src/features/editor/components/bubble-menu/color-selector.tsx

@@ -129,8 +129,7 @@ function handleColorKeyNav(
   grid: "text" | "highlight",
 ) {
   const cols = COLOR_GRID_COLS;
-  const total =
+  const total = grid === "text" ? TEXT_COLORS.length : HIGHLIGHT_COLORS.length;
-    grid === "text" ? TEXT_COLORS.length : HIGHLIGHT_COLORS.length;
   const col = index % cols;
 
   if (e.key === "ArrowRight") {
@@ -163,8 +162,7 @@ function handleColorKeyNav(
     if (prev >= 0) {
       focusSwatch(grid, prev);
     } else if (grid === "highlight") {
-      const lastRowStart =
+      const lastRowStart = Math.floor((TEXT_COLORS.length - 1) / cols) * cols;
-        Math.floor((TEXT_COLORS.length - 1) / cols) * cols;
       focusSwatch("text", Math.min(lastRowStart + col, TEXT_COLORS.length - 1));
     }
     return;
@@ -222,7 +220,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
       withArrow
     >
       <Popover.Target>
-        <Tooltip label={t("Text color")} withArrow>
+        <Tooltip label={t("Text color")} withArrow withinPortal={false}>
           <Button
             variant="default"
             radius="0"
@@ -247,26 +245,26 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
 
       <Popover.Dropdown onMouseDown={(e) => e.preventDefault()}>
         <Stack gap="md" p="2px">
-            <Box>
+          <Box>
-              <Text size="sm" fw={600} mb="xs">
+            <Text size="sm" fw={600} mb="xs">
-                {t("Text color")}
+              {t("Text color")}
-              </Text>
+            </Text>
-              <SimpleGrid cols={5} spacing="xs">
+            <SimpleGrid cols={5} spacing="xs">
-                {TEXT_COLORS.map(({ name, color }, index) => {
+              {TEXT_COLORS.map(({ name, color }, index) => {
-                  const applyTextColor = () => {
+                const applyTextColor = () => {
-                    if (!isEditorReady(editor)) return;
+                  if (!isEditorReady(editor)) return;
-                    if (name === "Default") {
+                  if (name === "Default") {
-                      editor.commands.unsetColor();
+                    editor.commands.unsetColor();
-                    } else {
+                  } else {
-                      editor
+                    editor
-                        .chain()
+                      .chain()
-                        .focus()
+                      .focus()
-                        .setColor(color || "")
+                      .setColor(color || "")
-                        .run();
+                      .run();
-                    }
+                  }
-                    setIsOpen(false);
+                  setIsOpen(false);
-                  };
+                };
-                  return (
+                return (
                   <Tooltip key={index} label={t(name)} withArrow>
                     <Box
                       role="button"
@@ -306,34 +304,34 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                       A
                     </Box>
                   </Tooltip>
-                  );
+                );
-                })}
+              })}
-              </SimpleGrid>
+            </SimpleGrid>
-            </Box>
+          </Box>
 
-            <Box>
+          <Box>
-              <Text size="sm" fw={600} mb="xs">
+            <Text size="sm" fw={600} mb="xs">
-                {t("Highlight color")}
+              {t("Highlight color")}
-              </Text>
+            </Text>
-              <SimpleGrid cols={5} spacing="xs">
+            <SimpleGrid cols={5} spacing="xs">
-                {HIGHLIGHT_COLORS.map(({ name, color }, index) => {
+              {HIGHLIGHT_COLORS.map(({ name, color }, index) => {
-                  const applyHighlight = () => {
+                const applyHighlight = () => {
-                    if (!isEditorReady(editor)) return;
+                  if (!isEditorReady(editor)) return;
-                    if (name === "Default") {
+                  if (name === "Default") {
-                      editor.commands.unsetHighlight();
+                    editor.commands.unsetHighlight();
-                    } else {
+                  } else {
-                      editor
+                    editor
-                        .chain()
+                      .chain()
-                        .focus()
+                      .focus()
-                        .toggleMark("highlight", {
+                      .toggleMark("highlight", {
-                          color: color || "",
+                        color: color || "",
-                          colorName: name.toLowerCase() || "",
+                        colorName: name.toLowerCase() || "",
-                        })
+                      })
-                        .run();
+                      .run();
-                    }
+                  }
-                    setIsOpen(false);
+                  setIsOpen(false);
-                  };
+                };
-                  return (
+                return (
                   <Tooltip key={index} label={t(name)} withArrow>
                     <Box
                       role="button"
@@ -378,37 +376,36 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                       )}
                     </Box>
                   </Tooltip>
-                  );
+                );
-                })}
+              })}
-              </SimpleGrid>
+            </SimpleGrid>
-            </Box>
+          </Box>
 
-            <Button
+          <Button
-              variant="default"
+            variant="default"
-              fullWidth
+            fullWidth
-              data-color-grid="remove"
+            data-color-grid="remove"
-              className={classes.removeColor}
+            className={classes.removeColor}
-              onClick={() => {
+            onClick={() => {
-                if (isEditorReady(editor)) {
+              if (isEditorReady(editor)) {
-                  editor.commands.unsetColor();
+                editor.commands.unsetColor();
-                  editor.commands.unsetHighlight();
+                editor.commands.unsetHighlight();
-                }
+              }
-                setIsOpen(false);
+              setIsOpen(false);
-              }}
+            }}
-              onKeyDown={(e) => {
+            onKeyDown={(e) => {
-                if (e.key === "ArrowUp") {
+              if (e.key === "ArrowUp") {
-                  e.preventDefault();
+                e.preventDefault();
-                  const lastRowStart =
+                const lastRowStart =
-                    Math.floor(
+                  Math.floor((HIGHLIGHT_COLORS.length - 1) / COLOR_GRID_COLS) *
-                      (HIGHLIGHT_COLORS.length - 1) / COLOR_GRID_COLS,
+                  COLOR_GRID_COLS;
-                    ) * COLOR_GRID_COLS;
+                focusSwatch("highlight", lastRowStart);
-                  focusSwatch("highlight", lastRowStart);
+              }
-                }
+            }}
-              }}
+          >
-            >
+            {t("Remove color")}
-              {t("Remove color")}
+          </Button>
-            </Button>
+        </Stack>
-          </Stack>
       </Popover.Dropdown>
     </Popover>
   );

apps/client/src/features/editor/components/bubble-menu/link-selector.tsx

@@ -10,7 +10,7 @@ export const LinkSelector: FC = () => {
   const setShowLinkMenu = useSetAtom(showLinkMenuAtom);
 
   return (
-    <Tooltip label={t("Add link")} withArrow>
+    <Tooltip label={t("Add link")} withArrow withinPortal={false}>
       <ActionIcon
         variant="default"
         size="lg"

apps/client/src/features/editor/components/bubble-menu/text-alignment-selector.tsx

@@ -91,7 +91,12 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
       onChange={setIsOpen}
     >
       <Menu.Target>
-        <Tooltip label={t("Text align")} withArrow disabled={isOpen}>
+        <Tooltip
+          label={t("Text align")}
+          withArrow
+          disabled={isOpen}
+          withinPortal={false}
+        >
           <Button
             variant="default"
             style={{ border: "none", height: "34px" }}

apps/client/src/features/editor/components/common/lightbox-view.tsx

@@ -0,0 +1,176 @@
+import type { Editor } from "@tiptap/react";
+import type { Node as PMNode } from "@tiptap/pm/model";
+import Lightbox, { type Slide } from "yet-another-react-lightbox";
+import type { LightboxRequest } from "@/features/editor/atoms/editor-atoms";
+import { getFileUrl } from "@/lib/config.ts";
+import "yet-another-react-lightbox/styles.css";
+import "yet-another-react-lightbox/plugins/captions.css";
+import Captions from "yet-another-react-lightbox/plugins/captions";
+import Download from "yet-another-react-lightbox/plugins/download";
+import Fullscreen from "yet-another-react-lightbox/plugins/fullscreen";
+import Video from "yet-another-react-lightbox/plugins/video";
+import Zoom from "yet-another-react-lightbox/plugins/zoom";
+import { useEffect, useMemo, useState } from "react";
+import i18n from "@/i18n.ts";
+import { useTranslation } from "react-i18next";
+
+type LightboxViewProps = {
+  editor: Editor;
+  open: boolean;
+  src: string;
+  type: "image" | "video";
+  onClose: () => void;
+};
+
+function getVideoMimeType(src: string) {
+  const extension = src.split(/[?#]/, 1)[0].split(".").pop()?.toLowerCase();
+
+  switch (extension) {
+    case "webm":
+      return "video/webm";
+    case "ogv":
+      return "video/ogg";
+    case "mov":
+      return "video/quicktime";
+    case "m4v":
+      return "video/x-m4v";
+    default:
+      return "video/mp4";
+  }
+}
+
+function getFilename(src: string) {
+  const filename = src.split(/[?#]/, 1)[0].split("/").pop();
+  if (!filename) return i18n.t("Media");
+
+  try {
+    return decodeURIComponent(filename);
+  } catch {
+    return filename;
+  }
+}
+
+function getMedia(rawSrc: string, type?: string, alt?: string): Slide {
+  const src = getFileUrl(rawSrc);
+  const filename = getFilename(rawSrc);
+  const caption = alt || filename;
+
+  if (type === "video") {
+    return {
+      type: "video",
+      sources: [{ src, type: getVideoMimeType(rawSrc) }],
+      title: caption,
+      download: { url: src, filename },
+    };
+  } else {
+    return {
+      type: "image",
+      src,
+      alt: alt || undefined,
+      title: caption,
+      download: { url: src, filename },
+    };
+  }
+}
+
+const LIGHTBOX_NODE_TYPES: Record<string, "image" | "video"> = {
+  image: "image",
+  video: "video",
+  drawio: "image",
+  excalidraw: "image",
+};
+
+// video is excluded: clicks there operate the native controls
+const CLICK_TO_EXPAND_NODE_TYPES = new Set(["image", "drawio", "excalidraw"]);
+
+export function getLightboxClickRequest(node: PMNode): LightboxRequest {
+  if (!CLICK_TO_EXPAND_NODE_TYPES.has(node.type.name)) return null;
+
+  const src = typeof node.attrs.src === "string" ? node.attrs.src : "";
+  if (!src) return null;
+
+  return { src: getFileUrl(src), type: "image" };
+}
+
+function getPageMedia(editor: Editor): Slide[] {
+  const media: Slide[] = [];
+
+  editor.state.doc.descendants((node) => {
+    const type = LIGHTBOX_NODE_TYPES[node.type.name];
+    if (!type) return;
+
+    const rawSrc = typeof node.attrs.src === "string" ? node.attrs.src : "";
+    if (!rawSrc) return;
+
+    media.push(getMedia(rawSrc, type, node.attrs.alt));
+  });
+
+  return media;
+}
+
+export default function LightboxView({
+  editor,
+  open,
+  src,
+  type,
+  onClose,
+}: LightboxViewProps) {
+  const { i18n: i18nInstance } = useTranslation();
+
+  const selectedSlide = useMemo(
+    () => getMedia(src, type),
+    [src, type, i18nInstance.language]
+  );
+
+  const [pageSlides, setPageSlides] = useState<Slide[]>([]);
+  const [loadedMediaKey, setLoadedMediaKey] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+
+    setLoadedMediaKey(null);
+
+    const frame = requestAnimationFrame(() => {
+      const slides = getPageMedia(editor);
+
+      setPageSlides(slides);
+      setLoadedMediaKey(`${type}:${src}`);
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [editor, open, type, src]);
+
+  const slides = loadedMediaKey === `${type}:${src}` ? pageSlides : [selectedSlide];
+
+  const index = useMemo(() => {
+    if (!(pageSlides.length > 0)) {
+      return 0;
+    }
+
+    const idx = slides.findIndex((slide) =>
+      type === "video"
+        ? "sources" in slide && slide.sources.some((s) => s.src === src)
+        : "src" in slide && slide.src === src
+    );
+    return idx >= 0 ? idx : 0;
+  }, [slides, src, type]);
+
+  return (
+    <Lightbox
+      open={open}
+      close={onClose}
+      index={index}
+      slides={slides}
+      plugins={[Captions, Download, Fullscreen, Video, Zoom]}
+      styles={{ container: { backgroundColor: "rgba(0, 0, 0, 0.8)" } }}
+      captions={{ descriptionTextAlign: "center" }}
+      video={{ controls: true, playsInline: true }}
+      zoom={{
+        scrollToZoom: true,
+        maxZoomPixelRatio: 4,
+        maxZoom: 4,
+        supports: ["video"],
+      }}
+    />
+  );
+}

apps/client/src/features/editor/components/drawio/drawio-menu.tsx

@@ -1,6 +1,7 @@
 import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useSetAtom } from "jotai";
 import { Node as PMNode } from "@tiptap/pm/model";
 import { isEditorReady } from "@docmost/editor-ext";
 import {
@@ -24,6 +25,7 @@ import {
   IconDownload,
   IconEdit,
   IconTrash,
+  IconZoomIn,
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { getDrawioUrl, getFileUrl } from "@/lib/config.ts";
@@ -39,10 +41,12 @@ import { decodeBase64ToSvgString, svgStringToFile } from "@/lib/utils";
 import { IAttachment } from "@/features/attachments/types/attachment.types";
 import { modals } from "@mantine/modals";
 import { useAltTextControl } from "@/features/editor/components/common/use-alt-text-control.tsx";
+import { lightboxRequestAtom } from "@/features/editor/atoms/editor-atoms";
 import classes from "../common/toolbar-menu.module.css";
 
 export function DrawioMenu({ editor }: EditorMenuProps) {
   const { t } = useTranslation();
+  const setLightboxRequest = useSetAtom(lightboxRequestAtom);
   const [opened, { open, close }] = useDisclosure(false);
   const [initialXML, setInitialXML] = useState<string>("");
   const drawioRef = useRef<DrawIoEmbedRef>(null);
@@ -328,6 +332,23 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
 
           <div className={classes.divider} />
 
+          <Tooltip position="top" label={t("Expand")} withinPortal={false}>
+            <ActionIcon
+              onClick={() =>
+                editorState?.src &&
+                setLightboxRequest({
+                  src: getFileUrl(editorState.src),
+                  type: "image",
+                })
+              }
+              size="lg"
+              aria-label={t("Expand")}
+              variant="subtle"
+            >
+              <IconZoomIn size={18} />
+            </ActionIcon>
+          </Tooltip>
+
           <Tooltip position="top" label={t("Edit")} withinPortal={false}>
             <ActionIcon
               onClick={handleOpen}

apps/client/src/features/editor/components/excalidraw/excalidraw-menu.tsx

@@ -1,6 +1,7 @@
 import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
 import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
+import { useSetAtom } from "jotai";
 import { Node as PMNode } from "@tiptap/pm/model";
 import { isEditorReady } from "@docmost/editor-ext";
 import {
@@ -25,6 +26,7 @@ import {
   IconDownload,
   IconEdit,
   IconTrash,
+  IconZoomIn,
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { getFileUrl } from "@/lib/config.ts";
@@ -37,6 +39,7 @@ import ReactClearModal from "react-clear-modal";
 import { useHandleLibrary } from "@excalidraw/excalidraw";
 import { localStorageLibraryAdapter } from "@/features/editor/components/excalidraw/excalidraw-utils.ts";
 import { useAltTextControl } from "@/features/editor/components/common/use-alt-text-control.tsx";
+import { lightboxRequestAtom } from "@/features/editor/atoms/editor-atoms";
 import classes from "../common/toolbar-menu.module.css";
 
 const ExcalidrawComponent = lazy(() =>
@@ -47,6 +50,7 @@ const ExcalidrawComponent = lazy(() =>
 
 export function ExcalidrawMenu({ editor }: EditorMenuProps) {
   const { t } = useTranslation();
+  const setLightboxRequest = useSetAtom(lightboxRequestAtom);
   const [opened, { open, close }] = useDisclosure(false);
   const [excalidrawAPI, setExcalidrawAPI] =
     useState<ExcalidrawImperativeAPI>(null);
@@ -359,6 +363,23 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
 
           <div className={classes.divider} />
 
+          <Tooltip position="top" label={t("Expand")} withinPortal={false}>
+            <ActionIcon
+              onClick={() =>
+                editorState?.src &&
+                setLightboxRequest({
+                  src: getFileUrl(editorState.src),
+                  type: "image",
+                })
+              }
+              size="lg"
+              aria-label={t("Expand")}
+              variant="subtle"
+            >
+              <IconZoomIn size={18} />
+            </ActionIcon>
+          </Tooltip>
+
           <Tooltip position="top" label={t("Edit")} withinPortal={false}>
             <ActionIcon
               onClick={handleOpen}

apps/client/src/features/editor/components/image/image-menu.tsx

@@ -1,6 +1,7 @@
 import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
 import React, { useCallback, useRef } from "react";
+import { useSetAtom } from "jotai";
 import { Node as PMNode } from "@tiptap/pm/model";
 import { isEditorReady } from "@docmost/editor-ext";
 import {
@@ -16,16 +17,19 @@ import {
   IconDownload,
   IconRefresh,
   IconTrash,
+  IconZoomIn,
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { getFileUrl } from "@/lib/config.ts";
 import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
 import { useAltTextControl } from "@/features/editor/components/common/use-alt-text-control.tsx";
+import { lightboxRequestAtom } from "@/features/editor/atoms/editor-atoms";
 import classes from "../common/toolbar-menu.module.css";
 
 export function ImageMenu({ editor }: EditorMenuProps) {
   const { t } = useTranslation();
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const setLightboxRequest = useSetAtom(lightboxRequestAtom);
 
   const editorState = useEditorState({
     editor,
@@ -207,6 +211,23 @@ export function ImageMenu({ editor }: EditorMenuProps) {
 
         <div className={classes.divider} />
 
+        <Tooltip position="top" label={t("Expand")} withinPortal={false}>
+          <ActionIcon
+            onClick={() =>
+              editorState?.src &&
+              setLightboxRequest({
+                src: getFileUrl(editorState.src),
+                type: "image",
+              })
+            }
+            size="lg"
+            aria-label={t("Expand")}
+            variant="subtle"
+          >
+            <IconZoomIn size={18} />
+          </ActionIcon>
+        </Tooltip>
+
         <Tooltip position="top" label={t("Download")} withinPortal={false}>
           <ActionIcon
             onClick={handleDownload}

apps/client/src/features/editor/components/subpages/subpages-view.tsx

@@ -23,7 +23,11 @@ export default function SubpagesView(props: NodeViewProps) {
   // @ts-ignore
   const storagePageId = editor.storage.pageId;
   const routePageId = extractPageSlugId(pageSlug);
-  const currentPageId = storagePageId ?? routePageId;
+  let currentPageId = storagePageId;
+
+  if (shareId){
+    currentPageId = routePageId;
+  }
 
   // Get subpages from shared tree if we're in a shared context
   const sharedSubpages = useSharedPageSubpages(currentPageId);

apps/client/src/features/editor/components/video/video-menu.tsx

@@ -1,6 +1,7 @@
 import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
 import { useCallback } from "react";
+import { useSetAtom } from "jotai";
 import { Node as PMNode } from "@tiptap/pm/model";
 import { isEditorReady } from "@docmost/editor-ext";
 import {
@@ -15,14 +16,17 @@ import {
   IconLayoutAlignRight,
   IconDownload,
   IconTrash,
+  IconZoomIn,
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { getFileUrl } from "@/lib/config.ts";
 import { useAltTextControl } from "@/features/editor/components/common/use-alt-text-control.tsx";
+import { lightboxRequestAtom } from "@/features/editor/atoms/editor-atoms";
 import classes from "../common/toolbar-menu.module.css";
 
 export function VideoMenu({ editor }: EditorMenuProps) {
   const { t } = useTranslation();
+  const setLightboxRequest = useSetAtom(lightboxRequestAtom);
 
   const editorState = useEditorState({
     editor,
@@ -183,6 +187,23 @@ export function VideoMenu({ editor }: EditorMenuProps) {
 
         <div className={classes.divider} />
 
+        <Tooltip position="top" label={t("Expand")} withinPortal={false}>
+          <ActionIcon
+            onClick={() =>
+              editorState?.src &&
+              setLightboxRequest({
+                src: getFileUrl(editorState.src),
+                type: "video",
+              })
+            }
+            size="lg"
+            aria-label={t("Expand")}
+            variant="subtle"
+          >
+            <IconZoomIn size={18} />
+          </ActionIcon>
+        </Tooltip>
+
         <Tooltip position="top" label={t("Download")} withinPortal={false}>
           <ActionIcon
             onClick={handleDownload}

apps/client/src/features/editor/page-editor.tsx

@@ -33,6 +33,7 @@ import { useAtom, useAtomValue } from "jotai";
 import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
 import {
   currentPageEditModeAtom,
+  lightboxRequestAtom,
   pageEditorAtom,
   yjsConnectionStatusAtom,
   yjsSyncedAtom,
@@ -53,6 +54,9 @@ import CalloutMenu from "@/features/editor/components/callout/callout-menu.tsx";
 import VideoMenu from "@/features/editor/components/video/video-menu.tsx";
 import PdfMenu from "@/features/editor/components/pdf/pdf-menu.tsx";
 import SubpagesMenu from "@/features/editor/components/subpages/subpages-menu.tsx";
+import LightboxView, {
+  getLightboxClickRequest,
+} from "@/features/editor/components/common/lightbox-view";
 import {
   handleFileDrop,
   handlePaste,
@@ -184,6 +188,7 @@ function CollabPageEditor({
   const [, setActiveCommentId] = useAtom(activeCommentIdAtom);
   const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
   const [showReadOnlyCommentPopup] = useAtom(showReadOnlyCommentPopupAtom);
+  const [lightboxRequest, setLightboxRequest] = useAtom(lightboxRequestAtom);
   const [isLocalSynced, setIsLocalSynced] = useState(false);
   const [isRemoteSynced, setIsRemoteSynced] = useState(false);
   const [yjsConnectionStatus, setYjsConnectionStatus] = useAtom(
@@ -305,6 +310,22 @@ function CollabPageEditor({
 
           return handleFileDrop(editorRef.current, event, moved, pageId);
         },
+        handleClickOn: (view, _pos, node) => {
+          if (view.editable) return false;
+
+          const request = getLightboxClickRequest(node);
+          if (!request) return false;
+
+          setLightboxRequest(request);
+          return true;
+        },
+        handleDoubleClickOn: (_view, _pos, node) => {
+          const request = getLightboxClickRequest(node);
+          if (!request) return false;
+
+          setLightboxRequest(request);
+          return true;
+        },
       },
       onCreate({ editor }) {
         if (editor) {
@@ -386,6 +407,7 @@ function CollabPageEditor({
     setActiveCommentId(null);
     setShowCommentPopup(false);
     setAsideState({ tab: "", isAsideOpen: false });
+    setLightboxRequest(null);
   }, [pageId]);
 
   const isSynced = isLocalSynced && isRemoteSynced;
@@ -459,6 +481,15 @@ function CollabPageEditor({
         {editor && !editorIsEditable && (editable || canComment) && (
           <ReadonlyBubbleMenu editor={editor} />
         )}
+        {editor && (
+          <LightboxView
+            editor={editor}
+            open={!!lightboxRequest}
+            src={lightboxRequest?.src ?? ""}
+            type={lightboxRequest?.type ?? "image"}
+            onClose={() => setLightboxRequest(null)}
+          />
+        )}
         {showCommentPopup && <CommentDialog editor={editor} pageId={pageId} />}
         {showReadOnlyCommentPopup && (
           <CommentDialog editor={editor} pageId={pageId} readOnly />

apps/client/src/features/editor/readonly-page-editor.tsx

@@ -1,15 +1,27 @@
 import "@/features/editor/styles/index.css";
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, {
-import { EditorProvider } from "@tiptap/react";
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Editor, EditorProvider } from "@tiptap/react";
 import { mainExtensions } from "@/features/editor/extensions/extensions";
 import { Document } from "@tiptap/extension-document";
 import { Heading, UniqueID } from "@docmost/editor-ext";
 import { Text } from "@tiptap/extension-text";
 import { Placeholder } from "@tiptap/extension-placeholder";
 import { useAtom } from "jotai";
-import { readOnlyEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
+import {
+  lightboxRequestAtom,
+  readOnlyEditorAtom,
+} from "@/features/editor/atoms/editor-atoms.ts";
 import { useEditorScroll } from "./hooks/use-editor-scroll";
 import { TransclusionLookupProvider } from "@/features/editor/components/transclusion/transclusion-lookup-context";
+import LightboxView, {
+  getLightboxClickRequest,
+} from "@/features/editor/components/common/lightbox-view";
 
 interface PageEditorProps {
   title: string;
@@ -33,6 +45,8 @@ export default function ReadonlyPageEditor({
   shareId,
 }: PageEditorProps) {
   const [, setReadOnlyEditor] = useAtom(readOnlyEditorAtom);
+  const [lightboxRequest, setLightboxRequest] = useAtom(lightboxRequestAtom);
+  const [contentEditor, setContentEditor] = useState<Editor | null>(null);
   const isComponentMounted = useRef(false);
   const editorCreated = useRef(false);
 
@@ -49,6 +63,11 @@ export default function ReadonlyPageEditor({
     isComponentMounted.current = true;
   }, []);
 
+  useEffect(() => {
+    if (!shareId) return;
+    setLightboxRequest(null);
+  }, [pageId, shareId]);
+
   const extensions = useMemo(() => {
     const excludedExtensions = new Set([
       "uniqueID",
@@ -97,6 +116,19 @@ export default function ReadonlyPageEditor({
         textDirection="auto"
         extensions={extensions}
         content={content}
+        editorProps={
+          shareId
+            ? {
+                handleClickOn: (_view, _pos, node) => {
+                  const request = getLightboxClickRequest(node);
+                  if (!request) return false;
+
+                  setLightboxRequest(request);
+                  return true;
+                },
+              }
+            : undefined
+        }
         onCreate={({ editor }) => {
           if (editor) {
             if (pageId) {
@@ -105,12 +137,22 @@ export default function ReadonlyPageEditor({
             }
             // @ts-ignore
             setReadOnlyEditor(editor);
+            setContentEditor(editor);
 
             handleScrollTo(editor);
             editorCreated.current = true;
           }
         }}
       ></EditorProvider>
+      {shareId && contentEditor && (
+        <LightboxView
+          editor={contentEditor}
+          open={!!lightboxRequest}
+          src={lightboxRequest?.src ?? ""}
+          type={lightboxRequest?.type ?? "image"}
+          onClose={() => setLightboxRequest(null)}
+        />
+      )}
       <div style={{ paddingBottom: "20vh" }}></div>
     </TransclusionLookupProvider>
   );

pnpm-lock.yaml

@@ -397,6 +397,9 @@ importers:
       socket.io-client:
         specifier: 4.8.3
         version: 4.8.3(supports-color@10.2.2)
+      yet-another-react-lightbox:
+        specifier: ^3.32.2
+        version: 3.32.2(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       zod:
         specifier: 4.3.6
         version: 4.3.6
@@ -10033,6 +10036,20 @@ packages:
     resolution: {integrity: sha512-jIH9yLR9wqr0wOS0TpBvo/g/2UgZH5qePVbjgRliiF0BYvOZyaBknKsF+x9Iht0O6sqgnB93rCICdOZFecJuDw==}
     engines: {node: '>=12'}
 
+  yet-another-react-lightbox@3.32.2:
+    resolution: {integrity: sha512-F4HtHQfUNpvkj+AmECgWM4XRdCqMY5gXpKgOUx39+T+FyxLe8II4SK/pwMyYj2X54KH9lFSQeHYY1/GfYf3SdA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@types/react': ^16 || ^17 || ^18 || ^19
+      '@types/react-dom': ^16 || ^17 || ^18 || ^19
+      react: ^16.8.0 || ^17 || ^18 || ^19
+      react-dom: ^16.8.0 || ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   yjs@13.6.30:
     resolution: {integrity: sha512-vv/9h42eCMC81ZHDFswuu/MKzkl/vyq1BhaNGfHyOonwlG4CJbQF4oiBBJPvfdeCt/PlVDWh7Nov9D34YY09uQ==}
     engines: {node: '>=16.0.0', npm: '>=8.0.0'}
@@ -20744,6 +20761,14 @@ snapshots:
     dependencies:
       pend: 1.2.0
 
+  yet-another-react-lightbox@3.32.2(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
+    dependencies:
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
   yjs@13.6.30:
     dependencies:
       lib0: 0.2.117