Merge branch 'main' into feature/vue-node-views

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

@@ -0,0 +1,22 @@
+context('/examples/basic', () => {
+  before(() => {
+    cy.visit('/examples/basic')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.setContent('<h1>Example Text</h1>')
+      editor.commands.selectAll()
+    })
+  })
+
+  it('should apply the paragraph style when the keyboard shortcut is pressed', () => {
+    cy.get('.ProseMirror h1').should('exist')
+    cy.get('.ProseMirror p').should('not.exist')
+
+    cy.get('.ProseMirror')
+      .trigger('keydown', { modKey: true, altKey: true, key: '0' })
+      .find('p')
+      .should('contain', 'Example Text')
+  })
+})

docs/src/demos/Examples/Basic/tests/clearContent.spec.js

@@ -1,25 +0,0 @@
-context('clearContent', () => {
-  before(() => {
-    cy.visit('/examples/basic')
-  })
-
-  it('returns true for the clearContent command', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.commands.setContent('<p>Example Text</p>')
-
-      const command = editor.commands.clearContent()
-
-      expect(command).to.be.eq(true)
-    })
-  })
-
-  it('clears the content when using the clearContent command', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.commands.setContent('<p>Example Text</p>')
-
-      editor.commands.clearContent()
-
-      expect(editor.getHTML()).to.be.eq('<p></p>')
-    })
-  })
-})

docs/src/demos/Examples/Basic/tests/insertHTML.spec.js

@@ -1,25 +0,0 @@
-context('insertHTML', () => {
-  before(() => {
-    cy.visit('/examples/basic')
-  })
-
-  it('returns true for the insertHTML command', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.commands.setContent('<p>Example Text</p>')
-
-      const command = editor.commands.insertHTML('<p>Cindy Lauper</p>')
-
-      expect(command).to.be.eq(true)
-    })
-  })
-
-  it('appends the content when using the insertHTML command', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.commands.setContent('<p>Example Text</p>')
-
-      editor.commands.insertHTML('<p>Cindy Lauper</p>')
-
-      expect(editor.getHTML()).to.be.eq('<p>Example Text</p><p>Cindy Lauper</p>')
-    })
-  })
-})

docs/src/demos/Examples/Basic/tests/setContent.spec.js

@@ -1,21 +0,0 @@
-context('setContent', () => {
-  before(() => {
-    cy.visit('/examples/basic')
-  })
-
-  it('returns true for the setContent command', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
-      const command = editor.commands.setContent('<p>Example Text</p>')
-
-      expect(command).to.be.eq(true)
-    })
-  })
-
-  it('clears the content when using the setContent command', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.commands.setContent('<p>Cindy Lauper</p>')
-
-      expect(editor.getHTML()).to.be.eq('<p>Cindy Lauper</p>')
-    })
-  })
-})

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

@@ -2,4 +2,6 @@ context('/examples/collaborative-editing', () => {
   before(() => {
     cy.visit('/examples/collaborative-editing')
   })
+
+  // TODO: Write tests
 })

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

@@ -1,5 +0,0 @@
-context('/examples/collaborative-editing-ws', () => {
-  before(() => {
-    cy.visit('/examples/collaborative-editing-ws')
-  })
-})

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

@@ -0,0 +1,7 @@
+context('/examples/formatting', () => {
+  before(() => {
+    cy.visit('/examples/formatting')
+  })
+
+  // TODO: Write tests
+})

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

@@ -0,0 +1,7 @@
+context('/examples/links', () => {
+  before(() => {
+    cy.visit('/examples/links')
+  })
+
+  // TODO: Write tests
+})

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

@@ -2,4 +2,6 @@ context('/examples/minimalist', () => {
   before(() => {
     cy.visit('/examples/minimalist')
   })
+
+  // TODO: Write tests
 })

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

@@ -2,4 +2,6 @@ context('/examples/todo-app', () => {
   before(() => {
     cy.visit('/examples/todo-app')
   })
+
+  // TODO: Write tests
 })

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

