Installation

npx @udecode/plate-ui@latest add copilot-hover-card

Examples

PreviewCode

Paragraph

Editing

🤖 Copilot

1. Position your cursor at the end of a paragraph where you want to add or modify text.

2. Press Control + Space to trigger Copilot.

3. Choose from the suggested completions:

• Tab:Accept the entire suggested completion

• Command + Right Arrow: Complete one character at a time

• Escape: Cancel the Copilot

Edit link

1

100%

import type { CopilotHoverCardProps } from '@udecode/plate-ai/react';
 
export const copilotHoverCard = ({ suggestionText }: CopilotHoverCardProps) => {
  return (
    <span className="text-gray-400" contentEditable={false}>
      {suggestionText}
    </span>
  );
};

Plus examples

In Plate Plus, We using debounce mode by default. That's mean you will see the suggestion automatically without pressing Control+Space.

We also provide a new style of hover card that is more user-friendly.You can hover on the suggestion to see the hover card.

All of the backend setup is available in Potion template.