diff --git a/app/src/menus/protyle.ts b/app/src/menus/protyle.ts
index 429037507..ce6b3a400 100644
--- a/app/src/menus/protyle.ts
+++ b/app/src/menus/protyle.ts
@@ -706,51 +706,53 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
const imgElement = assetElement.querySelector("img");
const titleElement = assetElement.querySelector(".protyle-action__title") as HTMLElement;
const html = nodeElement.outerHTML;
- window.siyuan.menus.menu.append(new MenuItem({
- iconHTML: "",
- label: ``,
- bind(element) {
- element.querySelector("textarea").addEventListener("input", (event: InputEvent) => {
- if (event.isComposing) {
- return;
- }
- const value = (event.target as HTMLInputElement).value.replace(/\n|\r\n|\r|\u2028|\u2029/g, "");
- imgElement.setAttribute("src", value);
- imgElement.setAttribute("data-src", value);
- if (value.startsWith("assets/")) {
- const imgNetElement = assetElement.querySelector(".img__net");
- if (imgNetElement) {
- imgNetElement.remove();
+ if (!protyle.disabled) {
+ window.siyuan.menus.menu.append(new MenuItem({
+ iconHTML: "",
+ label: ``,
+ bind(element) {
+ element.querySelector("textarea").addEventListener("input", (event: InputEvent) => {
+ if (event.isComposing) {
+ return;
}
- } else if (window.siyuan.config.editor.displayNetImgMark) {
- assetElement.querySelector(".protyle-action__drag").insertAdjacentHTML("afterend", '');
- }
- });
- }
- }).element);
- window.siyuan.menus.menu.append(new MenuItem({
- iconHTML: "",
- label: ``,
- 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, "");
- imgElement.setAttribute("title", value);
- titleElement.textContent = value;
- mathRender(titleElement);
- assetElement.style.maxWidth = (imgElement.clientWidth + 10) + "px";
- });
- }
- }).element);
- window.siyuan.menus.menu.append(new MenuItem({
- iconHTML: "",
- label: ``,
- bind(element) {
- element.querySelector("textarea").value = imgElement.getAttribute("alt") || "";
- }
- }).element);
- window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
+ const value = (event.target as HTMLInputElement).value.replace(/\n|\r\n|\r|\u2028|\u2029/g, "");
+ imgElement.setAttribute("src", value);
+ imgElement.setAttribute("data-src", value);
+ if (value.startsWith("assets/")) {
+ const imgNetElement = assetElement.querySelector(".img__net");
+ if (imgNetElement) {
+ imgNetElement.remove();
+ }
+ } else if (window.siyuan.config.editor.displayNetImgMark) {
+ assetElement.querySelector(".protyle-action__drag").insertAdjacentHTML("afterend", '');
+ }
+ });
+ }
+ }).element);
+ window.siyuan.menus.menu.append(new MenuItem({
+ iconHTML: "",
+ label: ``,
+ 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, "");
+ imgElement.setAttribute("title", value);
+ titleElement.textContent = value;
+ mathRender(titleElement);
+ assetElement.style.maxWidth = (imgElement.clientWidth + 10) + "px";
+ });
+ }
+ }).element);
+ window.siyuan.menus.menu.append(new MenuItem({
+ iconHTML: "",
+ label: ``,
+ bind(element) {
+ element.querySelector("textarea").value = imgElement.getAttribute("alt") || "";
+ }
+ }).element);
+ window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
+ }
window.siyuan.menus.menu.append(new MenuItem({
label: window.siyuan.languages.copy,
accelerator: "⌘C",
@@ -767,117 +769,119 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
copyPNG(imgElement);
}
}).element);
- window.siyuan.menus.menu.append(new MenuItem({
- icon: "iconCut",
- accelerator: "⌘X",
- label: window.siyuan.languages.cut,
- click() {
- writeText(protyle.lute.BlockDOM2StdMd(assetElement.outerHTML));
- (assetElement as HTMLElement).outerHTML = "";
- nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
- updateTransaction(protyle, id, nodeElement.outerHTML, html);
- focusByWbr(protyle.wysiwyg.element, range);
- }
- }).element);
- window.siyuan.menus.menu.append(new MenuItem({
- icon: "iconTrashcan",
- accelerator: "⌫",
- label: window.siyuan.languages.delete,
- click: function () {
- (assetElement as HTMLElement).outerHTML = "";
- nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
- updateTransaction(protyle, id, nodeElement.outerHTML, html);
- focusByWbr(protyle.wysiwyg.element, range);
- }
- }).element);
- window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
- const imagePath = imgElement.getAttribute("data-src");
- if (imagePath.startsWith("assets/")) {
+ if (!protyle.disabled) {
window.siyuan.menus.menu.append(new MenuItem({
- label: window.siyuan.languages.rename,
- icon: "iconEdit",
+ icon: "iconCut",
+ accelerator: "⌘X",
+ label: window.siyuan.languages.cut,
click() {
- renameAsset(imagePath);
+ writeText(protyle.lute.BlockDOM2StdMd(assetElement.outerHTML));
+ (assetElement as HTMLElement).outerHTML = "";
+ nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
+ updateTransaction(protyle, id, nodeElement.outerHTML, html);
+ focusByWbr(protyle.wysiwyg.element, range);
}
}).element);
- }
- /// #if !BROWSER
- window.siyuan.menus.menu.append(new MenuItem({
- label: "OCR",
- submenu: [{
- iconHTML: Constants.ZWSP,
- label: window.siyuan.languages.reOCR,
- click() {
- fetchPost("/api/asset/getImageOCRText", {
- path: imgElement.getAttribute("src"),
- force: true
- });
+ window.siyuan.menus.menu.append(new MenuItem({
+ icon: "iconTrashcan",
+ accelerator: "⌫",
+ label: window.siyuan.languages.delete,
+ click: function () {
+ (assetElement as HTMLElement).outerHTML = "";
+ nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
+ updateTransaction(protyle, id, nodeElement.outerHTML, html);
+ focusByWbr(protyle.wysiwyg.element, range);
}
- }, {
- iconHTML: Constants.ZWSP,
- label: ``,
- bind(element) {
- fetchPost("/api/asset/getImageOCRText", {
- path: imgElement.getAttribute("src"),
- force: false
- }, (response) => {
- element.querySelector("textarea").value = response.data.text;
- });
- }
- }],
- }).element);
- /// #endif
- window.siyuan.menus.menu.append(new MenuItem({
- icon: "iconAlignCenter",
- label: window.siyuan.languages.alignCenter,
- accelerator: window.siyuan.config.keymap.editor.general.alignCenter.custom,
- click() {
- alignImgCenter(protyle, nodeElement, [assetElement], id, html);
+ }).element);
+ window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
+ const imagePath = imgElement.getAttribute("data-src");
+ if (imagePath.startsWith("assets/")) {
+ window.siyuan.menus.menu.append(new MenuItem({
+ label: window.siyuan.languages.rename,
+ icon: "iconEdit",
+ click() {
+ renameAsset(imagePath);
+ }
+ }).element);
}
- }).element);
- window.siyuan.menus.menu.append(new MenuItem({
- icon: "iconAlignLeft",
- label: window.siyuan.languages.alignLeft,
- accelerator: window.siyuan.config.keymap.editor.general.alignLeft.custom,
- click() {
- alignImgLeft(protyle, nodeElement, [assetElement], id, html);
- }
- }).element);
- const width = parseInt(assetElement.style.width || "0");
- window.siyuan.menus.menu.append(new MenuItem({
- label: window.siyuan.languages.width,
- submenu: [genImageWidthMenu("25%", assetElement, imgElement, protyle, id, nodeElement, html),
- genImageWidthMenu("33%", assetElement, imgElement, protyle, id, nodeElement, html),
- genImageWidthMenu("50%", assetElement, imgElement, protyle, id, nodeElement, html),
- genImageWidthMenu("67%", assetElement, imgElement, protyle, id, nodeElement, html),
- genImageWidthMenu("75%", assetElement, imgElement, protyle, id, nodeElement, html),
- genImageWidthMenu("100%", assetElement, imgElement, protyle, id, nodeElement, html), {
- type: "separator",
- }, {
- label: `
-
-
`,
- bind(element) {
- const rangeElement = element.querySelector("input");
- rangeElement.addEventListener("input", () => {
- assetElement.style.width = rangeElement.value + "%";
- imgElement.style.width = "10000px";
- assetElement.style.maxWidth = "";
- rangeElement.parentElement.setAttribute("aria-label", `${rangeElement.value}%`);
- });
- rangeElement.addEventListener("change", () => {
- nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
- updateTransaction(protyle, id, nodeElement.outerHTML, html);
- window.siyuan.menus.menu.remove();
- focusBlock(nodeElement);
+ /// #if !BROWSER
+ window.siyuan.menus.menu.append(new MenuItem({
+ label: "OCR",
+ submenu: [{
+ iconHTML: Constants.ZWSP,
+ label: window.siyuan.languages.reOCR,
+ click() {
+ fetchPost("/api/asset/getImageOCRText", {
+ path: imgElement.getAttribute("src"),
+ force: true
});
}
}, {
- type: "separator",
- },
- genImageWidthMenu(window.siyuan.languages.default, assetElement, imgElement, protyle, id, nodeElement, html),
- ]
- }).element);
+ iconHTML: Constants.ZWSP,
+ label: ``,
+ bind(element) {
+ fetchPost("/api/asset/getImageOCRText", {
+ path: imgElement.getAttribute("src"),
+ force: false
+ }, (response) => {
+ element.querySelector("textarea").value = response.data.text;
+ });
+ }
+ }],
+ }).element);
+ /// #endif
+ window.siyuan.menus.menu.append(new MenuItem({
+ icon: "iconAlignCenter",
+ label: window.siyuan.languages.alignCenter,
+ accelerator: window.siyuan.config.keymap.editor.general.alignCenter.custom,
+ click() {
+ alignImgCenter(protyle, nodeElement, [assetElement], id, html);
+ }
+ }).element);
+ window.siyuan.menus.menu.append(new MenuItem({
+ icon: "iconAlignLeft",
+ label: window.siyuan.languages.alignLeft,
+ accelerator: window.siyuan.config.keymap.editor.general.alignLeft.custom,
+ click() {
+ alignImgLeft(protyle, nodeElement, [assetElement], id, html);
+ }
+ }).element);
+ const width = parseInt(assetElement.style.width || "0");
+ window.siyuan.menus.menu.append(new MenuItem({
+ label: window.siyuan.languages.width,
+ submenu: [genImageWidthMenu("25%", assetElement, imgElement, protyle, id, nodeElement, html),
+ genImageWidthMenu("33%", assetElement, imgElement, protyle, id, nodeElement, html),
+ genImageWidthMenu("50%", assetElement, imgElement, protyle, id, nodeElement, html),
+ genImageWidthMenu("67%", assetElement, imgElement, protyle, id, nodeElement, html),
+ genImageWidthMenu("75%", assetElement, imgElement, protyle, id, nodeElement, html),
+ genImageWidthMenu("100%", assetElement, imgElement, protyle, id, nodeElement, html), {
+ type: "separator",
+ }, {
+ label: `
+
+
`,
+ bind(element) {
+ const rangeElement = element.querySelector("input");
+ rangeElement.addEventListener("input", () => {
+ assetElement.style.width = rangeElement.value + "%";
+ imgElement.style.width = "10000px";
+ assetElement.style.maxWidth = "";
+ rangeElement.parentElement.setAttribute("aria-label", `${rangeElement.value}%`);
+ });
+ rangeElement.addEventListener("change", () => {
+ nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
+ updateTransaction(protyle, id, nodeElement.outerHTML, html);
+ window.siyuan.menus.menu.remove();
+ focusBlock(nodeElement);
+ });
+ }
+ }, {
+ type: "separator",
+ },
+ genImageWidthMenu(window.siyuan.languages.default, assetElement, imgElement, protyle, id, nodeElement, html),
+ ]
+ }).element);
+ }
const imgSrc = imgElement.getAttribute("src");
if (imgSrc) {
window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
@@ -899,20 +903,22 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
}
window.siyuan.menus.menu.popup({x: position.clientX, y: position.clientY});
- const textElements = window.siyuan.menus.menu.element.querySelectorAll("textarea");
- textElements[0].focus();
- window.siyuan.menus.menu.removeCB = () => {
- const ocrElemennt = window.siyuan.menus.menu.element.querySelector('[data-type="ocr"]') as HTMLTextAreaElement;
- if (ocrElemennt) {
- fetchPost("/api/asset/setImageOCRText", {
- path: imgElement.getAttribute("src"),
- text: ocrElemennt.value
- });
- }
- 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);
- };
+ if (!protyle.disabled) {
+ const textElements = window.siyuan.menus.menu.element.querySelectorAll("textarea");
+ textElements[0].focus();
+ window.siyuan.menus.menu.removeCB = () => {
+ const ocrElemennt = window.siyuan.menus.menu.element.querySelector('[data-type="ocr"]') as HTMLTextAreaElement;
+ if (ocrElemennt) {
+ fetchPost("/api/asset/setImageOCRText", {
+ path: imgElement.getAttribute("src"),
+ text: ocrElemennt.value
+ });
+ }
+ 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) => {
diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts
index 0c587674f..9b63ab57f 100644
--- a/app/src/protyle/wysiwyg/index.ts
+++ b/app/src/protyle/wysiwyg/index.ts
@@ -1335,7 +1335,7 @@ export class WYSIWYG {
return false;
}
}
- if (!protyle.disabled && target.tagName === "IMG" && hasClosestByClassName(target, "img")) {
+ if (target.tagName === "IMG" && hasClosestByClassName(target, "img")) {
imgMenu(protyle, protyle.toolbar.range, target.parentElement.parentElement, {
clientX: x + 4,
clientY: y