feat: add tiptap class

* update docs
* update demos

demos/setup/helper.ts

@@ -29,7 +29,7 @@ export function debug() {
   // @ts-ignore
   sendData('source', window.source)
 
-  waitUntilElementExists('.ProseMirror', element => {
+  waitUntilElementExists('.tiptap', element => {
     // @ts-ignore
     const editor = element.editor
 

demos/setup/style.scss

@@ -73,7 +73,7 @@ select {
   }
 }
 
-.ProseMirror:focus {
+.tiptap:focus {
   outline: none;
 }
 

demos/src/Commands/InsertContent/Vue/index.vue

@@ -94,7 +94,7 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Demos/SingleRoomCollab/React/styles.scss

@@ -1,5 +1,5 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/AutolinkValidation/React/index.spec.js

@@ -4,7 +4,7 @@ context('/src/Examples/AutolinkValidation/React/', () => {
   })
 
   beforeEach(() => {
-    cy.get('.ProseMirror').type('{selectall}{backspace}')
+    cy.get('.tiptap').type('{selectall}{backspace}')
   })
 
   const validLinks = [
@@ -26,75 +26,75 @@ context('/src/Examples/AutolinkValidation/React/', () => {
 
   validLinks.forEach(([rawTextInput, textThatShouldBeLinked]) => {
     it(`should autolink ${rawTextInput}`, () => {
-      cy.get('.ProseMirror').type(rawTextInput)
+      cy.get('.tiptap').type(rawTextInput)
-      cy.get('.ProseMirror a').contains(textThatShouldBeLinked)
+      cy.get('.tiptap a').contains(textThatShouldBeLinked)
     })
   })
 
   invalidLinks.forEach(rawTextInput => {
     it(`should not autolink ${rawTextInput}`, () => {
-      cy.get('.ProseMirror').type(`{selectall}{backspace}${rawTextInput}`)
+      cy.get('.tiptap').type(`{selectall}{backspace}${rawTextInput}`)
-      cy.get('.ProseMirror a').should('not.exist')
+      cy.get('.tiptap a').should('not.exist')
     })
   })
 
   it('should not relink unset links after entering second link', () => {
-    cy.get('.ProseMirror').type('https://tiptap.dev {home}')
+    cy.get('.tiptap').type('https://tiptap.dev {home}')
-    cy.get('.ProseMirror').should('have.text', 'https://tiptap.dev ')
+    cy.get('.tiptap').should('have.text', 'https://tiptap.dev ')
     cy.get('[data-testid=unsetLink]').click()
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .find('a')
       .should('have.length', 0)
-    cy.get('.ProseMirror').type('{end}http://www.example.com/ ')
+    cy.get('.tiptap').type('{end}http://www.example.com/ ')
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .find('a')
       .should('have.length', 1)
       .should('have.attr', 'href', 'http://www.example.com/')
   })
 
   it('should not relink unset links after hitting next paragraph', () => {
-    cy.get('.ProseMirror').type('https://tiptap.dev {home}')
+    cy.get('.tiptap').type('https://tiptap.dev {home}')
-    cy.get('.ProseMirror').should('have.text', 'https://tiptap.dev ')
+    cy.get('.tiptap').should('have.text', 'https://tiptap.dev ')
     cy.get('[data-testid=unsetLink]').click()
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .find('a')
       .should('have.length', 0)
-    cy.get('.ProseMirror').type('{end}typing other text should prevent the link from relinking when hitting enter{enter}')
+    cy.get('.tiptap').type('{end}typing other text should prevent the link from relinking when hitting enter{enter}')
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .find('a')
       .should('have.length', 0)
   })
 
   it('should not relink unset links after modifying', () => {
-    cy.get('.ProseMirror').type('https://tiptap.dev {home}')
+    cy.get('.tiptap').type('https://tiptap.dev {home}')
-    cy.get('.ProseMirror').should('have.text', 'https://tiptap.dev ')
+    cy.get('.tiptap').should('have.text', 'https://tiptap.dev ')
     cy.get('[data-testid=unsetLink]').click()
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .find('a')
       .should('have.length', 0)
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('{home}')
       .type('{rightArrow}'.repeat('https://'.length))
       .type('blah')
-    cy.get('.ProseMirror').should('have.text', 'https://blahtiptap.dev ')
+    cy.get('.tiptap').should('have.text', 'https://blahtiptap.dev ')
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .find('a')
       .should('have.length', 0)
   })
 
   it('should autolink after hitting enter (new paragraph)', () => {
-    cy.get('.ProseMirror').type('https://tiptap.dev{enter}')
+    cy.get('.tiptap').type('https://tiptap.dev{enter}')
-    cy.get('.ProseMirror').should('have.text', 'https://tiptap.dev')
+    cy.get('.tiptap').should('have.text', 'https://tiptap.dev')
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .find('a')
       .should('have.length', 1)
       .should('have.attr', 'href', 'https://tiptap.dev')
   })
 
   it('should autolink after hitting shift-enter (hardbreak)', () => {
-    cy.get('.ProseMirror').type('https://tiptap.dev{shift+enter}')
+    cy.get('.tiptap').type('https://tiptap.dev{shift+enter}')
-    cy.get('.ProseMirror').should('have.text', 'https://tiptap.dev')
+    cy.get('.tiptap').should('have.text', 'https://tiptap.dev')
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .find('a')
       .should('have.length', 1)
       .should('have.attr', 'href', 'https://tiptap.dev')

demos/src/Examples/AutolinkValidation/React/styles.scss

@@ -1,5 +1,5 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/AutolinkValidation/Vue/index.spec.js

@@ -4,7 +4,7 @@ context('/src/Examples/AutolinkValidation/Vue/', () => {
   })
 
   beforeEach(() => {
-    cy.get('.ProseMirror').type('{selectall}{backspace}')
+    cy.get('.tiptap').type('{selectall}{backspace}')
   })
 
   const validLinks = [
@@ -26,15 +26,15 @@ context('/src/Examples/AutolinkValidation/Vue/', () => {
 
   validLinks.forEach(([rawTextInput, textThatShouldBeLinked]) => {
     it(`should autolink ${rawTextInput}`, () => {
-      cy.get('.ProseMirror').type(rawTextInput)
+      cy.get('.tiptap').type(rawTextInput)
-      cy.get('.ProseMirror a').contains(textThatShouldBeLinked)
+      cy.get('.tiptap a').contains(textThatShouldBeLinked)
     })
   })
 
   invalidLinks.forEach(rawTextInput => {
     it(`should not autolink ${rawTextInput}`, () => {
-      cy.get('.ProseMirror').type(`{selectall}{backspace}${rawTextInput}`)
+      cy.get('.tiptap').type(`{selectall}{backspace}${rawTextInput}`)
-      cy.get('.ProseMirror a').should('not.exist')
+      cy.get('.tiptap a').should('not.exist')
     })
   })
 })

demos/src/Examples/AutolinkValidation/Vue/index.vue

@@ -45,7 +45,7 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/Book/React/index.spec.js

@@ -4,7 +4,7 @@ context('/src/Examples/Book/React/', () => {
   })
 
   it('should have a working tiptap instance', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       // eslint-disable-next-line
       expect(editor).to.not.be.null
     })

demos/src/Examples/Book/React/styles.scss

@@ -1,5 +1,5 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/Book/Vue/index.spec.js

@@ -4,7 +4,7 @@ context('/src/Examples/Book/Vue/', () => {
   })
 
   it('should have a working tiptap instance', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       // eslint-disable-next-line
       expect(editor).to.not.be.null
     })

demos/src/Examples/Book/Vue/index.vue

@@ -106,7 +106,7 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/CSSModules/React/styles.scss

@@ -1,5 +1,5 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/CSSModules/Vue/index.vue

@@ -131,7 +131,7 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/CodeBlockLanguage/React/index.spec.js

@@ -15,7 +15,7 @@ context('/src/Examples/CodeBlockLanguage/React/', () => {
 
       expect(initialCount).to.be.greaterThan(0)
 
-      cy.get('.ProseMirror select').select('java')
+      cy.get('.tiptap select').select('java')
       cy.wait(500)
 
       cy.get('[class^=hljs]').then(newElements => {

demos/src/Examples/CodeBlockLanguage/React/styles.scss

@@ -1,5 +1,5 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/CodeBlockLanguage/Vue/index.spec.js

@@ -15,7 +15,7 @@ context('/src/Examples/CodeBlockLanguage/Vue/', () => {
 
       expect(initialCount).to.be.greaterThan(0)
 
-      cy.get('.ProseMirror select').select('java')
+      cy.get('.tiptap select').select('java')
       cy.wait(500)
 
       cy.get('[class^=hljs]').then(newElements => {

demos/src/Examples/CodeBlockLanguage/Vue/index.vue

@@ -87,7 +87,7 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/CollaborativeEditing/React/styles.scss

@@ -1,5 +1,5 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/CollaborativeEditing/Vue/index.vue

@@ -264,7 +264,7 @@ export default {
 }
 
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/Community/React/index.spec.js

@@ -7,17 +7,17 @@ context('/src/Examples/Community/React/', () => {
     // check if count text is "44/280 characters"
     cy.get('.character-count__text').should('have.text', '44/280 characters')
 
-    // type in .ProseMirror
+    // type in .tiptap
-    cy.get('.ProseMirror').type(' Hello World')
+    cy.get('.tiptap').type(' Hello World')
     cy.get('.character-count__text').should('have.text', '56/280 characters')
 
-    // remove content from .ProseMirror and enter text
+    // remove content from .tiptap and enter text
-    cy.get('.ProseMirror').type('{selectall}{backspace}Hello World')
+    cy.get('.tiptap').type('{selectall}{backspace}Hello World')
     cy.get('.character-count__text').should('have.text', '11/280 characters')
   })
 
   it('should mention a user', () => {
-    cy.get('.ProseMirror').type('{selectall}{backspace}@')
+    cy.get('.tiptap').type('{selectall}{backspace}@')
 
     // check if the mention autocomplete is visible
     cy.get('.tippy-content .items').should('be.visible')
@@ -29,7 +29,7 @@ context('/src/Examples/Community/React/', () => {
       $el.click()
 
       // check if the user is mentioned
-      cy.get('.ProseMirror').should('have.text', `@${name} `)
+      cy.get('.tiptap').should('have.text', `@${name} `)
       cy.get('.character-count__text').should('have.text', '2/280 characters')
     })
 

demos/src/Examples/Community/React/styles.scss

@@ -1,5 +1,5 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/Community/Vue/index.spec.js

@@ -7,17 +7,17 @@ context('/src/Examples/Community/Vue/', () => {
     // check if count text is "44/280 characters"
     cy.get('.character-count__text').should('have.text', '44/280 characters')
 
-    // type in .ProseMirror
+    // type in .tiptap
-    cy.get('.ProseMirror').type(' Hello World')
+    cy.get('.tiptap').type(' Hello World')
     cy.get('.character-count__text').should('have.text', '56/280 characters')
 
-    // remove content from .ProseMirror and enter text
+    // remove content from .tiptap and enter text
-    cy.get('.ProseMirror').type('{selectall}{backspace}Hello World')
+    cy.get('.tiptap').type('{selectall}{backspace}Hello World')
     cy.get('.character-count__text').should('have.text', '11/280 characters')
   })
 
   it('should mention a user', () => {
-    cy.get('.ProseMirror').type('{selectall}{backspace}@')
+    cy.get('.tiptap').type('{selectall}{backspace}@')
 
     // check if the mention autocomplete is visible
     cy.get('.tippy-content .items').should('be.visible')
@@ -29,7 +29,7 @@ context('/src/Examples/Community/Vue/', () => {
       $el.click()
 
       // check if the user is mentioned
-      cy.get('.ProseMirror').should('have.text', `@${name} `)
+      cy.get('.tiptap').should('have.text', `@${name} `)
       cy.get('.character-count__text').should('have.text', '2/280 characters')
     })
 

demos/src/Examples/Community/Vue/index.vue

@@ -96,7 +96,7 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/CustomDocument/React/index.spec.js

@@ -4,42 +4,42 @@ context('/src/Examples/CustomDocument/React/', () => {
   })
 
   it('should have a working tiptap instance', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       // eslint-disable-next-line
       expect(editor).to.not.be.null
     })
   })
 
   it('should have a headline and a paragraph', () => {
-    cy.get('.ProseMirror h1').should('exist').should('have.text', 'It’ll always have a heading …')
+    cy.get('.tiptap h1').should('exist').should('have.text', 'It’ll always have a heading …')
-    cy.get('.ProseMirror p').should('exist').should('have.text', '… if you pass a custom document. That’s the beauty of having full control over the schema.')
+    cy.get('.tiptap p').should('exist').should('have.text', '… if you pass a custom document. That’s the beauty of having full control over the schema.')
   })
 
   it('should have a tooltip for a paragraph on a new line', () => {
-    cy.get('.ProseMirror').type('{enter}')
+    cy.get('.tiptap').type('{enter}')
-    cy.get('.ProseMirror p[data-placeholder]').should('exist').should('have.attr', 'data-placeholder', 'Can you add some further context?')
+    cy.get('.tiptap p[data-placeholder]').should('exist').should('have.attr', 'data-placeholder', 'Can you add some further context?')
   })
 
   it('should have a headline after clearing the document', () => {
-    cy.get('.ProseMirror').type('{selectall}{backspace}')
+    cy.get('.tiptap').type('{selectall}{backspace}')
-    cy.get('.ProseMirror').focus()
+    cy.get('.tiptap').focus()
-    cy.get('.ProseMirror h1[data-placeholder]')
+    cy.get('.tiptap h1[data-placeholder]')
       .should('exist')
       .should('have.attr', 'class', 'is-empty is-editor-empty')
       .should('have.attr', 'data-placeholder', 'What’s the title?')
   })
 
   it('should have a headline after clearing the document & enter paragraph automatically after adding a headline', () => {
-    cy.get('.ProseMirror').type('{selectall}{backspace}Hello world{enter}')
+    cy.get('.tiptap').type('{selectall}{backspace}Hello world{enter}')
-    cy.get('.ProseMirror h1')
+    cy.get('.tiptap h1')
       .should('exist')
       .should('have.text', 'Hello world')
-    cy.get('.ProseMirror p[data-placeholder]')
+    cy.get('.tiptap p[data-placeholder]')
       .should('exist')
       .should('have.attr', 'data-placeholder', 'Can you add some further context?')
 
-    cy.get('.ProseMirror').type('This is a paragraph for this test document')
+    cy.get('.tiptap').type('This is a paragraph for this test document')
-    cy.get('.ProseMirror p')
+    cy.get('.tiptap p')
       .should('exist')
       .should('have.text', 'This is a paragraph for this test document')
   })

demos/src/Examples/CustomDocument/React/styles.scss

@@ -1,12 +1,12 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }
 }
 
 /* Placeholder (at the top) */
-/*.ProseMirror p.is-editor-empty:first-child::before {
+/*.tiptap p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
   color: #ced4da;
@@ -15,7 +15,7 @@
 }*/
 
 /* Placeholder (on every new line) */
-.ProseMirror .is-empty::before {
+.tiptap .is-empty::before {
   content: attr(data-placeholder);
   float: left;
   color: #ced4da;

demos/src/Examples/CustomDocument/Vue/index.spec.js

@@ -4,44 +4,44 @@ context('/src/Examples/CustomDocument/Vue/', () => {
   })
 
   it('should have a working tiptap instance', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       // eslint-disable-next-line
       expect(editor).to.not.be.null
     })
   })
 
   it('should have a headline and a paragraph', () => {
-    cy.get('.ProseMirror h1').should('exist').should('have.text', 'It’ll always have a heading …')
+    cy.get('.tiptap h1').should('exist').should('have.text', 'It’ll always have a heading …')
-    cy.get('.ProseMirror p').should('exist').should('have.text', '… if you pass a custom document. That’s the beauty of having full control over the schema.')
+    cy.get('.tiptap p').should('exist').should('have.text', '… if you pass a custom document. That’s the beauty of having full control over the schema.')
   })
 
   it('should have a tooltip for a paragraph on a new line', () => {
-    cy.get('.ProseMirror').type('{enter}')
+    cy.get('.tiptap').type('{enter}')
-    cy.get('.ProseMirror p[data-placeholder]').should('exist').should('have.attr', 'data-placeholder', 'Can you add some further context?')
+    cy.get('.tiptap p[data-placeholder]').should('exist').should('have.attr', 'data-placeholder', 'Can you add some further context?')
   })
 
   it('should have a headline after clearing the document', () => {
-    cy.get('.ProseMirror').type('{selectall}{backspace}')
+    cy.get('.tiptap').type('{selectall}{backspace}')
     cy.wait(100)
-    cy.get('.ProseMirror').focus()
+    cy.get('.tiptap').focus()
-    cy.get('.ProseMirror h1[data-placeholder]')
+    cy.get('.tiptap h1[data-placeholder]')
       .should('exist')
       .should('have.attr', 'class', 'is-empty is-editor-empty')
       .should('have.attr', 'data-placeholder', 'What’s the title?')
   })
 
   it('should have a headline after clearing the document & enter paragraph automatically after adding a headline', () => {
-    cy.get('.ProseMirror').type('{selectall}{backspace}Hello world{enter}')
+    cy.get('.tiptap').type('{selectall}{backspace}Hello world{enter}')
     cy.wait(100)
-    cy.get('.ProseMirror h1')
+    cy.get('.tiptap h1')
       .should('exist')
       .should('have.text', 'Hello world')
-    cy.get('.ProseMirror p[data-placeholder]')
+    cy.get('.tiptap p[data-placeholder]')
       .should('exist')
       .should('have.attr', 'data-placeholder', 'Can you add some further context?')
 
-    cy.get('.ProseMirror').type('This is a paragraph for this test document')
+    cy.get('.tiptap').type('This is a paragraph for this test document')
-    cy.get('.ProseMirror p')
+    cy.get('.tiptap p')
       .should('exist')
       .should('have.text', 'This is a paragraph for this test document')
   })

demos/src/Examples/CustomDocument/Vue/index.vue

@@ -59,14 +59,14 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }
 }
 
 /* Placeholder (at the top) */
-/*.ProseMirror p.is-editor-empty:first-child::before {
+/*.tiptap p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
   color: #ced4da;
@@ -75,7 +75,7 @@ export default {
 }*/
 
 /* Placeholder (on every new line) */
-.ProseMirror .is-empty::before {
+.tiptap .is-empty::before {
   content: attr(data-placeholder);
   float: left;
   color: #ced4da;

demos/src/Examples/CustomParagraph/React/index.spec.js

@@ -4,20 +4,20 @@ context('/src/Examples/CustomParagraph/React/', () => {
   })
 
   it('should have a working tiptap instance', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       // eslint-disable-next-line
       expect(editor).to.not.be.null
     })
   })
 
   it('should have a paragraph and text length', () => {
-    cy.get('.ProseMirror p').should('exist').should('have.text', 'Each line shows the number of characters in the paragraph.')
+    cy.get('.tiptap p').should('exist').should('have.text', 'Each line shows the number of characters in the paragraph.')
-    cy.get('.ProseMirror .label').should('exist').should('have.text', '58')
+    cy.get('.tiptap .label').should('exist').should('have.text', '58')
   })
 
   it('should have new paragraph', () => {
-    cy.get('.ProseMirror').type('{selectall}{moveToEnd}{enter}')
+    cy.get('.tiptap').type('{selectall}{moveToEnd}{enter}')
-    cy.get('.ProseMirror p').eq(1).should('exist').should('have.text', '')
+    cy.get('.tiptap p').eq(1).should('exist').should('have.text', '')
-    cy.get('.ProseMirror .label').eq(1).should('exist').should('have.text', '0')
+    cy.get('.tiptap .label').eq(1).should('exist').should('have.text', '0')
   })
 })

demos/src/Examples/CustomParagraph/React/styles.scss

@@ -1,12 +1,12 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }
 }
 
 /* Placeholder (at the top) */
-/*.ProseMirror p.is-editor-empty:first-child::before {
+/*.tiptap p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
   color: #ced4da;
@@ -15,7 +15,7 @@
 }*/
 
 /* Placeholder (on every new line) */
-.ProseMirror .is-empty::before {
+.tiptap .is-empty::before {
   content: attr(data-placeholder);
   float: left;
   color: #ced4da;

demos/src/Examples/CustomParagraph/Vue/index.spec.js

@@ -4,20 +4,20 @@ context('/src/Examples/CustomParagraph/React/', () => {
   })
 
   it('should have a working tiptap instance', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       // eslint-disable-next-line
       expect(editor).to.not.be.null
     })
   })
 
   it('should have a paragraph and text length', () => {
-    cy.get('.ProseMirror p').should('exist').should('have.text', 'Each line shows the number of characters in the paragraph.')
+    cy.get('.tiptap p').should('exist').should('have.text', 'Each line shows the number of characters in the paragraph.')
-    cy.get('.ProseMirror .label').should('exist').should('have.text', '58')
+    cy.get('.tiptap .label').should('exist').should('have.text', '58')
   })
 
   it('should have new paragraph', () => {
-    cy.get('.ProseMirror').type('{selectall}{moveToEnd}{enter}')
+    cy.get('.tiptap').type('{selectall}{moveToEnd}{enter}')
-    cy.get('.ProseMirror p').eq(1).should('exist').should('have.text', '')
+    cy.get('.tiptap p').eq(1).should('exist').should('have.text', '')
-    cy.get('.ProseMirror .label').eq(1).should('exist').should('have.text', '0')
+    cy.get('.tiptap .label').eq(1).should('exist').should('have.text', '0')
   })
 })

demos/src/Examples/CustomParagraph/Vue/index.vue

@@ -46,7 +46,7 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/Default/React/index.spec.js

@@ -4,17 +4,17 @@ context('/src/Examples/Default/React/', () => {
   })
 
   beforeEach(() => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.setContent('<h1>Example Text</h1>')
-      cy.get('.ProseMirror').type('{selectall}')
+      cy.get('.tiptap').type('{selectall}')
     })
   })
 
   it('should apply the paragraph style when the keyboard shortcut is pressed', () => {
-    cy.get('.ProseMirror h1').should('exist')
+    cy.get('.tiptap h1').should('exist')
-    cy.get('.ProseMirror p').should('not.exist')
+    cy.get('.tiptap p').should('not.exist')
 
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .trigger('keydown', { modKey: true, altKey: true, key: '0' })
       .find('p')
       .should('contain', 'Example Text')
@@ -28,58 +28,58 @@ context('/src/Examples/Default/React/', () => {
 
   buttonMarks.forEach(m => {
     it(`should disable ${m.label} when the code tag is enabled for cursor`, () => {
-      cy.get('.ProseMirror').type('{selectall}Hello world')
+      cy.get('.tiptap').type('{selectall}Hello world')
       cy.get('button').contains('code').click()
       cy.get('button').contains(m.label).should('be.disabled')
     })
 
     it(`should enable ${m.label} when the code tag is disabled for cursor`, () => {
-      cy.get('.ProseMirror').type('{selectall}Hello world')
+      cy.get('.tiptap').type('{selectall}Hello world')
       cy.get('button').contains('code').click()
       cy.get('button').contains('code').click()
       cy.get('button').contains(m.label).should('not.be.disabled')
     })
 
     it(`should disable ${m.label} when the code tag is enabled for selection`, () => {
-      cy.get('.ProseMirror').type('{selectall}Hello world{selectall}')
+      cy.get('.tiptap').type('{selectall}Hello world{selectall}')
       cy.get('button').contains('code').click()
       cy.get('button').contains(m.label).should('be.disabled')
     })
 
     it(`should enable ${m.label} when the code tag is disabled for selection`, () => {
-      cy.get('.ProseMirror').type('{selectall}Hello world{selectall}')
+      cy.get('.tiptap').type('{selectall}Hello world{selectall}')
       cy.get('button').contains('code').click()
       cy.get('button').contains('code').click()
       cy.get('button').contains(m.label).should('not.be.disabled')
     })
 
     it(`should apply ${m.label} when the button is pressed`, () => {
-      cy.get('.ProseMirror').type('{selectall}Hello world')
+      cy.get('.tiptap').type('{selectall}Hello world')
       cy.get('button').contains('paragraph').click()
-      cy.get('.ProseMirror').type('{selectall}')
+      cy.get('.tiptap').type('{selectall}')
       cy.get('button').contains(m.label).click()
-      cy.get(`.ProseMirror ${m.tag}`).should('exist').should('have.text', 'Hello world')
+      cy.get(`.tiptap ${m.tag}`).should('exist').should('have.text', 'Hello world')
     })
   })
 
   it('should clear marks when the button is pressed', () => {
-    cy.get('.ProseMirror').type('{selectall}Hello world')
+    cy.get('.tiptap').type('{selectall}Hello world')
     cy.get('button').contains('paragraph').click()
-    cy.get('.ProseMirror').type('{selectall}')
+    cy.get('.tiptap').type('{selectall}')
     cy.get('button').contains('bold').click()
-    cy.get('.ProseMirror strong').should('exist').should('have.text', 'Hello world')
+    cy.get('.tiptap strong').should('exist').should('have.text', 'Hello world')
     cy.get('button').contains('clear marks').click()
-    cy.get('.ProseMirror strong').should('not.exist')
+    cy.get('.tiptap strong').should('not.exist')
   })
 
   it('should clear nodes when the button is pressed', () => {
-    cy.get('.ProseMirror').type('{selectall}Hello world')
+    cy.get('.tiptap').type('{selectall}Hello world')
     cy.get('button').contains('bullet list').click()
-    cy.get('.ProseMirror ul').should('exist').should('have.text', 'Hello world')
+    cy.get('.tiptap ul').should('exist').should('have.text', 'Hello world')
-    cy.get('.ProseMirror').type('{enter}A second item{enter}A third item{selectall}')
+    cy.get('.tiptap').type('{enter}A second item{enter}A third item{selectall}')
     cy.get('button').contains('clear nodes').click()
-    cy.get('.ProseMirror ul').should('not.exist')
+    cy.get('.tiptap ul').should('not.exist')
-    cy.get('.ProseMirror p').should('have.length', 3)
+    cy.get('.tiptap p').should('have.length', 3)
   })
 
   const buttonNodes = [
@@ -98,46 +98,46 @@ context('/src/Examples/Default/React/', () => {
   buttonNodes.forEach(n => {
     it(`should set ${n.label} when the button is pressed`, () => {
       cy.get('button').contains('paragraph').click()
-      cy.get('.ProseMirror').type('{selectall}Hello world{selectall}')
+      cy.get('.tiptap').type('{selectall}Hello world{selectall}')
 
       cy.get('button').contains(n.label).click()
-      cy.get(`.ProseMirror ${n.tag}`).should('exist').should('have.text', 'Hello world')
+      cy.get(`.tiptap ${n.tag}`).should('exist').should('have.text', 'Hello world')
       cy.get('button').contains(n.label).click()
-      cy.get(`.ProseMirror ${n.tag}`).should('not.exist')
+      cy.get(`.tiptap ${n.tag}`).should('not.exist')
     })
   })
 
   it('should add a hr when on the same line as a node', () => {
-    cy.get('.ProseMirror').type('{rightArrow}')
+    cy.get('.tiptap').type('{rightArrow}')
     cy.get('button').contains('horizontal rule').click()
-    cy.get('.ProseMirror hr').should('exist')
+    cy.get('.tiptap hr').should('exist')
-    cy.get('.ProseMirror h1').should('exist')
+    cy.get('.tiptap h1').should('exist')
   })
 
   it('should add a hr when on a new line', () => {
-    cy.get('.ProseMirror').type('{rightArrow}{enter}')
+    cy.get('.tiptap').type('{rightArrow}{enter}')
     cy.get('button').contains('horizontal rule').click()
-    cy.get('.ProseMirror hr').should('exist')
+    cy.get('.tiptap hr').should('exist')
-    cy.get('.ProseMirror h1').should('exist')
+    cy.get('.tiptap h1').should('exist')
   })
 
   it('should add a br', () => {
-    cy.get('.ProseMirror').type('{rightArrow}')
+    cy.get('.tiptap').type('{rightArrow}')
     cy.get('button').contains('hard break').click()
-    cy.get('.ProseMirror h1 br').should('exist')
+    cy.get('.tiptap h1 br').should('exist')
   })
 
   it('should undo', () => {
-    cy.get('.ProseMirror').type('{selectall}{backspace}')
+    cy.get('.tiptap').type('{selectall}{backspace}')
     cy.get('button').contains('undo').click()
-    cy.get('.ProseMirror').should('contain', 'Hello world')
+    cy.get('.tiptap').should('contain', 'Hello world')
   })
 
   it('should redo', () => {
-    cy.get('.ProseMirror').type('{selectall}{backspace}')
+    cy.get('.tiptap').type('{selectall}{backspace}')
     cy.get('button').contains('undo').click()
-    cy.get('.ProseMirror').should('contain', 'Hello world')
+    cy.get('.tiptap').should('contain', 'Hello world')
     cy.get('button').contains('redo').click()
-    cy.get('.ProseMirror').should('not.contain', 'Hello world')
+    cy.get('.tiptap').should('not.contain', 'Hello world')
   })
 })

demos/src/Examples/Default/React/styles.scss

@@ -1,5 +1,5 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/Default/Svelte/index.spec.js

@@ -4,17 +4,17 @@ context('/src/Examples/Default/React/', () => {
   })
 
   beforeEach(() => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.setContent('<h1>Example Text</h1>')
-      cy.get('.ProseMirror').type('{selectall}')
+      cy.get('.tiptap').type('{selectall}')
     })
   })
 
   it('should apply the paragraph style when the keyboard shortcut is pressed', () => {
-    cy.get('.ProseMirror h1').should('exist')
+    cy.get('.tiptap h1').should('exist')
-    cy.get('.ProseMirror p').should('not.exist')
+    cy.get('.tiptap p').should('not.exist')
 
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .trigger('keydown', { modKey: true, altKey: true, key: '0' })
       .find('p')
       .should('contain', 'Example Text')
@@ -28,32 +28,32 @@ context('/src/Examples/Default/React/', () => {
 
   buttonMarks.forEach(m => {
     it(`should apply ${m.label} when the button is pressed`, () => {
-      cy.get('.ProseMirror').type('{selectall}Hello world')
+      cy.get('.tiptap').type('{selectall}Hello world')
       cy.get('button').contains('paragraph').click()
-      cy.get('.ProseMirror').type('{selectall}')
+      cy.get('.tiptap').type('{selectall}')
       cy.get('button').contains(m.label).click()
-      cy.get(`.ProseMirror ${m.tag}`).should('exist').should('have.text', 'Hello world')
+      cy.get(`.tiptap ${m.tag}`).should('exist').should('have.text', 'Hello world')
     })
   })
 
   it('should clear marks when the button is pressed', () => {
-    cy.get('.ProseMirror').type('{selectall}Hello world')
+    cy.get('.tiptap').type('{selectall}Hello world')
     cy.get('button').contains('paragraph').click()
-    cy.get('.ProseMirror').type('{selectall}')
+    cy.get('.tiptap').type('{selectall}')
     cy.get('button').contains('bold').click()
-    cy.get('.ProseMirror strong').should('exist').should('have.text', 'Hello world')
+    cy.get('.tiptap strong').should('exist').should('have.text', 'Hello world')
     cy.get('button').contains('clear marks').click()
-    cy.get('.ProseMirror strong').should('not.exist')
+    cy.get('.tiptap strong').should('not.exist')
   })
 
   it('should clear nodes when the button is pressed', () => {
-    cy.get('.ProseMirror').type('{selectall}Hello world')
+    cy.get('.tiptap').type('{selectall}Hello world')
     cy.get('button').contains('bullet list').click()
-    cy.get('.ProseMirror ul').should('exist').should('have.text', 'Hello world')
+    cy.get('.tiptap ul').should('exist').should('have.text', 'Hello world')
-    cy.get('.ProseMirror').type('{enter}A second item{enter}A third item{selectall}')
+    cy.get('.tiptap').type('{enter}A second item{enter}A third item{selectall}')
     cy.get('button').contains('clear nodes').click()
-    cy.get('.ProseMirror ul').should('not.exist')
+    cy.get('.tiptap ul').should('not.exist')
-    cy.get('.ProseMirror p').should('have.length', 3)
+    cy.get('.tiptap p').should('have.length', 3)
   })
 
   const buttonNodes = [
@@ -72,46 +72,46 @@ context('/src/Examples/Default/React/', () => {
   buttonNodes.forEach(n => {
     it(`should set ${n.label} when the button is pressed`, () => {
       cy.get('button').contains('paragraph').click()
-      cy.get('.ProseMirror').type('{selectall}Hello world{selectall}')
+      cy.get('.tiptap').type('{selectall}Hello world{selectall}')
 
       cy.get('button').contains(n.label).click()
-      cy.get(`.ProseMirror ${n.tag}`).should('exist').should('have.text', 'Hello world')
+      cy.get(`.tiptap ${n.tag}`).should('exist').should('have.text', 'Hello world')
       cy.get('button').contains(n.label).click()
-      cy.get(`.ProseMirror ${n.tag}`).should('not.exist')
+      cy.get(`.tiptap ${n.tag}`).should('not.exist')
     })
   })
 
   it('should add a hr when on the same line as a node', () => {
-    cy.get('.ProseMirror').type('{rightArrow}')
+    cy.get('.tiptap').type('{rightArrow}')
     cy.get('button').contains('horizontal rule').click()
-    cy.get('.ProseMirror hr').should('exist')
+    cy.get('.tiptap hr').should('exist')
-    cy.get('.ProseMirror h1').should('exist')
+    cy.get('.tiptap h1').should('exist')
   })
 
   it('should add a hr when on a new line', () => {
-    cy.get('.ProseMirror').type('{rightArrow}{enter}')
+    cy.get('.tiptap').type('{rightArrow}{enter}')
     cy.get('button').contains('horizontal rule').click()
-    cy.get('.ProseMirror hr').should('exist')
+    cy.get('.tiptap hr').should('exist')
-    cy.get('.ProseMirror h1').should('exist')
+    cy.get('.tiptap h1').should('exist')
   })
 
   it('should add a br', () => {
-    cy.get('.ProseMirror').type('{rightArrow}')
+    cy.get('.tiptap').type('{rightArrow}')
     cy.get('button').contains('hard break').click()
-    cy.get('.ProseMirror h1 br').should('exist')
+    cy.get('.tiptap h1 br').should('exist')
   })
 
   it('should undo', () => {
-    cy.get('.ProseMirror').type('{selectall}{backspace}')
+    cy.get('.tiptap').type('{selectall}{backspace}')
     cy.get('button').contains('undo').click()
-    cy.get('.ProseMirror').should('contain', 'Hello world')
+    cy.get('.tiptap').should('contain', 'Hello world')
   })
 
   it('should redo', () => {
-    cy.get('.ProseMirror').type('{selectall}{backspace}')
+    cy.get('.tiptap').type('{selectall}{backspace}')
     cy.get('button').contains('undo').click()
-    cy.get('.ProseMirror').should('contain', 'Hello world')
+    cy.get('.tiptap').should('contain', 'Hello world')
     cy.get('button').contains('redo').click()
-    cy.get('.ProseMirror').should('not.contain', 'Hello world')
+    cy.get('.tiptap').should('not.contain', 'Hello world')
   })
 })

demos/src/Examples/Default/Svelte/styles.scss

@@ -1,5 +1,5 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/Default/Vue/index.spec.js

@@ -4,17 +4,17 @@ context('/src/Examples/Default/Vue/', () => {
   })
 
   beforeEach(() => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.setContent('<h1>Example Text</h1>')
-      cy.get('.ProseMirror').type('{selectall}')
+      cy.get('.tiptap').type('{selectall}')
     })
   })
 
   it('should apply the paragraph style when the keyboard shortcut is pressed', () => {
-    cy.get('.ProseMirror h1').should('exist')
+    cy.get('.tiptap h1').should('exist')
-    cy.get('.ProseMirror p').should('not.exist')
+    cy.get('.tiptap p').should('not.exist')
 
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .trigger('keydown', { modKey: true, altKey: true, key: '0' })
       .find('p')
       .should('contain', 'Example Text')
@@ -28,32 +28,32 @@ context('/src/Examples/Default/Vue/', () => {
 
   buttonMarks.forEach(m => {
     it(`should apply ${m.label} when the button is pressed`, () => {
-      cy.get('.ProseMirror').type('{selectall}Hello world')
+      cy.get('.tiptap').type('{selectall}Hello world')
       cy.get('button').contains('paragraph').click()
-      cy.get('.ProseMirror').type('{selectall}')
+      cy.get('.tiptap').type('{selectall}')
       cy.get('button').contains(m.label).click()
-      cy.get(`.ProseMirror ${m.tag}`).should('exist').should('have.text', 'Hello world')
+      cy.get(`.tiptap ${m.tag}`).should('exist').should('have.text', 'Hello world')
     })
   })
 
   it('should clear marks when the button is pressed', () => {
-    cy.get('.ProseMirror').type('{selectall}Hello world')
+    cy.get('.tiptap').type('{selectall}Hello world')
     cy.get('button').contains('paragraph').click()
-    cy.get('.ProseMirror').type('{selectall}')
+    cy.get('.tiptap').type('{selectall}')
     cy.get('button').contains('bold').click()
-    cy.get('.ProseMirror strong').should('exist').should('have.text', 'Hello world')
+    cy.get('.tiptap strong').should('exist').should('have.text', 'Hello world')
     cy.get('button').contains('clear marks').click()
-    cy.get('.ProseMirror strong').should('not.exist')
+    cy.get('.tiptap strong').should('not.exist')
   })
 
   it('should clear nodes when the button is pressed', () => {
-    cy.get('.ProseMirror').type('{selectall}Hello world')
+    cy.get('.tiptap').type('{selectall}Hello world')
     cy.get('button').contains('bullet list').click()
-    cy.get('.ProseMirror ul').should('exist').should('have.text', 'Hello world')
+    cy.get('.tiptap ul').should('exist').should('have.text', 'Hello world')
-    cy.get('.ProseMirror').type('{enter}A second item{enter}A third item{selectall}')
+    cy.get('.tiptap').type('{enter}A second item{enter}A third item{selectall}')
     cy.get('button').contains('clear nodes').click()
-    cy.get('.ProseMirror ul').should('not.exist')
+    cy.get('.tiptap ul').should('not.exist')
-    cy.get('.ProseMirror p').should('have.length', 3)
+    cy.get('.tiptap p').should('have.length', 3)
   })
 
   const buttonNodes = [
@@ -72,46 +72,46 @@ context('/src/Examples/Default/Vue/', () => {
   buttonNodes.forEach(n => {
     it(`should set ${n.label} when the button is pressed`, () => {
       cy.get('button').contains('paragraph').click()
-      cy.get('.ProseMirror').type('{selectall}Hello world{selectall}')
+      cy.get('.tiptap').type('{selectall}Hello world{selectall}')
 
       cy.get('button').contains(n.label).click()
-      cy.get(`.ProseMirror ${n.tag}`).should('exist').should('have.text', 'Hello world')
+      cy.get(`.tiptap ${n.tag}`).should('exist').should('have.text', 'Hello world')
       cy.get('button').contains(n.label).click()
-      cy.get(`.ProseMirror ${n.tag}`).should('not.exist')
+      cy.get(`.tiptap ${n.tag}`).should('not.exist')
     })
   })
 
   it('should add a hr when on the same line as a node', () => {
-    cy.get('.ProseMirror').type('{rightArrow}')
+    cy.get('.tiptap').type('{rightArrow}')
     cy.get('button').contains('horizontal rule').click()
-    cy.get('.ProseMirror hr').should('exist')
+    cy.get('.tiptap hr').should('exist')
-    cy.get('.ProseMirror h1').should('exist')
+    cy.get('.tiptap h1').should('exist')
   })
 
   it('should add a hr when on a new line', () => {
-    cy.get('.ProseMirror').type('{rightArrow}{enter}')
+    cy.get('.tiptap').type('{rightArrow}{enter}')
     cy.get('button').contains('horizontal rule').click()
-    cy.get('.ProseMirror hr').should('exist')
+    cy.get('.tiptap hr').should('exist')
-    cy.get('.ProseMirror h1').should('exist')
+    cy.get('.tiptap h1').should('exist')
   })
 
   it('should add a br', () => {
-    cy.get('.ProseMirror').type('{rightArrow}')
+    cy.get('.tiptap').type('{rightArrow}')
     cy.get('button').contains('hard break').click()
-    cy.get('.ProseMirror h1 br').should('exist')
+    cy.get('.tiptap h1 br').should('exist')
   })
 
   it('should undo', () => {
-    cy.get('.ProseMirror').type('{selectall}{backspace}')
+    cy.get('.tiptap').type('{selectall}{backspace}')
     cy.get('button').contains('undo').click()
-    cy.get('.ProseMirror').should('contain', 'Hello world')
+    cy.get('.tiptap').should('contain', 'Hello world')
   })
 
   it('should redo', () => {
-    cy.get('.ProseMirror').type('{selectall}{backspace}')
+    cy.get('.tiptap').type('{selectall}{backspace}')
     cy.get('button').contains('undo').click()
-    cy.get('.ProseMirror').should('contain', 'Hello world')
+    cy.get('.tiptap').should('contain', 'Hello world')
     cy.get('button').contains('redo').click()
-    cy.get('.ProseMirror').should('not.contain', 'Hello world')
+    cy.get('.tiptap').should('not.contain', 'Hello world')
   })
 })

demos/src/Examples/Default/Vue/index.vue

@@ -128,7 +128,7 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/Drawing/Vue/index.spec.js

@@ -4,18 +4,18 @@ context('/src/Examples/Drawing/Vue/', () => {
   })
 
   it('should have a working tiptap instance', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       // eslint-disable-next-line
       expect(editor).to.not.be.null
     })
   })
 
   it('should have a svg canvas', () => {
-    cy.get('.ProseMirror svg').should('exist')
+    cy.get('.tiptap svg').should('exist')
   })
 
   it('should draw on the svg canvas', () => {
-    cy.get('.ProseMirror svg').should('exist')
+    cy.get('.tiptap svg').should('exist')
 
     cy.wait(500)
 
@@ -23,13 +23,13 @@ context('/src/Examples/Drawing/Vue/', () => {
       const color = inputs[0].value
       const size = inputs[1].value
 
-      cy.get('.ProseMirror svg')
+      cy.get('.tiptap svg')
         .click()
         .trigger('mousedown', { pageX: 100, pageY: 100, which: 1 })
         .trigger('mousemove', { pageX: 200, pageY: 200, which: 1 })
         .trigger('mouseup')
 
-      cy.get('.ProseMirror svg path')
+      cy.get('.tiptap svg path')
         .should('exist')
         .should('have.attr', 'stroke-width', size)
         .should('have.attr', 'stroke', color.toUpperCase())

demos/src/Examples/Formatting/React/index.spec.js

@@ -4,7 +4,7 @@ context('/src/Examples/Formatting/React/', () => {
   })
 
   beforeEach(() => {
-    cy.get('.ProseMirror').type('{selectall}{backspace}')
+    cy.get('.tiptap').type('{selectall}{backspace}')
   })
 
   const marks = [
@@ -13,9 +13,9 @@ context('/src/Examples/Formatting/React/', () => {
 
   marks.forEach(m => {
     it(`sets ${m.label}`, () => {
-      cy.get('.ProseMirror').type('Hello world.{selectall}')
+      cy.get('.tiptap').type('Hello world.{selectall}')
       cy.get('button').contains(m.label).click()
-      cy.get('.ProseMirror mark').should('exist')
+      cy.get('.tiptap mark').should('exist')
     })
   })
 
@@ -28,10 +28,10 @@ context('/src/Examples/Formatting/React/', () => {
 
   alignments.forEach(a => {
     it(`sets ${a.label}`, () => {
-      cy.get('.ProseMirror').type('Hello world.{selectall}')
+      cy.get('.tiptap').type('Hello world.{selectall}')
       cy.get('button').contains(a.label).click()
       if (a.alignment !== 'left') {
-        cy.get('.ProseMirror p').should('have.css', 'text-align', a.alignment)
+        cy.get('.tiptap p').should('have.css', 'text-align', a.alignment)
       }
     })
   })

demos/src/Examples/Formatting/React/styles.scss

@@ -1,5 +1,5 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   margin-top: 1rem;
 
   > * + * {

demos/src/Examples/Formatting/Vue/index.spec.js

@@ -4,7 +4,7 @@ context('/src/Examples/Formatting/Vue/', () => {
   })
 
   beforeEach(() => {
-    cy.get('.ProseMirror').type('{selectall}{backspace}')
+    cy.get('.tiptap').type('{selectall}{backspace}')
   })
 
   const marks = [
@@ -13,9 +13,9 @@ context('/src/Examples/Formatting/Vue/', () => {
 
   marks.forEach(m => {
     it(`sets ${m.label}`, () => {
-      cy.get('.ProseMirror').type('Hello world.{selectall}')
+      cy.get('.tiptap').type('Hello world.{selectall}')
       cy.get('button').contains(m.label).click()
-      cy.get('.ProseMirror mark').should('exist')
+      cy.get('.tiptap mark').should('exist')
     })
   })
 
@@ -28,10 +28,10 @@ context('/src/Examples/Formatting/Vue/', () => {
 
   alignments.forEach(a => {
     it(`sets ${a.label}`, () => {
-      cy.get('.ProseMirror').type('Hello world.{selectall}')
+      cy.get('.tiptap').type('Hello world.{selectall}')
       cy.get('button').contains(a.label).click()
       if (a.alignment !== 'left') {
-        cy.get('.ProseMirror p').should('have.css', 'text-align', a.alignment)
+        cy.get('.tiptap p').should('have.css', 'text-align', a.alignment)
       }
     })
   })

demos/src/Examples/Formatting/Vue/index.vue

@@ -103,7 +103,7 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   margin-top: 1rem;
 
   > * + * {

demos/src/Examples/Images/React/index.spec.js

@@ -4,21 +4,21 @@ context('/src/Examples/Images/React/', () => {
   })
 
   it('finds image elements inside editor', () => {
-    cy.get('.ProseMirror img').should('have.length', 2)
+    cy.get('.tiptap img').should('have.length', 2)
   })
 
   it('allows removing images', () => {
-    cy.get('.ProseMirror img').should('have.length', 2)
+    cy.get('.tiptap img').should('have.length', 2)
-    cy.get('.ProseMirror img').first().trigger('mousedown', { which: 1 })
+    cy.get('.tiptap img').first().trigger('mousedown', { which: 1 })
-    cy.get('.ProseMirror').type('{backspace}')
+    cy.get('.tiptap').type('{backspace}')
-    cy.get('.ProseMirror img').should('have.length', 1)
+    cy.get('.tiptap img').should('have.length', 1)
   })
 
   it('allows images to be added via URL', () => {
     cy.window().then(win => {
       cy.stub(win, 'prompt').returns('https://unsplash.it/250/250')
       cy.get('button').contains('add image from URL').click({ force: false })
-      cy.get('.ProseMirror img').should('have.length', 3)
+      cy.get('.tiptap img').should('have.length', 3)
     })
   })
 })

demos/src/Examples/Images/React/styles.scss

@@ -1,5 +1,5 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/Images/Vue/index.spec.js

@@ -5,14 +5,14 @@ context('/src/Examples/Images/Vue/', () => {
 
   // TODO: Write tests
   it('finds image elements inside editor', () => {
-    cy.get('.ProseMirror img').should('have.length', 2)
+    cy.get('.tiptap img').should('have.length', 2)
   })
 
   it('allows removing images', () => {
-    cy.get('.ProseMirror img').should('have.length', 2)
+    cy.get('.tiptap img').should('have.length', 2)
-    cy.get('.ProseMirror img').first().trigger('mousedown', { which: 1 })
+    cy.get('.tiptap img').first().trigger('mousedown', { which: 1 })
-    cy.get('.ProseMirror').type('{backspace}')
+    cy.get('.tiptap').type('{backspace}')
-    cy.get('.ProseMirror img').should('have.length', 1)
+    cy.get('.tiptap img').should('have.length', 1)
   })
 
   it('allows images to be added via URL', () => {
@@ -22,7 +22,7 @@ context('/src/Examples/Images/Vue/', () => {
       cy.wait(1000)
       cy.get('button').contains('add image from URL').click({ force: false })
       cy.wait(1000)
-      cy.get('.ProseMirror img').should('have.length', 3)
+      cy.get('.tiptap img').should('have.length', 3)
     })
   })
 })

demos/src/Examples/Images/Vue/index.vue

@@ -59,7 +59,7 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/InteractivityComponent/React/index.spec.js

@@ -4,18 +4,18 @@ context('/src/Examples/InteractivityComponent/React/', () => {
   })
 
   it('should have a working tiptap instance', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       // eslint-disable-next-line
       expect(editor).to.not.be.null
     })
   })
 
   it('should render a custom node', () => {
-    cy.get('.ProseMirror .react-component').should('have.length', 1)
+    cy.get('.tiptap .react-component').should('have.length', 1)
   })
 
   it('should handle count click inside custom node', () => {
-    cy.get('.ProseMirror .react-component button')
+    cy.get('.tiptap .react-component button')
       .should('have.text', 'This button has been clicked 0 times.')
       .click()
       .should('have.text', 'This button has been clicked 1 times.')

demos/src/Examples/InteractivityComponent/React/styles.scss

@@ -1,5 +1,5 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/InteractivityComponent/Vue/index.spec.js

@@ -4,18 +4,18 @@ context('/src/Examples/InteractivityComponent/Vue/', () => {
   })
 
   it('should have a working tiptap instance', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       // eslint-disable-next-line
       expect(editor).to.not.be.null
     })
   })
 
   it('should render a custom node', () => {
-    cy.get('.ProseMirror .vue-component').should('have.length', 1)
+    cy.get('.tiptap .vue-component').should('have.length', 1)
   })
 
   it('should handle count click inside custom node', () => {
-    cy.get('.ProseMirror .vue-component button')
+    cy.get('.tiptap .vue-component button')
       .should('have.text', 'This button has been clicked 0 times.')
       .click()
       .should('have.text', 'This button has been clicked 1 times.')

demos/src/Examples/InteractivityComponent/Vue/index.vue

@@ -45,7 +45,7 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/InteractivityComponentContent/React/styles.scss

@@ -1,5 +1,5 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/InteractivityComponentContent/Vue/index.spec.js

@@ -4,19 +4,19 @@ context('/src/Examples/InteractivityComponentContent/Vue/', () => {
   })
 
   it('should have a working tiptap instance', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       // eslint-disable-next-line
       expect(editor).to.not.be.null
     })
   })
 
   it('should render a custom node', () => {
-    cy.get('.ProseMirror .vue-component')
+    cy.get('.tiptap .vue-component')
       .should('have.length', 1)
   })
 
   it('should allow text editing inside component', () => {
-    cy.get('.ProseMirror .vue-component .content')
+    cy.get('.tiptap .vue-component .content')
       .invoke('attr', 'contentEditable', true)
       .invoke('text', '')
       .type('Hello World!')
@@ -24,24 +24,24 @@ context('/src/Examples/InteractivityComponentContent/Vue/', () => {
   })
 
   it('should allow text editing inside component with markdown text', () => {
-    cy.get('.ProseMirror .vue-component .content')
+    cy.get('.tiptap .vue-component .content')
       .invoke('attr', 'contentEditable', true)
       .invoke('text', '')
       .type('Hello World! This is **bold**.')
       .should('have.text', 'Hello World! This is bold.')
 
-    cy.get('.ProseMirror .vue-component .content strong')
+    cy.get('.tiptap .vue-component .content strong')
       .should('exist')
   })
 
   it('should remove node via selectall', () => {
-    cy.get('.ProseMirror .vue-component')
+    cy.get('.tiptap .vue-component')
       .should('have.length', 1)
 
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('{selectall}{backspace}')
 
-    cy.get('.ProseMirror .vue-component')
+    cy.get('.tiptap .vue-component')
       .should('have.length', 0)
   })
 })

demos/src/Examples/InteractivityComponentContent/Vue/index.vue

@@ -47,7 +47,7 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

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

@@ -4,97 +4,97 @@ context('/src/Examples/MarkdownShortcuts/React/', () => {
   })
 
   beforeEach(() => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.clearContent()
     })
   })
 
   it('should make a h1', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('# Headline')
       .find('h1')
       .should('contain', 'Headline')
   })
 
   it('should make a h2', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('## Headline')
       .find('h2')
       .should('contain', 'Headline')
   })
 
   it('should make a h3', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('### Headline')
       .find('h3')
       .should('contain', 'Headline')
   })
 
   it('should make a h4', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('#### Headline')
       .find('h4')
       .should('contain', 'Headline')
   })
 
   it('should make a h5', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('##### Headline')
       .find('h5')
       .should('contain', 'Headline')
   })
 
   it('should make a h6', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('###### Headline')
       .find('h6')
       .should('contain', 'Headline')
   })
 
   it('should create inline code', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('`$foobar`')
       .find('code')
       .should('contain', '$foobar')
   })
 
   it('should create a code block without language', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('``` {enter}const foo = bar{enter}```')
       .find('pre')
       .should('contain', 'const foo = bar')
   })
 
   it('should create a bullet list from asteriks', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('* foobar')
       .find('ul')
       .should('contain', 'foobar')
   })
 
   it('should create a bullet list from dashes', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('- foobar')
       .find('ul')
       .should('contain', 'foobar')
   })
 
   it('should create a bullet list from pluses', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('+ foobar')
       .find('ul')
       .should('contain', 'foobar')
   })
 
   it('should create a ordered list', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('1. foobar')
       .find('ol')
       .should('contain', 'foobar')
   })
 
   it('should create a blockquote', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('> foobar')
       .find('blockquote')
       .should('contain', 'foobar')

demos/src/Examples/MarkdownShortcuts/React/styles.scss

@@ -1,4 +1,4 @@
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

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

@@ -4,97 +4,97 @@ context('/src/Examples/MarkdownShortcuts/Vue/', () => {
   })
 
   beforeEach(() => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.clearContent()
     })
   })
 
   it('should make a h1', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('# Headline')
       .find('h1')
       .should('contain', 'Headline')
   })
 
   it('should make a h2', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('## Headline')
       .find('h2')
       .should('contain', 'Headline')
   })
 
   it('should make a h3', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('### Headline')
       .find('h3')
       .should('contain', 'Headline')
   })
 
   it('should make a h4', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('#### Headline')
       .find('h4')
       .should('contain', 'Headline')
   })
 
   it('should make a h5', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('##### Headline')
       .find('h5')
       .should('contain', 'Headline')
   })
 
   it('should make a h6', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('###### Headline')
       .find('h6')
       .should('contain', 'Headline')
   })
 
   it('should create inline code', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('`$foobar`')
       .find('code')
       .should('contain', '$foobar')
   })
 
   it('should create a code block without language', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('``` {enter}const foo = bar{enter}```')
       .find('pre')
       .should('contain', 'const foo = bar')
   })
 
   it('should create a bullet list from asteriks', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('* foobar')
       .find('ul')
       .should('contain', 'foobar')
   })
 
   it('should create a bullet list from dashes', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('- foobar')
       .find('ul')
       .should('contain', 'foobar')
   })
 
   it('should create a bullet list from pluses', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('+ foobar')
       .find('ul')
       .should('contain', 'foobar')
   })
 
   it('should create a ordered list', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('1. foobar')
       .find('ol')
       .should('contain', 'foobar')
   })
 
   it('should create a blockquote', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('> foobar')
       .find('blockquote')
       .should('contain', 'foobar')

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

@@ -54,7 +54,7 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/Menus/React/index.spec.js

@@ -4,7 +4,7 @@ context('/src/Examples/Menus/React/', () => {
   })
 
   beforeEach(() => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.chain().focus().clearContent().run()
     })
   })