@@ -0,0 +1,7 @@
+context('/examples/v-model', () => {
+  before(() => {
+    cy.visit('/examples/v-model')
+  })
+
+  // TODO: Write tests
+})

docs/src/demos/ExtensionConfiguration/index.vue

@@ -1,41 +0,0 @@
-<template>
-  <div class="editor">
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import { Editor, EditorContent } from '@tiptap/vue'
-import Document from '@tiptap/extension-document'
-import Paragraph from '@tiptap/extension-paragraph'
-import Text from '@tiptap/extension-text'
-import Bold from '@tiptap/extension-bold'
-
-export default {
-  components: {
-    EditorContent,
-  },
-
-  data() {
-    return {
-      editor: null,
-    }
-  },
-
-  mounted() {
-    this.editor = new Editor({
-      content: '<p>I’m running tiptap with Vue.js. This demo is interactive, try to edit the text.</p>',
-      extensions: [
-        Document,
-        Paragraph,
-        Text,
-        Bold,
-      ],
-    })
-  },
-
-  beforeDestroy() {
-    this.editor.destroy()
-  },
-}
-</script>

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

@@ -2,4 +2,6 @@ context('/api/extensions/collaboration', () => {
   before(() => {
     cy.visit('/api/extensions/collaboration')
   })
+
+  // TODO: Write tests
 })

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

@@ -2,4 +2,6 @@ context('/api/extensions/collaboration-cursor', () => {
   before(() => {
     cy.visit('/api/extensions/collaboration-cursor')
   })
+
+  // TODO: Write tests
 })

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

@@ -2,4 +2,6 @@ context('/examples/dropcursor', () => {
   before(() => {
     cy.visit('/examples/dropcursor')
   })
+
+  // TODO: Write tests
 })

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

@@ -2,4 +2,6 @@ context('/api/extensions/font-family', () => {
   before(() => {
     cy.visit('/api/extensions/font-family')
   })
+
+  // TODO: Write tests
 })

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

@@ -2,4 +2,6 @@ context('/examples/gapcursor', () => {
   before(() => {
     cy.visit('/examples/gapcursor')
   })
+
+  // TODO: Write tests
 })

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

@@ -81,4 +81,32 @@ context('/api/extensions/text-align', () => {
       .find('p')
       .should('have.css', 'text-align', 'left')
   })
+
+  it('aligns the text left when pressing the keyboard shortcut', () => {
+    cy.get('.ProseMirror')
+      .trigger('keydown', { modKey: true, shiftKey: true, key: 'l' })
+      .find('p')
+      .should('have.css', 'text-align', 'left')
+  })
+
+  it('aligns the text center when pressing the keyboard shortcut', () => {
+    cy.get('.ProseMirror')
+      .trigger('keydown', { modKey: true, shiftKey: true, key: 'e' })
+      .find('p')
+      .should('have.css', 'text-align', 'center')
+  })
+
+  it('aligns the text right when pressing the keyboard shortcut', () => {
+    cy.get('.ProseMirror')
+      .trigger('keydown', { modKey: true, shiftKey: true, key: 'r' })
+      .find('p')
+      .should('have.css', 'text-align', 'right')
+  })
+
+  it('aligns the text justified when pressing the keyboard shortcut', () => {
+    cy.get('.ProseMirror')
+      .trigger('keydown', { modKey: true, shiftKey: true, key: 'j' })
+      .find('p')
+      .should('have.css', 'text-align', 'justify')
+  })
 })

docs/src/demos/Guide/BuildYourEditor/index.vue

