🐛 fix: fix compatible with subscribeWithSelector middleware (#89)

* 🐛 fix: fix compatible with subscribe api

* ✅ test: upgrade @testing-library/jest-dom

docs/guide/demos/Redo/store.ts

@@ -1,6 +1,6 @@
 import { proEditorMiddleware, ProEditorOptions } from '@ant-design/pro-editor';
 import { create, StateCreator } from 'zustand';
-import { devtools } from 'zustand/middleware';
+import { devtools, subscribeWithSelector } from 'zustand/middleware';
 
 interface Store {
   tabs: string;
@@ -49,5 +49,9 @@ const proEditorOptions: ProEditorOptions<Store, ProEditorStore> = {
 };
 
 export const useStore = create<Store>()(
-  devtools(proEditorMiddleware(createStore, proEditorOptions), { name: storeName }),
+  devtools(proEditorMiddleware(subscribeWithSelector(createStore), proEditorOptions), {
+    name: storeName,
+  }),
 );
+
+useStore.subscribe((s) => s.data, console.log);

docs/guide/redo-undo.md

@@ -19,14 +19,13 @@ order: 2
 1. 外层包裹 ProEditorProvider，传入相应的 zustand store
 
 ```tsx | pure
-import { ProEditorProvider, ProEditorStoreUpdater } from '@ant-design/pro-editor';
+import { ProEditorProvider } from '@ant-design/pro-editor';
 
 import { useStore } from './store';
 
-
 export default () => {
   return (
-    <ProEditorProvider store=[useStore]>
+    <ProEditorProvider store={[useStore]}>
       <App />
     </ProEditorProvider>
   );
@@ -56,15 +55,14 @@ export const useStore = create<Store>()(
 多个 Store 使用的方式：
 
 ```tsx | pure
-import { ProEditorProvider, ProEditorStoreUpdater } from '@ant-design/pro-editor';
+import { ProEditorProvider } from '@ant-design/pro-editor';
 
 import { useAStore } from './storeA';
 import { useBStore } from './storeB';
 
-
 export default () => {
   return (
-    <ProEditorProvider  store=[useAStore,useBStore]>
+    <ProEditorProvider store={[useAStore, useBStore]}>
       <App />
     </ProEditorProvider>
   );
@@ -75,11 +73,11 @@ export default () => {
 
 ```tsx | pure
 <div>
-  <ProEditorProvider store=[cStore]>
+  <ProEditorProvider store={[cStore]}>
     <A />
   </ProEditorProvider>
 
-  <ProEditorProvider store=[dStore]>
+  <ProEditorProvider store={[dStore]}>
     <B />
   </ProEditorProvider>
 </div>

package.json

@@ -117,7 +117,7 @@
   },
   "devDependencies": {
     "@emotion/jest": "^11.11.0",
-    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/color": "^3.0.3",
@@ -151,7 +151,7 @@
     "semantic-release": "^21.1.1",
     "semantic-release-config-gitmoji": "^1.5.3",
     "stylelint": "^15.10.3",
-    "typescript": "~5.1.6",
+    "typescript": "^5.2.2",
     "vitest": "latest",
     "wait-on": "^6.0.1",
     "y-protocols": "^1.0.5",

src/ProEditor/middleware/pro-editor/index.ts

@@ -33,6 +33,17 @@ const middleware: ProEditorImpl = (storeInitializer, options) => (set, get, api)
       { trigger: 'proEditorMiddleware', ...action },
     );
   };
+
+  /**
+   * handle setState function
+   */
+  const savedSetState = api.setState;
+  api.setState = (partial, replace, action) => {
+    savedSetState(partial, replace, action);
+
+    updateInProEditor((action as any) || {});
+  };
+
   /*
    * Capture the initial state so that we can initialize the pro editor store to the
    * same values as the initial values of the Zustand store.
@@ -47,15 +58,7 @@ const middleware: ProEditorImpl = (storeInitializer, options) => (set, get, api)
       updateInProEditor((action as any) || {});
     },
     get,
-    {
-      ...api,
-      // Create a new setState function as we did with set.
-      setState: (partial, replace, action) => {
-        api.setState(partial, replace, action);
-
-        updateInProEditor((action as any) || {});
-      },
-    },
+    api,
   );
 
   // Return the initial state to create or the next middleware.