From fa96749ce22ec67125da491cfeeb38623b9f0d6e Mon Sep 17 00:00:00 2001
From: Dominik <6538827+bdbch@users.noreply.github.com>
Date: Wed, 14 Sep 2022 02:05:36 +0200
Subject: [PATCH] fix(extension/bubble-menu): :bug: fix bubble menu and
 floating menu being available when editor not editable (#3195)

---
 demos/src/Extensions/BubbleMenu/React/index.jsx   | 14 +++++++++++++-
 demos/src/Extensions/BubbleMenu/React/styles.scss |  4 ++++
 demos/src/Extensions/BubbleMenu/Vue/index.vue     | 15 +++++++++++++++
 demos/src/Extensions/FloatingMenu/React/index.jsx | 14 +++++++++++++-
 demos/src/Extensions/FloatingMenu/Vue/index.vue   | 11 +++++++++++
 .../src/bubble-menu-plugin.ts                     |  1 +
 .../src/floating-menu-plugin.ts                   |  1 +
 7 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/demos/src/Extensions/BubbleMenu/React/index.jsx b/demos/src/Extensions/BubbleMenu/React/index.jsx
index 6ed4ff38..3fe7675b 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 12c87298..7b935742 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 9df08d48..c40a9f8f 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 2ec6ba80..f1a1d6aa 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 163ca7b4..35ff0dc5 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 0812b065..d03fdea4 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 1440492e..f5416d33 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
     }