feat: add HTTP range request support for file serving

fix safari upload bug
fix hasFocus bug
2026-05-07 22:53:08 +08:00 · 2026-02-04 10:29:38 -08:00 · 2026-02-04 09:40:40 -08:00 · 2026-02-04 09:20:48 -08:00 · 2026-02-04 09:08:23 -08:00
18 changed files with 143 additions and 678 deletions
@@ -8,5 +8,3 @@ export const titleEditorAtom = atom<Editor | null>(null);
 export const readOnlyEditorAtom = atom<Editor | null>(null);
 export const yjsConnectionStatusAtom = atom<string>("");
 export const showAiMenuAtom = atom(false);
@@ -1,22 +0,0 @@
 .aiMenu {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 2.25rem;
 }
 .menuItemSelected {
  background-color: var(--mantine-color-gray-1);
  @mixin dark {
    background-color: var(--mantine-color-dark-5);
  }
 }
 .resultPreviewWrapper {
  *:first-child {
    margin-top: 0;
  }
  *:last-child {
    margin-bottom: 0;
  }
 }
@@ -1,303 +0,0 @@
 import { Editor } from "@tiptap/react";
 import { ActionIcon, TextInput, Tooltip } from "@mantine/core";
 import { useDebouncedCallback, useMediaQuery } from "@mantine/hooks";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useAtom } from "jotai";
 import { IconSend } from "@tabler/icons-react";
 import { showAiMenuAtom } from "@/features/editor/atoms/editor-atoms";
 import { useAiGenerateStreamMutation } from "@/ee/ai/queries/ai-query";
 import { AiAction } from "@/ee/ai/types/ai.types";
 import { CommandItem, commandItems, CommandSet } from "./command-items";
 import { CommandSelector } from "./command-selector";
 import { ResultPreview } from "./result-preview";
 import classes from "./ai-menu.module.css";
 import { marked } from "marked";
 interface EditorAiMenuProps {
  editor: Editor | null;
 }
 const EditorAiMenu = ({ editor }: EditorAiMenuProps): JSX.Element | null => {
  const aiGenerateStreamMutation = useAiGenerateStreamMutation();
  const isSmBreakpoint = useMediaQuery("(max-width: 48em)");
  const [showAiMenu, setShowAiMenu] = useAtom(showAiMenuAtom);
  const containerRef = useRef<HTMLDivElement | null>(null);
  const inputRef = useRef<HTMLInputElement | null>(null);
  const [prompt, setPrompt] = useState("");
  const [output, setOutput] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [selectedIndex, setSelectedIndex] = useState(-1);
  const [activeCommandSet, setActiveCommandSet] = useState<CommandSet>("main");
  const [lastAction, setLastAction] = useState<CommandItem | null>(null);
  const [menuPlacement, setMenuPlacement] = useState<{
    top: number;
    left: number;
    width: number;
  }>({
    top: 0,
    left: 0,
    width: 0,
  });
  const currentItems = useMemo(() => {
    return commandItems[activeCommandSet].filter((item) => {
      return item.name.toLowerCase().includes(prompt.toLowerCase());
    });
  }, [prompt, output, activeCommandSet]);
  const updateMenuPlacement = useCallback(() => {
    if (!editor || !showAiMenu) return;
    const { view } = editor;
    const { to } = editor.state.selection;
    const editorRect = view.dom.getBoundingClientRect();
    const cursorCoords = view.coordsAtPos(to);
    const topOffset = 8;
    const editorPadding = isSmBreakpoint ? 16 : 48;
    setMenuPlacement({
      top: cursorCoords.bottom + topOffset,
      left: editorRect.left + editorPadding,
      width: editorRect.width - editorPadding * 2,
    });
  }, [editor, showAiMenu, isSmBreakpoint]);
  const resetMenu = useCallback(() => {
    setPrompt("");
    setOutput("");
    setActiveCommandSet("main");
    setLastAction(null);
    aiGenerateStreamMutation.reset();
  }, [aiGenerateStreamMutation.reset]);
  const debouncedUpdateMenuPlacement = useDebouncedCallback(
    updateMenuPlacement,
    60,
  );
  const handleGenerate = useCallback(
    (item?: CommandItem) => {
      if (!editor || isLoading) return;
      let command: CommandItem | null = item || null;
      if (!command) {
        if (!prompt) return;
        command = {
          id: "custom",
          name: "Custom",
          action: AiAction.CUSTOM,
          prompt,
        };
      }
      const { from, to } = editor.state.selection;
      const content = editor.state.doc.textBetween(from, to);
      setOutput("");
      setIsLoading(true);
      aiGenerateStreamMutation.mutate({
        action: command.action,
        prompt: command.prompt,
        content,
        onChunk: (chunk) => {
          setOutput((output) => output + chunk.content);
        },
        onComplete: () => {
          setIsLoading(false);
          setActiveCommandSet("result");
        },
        onError: () => {
          setIsLoading(false);
          resetMenu();
        },
      });
      setLastAction(command);
    },
    [
      editor,
      prompt,
      isLoading,
      aiGenerateStreamMutation.mutateAsync,
      resetMenu,
    ],
  );
  const handleCommand = useCallback(
    (item?: CommandItem) => {
      setPrompt("");
      if (!item) {
        return handleGenerate();
      }
      if (item.id === "back") {
        return setActiveCommandSet("main");
      }
      if (item.id === "result-replace") {
        const chain = editor.chain().focus();
        if (lastAction.action === AiAction.CONTINUE_WRITING) {
          chain.setTextSelection(editor.state.selection.to);
        }
        chain.insertContent(marked.parse(output)).run();
        return setShowAiMenu(false);
      }
      if (item.id === "result-insert-below") {
        editor
          .chain()
          .focus()
          .setTextSelection(editor.state.selection.to)
          .insertContent(marked.parse(output))
          .run();
        return setShowAiMenu(false);
      }
      if (item.id === "result-copy") {
        navigator.clipboard.writeText(output);
        return setShowAiMenu(false);
      }
      if (item.id === "result-discard") {
        setOutput("");
        return resetMenu();
      }
      if (item.id === "result-try-again" && lastAction) {
        return handleGenerate(lastAction);
      }
      if (item.subCommandSet) {
        return setActiveCommandSet(item.subCommandSet);
      }
      return handleGenerate(item);
    },
    [editor, output, lastAction, handleGenerate, resetMenu],
  );
  const handleKeyDown = useCallback(
    (event: React.KeyboardEvent<HTMLInputElement>) => {
      const totalItems = currentItems.length;
      const cycleSize = totalItems + 1;
      if (event.key === "Escape") {
        return setShowAiMenu(false);
      }
      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
        event.preventDefault();
        return setSelectedIndex((selectedIndex) => {
          const direction = event.key === "ArrowDown" ? 1 : -1;
          const newIndex = selectedIndex + direction;
          if (newIndex < -1) return cycleSize - 1;
          if (newIndex >= cycleSize) return 0;
          return newIndex;
        });
      }
      if (event.key === "Enter") {
        event.preventDefault();
        return handleCommand(currentItems[selectedIndex]);
      }
    },
    [currentItems, selectedIndex],
  );
  useEffect(() => {
    if (!editor) return;
    const handleClose = () => setShowAiMenu(false);
    const observer = new ResizeObserver(() => {
      debouncedUpdateMenuPlacement();
    });
    updateMenuPlacement();
    editor.on("focus", handleClose);
    editor.on("blur", handleClose);
    window.addEventListener("resize", debouncedUpdateMenuPlacement);
    window.addEventListener("scroll", debouncedUpdateMenuPlacement, true);
    observer.observe(editor.view.dom);
    return () => {
      editor.off("focus", handleClose);
      editor.off("blur", handleClose);
      window.removeEventListener("resize", debouncedUpdateMenuPlacement);
      window.removeEventListener("scroll", debouncedUpdateMenuPlacement, true);
      observer.disconnect();
    };
  }, [editor, updateMenuPlacement, debouncedUpdateMenuPlacement]);
  useEffect(() => {
    if (showAiMenu) {
      resetMenu();
    }
  }, [showAiMenu, resetMenu]);
  useEffect(() => {
    // Focus input when menu opens or command set changes
    requestAnimationFrame(() => {
      inputRef.current?.focus();
    });
  }, [showAiMenu, isLoading, currentItems]);
  useEffect(() => {
    if (!currentItems.length) {
      setSelectedIndex(-1);
    }
    setSelectedIndex(prompt || activeCommandSet !== "main" ? 0 : -1);
  }, [prompt, activeCommandSet, currentItems]);
  if (!showAiMenu) return null;
  return createPortal(
    <div
      style={{
        zIndex: 200,
        position: "fixed",
        top: menuPlacement.top,
        left: menuPlacement.left,
        width: menuPlacement.width,
        pointerEvents: "none",
      }}
    >
      <div
        className={classes.aiMenu}
        style={{ pointerEvents: "auto" }}
        tabIndex={0}
        ref={containerRef}
      >
        <ResultPreview output={output} isLoading={isLoading} />
        <CommandSelector
          selectedIndex={selectedIndex}
          isLoading={isLoading}
          output={output}
          currentItems={currentItems}
          handleCommand={handleCommand}
        >
          <TextInput
            ref={inputRef}
            style={{ width: "100%" }}
            placeholder="Ask AI..."
            data-autofocus
            value={prompt}
            disabled={isLoading}
            onChange={(e) => setPrompt(e.currentTarget.value)}
            rightSection={
              <Tooltip label="Ask AI">
                <ActionIcon
                  disabled={!prompt || isLoading}
                  variant="transparent"
                  onClick={() => handleGenerate()}
                >
                  <IconSend size={16} />
                </ActionIcon>
              </Tooltip>
            }
            onKeyDown={handleKeyDown}
          />
        </CommandSelector>
      </div>
    </div>,
    document.body,
  );
 };
 export { EditorAiMenu };