@@ -1,75 +0,0 @@
-<template>
-  <div>
-    <div v-if="editor">
-      <button @click="editor.chain().focus().unsetAllMarks().run()">
-        clear formatting
-      </button>
-      <button @click="editor.chain().focus().undo().run()">
-        undo
-      </button>
-      <button @click="editor.chain().focus().redo().run()">
-        redo
-      </button>
-      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
-        bold
-      </button>
-      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
-        italic
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
-        h1
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
-        h2
-      </button>
-    </div>
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import { Editor } from '@tiptap/core'
-import { EditorContent } from '@tiptap/vue'
-import Document from '@tiptap/extension-document'
-import Paragraph from '@tiptap/extension-paragraph'
-import Text from '@tiptap/extension-text'
-import History from '@tiptap/extension-history'
-import Bold from '@tiptap/extension-bold'
-import Italic from '@tiptap/extension-italic'
-import Code from '@tiptap/extension-code'
-import CodeBlock from '@tiptap/extension-code-block'
-import Heading from '@tiptap/extension-heading'
-
-export default {
-  components: {
-    EditorContent,
-  },
-
-  data() {
-    return {
-      editor: null,
-    }
-  },
-
-  mounted() {
-    this.editor = new Editor({
-      content: '<h2>Hey there!</h2><p>This editor is based on Prosemirror, fully extendable and headless. You can easily add custom nodes as Vue components.</p>',
-      extensions: [
-        Document,
-        Paragraph,
-        Text,
-        CodeBlock,
-        History,
-        Bold,
-        Italic,
-        Code,
-        Heading,
-      ],
-    })
-  },
-
-  beforeDestroy() {
-    this.editor.destroy()
-  },
-}
-</script>

docs/src/demos/Guide/GettingStarted/VueCLI/index.vue

@@ -1,30 +0,0 @@
-<template>
-  <editor-content :editor="editor" />
-</template>
-
-<script>
-import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
-
-export default {
-  components: {
-    EditorContent,
-  },
-
-  data() {
-    return {
-      editor: null,
-    }
-  },
-
-  mounted() {
-    this.editor = new Editor({
-      content: '<p>I’m running tiptap with Vue.js. 🎉</p>',
-      extensions: defaultExtensions(),
-    })
-  },
-
-  beforeDestroy() {
-    this.editor.destroy()
-  },
-}
-</script>

docs/src/demos/Marks/Link/index.spec.js

@@ -47,31 +47,23 @@ context('/api/marks/link', () => {
     })
   })
 
-  const validUrls = [
-    'https://example.com',
-    'https://example.com/with-path',
-    'http://example.com/with-http',
-    'https://www.example.com/with-www',
-    'https://www.example.com/with-numbers-123',
-    'https://www.example.com/with-parameters?var=true',
-    'https://www.example.com/with-multiple-parameters?var=true&foo=bar',
-    'https://www.example.com/with-spaces?var=true&foo=bar+3',
-    // TODO: 'https://www.example.com/with,comma',
-    // TODO: 'https://www.example.com/with(brackets)',
-    // TODO: 'https://www.example.com/with!exclamation!marks',
-    'http://thelongestdomainnameintheworldandthensomeandthensomemoreandmore.com/',
-    'https://example.longtopleveldomain',
-    'https://example-with-dashes.com',
-  ]
-
-  validUrls.forEach(url => {
-    it(`url should be detected: ${url}`, () => {
-      cy.get('.ProseMirror').paste({ pastePayload: url, pasteType: 'text/plain' })
-        .find('a')
-        .should('contain', url)
-        .should('have.attr', 'href', url)
-    })
+  it('detects a pasted URL', () => {
+    cy.get('.ProseMirror').paste({ pastePayload: 'https://example.com', pasteType: 'text/plain' })
+      .find('a')
+      .should('contain', 'https://example.com')
+      .should('have.attr', 'href', 'https://example.com')
   })
 
-  // TODO: Test invalid URLs
+  it('correctly detects multiple pasted URLs', () => {
+    cy.get('.ProseMirror').paste({ pastePayload: 'https://example1.com, https://example2.com/foobar, (http://example3.com/foobar)', pasteType: 'text/plain' })
+
+    cy.get('.ProseMirror').find('a[href="https://example1.com"]')
+      .should('contain', 'https://example1.com')
+
+    cy.get('.ProseMirror').find('a[href="https://example2.com/foobar"]')
+      .should('contain', 'https://example2.com/foobar')
+
+    cy.get('.ProseMirror').find('a[href="http://example3.com/foobar"]')
+      .should('contain', 'http://example3.com/foobar')
+  })
 })

