From 6d0ab11508b77c990a35eb890e65281db5677fc4 Mon Sep 17 00:00:00 2001
From: Petyo Ivanov <underlog@gmail.com>
Date: Thu, 20 Jul 2023 15:33:36 +0300
Subject: [PATCH] Document image support

---
 app/page.tsx   | 11 ++++++++---
 docs/images.md | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 package.json   |  1 +
 3 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 docs/images.md

diff --git a/app/page.tsx b/app/page.tsx
index 6d84669..97cb51e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -154,14 +154,19 @@ export default function Home() {
           </FeatureOverviewItem>
         </li>
         <li>
-          <FeatureOverviewItem title="Image dialog">
-            <p>Users can insert images with a toolbar button.</p>
-            <p>Provide autocomplete suggestions for the URL input field through a component prop.</p>
+          <FeatureOverviewItem title="Image support">
+            <p>Paste, drag and drop images, or insert images from the web.</p>
+            <p>The image dialog can provide autocomplete suggestions for the image URL.</p>
             <p>
               <a href="editor/demo">
                 Test in the live demo <SlashedArrowIcon />
               </a>
             </p>
+            <p>
+              <a href="editor/docs/images">
+                Read the docs <SlashedArrowIcon />
+              </a>
+            </p>
           </FeatureOverviewItem>
         </li>
         <li>
diff --git a/docs/images.md b/docs/images.md
new file mode 100644
index 0000000..1d9f464
--- /dev/null
+++ b/docs/images.md
@@ -0,0 +1,50 @@
+---
+title: Image Support
+slug: images
+position: 7
+---
+
+# Image Support
+
+The MDXEditor components lets users insert images from the web or from their local device. The images are inserted as markdown images. Users can also paste and drop multiple images at once.
+
+## Inserting images from the web
+
+The toolbar includes an insert image button, which lets users insert an image from the web. When the button is clicked, a dialog is shown, where the user can enter the URL of the image. 
+Optionally, you can add auto-complete suggestions for the image URL through the `imageAutocompleteSuggestions` prop.
+
+```tsx
+  <MDXEditor 
+    imageAutocompleteSuggestions={[
+      'https://google.com/', 
+      'https://mdxeditor.dev', 
+      'https://virtuoso.dev/'
+    ]}
+  />
+```
+
+## Pasting and dropping images
+
+The editor handles dropping and pasting images and clipboard contents that contain images. To handle that, you need to upload the image to a location of your choice and return the URL of the uploaded image. This is done through the `imageUploadHandler` prop. The prop accepts a function that receives a `File` object and returns a `Promise` that resolves to the URL of the uploaded image. 
+
+```tsx
+async function imageUploadHandler(image: File) {
+  const formData = new FormData()
+  formData.append('image', image)
+  // send the file to your server and return 
+  // the URL of the uploaded image in the response
+  const response = await fetch('/uploads/new', { 
+      method: 'POST', 
+      body: formData 
+  })
+  const json = (await response.json()) as { url: string }
+  return json.url
+}
+
+export function Example() {
+    return <MDXEditor
+      markdown={'# Hello World'}
+      imageUploadHandler={imageUploadHandler}
+    />
+}
+```
diff --git a/package.json b/package.json
index 4bd9c45..d03ec96 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "start": "npx serve@latest out",
     "lint": "next lint"
   },
+  "packageManager": "npm@9.8.1",
   "dependencies": {
     "@mapbox/rehype-prism": "^0.8.0",
     "@mdx-js/loader": "^2.3.0",