From 2a2dc903c1bdc24decaaa3db75199a64a39b70aa Mon Sep 17 00:00:00 2001 From: "Kilu.He" <108015703+qinluhe@users.noreply.github.com> Date: Sun, 25 Aug 2024 17:27:44 +0800 Subject: [PATCH] fix: table cells order on publish (#6064) --- .../services/js-services/cache/index.ts | 28 +++++++++---------- .../application/slate-yjs/utils/convert.ts | 22 +++++++++------ .../src/application/slate-yjs/utils/table.ts | 16 +++++++++++ .../components/blocks/table/TableCell.tsx | 5 ++-- 4 files changed, 46 insertions(+), 25 deletions(-) create mode 100644 frontend/appflowy_web_app/src/application/slate-yjs/utils/table.ts diff --git a/frontend/appflowy_web_app/src/application/services/js-services/cache/index.ts b/frontend/appflowy_web_app/src/application/services/js-services/cache/index.ts index 2ab02a750f..2c8c39f57a 100644 --- a/frontend/appflowy_web_app/src/application/services/js-services/cache/index.ts +++ b/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, { 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, { 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) { +> (name: string, fetcher: Fetcher) { 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; meta: PublishViewMetaData; } ->(name: string, fetcher: Fetcher, collab: YDoc, rowMapDoc: Y.Doc) { +> (name: string, fetcher: Fetcher, 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); diff --git a/frontend/appflowy_web_app/src/application/slate-yjs/utils/convert.ts b/frontend/appflowy_web_app/src/application/slate-yjs/utils/convert.ts index 47108f4cab..114b52d013 100644 --- a/frontend/appflowy_web_app/src/application/slate-yjs/utils/convert.ts +++ b/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; } -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) { +function dealWithEmptyAttribute (attributes: Record) { for (const key in attributes) { if (!attributes[key]) { delete attributes[key]; @@ -172,7 +178,7 @@ function dealWithEmptyAttribute(attributes: Record { + 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; + }); +} diff --git a/frontend/appflowy_web_app/src/components/editor/components/blocks/table/TableCell.tsx b/frontend/appflowy_web_app/src/components/editor/components/blocks/table/TableCell.tsx index 81ba6fc509..1ee5e0af76 100644 --- a/frontend/appflowy_web_app/src/components/editor/components/blocks/table/TableCell.tsx +++ b/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} ); - }) + }), ); export default TableCell;