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

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

Browse source
This commit is contained in:
Vanessa 2023-02-02 18:26:15 +08:00
parent b93945faf9
commit 2d0e35c120
2 changed files with 58 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

5
app/src/menus/Menu.ts
View file

@ -5,6 +5,7 @@ import {isMobile} from "../util/functions";
export class Menu { export class Menu {
public element: HTMLElement; public element: HTMLElement;
public removeCB: () => void;
private wheelEvent: string; private wheelEvent: string;
constructor() { constructor() {
@ -64,6 +65,10 @@ export class Menu {
} }
public remove() { public remove() {
if (window.siyuan.menus.menu.removeCB) {
window.siyuan.menus.menu.removeCB();
window.siyuan.menus.menu.removeCB = undefined;
}
if (isMobile()) { if (isMobile()) {
window.removeEventListener("touchmove", this.preventDefault, false); window.removeEventListener("touchmove", this.preventDefault, false);
} else { } else {

137
app/src/menus/protyle.ts
View file

@ -506,7 +506,10 @@ export const zoomOut = (protyle: IProtyle, id: string, focusId?: string, isPushB
}); });
}; };
export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLElement, position: { clientX: number, clientY: number }) => { export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLElement, position: {
clientX: number,
clientY: number
}) => {
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
const nodeElement = hasClosestBlock(assetElement); const nodeElement = hasClosestBlock(assetElement);
if (!nodeElement) { if (!nodeElement) {
@ -515,13 +518,12 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
const id = nodeElement.getAttribute("data-node-id"); const id = nodeElement.getAttribute("data-node-id");
const imgElement = assetElement.querySelector("img"); const imgElement = assetElement.querySelector("img");
const titleElement = assetElement.querySelector(".protyle-action__title") as HTMLElement; const titleElement = assetElement.querySelector(".protyle-action__title") as HTMLElement;
const html = nodeElement.outerHTML;
let html = nodeElement.outerHTML;
window.siyuan.menus.menu.append(new MenuItem({ window.siyuan.menus.menu.append(new MenuItem({
label: `<div class="fn__hr--small"></div><input class="b3-text-field fn__size200" value="${imgElement.getAttribute("src")}" placeholder="${window.siyuan.languages.imageURL}"><div class="fn__hr--small"></div>`, label: `<div class="fn__hr--small"></div><textarea rows="1" class="b3-text-field fn__size200" placeholder="${window.siyuan.languages.imageURL}">${imgElement.getAttribute("src")}</textarea><div class="fn__hr--small"></div>`,
bind(element) { bind(element) {
element.querySelector("input").addEventListener("change", (event) => { element.querySelector("textarea").addEventListener("change", (event) => {
const value = (event.target as HTMLInputElement).value; const value = (event.target as HTMLInputElement).value.replace(/\n|\r\n|\r|\u2028|\u2029/g, "");
imgElement.setAttribute("src", value); imgElement.setAttribute("src", value);
imgElement.setAttribute("data-src", value); imgElement.setAttribute("data-src", value);
if (value.startsWith("assets/")) { if (value.startsWith("assets/")) {
@ -532,42 +534,27 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
} else if (window.siyuan.config.editor.displayNetImgMark) { } else if (window.siyuan.config.editor.displayNetImgMark) {
assetElement.querySelector(".protyle-action__drag").insertAdjacentHTML("afterend", '<span class="img__net"><svg><use xlink:href="#iconLanguage"></use></svg></span>'); assetElement.querySelector(".protyle-action__drag").insertAdjacentHTML("afterend", '<span class="img__net"><svg><use xlink:href="#iconLanguage"></use></svg></span>');
} }
nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
updateTransaction(protyle, id, nodeElement.outerHTML, html);
html = nodeElement.outerHTML;
}); });
} }
}).element); }).element);
window.siyuan.menus.menu.append(new MenuItem({ window.siyuan.menus.menu.append(new MenuItem({
label: `<div class="fn__hr--small"></div><input class="b3-text-field fn__size200" placeholder="${window.siyuan.languages.title}"><div class="fn__hr--small"></div>`, label: `<div class="fn__hr--small"></div><textarea rows="1" class="b3-text-field fn__size200" placeholder="${window.siyuan.languages.title}"></textarea><div class="fn__hr--small"></div>`,
bind(element) { bind(element) {
const inputElement = element.querySelector("input"); const inputElement = element.querySelector("textarea");
inputElement.value = titleElement.textContent; inputElement.value = titleElement.textContent;
inputElement.addEventListener("input", (event) => { inputElement.addEventListener("input", (event) => {
const value = (event.target as HTMLInputElement).value; const value = (event.target as HTMLInputElement).value.replace(/\n|\r\n|\r|\u2028|\u2029/g, "");
imgElement.setAttribute("title", value); imgElement.setAttribute("title", value);
titleElement.textContent = value; titleElement.textContent = value;
mathRender(titleElement); mathRender(titleElement);
assetElement.style.maxWidth = (imgElement.clientWidth + 10) + "px"; assetElement.style.maxWidth = (imgElement.clientWidth + 10) + "px";
}); });
inputElement.addEventListener("change", () => {
nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
updateTransaction(protyle, id, nodeElement.outerHTML, html);
html = nodeElement.outerHTML;
});
} }
}).element); }).element);
window.siyuan.menus.menu.append(new MenuItem({ window.siyuan.menus.menu.append(new MenuItem({
label: `<div class="fn__hr--small"></div><input class="b3-text-field fn__size200" placeholder="${window.siyuan.languages.tooltipText}"><div class="fn__hr--small"></div>`, label: `<div class="fn__hr--small"></div><textarea rows="1" class="b3-text-field fn__size200" placeholder="${window.siyuan.languages.tooltipText}"></textarea><div class="fn__hr--small"></div>`,
bind(element) { bind(element) {
const inputElement = element.querySelector("input"); element.querySelector("textarea").value = imgElement.getAttribute("alt") || "";
inputElement.value = imgElement.getAttribute("alt") || "";
inputElement.addEventListener("change", (event) => {
imgElement.setAttribute("alt", (event.target as HTMLInputElement).value);
nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
updateTransaction(protyle, id, nodeElement.outerHTML, html);
html = nodeElement.outerHTML;
});
} }
}).element); }).element);
window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element); window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
@ -699,7 +686,13 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
openMenu(imgSrc, false, false); openMenu(imgSrc, false, false);
} }
window.siyuan.menus.menu.popup({x: position.clientX, y: position.clientY}); window.siyuan.menus.menu.popup({x: position.clientX, y: position.clientY});
window.siyuan.menus.menu.element.querySelector("input").focus(); const textElements = window.siyuan.menus.menu.element.querySelectorAll("textarea")
textElements[0].focus();
window.siyuan.menus.menu.removeCB = () => {
imgElement.setAttribute("alt", textElements[2].value.replace(/\n|\r\n|\r|\u2028|\u2029/g, ""));
nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
updateTransaction(protyle, id, nodeElement.outerHTML, html);
}
}; };
export const linkMenu = (protyle: IProtyle, linkElement: HTMLElement, focusText = false) => { export const linkMenu = (protyle: IProtyle, linkElement: HTMLElement, focusText = false) => {
@ -709,34 +702,22 @@ export const linkMenu = (protyle: IProtyle, linkElement: HTMLElement, focusText
return; return;
} }
const id = nodeElement.getAttribute("data-node-id"); const id = nodeElement.getAttribute("data-node-id");
let html = nodeElement.outerHTML; const html = nodeElement.outerHTML;
const linkAddress = linkElement.getAttribute("data-href"); const linkAddress = linkElement.getAttribute("data-href");
window.siyuan.menus.menu.append(new MenuItem({ window.siyuan.menus.menu.append(new MenuItem({
label: `<div class="fn__hr--small"></div><input class="b3-text-field fn__size200" placeholder="${window.siyuan.languages.link}"><div class="fn__hr--small"></div>`, label: `<div class="fn__hr--small"></div><textarea rows="1" class="b3-text-field fn__size200" placeholder="${window.siyuan.languages.link}"></textarea><div class="fn__hr--small"></div>`,
bind(element) { bind(element) {
const inputElement = element.querySelector("input"); const inputElement = element.querySelector("textarea");
inputElement.value = linkAddress || ""; inputElement.value = linkAddress || "";
inputElement.addEventListener("change", () => {
linkElement.setAttribute("data-href", inputElement.value);
updateTransaction(protyle, id, nodeElement.outerHTML, html);
html = nodeElement.outerHTML;
});
inputElement.addEventListener("keydown", (event) => { inputElement.addEventListener("keydown", (event) => {
if ((event.key === "Enter" || event.key === "Escape") && !event.isComposing) { if ((event.key === "Enter" || event.key === "Escape") && !event.isComposing) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
if (linkElement.textContent === "" || linkElement.textContent === Constants.ZWSP) {
removeLink(linkElement, protyle.toolbar.range);
} else {
protyle.toolbar.range.selectNodeContents(linkElement);
protyle.toolbar.range.collapse(false);
focusByRange(protyle.toolbar.range);
}
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
} else if (event.key === "Tab" && !event.isComposing) { } else if (event.key === "Tab" && !event.isComposing) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
element.nextElementSibling.querySelector("input").focus(); element.nextElementSibling.querySelector("textarea").focus();
} else if (electronUndo(event)) { } else if (electronUndo(event)) {
return; return;
} }
@ -744,9 +725,9 @@ export const linkMenu = (protyle: IProtyle, linkElement: HTMLElement, focusText
} }
}).element); }).element);
window.siyuan.menus.menu.append(new MenuItem({ window.siyuan.menus.menu.append(new MenuItem({
label: `<div class="fn__hr--small"></div><input class="b3-text-field fn__size200" placeholder="${window.siyuan.languages.anchor}"><div class="fn__hr--small"></div>`, label: `<div class="fn__hr--small"></div><textarea rows="1" class="b3-text-field fn__size200" placeholder="${window.siyuan.languages.anchor}"></textarea><div class="fn__hr--small"></div>`,
bind(element) { bind(element) {
const inputElement = element.querySelector("input"); const inputElement = element.querySelector("textarea");
// https://github.com/siyuan-note/siyuan/issues/6798 // https://github.com/siyuan-note/siyuan/issues/6798
let anchor = linkElement.textContent.replace(Constants.ZWSP, ""); let anchor = linkElement.textContent.replace(Constants.ZWSP, "");
if (!anchor && linkAddress) { if (!anchor && linkAddress) {
@ -757,41 +738,27 @@ export const linkMenu = (protyle: IProtyle, linkElement: HTMLElement, focusText
linkElement.innerHTML = Lute.EscapeHTMLStr(anchor); linkElement.innerHTML = Lute.EscapeHTMLStr(anchor);
} }
inputElement.value = anchor; inputElement.value = anchor;
inputElement.addEventListener("change", () => {
if (!inputElement.value) {
linkElement.remove();
}
updateTransaction(protyle, id, nodeElement.outerHTML, html);
html = nodeElement.outerHTML;
});
inputElement.addEventListener("compositionend", () => { inputElement.addEventListener("compositionend", () => {
linkElement.innerHTML = Lute.EscapeHTMLStr(inputElement.value || ""); linkElement.innerHTML = Lute.EscapeHTMLStr(inputElement.value.replace(/\n|\r\n|\r|\u2028|\u2029/g, "") || "");
}); });
inputElement.addEventListener("input", (event: KeyboardEvent) => { inputElement.addEventListener("input", (event: KeyboardEvent) => {
if (!event.isComposing) { if (!event.isComposing) {
// https://github.com/siyuan-note/siyuan/issues/4511 // https://github.com/siyuan-note/siyuan/issues/4511
linkElement.innerHTML = Lute.EscapeHTMLStr(inputElement.value) || ""; linkElement.innerHTML = Lute.EscapeHTMLStr(inputElement.value.replace(/\n|\r\n|\r|\u2028|\u2029/g, "")) || "";
} }
}); });
inputElement.addEventListener("keydown", (event) => { inputElement.addEventListener("keydown", (event) => {
if ((event.key === "Enter" || event.key === "Escape") && !event.isComposing) { if ((event.key === "Enter" || event.key === "Escape") && !event.isComposing) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
if (!inputElement.value) {
removeLink(linkElement, protyle.toolbar.range);
} else {
protyle.toolbar.range.selectNodeContents(linkElement);
protyle.toolbar.range.collapse(false);
focusByRange(protyle.toolbar.range);
}
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
} else if (event.key === "Tab" && !event.isComposing) { } else if (event.key === "Tab" && !event.isComposing) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
if (event.shiftKey) { if (event.shiftKey) {
element.previousElementSibling.querySelector("input").focus(); element.previousElementSibling.querySelector("textarea").focus();
} else { } else {
element.nextElementSibling.querySelector("input").focus(); element.nextElementSibling.querySelector("textarea").focus();
} }
} else if (electronUndo(event)) { } else if (electronUndo(event)) {
return; return;
@ -800,35 +767,19 @@ export const linkMenu = (protyle: IProtyle, linkElement: HTMLElement, focusText
} }
}).element); }).element);
window.siyuan.menus.menu.append(new MenuItem({ window.siyuan.menus.menu.append(new MenuItem({
label: `<div class="fn__hr--small"></div><input class="b3-text-field fn__size200" placeholder="${window.siyuan.languages.title}"><div class="fn__hr--small"></div>`, label: `<div class="fn__hr--small"></div><textarea rows="1" class="b3-text-field fn__size200" placeholder="${window.siyuan.languages.title}"></textarea><div class="fn__hr--small"></div>`,
bind(element) { bind(element) {
const inputElement = element.querySelector("input"); const inputElement = element.querySelector("textarea");
inputElement.value = Lute.UnEscapeHTMLStr(linkElement.getAttribute("data-title") || ""); inputElement.value = Lute.UnEscapeHTMLStr(linkElement.getAttribute("data-title") || "");
inputElement.addEventListener("change", () => {
if (inputElement.value) {
linkElement.setAttribute("data-title", Lute.EscapeHTMLStr(inputElement.value));
} else {
linkElement.removeAttribute("data-title");
}
updateTransaction(protyle, id, nodeElement.outerHTML, html);
html = nodeElement.outerHTML;
});
inputElement.addEventListener("keydown", (event) => { inputElement.addEventListener("keydown", (event) => {
if ((event.key === "Enter" || event.key === "Escape") && !event.isComposing) { if ((event.key === "Enter" || event.key === "Escape") && !event.isComposing) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
if (linkElement.textContent === "" || linkElement.textContent === Constants.ZWSP) {
removeLink(linkElement, protyle.toolbar.range);
} else {
protyle.toolbar.range.selectNodeContents(linkElement);
protyle.toolbar.range.collapse(false);
focusByRange(protyle.toolbar.range);
}
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
} else if (event.key === "Tab" && event.shiftKey && !event.isComposing) { } else if (event.key === "Tab" && event.shiftKey && !event.isComposing) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
element.previousElementSibling.querySelector("input").focus(); element.previousElementSibling.querySelector("textarea").focus();
} else if (electronUndo(event)) { } else if (electronUndo(event)) {
return; return;
} }
@ -893,10 +844,28 @@ export const linkMenu = (protyle: IProtyle, linkElement: HTMLElement, focusText
y: rect.top + 26, y: rect.top + 26,
h: 26 h: 26
}); });
const textElements = window.siyuan.menus.menu.element.querySelectorAll("textarea")
if (focusText || protyle.lute.IsValidLinkDest(linkAddress)) { if (focusText || protyle.lute.IsValidLinkDest(linkAddress)) {
window.siyuan.menus.menu.element.querySelectorAll("input")[1].select(); textElements[1].select();
} else { } else {
window.siyuan.menus.menu.element.querySelector("input").select(); textElements[0].select();
}
window.siyuan.menus.menu.removeCB = () => {
if (textElements[2].value) {
linkElement.setAttribute("data-title", Lute.EscapeHTMLStr(textElements[2].value.replace(/\n|\r\n|\r|\u2028|\u2029/g, "")));
} else {
linkElement.removeAttribute("data-title");
}
linkElement.setAttribute("data-href", textElements[0].value.replace(/\n|\r\n|\r|\u2028|\u2029/g, ""));
if (linkElement.textContent === "" || linkElement.textContent === Constants.ZWSP) {
removeLink(linkElement, protyle.toolbar.range);
} else {
protyle.toolbar.range.selectNodeContents(linkElement);
protyle.toolbar.range.collapse(false);
focusByRange(protyle.toolbar.range);
}
nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
updateTransaction(protyle, id, nodeElement.outerHTML, html);
} }
}; };