feat(editor2): entity IDs conflicting when restoring a state saved in previous sessions

Author: guansss

src/components/editor2/EditorToolbar.tsx

@@ -24,6 +24,7 @@ import { AppToaster } from '../Toaster'
 import { Settings } from './Settings'
 import { editorAtoms, historyAtom, useEdit } from './editor-state'
 import { useHistoryControls, useHistoryValue } from './history'
+import { hydrateOperation } from './reconciliation'
 import { SourceEditorButton } from './source/SourceEditor'
 import {
   AUTO_SAVE_INTERVAL,
@@ -191,7 +192,10 @@ const AutoSaveButton = (buttonProps: ButtonProps) => {
                   key={record.t}
                   onClick={() => {
                     edit(() => {
-                      setEditorState(record.v)
+                      setEditorState({
+                        ...record.v,
+                        operation: hydrateOperation(record.v.operation),
+                      })
                       return {
                         action: 'restore',
                         desc: i18n.actions.editor2.restore_from_autosave,

src/components/editor2/reconciliation.ts

@@ -1,12 +1,7 @@
 import camelcaseKeys from 'camelcase-keys'
 import { atom } from 'jotai'
 import { defaults, uniqueId } from 'lodash-es'
-import {
-  CamelCasedPropertiesDeep,
-  PartialDeep,
-  SetOptional,
-  SetRequired,
-} from 'type-fest'
+import { PartialDeep, SetOptional, SetRequired } from 'type-fest'
 
 import { CopilotDocV1 } from '../../models/copilot.schema'
 import { FavGroup, favGroupAtom } from '../../store/useFavGroups'
@@ -36,6 +31,14 @@ export type WithPartialCoordinates<T> = T extends {
 
 export type WithId<T = {}> = T extends never ? never : T & { id: string }
 
+type DehydratedEditorOperation = WithoutIdDeep<EditorOperation>
+
+type WithoutIdDeep<T> = T extends unknown[]
+  ? { [K in keyof T]: WithoutIdDeep<T[K]> }
+  : T extends object
+    ? Omit<{ [K in keyof T]: WithoutIdDeep<T[K]> }, 'id'>
+    : T
+
 export function createAction(
   initialValues: SetRequired<Partial<Omit<EditorAction, 'id'>>, 'type'>,
 ) {
@@ -168,33 +171,64 @@ export const editorFavGroupsAtom = atom(
   },
 )
 
-export function toEditorOperation(
-  source: CopilotOperationLoose,
+/**
+ * Converts the operation to a dehydrated format that is suitable
+ * for storage or transmission. Essentially, it strips all `id` fields
+ * which only makes sense in the context of the editor.
+ */
+export function dehydrateOperation(
+  source: EditorOperation,
+): DehydratedEditorOperation {
+  return {
+    ...source,
+    opers: source.opers.map(({ id, ...operator }) => operator),
+    groups: source.groups.map(({ id, opers, ...group }) => ({
+      ...group,
+      opers: opers.map(({ id, ...operator }) => operator),
+    })),
+    actions: source.actions.map(({ id, ...action }) => action),
+  }
+}
+
+export function hydrateOperation(
+  source: DehydratedEditorOperation,
 ): EditorOperation {
-  const camelCased = camelcaseKeys(source, { deep: true })
-  const operation = JSON.parse(JSON.stringify(camelCased))
-  const converted = {
-    ...operation,
-    opers: operation.opers.map((operator) => ({
+  return {
+    ...source,
+    opers: source.opers.map((operator) => ({
       ...operator,
       id: uniqueId(),
     })),
-    groups: operation.groups.map((group) => ({
+    groups: source.groups.map((group) => ({
       ...group,
       id: uniqueId(),
-      opers: group.opers.map((operator) => ({ ...operator, id: uniqueId() })),
+      opers: group.opers.map((operator) => ({
+        ...operator,
+        id: uniqueId(),
+      })),
     })),
+    actions: source.actions.map((action) => ({
+      ...action,
+      id: uniqueId(),
+    })),
+  }
+}
+
+export function toEditorOperation(
+  source: CopilotOperationLoose,
+): EditorOperation {
+  const camelCased = camelcaseKeys(source, { deep: true })
+  const operation = JSON.parse(JSON.stringify(camelCased)) as typeof camelCased
+  const converted = {
+    ...operation,
     actions: operation.actions.map((action, index) => {
       const {
         preDelay,
         postDelay,
         rearDelay,
         ...newAction
-      }: EditorAction &
-        CamelCasedPropertiesDeep<CopilotOperationLoose['actions'][number]> = {
-        ...action,
-        id: uniqueId(),
-      }
+      }: WithoutIdDeep<EditorAction> & (typeof camelCased)['actions'][number] =
+        action
       // intermediatePostDelay 等于当前动作的 preDelay
       if (preDelay !== undefined) {
         newAction.intermediatePostDelay = preDelay
@@ -209,11 +243,11 @@ export function toEditorOperation(
           newAction.intermediatePreDelay = prevAction.postDelay
         }
       }
-      return newAction satisfies EditorAction
+      return newAction satisfies WithoutIdDeep<EditorAction>
     }),
   }
 
-  return converted
+  return hydrateOperation(converted)
 }
 
 /**
@@ -223,22 +257,17 @@ export function toMaaOperation(
   operation: EditorOperation,
 ): CopilotOperationLoose {
   operation = JSON.parse(JSON.stringify(operation))
+  const dehydrated = dehydrateOperation(operation)
   const converted = {
-    ...operation,
-    opers: operation.opers.map(({ id, ...operator }) => operator),
-    groups: operation.groups.map(({ id, opers, ...group }) => ({
-      ...group,
-      opers: opers.map(({ id, ...operator }) => operator),
-    })),
-    actions: operation.actions.map((action, index, actions) => {
+    ...dehydrated,
+    actions: dehydrated.actions.map((action, index, actions) => {
       type Action = PartialDeep<WithPartialCoordinates<CopilotDocV1.Action>>
       const {
         _id,
-        id,
         intermediatePreDelay,
         intermediatePostDelay,
         ...newAction
-      }: EditorAction & Action = action
+      }: WithoutIdDeep<EditorAction> & Action = action
       // preDelay 等于当前动作的 intermediatePostDelay
       if (intermediatePostDelay !== undefined) {
         newAction.preDelay = intermediatePostDelay

src/components/editor2/useAutoSave.ts

@@ -7,6 +7,7 @@ import { i18n } from '../../i18n/i18n'
 import { formatError } from '../../utils/error'
 import { AppToaster } from '../Toaster'
 import { EditorState, defaultEditorState, editorAtoms } from './editor-state'
+import { dehydrateOperation } from './reconciliation'
 
 type Archive = Record[]
 
@@ -34,23 +35,29 @@ export const editorArchiveAtom = atomWithStorage(
   [] as Archive,
 )
 export const editorSaveAtom = atom(noop, (get, set) => {
+  const state = get(editorAtoms.editor)
+  const dehydratedState = {
+    ...state,
+    operation: dehydrateOperation(state.operation),
+  }
+
   // this will drop undefined properties but we don't care
-  const currentStringified = JSON.stringify(get(editorAtoms.editor))
+  const stringifiedState = JSON.stringify(dehydratedState)
 
-  if (currentStringified === defaultEditorStateStringified) {
+  if (stringifiedState === defaultEditorStateStringified) {
     throw new NotChangedError()
   }
 
   const records = get(editorArchiveAtom)
   const latestRecord = first(records)
 
-  if (latestRecord && JSON.stringify(latestRecord.v) === currentStringified) {
+  if (latestRecord && JSON.stringify(latestRecord.v) === stringifiedState) {
     throw new NotChangedError()
   }
 
-  const current: EditorState = JSON.parse(currentStringified)
+  const finalState: EditorState = JSON.parse(stringifiedState)
   const record: Record = {
-    v: current,
+    v: finalState,
     t: Date.now(),
   }
   const newArchive = [record, ...records].slice(0, AUTO_SAVE_LIMIT)

src/components/editor2/validation/schema.ts

@@ -67,10 +67,23 @@ const groupStrict = group.extend({
 const actionShape = {
   name: z.string().min(1).optional(),
   location: z
-    .tuple([z.number().int().optional(), z.number().int().optional()])
+    .tuple([
+      z.number().int().or(z.undefined()),
+      z.number().int().or(z.undefined()),
+    ])
+    .optional(),
+
+  // We have to use `distance: z.string()` here and later validate it in `.check()`,
+  // because if we use `distance: z.enum()` here, it becomes the second discriminator key,
+  // which leads to very counterintuitive behavior when parsing. See: https://github.com/colinhacks/zod/issues/4280
+  // We also need to cast its type to match the expected type in `actionWithDirection` below.
+  direction: z.string().optional() as unknown as z.ZodOptional<
+    typeof actionWithDirection.shape.direction
+  >,
+
+  distance: z
+    .tuple([z.number().or(z.undefined()), z.number().or(z.undefined())])
     .optional(),
-  direction: z.string().optional(),
-  distance: z.tuple([z.number().optional(), z.number().optional()]).optional(),
   skill_usage: operator.shape.skill_usage,
   skill_times: operator.shape.skill_times,
 
@@ -85,9 +98,6 @@ const actionShape = {
   doc: z.string().optional(),
   doc_color: z.string().optional(),
 }
-// we have to put `distance: z.string()` in actionShape and validate it using another schema,
-// because if we put `distance: z.enum()` in actionShape, it becomes the second discriminator key,
-// which leads to very counterintuitive behavior when parsing. See: https://github.com/colinhacks/zod/issues/4280
 const actionWithDirection = z.object({
   direction: z.enum(CopilotDocV1.Direction),
 })