diff --git a/docs/src/demos/ReactPlayground/index.jsx b/docs/src/demos/ReactPlayground/index.jsx
deleted file mode 100644
index ff762b8c..00000000
--- a/docs/src/demos/ReactPlayground/index.jsx
+++ /dev/null
@@ -1,299 +0,0 @@
-/* eslint-disable */
-import React, { useState } from 'react'
-import tippy from 'tippy.js'
-import {
-  useEditor, EditorContent, ReactRenderer, ReactNodeViewRenderer, NodeViewWrapper, NodeViewContent,
-} from '@tiptap/react'
-import { defaultExtensions } from '@tiptap/starter-kit'
-import Heading from '@tiptap/extension-heading'
-import Paragraph from '@tiptap/extension-paragraph'
-import Mention from '@tiptap/extension-mention'
-import './styles.scss'
-import { render } from 'react-dom'
-
-const MenuBar = ({ editor }) => {
-  if (!editor) {
-    return null
-  }
-
-  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') ? 'is-active' : ''}
-      >
-        italic
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleStrike().run()}
-        className={editor.isActive('strike') ? 'is-active' : ''}
-      >
-        strike
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleCode().run()}
-        className={editor.isActive('code') ? 'is-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') ? 'is-active' : ''}
-      >
-        paragraph
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-        className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
-      >
-        h1
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-        className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
-      >
-        h2
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
-        className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
-      >
-        h3
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
-        className={editor.isActive('heading', { level: 4 }) ? 'is-active' : ''}
-      >
-        h4
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
-        className={editor.isActive('heading', { level: 5 }) ? 'is-active' : ''}
-      >
-        h5
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
-        className={editor.isActive('heading', { level: 6 }) ? 'is-active' : ''}
-      >
-        h6
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleBulletList().run()}
-        className={editor.isActive('bulletList') ? 'is-active' : ''}
-      >
-        bullet list
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleOrderedList().run()}
-        className={editor.isActive('orderedList') ? 'is-active' : ''}
-      >
-        ordered list
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-        className={editor.isActive('codeBlock') ? 'is-active' : ''}
-      >
-        code block
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleBlockquote().run()}
-        className={editor.isActive('blockquote') ? 'is-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>
-    </>
-  )
-}
-
-const MentionList = props => {
-  console.log({ props })
-
-  return (
-    <div>
-      mentions
-      {props.items.map(item => (
-        <div>
-          {item}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-class MentionList2 extends React.Component {
-
-  onKeyDown(props) {
-    console.log('onKeyDown', props)
-  }
-
-  render() {
-    return (
-      <div>
-        mentions
-        {this.props.items.map((item, index) => (
-          <div key={index}>
-            {item}
-          </div>
-        ))}
-      </div>
-    )
-  }
-}
-
-export default () => {
-  const [isVisible, setVisible] = useState(true)
-
-  const editor = useEditor({
-    // onTransaction({ editor }) {
-    //   console.log('anchor', editor.state.selection.anchor)
-    // },
-    extensions: [
-      ...defaultExtensions().filter(item => item.config.name !== 'heading'),
-      Heading.extend({
-        draggable: true,
-        addNodeView() {
-          return ReactNodeViewRenderer(props => {
-            return (
-              <NodeViewWrapper>
-                <div className="heading">
-                  <span
-                    data-drag-handle
-                    contentEditable={false}
-                    draggable={true}
-                    suppressContentEditableWarning={true}
-                  >⠿</span>
-                  level: {props.node.attrs.level}
-                  <button onClick={() => props.updateAttributes({ level: 1 })}>
-                    set level 1
-                  </button>
-                  <NodeViewContent />
-                </div>
-              </NodeViewWrapper>
-            )
-          })
-        },
-      }),
-      Mention.configure({
-        suggestion: {
-          items: query => {
-            return [
-              'Lea Thompson', 'Cyndi Lauper', 'Tom Cruise', 'Madonna', 'Jerry Hall', 'Joan Collins', 'Winona Ryder', 'Christina Applegate', 'Alyssa Milano', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John', 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey', 'Mickey Rourke', 'John Cusack', 'Matthew Broderick', 'Justine Bateman', 'Lisa Bonet',
-            ].filter(item => item.toLowerCase().startsWith(query.toLowerCase())).slice(0, 10)
-          },
-          render: () => {
-            let reactRenderer
-            let popup
-
-            return {
-              onStart: props => {
-                reactRenderer = new ReactRenderer(MentionList2, {
-                  props,
-                  editor: props.editor,
-                })
-
-                popup = tippy('body', {
-                  getReferenceClientRect: props.clientRect,
-                  appendTo: () => document.body,
-                  content: reactRenderer.element,
-                  showOnCreate: true,
-                  interactive: true,
-                  trigger: 'manual',
-                  placement: 'bottom-start',
-                })
-              },
-              onUpdate(props) {
-                reactRenderer.updateProps(props)
-
-                popup[0].setProps({
-                  getReferenceClientRect: props.clientRect,
-                })
-              },
-              onKeyDown(props) {
-                return reactRenderer.ref?.onKeyDown(props)
-              },
-              onExit() {
-                popup[0].destroy()
-                reactRenderer.destroy()
-              },
-            }
-          },
-        },
-      }),
-    ],
-    content: `
-      <h1>heading</h1>
-      <h2>heading</h2>
-      <p>paragraph</p>
-    `,
-    //     content: `
-    //       <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 (
-    <div>
-      <div>
-        <button onClick={() => setVisible(true)}>visible</button>
-        <button onClick={() => setVisible(false)}>hidden</button>
-      </div>
-      <div>
-        <button onClick={() => editor.setEditable(true)}>editable</button>
-        <button onClick={() => editor.setEditable(false)}>readonly</button>
-      </div>
-      <MenuBar editor={editor} />
-      {isVisible && <EditorContent editor={editor} />}
-    </div>
-  )
-}
diff --git a/docs/src/demos/ReactPlayground/index.spec.js b/docs/src/demos/ReactPlayground/index.spec.js
deleted file mode 100644
index 350c2d41..00000000
--- a/docs/src/demos/ReactPlayground/index.spec.js
+++ /dev/null
@@ -1,22 +0,0 @@
-context('/demos/Examples/Default/React', () => {
-  before(() => {
-    cy.visit('/demos/Examples/Default/React')
-  })
-
-  beforeEach(() => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.commands.setContent('<h1>Example Text</h1>')
-      cy.get('.ProseMirror').type('{selectall}')
-    })
-  })
-
-  it('should apply the paragraph style when the keyboard shortcut is pressed', () => {
-    cy.get('.ProseMirror h1').should('exist')
-    cy.get('.ProseMirror p').should('not.exist')
-
-    cy.get('.ProseMirror')
-      .trigger('keydown', { modKey: true, altKey: true, key: '0' })
-      .find('p')
-      .should('contain', 'Example Text')
-  })
-})
diff --git a/docs/src/demos/ReactPlayground/styles.scss b/docs/src/demos/ReactPlayground/styles.scss
deleted file mode 100644
index dc996245..00000000
--- a/docs/src/demos/ReactPlayground/styles.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-/* Basic editor styles */
-.ProseMirror {
-  > * + * {
-    margin-top: 0.75em;
-  }
-
-  ul,
-  ol {
-    padding: 0 1rem;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
-  }
-
-  code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-  }
-
-  pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
-    border-radius: 0.5rem;
-
-    code {
-      color: inherit;
-      background: none;
-      font-size: 0.8rem;
-    }
-  }
-
-  img {
-    max-width: 100%;
-    height: auto;
-  }
-
-  blockquote {
-    padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
-  }
-
-  hr {
-    border: none;
-    border-top: 2px solid rgba(#0D0D0D, 0.1);
-    margin: 2rem 0;
-  }
-}