add content to the extensions overview, improve the basic example

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

@@ -7,6 +7,7 @@ context('basic', () => {
     it('should return html', () => {
       cy.get('.ProseMirror').window().then(window => {
         const { editor } = window
+        editor.setContent('<p>foo</p>')
         const html = editor.html()
 
         expect(html).to.equal('<p>foo</p>')
@@ -16,6 +17,7 @@ context('basic', () => {
     it('should return json', () => {
       cy.get('.ProseMirror').window().then(window => {
         const { editor } = window
+        editor.setContent('<p>foo</p>')
         const json = editor.json()
 
         expect(json).to.deep.equal({
@@ -60,6 +62,7 @@ context('basic', () => {
     it('should prepend', () => {
       cy.get('.ProseMirror').window().then(window => {
         const { editor } = window
+        editor.setContent('<p>foo</p>')
 
         editor.focus('start').insertHTML('<p>bar</p>')
         cy.get('.ProseMirror p:first').should('contain', 'bar').should('not.contain', 'foo')
@@ -70,6 +73,7 @@ context('basic', () => {
     it('should append', () => {
       cy.get('.ProseMirror').window().then(window => {
         const { editor } = window
+        editor.setContent('<p>foo</p>')
 
         editor.focus('end').insertHTML('<p>bar</p>')
         cy.get('.ProseMirror p:first').should('contain', 'foo').should('not.contain', 'bar')

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

@@ -2,13 +2,7 @@
   <div>
     <div v-if="editor">
       <button @click="editor.focus().removeMarks()">
-        clear formatting
-      </button>
-      <button @click="editor.focus().undo()">
-        undo
-      </button>
-      <button @click="editor.focus().redo()">
-        redo
+        clear format
       </button>
       <button @click="editor.focus().bold()" :class="{ 'is-active': editor.isActive('bold') }">
         bold
@@ -19,7 +13,7 @@
       <button @click="editor.focus().code()" :class="{ 'is-active': editor.isActive('code') }">
         code
       </button>
-      <button @click="editor.focus().code_block()" :class="{ 'is-active': editor.isActive('code_block') }">
+      <button @click="editor.focus().codeBlock()" :class="{ 'is-active': editor.isActive('code_block') }">
         code_block
       </button>
       <button @click="editor.focus().heading({ level: 1 })" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
@@ -40,6 +34,12 @@
       <button @click="editor.focus().heading({ level: 6 })" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
         h6
       </button>
+      <button @click="editor.focus().undo()">
+        undo
+      </button>
+      <button @click="editor.focus().redo()">
+        redo
+      </button>
     </div>
     <editor-content :editor="editor" />
   </div>
@@ -67,6 +67,8 @@ export default {
       `,
       extensions: defaultExtensions(),
     })
+
+    window.editor = this.editor
   },
 
   beforeDestroy() {

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

@@ -1,3 +0,0 @@
-.this-is-a-test {
-  color: black;
-}