feat: add simiple action to binding to inner element

components/editor/intelli/ai-block-editor.jsx

@@ -1,11 +1,32 @@
-import { EditorContent, EditorProvider, useEditor } from '@tiptap/react'
+import { EditorContent, Extension, useEditor } from '@tiptap/react'
 import React, { useEffect } from 'react'
 import StarterKit from '@tiptap/starter-kit'
 import { EnterIcon } from '@radix-ui/react-icons'
 
+const ActionBar = Extension.create({
+  addCommands: () => ({
+    callAi: () => ({ commands }) => {
+      console.log('call ai')
+      commands.insertContent({
+        type: 'paragraph',
+        content: [
+          {
+            type: 'text',
+            text: 'Hello World!',
+          },
+        ],
+      })
+    },
+    cancelAi: () => ({ commands }) => {
+      console.log('cancel ai')
+    },
+  }),
+})
+
 export const AiBlockEditor = ({ content }) => {
   const extensions = [
     StarterKit,
+    ActionBar,
   ]
   const editor = useEditor({
     extensions,
@@ -17,14 +38,23 @@ export const AiBlockEditor = ({ content }) => {
     },
   })
 
+  useEffect(() => {
+    if (editor) editor.view.focus();
+  }, [editor])
+
   return (
-    <div className={"ai-block-editor-block"}>
-      <EditorContent editor={editor} className={"ai-block-editor"}/>
+    <div className={'ai-block-editor-block'}>
+      <EditorContent editor={editor} className={'ai-block-editor'}/>
       {editor && <div className={'ai-block-actions'}>
-        <button>Go<EnterIcon/></button>
-        <button>Cancel <span>esc</span></button>
+        <button onClick={() => {
+          editor.commands.callAi()
+        }}>
+          Go<EnterIcon/>
+        </button>
+        <button onClick={() => {
+          editor.commands.cancelAi()
+        }}>Cancel <span>esc</span></button>
       </div>}
     </div>
   )
 }
-