diff --git a/app/src/protyle/gutter/index.ts b/app/src/protyle/gutter/index.ts index 34d1cdb40..71f3a85a6 100644 --- a/app/src/protyle/gutter/index.ts +++ b/app/src/protyle/gutter/index.ts @@ -4,7 +4,13 @@ import {iframeMenu, setFold, tableMenu, videoMenu, zoomOut} from "../../menus/pr import {MenuItem} from "../../menus/Menu"; import {copySubMenu, openAttr, openWechatNotify} from "../../menus/commonMenuItem"; import {updateHotkeyTip, writeText} from "../util/compatibility"; -import {transaction, turnIntoTransaction, turnsIntoTransaction, updateTransaction} from "../wysiwyg/transaction"; +import { + transaction, + turnIntoTransaction, + turnsIntoTransaction, + updateBatchTransaction, + updateTransaction +} from "../wysiwyg/transaction"; import {removeBlock} from "../wysiwyg/remove"; import {focusBlock, focusByRange, getEditorRange} from "../util/selection"; import {hideElements} from "../ui/hideElements"; @@ -1157,24 +1163,7 @@ export class Gutter { } private genClick(nodeElements: Element[], protyle: IProtyle, cb: (e: HTMLElement) => void) { - const operations: IOperation[] = []; - const undoOperations: IOperation[] = []; - nodeElements.forEach((element) => { - const id = element.getAttribute("data-node-id"); - element.classList.remove("protyle-wysiwyg--select"); - undoOperations.push({ - action: "update", - id, - data: element.outerHTML - }); - cb(element as HTMLElement); - operations.push({ - action: "update", - id, - data: element.outerHTML - }); - }); - transaction(protyle, operations, undoOperations); + updateBatchTransaction(nodeElements, protyle, cb); focusBlock(nodeElements[0]); } diff --git a/app/src/protyle/wysiwyg/keydown.ts b/app/src/protyle/wysiwyg/keydown.ts index 909a775cc..424f9ba8c 100644 --- a/app/src/protyle/wysiwyg/keydown.ts +++ b/app/src/protyle/wysiwyg/keydown.ts @@ -28,7 +28,13 @@ import { import {matchHotKey} from "../util/hotKey"; import {enter} from "./enter"; import {fixTable} from "../util/table"; -import {phTransaction, transaction, turnsIntoTransaction, updateTransaction} from "./transaction"; +import { + phTransaction, + transaction, + turnsIntoTransaction, + updateBatchTransaction, + updateTransaction +} from "./transaction"; import {fontEvent} from "../toolbar/Font"; import {listIndent, listOutdent, updateListOrder} from "./list"; import {newFileBySelect, newFileContentBySelect, rename, replaceFileName} from "../../editor/rename"; @@ -960,46 +966,55 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => { return; } if (matchHotKey(window.siyuan.config.keymap.editor.general.alignLeft.custom, event)) { - let actionElement: HTMLElement = nodeElement; - const selectElements = protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select"); - if (selectElements.length > 0) { - actionElement = selectElements[0] as HTMLElement; + const imgSelectElements = nodeElement.querySelectorAll(".img--select"); + if (imgSelectElements.length > 0) { + const oldHTML = nodeElement.outerHTML; + imgSelectElements.forEach((item: HTMLElement) => { + item.style.display = ""; + }); + updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, oldHTML); + } else { + let selectElements:HTMLElement[] = Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select")); + if (selectElements.length === 0) { + selectElements = [nodeElement]; + } + updateBatchTransaction(selectElements, protyle, (e: HTMLElement) => { + e.style.textAlign = ""; + }); } - const oldHTML = actionElement.outerHTML; - actionElement.style.textAlign = "left"; - actionElement.querySelectorAll(".img").forEach((item: HTMLElement) => { - item.style.display = ""; - }); - updateTransaction(protyle, actionElement.getAttribute("data-node-id"), actionElement.outerHTML, oldHTML); event.stopPropagation(); event.preventDefault(); return; } if (matchHotKey(window.siyuan.config.keymap.editor.general.alignCenter.custom, event)) { - let actionElement: HTMLElement = nodeElement; - const selectElements = protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select"); - if (selectElements.length > 0) { - actionElement = selectElements[0] as HTMLElement; + const imgSelectElements = nodeElement.querySelectorAll(".img--select"); + if (imgSelectElements.length > 0) { + const oldHTML = nodeElement.outerHTML; + imgSelectElements.forEach((item: HTMLElement) => { + item.style.display = "block"; + }); + updateTransaction(protyle, nodeElement.getAttribute("data-node-id"), nodeElement.outerHTML, oldHTML); + } else { + let selectElements:HTMLElement[] = Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select")); + if (selectElements.length === 0) { + selectElements = [nodeElement]; + } + updateBatchTransaction(selectElements, protyle, (e: HTMLElement) => { + e.style.textAlign = "center"; + }); } - const oldHTML = actionElement.outerHTML; - actionElement.style.textAlign = "center"; - actionElement.querySelectorAll(".img").forEach((item: HTMLElement) => { - item.style.display = "block"; - }); - updateTransaction(protyle, actionElement.getAttribute("data-node-id"), actionElement.outerHTML, oldHTML); event.stopPropagation(); event.preventDefault(); return; } if (matchHotKey(window.siyuan.config.keymap.editor.general.alignRight.custom, event)) { - let actionElement: HTMLElement = nodeElement; - const selectElements = protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select"); - if (selectElements.length > 0) { - actionElement = selectElements[0] as HTMLElement; + let selectElements:HTMLElement[] = Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--select")); + if (selectElements.length === 0) { + selectElements = [nodeElement]; } - const oldHTML = actionElement.outerHTML; - actionElement.style.textAlign = "right"; - updateTransaction(protyle, actionElement.getAttribute("data-node-id"), actionElement.outerHTML, oldHTML); + updateBatchTransaction(selectElements, protyle, (e: HTMLElement) => { + e.style.textAlign = "right"; + }); event.stopPropagation(); event.preventDefault(); return; diff --git a/app/src/protyle/wysiwyg/transaction.ts b/app/src/protyle/wysiwyg/transaction.ts index c21ea1a5d..c2419d1b5 100644 --- a/app/src/protyle/wysiwyg/transaction.ts +++ b/app/src/protyle/wysiwyg/transaction.ts @@ -733,3 +733,24 @@ export const updateTransaction = (protyle: IProtyle, id: string, newHTML: string action: "update" }]); }; + +export const updateBatchTransaction = (nodeElements: Element[], protyle: IProtyle, cb: (e: HTMLElement) => void) => { + const operations: IOperation[] = []; + const undoOperations: IOperation[] = []; + nodeElements.forEach((element) => { + const id = element.getAttribute("data-node-id"); + element.classList.remove("protyle-wysiwyg--select"); + undoOperations.push({ + action: "update", + id, + data: element.outerHTML + }); + cb(element as HTMLElement); + operations.push({ + action: "update", + id, + data: element.outerHTML + }); + }); + transaction(protyle, operations, undoOperations); +}