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

.github/workflows/main.yml

@@ -6,6 +6,9 @@ jobs:
   test:
     runs-on: ubuntu-latest
 
+    env:
+      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+
     strategy:
       matrix:
         node-version: [14]
@@ -20,6 +23,7 @@ jobs:
     - uses: actions/checkout@v2.3.2
 
     - name: Run tests with Cypress
+      id: cypress
       uses: cypress-io/github-action@v2
       with:
         cache-key: node-v${{ matrix.node }}-on-${{ runner.os }}-hash-${{ hashFiles('yarn.lock') }}
@@ -42,9 +46,22 @@ jobs:
         name: cypress-videos
         path: tests/cypress/videos
 
+    - name: Send Slack notifications
+      uses: act10ns/slack@v1
+      with:
+        status: ${{ job.status }}
+        steps: ${{ toJson(steps) }}
+        channel: '#tiptap-next'
+      if: failure()
+
   build:
     runs-on: ubuntu-latest
 
+    needs: test
+
+    env:
+      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+
     strategy:
       matrix:
         node-version: [14]
@@ -59,7 +76,17 @@ jobs:
     - uses: actions/checkout@v2.3.2
 
     - name: Install dependencies
+      id: install-dependencies
       run: yarn install
 
     - name: Build packages dependencies
+      id: build-packages
       run: yarn build:packages
+
+    - name: Send Slack notifications
+      uses: act10ns/slack@v1
+      with:
+        status: ${{ job.status }}
+        steps: ${{ toJson(steps) }}
+        channel: '#tiptap-next'
+      if: failure()

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

@@ -1,14 +1,16 @@
 context('/examples/basic', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit('/examples/basic')
+  })
 
+  beforeEach((done) => {
     cy.get('.ProseMirror').window().then(window => {
       const { editor } = window
       editor.setContent('<p>foo</p>')
+      done()
     })
   })
 
-  describe('export', () => {
   it('should return html', () => {
     cy.get('.ProseMirror').window().then(window => {
       const { editor } = window
@@ -39,9 +41,7 @@ context('/examples/basic', () => {
       })
     })
   })
-  })
 
-  describe('insertText', () => {
   it('should prepend', () => {
     cy.get('.ProseMirror').window().then(window => {
       const { editor } = window
@@ -59,9 +59,7 @@ context('/examples/basic', () => {
       cy.get('.ProseMirror p:first').should('contain', 'foobar')
     })
   })
-  })
 
-  describe('insertHTML', () => {
   it('should prepend', () => {
     cy.get('.ProseMirror').window().then(window => {
       const { editor } = window
@@ -82,4 +80,3 @@ context('/examples/basic', () => {
     })
   })
 })
-})

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

@@ -3,7 +3,6 @@ context('/examples/export-html-or-json', () => {
     cy.visit('/examples/export-html-or-json')
   })
 
-  describe('export', () => {
   it('should return json', () => {
     cy.get('.ProseMirror').window().then(window => {
       const { editor } = window
@@ -61,4 +60,3 @@ context('/examples/export-html-or-json', () => {
     })
   })
 })
-})

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

@@ -1,9 +1,8 @@
 context('/examples/focus', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit('/examples/focus')
   })
 
-  describe('focus class', () => {
   it('should have class', () => {
     cy.get('.ProseMirror').window().then(window => {
       const { editor } = window
@@ -13,4 +12,3 @@ context('/examples/focus', () => {
     })
   })
 })
-})

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

@@ -3,7 +3,6 @@ context('/examples/history', () => {
     cy.visit('/examples/history')
   })
 
-  describe('undo', () => {
   it('should not have a mistake', () => {
     cy.get('.ProseMirror').window().then(window => {
       const { editor } = window
@@ -33,4 +32,3 @@ context('/examples/history', () => {
     })
   })
 })
-})

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

@@ -1,14 +1,16 @@
 context('/examples/markdown-shortcuts', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit('/examples/markdown-shortcuts')
+  })
 
+  beforeEach((done) => {
     cy.get('.ProseMirror').window().then(window => {
       const { editor } = window
       editor.clearContent()
+      done()
     })
   })
 
