npm install @udecode/plate-ai @udecode/plate-markdown

// ...
import { CopilotPlugin, stripMarkdown } from '@udecode/plate-ai/react';
import { type TElement, getAncestorNode } from '@udecode/plate-common';
import { serializeMdNodes } from '@udecode/plate-markdown';
 
MarkdownPlugin.configure({ options: { indentList: true } });
CopilotPlugin.configure(({ api }) => ({
  options: {
    completeOptions: {
      api: '/api/your-api-endpoint',
      body: {
        system: `You are an advanced AI writing assistant, similar to VSCode Copilot but for general text. Your task is to predict and generate the next part of the text based on the given context.
 
Rules:
- Continue the text naturally up to the next punctuation mark (., ,, ;, :, ?, or !).
- Maintain style and tone. Don't repeat given text.
- For unclear context, provide the most likely continuation.
- Handle code snippets, lists, or structured text if needed.
- Don't include """ in your response.
- CRITICAL: Always end with a punctuation mark.
- CRITICAL: Avoid starting a new block. Do not use block formatting like >, #, 1., 2., -, etc. The suggestion should continue in the same block as the context.
- If no context is provided or you can't generate a continuation, return "0" without explanation.`,
      },
      onFinish: (_, completion) => {
        if (completion === '0') return;
 
        api.copilot.setBlockSuggestion({
          //stripMarkdownBlocks in plus GhostText
          text: stripMarkdown(completion),
        });
      },
    },
    debounceDelay: 500,
    getPrompt: ({ editor }) => {
      const contextEntry = getAncestorNode(editor);
 
      if (!contextEntry) return '';
 
      const prompt = serializeMdNodes([contextEntry[0] as TElement]);
 
      return `Continue the text up to the next punctuation mark:
"""
${prompt}
"""`;
    },
    renderGhostText: GhostText,
  },
}));

const editor = usePlateEditor({
  id: 'ai-demo',
  override: {
    components: PlateUI,
  },
  plugins: [
    MarkdownPlugin.configure({ options: { indentList: true } }),
    // CopilotPlugin should be before indent plugin
    CopilotPlugin,
    IndentPlugin.extend({
      inject: {
        targetPlugins: [
          ParagraphPlugin.key,
          HEADING_KEYS.h1,
          HEADING_KEYS.h2,
          HEADING_KEYS.h3,
          HEADING_KEYS.h4,
          HEADING_KEYS.h5,
          HEADING_KEYS.h6,
          BlockquotePlugin.key,
          CodeBlockPlugin.key,
          TogglePlugin.key,
        ],
      },
    }),
    IndentListPlugin.extend({
      inject: {
        targetPlugins: [
          ParagraphPlugin.key,
          HEADING_KEYS.h1,
          HEADING_KEYS.h2,
          HEADING_KEYS.h3,
          HEADING_KEYS.h4,
          HEADING_KEYS.h5,
          HEADING_KEYS.h6,
          BlockquotePlugin.key,
          CodeBlockPlugin.key,
          TogglePlugin.key,
        ],
      },
      options: {
        listStyleTypes: {
          fire: {
            liComponent: FireLiComponent,
            markerComponent: FireMarker,
            type: 'fire',
          },
          todo: {
            liComponent: TodoLi,
            markerComponent: TodoMarker,
            type: 'todo',
          },
        },
      },
    }),
    ...otherPlugins,
  ],
  value: copilotValue,
});

MarkdownPlugin.configure({ options: { indentList: true } }),

TabbablePlugin.configure(({ editor }) => ({
  options: {
    query: () => {
      // return false when cursor is in the end of the paragraph
      if (isSelectionAtBlockStart(editor) || isSelectionAtBlockEnd(editor))
        return false;
 
      return !someNode(editor, {
        match: (n) => {
          return !!(
            n.type &&
            ([
              CodeBlockPlugin.key,
              ListItemPlugin.key,
              TablePlugin.key,
            ].includes(n.type as any) ||
              n[IndentListPlugin.key])
          );
        },
      });
    },
  },
}));

import { withoutAbort } from '@udecode/plate-ai/react';
 
withoutAbort(editor, () => {
  // Perform operations without the risk of abort
  // For example, setting copilot suggestions
});