✨(frontend) add upload to the doc editor

We can now upload images to the doc editor.
The image is uploaded to the server
and the URL is inserted into the editor.

src/frontend/apps/impress/.env

@@ -1,3 +1,4 @@
-NEXT_PUBLIC_THEME=dsfr
-NEXT_PUBLIC_SIGNALING_URL=
 NEXT_PUBLIC_API_ORIGIN=
+NEXT_PUBLIC_MEDIA_URL=
+NEXT_PUBLIC_SIGNALING_URL=
+NEXT_PUBLIC_THEME=dsfr

src/frontend/apps/impress/src/core/conf.ts

@@ -1,10 +1,13 @@
-export const baseApiUrl = (apiVersion: string = '1.0') => {
-  const origin =
-    process.env.NEXT_PUBLIC_API_ORIGIN ||
-    (typeof window !== 'undefined' ? window.location.origin : '');
+export const mediaUrl = () =>
+  process.env.NEXT_PUBLIC_MEDIA_URL ||
+  (typeof window !== 'undefined' ? window.location.origin : '');
 
-  return `${origin}/api/v${apiVersion}/`;
-};
+export const backendUrl = () =>
+  process.env.NEXT_PUBLIC_API_ORIGIN ||
+  (typeof window !== 'undefined' ? window.location.origin : '');
+
+export const baseApiUrl = (apiVersion: string = '1.0') =>
+  `${backendUrl()}/api/v${apiVersion}/`;
 
 export const signalingUrl = (docId: string) => {
   const base =

src/frontend/apps/impress/src/custom-next.d.ts

@@ -20,6 +20,7 @@ declare module '*.svg?url' {
 namespace NodeJS {
   interface ProcessEnv {
     NEXT_PUBLIC_API_ORIGIN?: string;
+    NEXT_PUBLIC_MEDIA_URL?: string;
     NEXT_PUBLIC_SIGNALING_URL?: string;
     NEXT_PUBLIC_SW_DEACTIVATED?: string;
     NEXT_PUBLIC_THEME?: string;

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -2,14 +2,16 @@ import { BlockNoteEditor as BlockNoteEditorCore } from '@blocknote/core';
 import '@blocknote/core/fonts/inter.css';
 import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { WebrtcProvider } from 'y-webrtc';
 
-import { Box } from '@/components';
+import { Box, TextErrors } from '@/components';
+import { mediaUrl } from '@/core';
 import { useAuthStore } from '@/core/auth';
 import { Doc } from '@/features/docs/doc-management';
 import { Version } from '@/features/docs/doc-versioning/';
 
+import { useCreateDocAttachment } from '../api/useCreateDocUpload';
 import useSaveDoc from '../hook/useSaveDoc';
 import { useDocStore } from '../stores';
 import { randomColor } from '../utils';
@@ -56,8 +58,28 @@ export const BlockNoteContent = ({
   const { setStore, docsStore } = useDocStore();
   const canSave = doc.abilities.partial_update && !isVersion;
   useSaveDoc(doc.id, provider.doc, canSave);
-
   const storedEditor = docsStore?.[storeId]?.editor;
+  const {
+    mutateAsync: createDocAttachment,
+    isError: isErrorAttachment,
+    error: errorAttachment,
+  } = useCreateDocAttachment();
+
+  const uploadFile = useCallback(
+    async (file: File) => {
+      const body = new FormData();
+      body.append('file', file);
+
+      const ret = await createDocAttachment({
+        docId: doc.id,
+        body,
+      });
+
+      return `${mediaUrl()}${ret.file}`;
+    },
+    [createDocAttachment, doc.id],
+  );
+
   const editor = useMemo(() => {
     if (storedEditor) {
       return storedEditor;
@@ -72,8 +94,9 @@ export const BlockNoteContent = ({
           color: randomColor(),
         },
       },
+      uploadFile,
     });
-  }, [provider, storedEditor, userData?.email]);
+  }, [provider, storedEditor, uploadFile, userData?.email]);
 
   useEffect(() => {
     setStore(storeId, { editor });
@@ -90,6 +113,12 @@ export const BlockNoteContent = ({
         }
       `}
     >
+      {isErrorAttachment && (
+        <Box $margin={{ bottom: 'big' }}>
+          <TextErrors causes={errorAttachment.cause} />
+        </Box>
+      )}
+
       <BlockNoteView
         editor={editor}
         formattingToolbar={false}