fixed multiple media blocks with the same url export

seed-hypermedia · Oct 25, 2024 · 298c93c · 298c93c
1 parent 0114b6f
commit 298c93c
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 15 deletions.
diff --git a/frontend/apps/desktop/src/main.ts b/frontend/apps/desktop/src/main.ts
@@ -147,7 +147,7 @@ ipcMain.on(
       title: string
       markdown: {
         markdownContent: string
-        mediaFiles: {url: string; filename: string}[]
+        mediaFiles: {url: string; filename: string; placeholder: string}[]
       }
     }[],
   ) => {
@@ -214,9 +214,11 @@ ipcMain.on(
         const uploadMediaFile = async ({
           url,
           filename,
+          placeholder,
         }: {
           url: string
           filename: string
+          placeholder: string
         }) => {
           return new Promise<void>((resolve, reject) => {
             const regex = /ipfs:\/\/(.+)/
@@ -252,7 +254,7 @@ ipcMain.on(
                       debug(`Media file successfully saved: ${mediaFilePath}`)
                       // Update the markdown content with the correct file name
                       updatedMarkdownContent = updatedMarkdownContent.replace(
-                        filename,
+                        placeholder,
                         filenameWithExt,
                       )
                       resolve()

diff --git a/frontend/apps/desktop/src/preload.ts b/frontend/apps/desktop/src/preload.ts
@@ -50,7 +50,7 @@ contextBridge.exposeInMainWorld('docExport', {
   exportDocument: async (
     title: string,
     markdownContent: string,
-    mediaFiles: {url: string; filename: string}[],
+    mediaFiles: {url: string; filename: string; placeholder: string}[],
   ) => {
     return new Promise((resolve, reject) => {
       ipcRenderer.once('export-completed', (event, response) => {
@@ -70,7 +70,7 @@ contextBridge.exposeInMainWorld('docExport', {
       title: string
       markdown: {
         markdownContent: string
-        mediaFiles: {url: string; filename: string}[]
+        mediaFiles: {url: string; filename: string; placeholder: string}[]
       }
     }[],
   ) => {

diff --git a/frontend/apps/desktop/src/root.tsx b/frontend/apps/desktop/src/root.tsx
@@ -243,7 +243,7 @@ function MainApp({
         exportDocument={async (
           title: string,
           markdownContent: string,
-          mediaFiles: {url: string; filename: string}[],
+          mediaFiles: {url: string; filename: string; placeholder: string}[],
         ) => {
           // @ts-ignore
           return window.docExport.exportDocument(
@@ -257,7 +257,7 @@ function MainApp({
             title: string
             markdown: {
               markdownContent: string
-              mediaFiles: {url: string; filename: string}[]
+              mediaFiles: {url: string; filename: string; placeholder: string}[]
             }
           }[],
         ) => {

diff --git a/frontend/apps/desktop/src/save-markdown-file.tsx b/frontend/apps/desktop/src/save-markdown-file.tsx
@@ -11,7 +11,7 @@ export async function saveMarkdownFile(
   args: {
     title: string
     markdownContent: string
-    mediaFiles: {url: string; filename: string}[]
+    mediaFiles: {url: string; filename: string; placeholder: string}[]
   },
 ) {
   const {title, markdownContent, mediaFiles} = args
@@ -51,9 +51,11 @@ export async function saveMarkdownFile(
     const uploadMediaFile = ({
       url,
       filename,
+      placeholder,
     }: {
       url: string
       filename: string
+      placeholder: string
     }) => {
       return new Promise<void>((resolve, reject) => {
         const regex = /ipfs:\/\/(.+)/
@@ -87,7 +89,7 @@ export async function saveMarkdownFile(
                 debug(`Media file successfully saved: ${mediaFilePath}`)
                 // Update the markdown content with the correct file name
                 updatedMarkdownContent = updatedMarkdownContent.replace(
-                  filename,
+                  placeholder,
                   filenameWithExt,
                 )
                 resolve()

diff --git a/frontend/packages/app/app-context.tsx b/frontend/packages/app/app-context.tsx
@@ -23,14 +23,14 @@ export type AppContext = {
   exportDocument: (
     title: string,
     markdownContent: string,
-    mediaFiles: {url: string; filename: string}[],
+    mediaFiles: {url: string; filename: string; placeholder: string}[],
   ) => Promise<void>
   exportDocuments: (
     documents: {
       title: string
       markdown: {
         markdownContent: string
-        mediaFiles: {url: string; filename: string}[]
+        mediaFiles: {url: string; filename: string; placeholder: string}[]
       }
     }[],
   ) => Promise<void>
@@ -64,14 +64,14 @@ export function AppContextProvider({
   exportDocument: (
     title: string,
     markdownContent: string,
-    mediaFiles: {url: string; filename: string}[],
+    mediaFiles: {url: string; filename: string; placeholder: string}[],
   ) => Promise<void>
   exportDocuments: (
     documents: {
       title: string
       markdown: {
         markdownContent: string
-        mediaFiles: {url: string; filename: string}[]
+        mediaFiles: {url: string; filename: string; placeholder: string}[]
       }
     }[],
   ) => Promise<void>

diff --git a/frontend/packages/app/utils/blocks-to-markdown.ts b/frontend/packages/app/utils/blocks-to-markdown.ts
@@ -114,7 +114,8 @@ function convertBlocksToHtml(
 }
 
 async function extractMediaFiles(blocks: HMBlock[]) {
-  const mediaFiles: {url: string; filename: string}[] = []
+  const mediaFiles: {url: string; filename: string; placeholder: string}[] = []
+  let counter = 1
   const extractMedia = async (block) => {
     if (
       block.type === 'image' ||
@@ -131,8 +132,10 @@ async function extractMediaFiles(blocks: HMBlock[]) {
           return
         }
         const filename = url.split('/').pop()
-        mediaFiles.push({url, filename})
-        block.props = {...block.props, url: `media/${filename}`} // Update the URL to point to the local media folder
+        const placeholder = `file-${counter}`
+        mediaFiles.push({url, filename, placeholder})
+        counter++
+        block.props = {...block.props, url: `media/${placeholder}`} // Update the URL to point to the local media folder
       }
     }
     if (block.children) {