From cb8b21190578785328530a4e009636b4204cec51 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Mon, 21 Nov 2022 10:40:29 +0800 Subject: [PATCH] :bug: fix https://github.com/siyuan-note/siyuan/issues/6666 --- app/src/menus/protyle.ts | 37 ++--------------- app/src/protyle/wysiwyg/commonHotkey.ts | 53 +++++++++++++++++++++++-- app/src/protyle/wysiwyg/keydown.ts | 37 ++++++----------- 3 files changed, 64 insertions(+), 63 deletions(-) diff --git a/app/src/menus/protyle.ts b/app/src/menus/protyle.ts index 15d0d73c3..bb24652b7 100644 --- a/app/src/menus/protyle.ts +++ b/app/src/menus/protyle.ts @@ -38,6 +38,7 @@ import {electronUndo} from "../protyle/undo"; import {pushBack} from "../mobile/util/MobileBackFoward"; import {exportAsset} from "./util"; import {removeLink} from "../protyle/toolbar/Link"; +import {alignImgCenter, alignImgLeft} from "../protyle/wysiwyg/commonHotkey"; export const refMenu = (protyle: IProtyle, element: HTMLElement) => { const nodeElement = hasClosestBlock(element); @@ -627,31 +628,7 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme label: window.siyuan.languages.alignCenter, accelerator: window.siyuan.config.keymap.editor.general.alignCenter.custom, click() { - nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss")); - assetElement.style.display = "block"; - let nextSibling = assetElement.nextSibling; - while (nextSibling) { - if (nextSibling.textContent === "") { - nextSibling = nextSibling.nextSibling; - } else if (nextSibling.textContent === Constants.ZWSP) { - nextSibling.textContent = ""; - break; - } else { - break; - } - } - let previous = assetElement.previousSibling; - while (previous) { - if (previous.textContent === "") { - previous = previous.previousSibling; - } else if (previous.textContent === Constants.ZWSP) { - previous.textContent = ""; - break; - } else { - break; - } - } - updateTransaction(protyle, id, nodeElement.outerHTML, html); + alignImgCenter(protyle, nodeElement, [assetElement], id, html); } }).element); window.siyuan.menus.menu.append(new MenuItem({ @@ -659,15 +636,7 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme label: window.siyuan.languages.alignLeft, accelerator: window.siyuan.config.keymap.editor.general.alignLeft.custom, click() { - nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss")); - assetElement.style.display = ""; - if (!hasNextSibling(assetElement)) { - assetElement.insertAdjacentText("afterend", Constants.ZWSP); - } - if (!hasPreviousSibling(assetElement)) { - assetElement.insertAdjacentText("beforebegin", Constants.ZWSP); - } - updateTransaction(protyle, id, nodeElement.outerHTML, html); + alignImgLeft(protyle, nodeElement, [assetElement], id, html) } }).element); const width = parseInt(assetElement.style.width || "0"); diff --git a/app/src/protyle/wysiwyg/commonHotkey.ts b/app/src/protyle/wysiwyg/commonHotkey.ts index 79c234288..fc5bb4256 100644 --- a/app/src/protyle/wysiwyg/commonHotkey.ts +++ b/app/src/protyle/wysiwyg/commonHotkey.ts @@ -13,14 +13,15 @@ import {setPadding} from "../ui/initUI"; import {openBacklink, openGraph, openOutline} from "../../layout/dock/util"; /// #endif import {reloadProtyle} from "../util/reload"; -import {getContenteditableElement} from "./getBlock"; +import {getContenteditableElement, hasNextSibling, hasPreviousSibling} from "./getBlock"; import {hasClosestByMatchTag} from "../util/hasClosest"; import {hideElements} from "../ui/hideElements"; import {countBlockWord} from "../../layout/status"; import {scrollCenter} from "../../util/highlightById"; -import {transaction} from "./transaction"; +import {transaction, updateTransaction} from "./transaction"; import {onGet} from "../util/onGet"; import {Constants} from "../../constants"; +import * as dayjs from "dayjs"; export const commonHotkey = (protyle: IProtyle, event: KeyboardEvent) => { const target = event.target as HTMLElement; @@ -218,7 +219,7 @@ export const duplicateBlock = (nodeElements: Element[], protyle: IProtyle) => { scrollCenter(protyle); }; -export const goHome = (protyle:IProtyle) => { +export const goHome = (protyle: IProtyle) => { if (protyle.wysiwyg.element.firstElementChild.getAttribute("data-node-index") === "0" || protyle.wysiwyg.element.firstElementChild.getAttribute("data-eof") === "true" || protyle.options.backlinkData) { @@ -236,7 +237,7 @@ export const goHome = (protyle:IProtyle) => { } }; -export const goEnd = (protyle:IProtyle) => { +export const goEnd = (protyle: IProtyle) => { if (!protyle.scroll.element.classList.contains("fn__none") && protyle.wysiwyg.element.lastElementChild.getAttribute("data-eof") !== "true") { fetchPost("/api/filetree/getDoc", { @@ -252,3 +253,47 @@ export const goEnd = (protyle:IProtyle) => { focusBlock(protyle.wysiwyg.element.lastElementChild, undefined, false); } }; + +export const alignImgCenter = (protyle: IProtyle, nodeElement: Element, assetElements: Element[], id: string, html: string) => { + nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss")); + assetElements.forEach((item: HTMLElement) => { + item.style.display = "block"; + let nextSibling = item.nextSibling; + while (nextSibling) { + if (nextSibling.textContent === "") { + nextSibling = nextSibling.nextSibling; + } else if (nextSibling.textContent === Constants.ZWSP) { + nextSibling.textContent = ""; + break; + } else { + break; + } + } + let previous = item.previousSibling; + while (previous) { + if (previous.textContent === "") { + previous = previous.previousSibling; + } else if (previous.textContent === Constants.ZWSP) { + previous.textContent = ""; + break; + } else { + break; + } + } + }); + updateTransaction(protyle, id, nodeElement.outerHTML, html); +} + +export const alignImgLeft = (protyle: IProtyle, nodeElement: Element, assetElements: Element[], id: string, html: string) => { + nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss")); + assetElements.forEach((item: HTMLElement) => { + item.style.display = ""; + if (!hasNextSibling(item)) { + item.insertAdjacentText("afterend", Constants.ZWSP); + } + if (!hasPreviousSibling(item)) { + item.insertAdjacentText("beforebegin", Constants.ZWSP); + } + }); + updateTransaction(protyle, id, nodeElement.outerHTML, html); +} diff --git a/app/src/protyle/wysiwyg/keydown.ts b/app/src/protyle/wysiwyg/keydown.ts index 53633bc25..17ac9d4e6 100644 --- a/app/src/protyle/wysiwyg/keydown.ts +++ b/app/src/protyle/wysiwyg/keydown.ts @@ -42,7 +42,16 @@ import {isLocalPath} from "../../util/pathName"; /// #if !MOBILE import {openBy, openFileById} from "../../editor/util"; /// #endif -import {commonHotkey, downSelect, duplicateBlock, getStartEndElement, goEnd, goHome, upSelect} from "./commonHotkey"; +import { + alignImgCenter, alignImgLeft, + commonHotkey, + downSelect, + duplicateBlock, + getStartEndElement, + goEnd, + goHome, + upSelect +} from "./commonHotkey"; import {linkMenu, refMenu, setFold, zoomOut} from "../../menus/protyle"; import {removeEmbed} from "./removeEmbed"; import {openAttr} from "../../menus/commonMenuItem"; @@ -1033,14 +1042,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => { if (matchHotKey(window.siyuan.config.keymap.editor.general.alignLeft.custom, event)) { const imgSelectElements = nodeElement.querySelectorAll(".img--select"); if (imgSelectElements.length > 0) { - const oldHTML = nodeElement.outerHTML; - imgSelectElements.forEach((item: HTMLElement) => { - item.style.display = ""; - if (!hasNextSibling(item)) { - item.insertAdjacentText("afterend", Constants.ZWSP); - } - }); - updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, oldHTML); + alignImgLeft(protyle, nodeElement, Array.from(imgSelectElements), nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML) } else { let selectElements: HTMLElement[] = Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select")); if (selectElements.length === 0) { @@ -1057,22 +1059,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => { if (matchHotKey(window.siyuan.config.keymap.editor.general.alignCenter.custom, event)) { const imgSelectElements = nodeElement.querySelectorAll(".img--select"); if (imgSelectElements.length > 0) { - const oldHTML = nodeElement.outerHTML; - imgSelectElements.forEach((item: HTMLElement) => { - item.style.display = "block"; - let nextSibling = item.nextSibling; - while (nextSibling) { - if (nextSibling.textContent === "") { - nextSibling = nextSibling.nextSibling; - } else if (nextSibling.textContent === Constants.ZWSP) { - nextSibling.textContent = ""; - break; - } else { - break; - } - } - }); - updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, oldHTML); + alignImgCenter(protyle, nodeElement, Array.from(imgSelectElements), nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML); } else { let selectElements: HTMLElement[] = Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select")); if (selectElements.length === 0) {