From efdbfb580912f5c312c1e1f37d726ce0b9ed8728 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Tue, 1 Sep 2020 16:30:25 +0200
Subject: [PATCH] add an example for markdown shortcuts, including (breaking)
 tests

---
 docs/src/demos/Examples/Basic/index.spec.js   |   6 -
 .../Examples/MarkdownShortcuts/index.spec.js  | 126 ++++++++++++++++++
 .../Examples/MarkdownShortcuts/index.vue      |  44 ++++++
 docs/src/layouts/App/base.scss                |   6 +
 docs/src/layouts/App/style.scss               |   2 +-
 docs/src/links.yaml                           |   1 -
 6 files changed, 177 insertions(+), 8 deletions(-)
 create mode 100644 docs/src/demos/Examples/MarkdownShortcuts/index.spec.js
 create mode 100644 docs/src/demos/Examples/MarkdownShortcuts/index.vue

diff --git a/docs/src/demos/Examples/Basic/index.spec.js b/docs/src/demos/Examples/Basic/index.spec.js
index 12ce3f68..f072120f 100644
--- a/docs/src/demos/Examples/Basic/index.spec.js
+++ b/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
diff --git a/docs/src/demos/Examples/MarkdownShortcuts/index.spec.js b/docs/src/demos/Examples/MarkdownShortcuts/index.spec.js
new file mode 100644
index 00000000..62d2a8e4
--- /dev/null
+++ b/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')
+      })
+    })
+  })
+})
\ No newline at end of file
diff --git a/docs/src/demos/Examples/MarkdownShortcuts/index.vue b/docs/src/demos/Examples/MarkdownShortcuts/index.vue
new file mode 100644
index 00000000..5d59a9e6
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/src/layouts/App/base.scss b/docs/src/layouts/App/base.scss
index c4c5dbab..2a0d4d1c 100644
--- a/docs/src/layouts/App/base.scss
+++ b/docs/src/layouts/App/base.scss
@@ -93,4 +93,10 @@ blockquote {
 .is-active {
   background: black;
   color: white;
+}
+
+.ProseMirror {
+  p {
+    margin: 0.5rem 0;
+  }
 }
\ No newline at end of file
diff --git a/docs/src/layouts/App/style.scss b/docs/src/layouts/App/style.scss
index 333e8ae4..c4b4d9f5 100644
--- a/docs/src/layouts/App/style.scss
+++ b/docs/src/layouts/App/style.scss
@@ -165,4 +165,4 @@ $menuBreakPoint: 750px;
     min-width: 0;
     padding-top: $navHeight + 2rem;
   }
-}
\ No newline at end of file
+}
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 95415f44..af737226 100644
--- a/docs/src/links.yaml
+++ b/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