feat: add cancel event to child editor

unit-mesh · Nov 22, 2023 · b7a5da6 · b7a5da6
1 parent 9df4d37
commit b7a5da6
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 26 deletions.
diff --git a/components/editor/intelli/ai-block-editor.jsx b/components/editor/intelli/ai-block-editor.jsx
@@ -3,27 +3,28 @@ 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, cancel }) => {
+  const ActionBar = Extension.create({
+    addCommands: () => ({
+      callAi: () => ({ commands }) => {
+        console.log('call ai')
+        commands.insertContent('Hello World!')
+      },
+      cancelAi: () => ({ commands }) => {
+        cancel()
+      },
+    }),
+    addKeyboardShortcuts() {
+      return {
+        'Mod-Enter': () => {
+          this.editor.commands.callAi()
+          this.editor.view?.focus()
+        },
+        Escape: () => this.editor.commands.cancelAi(),
+      }
     },
-  }),
-})
+  })
 
-export const AiBlockEditor = ({ content }) => {
   const extensions = [
     StarterKit,
     ActionBar,
@@ -39,7 +40,7 @@ export const AiBlockEditor = ({ content }) => {
   })
 
   useEffect(() => {
-    if (editor) editor.view.focus();
+    if (editor) editor.view.focus()
   }, [editor])
 
   return (

diff --git a/components/editor/intelli/ai-block-extension.js b/components/editor/intelli/ai-block-extension.js
@@ -31,6 +31,13 @@ export const createAiBlock = () => {
           },
       }
     },
+    addAttributes() {
+      return {
+        textContent: {
+          default: "",
+        }
+      }
+    },
     addNodeView () {
       return ReactNodeViewRenderer(AiBlockView)
     },
@@ -48,7 +55,6 @@ export const createAiBlock = () => {
           }
 
           if (isAtStart || !$anchor.parent.textContent.length) {
-            console.log($anchor.parent.textContent)
             return this.editor.commands.clearNodes()
           }
 
@@ -57,6 +63,8 @@ export const createAiBlock = () => {
 
         // exit node on triple enter
         Enter: ({ editor }) => {
+          // if (this.attributes.isTypingInChild) return false;
+
           if (!this.options.exitOnTripleEnter) {
             return false
           }

diff --git a/components/editor/intelli/ai-block-view.jsx b/components/editor/intelli/ai-block-view.jsx
@@ -1,14 +1,16 @@
 import React, { useRef } from 'react'
-import { NodeViewContent, NodeViewWrapper } from '@tiptap/react'
+import { NodeViewWrapper } from '@tiptap/react'
 import { AiBlockEditor } from './ai-block-editor'
 
-const AiBlockView = ({ node: { attrs: { language: defaultLanguage } }, updateAttributes, extension }) => {
+const AiBlockView = ( props ) => {
   const $container = useRef()
-  console.log(updateAttributes)
+  console.log(props)
 
   return (
     <NodeViewWrapper className={'shadow'} ref={$container}>
-      <AiBlockEditor content={''}/>
+      <AiBlockEditor content={''} cancel={() => {
+        props?.deleteNode()
+      }}/>
     </NodeViewWrapper>
   )
 }

diff --git a/components/editor/live-editor.jsx b/components/editor/live-editor.jsx
@@ -53,7 +53,6 @@ Hi there, BB is editor for Unit Mesh architecture paradigms, the next-gen softwa
 2. use \`Alt\` + \`/\` or \`Command\` + \`/\` to show custom input box.
 3. select text and right click to see the context menu.
 
-/continue
 `
 const LiveEditor = () => {
   const editor = useEditor({