diff --git a/components/editor/intelli/ai-block-editor.jsx b/components/editor/intelli/ai-block-editor.jsx
index abb30f0..61c18f3 100644
--- 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 (
diff --git a/components/editor/intelli/ai-block-extension.js b/components/editor/intelli/ai-block-extension.js
index bf18e7c..591f6fc 100644
--- 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
index db233f2..3c9c5ca 100644
--- 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 (
{
- props?.deleteNode()
+ props?.editor?.commands.toggleAiBlock()
+ props?.editor?.commands.enableEnter()
}}/>
)
diff --git a/pages/editor.css b/pages/editor.css
index 3778b26..a21f7e1 100644
--- 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;