refactoring

demos/src/Examples/Book/React/index.jsx

@@ -5,10 +5,6 @@ import { content } from '../content.js'
 import './styles.scss'
 
 const MenuBar = ({ editor }) => {
-  if (!editor) {
-    return null
-  }
-
   return (
     <>
       <button

demos/src/Examples/Book/Vue/index.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <div v-if="editor">
     <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
       bold
@@ -66,7 +65,6 @@
     </button>
   </div>
   <editor-content :editor="editor" />
-  </div>
 </template>
 
 <script>

demos/src/Examples/CodeBlockLanguage/React/index.jsx

@@ -16,10 +16,6 @@ import lowlight from 'lowlight'
 import './styles.scss'
 
 const MenuBar = ({ editor }) => {
-  if (!editor) {
-    return null
-  }
-
   return (
     <button onClick={() => editor.chain().focus().toggleCodeBlock().run()} className={editor.isActive('codeBlock') ? 'is-active' : ''}>
       code block

demos/src/Examples/CodeBlockLanguage/Vue/index.vue

@@ -3,9 +3,8 @@
     <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
       code block
     </button>
-
-    <editor-content :editor="editor" />
   </div>
+  <editor-content :editor="editor" />
 </template>
 
 <script>

demos/src/Examples/Community/Vue/index.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <editor-content :editor="editor" />
 
   <div v-if="editor" :class="{'character-count': true, 'character-count--warning': editor.storage.characterCount.characters() === limit}">
@@ -37,7 +36,6 @@
       {{ editor.storage.characterCount.characters() }}/{{ limit }} characters
     </div>
   </div>
-  </div>
 </template>
 
 <script>

demos/src/Examples/Default/React/index.jsx

@@ -4,10 +4,6 @@ import StarterKit from '@tiptap/starter-kit'
 import './styles.scss'
 
 const MenuBar = ({ editor }) => {
-  if (!editor) {
-    return null
-  }
-
   return (
     <>
       <button

demos/src/Examples/Default/Vue/index.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <div v-if="editor">
     <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
       bold
@@ -66,7 +65,6 @@
     </button>
   </div>
   <editor-content :editor="editor" />
-  </div>
 </template>
 
 <script>

demos/src/Examples/Drawing/Vue/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <div v-if="editor">
   <editor-content :editor="editor" />
-  </div>
 </template>
 
 <script>

demos/src/Examples/Formatting/React/index.jsx

@@ -6,10 +6,6 @@ import Highlight from '@tiptap/extension-highlight'
 import './styles.scss'
 
 const MenuBar = ({ editor }) => {
-  if (!editor) {
-    return null
-  }
-
   return (
     <>
       <button onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()} className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}>

demos/src/Examples/Formatting/Vue/index.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <div v-if="editor">
     <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
       h1
@@ -39,7 +38,6 @@
     </button>
   </div>
   <editor-content :editor="editor" />
-  </div>
 </template>
 
 <script>

demos/src/Examples/Images/Vue/index.vue

@@ -3,8 +3,8 @@
     <button @click="addImage">
       add image from URL
     </button>
-    <editor-content :editor="editor" />
   </div>
+  <editor-content :editor="editor" />
 </template>
 
 <script>

demos/src/Examples/Menus/Vue/index.vue

@@ -1,10 +1,9 @@
 <template>
-  <div>
+  <div v-if="editor">
     <bubble-menu
       class="bubble-menu"
       :tippy-options="{ duration: 100 }"
       :editor="editor"
-      v-if="editor"
     >
       <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
         Bold
@@ -21,7 +20,6 @@
       class="floating-menu"
       :tippy-options="{ duration: 100 }"
       :editor="editor"
-      v-if="editor"
     >
       <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
         H1
@@ -33,9 +31,9 @@
         Bullet List
       </button>
     </floating-menu>
+  </div>
 
   <editor-content :editor="editor" />
-  </div>
 </template>
 
 <script>

demos/src/Examples/Savvy/React/index.jsx

@@ -30,9 +30,5 @@ export default () => {
       `,
   })
 
-  if (!editor) {
-    return null
-  }
-
   return <EditorContent editor={editor} />
 }

demos/src/Examples/Tables/React/index.jsx

@@ -54,10 +54,6 @@ export const tableHTML = `
 `
 
 const MenuBar = ({ editor }) => {
-  if (!editor) {
-    return null
-  }
-
   return (
     <>
       <button onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}>

demos/src/Examples/Tables/Vue/index.vue

@@ -54,9 +54,8 @@
     <button @click="editor.chain().focus().goToPreviousCell().run()" :disabled="!editor.can().goToPreviousCell()">
       goToPreviousCell
     </button>
-
-    <editor-content :editor="editor" />
   </div>
+  <editor-content :editor="editor" />
 </template>
 
 <script>