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>