Suggestion

Add suggestions to text as marks.

Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Features

  • Add suggestions as text marks
  • Add block suggestions
  • Track suggestion state
  • Undo/redo suggestion changes
  • Note: This is an experimental feature and the API is subject to change.

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

KeyDescription
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.

Parameters

Collapse all

    The suggestion text node.

ReturnsTInlineSuggestionData[]

    Array of suggestion data.

editor.api.suggestion.isBlockSuggestion

Checks if a node is a block suggestion element.

Parameters

Collapse all

    The node to check.

Returnsnode is TSuggestionElement

    Whether the node is a block suggestion.

editor.api.suggestion.node

Gets a suggestion node entry.

OptionsEditorNodesOptions & { id?: string; isText?: boolean }

    Options for finding the node.

ReturnsNodeEntry<TSuggestionElement | TSuggestionText> | undefined

    The suggestion node entry if found.

editor.api.suggestion.nodeId

Gets the ID of a suggestion from a node.

Parameters

Collapse all

    The node to get ID from.

Returnsstring | undefined

    The suggestion ID if found.

editor.api.suggestion.nodes

Gets all suggestion node entries matching the options.

OptionsEditorNodesOptions

    Options for finding the nodes.

ReturnsNodeEntry<TElement | TSuggestionText>[]

    Array of suggestion node entries.

editor.api.suggestion.suggestionData

Gets suggestion data from a node.

Parameters

Collapse all

    The node to get suggestion data from.

ReturnsTInlineSuggestionData | TSuggestionElement['suggestion'] | undefined

    The suggestion data if found.

editor.api.suggestion.withoutSuggestions

Executes a function with suggestions temporarily disabled.

Parameters

Collapse all

    The function to execute.

Types

TSuggestionText

Interface for text nodes that can contain suggestions.

Attributes

Collapse all

    Indicates whether this is a suggestion.

    Contains suggestion data. Multiple suggestions can be present in a single text node.