@@ -15,7 +15,7 @@ context('/src/Examples/Menus/React/', () => {
   })
 
   it('should show menu when text is selected', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('Test')
       .type('{selectall}')
 
@@ -40,7 +40,7 @@ context('/src/Examples/Menus/React/', () => {
 
   marks.forEach(mark => {
     it(`should apply ${mark.button} correctly`, () => {
-      cy.get('.ProseMirror')
+      cy.get('.tiptap')
         .type('Test')
         .type('{selectall}')
 
@@ -49,7 +49,7 @@ context('/src/Examples/Menus/React/', () => {
         .contains(mark.button)
         .click()
 
-      cy.get('.ProseMirror')
+      cy.get('.tiptap')
         .find(`p ${mark.tag}`)
     })
   })

demos/src/Examples/Menus/React/styles.scss

@@ -1,4 +1,4 @@
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/Menus/Vue/index.spec.js

@@ -4,7 +4,7 @@ context('/src/Examples/Menus/Vue/', () => {
   })
 
   beforeEach(() => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.chain().focus().clearContent().run()
     })
   })
@@ -15,7 +15,7 @@ context('/src/Examples/Menus/Vue/', () => {
   })
 
   it('should show menu when text is selected', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('Test')
       .type('{selectall}')
 
@@ -40,7 +40,7 @@ context('/src/Examples/Menus/Vue/', () => {
 
   marks.forEach(mark => {
     it(`should apply ${mark.button} correctly`, () => {
-      cy.get('.ProseMirror')
+      cy.get('.tiptap')
         .type('Test')
         .type('{selectall}')
 
@@ -49,7 +49,7 @@ context('/src/Examples/Menus/Vue/', () => {
         .contains(mark.button)
         .click()
 
-      cy.get('.ProseMirror')
+      cy.get('.tiptap')
         .find(`p ${mark.tag}`)
     })
   })

demos/src/Examples/Menus/Vue/index.vue

@@ -82,7 +82,7 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/Minimal/React/index.spec.js

@@ -4,20 +4,20 @@ context('/src/Examples/Minimal/React/', () => {
   })
 
   beforeEach(() => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.clearContent()
     })
   })
 
   it('text should be wrapped in a paragraph by default', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('Example Text')
       .find('p')
       .should('contain', 'Example Text')
   })
 
   it('should parse paragraphs correctly', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.setContent('<p>Example Text</p>')
       expect(editor.getHTML()).to.eq('<p>Example Text</p>')
 
@@ -27,19 +27,19 @@ context('/src/Examples/Minimal/React/', () => {
   })
 
   it('enter should make a new paragraph', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('First Paragraph{enter}Second Paragraph')
       .find('p')
       .should('have.length', 2)
   })
 
   it('backspace should remove the last paragraph', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('{enter}')
       .find('p')
       .should('have.length', 2)
 
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('{backspace}')
       .find('p')
       .should('have.length', 1)

demos/src/Examples/Minimal/React/styles.scss

@@ -1,5 +1,5 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/Minimal/Vue/index.spec.js

@@ -4,20 +4,20 @@ context('/src/Examples/Minimal/Vue/', () => {
   })
 
   beforeEach(() => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.clearContent()
     })
   })
 
   it('text should be wrapped in a paragraph by default', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('Example Text')
       .find('p')
       .should('contain', 'Example Text')
   })
 
   it('should parse paragraphs correctly', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.setContent('<p>Example Text</p>')
       expect(editor.getHTML()).to.eq('<p>Example Text</p>')
 
@@ -27,19 +27,19 @@ context('/src/Examples/Minimal/Vue/', () => {
   })
 
   it('enter should make a new paragraph', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('First Paragraph{enter}Second Paragraph')
       .find('p')
       .should('have.length', 2)
   })
 
   it('backspace should remove the last paragraph', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('{enter}')
       .find('p')
       .should('have.length', 2)
 
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('{backspace}')
       .find('p')
       .should('have.length', 1)

demos/src/Examples/Minimal/Vue/index.vue

@@ -45,7 +45,7 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/Savvy/React/index.spec.js

@@ -4,7 +4,7 @@ context('/src/Examples/Savvy/React/', () => {
   })
 
   beforeEach(() => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.clearContent()
     })
   })