@@ -1,164 +0,0 @@
 import { AiAction } from "@/ee/ai/types/ai.types";
 import {
  IconSparkles,
  IconArrowsMaximize,
  IconArrowsMinimize,
  IconWriting,
  IconHelp,
  IconList,
  IconMoodSmile,
  IconLanguage,
  IconTrash,
  IconRefresh,
  IconChevronLeft,
  IconCheck,
  IconArrowDownLeft,
  IconCopy,
  IconTextPlus,
  IconAlignJustified,
 } from "@tabler/icons-react";
 interface CommandItem {
  name: string;
  id: string;
  icon?: typeof IconSparkles;
  action?: AiAction;
  prompt?: string;
  subCommandSet?: CommandSet;
 }
 type CommandSet = "main" | "tone" | "translate" | "result";
 const mainItems: CommandItem[] = [
  {
    id: "improve-writing",
    name: "Improve writing",
    icon: IconSparkles,
    action: AiAction.IMPROVE_WRITING,
  },
  {
    id: "fix-spelling-grammar",
    name: "Fix spelling & grammar",
    icon: IconCheck,
    action: AiAction.FIX_SPELLING_GRAMMAR,
  },
  {
    id: "make-longer",
    name: "Make longer",
    icon: IconTextPlus,
    action: AiAction.MAKE_LONGER,
  },
  {
    id: "make-shorter",
    name: "Make shorter",
    icon: IconAlignJustified,
    action: AiAction.MAKE_SHORTER,
  },
  {
    id: "continue-writing",
    name: "Continue writing",
    icon: IconWriting,
    action: AiAction.CONTINUE_WRITING,
  },
  {
    id: "explain",
    name: "Explain",
    icon: IconHelp,
    action: AiAction.CUSTOM,
    prompt: "Explain this text",
  },
  {
    id: "summarize",
    name: "Summarize",
    icon: IconList,
    action: AiAction.SUMMARIZE,
  },
  {
    id: "change-tone",
    name: "Change tone",
    icon: IconMoodSmile,
    subCommandSet: "tone",
  },
  {
    id: "translate",
    name: "Translate",
    icon: IconLanguage,
    subCommandSet: "translate",
  },
 ];
 const toneItems: CommandItem[] = [
  {
    id: "back",
    name: "Back",
    icon: IconChevronLeft,
  },
  {
    id: "tone-professional",
    name: "Professional",
    icon: IconMoodSmile,
    action: AiAction.CHANGE_TONE,
    prompt: "Professional",
  },
  {
    id: "tone-casual",
    name: "Casual",
    icon: IconMoodSmile,
    action: AiAction.CHANGE_TONE,
    prompt: "Casual",
  },
  {
    id: "tone-friendly",
    name: "Friendly",
    icon: IconMoodSmile,
    action: AiAction.CHANGE_TONE,
    prompt: "Friendly",
  },
 ];
 const translateItems: CommandItem[] = [
  {
    id: "back",
    name: "Back",
    icon: IconChevronLeft,
  },
  {
    id: "translate-english",
    name: "English",
    icon: IconLanguage,
    action: AiAction.TRANSLATE,
    prompt: "English",
  },
  {
    id: "translate-french",
    name: "French",
    icon: IconLanguage,
    action: AiAction.TRANSLATE,
    prompt: "French",
  },
  {
    id: "translate-german",
    name: "German",
    icon: IconLanguage,
    action: AiAction.TRANSLATE,
    prompt: "German",
  },
 ];
 const resultItems: CommandItem[] = [
  { id: "result-replace", name: "Replace", icon: IconCheck },
  { id: "result-insert-below", name: "Insert below", icon: IconArrowDownLeft },
  { id: "result-copy", name: "Copy", icon: IconCopy },
  { id: "result-discard", name: "Discard", icon: IconTrash },
  {
    id: "result-try-again",
    name: "Try again",
    icon: IconRefresh,
  },
 ];
 const commandItems: Record<CommandSet, CommandItem[]> = {
  main: mainItems,
  tone: toneItems,
  translate: translateItems,
  result: resultItems,
 };
 export type { CommandItem, CommandSet };
 export { commandItems };
