feat: undo/redo Middleware

[arvinxx]

背景

撤销重做是编辑器场景保障用户体验的一个重要特性。ProEditor作为编辑器框架需要提供原子化的能力支持。

现状

ProTableEditor 的撤销重做能力已经实现，但当前需要通过 ProBuilder 特定的使用方式才可以获取，缺少独立使用的方法。

因此需要将该能力抽取成独立使用的模式。

使用方式

初始化

1. 外层包裹 ProEditorProvider，传入相应的 zustand store

import { ProEditorProvider, ProEditorStoreUpdater } from '@ant-design/pro-editor';

import { useStore } from './store';


export default () => {
  return (
    <ProEditorProvider store=[useStore]>
      <App />
    </ProEditorProvider>
  );
};

2. zustand store 包裹 ProEditorMiddleware

import { proEditorMiddleware, ProEditorOptions } from '@ant-design/pro-editor';

interface ProEditorStore extends Partial<Store> { }


const proEditorOptions: ProEditorOptions<Store, ProEditorStore> = {
  name: 'store-name',
  partialize: (s) => ({ data: s.data }), // 支持按需接入
};

export const useStore = create<Store>()(

  // createStore 是 StoreCreator 类型的对象
  proEditorMiddleware(createStore, proEditorOptions)),
);

多个 Store 使用的方式：

import { ProEditorProvider, ProEditorStoreUpdater } from '@ant-design/pro-editor';

import { useAStore } from './storeA';
import { useBStore } from './storeB';


export default () => {
  return (
    <ProEditorProvider  store=[useAStore,useBStore]>
      <App />
    </ProEditorProvider>
  );
};

多 Store 撤销重做互相隔离

<>
  <ProEditorProvider store=[cStore]>
    <A />
  </ProEditorProvider>

  <ProEditorProvider store=[dStore]>
    <B />
  </ProEditorProvider>
</>

设定历史记录

const createStore: StateCreator<Store, [['zustand/devtools', never], ['pro-editor', never]]> = (
  set,
  get,
) => ({
  tabs: '1',
  switchTabs: (key) => {
    set({ tabs: key });
  },
  plusWithoutHistory: () => {
    set((s) => ({ ...s, data: s.data + 2 }), false, {
      type: 'plusWithoutHistory',
      // 不进入历史记录
      recordHistory: false,
    });
  },

  plus: () => {
    const nextData = get().data + 1;

    // 默认进入历史记录
    set({ data: nextData }, false, { type: 'plus', });
  },
  data: 3,
});

实现效果

• 基础的撤销重做；
• 撤销栈 debounce（按时间智能切分）；
• 按需加入撤销栈；
• devtools 可视化变更；
• 撤销、回退栈长度；
• 历史栈明细；

[github-actions]

🎊 PR Preview ff18649 has been successfully built and deployed to https://ant-design-pro-editor-preview-pr-74.surge.sh

🕐 Build time: 130.636s

_{🤖 By surge-preview}

[codecov-commenter]

Codecov Report

Patch coverage: 88.69% and project coverage change: +0.03% 🎉

Comparison is base (7a8e560) 87.66% compared to head (ff18649) 87.69%.

Additional details and impacted files

@@            Coverage Diff             @@
##            alpha      #74      +/-   ##
==========================================
+ Coverage   87.66%   87.69%   +0.03%     
==========================================
  Files         338      349      +11     
  Lines       21815    22451     +636     
  Branches      977     1022      +45     
==========================================
+ Hits        19124    19689     +565     
- Misses       2691     2762      +71     

Files Changed	Coverage Δ
src/IconPicker/features/PickerPanel.tsx	25.88% <ø> (+0.30%)	⬆️
src/ProEditor/store/slices/general.ts	72.97% <72.97%> (ø)
src/ProEditor/middleware/pro-editor/index.ts	79.48% <79.48%> (ø)
src/ProEditor/ProEditorProvider/StoreUpdater.tsx	80.80% <80.80%> (ø)
src/ProEditor/utils/yjs.ts	90.24% <90.24%> (ø)
src/ProEditor/store/slices/config.ts	93.83% <93.83%> (ø)
src/ProEditor/ProEditorProvider/index.tsx	100.00% <100.00%> (ø)
src/ProEditor/hooks/useProEditor.ts	100.00% <100.00%> (ø)
src/ProEditor/index.ts	100.00% <100.00%> (ø)
src/ProEditor/middleware/index.ts	100.00% <100.00%> (ø)
... and 3 more

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[rdmclin2]

+1

[github-actions]

🎉 This PR is included in version 0.19.0-alpha.1 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 0.21.0-alpha.1 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