fix(extension/bubble-menu): 🐛 fix bubble menu and floating menu being…

… available when editor not editable (#3195)
ueberdosis · Sep 14, 2022 · fa96749 · fa96749
1 parent b896cc2
commit fa96749
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -46,6 +46,7 @@ export class FloatingMenuView {
       || !empty
       || !isRootDepth
       || !isEmptyTextBlock
+      || !this.editor.isEditable
     ) {
       return false
     }