add an example for markdown shortcuts, including (breaking) tests

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

@@ -9,12 +9,6 @@ context('basic', () => {
   })
 
   describe('export', () => {
-    it('set the content to something simple', () => {
-      cy.get('.ProseMirror').window().then(window => {
-        const { editor } = window
-      })
-    })
-
     it('should return html', () => {
       cy.get('.ProseMirror').window().then(window => {
         const { editor } = window

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

@@ -0,0 +1,126 @@
+context('markdown-shortcuts', () => {
+  beforeEach(() => {
+    cy.visit('/examples/markdown-shortcuts')
+
+    cy.get('.ProseMirror').window().then(window => {
+      const { editor } = window
+      editor.setContent('<p></p>')
+    })
+  })
+
+  describe('headlines', () => {
+    it('should make a h1', () => {
+      cy.get('.ProseMirror').window().then(window => {
+        cy.get('.ProseMirror')
+          .type('# Headline', {force: true})
+          .contains('h1', 'Headline')
+      })
+    })
+
+    it('should make a h2', () => {
+      cy.get('.ProseMirror').window().then(window => {
+        cy.get('.ProseMirror')
+          .type('## Headline', {force: true})
+          .contains('h2', 'Headline')
+      })
+    })
+
+    it('should make a h3', () => {
+      cy.get('.ProseMirror').window().then(window => {
+        cy.get('.ProseMirror')
+          .type('### Headline', {force: true})
+          .contains('h3', 'Headline')
+      })
+    })
+
+    it('should make a h4', () => {
+      cy.get('.ProseMirror').window().then(window => {
+        cy.get('.ProseMirror')
+          .type('#### Headline', {force: true})
+          .contains('h4', 'Headline')
+      })
+    })
+
+    it('should make a h5', () => {
+      cy.get('.ProseMirror').window().then(window => {
+        cy.get('.ProseMirror')
+          .type('##### Headline', {force: true})
+          .contains('h5', 'Headline')
+      })
+    })
+
+    it('should make a h6', () => {
+      cy.get('.ProseMirror').window().then(window => {
+        cy.get('.ProseMirror')
+          .type('###### Headline', {force: true})
+          .contains('h6', 'Headline')
+      })
+    })
+  })
+
+  describe('code', () => {
+    it('should create inline code', () => {
+      cy.get('.ProseMirror').window().then(window => {
+        cy.get('.ProseMirror')
+          .type('`$foobar`', {force: true})
+          .contains('code', '$foobar')
+      })
+    })
+  })
+
+  describe('code block', () => {
+    it('should create a code block without language', () => {
+      cy.get('.ProseMirror').window().then(window => {
+        cy.get('.ProseMirror')
+          .type('``` {enter}const foo = bar{enter}```', {force: true})
+          .contains('pre', 'const foo = bar')
+      })
+    })
+  })
+
+  describe('bullet list', () => {
+    it('should create a bullet list from asteriks', () => {
+      cy.get('.ProseMirror').window().then(window => {
+        cy.get('.ProseMirror')
+          .type('* foobar', {force: true})
+          .contains('ul', 'foobar')
+      })
+    })
+
+    it('should create a bullet list from dashes', () => {
+      cy.get('.ProseMirror').window().then(window => {
+        cy.get('.ProseMirror')
+          .type('- foobar', {force: true})
+          .contains('ul', 'foobar')
+      })
+    })
+
+    it('should create a bullet list from pluses', () => {
+      cy.get('.ProseMirror').window().then(window => {
+        cy.get('.ProseMirror')
+          .type('+ foobar', {force: true})
+          .contains('ul', 'foobar')
+      })
+    })
+  })
+
+  describe('ordered list', () => {
+    it('should create a ordered list', () => {
+      cy.get('.ProseMirror').window().then(window => {
+        cy.get('.ProseMirror')
+        .type('1. foobar', {force: true})
+        .contains('ol', 'foobar')
+      })
+    })
+  })
+
+  describe('blockquote', () => {
+    it('should create a blockquote', () => {
+      cy.get('.ProseMirror').window().then(window => {
+        cy.get('.ProseMirror')
+        .type('> foobar', {force: true})
+        .contains('blockquote', 'foobar')
+      })
+    })
+  })
+})

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

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    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.
+        </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.
+        </p>
+        <p>
+          You can add your own input rules through adding the <code>inputRules()</code> method in your nodes and marks.
+        </p>
+      `,
+      extensions: defaultExtensions(),
+    })
+
+    window.editor = this.editor
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>

docs/src/layouts/App/base.scss

@@ -93,4 +93,10 @@ blockquote {
 .is-active {
   background: black;
   color: white;
+}
+
+.ProseMirror {
+  p {
+    margin: 0.5rem 0;
+  }
 }

docs/src/layouts/App/style.scss

@@ -165,4 +165,4 @@ $menuBreakPoint: 750px;
     min-width: 0;
     padding-top: $navHeight + 2rem;
   }
-}
+}

docs/src/links.yaml

@@ -69,7 +69,6 @@
       draft: true
     - title: Markdown Shortcuts
       link: /examples/markdown-shortcuts
-      draft: true
     - title: Code Highlighting
       link: /examples/code-highlighting
       draft: true