fix(bubble-menu): support vue node views

ueberdosis · Mar 27, 2023 · 1503c24 · 1503c24
1 parent cb1aa86
commit 1503c24
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 3 deletions.
diff --git a/demos/src/Extensions/BubbleMenu/React/index.jsx b/demos/src/Extensions/BubbleMenu/React/index.jsx
@@ -1,18 +1,69 @@
 import './styles.scss'
 
-import { BubbleMenu, EditorContent, useEditor } from '@tiptap/react'
+import {
+  BubbleMenu, EditorContent, Node, NodeViewWrapper, ReactNodeViewRenderer, useEditor,
+} from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import React, { useEffect } from 'react'
 
+const CustomNodeView = () => {
+  return (
+    <NodeViewWrapper>
+      <div contentEditable={false} style={{ float: 'left', aspectRatio: 1, backgroundColor: 'red' }}>This is my node view!</div>
+    </NodeViewWrapper>
+  )
+}
+
+const CustomNodeViewNode = Node.create({
+  name: 'customNodeView',
+
+  group: 'block',
+
+  content: 'inline*',
+
+  selectable: true,
+
+  defining: true,
+
+  atom: true,
+
+  isolating: true,
+
+  renderHTML() {
+    return ['div', { class: 'custom-node-view' }, 0]
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div.custom-node-view',
+      },
+    ]
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(CustomNodeView)
+  },
+})
+
 export default () => {
   const editor = useEditor({
     extensions: [
       StarterKit,
+      CustomNodeViewNode,
     ],
     content: `
+      <div class="custom-node-view"></div>
+      <p>
+        Hey, try to select some text here. There will popup a menu for selecting some inline styles. Remember: you have full control about content and styling of this menu.
+      </p>
+      <div class="custom-node-view"></div>
+      <div class="custom-node-view"></div>
       <p>
         Hey, try to select some text here. There will popup a menu for selecting some inline styles. Remember: you have full control about content and styling of this menu.
       </p>
+      <div class="custom-node-view"></div>
+      <div class="custom-node-view"></div>
     `,
   })
 
@@ -30,7 +81,7 @@ export default () => {
         <input type="checkbox" checked={isEditable} onChange={() => setIsEditable(!isEditable)} />
         Editable
       </div>
-      {editor && <BubbleMenu editor={editor} tippyOptions={{ duration: 100 }}>
+      {editor && <BubbleMenu updateDelay={2000} editor={editor} tippyOptions={{ duration: 100 }}>
         <button
           onClick={() => editor.chain().focus().toggleBold().run()}
           className={editor.isActive('bold') ? 'is-active' : ''}

diff --git a/packages/extension-bubble-menu/src/bubble-menu-plugin.ts b/packages/extension-bubble-menu/src/bubble-menu-plugin.ts
@@ -215,7 +215,7 @@ export class BubbleMenuView {
           if (isNodeSelection(state.selection)) {
             let node = view.nodeDOM(from) as HTMLElement
 
-            const nodeViewWrapper = node.querySelector('[data-node-view-wrapper]')
+            const nodeViewWrapper = node.dataset.nodeViewWrapper ? node : node.querySelector('[data-node-view-wrapper]')
 
             if (nodeViewWrapper) {
               node = nodeViewWrapper.firstChild as HTMLElement