@@ -1,71 +0,0 @@
 import { Loader, Menu, ScrollArea } from "@mantine/core";
 import { IconChevronRight } from "@tabler/icons-react";
 import { ReactNode } from "react";
 import { CommandItem } from "./command-items";
 import classes from "./ai-menu.module.css";
 interface CommandSelectorProps {
  selectedIndex: number;
  isLoading: boolean;
  output: string;
  currentItems: CommandItem[];
  children: ReactNode;
  handleCommand(item: CommandItem): void;
 }
 const CommandSelector = ({
  selectedIndex,
  children,
  isLoading,
  output,
  currentItems,
  handleCommand,
 }: CommandSelectorProps) => {
  return (
    <Menu
      opened={!isLoading && currentItems.length > 0}
      position="bottom-start"
      offset={4}
      width={250}
      trapFocus={false}
      shadow="lg"
    >
      <Menu.Target>{children}</Menu.Target>
      <Menu.Dropdown>
        <ScrollArea.Autosize type="scroll" scrollbarSize={5} mah={300}>
          {currentItems.map((item, index) => {
            const isSelected = selectedIndex === index;
            const showLoader =
              isLoading && output === "" && !item.subCommandSet;
            return (
              <Menu.Item
                key={item.id}
                className={isSelected ? classes.menuItemSelected : undefined}
                leftSection={
                  showLoader ? (
                    <Loader size={14} />
                  ) : item.icon ? (
                    <item.icon size={16} />
                  ) : undefined
                }
                rightSection={
                  item.subCommandSet ? (
                    <IconChevronRight size={14} />
                  ) : undefined
                }
                onClick={() => handleCommand(item)}
                disabled={isLoading}
              >
                {item.name}
              </Menu.Item>
            );
          })}
        </ScrollArea.Autosize>
      </Menu.Dropdown>
    </Menu>
  );
 };
 export { CommandSelector };