docs/src/demos/Marks/Link/index.vue

@@ -61,3 +61,16 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  a {
+    color: #68CEF8;
+  }
+}
+</style>

docs/src/demos/Marks/TextStyle/index.spec.js

@@ -2,4 +2,6 @@ context('/api/marks/text-style', () => {
   before(() => {
     cy.visit('/api/marks/text-style')
   })
+
+  // TODO: Write tests
 })

docs/src/demos/Nodes/BulletList/index.spec.js

@@ -79,6 +79,13 @@ context('/api/nodes/bullet-list', () => {
       .should('contain', 'Paragraph')
   })
 
+  it('should make the paragraph a bullet list keyboard shortcut is pressed', () => {
+    cy.get('.ProseMirror')
+      .trigger('keydown', { modKey: true, shiftKey: true, key: '8' })
+      .find('ul li')
+      .should('contain', 'Example Text')
+  })
+
   it('should make a bullet list from an asterisk', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.commands.clearContent()

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

@@ -86,7 +86,28 @@ context('/api/nodes/heading', () => {
       .should('not.exist')
   })
 
-  it('should make a heading from the default markdown shortcut', () => {
+  it('should make the paragraph a h1 keyboard shortcut is pressed', () => {
+    cy.get('.ProseMirror')
+      .trigger('keydown', { modKey: true, altKey: true, key: '1' })
+      .find('h1')
+      .should('contain', 'Example Text')
+  })
+
+  it('should make the paragraph a h2 keyboard shortcut is pressed', () => {
+    cy.get('.ProseMirror')
+      .trigger('keydown', { modKey: true, altKey: true, key: '2' })
+      .find('h2')
+      .should('contain', 'Example Text')
+  })
+
+  it('should make the paragraph a h3 keyboard shortcut is pressed', () => {
+    cy.get('.ProseMirror')
+      .trigger('keydown', { modKey: true, altKey: true, key: '3' })
+      .find('h3')
+      .should('contain', 'Example Text')
+  })
+
+  it('should make a h1 from the default markdown shortcut', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.commands.clearContent()
     })
@@ -96,4 +117,26 @@ context('/api/nodes/heading', () => {
       .find('h1')
       .should('contain', 'Headline')
   })
+
+  it('should make a h2 from the default markdown shortcut', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.clearContent()
+    })
+
+    cy.get('.ProseMirror')
+      .type('## Headline')
+      .find('h2')
+      .should('contain', 'Headline')
+  })
+
+  it('should make a h3 from the default markdown shortcut', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.clearContent()
+    })
+
+    cy.get('.ProseMirror')
+      .type('### Headline')
+      .find('h3')
+      .should('contain', 'Headline')
+  })
 })

docs/src/demos/Nodes/ListItem/index.spec.js

