From a655a02ce4b0b71d039e62d78b7f5cbb3eb5ce79 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Sat, 3 Feb 2024 12:32:56 +0800 Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/9133 --- app/src/emoji/index.ts | 44 ++++++++++++++++++++--- app/src/protyle/breadcrumb/index.ts | 2 +- app/src/protyle/hint/index.ts | 56 ++++++++++++++++++++++++----- app/src/protyle/undo/index.ts | 8 ++--- app/src/protyle/util/onGet.ts | 20 +++++------ app/src/protyle/wysiwyg/index.ts | 10 +++--- 6 files changed, 107 insertions(+), 33 deletions(-) diff --git a/app/src/emoji/index.ts b/app/src/emoji/index.ts index 0d70453ce..57f51fcd1 100644 --- a/app/src/emoji/index.ts +++ b/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; } diff --git a/app/src/protyle/breadcrumb/index.ts b/app/src/protyle/breadcrumb/index.ts index aad2b2de0..350c45fbd 100644 --- a/app/src/protyle/breadcrumb/index.ts +++ b/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 = ` diff --git a/app/src/protyle/hint/index.ts b/app/src/protyle/hint/index.ts index 24991bf0e..170a322d5 100644 --- a/app/src/protyle/hint/index.ts +++ b/app/src/protyle/hint/index.ts @@ -357,7 +357,7 @@ ${genHintItemHTML(item)} } lazyLoadEmojiImg(panelElement); } else { - this.element.innerHTML = `
+ this.element.innerHTML = `
${filterEmoji(value, 256)}
@@ -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(); diff --git a/app/src/protyle/undo/index.ts b/app/src/protyle/undo/index.ts index 673779697..11d85846e 100644 --- a/app/src/protyle/undo/index.ts +++ b/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"); } diff --git a/app/src/protyle/util/onGet.ts b/app/src/protyle/util/onGet.ts index dd25c7793..ecd66e159 100644 --- a/app/src/protyle/util/onGet.ts +++ b/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(); diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index ab5497466..8a273ffb0 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/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", "") + emojiElement.insertAdjacentHTML("afterend", ""); const oldHTML = nodeElement.outerHTML; let emojiHTML; if (unicode.indexOf(".") > -1) {