-  describe('headlines', () => {
   it('should make a h1', () => {
     cy.get('.ProseMirror')
       .type('# Headline', { force: true })
@@ -44,25 +46,19 @@ context('/examples/markdown-shortcuts', () => {
       .type('###### Headline', { force: true })
       .contains('h6', 'Headline')
   })
-  })
 
-  describe('code', () => {
   it('should create inline code', () => {
     cy.get('.ProseMirror')
       .type('`$foobar`', { force: true })
       .contains('code', '$foobar')
   })
-  })
 
-  describe('code block', () => {
   it.skip('should create a code block without language', () => {
     cy.get('.ProseMirror')
       .type('``` {enter}const foo = bar{enter}```', { force: true })
       .contains('pre', 'const foo = bar')
   })
-  })
 
-  describe('bullet list', () => {
   it.skip('should create a bullet list from asteriks', () => {
     cy.get('.ProseMirror')
       .type('* foobar', { force: true })
@@ -80,21 +76,16 @@ context('/examples/markdown-shortcuts', () => {
       .type('+ foobar', { force: true })
       .contains('ul', 'foobar')
   })
-  })
 
-  describe('ordered list', () => {
   it.skip('should create a ordered list', () => {
     cy.get('.ProseMirror')
     .type('1. foobar', { force: true })
     .contains('ol', 'foobar')
   })
-  })
 
-  describe('blockquote', () => {
   it.skip('should create a blockquote', () => {
     cy.get('.ProseMirror')
     .type('> foobar', { force: true })
     .contains('blockquote', 'foobar')
   })
 })
-})

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

@@ -3,7 +3,6 @@ context('/examples/read-only', () => {
     cy.visit('/examples/read-only')
   })
 
-  describe('editable', () => {
   it.skip('should be read-only', () => {
     cy.get('.ProseMirror').window().then(window => {
       cy.get('#editable').uncheck()
@@ -26,4 +25,3 @@ context('/examples/read-only', () => {
     })
   })
 })
-})

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

@@ -1,5 +1,5 @@
 context('/examples/simple', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit('/examples/simple')
   })
 })

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

@@ -1,23 +1,29 @@
 context('/api/extensions/blockquote', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit('/api/extensions/blockquote')
+  })
 
+  beforeEach((done) => {
     cy.get('.ProseMirror').window().then(window => {
       const { editor } = window
       editor.setContent('<p>Example Text</p>')
-      editor.focus().selectAll()
+      editor.selectAll()
+      done()
     })
   })
 
-  describe('blockquote', () => {
   it('the button should make the selected line a blockquote', () => {
+    cy.get('.ProseMirror blockquote').should('not.exist')
     cy.get('.demo__preview button:first').click({ force: true })
     cy.get('.ProseMirror').contains('blockquote', 'Example Text')
   })
 
   it('the button should toggle the blockquote', () => {
+    cy.get('.ProseMirror blockquote').should('not.exist')
     cy.get('.demo__preview button:first').click({ force: true })
     cy.get('.ProseMirror').contains('blockquote', 'Example Text')
+
+    cy.get('.ProseMirror').type('{selectall}', { force: true })
     cy.get('.demo__preview button:first').click({ force: true })
     cy.get('.ProseMirror blockquote').should('not.exist')
   })
@@ -28,21 +34,18 @@ context('/api/extensions/blockquote', () => {
   })
 
   it('the keyboard shortcut should toggle the blockquote', () => {
+    cy.get('.ProseMirror blockquote').should('not.exist')
     cy.get('.ProseMirror').type('{meta}{shift}9', { force: true })
     cy.get('.ProseMirror').contains('blockquote', 'Example Text')
+
+    cy.get('.ProseMirror').type('{selectall}', { force: true })
     cy.get('.ProseMirror').type('{meta}{shift}9', { force: true })
     cy.get('.ProseMirror blockquote').should('not.exist')
   })
 
   it('should make a blockquote from markdown shortcuts', () => {
-      cy.get('.ProseMirror').window().then(window => {
-        const { editor } = window
-        editor.clearContent()
-
     cy.get('.ProseMirror')
       .type('> Quote', { force: true })
       .contains('blockquote', 'Quote')
   })
 })
-  })
-})

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

@@ -1,33 +1,43 @@
 context('/api/extensions/bold', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit('/api/extensions/bold')
+  })
 
+  beforeEach((done) => {
     cy.get('.ProseMirror').window().then(window => {
       const { editor } = window
       editor.setContent('<p>Example Text</p>')
-      editor.focus().selectAll()
+      editor.selectAll()
+      done()
     })
   })
 
