From 38109831c6f422f9e5d67922faccf4da63f5e89f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20K=C3=BChn?=
 <philippkuehn@MacBook-Pro-von-Philipp.local>
Date: Thu, 16 Dec 2021 14:06:35 +0100
Subject: [PATCH] refactoring

---
 demos/src/Examples/Book/React/index.jsx       |   4 -
 demos/src/Examples/Book/Vue/index.vue         | 132 +++++++++---------
 .../CodeBlockLanguage/React/index.jsx         |   4 -
 .../Examples/CodeBlockLanguage/Vue/index.vue  |   3 +-
 demos/src/Examples/Community/Vue/index.vue    |  68 +++++----
 demos/src/Examples/Default/React/index.jsx    |   4 -
 demos/src/Examples/Default/Vue/index.vue      | 132 +++++++++---------
 demos/src/Examples/Drawing/Vue/index.vue      |   4 +-
 demos/src/Examples/Formatting/React/index.jsx |   4 -
 demos/src/Examples/Formatting/Vue/index.vue   |  78 +++++------
 demos/src/Examples/Images/Vue/index.vue       |   2 +-
 demos/src/Examples/Menus/Vue/index.vue        |   8 +-
 demos/src/Examples/Savvy/React/index.jsx      |   4 -
 demos/src/Examples/Tables/React/index.jsx     |   4 -
 demos/src/Examples/Tables/Vue/index.vue       |   3 +-
 15 files changed, 208 insertions(+), 246 deletions(-)

diff --git a/demos/src/Examples/Book/React/index.jsx b/demos/src/Examples/Book/React/index.jsx
index fe6e83db0..448996b80 100644
--- a/demos/src/Examples/Book/React/index.jsx
+++ b/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
diff --git a/demos/src/Examples/Book/Vue/index.vue b/demos/src/Examples/Book/Vue/index.vue
index 4722386de..58068b4c7 100644
--- a/demos/src/Examples/Book/Vue/index.vue
+++ b/demos/src/Examples/Book/Vue/index.vue
@@ -1,72 +1,70 @@
 <template>
-  <div>
-    <div v-if="editor">
-      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
-        bold
-      </button>
-      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
-        italic
-      </button>
-      <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
-        strike
-      </button>
-      <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
-        code
-      </button>
-      <button @click="editor.chain().focus().unsetAllMarks().run()">
-        clear marks
-      </button>
-      <button @click="editor.chain().focus().clearNodes().run()">
-        clear nodes
-      </button>
-      <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
-        paragraph
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
-        h1
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
-        h2
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
-        h3
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
-        h4
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
-        h5
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
-        h6
-      </button>
-      <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
-        bullet list
-      </button>
-      <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
-        ordered list
-      </button>
-      <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
-        code block
-      </button>
-      <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
-        blockquote
-      </button>
-      <button @click="editor.chain().focus().setHorizontalRule().run()">
-        horizontal rule
-      </button>
-      <button @click="editor.chain().focus().setHardBreak().run()">
-        hard break
-      </button>
-      <button @click="editor.chain().focus().undo().run()">
-        undo
-      </button>
-      <button @click="editor.chain().focus().redo().run()">
-        redo
-      </button>
-    </div>
-    <editor-content :editor="editor" />
+  <div v-if="editor">
+    <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+      bold
+    </button>
+    <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+      italic
+    </button>
+    <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
+      strike
+    </button>
+    <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
+      code
+    </button>
+    <button @click="editor.chain().focus().unsetAllMarks().run()">
+      clear marks
+    </button>
+    <button @click="editor.chain().focus().clearNodes().run()">
+      clear nodes
+    </button>
+    <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
+      paragraph
+    </button>
+    <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
+      h1
+    </button>
+    <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
+      h2
+    </button>
+    <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
+      h3
+    </button>
+    <button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
+      h4
+    </button>
+    <button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
+      h5
+    </button>
+    <button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
+      h6
+    </button>
+    <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
+      bullet list
+    </button>
+    <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
+      ordered list
+    </button>
+    <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
+      code block
+    </button>
+    <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
+      blockquote
+    </button>
+    <button @click="editor.chain().focus().setHorizontalRule().run()">
+      horizontal rule
+    </button>
+    <button @click="editor.chain().focus().setHardBreak().run()">
+      hard break
+    </button>
+    <button @click="editor.chain().focus().undo().run()">
+      undo
+    </button>
+    <button @click="editor.chain().focus().redo().run()">
+      redo
+    </button>
   </div>
+  <editor-content :editor="editor" />
 </template>
 
 <script>
diff --git a/demos/src/Examples/CodeBlockLanguage/React/index.jsx b/demos/src/Examples/CodeBlockLanguage/React/index.jsx
index 561c97b96..6411df30b 100644
--- a/demos/src/Examples/CodeBlockLanguage/React/index.jsx
+++ b/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
diff --git a/demos/src/Examples/CodeBlockLanguage/Vue/index.vue b/demos/src/Examples/CodeBlockLanguage/Vue/index.vue
index e2b661ecb..9161d4038 100644
--- a/demos/src/Examples/CodeBlockLanguage/Vue/index.vue
+++ b/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>
diff --git a/demos/src/Examples/Community/Vue/index.vue b/demos/src/Examples/Community/Vue/index.vue
index 5b571a09e..6e7950f07 100644
--- a/demos/src/Examples/Community/Vue/index.vue
+++ b/demos/src/Examples/Community/Vue/index.vue
@@ -1,41 +1,39 @@
 <template>
