0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Vanessa 2024-02-03 12:32:56 +08:00
parent fddb7a8e72
commit a655a02ce4
6 changed files with 107 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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;
}

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

@ -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>

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

@ -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();

8
app/src/protyle/undo/index.ts
View file

@ -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");
}

20
app/src/protyle/util/onGet.ts
View file

@ -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();

10
app/src/protyle/wysiwyg/index.ts
View file

@ -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) {