refactor: refactor logic of value history

libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx

@@ -34,18 +34,17 @@ export const PendantHistoryPanel = ({
     useEffect(() => {
         const init = async () => {
             const currentBlockValues = getRecastItemValue(block).getAllValue();
-            const allProperties = getProperties();
-            const missProperties = allProperties.filter(
+            const missValues = getProperties().filter(
                 property => !currentBlockValues.find(v => v.id === property.id)
             );
-            const pendantHistory = getValueHistory({
+            const valueHistory = getValueHistory({
                 recastBlockId: recastBlock.id,
             });
-            const historyMap = missProperties.reduce<{
-                [key: RecastPropertyId]: string;
+            const historyMap = missValues.reduce<{
+                [key: RecastPropertyId]: string[];
             }>((history, property) => {
-                if (pendantHistory[property.id]) {
-                    history[property.id] = pendantHistory[property.id];
+                if (valueHistory[property.id]) {
+                    history[property.id] = valueHistory[property.id];
                 }
 
                 return history;
@@ -54,18 +53,30 @@ export const PendantHistoryPanel = ({
             const blockHistory = (
                 await Promise.all(
                     Object.entries(historyMap).map(
-                        async ([propertyId, blockId]) => {
-                            const latestValueBlock = (
-                                await groupBlock.children()
-                            ).find((block: AsyncBlock) => block.id === blockId);
+                        async ([propertyId, blockIds]) => {
+                            const blocks = await groupBlock.children();
+                            const latestChangeBlock = blockIds
+                                .reverse()
+                                .reduce<AsyncBlock>((block, id) => {
+                                    if (!block) {
+                                        return blocks.find(
+                                            block => block.id === id
+                                        );
+                                    }
+                                    return block;
+                                }, null);
 
-                            return getRecastItemValue(
-                                latestValueBlock
-                            ).getValue(propertyId as RecastPropertyId);
+                            if (latestChangeBlock) {
+                                return getRecastItemValue(
+                                    latestChangeBlock
+                                ).getValue(propertyId as RecastPropertyId);
+                            }
+                            return null;
                         }
                     )
                 )
             ).filter(v => v);
+
             setHistory(blockHistory);
         };
 

libs/components/editor-core/src/recast-block/history.ts

@@ -9,7 +9,7 @@ type Props = {
 
 type HistoryStorageMap = {
     [recastBlockId: string]: {
-        [propertyId: RecastPropertyId]: string;
+        [propertyId: RecastPropertyId]: string[];
     };
 };
 
@@ -21,18 +21,34 @@ const ensureLocalStorage = () => {
         localStorage.setItem(LOCAL_STORAGE_NAME, JSON.stringify({}));
     }
 };
+const ensureHistoryAtom = (
+    data: HistoryStorageMap,
+    recastBlockId: string,
+    propertyId: RecastPropertyId
+): HistoryStorageMap => {
+    if (!data[recastBlockId]) {
+        data[recastBlockId] = {};
+    }
+    if (!data[recastBlockId][propertyId]) {
+        data[recastBlockId][propertyId] = [];
+    }
+    return data;
+};
 
 export const setHistory = ({ recastBlockId, blockId, propertyId }: Props) => {
     ensureLocalStorage();
     const data: HistoryStorageMap = JSON.parse(
         localStorage.getItem(LOCAL_STORAGE_NAME) as string
     );
+    ensureHistoryAtom(data, recastBlockId, propertyId);
+    const propertyHistory = data[recastBlockId][propertyId];
 
-    if (!data[recastBlockId]) {
-        data[recastBlockId] = {};
+    if (propertyHistory.includes(blockId)) {
+        const idIndex = propertyHistory.findIndex(id => id === blockId);
+        propertyHistory.splice(idIndex, 1);
     }
-    const propertyValueRecord = data[recastBlockId];
-    propertyValueRecord[propertyId] = blockId;
+
+    propertyHistory.push(blockId);
 
     localStorage.setItem(LOCAL_STORAGE_NAME, JSON.stringify(data));
 };
@@ -48,20 +64,21 @@ export const getHistory = ({ recastBlockId }: { recastBlockId: string }) => {
 
 export const removeHistory = ({
     recastBlockId,
+    blockId,
     propertyId,
-}: {
-    recastBlockId: string;
-    propertyId: RecastPropertyId;
-}) => {
+}: Props) => {
     ensureLocalStorage();
     const data: HistoryStorageMap = JSON.parse(
         localStorage.getItem(LOCAL_STORAGE_NAME) as string
     );
-    if (!data[recastBlockId]) {
-        return;
-    }
+    ensureHistoryAtom(data, recastBlockId, propertyId);
 
-    delete data[recastBlockId][propertyId];
+    const propertyHistory = data[recastBlockId][propertyId];
+
+    if (propertyHistory.includes(blockId)) {
+        const idIndex = propertyHistory.findIndex(id => id === blockId);
+        propertyHistory.splice(idIndex, 1);
+    }
 
     localStorage.setItem(LOCAL_STORAGE_NAME, JSON.stringify(data));
 };

libs/components/editor-core/src/recast-block/property.ts

@@ -260,6 +260,7 @@ export const getRecastItemValue = (block: RecastItem | AsyncBlock) => {
         removeHistory({
             recastBlockId: block.id,
             propertyId: propertyId,
+            blockId: block.id,
         });
 
         return recastItem.setProperty(TABLE_VALUES_KEY, restProps);