fix: The status history in kanban mode cannot be synced to text mode, fixed #43

libs/components/editor-core/src/block-pendant/use-pendant.ts

@@ -1,41 +1,10 @@
-import { removePropertyValueRecord, setPendantHistory } from './utils';
+import { getPendantController } from './utils';
 import { AsyncBlock } from '../editor';
-import {
-    getRecastItemValue,
-    RecastMetaProperty,
-    useRecastBlock,
-} from '../recast-block';
+import { useRecastBlock } from '../recast-block';
 
 export const usePendant = (block: AsyncBlock) => {
     // const { getProperties, removeProperty } = useRecastBlockMeta();
     const recastBlock = useRecastBlock();
-    const { getValue, setValue, removeValue } = getRecastItemValue(block);
-    // const { updateSelect } = useSelectProperty();
 
-    const setPendant = async (property: RecastMetaProperty, newValue: any) => {
-        const nv = {
-            id: property.id,
-            type: property.type,
-            value: newValue,
-        };
-        await setValue(nv);
-        setPendantHistory({
-            recastBlockId: recastBlock.id,
-            blockId: block.id,
-            propertyId: property.id,
-        });
-    };
-
-    const removePendant = async (property: RecastMetaProperty) => {
-        await removeValue(property.id);
-        removePropertyValueRecord({
-            recastBlockId: block.id,
-            propertyId: property.id,
-        });
-    };
-
-    return {
-        setPendant,
-        removePendant,
-    };
+    return getPendantController(recastBlock, block);
 };

libs/components/editor-core/src/block-pendant/utils.ts

@@ -1,13 +1,16 @@
 import {
+    getRecastItemValue,
     PropertyType,
-    RecastBlockValue,
+    RecastBlock,
+    RecastItem,
+    RecastMetaProperty,
     RecastPropertyId,
     SelectOption,
 } from '../recast-block';
-import { OptionIdType, OptionType } from './types';
+import { OptionIdType, OptionType, PendantConfig, PendantTypes } from './types';
 import { pendantConfig } from './config';
-import { PendantConfig, PendantTypes } from './types';
 import { nanoid } from 'nanoid';
+import { AsyncBlock } from '../editor';
 type Props = {
     recastBlockId: string;
     blockId: string;
@@ -81,6 +84,42 @@ export const removePendantHistory = ({
     localStorage.setItem(LOCAL_STORAGE_NAME, JSON.stringify(data));
 };
 
+export const getPendantController = (
+    recastBlock: RecastBlock,
+    block: AsyncBlock | RecastItem
+) => {
+    const { setValue, removeValue } = getRecastItemValue(block);
+
+    const setPendant = async (property: RecastMetaProperty, newValue: any) => {
+        const nv = {
+            id: property.id,
+            type: property.type,
+            value: newValue,
+        };
+
+        setPendantHistory({
+            recastBlockId: recastBlock.id,
+            blockId: block.id,
+            propertyId: property.id,
+        });
+
+        return await setValue(nv);
+    };
+
+    const removePendant = async (property: RecastMetaProperty) => {
+        removePendantHistory({
+            recastBlockId: block.id,
+            propertyId: property.id,
+        });
+        return await removeValue(property.id);
+    };
+
+    return {
+        setPendant,
+        removePendant,
+    };
+};
+
 /**
  * In select pendant panel, use mock options instead of use `createSelect` when add or delete option
  * so the option`s id is index number, not `SelectOptionId`

libs/components/editor-core/src/kanban/atom.ts

@@ -6,7 +6,6 @@ import {
     PropertyType,
     RecastBlockValue,
     RecastMetaProperty,
-    RecastPropertyId,
 } from '../recast-block/types';
 import type { DefaultGroup, KanbanGroup } from './types';
 import { DEFAULT_GROUP_ID } from './types';
@@ -14,6 +13,7 @@ import {
     generateInitialOptions,
     generateRandomFieldName,
     getPendantIconsConfigByName,
+    getPendantController,
 } from '../block-pendant/utils';
 import { SelectOption } from '../recast-block';
 
@@ -106,49 +106,42 @@ export const calcCardGroup = (
 /**
  * Set group value for the card block
  */
-export const moveCardToGroup = async (
-    groupById: RecastPropertyId,
-    cardBlock: RecastItem,
-    group: KanbanGroup
-) => {
-    const { setValue, removeValue } = getRecastItemValue(cardBlock);
+export const moveCardToGroup = async ({
+    groupBy,
+    cardBlock,
+    group,
+    recastBlock,
+}: {
+    groupBy: RecastMetaProperty;
+    cardBlock: RecastItem;
+    group: KanbanGroup;
+    recastBlock: RecastBlock;
+}) => {
+    const { setPendant, removePendant } = getPendantController(
+        recastBlock,
+        cardBlock
+    );
     let success = false;
     if (group.id === DEFAULT_GROUP_ID) {
-        success = await removeValue(groupById);
+        success = await removePendant(groupBy);
         return false;
     }
 
     switch (group.type) {
         case PropertyType.Select: {
-            success = await setValue({
-                id: groupById,
-                type: group.type,
-                value: group.id,
-            });
+            success = await setPendant(groupBy, group.id);
             break;
         }
         case PropertyType.Status: {
-            success = await setValue({
-                id: groupById,
-                type: group.type,
-                value: group.id,
-            });
+            success = await setPendant(groupBy, group.id);
             break;
         }
         case PropertyType.MultiSelect: {
-            success = await setValue({
-                id: groupById,
-                type: group.type,
-                value: [group.id],
-            });
+            success = await setPendant(groupBy, [group.id]);
             break;
         }
         case PropertyType.Text: {
-            success = await setValue({
-                id: groupById,
-                type: group.type,
-                value: group.id,
-            });
+            success = await setPendant(groupBy, group.id);
             break;
         }
         default:

libs/components/editor-core/src/kanban/kanban.ts

@@ -199,7 +199,12 @@ export const useRecastKanban = () => {
                         beforeBlock: string | null,
                         afterBlock: string | null
                     ) => {
-                        await moveCardToGroup(groupBy.id, child, kanbanMap[id]);
+                        await moveCardToGroup({
+                            groupBy,
+                            cardBlock: child,
+                            group: kanbanMap[id],
+                            recastBlock,
+                        });
                         if (beforeBlock) {
                             const block = await editor.getBlockById(
                                 beforeBlock
@@ -288,7 +293,12 @@ export const useKanban = () => {
             );
             if (isChangedGroup) {
                 // 1.2 Move to the target group
-                await moveCardToGroup(groupBy.id, targetCard, targetGroup);
+                await moveCardToGroup({
+                    groupBy,
+                    cardBlock: targetCard,
+                    group: targetGroup,
+                    recastBlock,
+                });
             }
 
             // 2. Reorder the card
@@ -326,7 +336,12 @@ export const useKanban = () => {
             }
             recastBlock.append(newBlock);
             const newCard = newBlock as unknown as RecastItem;
-            await moveCardToGroup(groupBy.id, newCard, group);
+            await moveCardToGroup({
+                groupBy,
+                cardBlock: newCard,
+                group,
+                recastBlock,
+            });
         },
         [editor, groupBy.id, recastBlock]
     );