feat: support button for uploading all images to ipfs (#504)

src/editor/Cloud.tsx

@@ -0,0 +1,68 @@
+import toast from "react-hot-toast"
+
+import { UploadFile } from "~/lib/upload-file"
+
+import { ICommand } from "."
+
+const uploadResources = async (text: string) => {
+  const markdownHttpImagesRegex = /\!\[([^\]]*)\]\((?=(https:\/\/))([^)]+)\)/g
+  const markdownHttpImageRegex = /\!\[([^\]]*)\]\((?=(https:\/\/))([^)]+)\)/
+  const markdownHttpImages = text.match(markdownHttpImagesRegex)
+  if (markdownHttpImages) {
+    const markdownReplacementsArray = await Promise.all(
+      markdownHttpImages.map(async (markdownHttpImage) => {
+        const match = markdownHttpImage.match(markdownHttpImageRegex)!
+        const altText = match[1]
+        const url = match[3]
+        const toastId = toast.loading(`Uploading ${altText || url}`)
+        try {
+          const blob = await fetch(url).then((response) => response.blob())
+          const key = (await UploadFile(blob)).key
+          toast.success(`Uploaded ${altText || url}!`, {
+            id: toastId,
+          })
+          return {
+            originalMarkdown: markdownHttpImage,
+            newMarkdown: `![${altText}](${key})`,
+          }
+        } catch (error) {
+          if (error instanceof Error) {
+            toast.error(`Failed upload ${altText || url}, ${error.message}`, {
+              id: toastId,
+            })
+          }
+          console.error(error)
+          return undefined
+        }
+      }),
+    )
+    return markdownReplacementsArray.reduce(
+      (prev, cur) =>
+        cur ? prev.replace(cur.originalMarkdown, cur.newMarkdown) : prev,
+      text,
+    )
+  } else {
+    return text
+  }
+}
+
+export const Cloud: ICommand = {
+  name: "cloud",
+  label: "Upload All Images to IPFS",
+  icon: "icon-[mingcute--upload-3-line]",
+  execute: async ({ view }) => {
+    const docJson = view.state.doc.toJSON()
+    const newDocJson = await Promise.all(
+      docJson.map((line: string) => uploadResources(line)),
+    )
+    view.dispatch({
+      changes: [
+        {
+          from: 0,
+          to: view.state.doc.toString().length,
+          insert: newDocJson.join("\n"),
+        },
+      ],
+    })
+  },
+}

src/editor/index.tsx

@@ -4,6 +4,7 @@ import { EditorSelection } from "@codemirror/state"
 import { EditorView } from "@codemirror/view"
 
 import { Bold } from "./Bold"
+import { Cloud } from "./Cloud"
 import { Code } from "./Code"
 import { CodeBlock } from "./CodeBlock"
 import { Emoji } from "./Emoji"
@@ -142,5 +143,6 @@ export const toolbars: ICommand[] = [
   Image,
   Mention,
   Emoji,
+  Cloud,
   Help,
 ]

src/lib/ipfs-parser.ts

@@ -1,6 +1,6 @@
 import { IPFS_GATEWAY } from "~/lib/env"
 
-const IPFS_PREFIX = "ipfs://"
+export const IPFS_PREFIX = "ipfs://"
 
 export type ToGatewayConfig = {
   needRequestAtServerSide?: boolean