github/siyuan
4
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-05-19 02:21:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Vanessa 2024-12-20 12:23:49 +08:00
parent 20b4579170
commit 59360f363e
3 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/src/boot/compatibleVersion.ts Normal file
View File

@ -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");
}
}

19
app/src/menus/protyle.ts
View File

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

12
app/src/protyle/wysiwyg/index.ts
View File

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