Prosemirror-suggestion-mode applySuggestion Example

In the above example we apply AI-suggested edits to the editor. This makes it easy to integrate AI text suggestions into your editor.

Apply Suggested Edits Format

Here's an example of the suggestion format used:

How to Apply Suggestions

1. Using the Simple Helper Function (Recommended)

The easiest way to apply a suggestion is with the applySuggestion helper function:

import { applySuggestion } from "prosemirror-suggestion-mode";

// Apply a single suggestion
applySuggestion(view, {
  "textToReplace": "pre-eminence",
  "textReplacement": "leadership position",
  "reason": "Using more common terminology",
  "textBefore": "only if the United States occupies a position of ",
  "textAfter": " can we help decide"
}, "username");

// To apply multiple suggestions, just loop through them
mySuggestions.forEach(suggestion => {
  applySuggestion(view, suggestion, "username");
});
        

2. Using Helper Function as a Command

If you're using a menu bar or working with other ProseMirror commands, you can use the command factory:

import { createApplySuggestionCommand } from "prosemirror-suggestion-mode";

// Create a menu item that applies a suggestion when clicked
const menuItem = {
  label: "Apply Suggestion",
  run: createApplySuggestionCommand(mySuggestion, "AI Assistant"),
  // Enable the menu item only when the command can be applied
  enable: state => createApplySuggestionCommand(mySuggestion, "AI Assistant")(state)
};
        

3. Using the Command Pattern (Advanced)

For more complex integrations or when working with command-based architectures:

import { createApplySuggestionCommand } from "prosemirror-suggestion-mode";

// Create the command for a single suggestion
const command = createApplySuggestionCommand({
  "textToReplace": "pre-eminence",
  "textReplacement": "leadership position",
  "reason": "Using more common terminology",
  "textBefore": "only if the United States occupies a position of ",
  "textAfter": " can we help decide"
}, "username");

// Execute the command
command(view.state, view.dispatch, view);
        

See other examples or view the code and docs on github