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

检查出来 演示来啊!

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

安装

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

无 :

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

线条 :

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

• 使用量
• 如何运作
• API 密码
  • 司马
    • insertion
    • deletion
    • modification
    • addSuggestionMarks
  • 图标
    • selectSuggestion
    • revertSuggestion
    • revertSuggestions
    • applySuggestion
    • applySuggestions
    • enableSuggestChanges
    • disableSuggestChanges
    • toggleSuggestChanges
  • 插件
    • suggestChanges
    • suggestChangesKey
    • isSuggestChangesEnabled
  • dispatchTransaction 装饰
    • withSuggestChanges

使用量

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

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),
});

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

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

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

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

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

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

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

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

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))) (中文(简体) ).

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

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

const insertion: MarkSpec;

deletion

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

const deletion: MarkSpec;

modification

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

const modification: MarkSpec;

addSuggestionMarks

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

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

图标

selectSuggestion

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

function selectSuggestion(suggestionId: number): Command;

revertSuggestion

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

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

function revertSuggestion(suggestionId: number): Command;

revertSuggestions

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

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

const revertSuggestions: Command;

applySuggestion

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

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

function applySuggestion(suggestionId: number): Command;

applySuggestions

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

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

const applySuggestions: Command;

enableSuggestChanges

允许建议更改的命令

const enableSuggestChanges: Command;

disableSuggestChanges

禁用命令建议更改

const disableSuggestChanges: Command;

toggleSuggestChanges

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

const toggleSuggestChanges: Command;

插件

suggestChanges

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

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

suggestChangesKey

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

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

isSuggestChangesEnabled

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

function isSuggestChangesEnabled(state: EditorState): boolean;

dispatchTransaction 装饰

withSuggestChanges

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

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

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