fix(demos): revert bubble menu demo

ueberdosis · Mar 27, 2023 · 25b1af9 · 25b1af9
1 parent 1503c24
commit 25b1af9
Showing 1 changed file with 2 additions and 51 deletions.
diff --git a/demos/src/Extensions/BubbleMenu/React/index.jsx b/demos/src/Extensions/BubbleMenu/React/index.jsx
@@ -1,69 +1,20 @@
 import './styles.scss'
 
 import {
-  BubbleMenu, EditorContent, Node, NodeViewWrapper, ReactNodeViewRenderer, useEditor,
+  BubbleMenu, EditorContent, 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>
     `,
   })
 
@@ -81,7 +32,7 @@ export default () => {
         <input type="checkbox" checked={isEditable} onChange={() => setIsEditable(!isEditable)} />
         Editable
       </div>
-      {editor && <BubbleMenu updateDelay={2000} editor={editor} tippyOptions={{ duration: 100 }}>
+      {editor && <BubbleMenu editor={editor} tippyOptions={{ duration: 100 }}>
         <button
           onClick={() => editor.chain().focus().toggleBold().run()}
           className={editor.isActive('bold') ? 'is-active' : ''}