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

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

Browse source
This commit is contained in:
Vanessa 2023-11-03 21:11:48 +08:00
parent b652c59acd
commit 8273b89e6d
1 changed files with 48 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -200,13 +200,14 @@ export const fileAnnotationRefMenu = (protyle: IProtyle, refElement: HTMLElement
let anchorElement: HTMLInputElement; let anchorElement: HTMLInputElement;
window.siyuan.menus.menu.append(new MenuItem({ window.siyuan.menus.menu.append(new MenuItem({
iconHTML: "", iconHTML: "",
label: `<input style="margin: 4px 0" class="b3-text-field fn__block" value="${refElement.getAttribute("data-id") || ""}" readonly placeholder="ID">`, type: "readonly",
}).element); label: `<div class="b3-menu__label">ID</div>
window.siyuan.menus.menu.append(new MenuItem({ <textarea rows="1" style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px" class="b3-text-field" readonly>${refElement.getAttribute("data-id") || ""}</textarea>
iconHTML: "", <div class="fn__hr"></div>
label: `<input style="margin: 4px 0" class="b3-text-field fn__block" data-type="anchor" placeholder="${window.siyuan.languages.anchor}">`, <div class="b3-menu__label">${window.siyuan.languages.anchor}</div>
<textarea rows="1" style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px" class="b3-text-field"></textarea>`,
bind(menuItemElement) { bind(menuItemElement) {
anchorElement = menuItemElement.querySelector("input"); anchorElement = menuItemElement.querySelectorAll(".b3-text-field")[1] as HTMLInputElement;
anchorElement.value = refElement.textContent; anchorElement.value = refElement.textContent;
const inputEvent = () => { const inputEvent = () => {
if (anchorElement.value) { if (anchorElement.value) {
@ -241,6 +242,7 @@ export const fileAnnotationRefMenu = (protyle: IProtyle, refElement: HTMLElement
}); });
} }
}).element); }).element);
window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
window.siyuan.menus.menu.append(new MenuItem({ window.siyuan.menus.menu.append(new MenuItem({
icon: "iconTrashcan", icon: "iconTrashcan",
label: window.siyuan.languages.remove, label: window.siyuan.languages.remove,
@ -309,6 +311,8 @@ export const refMenu = (protyle: IProtyle, element: HTMLElement) => {
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
if (!protyle.disabled) { if (!protyle.disabled) {
window.siyuan.menus.menu.append(new MenuItem({ window.siyuan.menus.menu.append(new MenuItem({
iconHTML: "",
type: "readonly",
label: `<input style="margin: 4px 0" class="b3-text-field fn__block" placeholder="${window.siyuan.languages.anchor}">`, label: `<input style="margin: 4px 0" class="b3-text-field fn__block" placeholder="${window.siyuan.languages.anchor}">`,
bind(menuItemElement) { bind(menuItemElement) {
const inputElement = menuItemElement.querySelector("input"); const inputElement = menuItemElement.querySelector("input");
@ -343,6 +347,7 @@ export const refMenu = (protyle: IProtyle, element: HTMLElement) => {
/// #if !MOBILE /// #if !MOBILE
window.siyuan.menus.menu.append(new MenuItem({ window.siyuan.menus.menu.append(new MenuItem({
label: window.siyuan.languages.openBy, label: window.siyuan.languages.openBy,
icon: "iconOpen",
accelerator: window.siyuan.config.keymap.editor.general.openBy.custom + "/Click", accelerator: window.siyuan.config.keymap.editor.general.openBy.custom + "/Click",
click() { click() {
fetchPost("/api/block/checkBlockFold", {id: refBlockId}, (foldResponse) => { fetchPost("/api/block/checkBlockFold", {id: refBlockId}, (foldResponse) => {
@ -357,6 +362,7 @@ export const refMenu = (protyle: IProtyle, element: HTMLElement) => {
}).element); }).element);
window.siyuan.menus.menu.append(new MenuItem({ window.siyuan.menus.menu.append(new MenuItem({
label: window.siyuan.languages.refTab, label: window.siyuan.languages.refTab,
icon: "iconEyeoff",
accelerator: window.siyuan.config.keymap.editor.general.refTab.custom + "/⌘Click", accelerator: window.siyuan.config.keymap.editor.general.refTab.custom + "/⌘Click",
click() { click() {
fetchPost("/api/block/checkBlockFold", {id: refBlockId}, (foldResponse) => { fetchPost("/api/block/checkBlockFold", {id: refBlockId}, (foldResponse) => {
@ -850,9 +856,18 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
if (!protyle.disabled) { if (!protyle.disabled) {
window.siyuan.menus.menu.append(new MenuItem({ window.siyuan.menus.menu.append(new MenuItem({
iconHTML: "", iconHTML: "",
label: `<textarea style="margin: 4px 0" rows="1" class="b3-text-field fn__size200" placeholder="${window.siyuan.languages.imageURL}">${imgElement.getAttribute("src")}</textarea>`, type: "readonly",
label: `<div class="b3-menu__label">${window.siyuan.languages.imageURL}</div>
<textarea style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px" rows="1" class="b3-text-field">${imgElement.getAttribute("src")}</textarea>
<div class="fn__hr"></div>
<div class="b3-menu__label">${window.siyuan.languages.title}</div>
<textarea style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px" rows="1" class="b3-text-field"></textarea>
<div class="fn__hr"></div>
<div class="b3-menu__label">${window.siyuan.languages.tooltipText}</div>
<textarea style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px" rows="1" class="b3-text-field"></textarea>`,
bind(element) { bind(element) {
element.querySelector("textarea").addEventListener("input", (event: InputEvent) => { const textElements = element.querySelectorAll("textarea");
textElements[0].addEventListener("input", (event: InputEvent) => {
if (event.isComposing) { if (event.isComposing) {
return; return;
} }
@ -868,28 +883,15 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
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>');
} }
}); });
} textElements[1].value = titleElement.textContent;
}).element); textElements[1].addEventListener("input", (event) => {
window.siyuan.menus.menu.append(new MenuItem({
iconHTML: "",
label: `<textarea style="margin: 4px 0" rows="1" class="b3-text-field fn__size200" placeholder="${window.siyuan.languages.title}"></textarea>`,
bind(element) {
const inputElement = element.querySelector("textarea");
inputElement.value = titleElement.textContent;
inputElement.addEventListener("input", (event) => {
const value = (event.target as HTMLInputElement).value.replace(/\n|\r\n|\r|\u2028|\u2029/g, ""); 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";
}); });
} textElements[2].value = imgElement.getAttribute("alt") || "";
}).element);
window.siyuan.menus.menu.append(new MenuItem({
iconHTML: "",
label: `<textarea style="margin: 4px 0" rows="1" class="b3-text-field fn__size200" placeholder="${window.siyuan.languages.tooltipText}"></textarea>`,
bind(element) {
element.querySelector("textarea").value = imgElement.getAttribute("alt") || "";
} }
}).element); }).element);
window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element); window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
@ -949,16 +951,8 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
window.siyuan.menus.menu.append(new MenuItem({ window.siyuan.menus.menu.append(new MenuItem({
label: "OCR", label: "OCR",
submenu: [{ submenu: [{
iconHTML: Constants.ZWSP, iconHTML: "",
label: window.siyuan.languages.reOCR, type: "readonly",
click() {
fetchPost("/api/asset/getImageOCRText", {
path: imgElement.getAttribute("src"),
force: true
});
}
}, {
iconHTML: Constants.ZWSP,
label: `<textarea data-type="ocr" style="margin: 4px 0" rows="1" class="b3-text-field fn__size200" placeholder="${window.siyuan.languages.ocrResult}"></textarea>`, label: `<textarea data-type="ocr" style="margin: 4px 0" rows="1" class="b3-text-field fn__size200" placeholder="${window.siyuan.languages.ocrResult}"></textarea>`,
bind(element) { bind(element) {
fetchPost("/api/asset/getImageOCRText", { fetchPost("/api/asset/getImageOCRText", {
@ -968,6 +962,17 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
element.querySelector("textarea").value = response.data.text; element.querySelector("textarea").value = response.data.text;
}); });
} }
}, {
type: "separator"
}, {
iconHTML: "",
label: window.siyuan.languages.reOCR,
click() {
fetchPost("/api/asset/getImageOCRText", {
path: imgElement.getAttribute("src"),
force: true
});
}
}], }],
}).element); }).element);
/// #endif /// #endif
@ -998,7 +1003,9 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
genImageWidthMenu("100%", assetElement, imgElement, protyle, id, nodeElement, html), { genImageWidthMenu("100%", assetElement, imgElement, protyle, id, nodeElement, html), {
type: "separator", type: "separator",
}, { }, {
label: `<div aria-label="${width === 0 ? window.siyuan.languages.default : width + "%"}" class="b3-tooltips b3-tooltips__n${isMobile() ? "" : " fn__size200"}"> iconHTML: "",
type: "readonly",
label: `<div style="margin: 4px 0;" aria-label="${width === 0 ? window.siyuan.languages.default : width + "%"}" class="b3-tooltips b3-tooltips__n${isMobile() ? "" : " fn__size200"}">
<input style="box-sizing: border-box" value="${width}" class="b3-slider fn__block" max="100" min="1" step="1" type="range"> <input style="box-sizing: border-box" value="${width}" class="b3-slider fn__block" max="100" min="1" step="1" type="range">
</div>`, </div>`,
bind(element) { bind(element) {
@ -1265,6 +1272,8 @@ export const tagMenu = (protyle: IProtyle, tagElement: HTMLElement) => {
const id = nodeElement.getAttribute("data-node-id"); const id = nodeElement.getAttribute("data-node-id");
let html = nodeElement.outerHTML; let html = nodeElement.outerHTML;
window.siyuan.menus.menu.append(new MenuItem({ window.siyuan.menus.menu.append(new MenuItem({
iconHTML: "",
type: "readonly",
label: `<input class="b3-text-field fn__size200" style="margin: 4px 0" placeholder="${window.siyuan.languages.tag}">`, label: `<input class="b3-text-field fn__size200" style="margin: 4px 0" placeholder="${window.siyuan.languages.tag}">`,
bind(element) { bind(element) {
const inputElement = element.querySelector("input"); const inputElement = element.querySelector("input");
@ -1305,6 +1314,7 @@ export const tagMenu = (protyle: IProtyle, tagElement: HTMLElement) => {
}); });
} }
}).element); }).element);
window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
/// #if !MOBILE /// #if !MOBILE
window.siyuan.menus.menu.append(new MenuItem({ window.siyuan.menus.menu.append(new MenuItem({
label: window.siyuan.languages.search, label: window.siyuan.languages.search,
@ -1367,6 +1377,7 @@ export const tagMenu = (protyle: IProtyle, tagElement: HTMLElement) => {
const genImageWidthMenu = (label: string, assetElement: HTMLElement, imgElement: HTMLElement, protyle: IProtyle, id: string, nodeElement: HTMLElement, html: string) => { const genImageWidthMenu = (label: string, assetElement: HTMLElement, imgElement: HTMLElement, protyle: IProtyle, id: string, nodeElement: HTMLElement, html: string) => {
return { return {
iconHTML: "",
label, label,
click() { click() {
nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss")); nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
@ -1395,6 +1406,7 @@ export const iframeMenu = (protyle: IProtyle, nodeElement: Element) => {
let html = nodeElement.outerHTML; let html = nodeElement.outerHTML;
const subMenus: IMenu[] = [{ const subMenus: IMenu[] = [{
iconHTML: "", iconHTML: "",
type: "readonly",
label: `<textarea rows="1" class="b3-text-field fn__size200" placeholder="${window.siyuan.languages.link}" style="margin: 4px 0">${iframeElement.getAttribute("src") || ""}</textarea>`, label: `<textarea rows="1" class="b3-text-field fn__size200" placeholder="${window.siyuan.languages.link}" style="margin: 4px 0">${iframeElement.getAttribute("src") || ""}</textarea>`,
bind(element) { bind(element) {
element.querySelector("textarea").addEventListener("change", (event) => { element.querySelector("textarea").addEventListener("change", (event) => {
@ -1459,6 +1471,7 @@ export const videoMenu = (protyle: IProtyle, nodeElement: Element, type: string)
let html = nodeElement.outerHTML; let html = nodeElement.outerHTML;
const subMenus: IMenu[] = [{ const subMenus: IMenu[] = [{
iconHTML: "", iconHTML: "",
type: "readonly",
label: `<textarea rows="1" style="margin: 4px 0" class="b3-text-field" placeholder="${window.siyuan.languages.link}">${videoElement.getAttribute("src")}</textarea>`, label: `<textarea rows="1" style="margin: 4px 0" class="b3-text-field" placeholder="${window.siyuan.languages.link}">${videoElement.getAttribute("src")}</textarea>`,
bind(element) { bind(element) {
element.querySelector("textarea").addEventListener("change", (event) => { element.querySelector("textarea").addEventListener("change", (event) => {