Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: table cells order on publish (#6064)

Browse Source
This commit is contained in:
Kilu.He 2024-08-25 17:27:44 +08:00 committed by GitHub
parent d1ed45c312
commit 2a2dc903c1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 46 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/appflowy_web_app/src/application/services/js-services/cache/index.ts vendored
View File

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

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

@ -10,10 +10,12 @@ import {
BlockData, BlockData,
BlockType, BlockType,
} from '@/application/collab.type'; } from '@/application/collab.type';
import { sortTableCells } from '@/application/slate-yjs/utils/table';
import { BlockJson } from '@/application/slate-yjs/utils/types'; import { BlockJson } from '@/application/slate-yjs/utils/types';
import { TableCellNode } from '@/components/editor/editor.type';
import { Element, Text } from 'slate'; import { Element, Text } from 'slate';
export function yDataToSlateContent({ export function yDataToSlateContent ({
blocks, blocks,
rootId, rootId,
childrenMap, childrenMap,
@ -24,7 +26,7 @@ export function yDataToSlateContent({
textMap: YTextMap; textMap: YTextMap;
rootId: string; rootId: string;
}): Element | undefined { }): Element | undefined {
function traverse(id: string) { function traverse (id: string) {
const block = blocks.get(id)?.toJSON() as BlockJson; const block = blocks.get(id)?.toJSON() as BlockJson;
if (!block) { if (!block) {
@ -38,7 +40,11 @@ export function yDataToSlateContent({
const slateNode = blockToSlateNode(block); const slateNode = blockToSlateNode(block);
if (slateNode.type === BlockType.TableBlock) {
slateNode.children = sortTableCells(children as TableCellNode[]);
} else {
slateNode.children = children; slateNode.children = children;
}
if (slateNode.type === BlockType.Page) { if (slateNode.type === BlockType.Page) {
return slateNode; return slateNode;
@ -100,7 +106,7 @@ export function yDataToSlateContent({
return result; 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; const sharedRoot = doc.getMap(YjsEditorKey.data_section) as YSharedRoot;
if (!sharedRoot || sharedRoot.size === 0) return; 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; const data = block.data;
let blockData; let blockData;
@ -144,7 +150,7 @@ export interface YDelta {
attributes?: Record<string, string | number | undefined | boolean>; 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({ const matchInlines = transformToInlineElement({
insert, insert,
attributes, 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) { for (const key in attributes) {
if (!attributes[key]) { if (!attributes[key]) {
delete 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; const attributes = op.attributes;
if (!attributes) return []; if (!attributes) return [];

16
frontend/appflowy_web_app/src/application/slate-yjs/utils/table.ts Normal file
View File

@ -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;
});
}

5
frontend/appflowy_web_app/src/components/editor/components/blocks/table/TableCell.tsx
View File

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