-  <div>
-    <editor-content :editor="editor" />
+  <editor-content :editor="editor" />
 
-    <div v-if="editor" :class="{'character-count': true, 'character-count--warning': editor.storage.characterCount.characters() === limit}">
-      <svg
-        height="20"
-        width="20"
-        viewBox="0 0 20 20"
-        class="character-count__graph"
-      >
-        <circle
-          r="10"
-          cx="10"
-          cy="10"
-          fill="#e9ecef"
-        />
-        <circle
-          r="5"
-          cx="10"
-          cy="10"
-          fill="transparent"
-          stroke="currentColor"
-          stroke-width="10"
-          :stroke-dasharray="`calc(${percentage} * 31.4 / 100) 31.4`"
-          transform="rotate(-90) translate(-20)"
-        />
-        <circle
-          r="6"
-          cx="10"
-          cy="10"
-          fill="white"
-        />
-      </svg>
+  <div v-if="editor" :class="{'character-count': true, 'character-count--warning': editor.storage.characterCount.characters() === limit}">
+    <svg
+      height="20"
+      width="20"
+      viewBox="0 0 20 20"
+      class="character-count__graph"
+    >
+      <circle
+        r="10"
+        cx="10"
+        cy="10"
+        fill="#e9ecef"
+      />
+      <circle
+        r="5"
+        cx="10"
+        cy="10"
+        fill="transparent"
+        stroke="currentColor"
+        stroke-width="10"
+        :stroke-dasharray="`calc(${percentage} * 31.4 / 100) 31.4`"
+        transform="rotate(-90) translate(-20)"
+      />
+      <circle
+        r="6"
+        cx="10"
+        cy="10"
+        fill="white"
+      />
+    </svg>
 
-      <div class="character-count__text">
-        {{ editor.storage.characterCount.characters() }}/{{ limit }} characters
-      </div>
+    <div class="character-count__text">
+      {{ editor.storage.characterCount.characters() }}/{{ limit }} characters
     </div>
   </div>
 </template>
diff --git a/demos/src/Examples/Default/React/index.jsx b/demos/src/Examples/Default/React/index.jsx
index da04cde2c..85cb663f8 100644
--- a/demos/src/Examples/Default/React/index.jsx
+++ b/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
diff --git a/demos/src/Examples/Default/Vue/index.vue b/demos/src/Examples/Default/Vue/index.vue
index 25221d296..418c77196 100644
--- a/demos/src/Examples/Default/Vue/index.vue
+++ b/demos/src/Examples/Default/Vue/index.vue
@@ -1,72 +1,70 @@
 <template>
-  <div>
-    <div v-if="editor">
-      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
-        bold
-      </button>
-      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
-        italic
-      </button>
-      <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
-        strike
-      </button>
-      <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
-        code
-      </button>
-      <button @click="editor.chain().focus().unsetAllMarks().run()">
-        clear marks
-      </button>
-      <button @click="editor.chain().focus().clearNodes().run()">
-        clear nodes
-      </button>
-      <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
-        paragraph
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
-        h1
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
-        h2
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
-        h3
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
-        h4
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
-        h5
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
-        h6
-      </button>
-      <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
-        bullet list
-      </button>
-      <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
-        ordered list
-      </button>
-      <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
-        code block
-      </button>
-      <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
-        blockquote
-      </button>
-      <button @click="editor.chain().focus().setHorizontalRule().run()">
-        horizontal rule
-      </button>
-      <button @click="editor.chain().focus().setHardBreak().run()">
-        hard break
-      </button>
-      <button @click="editor.chain().focus().undo().run()">
-        undo
-      </button>
-      <button @click="editor.chain().focus().redo().run()">
-        redo
-      </button>
-    </div>
-    <editor-content :editor="editor" />
+  <div v-if="editor">
+    <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+      bold
+    </button>
+    <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+      italic
+    </button>
+    <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
+      strike
+    </button>
+    <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
+      code
+    </button>
+    <button @click="editor.chain().focus().unsetAllMarks().run()">
+      clear marks
+    </button>
+    <button @click="editor.chain().focus().clearNodes().run()">
+      clear nodes
+    </button>
+    <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
+      paragraph
+    </button>
+    <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
+      h1
+    </button>
+    <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
+      h2
+    </button>
+    <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
+      h3
+    </button>
+    <button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
+      h4
+    </button>
+    <button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
+      h5
+    </button>
+    <button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
+      h6
+    </button>
+    <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
+      bullet list
+    </button>
+    <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
+      ordered list
+    </button>
+    <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
+      code block
+    </button>
+    <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
+      blockquote
+    </button>
+    <button @click="editor.chain().focus().setHorizontalRule().run()">
+      horizontal rule
+    </button>
+    <button @click="editor.chain().focus().setHardBreak().run()">
+      hard break
+    </button>
+    <button @click="editor.chain().focus().undo().run()">
+      undo
+    </button>
+    <button @click="editor.chain().focus().redo().run()">
+      redo
+    </button>
   </div>