@@ -2,4 +2,48 @@ context('/api/nodes/list-item', () => {
   before(() => {
     cy.visit('/api/nodes/list-item')
   })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.setContent('<ul><li>Example Text</li></ul>')
+    })
+  })
+
+  it('should add a new list item on Enter', () => {
+    cy.get('.ProseMirror')
+      .type('{enter}2nd Item')
+
+    cy.get('.ProseMirror')
+      .find('li:nth-child(1)')
+      .should('contain', 'Example Text')
+
+    cy.get('.ProseMirror')
+      .find('li:nth-child(2)')
+      .should('contain', '2nd Item')
+  })
+
+  it('should sink the list item on Tab', () => {
+    cy.get('.ProseMirror')
+      .type('{enter}')
+      .trigger('keydown', { key: 'Tab' })
+
+    cy.get('.ProseMirror').type('2nd Level')
+
+    cy.get('.ProseMirror')
+      .find('li:nth-child(1) li')
+      .should('contain', '2nd Level')
+  })
+
+  it('should lift the list item on Shift+Tab', () => {
+    cy.get('.ProseMirror')
+      .type('{enter}')
+      .trigger('keydown', { key: 'Tab' })
+      .trigger('keydown', { shiftKey: true, key: 'Tab' })
+
+    cy.get('.ProseMirror').type('1st Level')
+
+    cy.get('.ProseMirror')
+      .find('li:nth-child(2)')
+      .should('contain', '1st Level')
+  })
 })

docs/src/demos/Nodes/ListItem/index.vue

@@ -71,3 +71,50 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
+
+  code {
+    background-color: rgba(#616161, 0.1);
+    color: #616161;
+  }
+
+  pre {
+    background: #0D0D0D;
+    color: #FFF;
+    font-family: 'JetBrainsMono', monospace;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+
+    code {
+      color: inherit;
+      background: none;
+      font-size: 0.8rem;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  hr {
+    margin: 1rem 0;
+  }
+
+  blockquote {
+    padding-left: 1rem;
+    border-left: 2px solid rgba(#0D0D0D, 0.1);
+  }
+}
+</style>

docs/src/demos/Nodes/OrderedList/index.spec.js

@@ -61,6 +61,13 @@ context('/api/nodes/ordered-list', () => {
       .should('not.exist')
   })
 
+  it('should make the paragraph an ordered list keyboard shortcut is pressed', () => {
+    cy.get('.ProseMirror')
+      .trigger('keydown', { modKey: true, shiftKey: true, key: '7' })
+      .find('ol li')
+      .should('contain', 'Example Text')
+  })
+
   it('should leave the list with double enter', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.commands.clearContent()

docs/src/demos/Nodes/TaskItem/index.spec.js

@@ -2,4 +2,6 @@ context('/api/nodes/task-item', () => {
   before(() => {
     cy.visit('/api/nodes/task-item')
   })
+
+  // TODO: Write tests
 })

docs/src/demos/Nodes/TaskList/index.spec.js

@@ -61,6 +61,13 @@ context('/api/nodes/task-list', () => {
       .should('not.exist')
   })
 
+  it('should make the paragraph a task list when the keyboard shortcut is pressed', () => {
+    cy.get('.ProseMirror')
+      .trigger('keydown', { modKey: true, shiftKey: true, key: 'l' })
+      .find('ul li')
+      .should('contain', 'Example Text')
+  })
+
   it('should leave the list with double enter', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.commands.clearContent()

docs/src/demos/Overview/Installation/index.spec.js

@@ -0,0 +1,5 @@
+context('/overview/installation', () => {
+  before(() => {
+    cy.visit('/overview/installation')
+  })
+})

docs/src/demos/SimpleMenuBar/index.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="editor">
-    <div class="menubar" v-if="editor">
-
-      <button
-        class="menubar__button"
-        :class="{ 'is-active': editor.isActive('bold') }"
-        @click="editor.chain().focus().toggleBold().run()"
-      >
-        Bold
-      </button>
-
-    </div>
-
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
-
-export default {
-  components: {
-    EditorContent,
-  },
-
-  data() {
-    return {
-      editor: null,
-    }
-  },
-
-  mounted() {
-    this.editor = new Editor({
-      content: '<p>Hi! 👋 I’m a text editor with just one button. Select some text and press the button to see what it does. Yes, it’s marking text <strong>bold</strong>. Amazing, isn’t it?</p>',
-      extensions: defaultExtensions(),
-    })
-  },
-
-  beforeDestroy() {
-    this.editor.destroy()
-  },
-}
-</script>