From 6b738f4ecf543d1d1cf51702c16f4baafab3ff69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20K=C3=BChn?=
 <philippkuehn@MacBook-Pro-von-Philipp.local>
Date: Fri, 17 Dec 2021 09:45:35 +0100
Subject: [PATCH] demos: fix react demos again

---
 demos/src/Examples/Book/React/index.jsx       |  4 ++
 .../CodeBlockLanguage/React/index.jsx         |  4 ++
 demos/src/Examples/Default/React/index.jsx    |  4 ++
 demos/src/Examples/Formatting/React/index.jsx |  4 ++
 demos/src/Examples/Savvy/React/index.jsx      | 40 +++++++++++--------
 demos/src/Examples/Tables/React/index.jsx     |  4 ++
 6 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/demos/src/Examples/Book/React/index.jsx b/demos/src/Examples/Book/React/index.jsx
index 448996b8..fe6e83db 100644
--- a/demos/src/Examples/Book/React/index.jsx
+++ b/demos/src/Examples/Book/React/index.jsx
@@ -5,6 +5,10 @@ import { content } from '../content.js'
 import './styles.scss'
 
 const MenuBar = ({ editor }) => {
+  if (!editor) {
+    return null
+  }
+
   return (
     <>
       <button
diff --git a/demos/src/Examples/CodeBlockLanguage/React/index.jsx b/demos/src/Examples/CodeBlockLanguage/React/index.jsx
index 6411df30..561c97b9 100644
--- a/demos/src/Examples/CodeBlockLanguage/React/index.jsx
+++ b/demos/src/Examples/CodeBlockLanguage/React/index.jsx
@@ -16,6 +16,10 @@ 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/Default/React/index.jsx b/demos/src/Examples/Default/React/index.jsx
index 85cb663f..da04cde2 100644
--- a/demos/src/Examples/Default/React/index.jsx
+++ b/demos/src/Examples/Default/React/index.jsx
@@ -4,6 +4,10 @@ import StarterKit from '@tiptap/starter-kit'
 import './styles.scss'
 
 const MenuBar = ({ editor }) => {
+  if (!editor) {
+    return null
+  }
+
   return (
     <>
       <button
diff --git a/demos/src/Examples/Formatting/React/index.jsx b/demos/src/Examples/Formatting/React/index.jsx
index 0bead25d..120bf7e0 100644
--- a/demos/src/Examples/Formatting/React/index.jsx
+++ b/demos/src/Examples/Formatting/React/index.jsx
@@ -6,6 +6,10 @@ 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/Savvy/React/index.jsx b/demos/src/Examples/Savvy/React/index.jsx
index 869b8e0b..20ce050d 100644
--- a/demos/src/Examples/Savvy/React/index.jsx
+++ b/demos/src/Examples/Savvy/React/index.jsx
@@ -11,23 +11,31 @@ import './styles.scss'
 
 export default () => {
   const editor = useEditor({
-    extensions: [Document, Paragraph, Text, Code, Typography, ColorHighlighter, SmilieReplacer],
+    extensions: [
+      Document,
+      Paragraph,
+      Text,
+      Code,
+      Typography,
+      ColorHighlighter,
+      SmilieReplacer,
+    ],
     content: `
-        <p>
-          → With the Typography extension, tiptap understands »what you mean« and adds correct characters to your text — it’s like a “typography nerd” on your side.
-        </p>
-        <p>
-          Try it out and type <code>(c)</code>, <code>-></code>, <code>>></code>, <code>1/2</code>, <code>!=</code>, <code>--</code> or <code>1x1</code> here:
-        </p>
-        <p></p>
-        <p>
-          Or add completely custom input rules. We added a custom extension here that replaces smilies like <code>:-)</code>, <code><3</code> or <code>>:P</code> with emojis. Try it out:
-        </p>
-        <p></p>
-        <p>
-          You can also teach the editor new things. For example to recognize hex colors and add a color swatch on the fly: #FFF, #0D0D0D, #616161, #A975FF, #FB5151, #FD9170, #FFCB6B, #68CEF8, #80cbc4, #9DEF8F
-        </p>
-      `,
+      <p>
+        → With the Typography extension, tiptap understands »what you mean« and adds correct characters to your text — it’s like a “typography nerd” on your side.
+      </p>
+      <p>
+        Try it out and type <code>(c)</code>, <code>-></code>, <code>>></code>, <code>1/2</code>, <code>!=</code>, <code>--</code> or <code>1x1</code> here:
+      </p>
+      <p></p>
+      <p>
+        Or add completely custom input rules. We added a custom extension here that replaces smilies like <code>:-)</code>, <code><3</code> or <code>>:P</code> with emojis. Try it out:
+      </p>
+      <p></p>
+      <p>
+        You can also teach the editor new things. For example to recognize hex colors and add a color swatch on the fly: #FFF, #0D0D0D, #616161, #A975FF, #FB5151, #FD9170, #FFCB6B, #68CEF8, #80cbc4, #9DEF8F
+      </p>
+    `,
   })
 
   return <EditorContent editor={editor} />
diff --git a/demos/src/Examples/Tables/React/index.jsx b/demos/src/Examples/Tables/React/index.jsx
index ae78e0cb..0c450626 100644
--- a/demos/src/Examples/Tables/React/index.jsx
+++ b/demos/src/Examples/Tables/React/index.jsx
@@ -54,6 +54,10 @@ export const tableHTML = `
 `
 
 const MenuBar = ({ editor }) => {
+  if (!editor) {
+    return null
+  }
+
   return (
     <>
       <button onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}>