@@ -24,11 +24,11 @@ context('/src/Examples/Savvy/React/', () => {
 
   tests.forEach(test => {
     it(`should parse ${test[0]} correctly`, () => {
-      cy.get('.ProseMirror').type(test[0]).should('contain', test[1])
+      cy.get('.tiptap').type(test[0]).should('contain', test[1])
     })
   })
 
   it('should parse hex colors correctly', () => {
-    cy.get('.ProseMirror').type('#FD9170').find('.color')
+    cy.get('.tiptap').type('#FD9170').find('.color')
   })
 })

demos/src/Examples/Savvy/React/styles.scss

@@ -1,5 +1,5 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/Savvy/Vue/index.spec.js

@@ -4,7 +4,7 @@ context('/src/Examples/Savvy/Vue/', () => {
   })
 
   beforeEach(() => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.clearContent()
     })
   })
@@ -24,14 +24,14 @@ context('/src/Examples/Savvy/Vue/', () => {
 
   tests.forEach(test => {
     it(`should parse ${test[0]} correctly`, () => {
-      cy.get('.ProseMirror')
+      cy.get('.tiptap')
         .type(test[0])
         .should('contain', test[1])
     })
   })
 
   it('should parse hex colors correctly', () => {
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .type('#FD9170')
       .find('.color')
   })

demos/src/Examples/Savvy/Vue/index.vue

@@ -63,7 +63,7 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Examples/Tables/React/index.spec.js

@@ -4,119 +4,119 @@ context('/src/Examples/Tables/React/', () => {
   })
 
   beforeEach(() => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.clearContent()
       cy.get('button').contains('insertTable').click()
     })
   })
 
   it('adds a table with three columns and three rows', () => {
-    cy.get('.ProseMirror table')
+    cy.get('.tiptap table')
       .should('exist')
 
-    cy.get('.ProseMirror table tr')
+    cy.get('.tiptap table tr')
       .should('exist')
       .should('have.length', 3)
 
-    cy.get('.ProseMirror table th')
+    cy.get('.tiptap table th')
       .should('exist')
       .should('have.length', 3)
 
-    cy.get('.ProseMirror table td')
+    cy.get('.tiptap table td')
       .should('exist')
       .should('have.length', 6)
   })
 
   it('adds & delete columns', () => {
     cy.get('button').contains('addColumnBefore').click()
-    cy.get('.ProseMirror table th')
+    cy.get('.tiptap table th')
       .should('have.length', 4)
 
     cy.get('button').contains('addColumnAfter').click()
-    cy.get('.ProseMirror table th')
+    cy.get('.tiptap table th')
       .should('have.length', 5)
 
     cy.get('button').contains('deleteColumn')
       .click()
       .click()
-    cy.get('.ProseMirror table th')
+    cy.get('.tiptap table th')
       .should('have.length', 3)
   })
 
   it('adds & delete rows', () => {
     cy.get('button').contains('addRowBefore').click()
-    cy.get('.ProseMirror table tr')
+    cy.get('.tiptap table tr')
       .should('have.length', 4)
 
     cy.get('button').contains('addRowAfter').click()
-    cy.get('.ProseMirror table tr')
+    cy.get('.tiptap table tr')
       .should('have.length', 5)
 
     cy.get('button').contains('deleteRow')
       .click()
       .click()
-    cy.get('.ProseMirror table tr')
+    cy.get('.tiptap table tr')
       .should('have.length', 3)
   })
 
   it('should delete table', () => {
     cy.get('button').contains('deleteTable').click()
-    cy.get('.ProseMirror table').should('not.exist')
+    cy.get('.tiptap table').should('not.exist')
   })
 
   it('should merge cells', () => {
-    cy.get('.ProseMirror').type('{shift}{rightArrow}')
+    cy.get('.tiptap').type('{shift}{rightArrow}')
     cy.get('button').contains('mergeCells').click()
-    cy.get('.ProseMirror table th').should('have.length', 2)
+    cy.get('.tiptap table th').should('have.length', 2)
   })
 
   it('should split cells', () => {
-    cy.get('.ProseMirror').type('{shift}{rightArrow}')
+    cy.get('.tiptap').type('{shift}{rightArrow}')
     cy.get('button').contains('mergeCells').click()
-    cy.get('.ProseMirror table th').should('have.length', 2)
+    cy.get('.tiptap table th').should('have.length', 2)
     cy.get('button').contains('splitCell').click()
-    cy.get('.ProseMirror table th').should('have.length', 3)
+    cy.get('.tiptap table th').should('have.length', 3)
   })
 
   it('should toggle header columns', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.toggleHeaderColumn()
-      cy.get('.ProseMirror table th').should('have.length', 5)
+      cy.get('.tiptap table th').should('have.length', 5)
     })
   })
 
   it('should toggle header row', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.toggleHeaderRow()
-      cy.get('.ProseMirror table th').should('have.length', 0)
+      cy.get('.tiptap table th').should('have.length', 0)
     })
   })
 
   it('should merge split', () => {
-    cy.get('.ProseMirror').type('{shift}{rightArrow}')
+    cy.get('.tiptap').type('{shift}{rightArrow}')
     cy.get('button').contains('mergeCells').click()
-    cy.get('.ProseMirror th[colspan="2"]')
+    cy.get('.tiptap th[colspan="2"]')
       .should('exist')
     cy.get('button')
       .contains('mergeOrSplit')
       .click()
-    cy.get('.ProseMirror th[colspan="2"]')
+    cy.get('.tiptap th[colspan="2"]')
       .should('not.exist')
   })
 
   it('should set cell attribute', () => {
-    cy.get('.ProseMirror').type('{downArrow}')
+    cy.get('.tiptap').type('{downArrow}')
     cy.get('button').contains('setCellAttribute').click()
-    cy.get('.ProseMirror table td[style]').should('have.attr', 'style', 'background-color: #FAF594')
+    cy.get('.tiptap table td[style]').should('have.attr', 'style', 'background-color: #FAF594')
   })
 
   it('should move focus to next or prev cell', () => {
-    cy.get('.ProseMirror').type('Column 1')
+    cy.get('.tiptap').type('Column 1')
     cy.get('button').contains('goToNextCell').click()
-    cy.get('.ProseMirror').type('Column 2')
+    cy.get('.tiptap').type('Column 2')
     cy.get('button').contains('goToPreviousCell').click()
 
-    cy.get('.ProseMirror th').then(elements => {
+    cy.get('.tiptap th').then(elements => {
       expect(elements[0].innerText).to.equal('Column 1')
       expect(elements[1].innerText).to.equal('Column 2')
     })

demos/src/Examples/Tables/React/styles.scss

@@ -1,5 +1,5 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   margin: 1rem 0;
 
   > * + * {
@@ -58,7 +58,7 @@
 }
 
 /* Table-specific styling */
-.ProseMirror {
+.tiptap {
   table {
     border-collapse: collapse;
     table-layout: fixed;

demos/src/Examples/Tables/Vue/index.spec.js

@@ -4,119 +4,119 @@ context('/src/Examples/Tables/Vue/', () => {
   })
 
   beforeEach(() => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.clearContent()
       cy.get('button').contains('insertTable').click()
     })
   })
 
   it('adds a table with three columns and three rows', () => {
-    cy.get('.ProseMirror table')
+    cy.get('.tiptap table')
       .should('exist')
 
-    cy.get('.ProseMirror table tr')
+    cy.get('.tiptap table tr')
       .should('exist')
       .should('have.length', 3)
 
-    cy.get('.ProseMirror table th')
+    cy.get('.tiptap table th')
       .should('exist')
       .should('have.length', 3)
 
-    cy.get('.ProseMirror table td')
+    cy.get('.tiptap table td')
       .should('exist')
       .should('have.length', 6)
   })
 
   it('adds & delete columns', () => {
     cy.get('button').contains('addColumnBefore').click()
-    cy.get('.ProseMirror table th')
+    cy.get('.tiptap table th')
       .should('have.length', 4)
 
     cy.get('button').contains('addColumnAfter').click()
-    cy.get('.ProseMirror table th')
+    cy.get('.tiptap table th')
       .should('have.length', 5)
 
     cy.get('button').contains('deleteColumn')
       .click()
       .click()
-    cy.get('.ProseMirror table th')
+    cy.get('.tiptap table th')
       .should('have.length', 3)
   })
 
   it('adds & delete rows', () => {
     cy.get('button').contains('addRowBefore').click()
-    cy.get('.ProseMirror table tr')
+    cy.get('.tiptap table tr')
       .should('have.length', 4)
 
     cy.get('button').contains('addRowAfter').click()
-    cy.get('.ProseMirror table tr')
+    cy.get('.tiptap table tr')
       .should('have.length', 5)
 
     cy.get('button').contains('deleteRow')
       .click()
       .click()
-    cy.get('.ProseMirror table tr')
+    cy.get('.tiptap table tr')
       .should('have.length', 3)
   })
 
   it('should delete table', () => {
     cy.get('button').contains('deleteTable').click()
-    cy.get('.ProseMirror table').should('not.exist')
+    cy.get('.tiptap table').should('not.exist')
   })
 
   it('should merge cells', () => {
-    cy.get('.ProseMirror').type('{shift}{rightArrow}')
+    cy.get('.tiptap').type('{shift}{rightArrow}')
     cy.get('button').contains('mergeCells').click()
-    cy.get('.ProseMirror table th').should('have.length', 2)
+    cy.get('.tiptap table th').should('have.length', 2)
   })
 
   it('should split cells', () => {
-    cy.get('.ProseMirror').type('{shift}{rightArrow}')
+    cy.get('.tiptap').type('{shift}{rightArrow}')
     cy.get('button').contains('mergeCells').click()
-    cy.get('.ProseMirror table th').should('have.length', 2)
+    cy.get('.tiptap table th').should('have.length', 2)
     cy.get('button').contains('splitCell').click()
-    cy.get('.ProseMirror table th').should('have.length', 3)
+    cy.get('.tiptap table th').should('have.length', 3)
   })
 
   it('should toggle header columns', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.toggleHeaderColumn()
-      cy.get('.ProseMirror table th').should('have.length', 5)
+      cy.get('.tiptap table th').should('have.length', 5)
     })
   })
 
   it('should toggle header row', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.toggleHeaderRow()
-      cy.get('.ProseMirror table th').should('have.length', 0)
+      cy.get('.tiptap table th').should('have.length', 0)
     })
   })
 
   it('should merge split', () => {
-    cy.get('.ProseMirror').type('{shift}{rightArrow}')
+    cy.get('.tiptap').type('{shift}{rightArrow}')
     cy.get('button').contains('mergeCells').click()
-    cy.get('.ProseMirror th[colspan="2"]')
+    cy.get('.tiptap th[colspan="2"]')
       .should('exist')
     cy.get('button')
       .contains('mergeOrSplit')
       .click()
-    cy.get('.ProseMirror th[colspan="2"]')
+    cy.get('.tiptap th[colspan="2"]')
       .should('not.exist')
   })
 
   it('should set cell attribute', () => {
-    cy.get('.ProseMirror').type('{downArrow}')
+    cy.get('.tiptap').type('{downArrow}')
     cy.get('button').contains('setCellAttribute').click()
-    cy.get('.ProseMirror table td[style]').should('have.attr', 'style', 'background-color: #FAF594')
+    cy.get('.tiptap table td[style]').should('have.attr', 'style', 'background-color: #FAF594')
   })
 
   it('should move focus to next or prev cell', () => {
-    cy.get('.ProseMirror').type('Column 1')
+    cy.get('.tiptap').type('Column 1')
     cy.get('button').contains('goToNextCell').click()
-    cy.get('.ProseMirror').type('Column 2')
+    cy.get('.tiptap').type('Column 2')
     cy.get('button').contains('goToPreviousCell').click()
 
-    cy.get('.ProseMirror th').then(elements => {
+    cy.get('.tiptap th').then(elements => {
       expect(elements[0].innerText).to.equal('Column 1')
       expect(elements[1].innerText).to.equal('Column 2')
     })

demos/src/Examples/Tables/Vue/index.vue

@@ -161,7 +161,7 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   margin: 1rem 0;
 
   > * + * {
@@ -220,7 +220,7 @@ export default {
 }
 
 /* Table-specific styling */
-.ProseMirror {
+.tiptap {
   table {
     border-collapse: collapse;
     table-layout: fixed;

demos/src/Examples/Tasks/React/index.spec.js

@@ -4,29 +4,29 @@ context('/src/Examples/Tasks/React/', () => {
   })
 
   beforeEach(() => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.clearContent()
     })
   })
 
   it('should always use task items', () => {
-    cy.get('.ProseMirror input[type="checkbox"]').should('have.length', 1)
+    cy.get('.tiptap input[type="checkbox"]').should('have.length', 1)
   })
 
   it('should create new tasks', () => {
-    cy.get('.ProseMirror').type('Cook food{enter}Eat food{enter}Clean dishes')
+    cy.get('.tiptap').type('Cook food{enter}Eat food{enter}Clean dishes')
-    cy.get('.ProseMirror input[type="checkbox"]').should('have.length', 3)
+    cy.get('.tiptap input[type="checkbox"]').should('have.length', 3)
   })
 
   it('should check and uncheck tasks on click', () => {
-    cy.get('.ProseMirror').type('Cook food{enter}Eat food{enter}Clean dishes')
+    cy.get('.tiptap').type('Cook food{enter}Eat food{enter}Clean dishes')
-    cy.get('.ProseMirror').find('input[type="checkbox"]').eq(0).click({ force: true })
+    cy.get('.tiptap').find('input[type="checkbox"]').eq(0).click({ force: true })
-    cy.get('.ProseMirror').find('input[type="checkbox"]:checked').should('have.length', 1)
+    cy.get('.tiptap').find('input[type="checkbox"]:checked').should('have.length', 1)
-    cy.get('.ProseMirror').find('input[type="checkbox"]').eq(1).click({ force: true })
+    cy.get('.tiptap').find('input[type="checkbox"]').eq(1).click({ force: true })
-    cy.get('.ProseMirror').find('input[type="checkbox"]:checked').should('have.length', 2)
+    cy.get('.tiptap').find('input[type="checkbox"]:checked').should('have.length', 2)
-    cy.get('.ProseMirror').find('input[type="checkbox"]').eq(0).click({ force: true })
+    cy.get('.tiptap').find('input[type="checkbox"]').eq(0).click({ force: true })
-    cy.get('.ProseMirror').find('input[type="checkbox"]:checked').should('have.length', 1)
+    cy.get('.tiptap').find('input[type="checkbox"]:checked').should('have.length', 1)
-    cy.get('.ProseMirror').find('input[type="checkbox"]').eq(1).click({ force: true })
+    cy.get('.tiptap').find('input[type="checkbox"]').eq(1).click({ force: true })
-    cy.get('.ProseMirror').find('input[type="checkbox"]:checked').should('have.length', 0)
+    cy.get('.tiptap').find('input[type="checkbox"]:checked').should('have.length', 0)
   })
 })

demos/src/Examples/Tasks/Vue/index.spec.js

@@ -4,29 +4,29 @@ context('/src/Examples/Tasks/Vue/', () => {
   })
 
   beforeEach(() => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.clearContent()
     })
   })
 
   it('should always use task items', () => {
-    cy.get('.ProseMirror input[type="checkbox"]').should('have.length', 1)
+    cy.get('.tiptap input[type="checkbox"]').should('have.length', 1)
   })
 
   it('should create new tasks', () => {
-    cy.get('.ProseMirror').type('Cook food{enter}Eat food{enter}Clean dishes')
+    cy.get('.tiptap').type('Cook food{enter}Eat food{enter}Clean dishes')
-    cy.get('.ProseMirror input[type="checkbox"]').should('have.length', 3)
+    cy.get('.tiptap input[type="checkbox"]').should('have.length', 3)
   })
 
   it('should check and uncheck tasks on click', () => {
-    cy.get('.ProseMirror').type('Cook food{enter}Eat food{enter}Clean dishes')
+    cy.get('.tiptap').type('Cook food{enter}Eat food{enter}Clean dishes')
-    cy.get('.ProseMirror').find('input[type="checkbox"]').eq(0).click({ force: true })
+    cy.get('.tiptap').find('input[type="checkbox"]').eq(0).click({ force: true })
-    cy.get('.ProseMirror').find('input[type="checkbox"]:checked').should('have.length', 1)
+    cy.get('.tiptap').find('input[type="checkbox"]:checked').should('have.length', 1)
-    cy.get('.ProseMirror').find('input[type="checkbox"]').eq(1).click({ force: true })
+    cy.get('.tiptap').find('input[type="checkbox"]').eq(1).click({ force: true })
-    cy.get('.ProseMirror').find('input[type="checkbox"]:checked').should('have.length', 2)
+    cy.get('.tiptap').find('input[type="checkbox"]:checked').should('have.length', 2)
-    cy.get('.ProseMirror').find('input[type="checkbox"]').eq(0).click({ force: true })
+    cy.get('.tiptap').find('input[type="checkbox"]').eq(0).click({ force: true })
-    cy.get('.ProseMirror').find('input[type="checkbox"]:checked').should('have.length', 1)
+    cy.get('.tiptap').find('input[type="checkbox"]:checked').should('have.length', 1)
-    cy.get('.ProseMirror').find('input[type="checkbox"]').eq(1).click({ force: true })
+    cy.get('.tiptap').find('input[type="checkbox"]').eq(1).click({ force: true })
-    cy.get('.ProseMirror').find('input[type="checkbox"]:checked').should('have.length', 0)
+    cy.get('.tiptap').find('input[type="checkbox"]:checked').should('have.length', 0)
   })
 })

