add react demo for long texts

docs/src/demos/Examples/Book/React/index.jsx

@@ -0,0 +1,145 @@
+import React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import { content } from '../content.js'
+import './styles.scss'
+
+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>
+    </>
+  )
+}
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+    ],
+    content,
+    editorProps: {
+      attributes: {
+        spellcheck: 'false',
+      },
+    },
+  })
+
+  return (
+    <div>
+      <MenuBar editor={editor} />
+      <EditorContent editor={editor} />
+    </div>
+  )
+}

docs/src/demos/Examples/Book/React/styles.scss

@@ -0,0 +1,54 @@
+/* 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;
+      padding: 0;
+      background: none;
+      font-size: 0.8rem;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  hr {
+    margin: 1rem 0;
+  }
+
+  blockquote {
+    padding-left: 1rem;
+    border-left: 2px solid rgba(#0D0D0D, 0.1);
+  }
+}

docs/src/demos/Examples/Book/Vue/index.spec.js

@@ -0,0 +1,7 @@
+context('/demos/Examples/Book/Vue', () => {
+  before(() => {
+    cy.visit('/demos/Examples/Book/Vue')
+  })
+
+  // TODO: Write tests
+})

docs/src/demos/Examples/Book/Vue/index.vue

@@ -72,7 +72,7 @@
 <script>
 import { Editor, EditorContent } from '@tiptap/vue-2'
 import StarterKit from '@tiptap/starter-kit'
-import { content } from './content.js'
+import { content } from '../content.js'
 
 export default {
   components: {

docs/src/demos/Examples/Book/index.spec.js

@@ -1,7 +0,0 @@
-context('/demos/Examples/Book', () => {
-  before(() => {
-    cy.visit('/demos/Examples/Book')
-  })
-
-  // TODO: Write tests
-})

docs/src/docPages/examples/book.md

@@ -4,4 +4,7 @@ This demo has 250 paragraphs and more than 22,000 words, check the performance y
 
 Most of the processing is needed to check the active state of the buttons for the selection. If you’d like to optimize for really long texts, try to limit these checks in your toolbar. But honestly, we think it’s great already, isn’t it?
 
-<demo name="Examples/Book" />
+<demos :items="{
+  Vue: 'Examples/Book/Vue',
+  React: 'Examples/Book/React',
+}" />