feat: implement textAlign property (#11790)

for paragraph blocks, image blocks, list blocks, and table blocks

Should fix #8617 and #11254.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added text alignment options (left, center, right) for paragraph,
list, image, note, and table blocks.
- Introduced alignment controls in toolbars and slash menus for easier
formatting.
- Enabled keyboard shortcuts for quick text alignment changes (supports
Mac and Windows).
- **Localization**
- Added English, Simplified Chinese, and Traditional Chinese
translations for new alignment commands and shortcuts.
- **Style**
  - Blocks now visually reflect selected text alignment in their layout.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: L-Sun <zover.v@gmail.com>

blocksuite/affine/blocks/note/src/note-keymap.ts

@@ -5,7 +5,10 @@ import {
   NoteBlockSchema,
   ParagraphBlockModel,
 } from '@blocksuite/affine-model';
-import { textConversionConfigs } from '@blocksuite/affine-rich-text';
+import {
+  textAlignConfigs,
+  textConversionConfigs,
+} from '@blocksuite/affine-rich-text';
 import {
   focusBlockEnd,
   focusBlockStart,
@@ -36,6 +39,7 @@ import {
   indentBlocks,
   selectBlock,
   selectBlocksBetween,
+  updateBlockAlign,
   updateBlockType,
 } from './commands';
 import { moveBlockConfigs } from './move-block';
@@ -157,6 +161,36 @@ class NoteKeymap {
       );
   };
 
+  private readonly _bindTextAlignHotKey = () => {
+    return textAlignConfigs.reduce(
+      (acc, item) => {
+        const keymap = item.hotkey!.reduce(
+          (acc, key) => {
+            return {
+              ...acc,
+              [key]: ctx => {
+                ctx.get('defaultState').event.preventDefault();
+                const [result] = this._std.command
+                  .chain()
+                  .pipe(updateBlockAlign, { textAlign: item.textAlign })
+                  .run();
+
+                return result;
+              },
+            };
+          },
+          {} as Record<string, UIEventHandler>
+        );
+
+        return {
+          ...acc,
+          ...keymap,
+        };
+      },
+      {} as Record<string, UIEventHandler>
+    );
+  };
+
   private _focusBlock: BlockComponent | null = null;
 
   private readonly _getClosestNoteByBlockId = (blockId: string) => {
@@ -568,6 +602,7 @@ class NoteKeymap {
       ...this._bindMoveBlockHotKey(),
       ...this._bindQuickActionHotKey(),
       ...this._bindTextConversionHotKey(),
+      ...this._bindTextAlignHotKey(),
       Tab: ctx => {
         const [success] = this.std.command.exec(indentBlocks);