Merge branch 'main' into feature/new-highlight-extension

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

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

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

@@ -0,0 +1,70 @@
+<template>
+  <div v-if="editor">
+    <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 TaskList from '@tiptap/extension-task-list'
+import TaskItem from '@tiptap/extension-task-item'
+
+const CustomDocument = Document.extend({
+  content: 'taskList',
+})
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        CustomDocument(),
+        Paragraph(),
+        Text(),
+        TaskList(),
+        TaskItem(),
+      ],
+      content: `
+        <ul data-type="task_list">
+          <li data-type="taskItem" data-checked="true">A list item</li>
+          <li data-type="taskItem" data-checked="false">And another one</li>
+        </ul>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+ul[data-type="taskList"] {
+  list-style: none;
+  padding: 0;
+
+  li {
+    display: flex;
+    align-items: center;
+
+    > input {
+      flex: 0 0 auto;
+      margin-right: 0.5rem;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,101 @@
+context('/api/extensions/typography', () => {
+  before(() => {
+    cy.visit('/api/extensions/typography')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.clearContent()
+    })
+  })
+
+  it('should make an em dash from two dashes', () => {
+    cy.get('.ProseMirror')
+      .type('-- emDash')
+      .should('contain', '— emDash')
+  })
+
+  it('should make an ellipsis from three dots', () => {
+    cy.get('.ProseMirror')
+      .type('... ellipsis')
+      .should('contain', '… ellipsis')
+  })
+
+  it('should make a correct open double quote', () => {
+    cy.get('.ProseMirror')
+      .type('"openDoubleQuote"')
+      .should('contain', '“openDoubleQuote')
+  })
+
+  it('should make a correct close double quote', () => {
+    cy.get('.ProseMirror')
+      .type('"closeDoubleQuote"')
+      .should('contain', 'closeDoubleQuote”')
+  })
+
+  it('should make a correct open single quote', () => {
+    cy.get('.ProseMirror')
+      .type("'openSingleQuote'")
+      .should('contain', '‘openSingleQuote’')
+  })
+
+  it('should make a correct close single quote', () => {
+    cy.get('.ProseMirror')
+      .type("'closeSingleQuote'")
+      .should('contain', 'closeSingleQuote’')
+  })
+
+  it('should make a left arrow', () => {
+    cy.get('.ProseMirror')
+      .type('<- leftArrow')
+      .should('contain', '← leftArrow')
+  })
+
+  it('should make a right arrow', () => {
+    cy.get('.ProseMirror')
+      .type('-> rightArrow')
+      .should('contain', '→ rightArrow')
+  })
+
+  it('should make a copyright sign', () => {
+    cy.get('.ProseMirror')
+      .type('(c) copyright')
+      .should('contain', '© copyright')
+  })
+
+  it('should make a registered trademark sign', () => {
+    cy.get('.ProseMirror')
+      .type('(r) registeredTrademark')
+      .should('contain', '® registeredTrademark')
+  })
+
+  it('should make a one half', () => {
+    cy.get('.ProseMirror')
+      .type('1/2 oneHalfw')
+      .should('contain', '½ oneHalf')
+  })
+
+  it('should make a plus/minus sign', () => {
+    cy.get('.ProseMirror')
+      .type('+/- plusMinus')
+      .should('contain', '± plusMinus')
+  })
+
+  it('should make a not equal sign', () => {
+    cy.get('.ProseMirror')
+      .type('!= notEqual')
+      .should('contain', '≠ notEqual')
+  })
+
+  it('should make a laquo', () => {
+    cy.get('.ProseMirror')
+      .type('<< laquorow')
+      .should('contain', '« laquo')
+  })
+
+  it('should make a raquo', () => {
+    cy.get('.ProseMirror')
+      .type('>> raquorow')
+      .should('contain', '» raquo')
+  })
+})

docs/src/demos/Extensions/Typography/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Typography from '@tiptap/extension-typography'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document(),
+        Paragraph(),
+        Text(),
+        Typography(),
+      ],
+      content: `
+        <p>“I have been suffering from Typomania all my life, a sickness that is incurable but not lethal.”</p>
+        <p>— Erik Spiekermann, December 2008</p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>

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

@@ -0,0 +1,5 @@
+context('/api/nodes/task-item', () => {
+  before(() => {
+    cy.visit('/api/nodes/task-item')
+  })
+})

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

@@ -0,0 +1,66 @@
+<template>
+  <div v-if="editor">
+    <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 TaskList from '@tiptap/extension-task-list'
+import TaskItem from '@tiptap/extension-task-item'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document(),
+        Paragraph(),
+        Text(),
+        TaskList(),
+        TaskItem(),
+      ],
+      content: `
+        <ul data-type="task_list">
+          <li data-type="taskItem" data-checked="true">A list item</li>
+          <li data-type="taskItem" data-checked="false">And another one</li>
+        </ul>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+ul[data-type="taskList"] {
+  list-style: none;
+  padding: 0;
+
+  li {
+    display: flex;
+    align-items: center;
+
+    > input {
+      flex: 0 0 auto;
+      margin-right: 0.5rem;
+    }
+  }
+}
+</style>