fix: unicode keys in JSON becoming empty (#164)

Author: guansss

src/components/editor/converter.ts

@@ -1,12 +1,12 @@
 import { compact, uniqueId } from 'lodash-es'
 import { DeepPartial, FieldArrayWithId } from 'react-hook-form'
-import snakeCaseKeys from 'snakecase-keys'
 
 import type { CopilotDocV1 } from 'models/copilot.schema'
 import { MinimumRequired } from 'models/operation'
 
 import { findOperatorDirection } from '../../models/operator'
 import { findActionType } from '../../models/types'
+import { snakeCaseKeysUnicode } from '../../utils/object'
 
 /**
  * Creates an operation that can be used in editor. Used for importing.
@@ -75,7 +75,7 @@ export function toMaaOperation(
     delete (item as Partial<FieldArrayWithId>).id
   })
 
-  return snakeCaseKeys(operation, { deep: true })
+  return snakeCaseKeysUnicode(operation, { deep: true })
 }
 
 /**

src/components/viewer/OperationViewer.tsx

@@ -22,7 +22,6 @@ import { useAtom } from 'jotai'
 import { noop } from 'lodash-es'
 import { ComponentType, FC, useEffect, useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
-import snakecaseKeys from 'snakecase-keys'
 
 import { FactItem } from 'components/FactItem'
 import { Paragraphs } from 'components/Paragraphs'
@@ -45,6 +44,7 @@ import { createCustomLevel, findLevelByStageName } from '../../models/level'
 import { Level } from '../../models/operation'
 import { toShortCode } from '../../models/shortCode'
 import { formatError } from '../../utils/error'
+import { snakeCaseKeysUnicode } from '../../utils/object'
 import { ActionCard } from '../ActionCard'
 import { CommentArea } from './comment/CommentArea'
 
@@ -154,7 +154,7 @@ export const OperationViewer: ComponentType<{
     const handleDownloadJSON = () => {
       // pretty print the JSON
       const json = JSON.stringify(
-        snakecaseKeys(operationDoc, { deep: true }),
+        snakeCaseKeysUnicode(operationDoc, { deep: true }),
         null,
         2,
       )

src/utils/object.ts

@@ -0,0 +1,19 @@
+import snakeCaseKeys from 'snakecase-keys'
+
+export const snakeCaseKeysUnicode = ((
+  input: any,
+  options?: snakeCaseKeys.Options,
+) => {
+  // a regex that is supposed to match nothing, which prevents `snake-case` from
+  // using its default regex to strip out non-word characters (including non ASCII characters)
+  // see: https://github.com/blakeembrey/change-case/blob/040a079f007879cb0472ba4f7cc2e1d3185e90ba/packages/no-case/src/index.ts#L14
+  const unmatchableRegex = /^\x00\x01/ // eslint-disable-line no-control-regex
+
+  return snakeCaseKeys(input, {
+    ...options,
+    parsingOptions: {
+      ...options?.parsingOptions,
+      stripRegexp: unmatchableRegex,
+    },
+  })
+}) as typeof snakeCaseKeys