Components
Ghost Text

Ghost Text

Renders a ghost text at the cursor position.

CopilotHover Card

Installation

Install the following dependencies:

npm install @udecode/plate-ai react-markdown @radix-ui/react-hover-card

Copy and paste the following code into your project.

Get the code ->

Update the import paths to match your project setup.

Examples

Copilot

Get the code ->

AI Copilot

AI Copilot provides intelligent auto-completion suggestions as you write.
How to use AI Copilot:
  • Position your cursor at the end of a paragraph where you want to add text.
  • Press "Ctrl + Space" to trigger AI auto-completion.
  • Press "Ctrl + Space" again for alternative AI suggestions.
Accepting suggestions:
  • Tab: Accept the entire suggestion
  • Command + Right Arrow: Complete one word at a time
Additional features:
  • Ghost text remains visible as long as you continue typing the same letters as the suggestion.
  • Undo AI auto-completion:
    • Press "Ctrl + Z" to undo the entire suggestion if accepted with Tab.
    • Press "Ctrl + Z" to undo one word at a time if accepted with Command + Right Arrow.
Use Command + Right Arrow to carefully review and accept parts of the suggestion.
Floating ToolbarIndent Todo Marker