-  describe('bold', () => {
   it('the button should make the selected text bold', () => {
     cy.get('.demo__preview button:first').click({ force: true })
     cy.get('.ProseMirror').contains('strong', 'Example Text')
   })
 
   it('the button should toggle the selected text bold', () => {
-      cy.get('.demo__preview button:first').dblclick({ force: true })
+    cy.get('.demo__preview button:first').click({ force: true })
+    cy.get('.ProseMirror').type('{selectall}', { force: true })
+    cy.get('.demo__preview button:first').click({ force: true })
     cy.get('.ProseMirror strong').should('not.exist')
   })
 
   it('the keyboard shortcut should make the selected text bold', () => {
-      cy.get('.ProseMirror').type('{meta}b', {force: true})
+    cy.get('.ProseMirror')
-      cy.get('.ProseMirror').contains('strong', 'Example Text')
+      .type('{meta}b', { force: true })
+      .contains('strong', 'Example Text')
   })
 
   it('the keyboard shortcut should toggle the selected text bold', () => {
-      cy.get('.ProseMirror').type('{meta}b', {force: true}).type('{meta}b', {force: true})
+    cy.get('.ProseMirror')
-      cy.get('.ProseMirror strong').should('not.exist')
+      .type('{meta}b', { force: true })
+      .contains('strong', 'Example Text')
+
+    cy.get('.ProseMirror')
+      .type('{meta}b', { force: true })
+      .should('not.exist')
   })
 
   it('should make a bold text from the default markdown shortcut', () => {
@@ -42,4 +52,3 @@ context('/api/extensions/bold', () => {
       .contains('strong', 'Bold')
   })
 })
-})

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

@@ -1,23 +1,26 @@
 context('/api/extensions/code', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit('/api/extensions/code')
+  })
 
+  beforeEach((done) => {
     cy.get('.ProseMirror').window().then(window => {
       const { editor } = window
       editor.setContent('<p>Example Text</p>')
-      editor.focus().selectAll()
+      editor.selectAll()
+      done()
     })
   })
 
-  describe('code', () => {
   it('should mark the selected text as inline code', () => {
     cy.get('.demo__preview button:first').click({ force: true })
     cy.get('.ProseMirror').contains('code', 'Example Text')
   })
 
   it('should toggle the selected text as inline code', () => {
-      cy.get('.demo__preview button:first').dblclick({ force: true })
+    cy.get('.demo__preview button:first').click({ force: true })
+    cy.get('.ProseMirror').type('{selectall}', { force: true })
+    cy.get('.demo__preview button:first').click({ force: true })
     cy.get('.ProseMirror code').should('not.exist')
   })
 })
-})

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

@@ -1,15 +1,17 @@
 context('/api/extensions/code-block', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit('/api/extensions/code-block')
+  })
 
+  beforeEach((done) => {
     cy.get('.ProseMirror').window().then(window => {
       const { editor } = window
       editor.setContent('<p>Example Text</p>')
-      editor.focus().selectAll()
+      editor.selectAll()
+      done()
     })
   })
 
-  describe('code-block', () => {
   it('the button should make the selected line a code block', () => {
     cy.get('.demo__preview button:first').click({ force: true })
     cy.get('.ProseMirror').contains('pre', 'Example Text')
@@ -18,6 +20,8 @@ context('/api/extensions/code-block', () => {
   it('the button should toggle the code block', () => {
     cy.get('.demo__preview button:first').click({ force: true })
     cy.get('.ProseMirror').contains('pre', 'Example Text')
+
+    cy.get('.ProseMirror').type('{selectall}', { force: true })
     cy.get('.demo__preview button:first').click({ force: true })
     cy.get('.ProseMirror pre').should('not.exist')
   })
@@ -30,19 +34,15 @@ context('/api/extensions/code-block', () => {
   it('the keyboard shortcut should toggle the code block', () => {
     cy.get('.ProseMirror').type('{control}{shift}\\', { force: true })
     cy.get('.ProseMirror').contains('pre', 'Example Text')
+
+    cy.get('.ProseMirror').type('{selectall}', { force: true })
     cy.get('.ProseMirror').type('{control}{shift}\\', { force: true })
     cy.get('.ProseMirror pre').should('not.exist')
   })
 
   it('should make a code block from markdown shortcuts', () => {
-      cy.get('.ProseMirror').window().then(window => {
-        const { editor } = window
-        editor.clearContent()
-
     cy.get('.ProseMirror')
       .type('``` {enter}Code', { force: true })
       .contains('pre', 'Code')
   })
 })
-  })
-})

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

@@ -1,5 +1,5 @@
 context('/api/extensions/document', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit('/api/extensions/document')
   })
 })

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

@@ -1,14 +1,15 @@
 context('/api/extensions/hard-break', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit('/api/extensions/hard-break')
+  })
 
