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()}

demos/src/Extensions/BubbleMenu/React/styles.scss

@@ -3,3 +3,7 @@
     margin-top: 0.75em;
   }
 }
+
+input[type="checkbox"] {
+  margin-right: 8px;
+}

demos/src/Extensions/BubbleMenu/Vue/index.vue

@@ -1,5 +1,9 @@
 <template>
   <div>
+    <div>
+      <input type="checkbox" :checked="isEditable" @change="() => isEditable = !isEditable">
+      Editable
+    </div>
     <bubble-menu :editor="editor" :tippy-options="{ duration: 100 }" v-if="editor">
       <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
         bold
@@ -28,9 +32,16 @@ export default {
   data() {
     return {
       editor: null,
+      isEditable: true,
     }
   },
 
+  watch: {
+    isEditable(value) {
+      this.editor.setEditable(value)
+    },
+  },
+
   mounted() {
     this.editor = new Editor({
       extensions: [
@@ -57,4 +68,8 @@ export default {
     margin-top: 0.75em;
   }
 }
+
+input[type="checkbox"] {
+  margin-right: 4px;
+}
 </style>

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

@@ -2,7 +2,7 @@ import './styles.scss'
 
 import { EditorContent, FloatingMenu, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
-import React from 'react'
+import React, { useEffect } from 'react'
 
 export default () => {
   const editor = useEditor({
@@ -17,8 +17,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 && <FloatingMenu editor={editor} tippyOptions={{ duration: 100 }}>
         <button
           onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}

demos/src/Extensions/FloatingMenu/Vue/index.vue

@@ -1,5 +1,9 @@
 <template>
   <div>
+    <div>
+      <input type="checkbox" :checked="isEditable" @change="() => isEditable = !isEditable">
+      Editable
+    </div>
     <floating-menu :editor="editor" :tippy-options="{ duration: 100 }" v-if="editor">
       <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
         H1
@@ -28,9 +32,16 @@ export default {
   data() {
     return {
       editor: null,
+      isEditable: true,
     }
   },
 
+  watch: {
+    isEditable(value) {
+      this.editor.setEditable(value)
+    },
+  },
+
   mounted() {
     this.editor = new Editor({
       extensions: [

packages/extension-bubble-menu/src/bubble-menu-plugin.ts

@@ -66,6 +66,7 @@ export class BubbleMenuView {
       !hasEditorFocus
       || empty
       || isEmptyTextBlock
+      || !this.editor.isEditable
     ) {
       return false
     }

packages/extension-floating-menu/src/floating-menu-plugin.ts

@@ -46,6 +46,7 @@ export class FloatingMenuView {
       || !empty
       || !isRootDepth
       || !isEmptyTextBlock
+      || !this.editor.isEditable
     ) {
       return false
     }