:sparkles: https://github.com/siyuan-note/siyuan/issues/9304

app/src/assets/scss/component/_menu.scss

@@ -319,14 +319,13 @@
   white-space: normal;
   display: flex;
   flex-direction: column;
-  max-height: 386px;
   padding: 8px 0;
   height: 100%;
   box-sizing: border-box;
 
   &__item {
     font-size: 24px;
-    line-height: 24px;
+    line-height: 28px;
     font-family: var(--b3-font-family-emoji);
     text-align: center;
     height: 28px;
@@ -336,7 +335,7 @@
     transition: var(--b3-transition);
     background-color: transparent;
     border: 0;
-    margin: 0;
+    margin: 1px;
     overflow: hidden;
 
     img, svg {

app/src/dialog/index.ts

@@ -21,6 +21,7 @@ export class Dialog {
         height?: string,
         destroyCallback?: (options?: IObject) => void,
         disableClose?: boolean,
+        hideCloseIcon?: boolean,
         disableAnimation?: boolean,
         resizeCallback?: (type: string) => void
     }) {
@@ -33,7 +34,7 @@ export class Dialog {
         this.element.innerHTML = `<div class="b3-dialog" style="z-index: ${++window.siyuan.zIndex};">
 <div class="b3-dialog__scrim"${options.transparent ? 'style="background-color:transparent"' : ""}></div>
 <div class="b3-dialog__container" style="width:${options.width || "auto"};height:${options.height || "auto"}">
-  <svg ${(isMobile() && options.title) ? 'style="top:0;right:0;"' : ""} class="b3-dialog__close${this.disableClose ? " fn__none" : ""}"><use xlink:href="#iconCloseRound"></use></svg>
+  <svg ${(isMobile() && options.title) ? 'style="top:0;right:0;"' : ""} class="b3-dialog__close${(this.disableClose||options.hideCloseIcon) ? " fn__none" : ""}"><use xlink:href="#iconCloseRound"></use></svg>
   <div class="resize__move b3-dialog__header${options.title ? "" : " fn__none"}" onselectstart="return false;">${options.title || ""}</div>
   <div class="b3-dialog__body">${options.content}</div>
   <div class="resize__rd"></div><div class="resize__ld"></div><div class="resize__lt"></div><div class="resize__rt"></div><div class="resize__r"></div><div class="resize__d"></div><div class="resize__t"></div><div class="resize__l"></div>
@@ -45,8 +46,6 @@ export class Dialog {
             }
             event.preventDefault();
             event.stopPropagation();
-            // https://ld246.com/article/1657969292700/comment/1658147006669#comments
-            window.siyuan.menus.menu.remove();
         });
         if (!this.disableClose) {
             this.element.querySelector(".b3-dialog__close").addEventListener("click", (event) => {

app/src/emoji/index.ts

@@ -9,6 +9,7 @@ import {getAllModels} from "../layout/getAll";
 /// #endif
 import {setNoteBook} from "../util/pathName";
 import {Dialog} from "../dialog";
+import {setPosition} from "../util/setPosition";
 
 export const getRandomEmoji = () => {
     const emojis = window.siyuan.emojis[getRandom(0, window.siyuan.emojis.length - 1)];
@@ -191,8 +192,14 @@ export const addEmoji = (unicode: string) => {
 };
 
 export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", position: IPosition) => {
+    if (type !== "av") {
+        window.siyuan.menus.menu.remove();
+    } else {
+        window.siyuan.menus.menu.removeScrollEvent();
+    }
     const dialog = new Dialog({
         transparent: true,
+        hideCloseIcon: true,
         width: isMobile() ? "80vw" : "360px",
         height: "50vh",
         content: `<div class="emojis" data-menu="true">
@@ -223,6 +230,9 @@ export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", posi
 </div>
 </div>`
     });
+    (dialog.element.firstElementChild as HTMLElement).style.justifyContent = "inherit";
+    (dialog.element.firstElementChild as HTMLElement).style.alignItems = "inherit";
+    setPosition(dialog.element.querySelector(".b3-dialog__container"), position.x, position.y, position.h, position.w);
     dialog.element.querySelector(".emojis__item").classList.add("emojis__item--current");
     const inputElement = dialog.element.querySelector(".b3-text-field") as HTMLInputElement;
     const emojisContentElement = dialog.element.querySelector(".emojis__panel");
@@ -391,8 +401,11 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
             let unicode = "";
             if (emojiElement) {
                 unicode = emojiElement.getAttribute("data-unicode");
-                window.siyuan.menus.menu.remove();
+                if (type !== "av") {
+                    dialog.destroy()
+                }
             } else {
+                // 随机
                 unicode = getRandomEmoji();
             }
             if (type === "notebook") {

app/src/layout/dock/Files.ts

@@ -125,7 +125,9 @@ export class Files extends Model {
                     const rect = target.getBoundingClientRect();
                     openEmojiPanel(target.parentElement.getAttribute("data-url"), "notebook", {
                         x: rect.left,
-                        y: rect.bottom
+                        y: rect.bottom,
+                        h: rect.height,
+                        w: rect.width,
                     });
                     break;
                 } else if (type === "toggle") {
@@ -247,12 +249,16 @@ export class Files extends Model {
                         if (target.parentElement.getAttribute("data-type") === "navigation-file") {
                             openEmojiPanel(target.parentElement.getAttribute("data-node-id"), "doc", {
                                 x: rect.left,
-                                y: rect.bottom
+                                y: rect.bottom,
+                                h: rect.height,
+                                w: rect.width,
                             });
                         } else {
                             openEmojiPanel(target.parentElement.parentElement.getAttribute("data-url"), "notebook", {
                                 x: rect.left,
-                                y: rect.bottom
+                                y: rect.bottom,
+                                h: rect.height,
+                                w: rect.width,
                             });
                         }
                         break;

app/src/menus/Menu.ts

@@ -92,17 +92,16 @@ export class Menu {
         return menuItem.element;
     }
 
+    public removeScrollEvent() {
+        window.removeEventListener(isMobile() ? "touchmove" : this.wheelEvent, this.preventDefault, false);
+    }
+
     public remove() {
         if (window.siyuan.menus.menu.removeCB) {
             window.siyuan.menus.menu.removeCB();
             window.siyuan.menus.menu.removeCB = undefined;
         }
-        if (isMobile()) {
-            window.removeEventListener("touchmove", this.preventDefault, false);
-        } else {
-            window.removeEventListener(this.wheelEvent, this.preventDefault, false);
-        }
-
+        this.removeScrollEvent();
         this.element.firstElementChild.classList.add("fn__none");
         this.element.lastElementChild.innerHTML = "";
         this.element.classList.add("fn__none");
@@ -129,11 +128,7 @@ export class Menu {
         if (this.element.lastElementChild.innerHTML === "") {
             return;
         }
-        if (isMobile()) {
-            window.addEventListener("touchmove", this.preventDefault, {passive: false});
-        } else {
-            window.addEventListener(this.wheelEvent, this.preventDefault, {passive: false});
-        }
+        window.addEventListener(isMobile() ? "touchmove" : this.wheelEvent, this.preventDefault, {passive: false});
         this.element.style.zIndex = (++window.siyuan.zIndex).toString();
         this.element.classList.remove("fn__none");
         setPosition(this.element, options.x - (options.isLeft ? window.siyuan.menus.menu.element.clientWidth : 0), options.y, options.h, options.w);

app/src/protyle/header/Background.ts

@@ -178,7 +178,12 @@ export class Background {
                     break;
                 } else if (type === "open-emoji") {
                     const rect = this.iconElement.getBoundingClientRect();
-                    openEmojiPanel(protyle.block.rootID, "doc", {x: rect.left, y: rect.bottom});
+                    openEmojiPanel(protyle.block.rootID, "doc", {
+                        x: rect.left,
+                        y: rect.bottom,
+                        h: rect.height,
+                        w: rect.width
+                    });
                     event.preventDefault();
                     event.stopPropagation();
                     break;

app/src/protyle/render/av/col.ts

@@ -391,6 +391,18 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
         type: "readonly",
         label: `<input style="margin: 4px 0" class="b3-text-field" type="text" value="${cellElement.innerText.trim()}">`,
         bind(element) {
+            const iconElement = element.querySelector(".block__icon") as HTMLElement
+            iconElement.addEventListener("click", (event) => {
+                const rect = iconElement.getBoundingClientRect();
+                openEmojiPanel("", "av", {
+                    x: rect.left,
+                    y: rect.bottom,
+                    h: rect.height,
+                    w: rect.width
+                });
+                event.preventDefault();
+                event.stopPropagation();
+            });
             element.querySelector("input").addEventListener("keydown", (event: KeyboardEvent) => {
                 if (event.isComposing) {
                     return;

app/src/protyle/wysiwyg/index.ts

@@ -1903,8 +1903,9 @@ export class WYSIWYG {
                 const rect = menuElement.getBoundingClientRect();
                 window.siyuan.menus.menu.popup({
                     x: rect.left,
-                    y: rect.top
-                }, true);
+                    y: rect.top,
+                    isLeft: true
+                });
                 /// #endif
                 event.stopPropagation();
                 event.preventDefault();