refactor: make two editor working togther

unit-mesh · Nov 22, 2023 · 3657bfa · 3657bfa
1 parent b7a5da6
commit 3657bfa
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 15 deletions.
diff --git a/components/editor/intelli/ai-block-editor.jsx b/components/editor/intelli/ai-block-editor.jsx
@@ -7,7 +7,6 @@ export const AiBlockEditor = ({ content, cancel }) => {
   const ActionBar = Extension.create({
     addCommands: () => ({
       callAi: () => ({ commands }) => {
-        console.log('call ai')
         commands.insertContent('Hello World!')
       },
       cancelAi: () => ({ commands }) => {
@@ -20,7 +19,11 @@ export const AiBlockEditor = ({ content, cancel }) => {
           this.editor.commands.callAi()
           this.editor.view?.focus()
         },
-        Escape: () => this.editor.commands.cancelAi(),
+        'Escape': () => {
+          console.log("Escape KEYBOARD??")
+          this.editor.commands.cancelAi()
+          // this.editor.view?.focus()
+        },
       }
     },
   })
@@ -34,15 +37,41 @@ export const AiBlockEditor = ({ content, cancel }) => {
     content: content,
     editorProps: {
       attributes: {
-        class: 'prose',
+        class: 'prose ai-block-editor-inner',
       },
     },
   })
 
   useEffect(() => {
-    if (editor) editor.view.focus()
+    if (editor) {
+      setTimeout(() => {
+        if (editor) {
+          editor.view.focus()
+        }
+      }, 100)
+    }
   }, [editor])
 
+  useEffect(() => {
+    const keyDownHandler = event => {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        editor?.commands?.newlineInCode()
+        editor?.view?.focus()
+      }
+      if (event.key === 'Escape') {
+        console.log("sfdsfsf")
+        event.preventDefault();
+        editor?.commands?.cancelAi()
+      }
+    };
+
+    document.addEventListener('keydown', keyDownHandler);
+    return () => {
+      document.removeEventListener('keydown', keyDownHandler);
+    };
+  }, [editor]);
+
   return (
     <div className={'ai-block-editor-block'}>
       <EditorContent editor={editor} className={'ai-block-editor'}/>

diff --git a/components/editor/intelli/ai-block-extension.js b/components/editor/intelli/ai-block-extension.js
@@ -11,7 +11,7 @@ import AiBlockView from './ai-block-view'
 const extensionName = 'quick-command'
 
 export const createAiBlock = () => {
-  const pluginKey = new PluginKey(extensionName)
+  let isEditInChild = false
 
   return Node.create({
     name: extensionName,
@@ -29,13 +29,12 @@ export const createAiBlock = () => {
           attributes => ({ commands }) => {
             return commands.toggleNode(this.name, 'paragraph', attributes)
           },
-      }
-    },
-    addAttributes() {
-      return {
-        textContent: {
-          default: "",
-        }
+        enableEnter:
+          () => ({ commands }) => {
+            isEditInChild = false
+            commands.focus()
+            this.editor.setEditable(true)
+          },
       }
     },
     addNodeView () {
@@ -44,6 +43,8 @@ export const createAiBlock = () => {
     addKeyboardShortcuts () {
       return {
         'Mod-/': (state, dispatch, view) => {
+          isEditInChild = true
+          this.editor.setEditable(false)
           this.editor.commands.toggleAiBlock()
         },
         Backspace: () => {
@@ -60,10 +61,17 @@ export const createAiBlock = () => {
 
           return false
         },
+        Escape: () => {
+          console.log("Escape")
+          if (isEditInChild === true) {
+            this.editor.setEditable(true)
+            this.editor.commands.focus()
+          }
+        },
 
         // exit node on triple enter
         Enter: ({ editor }) => {
-          // if (this.attributes.isTypingInChild) return false;
+          if (isEditInChild) return true
 
           if (!this.options.exitOnTripleEnter) {
             return false

diff --git a/components/editor/intelli/ai-block-view.jsx b/components/editor/intelli/ai-block-view.jsx
@@ -4,12 +4,12 @@ import { AiBlockEditor } from './ai-block-editor'
 
 const AiBlockView = ( props ) => {
   const $container = useRef()
-  console.log(props)
 
   return (
     <NodeViewWrapper className={'shadow'} ref={$container}>
       <AiBlockEditor content={''} cancel={() => {
-        props?.deleteNode()
+        props?.editor?.commands.toggleAiBlock()
+        props?.editor?.commands.enableEnter()
       }}/>
     </NodeViewWrapper>
   )

diff --git a/pages/editor.css b/pages/editor.css
@@ -139,6 +139,10 @@ button {
     width: 100%;
 }
 
+.ai-block-editor-inner {
+    min-height: 64px;
+}
+
 .ai-block-actions {
     display: flex;
     justify-content: flex-end;