feat(table-cells): Improve cell alignment and preserve styles during merge/split operations

- Change default vertical alignment from top to middle in table cells
- Add center text alignment to table cell styling
- Extend CellStyleOverrides type to preserve original styles in merged cells
- Update mergeCells function to capture and store cell styles alongside content
- Modify splitCell function to restore both content and original styles when unmerging
- Create cell data map to track text and style for each merged cell position
- Apply original styles to recovered cells after split operation
- Update cellStyleToCSS utility to enforce center text alignment by default
- Enhance JSDoc comments to reflect style preservation in merge/split workflows

src/components/Editor/blocks/TableCell.css

@@ -5,7 +5,8 @@
 .table-cell {
   border: 1px solid #d9d9d9;
   padding: 8px 12px;
-  vertical-align: top;
+  vertical-align: middle;
+  text-align: center;
   position: relative;
   transition: all 0.2s ease;
 }

src/components/Editor/blocks/TableCell.tsx

@@ -93,6 +93,7 @@ export const TableCell: React.FC<TableCellProps> = ({
         baseStyle={{
           fontSize: '12px',
           lineHeight: 1.5,
+          textAlign: 'center', // 强制居中对齐
         }}
       />
     </td>

src/types/editor.ts

@@ -104,11 +104,12 @@ export interface CellStyleOverrides extends StyleOverrides {
   border_color?: string;
   border_width?: number;
   vertical_align?: 'top' | 'center' | 'bottom';
-  // 合并单元格时保存的原始数据
+  // 合并单元格时保存的原始数据(包含text和style)
   _mergedCells?: Array<{
     rowOffset: number;
     colOffset: number;
     text: string | RichText[];
+    style?: CellStyleOverrides; // 保存原始样式
   }>;
 }
 

src/utils/blockOperations.ts

@@ -241,7 +241,7 @@ export function deleteTableColumn(table: TableBlock, colIndex: number): TableBlo
  * 合并单元格
  * 
  * 支持横向合并(colspan)和纵向合并(rowspan)
- * 合并时会保存所有被合并单元格的原始内容,以便拆分时恢复
+ * 合并时会保存所有被合并单元格的原始内容和样式,以便拆分时恢复
  * 
  * @param table 表格块
  * @param startRow 起始行
@@ -254,11 +254,11 @@ export function deleteTableColumn(table: TableBlock, colIndex: number): TableBlo
  * ```ts
  * // 横向合并: a + b (第0行,第0-1列)
  * mergeCells(table, 0, 0, 0, 1);
- * // 结果: a单元格 colspan=2, 保存b的内容到 _mergedCells
+ * // 结果: a单元格 colspan=2, 保存b的内容和样式到 _mergedCells
  * 
  * // 纵向合并: a + d (第0-1行,第0列)
  * mergeCells(table, 0, 0, 1, 0);
- * // 结果: a单元格 rowspan=2, 保存d的内容到 _mergedCells
+ * // 结果: a单元格 rowspan=2, 保存d的内容和样式到 _mergedCells
  * ```
  */
 export function mergeCells(
@@ -268,11 +268,12 @@ export function mergeCells(
   endRow: number,
   endCol: number
 ): TableBlock {
-  // 收集所有被合并单元格的内容(保存位置偏移量)
+  // 收集所有被合并单元格的内容和样式(保存位置偏移量)
   const mergedCells: Array<{
     rowOffset: number;
     colOffset: number;
     text: string | RichText[];
+    style: any; // 保存原始样式
   }> = [];
   
   // 收集主单元格内容用于显示
@@ -286,11 +287,12 @@ export function mergeCells(
             ? cell.text 
             : cell.text.map(seg => seg.text).join('');
           
-          // 保存所有单元格的原始数据(包括主单元格)
+          // 保存所有单元格的原始数据和样式(包括主单元格)
           mergedCells.push({
             rowOffset: rowIdx - startRow,
             colOffset: colIdx - startCol,
             text: cell.text,
+            style: { ...cell.style }, // 深拷贝样式
           });
           
           // 用于显示的文本
@@ -321,7 +323,7 @@ export function mergeCells(
           colspan: endCol - startCol + 1,
           style: {
             ...cell.style,
-            _mergedCells: mergedCells, // 保存所有单元格的原始内容
+            _mergedCells: mergedCells, // 保存所有单元格的原始内容和样式
           },
         };
       }
@@ -347,7 +349,7 @@ export function mergeCells(
 /**
  * 拆分单元格
  * 
- * 将已合并的单元格拆分回独立单元格,并恢复原始内容到对应位置
+ * 将已合并的单元格拆分回独立单元格,并恢复原始内容和样式到对应位置
  * 
  * @param table 表格块
  * @param rowIndex 单元格所在行
@@ -358,11 +360,11 @@ export function mergeCells(
  * ```ts
  * // 拆分横向合并的单元格 (a+b)
  * splitCell(table, 0, 0);
- * // 结果: a单元格恢复为普通单元格(内容为原始a), b单元格恢复(内容为原始b)
+ * // 结果: a单元格恢复为普通单元格(内容为原始a,样式为原始a样式), b单元格恢复(内容为原始b,样式为原始b样式)
  * 
  * // 拆分纵向合并的单元格 (a+d)  
  * splitCell(table, 0, 0);
- * // 结果: a单元格恢复为普通单元格(内容为原始a), d单元格恢复(内容为原始d)
+ * // 结果: a单元格恢复为普通单元格(内容为原始a,样式为原始a样式), d单元格恢复(内容为原始d,样式为原始d样式)
  * ```
  */
 export function splitCell(
@@ -384,14 +386,14 @@ export function splitCell(
   const rowspan = targetCell.rowspan || 1;
   const colspan = targetCell.colspan || 1;
   
-  // 获取保存的原始单元格数据
+  // 获取保存的原始单元格数据(包含text和style)
   const mergedCells = targetCell.style._mergedCells || [];
   
-  // 创建一个映射,用于快速查找原始内容
-  const cellDataMap = new Map<string, string | RichText[]>();
-  mergedCells.forEach(({ rowOffset, colOffset, text }) => {
+  // 创建一个映射,用于快速查找原始内容和样式
+  const cellDataMap = new Map<string, { text: string | RichText[]; style: any }>();
+  mergedCells.forEach(({ rowOffset, colOffset, text, style }) => {
     const key = `${rowOffset}-${colOffset}`;
-    cellDataMap.set(key, text);
+    cellDataMap.set(key, { text, style: style || {} });
   });
   
   const rows = table.content.rows.map((row, rowIdx) => {
@@ -411,12 +413,14 @@ export function splitCell(
       const colOffset = colIdx - colIndex;
       const key = `${rowOffset}-${colOffset}`;
       
-      // 从保存的数据中恢复原始内容
-      const originalText = cellDataMap.get(key) || '';
+      // 从保存的数据中恢复原始内容和样式
+      const cellData = cellDataMap.get(key);
+      const originalText = cellData?.text || '';
+      const originalStyle = cellData?.style || {};
       
       // 主单元格:恢复为普通单元格,清除合并标记
       if (rowIdx === rowIndex && colIdx === colIndex) {
-        const newStyle = { ...cell.style };
+        const newStyle = { ...originalStyle };
         delete newStyle._mergedCells; // 清除保存的合并数据
         
         return {
@@ -424,14 +428,18 @@ export function splitCell(
           text: originalText,
           rowspan: 1,
           colspan: 1,
-          style: newStyle,
+          style: newStyle, // 使用原始样式
         };
       }
       
-      // 被合并的单元格:恢复为独立单元格,并恢复原始内容
+      // 被合并的单元格:恢复为独立单元格,并恢复原始内容和样式
+      const recoveredStyle = { ...originalStyle };
+      delete recoveredStyle._mergedCells;
+      
       return {
         ...createEmptyCell(),
         text: originalText,
+        style: recoveredStyle, // 使用原始样式
       };
     });
     

src/utils/styleResolver.ts

@@ -144,7 +144,13 @@ export function cellStyleToCSS(style: CellStyleOverrides): React.CSSProperties {
   if (style.background_color) css.backgroundColor = `#${style.background_color}`;
   if (style.border_color) css.borderColor = `#${style.border_color}`;
   if (style.border_width) css.borderWidth = `${style.border_width}px`;
-  if (style.vertical_align) css.verticalAlign = style.vertical_align;
+  
+  // 垂直对齐：默认居中
+  css.verticalAlign = style.vertical_align || 'middle';
+  
+  // 水平对齐：强制覆盖为居中（忽略单元格原有的 align 样式）
+  // 注释：如果希望保留原有的对齐方式，可以改为：css.textAlign = style.align || 'center';
+  css.textAlign = 'center';
   
   return css;
 }