Suggestion
Add suggestions to text as marks.
components/demo.tsx
Installation
pnpm add @udecode/plate-suggestion
Usage
import { discussionPlugin } from '@/components/editor/plugins/discussion-plugin';
import { suggestionPlugin } from '@/components/editor/plugins/suggestion-plugin';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
discussionPlugin,
suggestionPlugin.configure({
render: { belowNodes: SuggestionBelowNodes as any },
options: {
currentUserId: 'alice',
}
}),
],
});
The suggestion plugin works in conjunction with the discussion plugin to provide a complete suggestion and discussion system. The discussion plugin provides the UI layer for managing discussions and users. Source code of both plugins is available in the example.
Keyboard Shortcuts
Key | Description |
---|---|
Cmd + Shift + S | Add a suggestion on the selected text. |
Examples
Plate UI
Refer to the preview above.
Plate Plus
- Full stack example for Suggestion and Comment
- Floating comments & suggestions UI with better user experience
- Comment rendered with Plate editor
- Discussion list in the sidebar
Plugins
SuggestionPlugin
API
editor.api.suggestion.dataList
Gets an array of suggestion data from a text node.
editor.api.suggestion.isBlockSuggestion
Checks if a node is a block suggestion element.
editor.api.suggestion.node
Gets a suggestion node entry.
editor.api.suggestion.nodeId
Gets the ID of a suggestion from a node.
editor.api.suggestion.nodes
Gets all suggestion node entries matching the options.
editor.api.suggestion.suggestionData
Gets suggestion data from a node.
editor.api.suggestion.withoutSuggestions
Executes a function with suggestions temporarily disabled.
Types
TSuggestionText
Interface for text nodes that can contain suggestions.