demos: fix react demos again

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

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

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

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' : ''}>

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} />

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()}>