+  beforeEach(() => {
     cy.get('.ProseMirror').window().then(window => {
       const { editor } = window
       editor.setContent('<p>Example Text</p>')
     })
   })
 
-  describe('hard-break', () => {
   it('the button should add a line break', () => {
     cy.get('.ProseMirror br').should('not.exist')
     cy.get('.demo__preview button:first').click({ force: true })
@@ -27,4 +28,3 @@ context('/api/extensions/hard-break', () => {
     cy.get('.ProseMirror br').should('exist')
   })
 })
-})

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

@@ -1,5 +1,32 @@
 context('/api/extensions/heading', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit('/api/extensions/heading')
   })
+
+  beforeEach((done) => {
+    cy.get('.ProseMirror').window().then(window => {
+      const { editor } = window
+      editor.setContent('<p>Example Text</p>')
+      editor.selectAll()
+      done()
+    })
+  })
+
+  it('the button should make the selected line a h1', () => {
+    cy.get('.ProseMirror h1').should('not.exist')
+    cy.get('.demo__preview button:nth-child(1)').click({ force: true })
+    cy.get('.ProseMirror').contains('h1', 'Example Text')
+  })
+
+  it('the button should make the selected line a h2', () => {
+    cy.get('.ProseMirror h2').should('not.exist')
+    cy.get('.demo__preview button:nth-child(2)').click({ force: true })
+    cy.get('.ProseMirror').contains('h2', 'Example Text')
+  })
+
+  it('the button should make the selected line a h3', () => {
+    cy.get('.ProseMirror h3').should('not.exist')
+    cy.get('.demo__preview button:nth-child(3)').click({ force: true })
+    cy.get('.ProseMirror').contains('h3', 'Example Text')
+  })
 })

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

@@ -1,14 +1,15 @@
 context('/api/extensions/history', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit('/api/extensions/history')
+  })
 
+  beforeEach(() => {
     cy.get('.ProseMirror').window().then(window => {
       const { editor } = window
       editor.setContent('<p>Mistake</p>')
     })
   })
 
-  describe('undo', () => {
   it('should make the last change undone', () => {
     cy.get('.ProseMirror').window().then(window => {
       cy.get('.ProseMirror').should('contain', 'Mistake')
@@ -22,9 +23,7 @@ context('/api/extensions/history', () => {
     cy.get('.ProseMirror').type('{meta}z', { force: true })
     cy.get('.ProseMirror').should('not.contain', 'Mistake')
   })
-  })
 
-  describe('redo', () => {
   it('should apply the last undone change again', () => {
     cy.get('.ProseMirror').window().then(window => {
       cy.get('.ProseMirror').should('contain', 'Mistake')
@@ -44,4 +43,3 @@ context('/api/extensions/history', () => {
     cy.get('.ProseMirror').should('contain', 'Mistake')
   })
 })
-})

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

@@ -1,14 +1,15 @@
 context('/api/extensions/horizontal-rule', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit('/api/extensions/horizontal-rule')
+  })
 
+  beforeEach(() => {
     cy.get('.ProseMirror').window().then(window => {
       const { editor } = window
       editor.setContent('<p>Example Text</p>')
     })
   })
 
-  describe('horizontal-rule', () => {
   it('the button should add a horizontal rule', () => {
     cy.get('.ProseMirror hr').should('not.exist')
     cy.get('.demo__preview button:first').click({ force: true })
@@ -37,4 +38,3 @@ context('/api/extensions/horizontal-rule', () => {
     })
   })
 })
-})

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

@@ -1,22 +1,26 @@
 context('/api/extensions/italic', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit('/api/extensions/italic')
+  })
 
+  beforeEach((done) => {
     cy.get('.ProseMirror').window().then(window => {
       const { editor } = window
       editor.setContent('<p>Example Text</p>')
-      editor.focus().selectAll()
+      editor.selectAll()
+      done()
     })
   })
 
-  describe('italic', () => {
   it('the button should make the selected text italic', () => {
     cy.get('.demo__preview button:first').click({ force: true })
     cy.get('.ProseMirror').contains('em', 'Example Text')
   })
 
   it('the button should toggle the selected text italic', () => {
-      cy.get('.demo__preview button:first').dblclick({ force: true })
+    cy.get('.demo__preview button:first').click({ force: true })
+    cy.get('.ProseMirror').type('{selectall}', { force: true })
+    cy.get('.demo__preview button:first').click({ force: true })
     cy.get('.ProseMirror em').should('not.exist')
   })
 
@@ -30,4 +34,3 @@ context('/api/extensions/italic', () => {
     cy.get('.ProseMirror em').should('not.exist')
   })
 })
-})

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