@@ -1,31 +0,0 @@
 import { Loader, Paper, Text } from "@mantine/core";
 import DOMPurify from "dompurify";
 import { marked } from "marked";
 import { memo } from "react";
 import classes from "./ai-menu.module.css";
 interface ResultPreviewProps {
  output: string;
  isLoading: boolean;
 }
 const ResultPreview = memo(({ output, isLoading }: ResultPreviewProps) => {
  if (!output && !isLoading) return;
  const parsedOutput = `${marked.parse(output)}`;
  return (
    <Paper p="sm" mb={4} shadow="lg" withBorder>
      <Text size="sm" component="div">
        {parsedOutput && (
          <div
            className={classes.resultPreviewWrapper}
            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(parsedOutput) }}
          />
        )}
        {isLoading && <Loader size={12} ml="xs" display="inline-block" />}
      </Text>
    </Paper>
  );
 });
 export { ResultPreview };
@@ -9,11 +9,10 @@ import {
  IconStrikethrough,
  IconUnderline,
  IconMessage,
  IconSparkles,
 } from "@tabler/icons-react";
 import clsx from "clsx";
 import classes from "./bubble-menu.module.css";
-import { ActionIcon, Button, rem, Tooltip } from "@mantine/core";
+import { ActionIcon, rem, Tooltip } from "@mantine/core";
 import { ColorSelector } from "./color-selector";
 import { NodeSelector } from "./node-selector";
 import { TextAlignmentSelector } from "./text-alignment-selector";
