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

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

@@ -317,11 +317,12 @@
 .emojis {
   word-break: break-all;
   white-space: normal;
-  height: 50vh;
-  padding: 0;
   display: flex;
   flex-direction: column;
   max-height: 386px;
+  padding: 8px 0;
+  height: 100%;
+  box-sizing: border-box;
 
   &__item {
     font-size: 24px;

app/src/assets/scss/protyle/_toolbar.scss

@@ -55,7 +55,7 @@
     z-index: 5;
     overflow: auto;
     max-height: 402px;
-    box-sizing: border-box;
+    // 不能使用，否则 hint emoji 出现双滚动条 box-sizing: border-box;
     padding: 8px 0;
     display: flex;
     flex-direction: column;

app/src/boot/globalEvent/keydown.ts

@@ -1210,9 +1210,15 @@ export const windowKeyDown = (app: App, event: KeyboardEvent) => {
             return;
         }
         if (!window.siyuan.menus.menu.element.classList.contains("fn__none")) {
-            window.siyuan.menus.menu.remove();
-            return;
+            if (window.siyuan.dialogs.length > 0 &&
+                window.siyuan.menus.menu.element.style.zIndex < (window.siyuan.dialogs[0].element.querySelector(".b3-dialog") as HTMLElement).style.zIndex) {
+                // 窗口高于菜单时，先关闭窗口，如 av 修改列 icon 时
+            } else {
+                window.siyuan.menus.menu.remove();
+                return;
+            }
         }
+
         if (window.siyuan.dialogs.length > 0) {
             hideElements(["dialog"]);
             return;

app/src/dialog/index.ts

@@ -69,9 +69,12 @@ export class Dialog {
     }
 
     public destroy(options?: IObject) {
+        // av 修改列头emoji后点击关闭emoji图标
+        if ((this.element.querySelector(".b3-dialog") as HTMLElement).style.zIndex < window.siyuan.menus.menu.element.style.zIndex) {
+            // https://github.com/siyuan-note/siyuan/issues/6783
+            window.siyuan.menus.menu.remove();
+        }
         this.element.remove();
-        // https://github.com/siyuan-note/siyuan/issues/6783
-        window.siyuan.menus.menu.remove();
         if (this.destroyCallback) {
             this.destroyCallback(options);
         }

app/src/emoji/index.ts

@@ -8,6 +8,7 @@ import {getDockByType} from "../layout/util";
 import {getAllModels} from "../layout/getAll";
 /// #endif
 import {setNoteBook} from "../util/pathName";
+import {Dialog} from "../dialog";
 
 export const getRandomEmoji = () => {
     const emojis = window.siyuan.emojis[getRandom(0, window.siyuan.emojis.length - 1)];
@@ -189,9 +190,12 @@ export const addEmoji = (unicode: string) => {
     fetchPost("/api/setting/setEmoji", {emoji: window.siyuan.config.editor.emoji});
 };
 
-export const openEmojiPanel = (id: string, target: HTMLElement, isNotebook = false) => {
-    window.siyuan.menus.menu.remove();
-    window.siyuan.menus.menu.element.lastElementChild.innerHTML = `<div class="emojis" style="width: ${isMobile() ? "80vw" : "360px"}">
+export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", position: IPosition) => {
+    const dialog = new Dialog({
+        transparent: true,
+        width: isMobile() ? "80vw" : "360px",
+        height: "50vh",
+        content: `<div class="emojis" data-menu="true">
 <div class="fn__flex">
     <span class="fn__space"></span>
     <label class="b3-form__icon fn__flex-1">
@@ -217,12 +221,11 @@ export const openEmojiPanel = (id: string, target: HTMLElement, isNotebook = fal
     <div data-type="8" class="emojis__type ariaLabel" aria-label="${window.siyuan.emojis[7][window.siyuan.config.lang === "zh_CN" ? "title_zh_cn" : "title"]}">${unicode2Emoji("267e")}</div>
     <div data-type="9" class="emojis__type ariaLabel" aria-label="${window.siyuan.emojis[8][window.siyuan.config.lang === "zh_CN" ? "title_zh_cn" : "title"]}">${unicode2Emoji("1f6a9")}</div>
 </div>
-</div>`;
-    window.siyuan.menus.menu.element.querySelector(".emojis__item").classList.add("emojis__item--current");
-    const rect = target.getBoundingClientRect();
-    window.siyuan.menus.menu.popup({x: rect.left, y: rect.top + rect.height});
-    const inputElement = window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement;
-    const emojisContentElement = window.siyuan.menus.menu.element.querySelector(".emojis__panel");
+</div>`
+    });
+    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");
     inputElement.addEventListener("compositionend", () => {
         emojisContentElement.innerHTML = filterEmoji(inputElement.value);
         if (inputElement.value) {
@@ -231,11 +234,11 @@ export const openEmojiPanel = (id: string, target: HTMLElement, isNotebook = fal
             emojisContentElement.nextElementSibling.classList.remove("fn__none");
         }
         emojisContentElement.scrollTop = 0;
-        window.siyuan.menus.menu.element.querySelector(".emojis__item")?.classList.add("emojis__item--current");
+        dialog.element.querySelector(".emojis__item")?.classList.add("emojis__item--current");
         if (inputElement.value === "") {
-            lazyLoadEmoji(window.siyuan.menus.menu.element);
+            lazyLoadEmoji(dialog.element);
         }
-        lazyLoadEmojiImg(window.siyuan.menus.menu.element);
+        lazyLoadEmojiImg(dialog.element);
     });
     inputElement.addEventListener("input", (event: InputEvent) => {
         if (event.isComposing) {
@@ -248,11 +251,11 @@ export const openEmojiPanel = (id: string, target: HTMLElement, isNotebook = fal
             emojisContentElement.nextElementSibling.classList.remove("fn__none");
         }
         emojisContentElement.scrollTop = 0;
-        window.siyuan.menus.menu.element.querySelector(".emojis__item")?.classList.add("emojis__item--current");
+        dialog.element.querySelector(".emojis__item")?.classList.add("emojis__item--current");
         if (inputElement.value === "") {
-            lazyLoadEmoji(window.siyuan.menus.menu.element);
+            lazyLoadEmoji(dialog.element);
         }
-        lazyLoadEmojiImg(window.siyuan.menus.menu.element);
+        lazyLoadEmojiImg(dialog.element);
     });
     inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
         if (event.isComposing) {
@@ -261,31 +264,33 @@ export const openEmojiPanel = (id: string, target: HTMLElement, isNotebook = fal
         if (event.key.indexOf("Arrow") === -1 && event.key !== "Enter") {
             return;
         }
-        const currentElement = window.siyuan.menus.menu.element.querySelector(".emojis__item--current");
+        const currentElement = dialog.element.querySelector(".emojis__item--current");
         if (!currentElement) {
             return;
         }
         if (event.key === "Enter") {
             const unicode = currentElement.getAttribute("data-unicode");
-            if (isNotebook) {
+            if (type === "notebook") {
                 fetchPost("/api/notebook/setNotebookIcon", {
                     notebook: id,
                     icon: unicode
                 }, () => {
-                    window.siyuan.menus.menu.remove();
+                    dialog.destroy();
                     addEmoji(unicode);
                     updateFileTreeEmoji(unicode, id, "iconFilesRoot");
                 });
-            } else {
+            } else if (type === "doc") {
                 fetchPost("/api/attr/setBlockAttrs", {
                     id,
                     attrs: {"icon": unicode}
                 }, () => {
-                    window.siyuan.menus.menu.remove();
+                    dialog.destroy();
                     addEmoji(unicode);
                     updateFileTreeEmoji(unicode, id);
                     updateOutlineEmoji(unicode, id);
                 });
+            } else {
+
             }
             event.preventDefault();
             event.stopPropagation();
@@ -330,10 +335,10 @@ export const openEmojiPanel = (id: string, target: HTMLElement, isNotebook = fal
     if (!isMobile()) {
         inputElement.focus();
     }
-    lazyLoadEmoji(window.siyuan.menus.menu.element);
-    lazyLoadEmojiImg(window.siyuan.menus.menu.element);
+    lazyLoadEmoji(dialog.element);
+    lazyLoadEmojiImg(dialog.element);
     // 不能使用 getEventName 否则 https://github.com/siyuan-note/siyuan/issues/5472
-    window.siyuan.menus.menu.element.lastElementChild.firstElementChild.addEventListener("click", (event) => {
+    dialog.element.addEventListener("click", (event) => {
         const eventTarget = event.target as HTMLElement;
         const typeElement = hasClosestByClassName(eventTarget, "emojis__type");
         if (typeElement) {
@@ -359,23 +364,25 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
         }
         const iconElement = hasClosestByClassName(eventTarget, "block__icon");
         if (iconElement && iconElement.getAttribute("aria-label") === window.siyuan.languages.remove) {
-            if (isNotebook) {
+            if (type === "notebook") {
                 fetchPost("/api/notebook/setNotebookIcon", {
                     notebook: id,
                     icon: ""
                 }, () => {
-                    window.siyuan.menus.menu.remove();
+                    dialog.destroy();
                     updateFileTreeEmoji("", id, "iconFilesRoot");
                 });
-            } else {
+            } else if (type === "doc") {
                 fetchPost("/api/attr/setBlockAttrs", {
                     id: id,
                     attrs: {"icon": ""}
                 }, () => {
-                    window.siyuan.menus.menu.remove();
+                    dialog.destroy();
                     updateFileTreeEmoji("", id);
                     updateOutlineEmoji("", id);
                 });
+            } else {
+
             }
             return;
         }
@@ -388,7 +395,7 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
             } else {
                 unicode = getRandomEmoji();
             }
-            if (isNotebook) {
+            if (type === "notebook") {
                 fetchPost("/api/notebook/setNotebookIcon", {
                     notebook: id,
                     icon: unicode
@@ -396,7 +403,7 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
                     addEmoji(unicode);
                     updateFileTreeEmoji(unicode, id, "iconFilesRoot");
                 });
-            } else {
+            } else if (type === "doc") {
                 fetchPost("/api/attr/setBlockAttrs", {
                     id,
                     attrs: {"icon": unicode}
@@ -405,6 +412,8 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
                     updateFileTreeEmoji(unicode, id);
                     updateOutlineEmoji(unicode, id);
                 });
+            } else {
+
             }
             return;
         }

app/src/layout/dock/Files.ts

@@ -122,7 +122,11 @@ export class Files extends Model {
                 if (target.classList.contains("b3-list-item__icon")) {
                     event.preventDefault();
                     event.stopPropagation();
-                    openEmojiPanel(target.parentElement.getAttribute("data-url"), target, true);
+                    const rect = target.getBoundingClientRect();
+                    openEmojiPanel(target.parentElement.getAttribute("data-url"), "notebook", {
+                        x: rect.left,
+                        y: rect.bottom
+                    });
                     break;
                 } else if (type === "toggle") {
                     if (this.closeElement.classList.contains("fn__flex-1")) {
@@ -239,10 +243,17 @@ export class Files extends Model {
                     if (!event.metaKey && !event.ctrlKey && target.classList.contains("b3-list-item__icon") && window.siyuan.config.system.container !== "ios") {
                         event.preventDefault();
                         event.stopPropagation();
+                        const rect = target.getBoundingClientRect();
                         if (target.parentElement.getAttribute("data-type") === "navigation-file") {
-                            openEmojiPanel(target.parentElement.getAttribute("data-node-id"), target);
+                            openEmojiPanel(target.parentElement.getAttribute("data-node-id"), "doc", {
+                                x: rect.left,
+                                y: rect.bottom
+                            });
                         } else {
-                            openEmojiPanel(target.parentElement.parentElement.getAttribute("data-url"), target, true);
+                            openEmojiPanel(target.parentElement.parentElement.getAttribute("data-url"), "notebook", {
+                                x: rect.left,
+                                y: rect.bottom
+                            });
                         }
                         break;
                     } else if (!event.metaKey && !event.ctrlKey && target.classList.contains("b3-list-item__toggle")) {
@@ -260,7 +271,7 @@ export class Files extends Model {
                                 newFile({
                                     app: options.app,
                                     notebookId,
-                                    currentPath:pathString,
+                                    currentPath: pathString,
                                     useSavePath: false
                                 });
                             } else if (type === "more-root") {

app/src/protyle/header/Background.ts

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

app/src/protyle/hint/index.ts

@@ -368,7 +368,7 @@ ${genHintItemHTML(item)}
             }
             lazyLoadEmojiImg(panelElement);
         } else {
-            this.element.innerHTML = `<div class="emojis">
+            this.element.innerHTML = `<div style="padding: 0" class="emojis">
 <div class="emojis__panel">${filterEmoji(value, 256)}</div>
 <div class="fn__flex${value ? " fn__none" : ""}">
     <button data-type="0" class="emojis__type ariaLabel" aria-label="${window.siyuan.languages.recentEmoji}">${unicode2Emoji("2b50")}</button>

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

@@ -387,7 +387,8 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
         }]);
     });
     menu.addItem({
-        icon: getColIconByType(type),
+        iconHTML: `<span style="align-self: center;margin-right: 8px;" class="block__icon block__icon--show" data-type="update-icon"><svg><use xlink:href="#${getColIconByType(type)}"></use></svg></span>`,
+        type: "readonly",
         label: `<input style="margin: 4px 0" class="b3-text-field" type="text" value="${cellElement.innerText.trim()}">`,
         bind(element) {
             element.querySelector("input").addEventListener("keydown", (event: KeyboardEvent) => {

app/src/protyle/util/insertHTML.ts

@@ -154,7 +154,7 @@ export const insertHTML = (html: string, protyle: IProtyle, isBlock = false,
             if (editWbrElement && editableElement && !trimStartText.endsWith("\n")) {
                 // 数学公式后无换行，后期渲染后添加导致 rang 错误，中文输入错误 https://github.com/siyuan-note/siyuan/issues/9054
                 const previousElement = hasPreviousSibling(editWbrElement) as HTMLElement;
-                if (previousElement && previousElement.nodeType !== 3 && previousElement.dataset.type.indexOf("inline-math") > -1 &&
+                if (previousElement && previousElement.nodeType !== 3 && (previousElement.dataset.type || "").indexOf("inline-math") > -1 &&
                     !hasNextSibling(editWbrElement)) {
                     editWbrElement.insertAdjacentText("afterend", "\n");
                 }