:art: fix https://github.com/siyuan-note/siyuan/issues/9133

app/src/emoji/index.ts

@@ -278,7 +278,7 @@ export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", posi
         if (event.key.indexOf("Arrow") === -1 && event.key !== "Enter") {
             return;
         }
-        const currentElement = dialog.element.querySelector(".emojis__item--current");
+        const currentElement: HTMLElement = dialog.element.querySelector(".emojis__item--current");
         if (!currentElement) {
             return;
         }
@@ -311,7 +311,7 @@ export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", posi
             return;
         }
         let newCurrentElement: HTMLElement;
-        if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+        if (event.key === "ArrowLeft") {
             if (currentElement.previousElementSibling) {
                 currentElement.classList.remove("emojis__item--current");
                 newCurrentElement = currentElement.previousElementSibling as HTMLElement;
@@ -323,7 +323,7 @@ export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", posi
                 event.preventDefault();
                 event.stopPropagation();
             }
-        } else if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+        } else if (event.key === "ArrowRight") {
             if (currentElement.nextElementSibling) {
                 currentElement.classList.remove("emojis__item--current");
                 newCurrentElement = currentElement.nextElementSibling as HTMLElement;
@@ -335,12 +335,48 @@ export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", posi
                 event.preventDefault();
                 event.stopPropagation();
             }
+        } else if (event.key === "ArrowDown") {
+            if (!currentElement.nextElementSibling) {
+                const nextContentElement = currentElement.parentElement.nextElementSibling?.nextElementSibling;
+                if (nextContentElement) {
+                    newCurrentElement = nextContentElement.firstElementChild as HTMLElement;
+                    currentElement.classList.remove("emojis__item--current");
+                }
+            } else {
+                currentElement.classList.remove("emojis__item--current");
+                let counter = Math.floor(currentElement.parentElement.clientWidth / (currentElement.clientWidth + 2));
+                newCurrentElement = currentElement;
+                while (newCurrentElement.nextElementSibling && counter > 0) {
+                    newCurrentElement = newCurrentElement.nextElementSibling as HTMLElement;
+                    counter--;
+                }
+            }
+            event.preventDefault();
+            event.stopPropagation();
+        } else if (event.key === "ArrowUp") {
+            if (!currentElement.previousElementSibling) {
+                const prevContentElement = currentElement.parentElement.previousElementSibling?.previousElementSibling;
+                if (prevContentElement) {
+                    newCurrentElement = prevContentElement.lastElementChild as HTMLElement;
+                    currentElement.classList.remove("emojis__item--current");
+                }
+            } else {
+                currentElement.classList.remove("emojis__item--current");
+                let counter = Math.floor(currentElement.parentElement.clientWidth / (currentElement.clientWidth + 2));
+                newCurrentElement = currentElement;
+                while (newCurrentElement.previousElementSibling && counter > 0) {
+                    newCurrentElement = newCurrentElement.previousElementSibling as HTMLElement;
+                    counter--;
+                }
+            }
+            event.preventDefault();
+            event.stopPropagation();
         }
         if (newCurrentElement) {
             newCurrentElement.classList.add("emojis__item--current");
             const inputHeight = inputElement.clientHeight + 6;
             if (newCurrentElement.offsetTop - inputHeight < emojisContentElement.scrollTop) {
-                emojisContentElement.scrollTop = newCurrentElement.offsetTop - inputHeight;
+                emojisContentElement.scrollTop = newCurrentElement.offsetTop - inputHeight - 6;
             } else if (newCurrentElement.offsetTop - inputHeight - emojisContentElement.clientHeight + newCurrentElement.clientHeight > emojisContentElement.scrollTop) {
                 emojisContentElement.scrollTop = newCurrentElement.offsetTop - inputHeight - emojisContentElement.clientHeight + newCurrentElement.clientHeight;
             }

app/src/protyle/breadcrumb/index.ts

@@ -41,7 +41,7 @@ export class Breadcrumb {
     constructor(protyle: IProtyle) {
         const element = document.createElement("div");
         element.className = "protyle-breadcrumb";
-        let padHTML = ""
+        let padHTML = "";
         /// #if BROWSER
         if (isIPad() || isInAndroid()) {
             padHTML = `<button class="block__icon fn__flex-center ariaLabel" disabled aria-label="${window.siyuan.languages.undo}" data-type="undo"><svg><use xlink:href="#iconUndo"></use></svg></button>

app/src/protyle/hint/index.ts

@@ -357,7 +357,7 @@ ${genHintItemHTML(item)}
             }
             lazyLoadEmojiImg(panelElement);
         } else {
-            this.element.innerHTML = `<div style="padding: 0;${value ? "" : "height:402px"}" class="emojis">
+            this.element.innerHTML = `<div style="padding: 0;max-height:402px" 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>
@@ -835,12 +835,12 @@ ${genHintItemHTML(item)}
             return true;
         }
         if (isEmojiPanel) {
-            const currentElement = this.element.querySelector(".emojis__item--current");
+            const currentElement: HTMLElement = this.element.querySelector(".emojis__item--current");
             if (!currentElement) {
                 return false;
             }
             let newCurrentElement: HTMLElement;
-            if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+            if (event.key === "ArrowLeft") {
                 if (currentElement.previousElementSibling) {
                     currentElement.classList.remove("emojis__item--current");
                     newCurrentElement = currentElement.previousElementSibling as HTMLElement;
@@ -848,7 +848,7 @@ ${genHintItemHTML(item)}
                     currentElement.classList.remove("emojis__item--current");
                     newCurrentElement = currentElement.parentElement.previousElementSibling.previousElementSibling.lastElementChild as HTMLElement;
                 }
-            } else if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+            } else if (event.key === "ArrowRight") {
                 if (currentElement.nextElementSibling) {
                     currentElement.classList.remove("emojis__item--current");
                     newCurrentElement = currentElement.nextElementSibling as HTMLElement;
@@ -856,15 +856,53 @@ ${genHintItemHTML(item)}
                     currentElement.classList.remove("emojis__item--current");
                     newCurrentElement = currentElement.parentElement.nextElementSibling.nextElementSibling.firstElementChild as HTMLElement;
                 }
+            } else if (event.key === "ArrowDown") {
+                if (!currentElement.nextElementSibling) {
+                    const nextContentElement = currentElement.parentElement.nextElementSibling?.nextElementSibling;
+                    if (nextContentElement) {
+                        newCurrentElement = nextContentElement.firstElementChild as HTMLElement;
+                        currentElement.classList.remove("emojis__item--current");
+                    }
+                } else {
+                    currentElement.classList.remove("emojis__item--current");
+                    let counter = Math.floor(currentElement.parentElement.clientWidth / (currentElement.clientWidth + 2));
+                    newCurrentElement = currentElement;
+                    while (newCurrentElement.nextElementSibling && counter > 0) {
+                        newCurrentElement = newCurrentElement.nextElementSibling as HTMLElement;
+                        counter--;
+                    }
+                }
+                event.preventDefault();
+                event.stopPropagation();
+            } else if (event.key === "ArrowUp") {
+                if (!currentElement.previousElementSibling) {
+                    const prevContentElement = currentElement.parentElement.previousElementSibling?.previousElementSibling;
+                    if (prevContentElement) {
+                        newCurrentElement = prevContentElement.lastElementChild as HTMLElement;
+                        currentElement.classList.remove("emojis__item--current");
+                    }
+                } else {
+                    currentElement.classList.remove("emojis__item--current");
+                    let counter = Math.floor(currentElement.parentElement.clientWidth / (currentElement.clientWidth + 2));
+                    newCurrentElement = currentElement;
+                    while (newCurrentElement.previousElementSibling && counter > 0) {
+                        newCurrentElement = newCurrentElement.previousElementSibling as HTMLElement;
+                        counter--;
+                    }
+                }
+                event.preventDefault();
+                event.stopPropagation();
             }
             if (newCurrentElement) {
                 newCurrentElement.classList.add("emojis__item--current");
-                const topHeight = 4;
                 const emojisContentElement = this.element.querySelector(".emojis__panel");
-                if (newCurrentElement.offsetTop - topHeight < emojisContentElement.scrollTop) {
-                    emojisContentElement.scrollTop = newCurrentElement.offsetTop - topHeight;
-                } else if (newCurrentElement.offsetTop - topHeight - emojisContentElement.clientHeight + newCurrentElement.clientHeight > emojisContentElement.scrollTop) {
-                    emojisContentElement.scrollTop = newCurrentElement.offsetTop - topHeight - emojisContentElement.clientHeight + newCurrentElement.clientHeight;
+                if (newCurrentElement.offsetTop - 8 < emojisContentElement.scrollTop) {
+                    emojisContentElement.scrollTop = newCurrentElement.offsetTop - 8;
+                } else {
+                    const topHeight = emojisContentElement.nextElementSibling.classList.contains("fn__none") ? 8 : 36;
+                    if (newCurrentElement.offsetTop + topHeight - this.element.clientHeight + newCurrentElement.clientHeight > emojisContentElement.scrollTop) {
+                        emojisContentElement.scrollTop = newCurrentElement.offsetTop + topHeight - this.element.clientHeight + newCurrentElement.clientHeight;
+                    }
                 }
             }
             event.preventDefault();

app/src/protyle/undo/index.ts

@@ -33,7 +33,7 @@ export class Undo {
         this.hasUndo = true;
         this.redoStack.push(state);
         if (protyle.breadcrumb) {
-            const undoElement = protyle.breadcrumb.element.parentElement.querySelector('[data-type="undo"]')
+            const undoElement = protyle.breadcrumb.element.parentElement.querySelector('[data-type="undo"]');
             if (undoElement) {
                 if (this.undoStack.length === 0) {
                     undoElement.setAttribute("disabled", "true");
@@ -54,7 +54,7 @@ export class Undo {
         this.render(protyle, state, true);
         this.undoStack.push(state);
         if (protyle.breadcrumb) {
-            const redoElement = protyle.breadcrumb.element.parentElement.querySelector('[data-type="redo"]')
+            const redoElement = protyle.breadcrumb.element.parentElement.querySelector('[data-type="redo"]');
             if (redoElement) {
                 protyle.breadcrumb.element.parentElement.querySelector('[data-type="undo"]').removeAttribute("disabled");
                 if (this.redoStack.length === 0) {
@@ -89,7 +89,7 @@ export class Undo {
             this.redoStack = [];
             this.hasUndo = false;
             if (protyle.breadcrumb) {
-                const redoElement = protyle.breadcrumb.element.parentElement.querySelector('[data-type="redo"]')
+                const redoElement = protyle.breadcrumb.element.parentElement.querySelector('[data-type="redo"]');
                 if (redoElement) {
                     redoElement.setAttribute("disabled", "true");
                 }
@@ -110,7 +110,7 @@ export class Undo {
             this.hasUndo = false;
         }
         if (protyle.breadcrumb) {
-            const undoElement = protyle.breadcrumb.element.parentElement.querySelector('[data-type="undo"]')
+            const undoElement = protyle.breadcrumb.element.parentElement.querySelector('[data-type="undo"]');
             if (undoElement) {
                 undoElement.removeAttribute("disabled");
             }

app/src/protyle/util/onGet.ts

@@ -314,12 +314,12 @@ export const disabledProtyle = (protyle: IProtyle) => {
     if (protyle.breadcrumb) {
         protyle.breadcrumb.element.parentElement.querySelector('[data-type="readonly"] use').setAttribute("xlink:href", "#iconLock");
         protyle.breadcrumb.element.parentElement.querySelector('[data-type="readonly"]').setAttribute("aria-label", window.siyuan.config.editor.readOnly ? window.siyuan.languages.tempUnlock : window.siyuan.languages.unlockEdit);
-        const undoElement = protyle.breadcrumb.element.parentElement.querySelector('[data-type="undo"]')
+        const undoElement = protyle.breadcrumb.element.parentElement.querySelector('[data-type="undo"]');
         if (undoElement && !undoElement.classList.contains("fn__none")) {
-            undoElement.classList.add("fn__none")
-            protyle.breadcrumb.element.parentElement.querySelector('[data-type="redo"]').classList.add("fn__none")
-            protyle.breadcrumb.element.parentElement.querySelector('[data-type="indent"]').classList.add("fn__none")
-            protyle.breadcrumb.element.parentElement.querySelector('[data-type="outdent"]').classList.add("fn__none")
+            undoElement.classList.add("fn__none");
+            protyle.breadcrumb.element.parentElement.querySelector('[data-type="redo"]').classList.add("fn__none");
+            protyle.breadcrumb.element.parentElement.querySelector('[data-type="indent"]').classList.add("fn__none");
+            protyle.breadcrumb.element.parentElement.querySelector('[data-type="outdent"]').classList.add("fn__none");
         }
     }
     hideTooltip();
@@ -364,12 +364,12 @@ export const enableProtyle = (protyle: IProtyle) => {
     if (protyle.breadcrumb) {
         protyle.breadcrumb.element.parentElement.querySelector('[data-type="readonly"] use').setAttribute("xlink:href", "#iconUnlock");
         protyle.breadcrumb.element.parentElement.querySelector('[data-type="readonly"]').setAttribute("aria-label", window.siyuan.config.editor.readOnly ? window.siyuan.languages.cancelTempUnlock : window.siyuan.languages.lockEdit);
-        const undoElement = protyle.breadcrumb.element.parentElement.querySelector('[data-type="undo"]')
+        const undoElement = protyle.breadcrumb.element.parentElement.querySelector('[data-type="undo"]');
         if (undoElement && undoElement.classList.contains("fn__none")) {
-            undoElement.classList.remove("fn__none")
-            protyle.breadcrumb.element.parentElement.querySelector('[data-type="redo"]').classList.remove("fn__none")
-            protyle.breadcrumb.element.parentElement.querySelector('[data-type="indent"]').classList.remove("fn__none")
-            protyle.breadcrumb.element.parentElement.querySelector('[data-type="outdent"]').classList.remove("fn__none")
+            undoElement.classList.remove("fn__none");
+            protyle.breadcrumb.element.parentElement.querySelector('[data-type="redo"]').classList.remove("fn__none");
+            protyle.breadcrumb.element.parentElement.querySelector('[data-type="indent"]').classList.remove("fn__none");
+            protyle.breadcrumb.element.parentElement.querySelector('[data-type="outdent"]').classList.remove("fn__none");
         }
     }
     hideTooltip();

app/src/protyle/wysiwyg/index.ts

@@ -1609,13 +1609,13 @@ export class WYSIWYG {
             }
             /// #if BROWSER && !MOBILE
             if (protyle.breadcrumb) {
-                const indentElement = protyle.breadcrumb.element.parentElement.querySelector('[data-type="indent"]')
+                const indentElement = protyle.breadcrumb.element.parentElement.querySelector('[data-type="indent"]');
                 if (indentElement && getSelection().rangeCount > 0) {
                     setTimeout(() => {
                         const newRange = getSelection().getRangeAt(0);
                         const blockElement = hasClosestBlock(newRange.startContainer);
                         if (!blockElement) {
-                            return
+                            return;
                         }
                         const outdentElement = protyle.breadcrumb.element.parentElement.querySelector('[data-type="outdent"]');
                         if (blockElement.parentElement.classList.contains("li")) {
@@ -1847,7 +1847,7 @@ export class WYSIWYG {
                         countSelectWord(range, protyle.block.rootID);
                     }
                     if (protyle.breadcrumb) {
-                        const indentElement = protyle.breadcrumb.element.parentElement.querySelector('[data-type="indent"]')
+                        const indentElement = protyle.breadcrumb.element.parentElement.querySelector('[data-type="indent"]');
                         if (indentElement) {
                             const outdentElement = protyle.breadcrumb.element.parentElement.querySelector('[data-type="outdent"]');
                             if (nodeElement.parentElement.classList.contains("li")) {
@@ -2327,14 +2327,14 @@ export class WYSIWYG {
             if (!event.shiftKey && !ctrlIsPressed && emojiElement) {
                 const nodeElement = hasClosestBlock(emojiElement);
                 if (nodeElement) {
-                    const emojiRect = emojiElement.getBoundingClientRect()
+                    const emojiRect = emojiElement.getBoundingClientRect();
                     openEmojiPanel("", "av", {
                         x: emojiRect.left,
                         y: emojiRect.bottom,
                         h: emojiRect.height,
                         w: emojiRect.width
                     }, (unicode) => {
-                        emojiElement.insertAdjacentHTML("afterend", "<wbr>")
+                        emojiElement.insertAdjacentHTML("afterend", "<wbr>");
                         const oldHTML = nodeElement.outerHTML;
                         let emojiHTML;
                         if (unicode.indexOf(".") > -1) {