:bug: https://ld246.com/article/1734665662652

app/src/boot/compatibleVersion.ts

@@ -0,0 +1,9 @@
+export const img3115 = (imgElement: HTMLElement) => {
+    // 移除 3.1.15 以前 .img width 样式
+    if (imgElement.style.minWidth) {
+        // 居中需要 minWidth 样式，不能移除 style 属性
+        imgElement.style.width = "";
+    } else {
+        imgElement.removeAttribute("style");
+    }
+}

app/src/menus/protyle.ts

@@ -59,6 +59,7 @@ import {Menu} from "../plugin/Menu";
 import {getFirstBlock} from "../protyle/wysiwyg/getBlock";
 import {popSearch} from "../mobile/menu/search";
 import {showMessage} from "../dialog/message";
+import {img3115} from "../boot/compatibleVersion";
 
 const renderAssetList = (element: Element, k: string, position: IPosition, exts: string[] = []) => {
     fetchPost("/api/search/searchAsset", {
@@ -1188,8 +1189,7 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
                         rangeElement.value = "0";
                         rangeElement.parentElement.setAttribute("aria-label", inputElement.value ? (inputElement.value + "px") : window.siyuan.languages.default);
 
-                        // 历史兼容
-                        assetElement.removeAttribute("style");
+                        img3115(assetElement)
                         imgElement.parentElement.style.width = inputElement.value ? (inputElement.value + "px") : "";
                         imgElement.style.height = "";
                     });
@@ -1220,8 +1220,7 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
                     bind(element) {
                         rangeElement = element.querySelector("input");
                         rangeElement.addEventListener("input", () => {
-                            // 历史兼容
-                            assetElement.removeAttribute("style");
+                            img3115(assetElement)
                             imgElement.parentElement.style.width = rangeElement.value + "%";
                             imgElement.style.height = "";
                             rangeElement.parentElement.setAttribute("aria-label", `${rangeElement.value}%`);
@@ -1255,8 +1254,7 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
                         rangeHeightElement.parentElement.setAttribute("aria-label", inputElement.value ? (inputElement.value + "px") : window.siyuan.languages.default);
 
                         imgElement.style.height = inputElement.value ? (inputElement.value + "px") : "";
-                        // 历史兼容
-                        assetElement.removeAttribute("style");
+                        img3115(assetElement)
                         imgElement.parentElement.style.width = "";
                     });
                     inputElement.addEventListener("blur", () => {
@@ -1286,8 +1284,7 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
                     bind(element) {
                         rangeHeightElement = element.querySelector("input");
                         rangeHeightElement.addEventListener("input", () => {
-                            // 历史兼容
-                            assetElement.removeAttribute("style");
+                            img3115(assetElement)
                             imgElement.parentElement.style.width = "";
                             imgElement.style.height = rangeHeightElement.value + "vh";
                             rangeHeightElement.parentElement.setAttribute("aria-label", `${rangeHeightElement.value}%`);
@@ -1828,8 +1825,7 @@ const genImageWidthMenu = (label: string, imgElement: HTMLElement, protyle: IPro
         label,
         click() {
             nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
-            // 历史兼容
-            imgElement.parentElement.parentElement.removeAttribute("style");
+            img3115(imgElement.parentElement.parentElement)
             imgElement.parentElement.style.width = label === window.siyuan.languages.default ? "" : label;
             imgElement.style.height = "";
             updateTransaction(protyle, id, nodeElement.outerHTML, html);
@@ -1845,8 +1841,7 @@ const genImageHeightMenu = (label: string, imgElement: HTMLElement, protyle: IPr
         click() {
             nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
             imgElement.style.height = label === window.siyuan.languages.default ? "" : parseInt(label) + "vh";
-            // 历史兼容
-            imgElement.parentElement.parentElement.removeAttribute("style");
+            img3115(imgElement.parentElement.parentElement)
             imgElement.parentElement.style.width = "";
             updateTransaction(protyle, id, nodeElement.outerHTML, html);
             focusBlock(nodeElement);

app/src/protyle/wysiwyg/index.ts

@@ -95,6 +95,7 @@ import {openEmojiPanel, unicode2Emoji} from "../../emoji";
 import {openLink} from "../../editor/openLink";
 import {mathRender} from "../render/mathRender";
 import {editAssetItem} from "../render/av/asset";
+import {img3115} from "../../boot/compatibleVersion";
 
 export class WYSIWYG {
     public lastHTMLs: { [key: string]: string } = {};
@@ -669,14 +670,17 @@ export class WYSIWYG {
                 const dragElement = target.previousElementSibling as HTMLElement;
                 const dragWidth = dragElement.clientWidth;
                 const dragHeight = dragElement.clientHeight;
+
+                const imgElement = dragElement.parentElement.parentElement
+                if (dragElement.tagName === "IMG") {
+                   img3115(imgElement)
+                }
                 documentSelf.onmousemove = (moveEvent: MouseEvent) => {
                     if (dragElement.tagName === "IMG") {
                         dragElement.style.height = "";
-                        // 历史兼容
-                        dragElement.parentElement.parentElement.removeAttribute("style");
                     }
                     if (moveEvent.clientX > x - dragWidth + 8 && moveEvent.clientX < mostRight) {
-                        const multiple = ((dragElement.tagName === "IMG" && !dragElement.parentElement.parentElement.style.minWidth && nodeElement.style.textAlign !== "center") || !isCenter) ? 1 : 2;
+                        const multiple = ((dragElement.tagName === "IMG" && !imgElement.style.minWidth && nodeElement.style.textAlign !== "center") || !isCenter) ? 1 : 2;
                         if (dragElement.tagName === "IMG") {
                             dragElement.parentElement.style.width = Math.max(17, dragWidth + (moveEvent.clientX - x) * multiple) + "px";
                         } else {
@@ -1484,7 +1488,7 @@ export class WYSIWYG {
                     }
                 });
                 tableSelectElement.removeAttribute("style");
-                if (getSelection().rangeCount>0) {
+                if (getSelection().rangeCount > 0) {
                     const range = getSelection().getRangeAt(0);
                     if (nodeElement.contains(range.startContainer)) {
                         range.insertNode(document.createElement("wbr"));