improve the examples

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

@@ -1,8 +1,14 @@
 context('/examples/export-html-or-json', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit('/examples/export-html-or-json')
   })
 
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.setContent('<p>Example Text</p>')
+    })
+  })
+
   it('should return json', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       const json = editor.json()
@@ -15,33 +21,7 @@ context('/examples/export-html-or-json', () => {
             content: [
               {
                 type: 'text',
-                text: 'You are able to export your data as ',
+                text: 'Example Text',
-              },
-              {
-                type: 'text',
-                marks: [
-                  {
-                    type: 'code',
-                  },
-                ],
-                text: 'HTML',
-              },
-              {
-                type: 'text',
-                text: ' or ',
-              },
-              {
-                type: 'text',
-                marks: [
-                  {
-                    type: 'code',
-                  },
-                ],
-                text: 'JSON',
-              },
-              {
-                type: 'text',
-                text: '.',
               },
             ],
           },
@@ -54,7 +34,7 @@ context('/examples/export-html-or-json', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       const html = editor.html()
 
-      expect(html).to.equal('<p>You are able to export your data as <code>HTML</code> or <code>JSON</code>.</p>')
+      expect(html).to.equal('<p>Example Text</p>')
     })
   })
 })

docs/src/demos/Examples/ExportHtmlOrJson/index.vue

@@ -1,7 +1,5 @@
 <template>
   <div>
-    <editor-content :editor="editor" />
-
     <div class="actions">
       <button class="button" @click="clearContent">
         Clear Content
@@ -11,12 +9,13 @@
       </button>
     </div>
 
-    <div class="export">
+    <editor-content :editor="editor" />
-      <h3>JSON</h3>
-      <pre><code v-html="json"></code></pre>
 
+    <div class="export">
       <h3>HTML</h3>
       <pre><code>{{ html }}</code></pre>
+      <h3>JSON</h3>
+      <pre><code v-html="json" /></pre>
     </div>
   </div>
 </template>
@@ -41,7 +40,10 @@ export default {
     this.editor = new Editor({
       content: `
         <p>
-          You are able to export your data as <code>HTML</code> or <code>JSON</code>.
+          What would be a text editor without content. At some point you want to get the content out of the editor and yes, we got you covered. There are two methods to export the current document as <code>HTML</code> or <code>JSON</code>.
+        </p>
+        <p>
+          You can hook into the <code>update</code> event to get the content after every single change. How cool is that?
         </p>
       `,
       extensions: defaultExtensions(),

docs/src/demos/Examples/ExportHtmlOrJson/style.scss

@@ -1,12 +1,16 @@
 .export {
+  h3 {
+    margin: 0.5rem 0;
+  }
   pre {
     border-radius: 5px;
-    font-size: 0.8rem;
+    color: #333;
-    color: rgba($colorBlack, 0.8);
   }
 
   code {
     display: block;
     white-space: pre-wrap;
+    font-size: 0.8rem;
+    padding: 1rem;
   }
-}
+}

docs/src/demos/Examples/History/index.vue

@@ -29,11 +29,11 @@ export default {
   mounted() {
     this.editor = new Editor({
       content: `
-        <h2>
-          History
-        </h2>
         <p>
-          Try to change some content here. With the <code>History</code> extension you are able to undo and redo your changes. You can also use keyboard shortcuts for this (<code>Control/Command + Z</code> and <code>Control/Command + Shift + Z</code>).
+          With the <code>History</code> extension the Editor will keep track of your changes. And if you think you made a mistake, you can redo your changes. Try it out, change the content and hit the undo button!
+        </p>
+        <p>
+          And yes, you can also use a keyboard shortcut to undo changes (<code>Control/Cmd</code> <code>Z</code>) or redo changes (<code>Control/Cmd</code> <code>Shift</code> <code>Z</code>).
         </p>
       `,
       extensions: defaultExtensions(),

docs/src/demos/Examples/MarkdownShortcuts/index.vue

@@ -22,13 +22,13 @@ export default {
     this.editor = new Editor({
       content: `
         <p>
-          Start a new line and type <code>#</code> followed by a space to get a headline. Try <code>#</code>, <code>##</code>, <code>###</code>, <code>####</code>, <code>#####</code>, <code>######</code> for different levels.
+          Start a new line and type <code>#</code> followed by a space to get a heading. Try <code>#</code>, <code>##</code>, <code>###</code>, <code>####</code>, <code>#####</code>, <code>######</code> for different levels.
         </p>
         <p>
-          Those conventions are called <strong>input rules</strong> in tiptap. Some of those shortcuts are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, <code>\`foobar\`</code> to highlight code.
+          Those conventions are called <strong>input rules</strong> in tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code.
         </p>
         <p>
-          You can add your own input rules through adding the <code>inputRules()</code> method in your nodes and marks.
+          You can add your own input rules to your Nodes and Marks or even to the default ones.
         </p>
       `,
       extensions: defaultExtensions(),

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

@@ -0,0 +1,5 @@
+context('/examples/minimalist', () => {
+  before(() => {
+    cy.visit('/examples/minimalist')
+  })
+})

docs/src/demos/Examples/ReadOnly/style.scss

@@ -4,4 +4,8 @@
   input[type="checkbox"] {
     margin-right: 0.5rem;
   }
-}
+}
+
+[contenteditable=false] {
+  color: #999;
+}

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

@@ -1,5 +0,0 @@
-context('/examples/simple', () => {
-  before(() => {
-    cy.visit('/examples/simple')
-  })
-})

docs/src/docPages/api/extensions.md

@@ -4,7 +4,7 @@ Extensions are the way to add functionality to tiptap. By default tiptap comes b
 
 ## A minimalist set of extensions
 
-You’ll need at least three extensions: Document, Paragraph and Text. See [an example of a tiptap version for minimalists](/examples/simple).
+You’ll need at least three extensions: Document, Paragraph and Text. See [an example of a tiptap version for minimalists](/examples/minimalist).
 
 ## Default extensions
 

docs/src/docPages/examples/minimalist.md

@@ -0,0 +1,3 @@
+# Minimalist
+
+<demo name="Examples/Minimalist" highlight="7-9,26-28" />

docs/src/docPages/examples/simple.md

@@ -1,3 +0,0 @@
-# Simple
-
-<demo name="Examples/Simple" highlight="7-9,26-28" />

docs/src/links.yaml

@@ -33,8 +33,6 @@
   items:
     - title: Basic
       link: /examples/basic
-    - title: Simple
-      link: /examples/simple
     # - title: Menu Bubble
     #   link: /examples/menu-bubble
     #   draft: true
@@ -77,8 +75,8 @@
     # - title: Placeholder
     #   link: /examples/placeholder
     #   draft: true
-    - title: Focus
+    # - title: Focus
-      link: /examples/focus
+    #   link: /examples/focus
     # - title: Collaboration
     #   link: /examples/collaboration
     #   draft: true
@@ -91,6 +89,8 @@
     # - title: Drag Handle
     #   link: /examples/drag-handle
     #   draft: true
+    - title: Minimalist
+      link: /examples/minimalist
     - title: Export HTML or JSON
       link: /examples/export-html-or-json