From 64da5cbcf78ebf2dc4ef756a39487b36b7de8976 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Fri, 2 Oct 2020 14:54:10 +0200
Subject: [PATCH 1/2] add tilde markdown shortcut support to code blocks

---
 .../demos/Extensions/CodeBlock/index.spec.js  | 46 ++++++++++++++-----
 packages/extension-code-block/index.ts        |  6 ++-
 2 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/docs/src/demos/Extensions/CodeBlock/index.spec.js b/docs/src/demos/Extensions/CodeBlock/index.spec.js
index 746605c0..7da58542 100644
--- a/docs/src/demos/Extensions/CodeBlock/index.spec.js
+++ b/docs/src/demos/Extensions/CodeBlock/index.spec.js
@@ -58,17 +58,6 @@ context('/api/extensions/code-block', () => {
       .should('not.exist')
   })
 
-  it('should make a code block from markdown shortcuts', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.clearContent()
-
-      cy.get('.ProseMirror')
-        .type('``` Code')
-        .find('pre>code')
-        .should('contain', 'Code')
-    })
-  })
-
   it('should parse the language from a HTML code block', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<pre><code class="language-css">body { display: none; }</code></pre>')
@@ -79,7 +68,29 @@ context('/api/extensions/code-block', () => {
     })
   })
 
-  it('should make a code block for js', () => {
+  it('should make a code block from backtick markdown shortcuts', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.clearContent()
+
+      cy.get('.ProseMirror')
+        .type('``` Code')
+        .find('pre>code')
+        .should('contain', 'Code')
+    })
+  })
+
+  it('should make a code block from tilde markdown shortcuts', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.clearContent()
+
+      cy.get('.ProseMirror')
+        .type('~~~ Code')
+        .find('pre>code')
+        .should('contain', 'Code')
+    })
+  })
+
+  it('should make a code block for js with backticks', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.clearContent()
 
@@ -89,4 +100,15 @@ context('/api/extensions/code-block', () => {
         .should('contain', 'Code')
     })
   })
+
+  it('should make a code block for js with tildes', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.clearContent()
+
+      cy.get('.ProseMirror')
+        .type('~~~js Code')
+        .find('pre>code.language-js')
+        .should('contain', 'Code')
+    })
+  })
 })
diff --git a/packages/extension-code-block/index.ts b/packages/extension-code-block/index.ts
index 4119e7ec..9b69b8fb 100644
--- a/packages/extension-code-block/index.ts
+++ b/packages/extension-code-block/index.ts
@@ -13,7 +13,8 @@ declare module '@tiptap/core/src/Editor' {
   }
 }
 
-export const inputRegex = /^```(?<language>[a-z]*)? $/
+export const backtickInputRegex = /^```(?<language>[a-z]*)? $/
+export const tildeInputRegex = /^~~~(?<language>[a-z]*)? $/
 
 export default new Node<CodeBlockOptions>()
   .name('code_block')
@@ -62,6 +63,7 @@ export default new Node<CodeBlockOptions>()
     'Shift-Control-\\': () => editor.codeBlock(),
   }))
   .inputRules(({ type }) => [
-    textblockTypeInputRule(inputRegex, type, ({ groups }: any) => groups),
+    textblockTypeInputRule(backtickInputRegex, type, ({ groups }: any) => groups),
+    textblockTypeInputRule(tildeInputRegex, type, ({ groups }: any) => groups),
   ])
   .create()

From 26504027b746c7c7df5e23a2baedb5fc04346b95 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Fri, 2 Oct 2020 15:12:01 +0200
Subject: [PATCH 2/2] update the documentation

---
 docs/src/docPages/api/extensions/code-block.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/docPages/api/extensions/code-block.md b/docs/src/docPages/api/extensions/code-block.md
index 6608c521..a87e56d3 100644
--- a/docs/src/docPages/api/extensions/code-block.md
+++ b/docs/src/docPages/api/extensions/code-block.md
@@ -1,7 +1,7 @@
 # CodeBlock
 With the CodeBlock extension you can add fenced code blocks to your documents. It’ll wrap the code in `<pre>` and `<code>` HTML tags.
 
-Type three backticks and a space <code>&grave;&grave;&grave;</code> and a code block is instantly added for you.
+Type <code>&grave;&grave;&grave;&nbsp;</code> (three backticks and a space) or <code>&Tilde;&Tilde;&Tilde;&nbsp;</code> (three tildes and a space) and a code block is instantly added for you. You can even specify the language, try writing <code>&grave;&grave;&grave;css&nbsp;</code>. That should add a `language-css` class to the `<code>`-tag.
 
 ::: warning Restrictions
 The CodeBlock extension doesn’t come with styling and has no syntax highlighting built-in. It’s on our roadmap though.