feat: 🎸 optimize ux of tooltip component

Milkdown · Dec 11, 2023 · 9c8b145 · 9c8b145
1 parent 03b2d13
commit 9c8b145
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 5 deletions.
diff --git a/e2e/src/link-tooltip/style.css b/e2e/src/link-tooltip/style.css
@@ -10,6 +10,7 @@
 
 milkdown-link-preview {
   & > .link-preview {
+    height: 42px;
     display: flex;
     justify-content: center;
     padding: 8px;
@@ -71,7 +72,9 @@ milkdown-link-preview {
 
 milkdown-link-edit {
   & > .link-edit {
+    height: 42px;
     display: flex;
+    justify-content: center;
     padding: 8px 12px;
     background: bisque;
     gap: 8px;
@@ -92,6 +95,9 @@ milkdown-link-edit {
       &:hover {
         background: burlywood;
       }
+      &.hidden {
+        visibility: hidden;
+      }
     }
   }
 }
diff --git a/packages/components/src/link-tooltip/edit/edit-component.ts b/packages/components/src/link-tooltip/edit/edit-component.ts
@@ -1,6 +1,7 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import type { Component } from 'atomico'
-import { html, useRef } from 'atomico'
+import { html, useEffect, useRef, useState } from 'atomico'
+import clsx from 'clsx'
 import type { LinkTooltipConfig } from '../slices'
 
 export interface LinkEditProps {
@@ -17,16 +18,26 @@ export const linkEditComponent: Component<LinkEditProps> = ({
   config,
 }) => {
   const linkInput = useRef<HTMLInputElement>()
+  const [link, setLink] = useState(src)
+
+  useEffect(() => {
+    setLink(src ?? '')
+  }, [src])
 
   const onConfirmEdit = () => {
     onConfirm?.(linkInput.current?.value ?? '')
   }
 
   const onKeydown = (e: KeyboardEvent) => {
-    if (e.key === 'Enter')
+    e.stopPropagation()
+    if (e.key === 'Enter') {
       onConfirm?.(linkInput.current?.value ?? '')
-    if (e.key === 'Escape')
+      e.preventDefault()
+    }
+    if (e.key === 'Escape') {
       onCancel?.()
+      e.preventDefault()
+    }
   }
 
   return html`
@@ -37,9 +48,10 @@ export const linkEditComponent: Component<LinkEditProps> = ({
           placeholder=${config?.inputPlaceholder}
           ref=${linkInput}
           onkeydown=${onKeydown}
-          value=${src}
+          oninput=${(e: InputEvent) => setLink((e.target as HTMLInputElement).value)}
+          value=${link}
         />
-        <span class="button confirm" onclick=${onConfirmEdit}>
+        <span class=${clsx('button confirm', link.length === 0 && 'hidden')} onclick=${onConfirmEdit}>
           ${config?.confirmButton()}
         </span>
       </div>

diff --git a/packages/components/src/link-tooltip/edit/edit-view.ts b/packages/components/src/link-tooltip/edit/edit-view.ts
@@ -37,6 +37,8 @@ export class LinkEditTooltip implements PluginView {
       tippyOptions: {
         arrow: false,
         appendTo: document.body,
+        delay: 0,
+        duration: 0,
         onHidden: () => {
           this.#content.update().catch((e) => {
             throw e

diff --git a/packages/components/src/link-tooltip/preview/preview-view.ts b/packages/components/src/link-tooltip/preview/preview-view.ts
@@ -18,6 +18,7 @@ export class LinkPreviewTooltip implements PluginView {
       appendTo: document.body,
       arrow: false,
       delay: 0,
+      duration: 0,
     },
   })