fix: table cells order on publish (#6064)

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

@@ -15,7 +15,7 @@ import { Fetcher, StrategyType } from '@/application/services/js-services/cache/
 // import { IndexeddbPersistence } from 'y-indexeddb';
 import * as Y from 'yjs';
 
-export function collabTypeToDBType(type: CollabType) {
+export function collabTypeToDBType (type: CollabType) {
   switch (type) {
     case CollabType.Folder:
       return 'folder';
@@ -44,7 +44,7 @@ const collabSharedRootKeyMap = {
   [CollabType.Empty]: YjsEditorKey.empty,
 };
 
-export function hasCollabCache(doc: YDoc) {
+export function hasCollabCache (doc: YDoc) {
   const data = doc.getMap(YjsEditorKey.data_section) as YSharedRoot;
 
   return Object.values(collabSharedRootKeyMap).some((key) => {
@@ -52,7 +52,7 @@ export function hasCollabCache(doc: YDoc) {
   });
 }
 
-export async function hasViewMetaCache(name: string) {
+export async function hasViewMetaCache (name: string) {
   const data = await db.view_metas.get(name);
 
   return !!data;
@@ -64,7 +64,7 @@ export async function getPublishViewMeta<
     child_views: PublishViewInfo[];
     ancestor_views: PublishViewInfo[];
   }
->(
+> (
   fetcher: Fetcher<T>,
   {
     namespace,
@@ -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);
@@ -124,7 +124,7 @@ export async function getPublishView<
       ancestor_views: PublishViewInfo[];
     };
   }
->(
+> (
   fetcher: Fetcher<T>,
   {
     namespace,
@@ -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);
@@ -197,7 +197,7 @@ export async function revalidatePublishViewMeta<
     child_views: PublishViewInfo[];
     ancestor_views: PublishViewInfo[];
   }
->(name: string, fetcher: Fetcher<T>) {
+> (name: string, fetcher: Fetcher<T>) {
   const { view, child_views, ancestor_views } = await fetcher();
 
   const dbView = await db.view_metas.get(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);
@@ -225,7 +225,7 @@ export async function revalidatePublishView<
     relations?: Record<DatabaseId, ViewId>;
     meta: PublishViewMetaData;
   }
->(name: string, fetcher: Fetcher<T>, collab: YDoc, rowMapDoc: Y.Doc) {
+> (name: string, fetcher: Fetcher<T>, collab: YDoc, rowMapDoc: Y.Doc) {
   const { data, meta, rows, visibleViewIds = [], relations = {} } = await fetcher();
 
   await db.view_metas.put(
@@ -237,7 +237,7 @@ export async function revalidatePublishView<
       visible_view_ids: visibleViewIds,
       database_relations: relations,
     },
-    name
+    name,
   );
 
   if (rows) {
@@ -260,16 +260,14 @@ export async function revalidatePublishView<
     }
   }
 
-  console.log('====', data);
-
   applyYDoc(collab, data);
 }
 
-export async function deleteViewMeta(name: string) {
+export async function deleteViewMeta (name: string) {
   await db.view_metas.delete(name);
 }
 
-export async function deleteView(name: string) {
+export async function deleteView (name: string) {
   console.log('deleteView', name);
   await deleteViewMeta(name);
   await closeCollabDB(name);

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

@@ -10,10 +10,12 @@ 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({
+export function yDataToSlateContent ({
   blocks,
   rootId,
   childrenMap,
@@ -24,7 +26,7 @@ export function yDataToSlateContent({
   textMap: YTextMap;
   rootId: string;
 }): Element | undefined {
-  function traverse(id: string) {
+  function traverse (id: string) {
     const block = blocks.get(id)?.toJSON() as BlockJson;
 
     if (!block) {
@@ -38,7 +40,11 @@ export function yDataToSlateContent({
 
     const slateNode = blockToSlateNode(block);
 
-    slateNode.children = children;
+    if (slateNode.type === BlockType.TableBlock) {
+      slateNode.children = sortTableCells(children as TableCellNode[]);
+    } else {
+      slateNode.children = children;
+    }
 
     if (slateNode.type === BlockType.Page) {
       return slateNode;
@@ -100,7 +106,7 @@ export function yDataToSlateContent({
   return result;
 }
 
-export function yDocToSlateContent(doc: YDoc): Element | undefined {
+export function yDocToSlateContent (doc: YDoc): Element | undefined {
   const sharedRoot = doc.getMap(YjsEditorKey.data_section) as YSharedRoot;
 
   if (!sharedRoot || sharedRoot.size === 0) return;
@@ -120,7 +126,7 @@ export function yDocToSlateContent(doc: YDoc): Element | undefined {
   });
 }
 
-export function blockToSlateNode(block: BlockJson): Element {
+export function blockToSlateNode (block: BlockJson): Element {
   const data = block.data;
   let blockData;
 
@@ -144,7 +150,7 @@ export interface YDelta {
   attributes?: Record<string, string | number | undefined | boolean>;
 }
 
-export function deltaInsertToSlateNode({ attributes, insert }: YDelta): Element | Text | Element[] {
+export function deltaInsertToSlateNode ({ attributes, insert }: YDelta): Element | Text | Element[] {
   const matchInlines = transformToInlineElement({
     insert,
     attributes,
@@ -164,7 +170,7 @@ export function deltaInsertToSlateNode({ attributes, insert }: YDelta): Element
   };
 }
 
-function dealWithEmptyAttribute(attributes: Record<string, string | number | undefined | boolean>) {
+function dealWithEmptyAttribute (attributes: Record<string, string | number | undefined | boolean>) {
   for (const key in attributes) {
     if (!attributes[key]) {
       delete attributes[key];
@@ -172,7 +178,7 @@ function dealWithEmptyAttribute(attributes: Record<string, string | number | und
   }
 }
 
-export function transformToInlineElement(op: YDelta): Element[] {
+export function transformToInlineElement (op: YDelta): Element[] {
   const attributes = op.attributes;
 
   if (!attributes) return [];

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;