@@ -26,7 +25,6 @@ import { v7 as uuid7 } from "uuid";
 import { isCellSelection, isTextSelected } from "@docmost/editor-ext";
 import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector.tsx";
 import { useTranslation } from "react-i18next";
 import { showAiMenuAtom } from "@/features/editor/atoms/editor-atoms";
 export interface BubbleMenuItem {
  name: string;
@@ -41,20 +39,14 @@ type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children" | "editor"> & {
 export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
  const { t } = useTranslation();
  const [showAiMenu, setShowAiMenu] = useAtom(showAiMenuAtom);
  const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
  const [, setDraftCommentId] = useAtom(draftCommentIdAtom);
  const showCommentPopupRef = useRef(showCommentPopup);
  const showAiMenuRef = useRef(showAiMenu);
  useEffect(() => {
    showCommentPopupRef.current = showCommentPopup;
  }, [showCommentPopup]);
  useEffect(() => {
    showAiMenuRef.current = showAiMenu;
  }, [showAiMenu]);
  const editorState = useEditorState({
    editor: props.editor,
    selector: (ctx) => {
@@ -131,7 +123,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
        empty ||
        isNodeSelection(selection) ||
        isCellSelection(selection) ||
        showAiMenuRef.current ||
        showCommentPopupRef?.current
      ) {
        return false;
@@ -155,26 +146,9 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
  const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
  const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);
  // Hide the bubble menu immediately when AI menu is shown
  if (showAiMenu) return;
  return (
-    <BubbleMenu
+    <BubbleMenu {...bubbleMenuProps} style={{ zIndex: 200, position: "relative"}}>
      {...bubbleMenuProps}
      style={{ zIndex: 200, position: "relative" }}
    >
      <div className={classes.bubbleMenu}>
        <Button
          variant="default"
          style={{ border: "none", height: "34px" }}
          radius="0"
          rightSection={<IconSparkles size={16} />}
          onClick={() => {
            setShowAiMenu(true);
          }}
        >
          Ask AI
        </Button>
        <NodeSelector
          editor={props.editor}
          isOpen={isNodeSelectorOpen}
@@ -170,6 +170,8 @@ const CommandGroups: SlashMenuGroupedItemsType = {
        input.type = "file";
        input.accept = "image/*";
        input.multiple = true;
        input.style.display = "none";
        document.body.appendChild(input);
        input.onchange = async () => {
          if (input.files?.length) {
            for (const file of input.files) {
@@ -179,8 +181,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
            }
          }
-          // Reset the input value to allow uploading the same file again if needed
+          input.remove();
          input.value = "";
        };
        input.click();
      },
@@ -202,6 +203,8 @@ const CommandGroups: SlashMenuGroupedItemsType = {
        input.type = "file";
        input.accept = "video/*";
        input.multiple = true;
        input.style.display = "none";
        document.body.appendChild(input);
        input.onchange = async () => {
          if (input.files?.length) {
            for (const file of input.files) {
@@ -211,8 +214,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
            }
          }
-          // Reset the input value to allow uploading the same file again if needed
+          input.remove();
          input.value = "";
        };
        input.click();
      },
@@ -234,6 +236,8 @@ const CommandGroups: SlashMenuGroupedItemsType = {
        input.type = "file";
        input.accept = "";
        input.multiple = true;
        input.style.display = "none";
        document.body.appendChild(input);
        input.onchange = async () => {
          if (input.files?.length) {
            for (const file of input.files) {
@@ -243,8 +247,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
            }
          }
-          // Reset the input value to allow uploading the same file again if needed
+          input.remove();
          input.value = "";
        };
        input.click();
      },
@@ -66,7 +66,6 @@ import { PageEditMode } from "@/features/user/types/user.types.ts";
 import { jwtDecode } from "jwt-decode";
 import { searchSpotlight } from "@/features/search/constants.ts";
 import { useEditorScroll } from "./hooks/use-editor-scroll";
 import { EditorAiMenu } from "./components/ai-menu/ai-menu";
 interface PageEditorProps {
  pageId: string;
@@ -406,7 +405,6 @@ export default function PageEditor({
        {editor && editorIsEditable && (
          <div>
            <EditorAiMenu editor={editor} />
            <EditorBubbleMenu editor={editor} />
            <TableMenu editor={editor} />
            <TableCellMenu editor={editor} appendTo={menuContainerRef} />
@@ -157,7 +157,9 @@ export function TitleEditor({
  useEffect(() => {
    setTimeout(() => {
-      titleEditor?.commands.focus("end");
+      // guard against Cannot access view['hasFocus'] error
      if (!titleEditor?.isInitialized) return;
      titleEditor?.commands?.focus("end");
    }, 500);
  }, [titleEditor]);
@@ -17,13 +17,13 @@ import {
  UseInterceptors,
 } from '@nestjs/common';
 import { AttachmentService } from './services/attachment.service';
-import { FastifyReply } from 'fastify';
+import { FastifyReply, FastifyRequest } from 'fastify';
 import { FileInterceptor } from '../../common/interceptors/file.interceptor';
 import * as bytes from 'bytes';
 import { AuthUser } from '../../common/decorators/auth-user.decorator';
 import { AuthWorkspace } from '../../common/decorators/auth-workspace.decorator';
 import { JwtAuthGuard } from '../../common/guards/jwt-auth.guard';
-import { User, Workspace } from '@docmost/db/types/entity.types';
+import { Attachment, User, Workspace } from '@docmost/db/types/entity.types';
 import { StorageService } from '../../integrations/storage/storage.service';
 import {
  getAttachmentFolderPath,
@@ -151,6 +151,7 @@ export class AttachmentController {
  @UseGuards(JwtAuthGuard)
  @Get('/files/:fileId/:fileName')
  async getFile(
    @Req() req: FastifyRequest,
    @Res() res: FastifyReply,
    @AuthUser() user: User,
    @AuthWorkspace() workspace: Workspace,
@@ -181,22 +182,7 @@ export class AttachmentController {
    }
    try {
-      const fileStream = await this.storageService.readStream(
+      return await this.sendFileResponse(req, res, attachment, 'private');
        attachment.filePath,
      );
      res.headers({
        'Content-Type': attachment.mimeType,
        'Cache-Control': 'private, max-age=3600',
      });
      if (!inlineFileExtensions.includes(attachment.fileExt)) {
        res.header(
          'Content-Disposition',
          `attachment; filename="${encodeURIComponent(attachment.fileName)}"`,
        );
      }
      return res.send(fileStream);
    } catch (err) {
      this.logger.error(err);
      throw new NotFoundException('File not found');
@@ -205,6 +191,7 @@ export class AttachmentController {
  @Get('/files/public/:fileId/:fileName')
  async getPublicFile(
    @Req() req: FastifyRequest,
    @Res() res: FastifyReply,
    @AuthWorkspace() workspace: Workspace,
    @Param('fileId') fileId: string,
@@ -243,22 +230,7 @@ export class AttachmentController {
    }
    try {
-      const fileStream = await this.storageService.readStream(
+      return await this.sendFileResponse(req, res, attachment, 'public');
        attachment.filePath,
      );
      res.headers({
        'Content-Type': attachment.mimeType,
        'Cache-Control': 'public, max-age=3600',
      });
      if (!inlineFileExtensions.includes(attachment.fileExt)) {
        res.header(
          'Content-Disposition',
          `attachment; filename="${encodeURIComponent(attachment.fileName)}"`,
        );
      }
      return res.send(fileStream);
    } catch (err) {
      this.logger.error(err);
      throw new NotFoundException('File not found');
@@ -433,4 +405,69 @@ export class AttachmentController {
      return;
    }
  }
  private async sendFileResponse(
    req: FastifyRequest,
    res: FastifyReply,
    attachment: Attachment,
    cacheScope: 'private' | 'public',
  ) {
    const fileSize = Number(attachment.fileSize);
    const rangeHeader = req.headers.range;
    res.header('Accept-Ranges', 'bytes');
    if (!inlineFileExtensions.includes(attachment.fileExt)) {
      res.header(
        'Content-Disposition',
        `attachment; filename="${encodeURIComponent(attachment.fileName)}"`,
      );
    }
    if (rangeHeader && fileSize) {
      const match = rangeHeader.match(/bytes=(\d+)-(\d*)/);
      if (match) {
        const start = parseInt(match[1], 10);
        const end = match[2]
          ? Math.min(parseInt(match[2], 10), fileSize - 1)
          : fileSize - 1;
        if (start >= fileSize || start > end) {
          res.status(416);
          res.header('Content-Range', `bytes */${fileSize}`);
          return res.send();
        }
        const fileStream = await this.storageService.readRangeStream(
          attachment.filePath,
          { start, end },
        );
        res.status(206);
        res.headers({
          'Content-Type': attachment.mimeType,
          'Content-Range': `bytes ${start}-${end}/${fileSize}`,
          'Content-Length': end - start + 1,
          'Cache-Control': `${cacheScope}, max-age=3600`,
        });
        return res.send(fileStream);
      }
    }
    const fileStream = await this.storageService.readStream(
      attachment.filePath,
    );
    res.headers({
      'Content-Type': attachment.mimeType,
      'Cache-Control': `${cacheScope}, max-age=3600`,
    });
    if (fileSize) {
      res.header('Content-Length', fileSize);
    }
    return res.send(fileStream);
  }
 }
@@ -73,6 +73,20 @@ export class LocalDriver implements StorageDriver {
    }
  }
  async readRangeStream(
    filePath: string,
    range: { start: number; end: number },
  ): Promise<Readable> {
    try {
      return createReadStream(this._fullPath(filePath), {
        start: range.start,
        end: range.end,
      });
    } catch (err) {
      throw new Error(`Failed to read file: ${(err as Error).message}`);
    }
  }
  async exists(filePath: string): Promise<boolean> {
    try {
      return await fs.pathExists(this._fullPath(filePath));
@@ -130,6 +130,25 @@ export class S3Driver implements StorageDriver {
    }
  }
  async readRangeStream(
    filePath: string,
    range: { start: number; end: number },
  ): Promise<Readable> {
    try {
      const command = new GetObjectCommand({
        Bucket: this.config.bucket,
        Key: filePath,
        Range: `bytes=${range.start}-${range.end}`,
      });
      const response = await this.s3Client.send(command);
      return response.Body as Readable;
    } catch (err) {
      throw new Error(`Failed to read file from S3: ${(err as Error).message}`);
    }
  }
  async exists(filePath: string): Promise<boolean> {
    try {
      const command = new HeadObjectCommand({
@@ -11,6 +11,11 @@ export interface StorageDriver {
  readStream(filePath: string): Promise<Readable>;
  readRangeStream(
    filePath: string,
    range: { start: number; end: number },
  ): Promise<Readable>;
  exists(filePath: string): Promise<boolean>;
  getUrl(filePath: string): string;
@@ -33,6 +33,13 @@ export class StorageService {
    return this.storageDriver.readStream(filePath);
  }
  async readRangeStream(
    filePath: string,
    range: { start: number; end: number },
  ): Promise<Readable> {
    return this.storageDriver.readRangeStream(filePath, range);
  }
  async exists(filePath: string): Promise<boolean> {
    return this.storageDriver.exists(filePath);
  }
@@ -6,11 +6,6 @@
      ],
      "cache": true
    },
    "start:dev": {
      "dependsOn": [
        "^build"
      ]
    },
    "lint": {
      "cache": true
    }
@@ -1,9 +1,9 @@
-import { imageDimensionsFromStream } from "image-dimensions";
+import { imageDimensionsFromData } from 'image-dimensions';
-import { MediaUploadOptions, UploadFn } from "../media-utils";
+import { MediaUploadOptions, UploadFn } from '../media-utils';
-import { IAttachment } from "../types";
+import { IAttachment } from '../types';
-import { generateNodeId } from "../utils";
+import { generateNodeId } from '../utils';
-import { Node } from "@tiptap/pm/model";
+import { Node } from '@tiptap/pm/model';
-import { Command } from "@tiptap/core";
+import { Command } from '@tiptap/core';
 const findImageNodeByPlaceholderId = (
  doc: Node,
@@ -14,7 +14,7 @@ const findImageNodeByPlaceholderId = (
  doc.descendants((node, pos) => {
    if (result) return false;
    if (
-      node.type.name === "image" &&
+      node.type.name === 'image' &&
      node.attrs.placeholder?.id === placeholderId
    ) {
      result = { node, pos };
@@ -34,7 +34,11 @@ const handleImageUpload =
    if (!validated) return;
    const objectUrl = URL.createObjectURL(file);
-    const imageDimensions = await imageDimensionsFromStream(file.stream());
+
    const imageDimensions = imageDimensionsFromData(
      new Uint8Array(await file.arrayBuffer()),
    );
    const placeholderId = generateNodeId();
    const aspectRatio = imageDimensions
      ? imageDimensions.width / imageDimensions.height
Author	SHA1	Message	Date
Philipinho	6f92ecedf6	feat: add HTTP range request support for file serving	2026-02-04 10:29:38 -08:00
Philipinho	7e16c39f9a	fix safari upload bug	2026-02-04 09:40:40 -08:00
Philipinho	03714a8bec	fix hasFocus bug	2026-02-04 09:20:48 -08:00
Philipinho	3003befe07	use widely available arrayBuffer * stream fails in safari	2026-02-04 09:08:23 -08:00