demos/src/Experiments/All/Vue/index.vue

@@ -263,7 +263,7 @@ export default {
 </script>
 
 <style lang="scss">
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }
@@ -445,7 +445,7 @@ export default {
   }
 }
 
-.ProseMirror p.is-empty::before {
+.tiptap p.is-empty::before {
   content: attr(data-placeholder);
   float: left;
   color: #adb5bd;

demos/src/Experiments/CollaborationAnnotation/Vue/index.spec.js

@@ -4,20 +4,20 @@ context('/src/Experiments/CollaborationAnnotation/Vue/', () => {
   })
 
   /* it('renders two editors', () => {
-    cy.get('.ProseMirror').should('have.length', 2)
+    cy.get('.tiptap').should('have.length', 2)
   }) */
 
   // TODO: Fix those tests in the future
-  // Current problem is that ProseMirror seems to mismatch a transformation somewhere inside those tests
+  // Current problem is that tiptap seems to mismatch a transformation somewhere inside those tests
   // So to fix this, we should look for a different way to simulate the annotation process
 
   /* it('sets an annotation in editor 1 and shows annotations in both editors', () => {
     cy.window().then(win => {
       cy.stub(win, 'prompt', () => 'This is a test comment')
-      cy.get('.editor-1 .ProseMirror').type('{selectall}{backspace}Hello world{selectall}')
+      cy.get('.editor-1 .tiptap').type('{selectall}{backspace}Hello world{selectall}')
       cy.get('button').contains('comment').eq(0).click()
-      cy.get('.editor-1 .ProseMirror').type('{end}')
+      cy.get('.editor-1 .tiptap').type('{end}')
-      cy.get('.ProseMirror .annotation').should('have.length', 2)
+      cy.get('.tiptap .annotation').should('have.length', 2)
       cy.get('.comment').should('exist').contains('This is a test comment')
     })
   }) */
@@ -41,10 +41,10 @@ context('/src/Experiments/CollaborationAnnotation/Vue/', () => {
         }
       })
 
-      cy.get('.editor-1 .ProseMirror').type('{selectall}{backspace}Hello world{selectall}')
+      cy.get('.editor-1 .tiptap').type('{selectall}{backspace}Hello world{selectall}')
       cy.get('button').contains('comment').eq(0).click()
       cy.wait(1000)
-      cy.get('.editor-1 .ProseMirror').find('.annotation').click()
+      cy.get('.editor-1 .tiptap').find('.annotation').click()
       cy.get('.comment').should('exist').contains('This is a test comment')
       cy.get('button').contains('update').click()
       cy.wait(1000)
@@ -56,13 +56,13 @@ context('/src/Experiments/CollaborationAnnotation/Vue/', () => {
     cy.window().then(win => {
       cy.stub(win, 'prompt', () => 'This is a test comment')
 
-      cy.get('.editor-1 .ProseMirror').type('{selectall}{backspace}Hello world{selectall}')
+      cy.get('.editor-1 .tiptap').type('{selectall}{backspace}Hello world{selectall}')
       cy.get('button').contains('comment').eq(0).click()
       cy.wait(1000)
-      cy.get('.editor-1 .ProseMirror').find('.annotation').click()
+      cy.get('.editor-1 .tiptap').find('.annotation').click()
       cy.get('.comment').should('exist').contains('This is a test comment')
       cy.get('button').contains('remove').click()
-      cy.get('.ProseMirror .annotation').should('not.exist')
+      cy.get('.tiptap .annotation').should('not.exist')
       cy.wait(1000)
       cy.get('.comment').should('not.exist')
     })

demos/src/Experiments/CollaborationAnnotation/Vue/index.vue

@@ -137,7 +137,7 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Experiments/Commands/Vue/index.spec.js

@@ -4,7 +4,7 @@ context('/src/Experiments/Commands/Vue/', () => {
   })
 
   beforeEach(() => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.clearContent()
     })
   })
