diff --git a/app/src/boot/compatibleVersion.ts b/app/src/boot/compatibleVersion.ts new file mode 100644 index 000000000..c52c773de --- /dev/null +++ b/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"); + } +} diff --git a/app/src/menus/protyle.ts b/app/src/menus/protyle.ts index a70a33f85..25269c587 100644 --- a/app/src/menus/protyle.ts +++ b/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); diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index 02d59e0e4..caa6e557b 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/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"));