feat: 🎸 optimize ux of image block, remove edit feature

e2e/src/image-block/style.css

@@ -44,26 +44,27 @@ milkdown-image-block > .caption-input {
 
 milkdown-image-block > .image-edit {
   align-items: center;
-  padding: 24px 40px;
+  padding: 16px 24px;
   gap: 16px;
   background: oldlace;
+  height: 56px;
 }
 
 milkdown-image-block > .image-edit .image-icon {
   color: darkgray;
 }
 
 milkdown-image-block > .image-edit .image-icon svg {
-  width: 48px;
-  height: 48px;
+  width: 24px;
+  height: 24px;
 }
 
 milkdown-image-block > .image-edit .link-importer .placeholder {
   color: darkgray;
 }
 
 milkdown-image-block > .image-edit .link-importer .link-input-area {
-  line-height: 48px;
+  line-height: 24px;
 }
 
 milkdown-image-block > .image-edit .link-importer .placeholder .uploader {
@@ -88,6 +89,8 @@ milkdown-image-block > .image-edit .link-importer .placeholder .text {
 milkdown-image-block > .image-edit .confirm {
   background: darkgray;
   color: antiquewhite;
-  padding: 6px 24px;
+  height: 40px;
+  padding: 0 24px;
   border-radius: 100px;
+  font-size: 14px;
 }

packages/components/src/image-block/config.ts

@@ -1,11 +1,10 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { $ctx } from '@milkdown/utils'
 import { html } from 'atomico'
-import { chatBubble, edit, image, upload } from '../__internal__/icons'
+import { chatBubble, image } from '../__internal__/icons'
 
 export type ImageBlockConfig = {
   imageIcon: () => ReturnType<typeof html>
-  editIcon: () => ReturnType<typeof html>
   captionIcon: () => ReturnType<typeof html>
   uploadButton: () => ReturnType<typeof html>
   confirmButton: () => ReturnType<typeof html>
@@ -16,9 +15,8 @@ export type ImageBlockConfig = {
 
 export const defaultConfig: ImageBlockConfig = {
   imageIcon: () => image,
-  editIcon: () => edit,
   captionIcon: () => chatBubble,
-  uploadButton: () => html`${upload} Upload file`,
+  uploadButton: () => html`Upload file`,
   confirmButton: () => html`Confirm ⏎`,
   uploadPlaceholderText: 'or paste the image link ...',
   captionPlaceholderText: 'Image caption',

packages/components/src/image-block/view/component.ts

@@ -31,10 +31,10 @@ export const imageComponent: Component<ImageComponentProps> = ({
   const resizeHandle = useRef<HTMLDivElement>()
   const linkInput = useRef<HTMLInputElement>()
   const [showCaption, setShowCaption] = useState(caption.length > 0)
-  const [editing, setEditing] = useState(src.length === 0)
   const [hidePlaceholder, setHidePlaceholder] = useState(src.length !== 0)
-  const [uuid, setUuid] = useState('')
+  const [uuid] = useState(crypto.randomUUID())
   const [focusLinkInput, setFocusLinkInput] = useState(false)
+  const [currentLink, setCurrentLink] = useState(src)
   useCssLightDom(style)
 
   useBlockEffect({
@@ -45,15 +45,10 @@ export const imageComponent: Component<ImageComponentProps> = ({
     src,
   })
 
-  useEffect(() => {
-    setUuid(crypto.randomUUID())
-  }, [])
-
   useEffect(() => {
     if (selected)
       return
 
-    setEditing(src.length === 0)
     setShowCaption(caption.length > 0)
   }, [selected])
 
@@ -63,16 +58,11 @@ export const imageComponent: Component<ImageComponentProps> = ({
     setAttr?.('caption', value)
   }
 
-  const onEdit = () => {
-    setEditing(true)
-  }
-
   const onEditLink = (e: InputEvent) => {
     const target = e.target as HTMLInputElement
     const value = target.value
     setHidePlaceholder(value.length !== 0)
-
-    setAttr?.('src', value)
+    setCurrentLink(value)
   }
 
   const onUpload = async (e: InputEvent) => {
@@ -85,29 +75,32 @@ export const imageComponent: Component<ImageComponentProps> = ({
       return
 
     setAttr?.('src', url)
-    setEditing(false)
     setHidePlaceholder(true)
   }
 
   const onToggleCaption = () => {
     setShowCaption(x => !x)
   }
 
+  const onConfirmLinkInput = () => {
+    setAttr?.('src', linkInput.current?.value ?? '')
+  }
+
   const onKeydown = (e: KeyboardEvent) => {
     if (e.key === 'Enter')
-      setEditing(false)
+      onConfirmLinkInput()
   }
 
-  return html`<host class=${clsx(selected && 'selected', editing && 'editing')}>
-    <div class=${clsx('image-edit', !editing && 'hidden')}>
+  return html`<host class=${clsx(selected && 'selected')}>
+    <div class=${clsx('image-edit', src.length > 0 && 'hidden')}>
       <div class="image-icon">
         ${config?.imageIcon()}
       </div>
       <div class=${clsx('link-importer', focusLinkInput && 'focus')}>
         <input
           ref=${linkInput}
           class="link-input-area"
-          value=${src}
+          value=${currentLink}
           oninput=${onEditLink}
           onkeydown=${onKeydown}
           onfocus=${() => setFocusLinkInput(true)}
@@ -124,22 +117,21 @@ export const imageComponent: Component<ImageComponentProps> = ({
         </div>
       </div>
       <button
-        class=${clsx('confirm', src.length === 0 && 'hidden')}
-        onclick=${() => setEditing(false)}
+        class=${clsx('confirm', currentLink.length === 0 && 'hidden')}
+        onclick=${() => onConfirmLinkInput()}
       >
         ${config?.confirmButton()}
       </button>
     </div>
-    <div class=${clsx('image-wrapper', editing && 'hidden')}>
+    <div class=${clsx('image-wrapper', src.length === 0 && 'hidden')}>
       <div class="operation">
-        <div class="operation-item" onmousedown=${onEdit}>${config?.editIcon()}</div>
         <div class="operation-item" onmousedown=${onToggleCaption}>${config?.captionIcon()}</div>
       </div>
       <img ref=${image} src=${src} alt=${caption} />
       <div ref=${resizeHandle} class="image-resize-handle"></div>
     </div>
     <input
-      class=${clsx('caption-input', !(!editing && showCaption) && 'hidden')}
+      class=${clsx('caption-input', !showCaption && 'hidden')}
       placeholder=${config?.captionPlaceholderText}
       oninput=${onInput}
       value=${caption}

packages/components/src/image-block/view/style.ts

@@ -53,7 +53,7 @@ export const style = css`
     text-align: center;
   }
 
-  :host.editing > .image-edit {
+  :host > .image-edit {
     display: flex;
   }