Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-21 17:10:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

♻️ https://github.com/siyuan-note/siyuan/issues/9304

Browse source
This commit is contained in:
Vanessa 2023-10-04 21:02:49 +08:00
parent 29712f6f77
commit 61ee5676c4
10 changed files with 76 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

5
app/src/assets/scss/component/_menu.scss
View file

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

2
app/src/assets/scss/protyle/_toolbar.scss
View file

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

6
app/src/boot/globalEvent/keydown.ts
View file

@ -1210,9 +1210,15 @@ export const windowKeyDown = (app: App, event: KeyboardEvent) => {
return; return;
} }
if (!window.siyuan.menus.menu.element.classList.contains("fn__none")) { if (!window.siyuan.menus.menu.element.classList.contains("fn__none")) {
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(); window.siyuan.menus.menu.remove();
return; return;
} }
}
if (window.siyuan.dialogs.length > 0) { if (window.siyuan.dialogs.length > 0) {
hideElements(["dialog"]); hideElements(["dialog"]);
return; return;

5
app/src/dialog/index.ts
View file

@ -69,9 +69,12 @@ export class Dialog {
} }
public destroy(options?: IObject) { public destroy(options?: IObject) {
this.element.remove(); // 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 // https://github.com/siyuan-note/siyuan/issues/6783
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
}
this.element.remove();
if (this.destroyCallback) { if (this.destroyCallback) {
this.destroyCallback(options); this.destroyCallback(options);
} }

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

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

19
app/src/layout/dock/Files.ts
View file

@ -122,7 +122,11 @@ export class Files extends Model {
if (target.classList.contains("b3-list-item__icon")) { if (target.classList.contains("b3-list-item__icon")) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); 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; break;
} else if (type === "toggle") { } else if (type === "toggle") {
if (this.closeElement.classList.contains("fn__flex-1")) { 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") { if (!event.metaKey && !event.ctrlKey && target.classList.contains("b3-list-item__icon") && window.siyuan.config.system.container !== "ios") {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
const rect = target.getBoundingClientRect();
if (target.parentElement.getAttribute("data-type") === "navigation-file") { 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 { } 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; break;
} else if (!event.metaKey && !event.ctrlKey && target.classList.contains("b3-list-item__toggle")) { } else if (!event.metaKey && !event.ctrlKey && target.classList.contains("b3-list-item__toggle")) {
@ -260,7 +271,7 @@ export class Files extends Model {
newFile({ newFile({
app: options.app, app: options.app,
notebookId, notebookId,
currentPath:pathString, currentPath: pathString,
useSavePath: false useSavePath: false
}); });
} else if (type === "more-root") { } else if (type === "more-root") {

3
app/src/protyle/header/Background.ts
View file

@ -177,7 +177,8 @@ export class Background {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "open-emoji") { } 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.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; break;

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

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

3
app/src/protyle/render/av/col.ts
View file

@ -387,7 +387,8 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
}]); }]);
}); });
menu.addItem({ 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()}">`, label: `<input style="margin: 4px 0" class="b3-text-field" type="text" value="${cellElement.innerText.trim()}">`,
bind(element) { bind(element) {
element.querySelector("input").addEventListener("keydown", (event: KeyboardEvent) => { element.querySelector("input").addEventListener("keydown", (event: KeyboardEvent) => {

2
app/src/protyle/util/insertHTML.ts
View file

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