:art: fix https://github.com/siyuan-note/siyuan/issues/5554

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]);
     }
 

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;

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);
+}