feat: add layout for box

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

@@ -1,15 +1,30 @@
-import { EditorProvider } from '@tiptap/react'
-import React from 'react'
+import { EditorContent, EditorProvider, useEditor } from '@tiptap/react'
+import React, { useEffect } from 'react'
 import StarterKit from '@tiptap/starter-kit'
+import { EnterIcon } from '@radix-ui/react-icons'
 
 export const AiBlockEditor = ({ content }) => {
   const extensions = [
     StarterKit,
   ]
+  const editor = useEditor({
+    extensions,
+    content: content,
+    editorProps: {
+      attributes: {
+        class: 'prose',
+      },
+    },
+  })
 
   return (
-    <EditorProvider extensions={extensions} content={content}>
-    </EditorProvider>
+    <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>
+      </div>}
+    </div>
   )
 }
 

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

@@ -3,13 +3,14 @@ import { NodeViewContent, NodeViewWrapper } from '@tiptap/react'
 import { AiBlockEditor } from './ai-block-editor'
 
 const AiBlockView = ({ node: { attrs: { language: defaultLanguage } }, updateAttributes, extension }) => {
-const $container = useRef();
+  const $container = useRef()
+  console.log(updateAttributes)
 
   return (
     <NodeViewWrapper className={'shadow'} ref={$container}>
-      <AiBlockEditor content={"Hello, world"} />
+      <AiBlockEditor content={''}/>
     </NodeViewWrapper>
-  );
-};
+  )
+}
 
-export default AiBlockView;
+export default AiBlockView

pages/editor.css

@@ -122,7 +122,6 @@ button {
 }
 
 .shadow {
-    display: flex;
     position: relative;
     padding: 0 10px;
     border-radius: 4px;
@@ -131,6 +130,45 @@ button {
     background: linear-gradient(0deg, #fff, #fff);
 }
 
+.ai-block-editor-block {
+    display: flex;
+    flex-direction: column;
+}
+
+.ai-block-editor {
+    width: 100%;
+}
+
+.ai-block-actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 1em;
+}
+
+.ai-block-actions button {
+    border-radius: 4px;
+    padding: 0 1em;
+    background: var(--mauve-4);
+    border: 2px solid var(--mauve-5);
+    margin-right: 4px;
+}
+
+.ai-block-actions button svg {
+    margin-left: 8px ;
+}
+
+.ai-block-actions button span {
+    padding: 0.2em;
+    font-size: 10px;
+    line-height: 10px;
+    border-radius: 4px;
+    background: var(--mauve-2);
+}
+
+.ai-block-actions svg {
+    display: inline-block;
+}
+
 .shadow:before,
 .shadow:after {
     content: "";

styles/global.css

@@ -236,7 +236,8 @@ input {
     border: 1px solid #0070f3;
     border-radius: 10px;
     width: 600px;
-    height: 480px;
+    height: 100%;
+    min-height: 80vh;
 }
 
 .domain-buttons {