diff --git a/demos/src/Extensions/BubbleMenu/React/index.jsx b/demos/src/Extensions/BubbleMenu/React/index.jsx
index 6ed4ff3820..3fe7675b96 100644
--- a/demos/src/Extensions/BubbleMenu/React/index.jsx
+++ b/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()}
diff --git a/demos/src/Extensions/BubbleMenu/React/styles.scss b/demos/src/Extensions/BubbleMenu/React/styles.scss
index 12c872982b..7b93574276 100644
--- a/demos/src/Extensions/BubbleMenu/React/styles.scss
+++ b/demos/src/Extensions/BubbleMenu/React/styles.scss
@@ -3,3 +3,7 @@
     margin-top: 0.75em;
   }
 }
+
+input[type="checkbox"] {
+  margin-right: 8px;
+}
diff --git a/demos/src/Extensions/BubbleMenu/Vue/index.vue b/demos/src/Extensions/BubbleMenu/Vue/index.vue
index 9df08d484b..c40a9f8f4d 100644
--- a/demos/src/Extensions/BubbleMenu/Vue/index.vue
+++ b/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>
diff --git a/demos/src/Extensions/FloatingMenu/React/index.jsx b/demos/src/Extensions/FloatingMenu/React/index.jsx
index 2ec6ba804f..f1a1d6aa8b 100644
--- a/demos/src/Extensions/FloatingMenu/React/index.jsx
+++ b/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()}
diff --git a/demos/src/Extensions/FloatingMenu/Vue/index.vue b/demos/src/Extensions/FloatingMenu/Vue/index.vue
index 163ca7b4a4..35ff0dc557 100644
--- a/demos/src/Extensions/FloatingMenu/Vue/index.vue
+++ b/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: [
diff --git a/packages/extension-bubble-menu/src/bubble-menu-plugin.ts b/packages/extension-bubble-menu/src/bubble-menu-plugin.ts
index 0812b0654a..d03fdea4e0 100644
--- a/packages/extension-bubble-menu/src/bubble-menu-plugin.ts
+++ b/packages/extension-bubble-menu/src/bubble-menu-plugin.ts
@@ -66,6 +66,7 @@ export class BubbleMenuView {
       !hasEditorFocus
       || empty
       || isEmptyTextBlock
+      || !this.editor.isEditable
     ) {
       return false
     }
diff --git a/packages/extension-floating-menu/src/floating-menu-plugin.ts b/packages/extension-floating-menu/src/floating-menu-plugin.ts
index 1440492e95..f5416d3369 100644
--- a/packages/extension-floating-menu/src/floating-menu-plugin.ts
+++ b/packages/extension-floating-menu/src/floating-menu-plugin.ts
@@ -46,6 +46,7 @@ export class FloatingMenuView {
       || !empty
       || !isRootDepth
       || !isEmptyTextBlock
+      || !this.editor.isEditable
     ) {
       return false
     }