feat: Full Markdown AI integration

.changeset/young-eggs-taste.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-ai': minor
+---
+
+Fixed a bug with interpreting markdown output from LLMs

apps/www/src/registry/default/components/editor/use-chat.ts

@@ -48,10 +48,12 @@ const fakeStreamText = ({
 } = {}) => {
   // Create 3 blocks with different lengths
   const blocks = [
+    [{ delay: 73, texts: '# Hello World' }],
     Array.from({ length: chunkCount }, () => ({
       delay: faker.number.int({ max: 100, min: 30 }),
       texts: faker.lorem.words({ max: 3, min: 1 }) + ' ',
     })),
+    [{ delay: 73, texts: '### Hello World' }],
     Array.from({ length: chunkCount + 2 }, () => ({
       delay: faker.number.int({ max: 100, min: 30 }),
       texts: faker.lorem.words({ max: 3, min: 1 }) + ' ',

apps/www/src/registry/default/plate-ui/ai-menu.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import { type NodeEntry, isHotkey } from '@udecode/plate';
+import { type NodeEntry, type TNode, isHotkey } from '@udecode/plate';
 import {
   AIChatPlugin,
   useEditorChat,
@@ -41,11 +41,33 @@ export function AIMenu() {
     null
   );
 
+  const updateAnchorElement = (node: TNode) => {
+    const el = editor.api.toDOMNode(node)!;
+
+    if (el) {
+      setAnchorElement(el);
+    } else {
+      // Detect a change to the editor content and update the anchor element
+      const editorDOM = editor.api.toDOMNode(editor)!;
+
+      const callback = () => {
+        const nodeDOM = editor.api.toDOMNode(node)!;
+
+        if (nodeDOM) {
+          setAnchorElement(nodeDOM);
+          editorDOM.removeEventListener('DOMNodeInserted', callback);
+        }
+      };
+
+      editorDOM.addEventListener('DOMNodeInserted', callback);
+    }
+  };
+
   const content = useLastAssistantMessage()?.content;
 
   const setOpen = (open: boolean) => {
     if (open) {
-      api.aiChat.show();
+      api.aiChat.show(updateAnchorElement);
     } else {
       api.aiChat.hide();
     }
@@ -86,7 +108,7 @@ export function AIMenu() {
   useHotkeys(
     'meta+j',
     () => {
-      api.aiChat.show();
+      api.aiChat.show(updateAnchorElement);
     },
     { enableOnContentEditable: true, enableOnFormTags: true }
   );

packages/ai/src/lib/transforms/insertAINodes.ts

@@ -1,4 +1,4 @@
-import type { Descendant, Path, SlateEditor } from '@udecode/plate';
+import type { Descendant, Path, SlateEditor, TElement } from '@udecode/plate';
 
 export const insertAINodes = (
   editor: SlateEditor,
@@ -11,15 +11,22 @@ export const insertAINodes = (
 ) => {
   if (!target && !editor.selection?.focus.path) return;
 
-  const aiNodes = nodes.map((node) => ({
-    ...node,
-    ai: true,
-  }));
+  const addAINodes = (plainNodes: Descendant[]) => {
+    return plainNodes.map(
+      (plainNode: Descendant): Descendant => ({
+        ...plainNode,
+        ...(plainNode.children ? {} : { ai: true }),
+        ...(plainNode.children
+          ? { children: addAINodes((plainNode as TElement).children) }
+          : {}),
+      })
+    );
+  };
+  const aiNodes = addAINodes(nodes);
 
   editor.tf.withoutNormalizing(() => {
-    editor.tf.insertNodes(aiNodes, {
+    editor.tf.insertFragment(aiNodes, {
       at: editor.api.end(target || editor.selection!.focus.path),
-      select: true,
     });
     editor.tf.collapse({ edge: 'end' });
   });

packages/ai/src/react/ai-chat/AIChatPlugin.ts

@@ -5,6 +5,7 @@ import {
   type OmitFirst,
   type PluginConfig,
   type SlateEditor,
+  type TNode,
   bindFirst,
 } from '@udecode/plate';
 import { BlockSelectionPlugin } from '@udecode/plate-selection/react';
@@ -55,6 +56,11 @@ export type AIChatPluginConfig = PluginConfig<
      * placeholders as `promptTemplate`.
      */
     systemTemplate: (props: EditorPromptParams) => string | void;
+    /**
+     * Callback function to update the anchor element when the AI is done
+     * rendering its answer
+     */
+    anchorUpdate?: (anchor: TNode) => void;
   } & TriggerComboboxPluginOptions,
   {
     aiChat: {
@@ -80,6 +86,7 @@ export const AIChatPlugin = createTPlatePlugin<AIChatPluginConfig>({
   dependencies: ['ai'],
   options: {
     aiEditor: null,
+    anchorUpdate: undefined,
     chat: { messages: [] } as any,
     mode: 'chat',
     open: false,
@@ -138,12 +145,15 @@ export const AIChatPlugin = createTPlatePlugin<AIChatPluginConfig>({
         delete lastBatch.ai;
       }
     },
-    show: () => {
+    show: (anchorUpdate?: (anchor: TNode) => void) => {
       api.aiChat.reset();
 
       getOptions().chat.setMessages?.([]);
 
       setOption('open', true);
+      if (anchorUpdate) {
+        setOption('anchorUpdate', anchorUpdate);
+      }
     },
   }))
   .extendTransforms(({ editor }) => ({

packages/ai/src/react/ai-chat/useAIChatHook.ts

@@ -1,4 +1,6 @@
-import { deserializeInlineMd } from '@udecode/plate-markdown';
+import type { Operation } from '@udecode/plate';
+
+import { deserializeMd } from '@udecode/plate-markdown';
 import { useEditorPlugin, usePluginOption } from '@udecode/plate/react';
 
 import type { AIPluginConfig } from '../ai/AIPlugin';
@@ -10,6 +12,10 @@ import { useChatChunk } from './hooks/useChatChunk';
 export const useAIChatHooks = () => {
   const { editor, tf } = useEditorPlugin<AIPluginConfig>({ key: 'ai' });
   const mode = usePluginOption({ key: 'aiChat' } as AIChatPluginConfig, 'mode');
+  const anchorUpdate = usePluginOption(
+    { key: 'aiChat' } as AIChatPluginConfig,
+    'anchorUpdate'
+  );
 
   useChatChunk({
     onChunk: ({ isFirst, nodes }) => {
@@ -33,7 +39,11 @@ export const useAIChatHooks = () => {
       editor.undo();
       editor.history.redos.pop();
 
-      const nodes = deserializeInlineMd(editor, content);
+      const deserialized = deserializeMd(editor, content);
+      const nodes =
+        deserialized.at(0)?.type === 'p'
+          ? [...deserialized[0].children, ...deserialized.slice(1)]
+          : deserialized;
 
       withAIBatch(
         editor,
@@ -42,6 +52,15 @@ export const useAIChatHooks = () => {
         },
         { split: true }
       );
+
+      const lastAINode = editor.history.undos
+        .at(-1)
+        ?.operations.findLast(
+          (op: Operation) => op.type === 'insert_node'
+        )?.node;
+      if (lastAINode && anchorUpdate) {
+        anchorUpdate(lastAINode);
+      }
     },
   });
 };

packages/ai/src/react/copilot/CopilotPlugin.tsx

@@ -228,28 +228,28 @@ export const CopilotPlugin = createTPlatePlugin<CopilotPluginConfig>({
       shortcuts: {
         acceptCopilot: {
           keys: [[Key.Tab]],
-          handler: ({ event }) => {
+          preventDefault: true,
+          handler: () => {
             if (!getOptions().suggestionText?.length) return;
 
-            event.preventDefault();
             api.copilot.accept();
           },
         },
         acceptCopilotNextWord: {
           keys: [[Key.Meta, Key.ArrowRight]],
-          handler: ({ event }) => {
+          preventDefault: true,
+          handler: () => {
             if (!getOptions().suggestionText?.length) return;
 
-            event.preventDefault();
             api.copilot.acceptNextWord();
           },
         },
         hideCopilot: {
           keys: [[Key.Escape]],
-          handler: ({ event }) => {
+          preventDefault: true,
+          handler: () => {
             if (!getOptions().suggestionText?.length) return;
 
-            event.preventDefault();
             api.copilot.reset();
           },
         },

packages/ai/tsconfig.build.json

@@ -3,5 +3,7 @@
   "compilerOptions": {
     "outDir": "./dist"
   },
-  "include": ["src"]
-}
+  "include": [
+    "src"
+  ]
+}