diff --git a/app/src/assets/scss/component/_menu.scss b/app/src/assets/scss/component/_menu.scss index d4315d0bf..275df69a8 100644 --- a/app/src/assets/scss/component/_menu.scss +++ b/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; diff --git a/app/src/assets/scss/protyle/_toolbar.scss b/app/src/assets/scss/protyle/_toolbar.scss index ab0980674..50919530d 100644 --- a/app/src/assets/scss/protyle/_toolbar.scss +++ b/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; diff --git a/app/src/boot/globalEvent/keydown.ts b/app/src/boot/globalEvent/keydown.ts index 7992ffe59..ffa5f5467 100644 --- a/app/src/boot/globalEvent/keydown.ts +++ b/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; diff --git a/app/src/dialog/index.ts b/app/src/dialog/index.ts index 3807ea9d2..8309e813f 100644 --- a/app/src/dialog/index.ts +++ b/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); } diff --git a/app/src/emoji/index.ts b/app/src/emoji/index.ts index 61d9d008f..c0d624c7e 100644 --- a/app/src/emoji/index.ts +++ b/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 = `
+export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", position: IPosition) => { + const dialog = new Dialog({ + transparent: true, + width: isMobile() ? "80vw" : "360px", + height: "50vh", + content: `
-
`; - 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"); +
` + }); + 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)}`; } 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)}`; } else { unicode = getRandomEmoji(); } - if (isNotebook) { + if (type === "notebook") { fetchPost("/api/notebook/setNotebookIcon", { notebook: id, icon: unicode @@ -396,7 +403,7 @@ ${unicode2Emoji(emoji.unicode)}`; 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)}`; updateFileTreeEmoji(unicode, id); updateOutlineEmoji(unicode, id); }); + } else { + } return; } diff --git a/app/src/layout/dock/Files.ts b/app/src/layout/dock/Files.ts index 4b5e50a75..fb5735d7c 100644 --- a/app/src/layout/dock/Files.ts +++ b/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") { diff --git a/app/src/protyle/header/Background.ts b/app/src/protyle/header/Background.ts index e01a823f1..81956c152 100644 --- a/app/src/protyle/header/Background.ts +++ b/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; diff --git a/app/src/protyle/hint/index.ts b/app/src/protyle/hint/index.ts index ef76b4ad8..ed9193b60 100644 --- a/app/src/protyle/hint/index.ts +++ b/app/src/protyle/hint/index.ts @@ -368,7 +368,7 @@ ${genHintItemHTML(item)} } lazyLoadEmojiImg(panelElement); } else { - this.element.innerHTML = `
+ this.element.innerHTML = `
${filterEmoji(value, 256)}
diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts index d99ba2562..02a36c927 100644 --- a/app/src/protyle/render/av/col.ts +++ b/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: ``, + type: "readonly", label: ``, bind(element) { element.querySelector("input").addEventListener("keydown", (event: KeyboardEvent) => { diff --git a/app/src/protyle/util/insertHTML.ts b/app/src/protyle/util/insertHTML.ts index f4b46a889..bf70a7e29 100644 --- a/app/src/protyle/util/insertHTML.ts +++ b/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"); }