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>
2026-08-25 15:57:11 +08:00 · 2026-08-25 02:43:19 +01:00
parent 3a25336d3d
commit 7bd73f77a4
17 changed files with 489 additions and 96 deletions
@@ -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": {
@@ -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",
@@ -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);
@@ -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 { userAtom, workspaceAtom } from "@/features/user/atoms/current-user-atom";
+import {
+  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>
@@ -129,8 +129,7 @@ function handleColorKeyNav(
  grid: "text" | "highlight",
 ) {
  const cols = COLOR_GRID_COLS;
-  const total =
-    grid === "text" ? TEXT_COLORS.length : HIGHLIGHT_COLORS.length;
+  const total = 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 =
-        Math.floor((TEXT_COLORS.length - 1) / cols) * cols;
+      const lastRowStart = 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>
-              <Text size="sm" fw={600} mb="xs">
-                {t("Text color")}
-              </Text>
-              <SimpleGrid cols={5} spacing="xs">
-                {TEXT_COLORS.map(({ name, color }, index) => {
-                  const applyTextColor = () => {
-                    if (!isEditorReady(editor)) return;
-                    if (name === "Default") {
-                      editor.commands.unsetColor();
-                    } else {
-                      editor
-                        .chain()
-                        .focus()
-                        .setColor(color || "")
-                        .run();
-                    }
-                    setIsOpen(false);
-                  };
-                  return (
+          <Box>
+            <Text size="sm" fw={600} mb="xs">
+              {t("Text color")}
+            </Text>
+            <SimpleGrid cols={5} spacing="xs">
+              {TEXT_COLORS.map(({ name, color }, index) => {
+                const applyTextColor = () => {
+                  if (!isEditorReady(editor)) return;
+                  if (name === "Default") {
+                    editor.commands.unsetColor();
+                  } else {
+                    editor
+                      .chain()
+                      .focus()
+                      .setColor(color || "")
+                      .run();
+                  }
+                  setIsOpen(false);
+                };
+                return (
                  <Tooltip key={index} label={t(name)} withArrow>
                    <Box
                      role="button"
@@ -306,34 +304,34 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                      A
                    </Box>
                  </Tooltip>
-                  );
-                })}
-              </SimpleGrid>
-            </Box>
+                );
+              })}
+            </SimpleGrid>
+          </Box>

-            <Box>
-              <Text size="sm" fw={600} mb="xs">
-                {t("Highlight color")}
-              </Text>
-              <SimpleGrid cols={5} spacing="xs">
-                {HIGHLIGHT_COLORS.map(({ name, color }, index) => {
-                  const applyHighlight = () => {
-                    if (!isEditorReady(editor)) return;
-                    if (name === "Default") {
-                      editor.commands.unsetHighlight();
-                    } else {
-                      editor
-                        .chain()
-                        .focus()
-                        .toggleMark("highlight", {
-                          color: color || "",
-                          colorName: name.toLowerCase() || "",
-                        })
-                        .run();
-                    }
-                    setIsOpen(false);
-                  };
-                  return (
+          <Box>
+            <Text size="sm" fw={600} mb="xs">
+              {t("Highlight color")}
+            </Text>
+            <SimpleGrid cols={5} spacing="xs">
+              {HIGHLIGHT_COLORS.map(({ name, color }, index) => {
+                const applyHighlight = () => {
+                  if (!isEditorReady(editor)) return;
+                  if (name === "Default") {
+                    editor.commands.unsetHighlight();
+                  } else {
+                    editor
+                      .chain()
+                      .focus()
+                      .toggleMark("highlight", {
+                        color: color || "",
+                        colorName: name.toLowerCase() || "",
+                      })
+                      .run();
+                  }
+                  setIsOpen(false);
+                };
+                return (
                  <Tooltip key={index} label={t(name)} withArrow>
                    <Box
                      role="button"
@@ -378,37 +376,36 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                      )}
                    </Box>
                  </Tooltip>
-                  );
-                })}
-              </SimpleGrid>
-            </Box>
+                );
+              })}
+            </SimpleGrid>
+          </Box>

-            <Button
-              variant="default"
-              fullWidth
-              data-color-grid="remove"
-              className={classes.removeColor}
-              onClick={() => {
-                if (isEditorReady(editor)) {
-                  editor.commands.unsetColor();
-                  editor.commands.unsetHighlight();
-                }
-                setIsOpen(false);
-              }}
-              onKeyDown={(e) => {
-                if (e.key === "ArrowUp") {
-                  e.preventDefault();
-                  const lastRowStart =
-                    Math.floor(
-                      (HIGHLIGHT_COLORS.length - 1) / COLOR_GRID_COLS,
-                    ) * COLOR_GRID_COLS;
-                  focusSwatch("highlight", lastRowStart);
-                }
-              }}
-            >
-              {t("Remove color")}
-            </Button>
-          </Stack>
+          <Button
+            variant="default"
+            fullWidth
+            data-color-grid="remove"
+            className={classes.removeColor}
+            onClick={() => {
+              if (isEditorReady(editor)) {
+                editor.commands.unsetColor();
+                editor.commands.unsetHighlight();
+              }
+              setIsOpen(false);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "ArrowUp") {
+                e.preventDefault();
+                const lastRowStart =
+                  Math.floor((HIGHLIGHT_COLORS.length - 1) / COLOR_GRID_COLS) *
+                  COLOR_GRID_COLS;
+                focusSwatch("highlight", lastRowStart);
+              }
+            }}
+          >
+            {t("Remove color")}
+          </Button>
+        </Stack>
      </Popover.Dropdown>
    </Popover>
  );
@@ -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"
@@ -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" }}
@@ -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"],
+      }}
+    />
+  );
+}
@@ -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}
@@ -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}
@@ -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}
@@ -19,11 +19,15 @@ export default function SubpagesView(props: NodeViewProps) {
  const { editor } = props;
  const { spaceSlug, shareId, pageSlug } = useParams();
  const { t } = useTranslation();
-  
+
  // @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);
@@ -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}
@@ -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 />
@@ -1,15 +1,27 @@
 import "@/features/editor/styles/index.css";
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { EditorProvider } from "@tiptap/react";
+import 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>
  );
@@ -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