diff --git a/.changeset/lemon-berries-prove.md b/.changeset/lemon-berries-prove.md
new file mode 100644
index 0000000..57ab820
--- /dev/null
+++ b/.changeset/lemon-berries-prove.md
@@ -0,0 +1,5 @@
+---
+"@fuma-comment/react": minor
+---
+
+Support image uploading
diff --git a/apps/docs/content/docs/index.mdx b/apps/docs/content/docs/index.mdx
index e06cbc2..943527d 100644
--- a/apps/docs/content/docs/index.mdx
+++ b/apps/docs/content/docs/index.mdx
@@ -44,6 +44,62 @@ All components are pre-styled with Tailwind CSS, notice that it also normalizes
import "@fuma-comment/react/style.css";
```
+### Image Uploading
+
+The default rich editor doesn't come with any image uploading features, you have to configure it manually to integrate with AWS S3, Cloudinary or other cloud storage services.
+
+Here is an example for Cloudinary, with unauthorizated requests:
+
+```tsx
+import type { StorageContext, CommentsProps } from "@fuma-comment/react";
+import { Comments, AuthProvider, StorageProvider } from "@fuma-comment/react";
+
+const cloudName = process.env.NEXT_PUBLIC_CLOUDINARY_CLOUDNAME;
+
+const storage: StorageContext = {
+ enabled: true,
+ async upload(file) {
+ const body = new FormData();
+ body.append("file", file);
+ body.append("upload_preset", "fuma_comment");
+
+ const res = await fetch(
+ `https://api.cloudinary.com/v1_1/${cloudName}/image/upload`,
+ {
+ method: "POST",
+ body,
+ }
+ );
+
+ if (res.ok) {
+ const result = (await res.json()) as {
+ secure_url: string;
+ width: number;
+ height: number;
+ };
+
+ return {
+ url: result.secure_url,
+ width: result.width,
+ height: result.height,
+ };
+ }
+
+ throw new Error("Failed to upload file");
+ },
+};
+
+export function MyComponent() {
+ return (
+
+
+
+
+
+ );
+}
+```
+
## Server
Fuma Comment supports several web/backend frameworks, including Next.js and Express.
@@ -93,7 +149,7 @@ model Comment {
page String? @db.VarChar(256)
thread Int?
author String @db.VarChar(256)
- content String @db.Text
+ content Json @db.Json
timestamp DateTime @db.Timestamp() @default(now())
rates Rate[]
@@ -141,7 +197,7 @@ export async function up(db: Kysely): Promise {
.addColumn("page", "varchar(256)")
.addColumn("threadId", "integer")
.addColumn("author", "varchar(256)", (col) => col.notNull())
- .addColumn("content", "text", (col) => col.notNull())
+ .addColumn("content", "json", (col) => col.notNull())
.addColumn("timestamp", "timestamp", (col) =>
col.defaultTo(sql`now()`).notNull()
)