fix: 🐛 block component trigger button

Milkdown · Aug 26, 2023 · b28d689 · b28d689
1 parent 090804b
commit b28d689
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/e2e/src/code-block/style.css b/e2e/src/code-block/style.css
@@ -47,6 +47,7 @@ milkdown-code-block .list-wrapper {
   background: antiquewhite;
   border-radius: 16px;
   box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
+  width: 220px;
 }
 
 milkdown-code-block .language-list {
@@ -98,7 +99,7 @@ milkdown-code-block .search-box {
 }
 
 milkdown-code-block .search-box .search-input {
-  flex: 1;
+  width: 100%;
 }
 
 milkdown-code-block .search-box .search-icon svg {

diff --git a/packages/components/src/code-block/view/component.ts b/packages/components/src/code-block/view/component.ts
@@ -51,7 +51,9 @@ export const codeComponent: Component<CodeComponentProps> = ({
 
   useEffect(() => {
     const clickHandler = (e: MouseEvent) => {
-      if (e.target === triggerRef.current)
+      const target = e.target as HTMLElement
+
+      if (triggerRef.current && triggerRef.current.contains(target))
         return
 
       const picker = pickerRef.current
@@ -61,8 +63,6 @@ export const codeComponent: Component<CodeComponentProps> = ({
       if (picker.dataset.expanded !== 'true')
         return
 
-      const target = e.target as HTMLElement
-
       if (!picker.contains(target))
         setShowPicker(false)
     }
@@ -170,7 +170,7 @@ export const codeComponent: Component<CodeComponentProps> = ({
               oninput=${changeFilter}
               onkeydown=${onSearchKeydown}
             />
-            <div class="clear-icon" onmousedown=${onClear}>
+            <div class=${clsx('clear-icon', filter.length === 0 && 'hidden')} onmousedown=${onClear}>
               ${config?.clearSearchIcon?.()}
             </div>
           </div>

diff --git a/packages/components/src/code-block/view/style.ts b/packages/components/src/code-block/view/style.ts
@@ -31,4 +31,8 @@ export const style = css`
   :host .search-box .clear-icon {
     cursor: pointer;
   }
+
+  :host .hidden {
+    display: none;
+  }
 `