refactor: modify inline editor

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

@@ -0,0 +1,15 @@
+import { EditorProvider } from '@tiptap/react'
+import React from 'react'
+import StarterKit from '@tiptap/starter-kit'
+
+export const AiBlockEditor = ({ content }) => {
+  const extensions = [
+    StarterKit,
+  ]
+
+  return (
+    <EditorProvider extensions={extensions} content={content}>
+    </EditorProvider>
+  )
+}
+

components/editor/intelli/ai-block-extension.js

@@ -6,7 +6,7 @@
 import { Node, ReactNodeViewRenderer } from '@tiptap/react'
 import { PluginKey } from '@tiptap/pm/state'
 
-import { AiBlockView } from './ai-block-view'
+import AiBlockView from './ai-block-view'
 
 const extensionName = 'quick-command'
 
@@ -48,6 +48,7 @@ export const createAiBlock = () => {
           }
 
           if (isAtStart || !$anchor.parent.textContent.length) {
+            console.log($anchor.parent.textContent)
             return this.editor.commands.clearNodes()
           }
 

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

@@ -1,17 +1,15 @@
-import React from 'react'
-import { NodeViewWrapper } from '@tiptap/react'
+import React, { useRef } from 'react'
+import { NodeViewContent, NodeViewWrapper } from '@tiptap/react'
+import { AiBlockEditor } from './ai-block-editor'
 
-export class AiBlockView extends React.Component {
-  constructor (props) {
-    super(props)
-    this.$container = React.createRef()
-  }
+const AiBlockView = ({ node: { attrs: { language: defaultLanguage } }, updateAttributes, extension }) => {
+const $container = useRef();
 
-  render () {
-    return (
-      <NodeViewWrapper className={'shadow'}>
-        <textarea>Hello, world</textarea>
-      </NodeViewWrapper>
-    )
-  }
-}
+  return (
+    <NodeViewWrapper className={'shadow'} ref={$container}>
+      <AiBlockEditor content={"Hello, world"} />
+    </NodeViewWrapper>
+  );
+};
+
+export default AiBlockView;

components/editor/live-editor.jsx

@@ -53,6 +53,7 @@ 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({

pages/editor.css

@@ -124,7 +124,9 @@ button {
 .shadow {
     display: flex;
     position: relative;
+    padding: 0 10px;
     border-radius: 4px;
+    margin: 0 20px 20px;
     min-height: 64px;
     background: linear-gradient(0deg, #fff, #fff);
 }