Components
Ghost Text

Ghost Text

Display AI-generated suggestions in a hover card.

CopilotGhost Text

Installation

npx @udecode/plate-ui@latest add ghost-text -r plate-ui

Examples

Copilot

  1. Position your cursor at the end of a paragraph where you want to add or modify text.
  1. Press Control + Space to trigger Copilot
  1. Copilot will automatically suggest completions as you type.
  1. Choose from the suggested completions:
  • Tab:Accept the entire suggested completion
  • Command + Right Arrow: Complete one character at a time
  • Escape: Cancel the Copilot
'use client';
 
import React from 'react';
import { useEditorPlugin, useElement } from '@udecode/plate-common/react';
 
import type { CopilotPluginConfig } from '@udecode/plate-ai/react';
 
export const GhostText = () => {
  const { useOption } = useEditorPlugin<CopilotPluginConfig>({
    key: 'copilot',
  });
  const element = useElement();
 
  const isSuggested = useOption('isSuggested', element.id as string);
 
  if (!isSuggested) return null;
 
  return <GhostTextContent />;
};
 
export function GhostTextContent() {
  const { useOption } = useEditorPlugin<CopilotPluginConfig>({
    key: 'copilot',
  });
 
  const suggestionText = useOption('suggestionText');
 
  return (
    <span className="text-muted-foreground" contentEditable={false}>
      {suggestionText && suggestionText}
    </span>
  );
}

Plate Plus

In Plate Plus, we provides more advanced styles and complete backend setup

  1. Hover card: a new style of hover card that is more user-friendly. You can hover over the ghost text to see the hover card.
  2. Marks: support for marks like bold, italic, underline, etc.This means you can see bold text and links in the ghost text
  3. Backend: complete backend setup.

All of the backend setup is available in Potion template.