Milkdown历史记录：撤销/重做实现

Milkdown历史记录：撤销/重做实现

【免费下载链接】milkdown 项目地址: https://gitcode.com/gh_mirrors/mil/milkdown

你是否曾在编辑文档时误删重要内容，却找不到恢复方法？Milkdown的撤销/重做功能将为你解决这一难题。本文将深入剖析Milkdown历史记录功能的实现原理、使用方法及相关配置，助你轻松应对文档编辑中的意外操作。

历史记录功能概述

在文档编辑过程中，历史记录功能扮演着至关重要的角色。它能记录用户的每一步操作，当出现误操作时，用户可通过撤销功能回到之前的状态，也能通过重做功能恢复被撤销的操作，极大地提高了文档编辑的效率和安全性。Milkdown的历史记录功能由packages/plugins/plugin-history/插件实现，该插件基于ProseMirror的history模块，并结合Milkdown的插件机制进行封装。

实现原理

Milkdown的撤销/重做功能主要通过以下几个部分实现：

• 命令定义：在packages/plugins/plugin-history/src/index.ts中，定义了undoCommand和redoCommand，它们分别是对ProseMirror中undo和redo API的封装。

/// The milkdown command wrapper of [undo API](https://prosemirror.net/docs/ref/#history.undo) in [prosemirror-history](https://prosemirror.net/docs/ref/#history).
export const undoCommand = $command('Undo', () => () => undo)

/// The milkdown command wrapper of [redo API](https://prosemirror.net/docs/ref/#history.redo) in [prosemirror-history](https://prosemirror.net/docs/ref/#history).
export const redoCommand = $command('Redo', () => () => redo)

• 历史记录提供器：historyProviderPlugin是对ProseMirror history模块的封装，它通过historyProviderConfig获取配置信息，为编辑器提供历史记录功能支持。

/// The milkdown wrapper of [history API](https://prosemirror.net/docs/ref/#history.history) in [prosemirror-history](https://prosemirror.net/docs/ref/#history).
export const historyProviderPlugin = $prose(ctx => prosemirrorHistory(ctx.get(historyProviderConfig.key)))

• 快捷键映射：historyKeymap定义了撤销和重做的快捷键，分别为“Mod-z”和“Mod-y”“Shift-Mod-z”。

/// The keymap of history plugin, it's `mod-z` for undo and `mod-y`/`shift-mod-z` for redo.
export const historyKeymap = $useKeymap('historyKeymap', {
  Undo: {
    shortcuts: 'Mod-z',
    command: (ctx) => {
      const commands = ctx.get(commandsCtx)
      return () => commands.call(undoCommand.key)
    },
  },
  Redo: {
    shortcuts: ['Mod-y', 'Shift-Mod-z'],
    command: (ctx) => {
      const commands = ctx.get(commandsCtx)
      return () => commands.call(redoCommand.key)
    },
  },
})

使用方法

快捷键操作

在Milkdown编辑器中，你可以通过以下快捷键进行撤销和重做操作：

• 撤销：按下“Mod-z”（Windows/Linux系统为“Ctrl-z”，Mac系统为“Command-z”）。
• 重做：按下“Mod-y”（Windows/Linux系统为“Ctrl-y”，Mac系统为“Command-y”）或“Shift-Mod-z”（Windows/Linux系统为“Shift-Ctrl-z”，Mac系统为“Shift-Command-z”）。

代码调用

如果你需要在代码中调用撤销/重做命令，可以按照以下方式进行：

import { undoCommand, redoCommand } from '@milkdown/plugin-history';

// 调用撤销命令
commands.call(undoCommand.key);

// 调用重做命令
commands.call(redoCommand.key);

配置选项

historyProviderConfig提供了历史记录功能的相关配置选项，包括depth和newGroupDelay：

• depth：用于设置历史记录的深度，即最多能保存的历史记录步数。
• newGroupDelay：用于设置新的历史记录组的延迟时间，当用户在该时间内连续操作时，这些操作将被合并到同一个历史记录组中。

你可以通过以下方式对这些配置进行设置：

import { historyProviderConfig } from '@milkdown/plugin-history';

// 设置历史记录深度为100，新组延迟为500毫秒
historyProviderConfig.set({ depth: 100, newGroupDelay: 500 });

总结与展望

Milkdown的历史记录功能通过ProseMirror的history模块和自身的插件机制，实现了高效、稳定的撤销/重做功能，为用户提供了可靠的文档编辑保障。未来，Milkdown可能会进一步优化历史记录的性能，增加更多自定义配置选项，以满足不同用户的需求。

希望本文能帮助你更好地了解Milkdown历史记录功能的实现。如果你有任何问题或建议，欢迎在评论区留言。别忘了点赞、收藏、关注三连，下期为你带来Milkdown其他实用功能的解析。

【免费下载链接】milkdown 项目地址: https://gitcode.com/gh_mirrors/mil/milkdown