@@ -18,27 +18,27 @@ context('/src/Experiments/Commands/Vue/', () => {
     ]
 
     items.forEach((item, i) => {
-      cy.get('.ProseMirror').type('{selectall}{backspace}/')
+      cy.get('.tiptap').type('{selectall}{backspace}/')
       cy.get('.tippy-content .items').should('exist')
       cy.get('.tippy-content .items .item').eq(i).click()
-      cy.get('.ProseMirror').type(`I am a ${item.tag}`)
+      cy.get('.tiptap').type(`I am a ${item.tag}`)
-      cy.get(`.ProseMirror ${item.tag}`).should('exist').should('have.text', `I am a ${item.tag}`)
+      cy.get(`.tiptap ${item.tag}`).should('exist').should('have.text', `I am a ${item.tag}`)
     })
   })
 
   it('should close the popup without any command via esc', () => {
-    cy.get('.ProseMirror').type('{selectall}{backspace}/')
+    cy.get('.tiptap').type('{selectall}{backspace}/')
     cy.get('.tippy-content .items').should('exist')
-    cy.get('.ProseMirror').type('{esc}')
+    cy.get('.tiptap').type('{esc}')
     cy.get('.tippy-content .items').should('not.exist')
   })
 
   it('should open the popup when the cursor is after a slash', () => {
-    cy.get('.ProseMirror').type('{selectall}{backspace}/')
+    cy.get('.tiptap').type('{selectall}{backspace}/')
     cy.get('.tippy-content .items').should('exist')
-    cy.get('.ProseMirror').type('{leftArrow}')
+    cy.get('.tiptap').type('{leftArrow}')
     cy.get('.tippy-content .items').should('not.exist')
-    cy.get('.ProseMirror').type('{rightArrow}')
+    cy.get('.tiptap').type('{rightArrow}')
     cy.get('.tippy-content .items').should('exist')
   })
 })

