# @blocknote/prosemirror-suggest-changes 中文文档

规范地址：https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/

版本：0\.1\.3
npm 元数据更新时间：2025-05-13T14:18:41.491Z
中文译文更新时间：2026-11-08T07:25:50.593Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40blocknote/prosemirror-suggest-changes
原文对照：https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：77.3 kB，33 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：prosemirror-model ^1\.0\.0，prosemirror-state ^1\.0\.0，prosemirror-transform ^1\.0\.0，prosemirror-view ^1\.0\.0
- 首次发布：2025-05-13T14:18:40.613Z
- 最新版本发布：2025-05-13T14:18:40.940Z
- 近 30 天下载量：10593（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

检查出来 [演示](https://handlewithcarecollective.github.io/prosemirror-suggest-changes)来啊!

## 安装

```sh
npm install @blocknote/prosemirror-suggest-changes
```

也可以使用：`pnpm add @blocknote/prosemirror-suggest-changes`、`yarn add @blocknote/prosemirror-suggest-changes`、`bun add @blocknote/prosemirror-suggest-changes`

## README

# @handle withcare/prosemiror-suggest-changes (英语)

检查出来 [演示](https://handlewithcarecollective.github.io/prosemirror-suggest-changes)来啊!

图书馆的开发由慈善人士赞助 [dskrpt.de (英语)](https://dskrpt.de/)来啊!

## 安装

安装 `@handlewithcare/prosemirror-suggest-changes` 及其同伴依赖关系:

无 :

```sh
npm install @handlewithcare/prosemirror-suggest-changes prosemirror-view prosemirror-transform prosemirror-state prosemirror-model
```

线条 :

```sh
yarn add @handlewithcare/prosemirror-suggest-changes prosemirror-view prosemirror-transform prosemirror-state prosemirror-model
```

-   [使用量](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-usage)
-   [如何运作](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-how-it-works)
-   [API 密码](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-api)
    -   [司马](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-schema)
        -   [`insertion`](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-insertion)
        -   [`deletion`](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-deletion)
        -   [`modification`](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-modification)
        -   [`addSuggestionMarks`](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-addsuggestionmarks)
    -   [图标](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-commands)
        -   [`selectSuggestion`](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-selectsuggestion)
        -   [`revertSuggestion`](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-revertsuggestion)
        -   [`revertSuggestions`](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-revertsuggestions)
        -   [`applySuggestion`](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-applysuggestion)
        -   [`applySuggestions`](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-applysuggestions)
        -   [`enableSuggestChanges`](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-enablesuggestchanges)
        -   [`disableSuggestChanges`](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-disablesuggestchanges)
        -   [`toggleSuggestChanges`](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-togglesuggestchanges)
    -   [插件](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-plugin)
        -   [`suggestChanges`](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-suggestchanges)
        -   [`suggestChangesKey`](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-suggestchangeskey)
        -   [`isSuggestChangesEnabled`](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-issuggestchangesenabled)
    -   [`dispatchTransaction` 装饰](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-dispatchtransaction-decorator)
        -   [`withSuggestChanges`](https://npmcn.com/package/%40blocknote/prosemirror-suggest-changes/#readme-withsuggestchanges)

## 使用量

首先,在你的计划上加上建议标记:

```ts
import { addSuggestionMarks } from "@handlewithcare/prosemirror-suggest-changes";

export const schema = new Schema({
  nodes: {
    ...nodes,
    doc: {
      ...nodes.doc,
      // We need to allow these marks as block marks as well,
      // to support block-level suggestions, like inserting a
      // new list item
      marks: "insertion modification deletion",
    },
  },
  marks: addSuggestionMarks(marks),
});
```

然后,将插件添加到编辑器状态 :

```ts
import { suggestChanges } from "@handlewithcare/prosemirror-suggest-changes";

const editorState = EditorState.create({
  schema,
  doc,
  plugins: [
    // ... your other plugins
    suggestChanges(),
  ],
});
```

使用 `dispatchTransaction` 用于拦截和转换交易的装饰器, 并增加建议装饰:

```ts
import {
  withSuggestChanges,
  getSuggestionDecorations,
} from "@handlewithcare/prosemirror-suggest-changes";

const editorEl = document.getElementById("editor")!;

const view = new EditorView(editorEl, {
  state: editorState,
  decorations: getSuggestionDecorations,
  dispatchTransaction: withSuggestChanges(),
});
```

最后,用命令来控制建议的变化状态 并重提建议。 以下是一个样本视图插件,该插件使 带有一些建议相关命令的简单菜单 :

```ts
import {
  toggleSuggestChanges,
  applySuggestions,
  revertSuggestions,
  isSuggestChangesEnabled,
} from "@handlewithcare/prosemirror-suggest-changes";

const suggestChangesViewPlugin = new Plugin({
  view(view) {
    const toggleButton = document.createElement("button");
    toggleButton.appendChild(document.createTextNode("Enable suggestions"));
    toggleButton.addEventListener("click", () => {
      toggleSuggestChanges(view.state, view.dispatch);
      view.focus();
    });

    const applyAllButton = document.createElement("button");
    applyAllButton.appendChild(document.createTextNode("Apply all"));
    applyAllButton.addEventListener("click", () => {
      applySuggestions(view.state, view.dispatch);
      view.focus();
    });

    const revertAllButton = document.createElement("button");
    revertAllButton.appendChild(document.createTextNode("Revert all"));
    revertAllButton.addEventListener("click", () => {
      revertSuggestions(view.state, view.dispatch);
      view.focus();
    });

    const commandsContainer = document.createElement("div");
    commandsContainer.append(applyAllButton, revertAllButton);

    const container = document.createElement("div");
    container.classList.add("menu");
    container.append(toggleButton, commandsContainer);

    view.dom.parentElement?.prepend(container);

    return {
      update() {
        if (isSuggestChangesEnabled(view.state)) {
          toggleButton.replaceChildren(
            document.createTextNode("Disable suggestions"),
          );
        } else {
          toggleButton.replaceChildren(
            document.createTextNode("Enable suggestions"),
          );
        }
      },
      destroy() {
        container.remove();
      },
    };
  },
});
```

## 如何运作

此库提供三种标记类型:

-   `insertion` 代表新插入的内容,包括新文本内容和 新块节点
-   `deletion` 表示标记为已删除的内容,包括文本和 块节点
-   `modification` 代表标记或顶点已经改变但 内容没有改变

此外,该图书馆提供:

-   用于跟踪是否启用建议的插件
-   装潢厂,它让皮克罗(?)让用户明白 当块节点被删除或插入时
-   一组命令( A)`applySuggestions`, (中文(简体) ), `revertSuggestions`, (中文(简体) ), `applySuggestion`, (中文(简体) ), (例如,建议)
-   一个 "`dispatchTransaction` 装饰者,", `withSuggestChanges`

`withSuggestChanges` 是一个可选择的函数,用于 `dispatchTransaction` 函数并返回已装饰 `dispatchTransaction` 函数。 这个装饰 函数将在启用建议时,在交易开始前拦截交易 适用于国家,并产生改变的交易,表明 计划修改,而不是直接应用。 例如,交易 试图删除文件中第2和第5点之间案文的 替换为添加 `deletion` 标记到文本之间 2和5号阵地.

如果您已经有自定义 `dispatchTransaction` 执行时,可以通过 给 `withSuggestChanges`。否则,它将依赖于默认 执行`view.setState(view.state.apply(tr))`) (中文(简体) ).

```ts
const view = new EditorView(editorEl, {
  state: editorState,
  plugins,
  decorations: getSuggestionDecorations,
  dispatchTransaction: withSuggestChanges(
    /** An example dispatchTransaction that integrates with an external redux store */
    function dispatchTransaction(this: EditorView, tr: Transaction) {
      store.dispatch(transactionDispatched({ tr }));
    },
  ),
});
```

## API 密码

### 司马

#### `insertion`

代表新插入的内容,包括新文本内容和新块 节点

```ts
const insertion: MarkSpec;
```

#### `deletion`

被标记为已删除的内容, 包括文本和块节点

```ts
const deletion: MarkSpec;
```

#### `modification`

代表标记或标记已改变但内容未改变的节点 已更改

```ts
const modification: MarkSpec;
```

#### `addSuggestionMarks`

在提供的 MarkSpec 中添加删除、插入和修改标记 地图.

```ts
function addSuggestionMarks<Marks extends string>(
  marks: Record<Marks, MarkSpec>,
): Record<Marks | "deletion" | "insertion" | "modification", MarkSpec>;
```

### 图标

#### `selectSuggestion`

更新选择以覆盖现有更改的命令 .

```ts
function selectSuggestion(suggestionId: number): Command;
```

#### `revertSuggestion`

返回文档中某个已跟踪更改的命令 .

这意味着插入标记中的所有内容将被删除. 这个 删除标记将被删除,其内容将留在文件中。 修改 将返回在修改标记中跟踪的标记.

```ts
function revertSuggestion(suggestionId: number): Command;
```

#### `revertSuggestions`

返回文档中所有已跟踪更改的命令 .

这意味着插入标记中的所有内容将被删除. 删除 标记将被去除,其内容将留在医生。 跟踪修改 将返回修改标记.

```ts
const revertSuggestions: Command;
```

#### `applySuggestion`

对文档应用特定跟踪更改的命令 .

这意味着删除标记中的所有内容将被删除. 这个 插入标记和修改标记将被去除,其内容留在 医生.

```ts
function applySuggestion(suggestionId: number): Command;
```

#### `applySuggestions`

在文档中应用所有跟踪更改的命令 .

这意味着删除标记中的所有内容将被删除. 插入 标记和修改标记将被去除,其内容留在 医生.

```ts
const applySuggestions: Command;
```

#### `enableSuggestChanges`

允许建议更改的命令

```ts
const enableSuggestChanges: Command;
```

#### `disableSuggestChanges`

禁用命令建议更改

```ts
const disableSuggestChanges: Command;
```

#### `toggleSuggestChanges`

切换提示更改或关闭的命令

```ts
const toggleSuggestChanges: Command;
```

### 插件

#### `suggestChanges`

一个跟踪是否启用了建议更改的插件 。 它还规定: 用于澄清建议的装饰,例如要标记的平面图 当段落中断被删除或插入时.

```ts
function suggestChanges(): Plugin<{ enabled: boolean }>;
```

#### `suggestChangesKey`

用于此选项的插件密钥 `suggestChanges` 插件

```ts
const suggestChangesKey: PluginKey<{ enabled: boolean }>;
```

#### `isSuggestChangesEnabled`

用于检查是否启用建议更改的助手函数 .

```ts
function isSuggestChangesEnabled(state: EditorState): boolean;
```

### `dispatchTransaction` 装饰

#### `withSuggestChanges`

A 类 `dispatchTransaction` 装饰师. 包装您的已存在 `dispatchTransaction` 函数为 `withSuggestChanges`,或者不通过参数来使用默认 执行`view.setState(view.state.apply(tr))`) (中文(简体) ).

结果是 `dispatchTransaction` 截取和修改的函数 允许更改建议时进行的交易。 这些修改 交易将建议修改而不是直接应用,例如: 以删除标记标记一个区域,而不是从中去除 文档.

```ts
function withSuggestChanges(
  dispatchTransaction?: EditorView["dispatch"],
): EditorView["dispatch"];
```

## 常见问题

### @blocknote/prosemirror-suggest-changes 是什么？

检查出来 演示来啊\!

### 如何安装 @blocknote/prosemirror-suggest-changes？

在项目目录运行 npm install @blocknote/prosemirror-suggest-changes，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：prosemirror-model（^1\.0\.0）、prosemirror-state（^1\.0\.0）、prosemirror-transform（^1\.0\.0）、prosemirror-view（^1\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @blocknote/prosemirror-suggest-changes 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @blocknote/prosemirror-suggest-changes 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @blocknote/prosemirror-suggest-changes 可以商用吗？

@blocknote/prosemirror-suggest-changes 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @blocknote/prosemirror-suggest-changes 的下载量有多少？

根据 npm 官方下载统计，@blocknote/prosemirror-suggest-changes 在 2026/10/09 – 2026/11/07 这 30 天内被下载 10,593 次，日均约 353 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @blocknote/prosemirror-suggest-changes 还在维护吗？

最新版本 0\.1\.3 发布于 2025/05/13（1\.5 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/05/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。