diff --git a/app/src/menus/protyle.ts b/app/src/menus/protyle.ts
index 08ff72de2..afec3f89b 100644
--- a/app/src/menus/protyle.ts
+++ b/app/src/menus/protyle.ts
@@ -1133,7 +1133,7 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
alignImgLeft(protyle, nodeElement, [assetElement], id, html);
}
}).element);
- const width = assetElement.style.width.endsWith("%") ? parseInt(assetElement.style.width) : 0;
+ const width = imgElement.style.width.endsWith("%") ? parseInt(imgElement.style.width) : 0;
let rangeElement: HTMLInputElement;
window.siyuan.menus.menu.append(new MenuItem({
label: window.siyuan.languages.width,
@@ -1141,7 +1141,7 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
iconHTML: "",
type: "readonly",
label: `
+ label: `
`,
bind(element) {
rangeElement = element.querySelector("input");
rangeElement.addEventListener("input", () => {
- assetElement.style.width = rangeElement.value + "%";
- imgElement.style.width = "10000px";
- imgElement.style.height = "";
+ imgElement.style.width = rangeElement.value + "%";
+
rangeElement.parentElement.setAttribute("aria-label", `${rangeElement.value}%`);
});
rangeElement.addEventListener("change", () => {
@@ -1192,7 +1190,7 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
}, {
type: "separator",
},
- genImageWidthMenu(window.siyuan.languages.default, assetElement, imgElement, protyle, id, nodeElement, html),
+ genImageWidthMenu(window.siyuan.languages.default, imgElement, protyle, id, nodeElement, html),
]
}).element);
let rangeHeightElement: HTMLInputElement;
@@ -1223,12 +1221,12 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
});
}
},
- genImageHeightMenu("25%", assetElement, imgElement, protyle, id, nodeElement, html),
- genImageHeightMenu("33%", assetElement, imgElement, protyle, id, nodeElement, html),
- genImageHeightMenu("50%", assetElement, imgElement, protyle, id, nodeElement, html),
- genImageHeightMenu("67%", assetElement, imgElement, protyle, id, nodeElement, html),
- genImageHeightMenu("75%", assetElement, imgElement, protyle, id, nodeElement, html),
- genImageHeightMenu("100%", assetElement, imgElement, protyle, id, nodeElement, html), {
+ genImageHeightMenu("25%", imgElement, protyle, id, nodeElement, html),
+ genImageHeightMenu("33%", imgElement, protyle, id, nodeElement, html),
+ genImageHeightMenu("50%", imgElement, protyle, id, nodeElement, html),
+ genImageHeightMenu("67%", imgElement, protyle, id, nodeElement, html),
+ genImageHeightMenu("75%", imgElement, protyle, id, nodeElement, html),
+ genImageHeightMenu("100%", imgElement, protyle, id, nodeElement, html), {
type: "separator",
}, {
iconHTML: "",
@@ -1239,9 +1237,9 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
bind(element) {
rangeHeightElement = element.querySelector("input");
rangeHeightElement.addEventListener("input", () => {
- assetElement.style.width ="";
+ assetElement.style.width = "";
imgElement.style.width = "";
- imgElement.style.height = rangeHeightElement.value + "vh";
+ imgElement.style.height = rangeHeightElement.value + "vh";
rangeHeightElement.parentElement.setAttribute("aria-label", `${rangeHeightElement.value}%`);
});
rangeHeightElement.addEventListener("change", () => {
@@ -1254,7 +1252,7 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
}, {
type: "separator",
},
- genImageHeightMenu(window.siyuan.languages.default, assetElement, imgElement, protyle, id, nodeElement, html),
+ genImageHeightMenu(window.siyuan.languages.default, imgElement, protyle, id, nodeElement, html),
]
}).element);
}
@@ -1729,22 +1727,16 @@ export const inlineMathMenu = (protyle: IProtyle, element: Element) => {
});
};
-const genImageWidthMenu = (label: string, assetElement: HTMLElement, imgElement: HTMLElement, protyle: IProtyle, id: string, nodeElement: HTMLElement, html: string) => {
+const genImageWidthMenu = (label: string, imgElement: HTMLElement, protyle: IProtyle, id: string, nodeElement: HTMLElement, html: string) => {
return {
iconHTML: "",
label,
click() {
nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
if (label === window.siyuan.languages.default) {
- const isCenter = assetElement.style.display === "block" || assetElement.style.minWidth;
- assetElement.removeAttribute("style");
- imgElement.removeAttribute("style");
- if (isCenter) {
- assetElement.style.minWidth = "calc(100% - 0.1em)";
- }
+ imgElement.style.width = "";
} else {
- assetElement.style.width = label;
- imgElement.style.width = "10000px";
+ imgElement.style.width = label;
}
imgElement.style.height = "";
updateTransaction(protyle, id, nodeElement.outerHTML, html);
@@ -1753,25 +1745,18 @@ const genImageWidthMenu = (label: string, assetElement: HTMLElement, imgElement:
};
};
-const genImageHeightMenu = (label: string, assetElement: HTMLElement, imgElement: HTMLElement, protyle: IProtyle, id: string, nodeElement: HTMLElement, html: string) => {
+const genImageHeightMenu = (label: string, imgElement: HTMLElement, protyle: IProtyle, id: string, nodeElement: HTMLElement, html: string) => {
return {
iconHTML: "",
label,
click() {
nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
if (label === window.siyuan.languages.default) {
- const isCenter = assetElement.style.display === "block" || assetElement.style.minWidth;
- assetElement.removeAttribute("style");
- imgElement.removeAttribute("style");
- if (isCenter) {
- assetElement.style.minWidth = "calc(100% - 0.1em)";
- }
imgElement.style.height = "";
} else {
- assetElement.style.width = "";
- imgElement.style.width = "";
imgElement.style.height = parseInt(label) + "vh";
}
+ imgElement.style.width = "";
updateTransaction(protyle, id, nodeElement.outerHTML, html);
focusBlock(nodeElement);
}
diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts
index ff2e3aa05..0e3674a47 100644
--- a/app/src/protyle/wysiwyg/index.ts
+++ b/app/src/protyle/wysiwyg/index.ts
@@ -654,8 +654,6 @@ export class WYSIWYG {
if (moveEvent.clientY > y - dragHeight + 8 && moveEvent.clientY < mostBottom) {
dragElement.style.height = (dragHeight + (moveEvent.clientY - y)) + "px";
}
- } else {
- dragElement.parentElement.parentElement.style.width = (parseInt(dragElement.style.width) + 10) + "px";
}
};