fix(extension/bubble-menu): 🐛 fix bubble menu and floating menu being available when editor not editable (#3195)

demos/src/Extensions/BubbleMenu/React/index.jsx

@@ -2,7 +2,7 @@ import './styles.scss'
 
 import { BubbleMenu, EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
-import React from 'react'
+import React, { useEffect } from 'react'
 
 export default () => {
   const editor = useEditor({
@@ -16,8 +16,20 @@ export default () => {
     `,
   })
 
+  const [isEditable, setIsEditable] = React.useState(true)
+
+  useEffect(() => {
+    if (editor) {
+      editor.setEditable(isEditable)
+    }
+  }, [isEditable, editor])
+
   return (
     <>
+      <div>
+        <input type="checkbox" checked={isEditable} onChange={() => setIsEditable(!isEditable)} />
+        Editable
+      </div>
       {editor && <BubbleMenu editor={editor} tippyOptions={{ duration: 100 }}>
         <button
           onClick={() => editor.chain().focus().toggleBold().run()}