move React components to a package, translate default editor example to React

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

@@ -0,0 +1,167 @@
+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().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>
+      <button
+        onClick={() => editor.chain().focus().toggleBold().run()}
+        className={`${editor.isActive('bold') ? 'is-active' : ''}`}
+      >
+        bold
+      </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>
+    </>
+  )
+}

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

@@ -0,0 +1,55 @@
+/* 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;
+  }
+}

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

@@ -1,6 +1,6 @@
-context('/demos/Examples/Default', () => {
+context('/demos/Examples/Default/Vue', () => {
   before(() => {
-    cy.visit('/demos/Examples/Default')
+    cy.visit('/demos/Examples/Default/Vue')
   })
 
   beforeEach(() => {

docs/src/demos/React/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { defaultExtensions } from '@tiptap/starter-kit'
-import { useEditor, Editor } from './components/Editor'
+import { useEditor, Editor } from '@tiptap/react'
 
 // Menu bar example component
 // useEditor only works for child components of <Editor />

docs/src/docPages/examples/default.md

@@ -1,4 +1,8 @@
 # Default text editor
 Did we mention that you have full control over the rendering of the editor? Here is barebones example without any styling, but packed with a whole set of common extensions.
 
-<demo name="Examples/Default" />
+## Vue
+<demo name="Examples/Default/Vue" />
+
+## React
+<demo name="Examples/Default/React" />