+  <editor-content :editor="editor" />
 </template>
 
 <script>
diff --git a/demos/src/Examples/Drawing/Vue/index.vue b/demos/src/Examples/Drawing/Vue/index.vue
index 7c054ed26..7e35781d0 100644
--- a/demos/src/Examples/Drawing/Vue/index.vue
+++ b/demos/src/Examples/Drawing/Vue/index.vue
@@ -1,7 +1,5 @@
 <template>
-  <div v-if="editor">
-    <editor-content :editor="editor" />
-  </div>
+  <editor-content :editor="editor" />
 </template>
 
 <script>
diff --git a/demos/src/Examples/Formatting/React/index.jsx b/demos/src/Examples/Formatting/React/index.jsx
index 120bf7e05..0bead25d1 100644
--- a/demos/src/Examples/Formatting/React/index.jsx
+++ b/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' : ''}>
diff --git a/demos/src/Examples/Formatting/Vue/index.vue b/demos/src/Examples/Formatting/Vue/index.vue
index 6978142af..2787c6cc8 100644
--- a/demos/src/Examples/Formatting/Vue/index.vue
+++ b/demos/src/Examples/Formatting/Vue/index.vue
@@ -1,45 +1,43 @@
 <template>
-  <div>
-    <div v-if="editor">
-      <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
-        h1
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
-        h2
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
-        h3
-      </button>
-      <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
-        paragraph
-      </button>
-      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
-        bold
-      </button>
-      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
-        italic
-      </button>
-      <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
-        strike
-      </button>
-      <button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }">
-        highlight
-      </button>
-      <button @click="editor.chain().focus().setTextAlign('left').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'left' }) }">
-        left
-      </button>
-      <button @click="editor.chain().focus().setTextAlign('center').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'center' }) }">
-        center
-      </button>
-      <button @click="editor.chain().focus().setTextAlign('right').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'right' }) }">
-        right
-      </button>
-      <button @click="editor.chain().focus().setTextAlign('justify').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'justify' }) }">
-        justify
-      </button>
-    </div>
-    <editor-content :editor="editor" />
+  <div v-if="editor">
+    <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
+      h1
+    </button>
+    <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
+      h2
+    </button>
+    <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
+      h3
+    </button>
+    <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
+      paragraph
+    </button>
+    <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+      bold
+    </button>
+    <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+      italic
+    </button>
+    <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
+      strike
+    </button>
+    <button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }">
+      highlight
+    </button>
+    <button @click="editor.chain().focus().setTextAlign('left').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'left' }) }">
+      left
+    </button>
+    <button @click="editor.chain().focus().setTextAlign('center').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'center' }) }">
+      center
+    </button>
+    <button @click="editor.chain().focus().setTextAlign('right').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'right' }) }">
+      right
+    </button>
+    <button @click="editor.chain().focus().setTextAlign('justify').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'justify' }) }">
+      justify
+    </button>
   </div>
+  <editor-content :editor="editor" />
 </template>
 
 <script>
diff --git a/demos/src/Examples/Images/Vue/index.vue b/demos/src/Examples/Images/Vue/index.vue
index 01daf8c96..fdc36805a 100644
--- a/demos/src/Examples/Images/Vue/index.vue
+++ b/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>
diff --git a/demos/src/Examples/Menus/Vue/index.vue b/demos/src/Examples/Menus/Vue/index.vue
index 35e818f50..0be24499f 100644
--- a/demos/src/Examples/Menus/Vue/index.vue
+++ b/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>
-
-    <editor-content :editor="editor" />
   </div>
+
+  <editor-content :editor="editor" />
 </template>
 
 <script>
diff --git a/demos/src/Examples/Savvy/React/index.jsx b/demos/src/Examples/Savvy/React/index.jsx
index 37b8fcbf1..869b8e0bd 100644
--- a/demos/src/Examples/Savvy/React/index.jsx
+++ b/demos/src/Examples/Savvy/React/index.jsx
@@ -30,9 +30,5 @@ export default () => {
       `,
   })
 
-  if (!editor) {
-    return null
-  }
-
   return <EditorContent editor={editor} />
 }
diff --git a/demos/src/Examples/Tables/React/index.jsx b/demos/src/Examples/Tables/React/index.jsx
index 0c4506268..ae78e0cbc 100644
--- a/demos/src/Examples/Tables/React/index.jsx
+++ b/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()}>
diff --git a/demos/src/Examples/Tables/Vue/index.vue b/demos/src/Examples/Tables/Vue/index.vue
index 6ecde9185..8e20311eb 100644
--- a/demos/src/Examples/Tables/Vue/index.vue
+++ b/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>