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/model/src/blocks/image/image-model.ts

@@ -9,6 +9,7 @@ import {
   defineBlockSchema,
 } from '@blocksuite/store';
 
+import type { TextAlign } from '../../consts';
 import type { BlockMeta } from '../../utils/types.js';
 import { ImageBlockTransformer } from './image-transformer.js';
 
@@ -20,6 +21,7 @@ export type ImageBlockProps = {
   rotate: number;
   size?: number;
   comments?: Record<string, boolean>;
+  textAlign?: TextAlign;
 } & Omit<GfxCommonBlockProps, 'scale'> &
   BlockMeta;
 
@@ -34,6 +36,7 @@ const defaultImageProps: ImageBlockProps = {
   rotate: 0,
   size: -1,
   comments: undefined,
+  textAlign: undefined,
   'meta:createdAt': undefined,
   'meta:createdBy': undefined,
   'meta:updatedAt': undefined,

blocksuite/affine/model/src/blocks/list/list-model.ts

@@ -5,6 +5,7 @@ import {
   defineBlockSchema,
 } from '@blocksuite/store';
 
+import type { TextAlign } from '../../consts';
 import type { BlockMeta } from '../../utils/types';
 
 // `toggle` type has been deprecated, do not use it
@@ -13,6 +14,7 @@ export type ListType = 'bulleted' | 'numbered' | 'todo' | 'toggle';
 export type ListProps = {
   type: ListType;
   text: Text;
+  textAlign?: TextAlign;
   checked: boolean;
   collapsed: boolean;
   order: number | null;
@@ -25,6 +27,7 @@ export const ListBlockSchema = defineBlockSchema({
     ({
       type: 'bulleted',
       text: internal.Text(),
+      textAlign: undefined,
       checked: false,
       collapsed: false,
 

blocksuite/affine/model/src/blocks/paragraph/paragraph-model.ts

@@ -5,6 +5,7 @@ import {
   type Text,
 } from '@blocksuite/store';
 
+import type { TextAlign } from '../../consts';
 import type { BlockMeta } from '../../utils/types';
 
 export type ParagraphType =
@@ -19,6 +20,7 @@ export type ParagraphType =
 
 export type ParagraphProps = {
   type: ParagraphType;
+  textAlign?: TextAlign;
   text: Text;
   collapsed: boolean;
   comments?: Record<string, boolean>;
@@ -29,6 +31,7 @@ export const ParagraphBlockSchema = defineBlockSchema({
   props: (internal): ParagraphProps => ({
     type: 'text',
     text: internal.Text(),
+    textAlign: undefined,
     collapsed: false,
     comments: undefined,
     'meta:createdAt': undefined,

blocksuite/affine/model/src/blocks/table/table-model.ts

@@ -5,6 +5,7 @@ import {
   defineBlockSchema,
 } from '@blocksuite/store';
 
+import type { TextAlign } from '../../consts';
 import type { BlockMeta } from '../../utils/types';
 
 export type TableCell = {
@@ -30,6 +31,7 @@ export interface TableBlockProps extends BlockMeta {
   // key = `${rowId}:${columnId}`
   cells: Record<string, TableCell>;
   comments?: Record<string, boolean>;
+  textAlign?: TextAlign;
 }
 
 export interface TableCellSerialized {
@@ -53,6 +55,7 @@ export const TableBlockSchema = defineBlockSchema({
     columns: {},
     cells: {},
     comments: undefined,
+    textAlign: undefined,
     'meta:createdAt': undefined,
     'meta:createdBy': undefined,
     'meta:updatedAt': undefined,