diff --git a/docs/src/demos/Examples/Default/React/index-nope.jsx b/docs/src/demos/Examples/Default/React/index-nope.jsx
deleted file mode 100644
index 171c75a0..00000000
--- a/docs/src/demos/Examples/Default/React/index-nope.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-// export default () => {
-//   const editor = useEditor({
-//     content: '<p>hello react</p>',
-//     onTransaction() {
-//       // console.log('update', this)
-//     },
-//     extensions: [
-//       ...defaultExtensions(),
-//       // Paragraph.extend({
-//       //   addNodeView() {
-//       //     return reactNodeView(() => {
-//       //       // useEffect(() => {
-//       //       //   console.log('effect')
-//       //       // }, []);
-
-//       //       return (
-//       //         <p className="jooo" data-node-view-wrapper>
-//       //           <span data-node-view-content></span>
-//       //         </p>
-//       //       )
-//       //     })
-//       //     return ReactNodeViewRenderer(() => {
-//       //       // useEffect(() => {
-//       //       //   console.log('effect')
-//       //       // }, []);
-
-//       //       return (
-//       //         <p className="jooo" data-node-view-wrapper>
-//       //           <span data-node-view-content></span>
-//       //         </p>
-//       //       )
-//       //     })
-//       //   },
-//       // }),
-//     ]
-//   })
-
-//   return (
-//     <>
-//       { editor &&
-//         <button
-//           onClick={() => editor.chain().focus().toggleBold().run()}
-//           className={editor.isActive('bold') ? 'is-active' : ''}
-//         >
-//           bold
-//         </button>
-//       }
-//       <EditorContent editor={editor} />
-//     </>
-//   )
-// }
diff --git a/docs/src/demos/Examples/Default/React/index-ori.jsx b/docs/src/demos/Examples/Default/React/index-ori.jsx
deleted file mode 100644
index e3893834..00000000
--- a/docs/src/demos/Examples/Default/React/index-ori.jsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import React, { useState } from 'react'
-import { defaultExtensions } from '@tiptap/starter-kit'
-import { useEditor, Editor } from '@tiptap/react'
-import './styles.scss'
-
-// useEditor only works for child components of <Editor />
-const MenuBar = () => {
-  const editor = useEditor()
-
-  return (
-    <>
-      <button
-        onClick={() => editor.chain().focus().toggleBold().run()}
-        className={`${editor.isActive('bold') ? 'is-active' : ''}`}
-      >
-        bold
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleItalic().run()}
-        className={`${editor.isActive('italic') ? 'active' : ''}`}
-      >
-        italic
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleStrike().run()}
-        className={`${editor.isActive('strike') ? 'active' : ''}`}
-      >
-        strike
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleCode().run()}
-        className={`${editor.isActive('code') ? 'active' : ''}`}
-      >
-        code
-      </button>
-      <button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
-        clear marks
-      </button>
-      <button onClick={() => editor.chain().focus().clearNodes().run()}>
-        clear nodes
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setParagraph().run()}
-        className={`${editor.isActive('paragraph') ? 'active' : ''}`}
-      >
-        paragraph
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-        className={`${editor.isActive('heading', { level: 1 }) ? 'active' : ''}`}
-      >
-        h1
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-        className={`${editor.isActive('heading', { level: 2 }) ? 'active' : ''}`}
-      >
-        h2
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
-        className={`${editor.isActive('heading', { level: 3 }) ? 'active' : ''}`}
-      >
-        h3
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
-        className={`${editor.isActive('heading', { level: 4 }) ? 'active' : ''}`}
-      >
-        h4
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
-        className={`${editor.isActive('heading', { level: 5 }) ? 'active' : ''}`}
-      >
-        h5
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
-        className={`${editor.isActive('heading', { level: 6 }) ? 'active' : ''}`}
-      >
-        h6
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleBulletList().run()}
-        className={`${editor.isActive('bulletList') ? 'active' : ''}`}
-      >
-        bullet list
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleOrderedList().run()}
-        className={`${editor.isActive('orderedList') ? 'active' : ''}`}
-      >
-        ordered list
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-        className={`${editor.isActive('codeBlock') ? 'active' : ''}`}
-      >
-        code block
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleBlockquote().run()}
-        className={`${editor.isActive('blockquote') ? 'active' : ''}`}
-      >
-        blockquote
-      </button>
-      <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
-        horizontal rule
-      </button>
-      <button onClick={() => editor.chain().focus().setHardBreak().run()}>
-        hard break
-      </button>
-      <button onClick={() => editor.chain().focus().undo().run()}>
-        undo
-      </button>
-      <button onClick={() => editor.chain().focus().redo().run()}>
-        redo
-      </button>
-    </>
-  )
-}
-
-export default () => {
-  const [value, setValue] = useState(`
-  <h2>
-    Hi there,
-  </h2>
-  <p>
-    this is a basic <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
-  </p>
-  <ul>
-    <li>
-      That’s a bullet list with one …
-    </li>
-    <li>
-      … or two list items.
-    </li>
-  </ul>
-  <p>
-    Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
-  </p>
-  <pre><code class="language-css">body {
-  display: none;
-}</code></pre>
-  <p>
-    I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
-  </p>
-  <blockquote>
-    Wow, that’s amazing. Good work, boy! 👏
-    <br />
-    — Mom
-  </blockquote>
-`)
-
-  return (
-    <>
-      <Editor
-        value={value}
-        onChange={setValue}
-        extensions={defaultExtensions()}
-      >
-        <MenuBar />
-      </Editor>
-    </>
-  )
-}