Suggestion

'use client';

import * as 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/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>
  );
}

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

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

Examples

Plate UI

Refer to the preview above.

Plate Plus

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.