@@ -1,5 +1,33 @@
 context('/api/extensions/paragraph', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit('/api/extensions/paragraph')
   })
+
+  beforeEach((done) => {
+    cy.get('.ProseMirror').window().then(window => {
+      const { editor } = window
+      editor.clearContent()
+      done()
+    })
+  })
+
+  it('text should be wrapped in a paragraph by default', () => {
+    cy.get('.ProseMirror').type('Example Text', { force: true })
+    cy.get('.ProseMirror').contains('p', 'Example Text')
+    cy.get('.ProseMirror').find('p').should('have.length', 1)
+  })
+
+  it('enter should make a new paragraph', () => {
+    cy.get('.ProseMirror').type('First Paragraph{enter}Second Paragraph', { force: true })
+    cy.get('.ProseMirror').find('p').should('have.length', 2)
+    cy.get('.ProseMirror').contains('p:first', 'First Paragraph')
+    cy.get('.ProseMirror').contains('p:nth-child(2)', 'Second Paragraph')
+  })
+
+  it('backspace should remove the second paragraph', () => {
+    cy.get('.ProseMirror').type('{enter}', { force: true })
+    cy.get('.ProseMirror').find('p').should('have.length', 2)
+    cy.get('.ProseMirror').type('{backspace}', { force: true })
+    cy.get('.ProseMirror').find('p').should('have.length', 1)
+  })
 })

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

@@ -1,22 +1,26 @@
 context('/api/extensions/strike', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit('/api/extensions/strike')
+  })
 
+  beforeEach((done) => {
     cy.get('.ProseMirror').window().then(window => {
       const { editor } = window
       editor.setContent('<p>Example Text</p>')
-      editor.focus().selectAll()
+      editor.selectAll()
+      done()
     })
   })
 
-  describe('strike', () => {
   it('the button should strike the selected text', () => {
     cy.get('.demo__preview button:first').click({ force: true })
     cy.get('.ProseMirror').contains('s', 'Example Text')
   })
 
   it('the button should toggle the selected text striked', () => {
-      cy.get('.demo__preview button:first').dblclick({ force: true })
+    cy.get('.demo__preview button:first').click({ force: true })
+    cy.get('.ProseMirror').type('{selectall}', { force: true })
+    cy.get('.demo__preview button:first').click({ force: true })
     cy.get('.ProseMirror s').should('not.exist')
   })
 
@@ -36,4 +40,3 @@ context('/api/extensions/strike', () => {
       .contains('s', 'Strike')
   })
 })
-})

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

@@ -1,22 +1,26 @@
 context('/api/extensions/underline', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit('/api/extensions/underline')
+  })
 
+  beforeEach((done) => {
     cy.get('.ProseMirror').window().then(window => {
       const { editor } = window
       editor.setContent('<p>Example Text</p>')
-      editor.focus().selectAll()
+      editor.selectAll()
+      done()
     })
   })
 
-  describe('bold', () => {
   it('the button should underline the selected text', () => {
     cy.get('.demo__preview button:first').click({ force: true })
     cy.get('.ProseMirror').contains('u', 'Example Text')
   })
 
   it('the button should toggle the selected text underline', () => {
-      cy.get('.demo__preview button:first').dblclick({ force: true })
+    cy.get('.demo__preview button:first').click({ force: true })
+    cy.get('.ProseMirror').type('{selectall}', { force: true })
+    cy.get('.demo__preview button:first').click({ force: true })
     cy.get('.ProseMirror u').should('not.exist')
   })
 
@@ -30,4 +34,3 @@ context('/api/extensions/underline', () => {
     cy.get('.ProseMirror u').should('not.exist')
   })
 })
-})

docs/src/links.yaml

@@ -195,3 +195,15 @@
           link: /api/schema/get-schema
         - title: generateHtml
           link: /api/schema/generate-html
+
+- title: Best Practices
+  items:
+    - title: Overview
+      link: /best-practices/overview/
+      draft: true
+    - title: Menus
+      link: /best-practices/menus/
+      draft: true
+    - title: Keyboard Shortcuts
+      link: /best-practices/keyboard-shortcuts/
+      draft: true

tests/cypress.json

@@ -1,5 +1,7 @@
 {
   "baseUrl": "http://localhost:3000",
   "integrationFolder": "../docs/src/",
-  "testFiles": "**/*.spec.js"
+  "testFiles": "**/*.spec.js",
+  "viewportWidth": 1280,
+  "viewportHeight": 1280
 }