fix editor file handling

apps/client/src/features/editor/components/common/file-upload-handler.tsx

@@ -0,0 +1,45 @@
+import type { EditorView } from "@tiptap/pm/view";
+import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
+import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action.tsx";
+
+export const handleFilePaste = (
+  view: EditorView,
+  event: ClipboardEvent,
+  pageId: string,
+) => {
+  if (event.clipboardData?.files.length) {
+    event.preventDefault();
+    const [file] = Array.from(event.clipboardData.files);
+    const pos = view.state.selection.from;
+
+    if (file) {
+      uploadImageAction(file, view, pos, pageId);
+      uploadVideoAction(file, view, pos, pageId);
+    }
+    return true;
+  }
+  return false;
+};
+
+export const handleFileDrop = (
+  view: EditorView,
+  event: DragEvent,
+  moved: boolean,
+  pageId: string,
+) => {
+  if (!moved && event.dataTransfer?.files.length) {
+    event.preventDefault();
+    const [file] = Array.from(event.dataTransfer.files);
+    const coordinates = view.posAtCoords({
+      left: event.clientX,
+      top: event.clientY,
+    });
+    // here we deduct 1 from the pos or else the image will create an extra node
+    if (file) {
+      uploadImageAction(file, view, coordinates?.pos ?? 0 - 1, pageId);
+      uploadVideoAction(file, view, coordinates?.pos ?? 0 - 1, pageId);
+    }
+    return true;
+  }
+  return false;
+};

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

@@ -1,7 +1,7 @@
 import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import { useMemo } from "react";
 import { Image } from "@mantine/core";
-import { getBackendUrl } from "@/lib/config.ts";
+import { getFileUrl } from "@/lib/config.ts";
 
 export default function ImageView(props: NodeViewProps) {
   const { node, selected } = props;
@@ -23,9 +23,9 @@ export default function ImageView(props: NodeViewProps) {
     >
       <Image
         radius="md"
-        src={getBackendUrl() + src}
         fit="contain"
         w={width}
+        src={getFileUrl(src)}
         className={selected && "ProseMirror-selectednode"}
       />
     </NodeViewWrapper>

apps/client/src/features/editor/components/image/upload-image-action.tsx

@@ -4,7 +4,6 @@ import { uploadFile } from "@/features/page/services/page-service.ts";
 export const uploadImageAction = handleImageUpload({
   onUpload: async (file: File, pageId: string): Promise<any> => {
     try {
-      console.log("dont upload");
       return await uploadFile(file, pageId);
     } catch (err) {
       console.error("failed to upload image", err);

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

@@ -1,6 +1,6 @@
 import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import { useMemo } from "react";
-import { getBackendUrl } from "@/lib/config.ts";
+import { getFileUrl } from "@/lib/config.ts";
 
 export default function VideoView(props: NodeViewProps) {
   const { node, selected } = props;
@@ -24,7 +24,7 @@ export default function VideoView(props: NodeViewProps) {
         preload="metadata"
         width={width}
         controls
-        src={getBackendUrl() + src}
+        src={getFileUrl(src)}
         className={selected && "ProseMirror-selectednode"}
       />
     </NodeViewWrapper>

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

@@ -29,12 +29,15 @@ import EditorSkeleton from "@/features/editor/components/editor-skeleton";
 import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubble-menu";
 import TableCellMenu from "@/features/editor/components/table/table-cell-menu.tsx";
 import TableMenu from "@/features/editor/components/table/table-menu.tsx";
-import { handleMediaDrop, handleMediaPaste } from "@docmost/editor-ext";
 import ImageMenu from "@/features/editor/components/image/image-menu.tsx";
 import CalloutMenu from "@/features/editor/components/callout/callout-menu.tsx";
 import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
 import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action.tsx";
 import VideoMenu from "@/features/editor/components/video/video-menu.tsx";
+import {
+  handleFileDrop,
+  handleFilePaste,
+} from "@/features/editor/components/common/file-upload-handler.tsx";
 
 interface PageEditorProps {
   pageId: string;
@@ -112,14 +115,9 @@ export default function PageEditor({ pageId, editable }: PageEditorProps) {
             }
           },
         },
-        handlePaste: (view, event) => {
-          handleMediaPaste(view, event, uploadImageAction, pageId);
-          handleMediaPaste(view, event, uploadVideoAction, pageId);
-        },
-        handleDrop: (view, event, _slice, moved) => {
-          handleMediaDrop(view, event, moved, uploadImageAction, pageId);
-          handleMediaDrop(view, event, moved, uploadVideoAction, pageId);
-        },
+        handlePaste: (view, event) => handleFilePaste(view, event, pageId),
+        handleDrop: (view, event, _slice, moved) =>
+          handleFileDrop(view, event, moved, pageId),
       },
       onCreate({ editor }) {
         if (editor) {

apps/client/src/features/editor/styles/media.css

@@ -5,6 +5,9 @@
   }
 
   .node-image, .node-video {
+    margin-top: 8px;
+    margin-bottom: 8px;
+
     &.ProseMirror-selectednode {
       outline: none;
     }

apps/client/src/lib/config.ts

@@ -42,3 +42,7 @@ export function getAvatarUrl(avatarUrl: string) {
 export function getSpaceUrl(spaceSlug: string) {
   return "/s/" + spaceSlug;
 }
+
+export function getFileUrl(src: string) {
+  return src.startsWith("/files/") ? getBackendUrl() + src : src;
+}