refactor: reorg ui menu

components/editor/action/custom-commands.jsx

@@ -8,11 +8,11 @@ export const CustomCommands = Extension.create({
         console.log('variable', variableName, variableValue)
       },
       getSelectedText: () => ({ editor }) => {
+        if (!editor.state) return null
+
         const { from, to, empty } = editor.state.selection
 
-        if (empty) {
-          return null
-        }
+        if (empty) return null
 
         return editor.state.doc.textBetween(from, to, ' ')
       },

components/editor/intelli/ai-quick-command.jsx

@@ -1,13 +1,86 @@
-import { Extension } from '@tiptap/react'
+import { Extension, ReactRenderer } from '@tiptap/react'
+import { Suggestion } from '@tiptap/suggestion'
+import tippy from 'tippy.js'
+import { UiQuickCommand } from './ui-quick-command'
+
+const extensionName = 'quick-command'
 
 export const AiQuickCommand = Extension.create({
   name: 'quick-command',
-
+  addOptions () {
+    return {
+      char: 'Mod-/',
+      pluginKey: 'quick-command',
+    }
+  },
   addKeyboardShortcuts () {
     return {
       'Mod-/': () => {
         console.log('Mod-/ pressed')
       },
     }
+  },
+  addProseMirrorPlugins () {
+    return [
+      Suggestion({
+        editor: this.editor,
+        char: this.options.char,
+        pluginKey: this.options.pluginKey,
+
+        render: () => {
+          let component
+          let popup
+          let isEditable
+
+          return {
+            onStart: (props) => {
+              isEditable = props.editor.isEditable
+              if (!isEditable) return
+
+              component = new ReactRenderer(UiQuickCommand, {
+                props,
+                editor: props.editor,
+              })
+
+              popup = tippy('body', {
+                getReferenceClientRect: props.clientRect || (() => props.editor.storage[extensionName].rect),
+                appendTo: () => document.body,
+                content: component.element,
+                showOnCreate: true,
+                interactive: true,
+                trigger: 'manual',
+                placement: 'bottom-start',
+              })
+            },
+
+            onUpdate (props) {
+              if (!isEditable) return
+
+              component.updateProps(props)
+              props.editor.storage[extensionName].rect = props.clientRect()
+              popup[0].setProps({
+                getReferenceClientRect: props.clientRect,
+              })
+            },
+
+            onKeyDown (props) {
+              if (!isEditable) return
+
+              if (props.event.key === 'Escape') {
+                popup[0].hide()
+                return true
+              }
+              return component.ref?.onKeyDown(props)
+            },
+
+            onExit () {
+              if (!isEditable) return
+              popup && popup[0].destroy()
+              component.destroy()
+            },
+          }
+        }
+      })
+    ]
   }
 })

components/editor/intelli/ai-slash-commands.jsx

@@ -2,7 +2,7 @@ import { ReactRenderer } from '@tiptap/react'
 import { Node } from '@tiptap/core'
 import { Suggestion } from '@tiptap/suggestion'
 import tippy from 'tippy.js'
-import AiSlashMenu from './ai-slash-menu'
+import UiSlashMenu from './ui-slash-menu'
 
 // or try SlashCommands: https://github.com/ueberdosis/tiptap/issues/1508
 const extensionName = `ai-insert`
@@ -53,13 +53,11 @@ export const createSlashCommand = (name, options) => {
                 isEditable = props.editor.isEditable
                 if (!isEditable) return
 
-                component = new ReactRenderer(AiSlashMenu, {
+                component = new ReactRenderer(UiSlashMenu, {
                   props,
                   editor: props.editor,
                 })
 
-                console.log(component.element)
-
                 popup = tippy('body', {
                   getReferenceClientRect: props.clientRect || (() => props.editor.storage[extensionName].rect),
                   appendTo: () => document.body,

components/editor/intelli/ai-bubble-menu.jsx → components/editor/intelli/ui-bubble-menu.jsx

@@ -1,8 +1,8 @@
 import { BubbleMenu } from '@tiptap/react'
 import React from 'react'
 
-export const AiBubbleMenu = ({ editor }) => {
-  const selection = editor.commands.getSelectedText()
+export const UiBubbleMenu = ({ editor }) => {
+  const selection = editor.commands?.getSelectedText()
   let selectLength = selection?.length ? selection.length : 0
 
   // 根据长度优化

components/editor/intelli/ai-menu-bar.jsx → components/editor/intelli/ui-menubar.jsx

@@ -2,7 +2,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { CookieIcon } from '@radix-ui/react-icons'
 import React from 'react'
 // spike: https://ai-demo.tiptap.dev/kmLmpqbFJW
-export const AiMenubar = ({ editor }) => {
+export const UiMenubar = ({ editor }) => {
   return <DropdownMenu.Root aria-label="Center aligned">
     <DropdownMenu.Trigger asChild>
       <button className={'ToggleGroupItem flex items-center justify-center relative'} value="center"

components/editor/intelli/ui-quick-command.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export class UiQuickCommand extends React.Component {
+  render () {
+    return (
+      <div>Hello, world</div>
+    )
+  }
+}

components/editor/intelli/ai-slash-menu.jsx → components/editor/intelli/ui-slash-menu.jsx

@@ -6,7 +6,7 @@
  */
 import React from 'react'
 
-class AiSlashMenu extends React.Component {
+class UiSlashMenu extends React.Component {
   constructor (props) {
     super(props)
     this.$container = React.createRef()
@@ -99,4 +99,4 @@ class AiSlashMenu extends React.Component {
   }
 }
 
-export default AiSlashMenu
+export default UiSlashMenu

components/editor/live-editor.jsx

@@ -7,7 +7,7 @@ import React from 'react'
 import { MenuBar } from './menu-bar'
 
 import MarkdownIt from 'markdown-it'
-import { AiBubbleMenu } from './intelli/ai-bubble-menu'
+import { UiBubbleMenu } from './intelli/ui-bubble-menu'
 import { createSlashCommand } from './intelli/ai-slash-commands'
 import { CustomCommands } from './action/custom-commands'
 import { AiQuickCommand } from './intelli/ai-quick-command'
@@ -16,7 +16,6 @@ const md = new MarkdownIt()
 
 const extensions = [
   CustomCommands,
-  AiQuickCommand,
   StarterKit.configure({
     bulletList: {
       keepMarks: true,
@@ -39,6 +38,7 @@ const extensions = [
       }
     ]
   }),
+  AiQuickCommand,
   Color.configure({ types: [TextStyle.name, ListItem.name] }),
   // @ts-ignore
   TextStyle.configure({ types: [ListItem.name] }),
@@ -69,7 +69,7 @@ const LiveEditor = () => {
     <div>
       {editor && <MenuBar editor={editor}/>}
       <EditorContent editor={editor}/>
-      {editor && <AiBubbleMenu editor={editor}/>}
+      {editor && <UiBubbleMenu editor={editor}/>}
     </div>
   )
 }

components/editor/menu-bar.jsx

@@ -11,7 +11,7 @@ import {
 } from '@radix-ui/react-icons'
 import React from 'react'
 import * as ToggleGroup from '@radix-ui/react-toggle-group'
-import { AiMenubar } from './intelli/ai-menu-bar'
+import { UiMenubar } from './intelli/ui-menubar'
 
 export const MenuBar = ({ editor }) => {
   return (
@@ -124,7 +124,7 @@ export const MenuBar = ({ editor }) => {
         <DividerHorizontalIcon/>
       </ToggleGroup.Item>
 
-      <AiMenubar editor={editor} />
+      <UiMenubar editor={editor} />
     </ToggleGroup.Root>
   )
 }