fix: table cells order on publish (#6064)

frontend/appflowy_web_app/src/application/services/js-services/cache/index.ts

@@ -73,7 +73,7 @@ export async function getPublishViewMeta<
     namespace: string;
     publishName: string;
   },
-  strategy: StrategyType = StrategyType.CACHE_AND_NETWORK
+  strategy: StrategyType = StrategyType.CACHE_AND_NETWORK,
 ) {
   const name = `${namespace}_${publishName}`;
   const exist = await hasViewMetaCache(name);
@@ -133,7 +133,7 @@ export async function getPublishView<
     namespace: string;
     publishName: string;
   },
-  strategy: StrategyType = StrategyType.CACHE_AND_NETWORK
+  strategy: StrategyType = StrategyType.CACHE_AND_NETWORK,
 ) {
   const name = `${namespace}_${publishName}`;
   const doc = await openCollabDB(name);
@@ -211,7 +211,7 @@ export async function revalidatePublishViewMeta<
       visible_view_ids: dbView?.visible_view_ids ?? [],
       database_relations: dbView?.database_relations ?? {},
     },
-    name
+    name,
   );
 
   return db.view_metas.get(name);
@@ -237,7 +237,7 @@ export async function revalidatePublishView<
       visible_view_ids: visibleViewIds,
       database_relations: relations,
     },
-    name
+    name,
   );
 
   if (rows) {
@@ -260,8 +260,6 @@ export async function revalidatePublishView<
     }
   }
 
-  console.log('====', data);
-
   applyYDoc(collab, data);
 }
 

frontend/appflowy_web_app/src/application/slate-yjs/utils/convert.ts

@@ -10,7 +10,9 @@ import {
   BlockData,
   BlockType,
 } from '@/application/collab.type';
+import { sortTableCells } from '@/application/slate-yjs/utils/table';
 import { BlockJson } from '@/application/slate-yjs/utils/types';
+import { TableCellNode } from '@/components/editor/editor.type';
 import { Element, Text } from 'slate';
 
 export function yDataToSlateContent ({
@@ -38,7 +40,11 @@ export function yDataToSlateContent({
 
     const slateNode = blockToSlateNode(block);
 
+    if (slateNode.type === BlockType.TableBlock) {
+      slateNode.children = sortTableCells(children as TableCellNode[]);
+    } else {
       slateNode.children = children;
+    }
 
     if (slateNode.type === BlockType.Page) {
       return slateNode;

frontend/appflowy_web_app/src/application/slate-yjs/utils/table.ts

@@ -0,0 +1,16 @@
+import { TableCellNode } from '@/components/editor/editor.type';
+import { isUndefined } from 'lodash-es';
+
+export function sortTableCells (cells: TableCellNode[]): TableCellNode[] {
+  return cells.sort((a, b) => {
+    if (isUndefined(a.data.colPosition) || isUndefined(a.data.rowPosition) || isUndefined(b.data.colPosition) || isUndefined(b.data.rowPosition)) {
+      return 0;
+    }
+
+    if (a.data.colPosition === b.data.colPosition) {
+      return a.data.rowPosition - b.data.rowPosition;
+    }
+
+    return a.data.colPosition - b.data.colPosition;
+  });
+}

frontend/appflowy_web_app/src/components/editor/components/blocks/table/TableCell.tsx

@@ -13,16 +13,17 @@ const TableCell = memo(
         ref={ref}
         {...attributes}
         style={{
+          fontSize: '15px',
           ...attributes.style,
           backgroundColor:
             rowBackgroundColor || colBackgroundColor ? renderColor(colBackgroundColor || rowBackgroundColor) : undefined,
         }}
-        className={`relative table-cell text-left ${className || ''}`}
+        className={`relative px-1 table-cell text-left ${className || ''}`}
       >
         {children}
       </div>
     );
-  })
+  }),
 );
 
 export default TableCell;