:bug: https://hacpai.com/article/1549638745630/comment/1576226645918?r=Vanessa

src/assets/scss/_toolbar.scss

@@ -13,13 +13,15 @@
 
     & > div {
       float: left;
-      & > button {
+
+      & > .vditor-tooltipped {
         border: 0;
         margin: 0;
         padding: 10px 5px;
         background-color: transparent;
         height: 35px;
         width: 25px;
+        box-sizing: border-box;
 
         &:focus {
           outline: none;
@@ -27,14 +29,6 @@
       }
     }
 
-    svg {
-      fill: currentColor;
-      display: inline-block;
-      stroke-width: 0;
-      stroke: currentColor;
-      width: 15px;
-      height: 15px;
-    }
 
     .vditor-tooltipped {
       color: $toolbarIcon;
@@ -44,29 +38,24 @@
       }
     }
 
-    label {
-      overflow: hidden;
-      position: relative;
-      height: 14px;
+    svg {
+      fill: currentColor;
+      display: inline-block;
+      stroke-width: 0;
+      stroke: currentColor;
       width: 15px;
-      display: block;
-      cursor: pointer;
-
-      svg {
-        position: absolute;
-        top: 0;
-        left: 0;
-      }
+      height: 15px;
+    }
 
-      input {
-        position: absolute;
-        width: 15px;
-        height: 15px;
-        top: 0;
-        left: 0;
-        opacity: .001;
-        overflow: hidden;
-      }
+    input {
+      position: absolute;
+      width: 25px;
+      height: 35px;
+      top: 0;
+      left: 0;
+      cursor: pointer;
+      opacity: .001;
+      overflow: hidden;
     }
   }
 
@@ -141,12 +130,14 @@
       border: 0;
       margin: 0;
       background-color: transparent;
+      overflow: hidden;
 
       &:focus {
         outline: none;
       }
 
-      &:hover {
+      &:hover .vditor-emojis__icon {
+        display: inline-block;
         transform: scale(1.2);
       }
     }

src/ts/toolbar/Emoji.ts

@@ -19,9 +19,10 @@ export class Emoji extends MenuItem {
             const emojiValue = vditor.options.hint.emoji[key];
             if (emojiValue.indexOf(".") > -1) {
                 commonEmojiHTML += `<button data-value=":${key}: " data-key=":${key}:"><img
-data-value=":${key}: " data-key=":${key}:" src="${emojiValue}"/></button>`;
+data-value=":${key}: " data-key=":${key}:" class="vditor-emojis__icon" src="${emojiValue}"/></button>`;
             } else {
-                commonEmojiHTML += `<button data-value="${emojiValue} " data-key="${key}">${emojiValue}</button>`;
+                commonEmojiHTML += `<button data-value="${emojiValue} "
+ data-key="${key}"><span class="vditor-emojis__icon">${emojiValue}</span></button>`;
             }
         });
 
@@ -51,14 +52,15 @@ data-value=":${key}: " data-key=":${key}:" src="${emojiValue}"/></button>`;
             }
 
             if (vditor.hint) {
-               vditor.hint.element.style.display = "none";
-           }
+                vditor.hint.element.style.display = "none";
+            }
             event.preventDefault();
         });
 
         emojiPanelElement.querySelectorAll(".vditor-emojis button").forEach((element) => {
             element.addEventListener(getEventName(), (event: Event) => {
-                const value =  (event.target as HTMLElement).getAttribute("data-value");
+                event.preventDefault();
+                const value = element.getAttribute("data-value");
                 if (vditor.currentMode === "wysiwyg") {
                     const range = getSelection().getRangeAt(0);
                     range.insertNode(document.createTextNode(value));
@@ -68,7 +70,6 @@ data-value=":${key}: " data-key=":${key}:" src="${emojiValue}"/></button>`;
                     insertText(vditor, value, "", true);
                 }
                 emojiPanelElement.style.display = "none";
-                event.preventDefault();
             });
             element.addEventListener("mouseover", (event: Event) => {
                 emojiPanelElement.querySelector(".vditor-emojis__tip").innerHTML =

src/ts/toolbar/MenuItem.ts

@@ -10,7 +10,7 @@ export class MenuItem {
     constructor(vditor: IVditor, menuItem: IMenuItem) {
         this.menuItem = menuItem;
         this.element = document.createElement("div");
-        const iconElement = document.createElement("button");
+        const iconElement = document.createElement(menuItem.name === "upload" ? "div" : "button");
         iconElement.setAttribute("data-type", menuItem.name);
         iconElement.className = `vditor-tooltipped vditor-tooltipped__${menuItem.tipPosition}`;
 

src/ts/toolbar/Upload.ts

@@ -5,11 +5,11 @@ import {MenuItem} from "./MenuItem";
 export class Upload extends MenuItem {
     constructor(vditor: IVditor, menuItem: IMenuItem) {
         super(vditor, menuItem);
-        let inputHTML = '<input multiple="multiple" type="file"></label>';
+        let inputHTML = '<input multiple="multiple" type="file">';
         if (vditor.options.upload.accept) {
-            inputHTML = `<input multiple="multiple" type="file" accept="${vditor.options.upload.accept}"></label>`;
+            inputHTML = `<input multiple="multiple" type="file" accept="${vditor.options.upload.accept}">`;
         }
-        this.element.children[0].innerHTML = `<label>${(menuItem.icon || uploadSVG)}${inputHTML}</label>`;
+        this.element.children[0].innerHTML = `${(menuItem.icon || uploadSVG)}${inputHTML}`;
         this._bindEvent(vditor);
     }