WordPress Gutenberg 编辑器中的撤销与重做功能实现指南

WordPress Gutenberg 编辑器中的撤销与重做功能实现指南

gutenberg The Block Editor project for WordPress and beyond. Plugin is available from the official repository. 项目地址: https://gitcode.com/gh_mirrors/gu/gutenberg

前言

在内容编辑器的开发中，撤销(Undo)和重做(Redo)功能是提升用户体验的关键特性。WordPress的Gutenberg编辑器作为一个现代化的块编辑器，提供了灵活的方式来实现这一功能。本文将深入探讨如何在Gutenberg编辑器中实现撤销和重做功能。

基础实现：使用useStateWithHistory钩子

Gutenberg编辑器默认不内置撤销/重做功能，这是因为它通常作为大型应用的一部分存在，而该应用可能已有自己的撤销/重做实现。不过，Gutenberg提供了便捷的API来帮助开发者实现这一功能。

核心概念

useStateWithHistory是@wordpress/compose包提供的一个React钩子，它在基础的useState钩子上增加了历史记录功能，使得状态变化可以被追踪和回溯。

实现步骤

1. 引入必要依赖： 首先确保项目中已安装@wordpress/compose包。

2. 基本用法示例：

import { useStateWithHistory } from '@wordpress/compose';
import { createElement } from "react";
import { createRoot } from 'react-dom/client';
import {
  BlockEditorProvider,
  BlockCanvas,
} from "@wordpress/block-editor";

function Editor() {
	const { value, setValue, hasUndo, hasRedo, undo, redo } =
		useStateWithHistory( { blocks: [] } );

	return (
        <BlockEditorProvider
            value={ value.blocks }
            selection={ value.selection }
            onInput={ ( blocks, { selection } ) =>
                setValue( { blocks, selection }, true )
            }
            onChange={ ( blocks, { selection } ) =>
                setValue( { blocks, selection }, false )
            }
        >
            <div className="undo-redo-toolbar">
                <button onClick={ undo } disabled={ ! hasUndo }>
                    撤销
                </button>
                <button onClick={ redo } disabled={ ! hasRedo }>
                    重做
                </button>
            </div>
            <BlockCanvas />
        </BlockEditorProvider>
	);
}

API详解

useStateWithHistory返回的对象包含以下关键属性：

• value: 当前状态值
• setValue: 更新状态的函数
• hasUndo: 布尔值，表示是否有可撤销的操作
• hasRedo: 布尔值，表示是否有可重做的操作
• undo: 执行撤销的函数
• redo: 执行重做的函数

注意事项

1. 光标位置处理： 示例中不仅跟踪blocks属性，还跟踪selection属性。这确保了在执行撤销/重做时，编辑器能正确恢复光标位置。

2. onInput与onChange的区别：

   • onInput用于处理即时变化（如输入时）
   • onChange用于处理最终确认的变化

高级场景：复杂状态管理

当编辑器需要管理多个相互关联的状态（如文章标题、内容块、分类标签等）时，简单的useStateWithHistory可能不再适用。这时可以考虑：

1. 自定义历史记录管理： 实现更复杂的状态快照机制

2. 使用undo-manager： Gutenberg提供了@wordpress/undo-manager包，它提供了更底层的撤销管理器，适合复杂场景

最佳实践建议

1. 性能考虑：

   • 合理设置历史记录的最大长度
   • 对大型状态考虑差异比较而非完整快照

2. 用户体验：

   • 提供清晰的撤销/重做按钮状态反馈
   • 考虑添加键盘快捷键支持

3. 错误处理：

   • 确保撤销栈不会因异常操作而损坏

结语

在Gutenberg编辑器中实现撤销和重做功能既可以通过简单的useStateWithHistory钩子快速完成，也能通过更复杂的方案应对高级需求。理解这些实现方式的适用场景和限制，将帮助开发者构建更健壮、用户友好的编辑体验。

对于需要更精细控制的场景，建议深入研究Gutenberg提供的底层API，根据具体需求定制撤销/重做逻辑。

gutenberg The Block Editor project for WordPress and beyond. Plugin is available from the official repository. 项目地址: https://gitcode.com/gh_mirrors/gu/gutenberg