demos/src/Experiments/Commands/Vue/index.vue

@@ -45,7 +45,7 @@ export default {
 </script>
 
 <style lang="scss">
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Experiments/DestroyingEditor/Vue/index.vue

@@ -41,7 +41,7 @@ export default {
 </script>
 
 <style lang="scss">
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Experiments/Embeds/Vue/index.vue

@@ -56,7 +56,7 @@ export default {
 
 <style lang="scss">
 @use "sass:math";
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Experiments/ExtensionStorage/React/styles.scss

@@ -1,5 +1,5 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Experiments/ExtensionStorage/Vue/index.vue

@@ -49,7 +49,7 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Experiments/Figure/Vue/index.vue

@@ -85,7 +85,7 @@ export default {
 </script>
 
 <style lang="scss">
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Experiments/GenericFigure/Vue/index.vue

@@ -244,7 +244,7 @@ export default {
 </script>
 
 <style lang="scss">
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Experiments/GlobalDragHandle/Vue/index.vue

@@ -71,7 +71,7 @@ export default {
 </style>
 
 <style lang="scss">
-.ProseMirror {
+.tiptap {
   padding: 0 1rem;
 
   > * + * {

demos/src/Experiments/IsolatingClear/React/index.spec.js

@@ -4,17 +4,17 @@ context('/src/Examples/Default/React/', () => {
   })
 
   beforeEach(() => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.setContent('<h1>Example Text</h1>')
-      cy.get('.ProseMirror').type('{selectall}')
+      cy.get('.tiptap').type('{selectall}')
     })
   })
 
   it('should apply the paragraph style when the keyboard shortcut is pressed', () => {
-    cy.get('.ProseMirror h1').should('exist')
+    cy.get('.tiptap h1').should('exist')
-    cy.get('.ProseMirror p').should('not.exist')
+    cy.get('.tiptap p').should('not.exist')
 
-    cy.get('.ProseMirror')
+    cy.get('.tiptap')
       .trigger('keydown', { modKey: true, altKey: true, key: '0' })
       .find('p')
       .should('contain', 'Example Text')
@@ -28,58 +28,58 @@ context('/src/Examples/Default/React/', () => {
 
   buttonMarks.forEach(m => {
     it(`should disable ${m.label} when the code tag is enabled for cursor`, () => {
-      cy.get('.ProseMirror').type('{selectall}Hello world')
+      cy.get('.tiptap').type('{selectall}Hello world')
       cy.get('button').contains('code').click()
       cy.get('button').contains(m.label).should('be.disabled')
     })
 
     it(`should enable ${m.label} when the code tag is disabled for cursor`, () => {
-      cy.get('.ProseMirror').type('{selectall}Hello world')
+      cy.get('.tiptap').type('{selectall}Hello world')
       cy.get('button').contains('code').click()
       cy.get('button').contains('code').click()
       cy.get('button').contains(m.label).should('not.be.disabled')
     })
 
     it(`should disable ${m.label} when the code tag is enabled for selection`, () => {
-      cy.get('.ProseMirror').type('{selectall}Hello world{selectall}')
+      cy.get('.tiptap').type('{selectall}Hello world{selectall}')
       cy.get('button').contains('code').click()
       cy.get('button').contains(m.label).should('be.disabled')
     })
 
     it(`should enable ${m.label} when the code tag is disabled for selection`, () => {
-      cy.get('.ProseMirror').type('{selectall}Hello world{selectall}')
+      cy.get('.tiptap').type('{selectall}Hello world{selectall}')
       cy.get('button').contains('code').click()
       cy.get('button').contains('code').click()
       cy.get('button').contains(m.label).should('not.be.disabled')
     })
 
     it(`should apply ${m.label} when the button is pressed`, () => {
-      cy.get('.ProseMirror').type('{selectall}Hello world')
+      cy.get('.tiptap').type('{selectall}Hello world')
       cy.get('button').contains('paragraph').click()
-      cy.get('.ProseMirror').type('{selectall}')
+      cy.get('.tiptap').type('{selectall}')
       cy.get('button').contains(m.label).click()
-      cy.get(`.ProseMirror ${m.tag}`).should('exist').should('have.text', 'Hello world')
+      cy.get(`.tiptap ${m.tag}`).should('exist').should('have.text', 'Hello world')
     })
   })
 
   it('should clear marks when the button is pressed', () => {
-    cy.get('.ProseMirror').type('{selectall}Hello world')
+    cy.get('.tiptap').type('{selectall}Hello world')
     cy.get('button').contains('paragraph').click()
-    cy.get('.ProseMirror').type('{selectall}')
+    cy.get('.tiptap').type('{selectall}')
     cy.get('button').contains('bold').click()
-    cy.get('.ProseMirror strong').should('exist').should('have.text', 'Hello world')
+    cy.get('.tiptap strong').should('exist').should('have.text', 'Hello world')
     cy.get('button').contains('clear marks').click()
-    cy.get('.ProseMirror strong').should('not.exist')
+    cy.get('.tiptap strong').should('not.exist')
   })
 
   it('should clear nodes when the button is pressed', () => {
-    cy.get('.ProseMirror').type('{selectall}Hello world')
+    cy.get('.tiptap').type('{selectall}Hello world')
     cy.get('button').contains('bullet list').click()
-    cy.get('.ProseMirror ul').should('exist').should('have.text', 'Hello world')
+    cy.get('.tiptap ul').should('exist').should('have.text', 'Hello world')
-    cy.get('.ProseMirror').type('{enter}A second item{enter}A third item{selectall}')
+    cy.get('.tiptap').type('{enter}A second item{enter}A third item{selectall}')
     cy.get('button').contains('clear nodes').click()
-    cy.get('.ProseMirror ul').should('not.exist')
+    cy.get('.tiptap ul').should('not.exist')
-    cy.get('.ProseMirror p').should('have.length', 3)
+    cy.get('.tiptap p').should('have.length', 3)
   })
 
   const buttonNodes = [
@@ -98,46 +98,46 @@ context('/src/Examples/Default/React/', () => {
   buttonNodes.forEach(n => {
     it(`should set ${n.label} when the button is pressed`, () => {
       cy.get('button').contains('paragraph').click()
-      cy.get('.ProseMirror').type('{selectall}Hello world{selectall}')
+      cy.get('.tiptap').type('{selectall}Hello world{selectall}')
 
       cy.get('button').contains(n.label).click()
-      cy.get(`.ProseMirror ${n.tag}`).should('exist').should('have.text', 'Hello world')
+      cy.get(`.tiptap ${n.tag}`).should('exist').should('have.text', 'Hello world')
       cy.get('button').contains(n.label).click()
-      cy.get(`.ProseMirror ${n.tag}`).should('not.exist')
+      cy.get(`.tiptap ${n.tag}`).should('not.exist')
     })
   })
 
   it('should add a hr when on the same line as a node', () => {
-    cy.get('.ProseMirror').type('{rightArrow}')
+    cy.get('.tiptap').type('{rightArrow}')
     cy.get('button').contains('horizontal rule').click()
-    cy.get('.ProseMirror hr').should('exist')
+    cy.get('.tiptap hr').should('exist')
-    cy.get('.ProseMirror h1').should('exist')
+    cy.get('.tiptap h1').should('exist')
   })
 
   it('should add a hr when on a new line', () => {
-    cy.get('.ProseMirror').type('{rightArrow}{enter}')
+    cy.get('.tiptap').type('{rightArrow}{enter}')
     cy.get('button').contains('horizontal rule').click()
-    cy.get('.ProseMirror hr').should('exist')
+    cy.get('.tiptap hr').should('exist')
-    cy.get('.ProseMirror h1').should('exist')
+    cy.get('.tiptap h1').should('exist')
   })
 
   it('should add a br', () => {
-    cy.get('.ProseMirror').type('{rightArrow}')
+    cy.get('.tiptap').type('{rightArrow}')
     cy.get('button').contains('hard break').click()
-    cy.get('.ProseMirror h1 br').should('exist')
+    cy.get('.tiptap h1 br').should('exist')
   })
 
   it('should undo', () => {
-    cy.get('.ProseMirror').type('{selectall}{backspace}')
+    cy.get('.tiptap').type('{selectall}{backspace}')
     cy.get('button').contains('undo').click()
-    cy.get('.ProseMirror').should('contain', 'Hello world')
+    cy.get('.tiptap').should('contain', 'Hello world')
   })
 
   it('should redo', () => {
-    cy.get('.ProseMirror').type('{selectall}{backspace}')
+    cy.get('.tiptap').type('{selectall}{backspace}')
     cy.get('button').contains('undo').click()
-    cy.get('.ProseMirror').should('contain', 'Hello world')
+    cy.get('.tiptap').should('contain', 'Hello world')
     cy.get('button').contains('redo').click()
-    cy.get('.ProseMirror').should('not.contain', 'Hello world')
+    cy.get('.tiptap').should('not.contain', 'Hello world')
   })
 })

demos/src/Experiments/IsolatingClear/React/styles.scss

@@ -1,5 +1,5 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Experiments/Linter/Vue/index.vue

@@ -91,7 +91,7 @@ export default {
   content: "!";
 }
 
-.ProseMirror {
+.tiptap {
   padding-right: 20px;
 }
 </style>

demos/src/Experiments/MultipleEditors/Vue/index.vue

@@ -142,7 +142,7 @@ export default {
 </script>
 
 <style lang="scss">
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Experiments/OnUpdateRerender/React/styles.scss

@@ -1,5 +1,5 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Experiments/TrailingNode/Vue/index.vue

@@ -41,7 +41,7 @@ export default {
 </script>
 
 <style lang="scss">
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Extensions/BubbleMenu/React/styles.scss

@@ -1,4 +1,4 @@
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Extensions/BubbleMenu/Vue/index.vue

@@ -67,7 +67,7 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Extensions/CharacterCount/React/styles.scss

@@ -1,5 +1,5 @@
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Extensions/CharacterCount/Vue/index.vue

@@ -55,7 +55,7 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+.tiptap {
   > * + * {
     margin-top: 0.75em;
   }

demos/src/Extensions/Collaboration/React/styles.scss

@@ -1,12 +1,12 @@
 /* Basic editor styles */
-.ProseMirror {
+tiptap {
   > * + * {
     margin-top: 0.75em;
   }
 }
 
 /* Placeholder (at the top) */
-.ProseMirror p.is-editor-empty:first-child::before {
+tiptap p.is-editor-empty:first-child::before {
   color: #adb5bd;
   content: attr(data-placeholder);
   float: left;

demos/src/Extensions/Collaboration/Vue/index.vue

@@ -53,14 +53,14 @@ export default {
 
 <style lang="scss">
 /* Basic editor styles */
-.ProseMirror {
+tiptap {
   > * + * {
     margin-top: 0.75em;
   }
 }
 
 /* Placeholder (at the top) */
-.ProseMirror p.is-editor-empty:first-child::before {
+tiptap p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
   color: #adb5bd;