From 73b135c84e477da2923adfe91d9f98d6eea5dcc9 Mon Sep 17 00:00:00 2001
From: Phodal Huang <h@phodal.com>
Date: Wed, 22 Nov 2023 14:32:53 +0800
Subject: [PATCH] refactor: modify inline editor

---
 components/editor/intelli/ai-block-editor.jsx | 15 ++++++++++
 .../editor/intelli/ai-block-extension.js      |  3 +-
 components/editor/intelli/ai-block-view.jsx   | 28 +++++++++----------
 components/editor/live-editor.jsx             |  1 +
 pages/editor.css                              |  2 ++
 5 files changed, 33 insertions(+), 16 deletions(-)
 create mode 100644 components/editor/intelli/ai-block-editor.jsx

diff --git a/components/editor/intelli/ai-block-editor.jsx b/components/editor/intelli/ai-block-editor.jsx
new file mode 100644
index 0000000..97551ab
--- /dev/null
+++ b/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>
+  )
+}
+
diff --git a/components/editor/intelli/ai-block-extension.js b/components/editor/intelli/ai-block-extension.js
index 27a21db..1a51f7d 100644
--- a/components/editor/intelli/ai-block-extension.js
+++ b/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()
           }
 
diff --git a/components/editor/intelli/ai-block-view.jsx b/components/editor/intelli/ai-block-view.jsx
index b6f30e3..33301df 100644
--- a/components/editor/intelli/ai-block-view.jsx
+++ b/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>
-    )
-  }
-}
\ No newline at end of file
+  return (
+    <NodeViewWrapper className={'shadow'} ref={$container}>
+      <AiBlockEditor content={"Hello, world"} />
+    </NodeViewWrapper>
+  );
+};
+
+export default AiBlockView;
diff --git a/components/editor/live-editor.jsx b/components/editor/live-editor.jsx
index 6603360..2866d31 100644
--- a/components/editor/live-editor.jsx
+++ b/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({
diff --git a/pages/editor.css b/pages/editor.css
index 4197525..3fe144b 100644
--- a/pages/editor.css
+++ b/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);
 }