Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-01-06 16:58:49 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨 fix https://github.com/siyuan-note/siyuan/issues/7319

Browse source
This commit is contained in:
Vanessa 2023-02-10 15:15:02 +08:00
parent 929a25a783
commit e9c3cd4a17
2 changed files with 27 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

30
app/src/emoji/index.ts
View file

@ -17,13 +17,13 @@ export const getRandomEmoji = () => {
return emojis.items[getRandom(0, emojis.items.length - 1)].unicode;
};
export const unicode2Emoji = (unicode: string, assic = false, className = "", needSpan = false) => {
export const unicode2Emoji = (unicode: string, assic = false, className = "", needSpan = false, lazy = false) => {
if (!unicode) {
return "";
}
let emoji = "";
if (unicode.indexOf(".") > -1) {
emoji = `<img class="${className}" src="/emojis/${unicode}"/>`;
emoji = `<img class="${className}" ${lazy ? "data-" : ""}src="/emojis/${unicode}"/>`;
} else if (isMobile() || window.siyuan.config.appearance.nativeEmoji || assic) {
try {
unicode.split("-").forEach(item => {
@ -66,6 +66,21 @@ ${unicode2Emoji(emoji.unicode, assic)}</button>`;
});
};
export const lazyLoadEmojiImg = (element: Element) => {
const emojiIntersectionObserver = new IntersectionObserver((entries) => {
entries.forEach((entrie: IntersectionObserverEntry & { target: HTMLImageElement }) => {
const src = entrie.target.getAttribute("data-src");
if ((typeof entrie.isIntersecting === "undefined" ? entrie.intersectionRatio !== 0 : entrie.isIntersecting) && src) {
entrie.target.src = src;
entrie.target.removeAttribute("data-src");
}
});
});
element.querySelectorAll("img").forEach((panelElement) => {
emojiIntersectionObserver.observe(panelElement);
});
}
export const filterEmoji = (key = "", max?: number, assic = false) => {
let html = "";
const recentEmojis: {
@ -107,7 +122,7 @@ export const filterEmoji = (key = "", max?: number, assic = false) => {
customStore.push(emoji);
} else {
keyHTML += `<button data-unicode="${emoji.unicode}" class="emojis__item" aria-label="${window.siyuan.config.lang === "zh_CN" ? emoji.description_zh_cn : emoji.description}">
${unicode2Emoji(emoji.unicode, assic)}</button>`;
${unicode2Emoji(emoji.unicode, assic, undefined, false, true)}</button>`;
}
maxCount++;
}
@ -117,7 +132,7 @@ ${unicode2Emoji(emoji.unicode, assic)}</button>`;
}
if (index < 2) {
html += `<button data-unicode="${emoji.unicode}" class="emojis__item" aria-label="${window.siyuan.config.lang === "zh_CN" ? emoji.description_zh_cn : emoji.description}">
${unicode2Emoji(emoji.unicode, assic)}</button>`;
${unicode2Emoji(emoji.unicode, assic, undefined, false, true)}</button>`;
}
}
});
@ -142,7 +157,7 @@ ${unicode2Emoji(emoji.unicode, assic)}</button>`;
return 0;
}).forEach(item => {
html += `<button data-unicode="${item.unicode}" class="emojis__item" aria-label="${window.siyuan.config.lang === "zh_CN" ? item.description_zh_cn : item.description}">
${unicode2Emoji(item.unicode, assic)}</button>`;
${unicode2Emoji(item.unicode, assic, undefined, false, true)}</button>`;
});
html = html + keyHTML + "</div>";
}
@ -153,7 +168,7 @@ ${unicode2Emoji(item.unicode, assic)}</button>`;
const emoji = recentEmojis.filter((item) => item.unicode === emojiUnicode);
if (emoji[0]) {
recentHTML += `<button data-unicode="${emoji[0].unicode}" class="emojis__item" aria-label="${window.siyuan.config.lang === "zh_CN" ? emoji[0].description_zh_cn : emoji[0].description}">
${unicode2Emoji(emoji[0].unicode, assic)}
${unicode2Emoji(emoji[0].unicode, assic, undefined, false, true)}
</button>`;
}
});
@ -222,6 +237,7 @@ export const openEmojiPanel = (id: string, target: HTMLElement, isNotebook = fal
if (inputElement.value === "") {
lazyLoadEmoji(window.siyuan.menus.menu.element);
}
lazyLoadEmojiImg(window.siyuan.menus.menu.element);
});
inputElement.addEventListener("input", (event: InputEvent) => {
if (event.isComposing) {
@ -238,6 +254,7 @@ export const openEmojiPanel = (id: string, target: HTMLElement, isNotebook = fal
if (inputElement.value === "") {
lazyLoadEmoji(window.siyuan.menus.menu.element);
}
lazyLoadEmojiImg(window.siyuan.menus.menu.element);
});
inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
if (event.isComposing) {
@ -316,6 +333,7 @@ export const openEmojiPanel = (id: string, target: HTMLElement, isNotebook = fal
inputElement.focus();
}
lazyLoadEmoji(window.siyuan.menus.menu.element);
lazyLoadEmojiImg(window.siyuan.menus.menu.element);
// 不能使用 getEventName 否则 https://github.com/siyuan-note/siyuan/issues/5472
window.siyuan.menus.menu.element.firstElementChild.addEventListener("click", (event) => {
const eventTarget = event.target as HTMLElement;

4
app/src/protyle/hint/index.ts
View file

@ -20,7 +20,7 @@ import {imgMenu} from "../../menus/protyle";
import {hideElements} from "../ui/hideElements";
import {fetchPost} from "../../util/fetch";
import {getDisplayName, pathPosix} from "../../util/pathName";
import {addEmoji, filterEmoji, lazyLoadEmoji, unicode2Emoji} from "../../emoji";
import {addEmoji, filterEmoji, lazyLoadEmoji, lazyLoadEmojiImg, unicode2Emoji} from "../../emoji";
import {escapeHtml} from "../../util/escape";
import {blockRender} from "../markdown/blockRender";
import {uploadFiles} from "../upload";
@ -331,6 +331,7 @@ ${unicode2Emoji(emoji.unicode, true)}</button>`;
} else {
panelElement.nextElementSibling.classList.remove("fn__none");
}
lazyLoadEmojiImg(panelElement);
} else {
this.element.innerHTML = `<div class="emojis">
<div class="emojis__panel">${filterEmoji(value, 256, true)}</div>
@ -348,6 +349,7 @@ ${unicode2Emoji(emoji.unicode, true)}</button>`;
</div>
</div>`;
lazyLoadEmoji(this.element, true);
lazyLoadEmojiImg(this.element);
}
const firstEmojiElement = this.element.querySelector(".emojis__item");
if (firstEmojiElement) {