Merge branch 'main' of github.com:ueberdosis/tiptap-next into main

.github/workflows/main.yml

@@ -27,7 +27,7 @@ jobs:
     - uses: actions/checkout@v2.3.3
 
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2.1.1
+      uses: actions/setup-node@v2.1.2
       with:
         node-version: ${{ matrix.node-version }}
 
@@ -72,7 +72,7 @@ jobs:
     - uses: actions/checkout@v2.3.3
 
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2.1.1
+      uses: actions/setup-node@v2.1.2
       with:
         node-version: ${{ matrix.node-version }}
 
@@ -87,14 +87,14 @@ jobs:
         browser: chrome
 
     - name: Export screenshots (on failure only)
-      uses: actions/upload-artifact@v2.1.4
+      uses: actions/upload-artifact@v2.2.0
       if: failure()
       with:
         name: cypress-screenshots
         path: tests/cypress/screenshots
 
     - name: Export screen recordings (on failure only)
-      uses: actions/upload-artifact@v2.1.4
+      uses: actions/upload-artifact@v2.2.0
       if: failure()
       with:
         name: cypress-videos
@@ -125,7 +125,7 @@ jobs:
     - uses: actions/checkout@v2.3.3
 
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2.1.1
+      uses: actions/setup-node@v2.1.2
       with:
         node-version: ${{ matrix.node-version }}
 

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

@@ -4,10 +4,6 @@ context('/examples/focus', () => {
   })
 
   it('should have class', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.focus('start')
-
     cy.get('.ProseMirror p:first').should('have.class', 'has-focus')
   })
-  })
 })

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="editor">
+  <div>
     <editor-content :editor="editor" />
   </div>
 </template>

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')
+    })
+  })
 })

docs/src/demos/Extensions/Strike/index.spec.js

@@ -51,7 +51,7 @@ context('/api/extensions/strike', () => {
 
   it('should make a striked text from the markdown shortcut', () => {
     cy.get('.ProseMirror')
-      .type('~Strike~')
+      .type('~~Strike~~')
       .find('s')
       .should('contain', 'Strike')
   })

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.

docs/src/docPages/api/extensions/strike.md

@@ -1,7 +1,7 @@
 # Strike
 Use this extension to render ~~striked text~~. If you pass `<s>`, `<del>`, `<strike>` tags, or text with inline `style` attributes setting `text-decoration: line-through` in the editor’s initial content, they all will be rendered accordingly.
 
-Type <code>~text between tildes~</code> and it will be magically ~~striked through~~ while you type.
+Type <code>&Tilde;&Tilde;text between tildes&Tilde;&Tilde;</code> and it will be magically ~~striked through~~ while you type.
 
 ::: warning Restrictions
 The extension will generate the corresponding `<s>` HTML tags when reading contents of the `Editor` instance. All text striked through, regardless of the method will be normalized to `<s>` HTML tags.

docs/src/links.yaml

@@ -56,8 +56,8 @@
         # - title: Placeholder
         #   link: /examples/placeholder
         #   draft: true
-        # - title: Focus
-        #   link: /examples/focus
+        - title: Focus
+          link: /examples/focus
         # - title: Title
         #   link: /examples/title
         #   draft: true

packages/core/src/Editor.ts

@@ -122,7 +122,7 @@ export class Editor extends EventEmitter {
     this.registerCommands(coreCommands)
     this.injectCSS()
 
-    this.proxy.focus(this.options.autoFocus)
+    window.setTimeout(() => this.proxy.focus(this.options.autoFocus), 0)
   }
 
   /**

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()

packages/extension-strike/index.ts

@@ -10,8 +10,8 @@ declare module '@tiptap/core/src/Editor' {
   }
 }
 
-export const inputRegex = /(?:^|\s)((?:~)((?:[^~]+))(?:~))$/gm
-export const pasteRegex = /(?:^|\s)((?:~)((?:[^~]+))(?:~))/gm
+export const inputRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))$/gm
+export const pasteRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))/gm
 
 export default new Mark()
   .name('strike')