From c22666b4c11e383ea06a73ab67862da31447c995 Mon Sep 17 00:00:00 2001
From: Geert Plaisier <geert.plaisier@gnamic.nl>
Date: Wed, 13 Nov 2024 16:19:51 +0100
Subject: [PATCH] feat: add selectUpload config option to ImageBlock

---
 packages/components/src/image-block/config.ts |  1 +
 .../src/image-block/view/component.ts         | 17 ++++++++++-
 .../stories/components/image-block.stories.ts | 29 ++++++++++++++++++-
 3 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/image-block/config.ts b/packages/components/src/image-block/config.ts
index 89673bbf0dde..ad4445645e1f 100644
--- a/packages/components/src/image-block/config.ts
+++ b/packages/components/src/image-block/config.ts
@@ -10,6 +10,7 @@ export interface ImageBlockConfig {
   uploadPlaceholderText: string
   captionPlaceholderText: string
   onUpload: (file: File) => Promise<string>
+  selectUpload?: () => Promise<string>
 }
 
 export const defaultImageBlockConfig: ImageBlockConfig = {
diff --git a/packages/components/src/image-block/view/component.ts b/packages/components/src/image-block/view/component.ts
index 93d96aaf381b..ef13a1c34558 100644
--- a/packages/components/src/image-block/view/component.ts
+++ b/packages/components/src/image-block/view/component.ts
@@ -122,6 +122,21 @@ export const imageComponent: Component<ImageComponentProps> = ({
     e.preventDefault()
   }
 
+  const handleUpload = async (e: PointerEvent) => {
+    if (readonly) {
+      return;
+    }
+    if (typeof config?.selectUpload !== 'undefined') {
+      e.stopPropagation();
+      e.preventDefault();
+      const url = await config.selectUpload();
+      if (url) {
+        setAttr?.('src', url)
+        setHidePlaceholder(true);
+      }
+    }
+  }
+
   return html`<host class=${clsx(selected && 'selected')}>
     <div class=${clsx('image-edit', src.length > 0 && 'hidden')}>
       <div class="image-icon">
@@ -142,7 +157,7 @@ export const imageComponent: Component<ImageComponentProps> = ({
         />
         <div class=${clsx('placeholder', hidePlaceholder && 'hidden')}>
           <input disabled=${readonly} class="hidden" id=${uuid} type="file" accept="image/*" onchange=${onUpload} />
-          <label onpointerdown=${onClickUploader} class="uploader" for=${uuid}>
+          <label onpointerdown=${onClickUploader} onclick=${handleUpload} class="uploader" for=${uuid}>
             ${config?.uploadButton()}
           </label>
           <span class="text" onclick=${() => linkInput.current?.focus()}>
diff --git a/storybook/stories/components/image-block.stories.ts b/storybook/stories/components/image-block.stories.ts
index 183c4304bddc..2522f4c27980 100644
--- a/storybook/stories/components/image-block.stories.ts
+++ b/storybook/stories/components/image-block.stories.ts
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/html'
-import { imageBlockComponent } from '@milkdown/kit/component/image-block'
+import { imageBlockComponent, imageBlockConfig } from '@milkdown/kit/component/image-block'
 
 import type { CommonArgs } from '../utils/shadow'
 import { setupMilkdown } from '../utils/shadow'
@@ -31,6 +31,33 @@ export const Empty: StoryObj<CommonArgs> = {
   },
 }
 
+export const CustomUpload: StoryObj<CommonArgs> = {
+  render: (args) => {
+    return setupMilkdown([style], args, (editor) => {
+      editor.config((ctx) => {
+        ctx.update(imageBlockConfig.key, value => ({
+          uploadButton: (() => 'Select image'),
+          imageIcon: value.imageIcon,
+          captionIcon: value.captionIcon,
+          confirmButton: value.confirmButton,
+          captionPlaceholderText: value.captionPlaceholderText,
+          uploadPlaceholderText: value.uploadPlaceholderText,
+          onUpload: value.onUpload,
+          selectUpload: () => {
+            return new Promise(resolve => {
+              resolve('/milkdown-logo.png');
+            });
+          }
+        }))
+      }).use(imageBlockComponent)
+    })
+  },
+  args: {
+    readonly: false,
+    defaultValue: empty,
+  },
+}
+
 export const Logo: StoryObj<CommonArgs> = {
   ...Empty,
   args: {