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

.eslintrc.js

@@ -31,7 +31,7 @@ module.exports = {
       extends: [
         'plugin:@typescript-eslint/eslint-recommended',
         'plugin:@typescript-eslint/recommended',
-        'plugin:vue/strongly-recommended',
+        'plugin:vue/vue3-strongly-recommended',
         'airbnb-base',
       ],
       rules: {

README.md

@@ -1,4 +1,4 @@
-# tiptap
+# Tiptap
 A headless, framework-agnostic and extendable rich text editor, based on [ProseMirror](https://github.com/ProseMirror/prosemirror).
 
 [![Build Status](https://github.com/ueberdosis/tiptap/workflows/build/badge.svg)](https://github.com/ueberdosis/tiptap/actions)

demos/package.json

@@ -16,22 +16,22 @@
     "y-indexeddb": "^9.0.6",
     "y-webrtc": "^10.2.0",
     "y-websocket": "^1.3.17",
-    "yjs": "^13.5.13"
+    "yjs": "^13.5.16"
   },
   "devDependencies": {
     "@types/uuid": "^8.3.1",
     "@vitejs/plugin-react-refresh": "^1.3.6",
     "@vitejs/plugin-vue": "^1.9.3",
     "autoprefixer": "^10.3.7",
     "iframe-resizer": "^4.3.2",
-    "postcss": "^8.3.9",
+    "postcss": "^8.3.11",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "sass": "^1.43.2",
+    "sass": "^1.43.3",
     "tailwindcss": "^2.2.17",
     "typescript": "^4.4.4",
     "uuid": "^8.3.2",
-    "vite": "^2.6.7",
+    "vite": "^2.6.10",
     "vite-plugin-checker": "^0.3.4",
     "vue": "^3.0.5",
     "vue-router": "^4.0.11"

demos/setup/style.scss

@@ -56,9 +56,17 @@ body {
 }
 
 button,
-input {
+input,
+select {
   font-size: inherit;
   font-family: inherit;
+  color: black;
+  margin: 0.1rem;
+  border: 1px solid black;
+  border-radius: 0.3rem;
+  padding: 0.1rem 0.4rem;
+  background: white;
+  accent-color: black;
 }
 
 .ProseMirror:focus {

demos/src/Examples/CollaborativeEditing/React/index.jsx

@@ -16,7 +16,7 @@ import MenuBar from './MenuBar'
 import './styles.scss'
 
 const colors = ['#958DF1', '#F98181', '#FBBC88', '#FAF594', '#70CFF8', '#94FADB', '#B9F18D']
-const rooms = ['rooms.7', 'rooms.8', 'rooms.9']
+const rooms = ['rooms.10', 'rooms.11', 'rooms.12']
 const names = [
   'Lea Thompson',
   'Cyndi Lauper',

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

@@ -40,9 +40,9 @@ const getRandomElement = list => {
 
 const getRandomRoom = () => {
   return getRandomElement([
-    'rooms.7',
-    'rooms.8',
-    'rooms.9',
+    'rooms.10',
+    'rooms.11',
+    'rooms.12',
   ])
 }
 

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

@@ -14,6 +14,7 @@
 
 .item {
   display: block;
+  margin: 0;
   width: 100%;
   text-align: left;
   background: transparent;

demos/src/Examples/Community/React/suggestion.js

@@ -3,7 +3,7 @@ import tippy from 'tippy.js'
 import { MentionList } from './MentionList'
 
 export default {
-  items: query => {
+  items: ({ query }) => {
     return [
       'Lea Thompson', 'Cyndi Lauper', 'Tom Cruise', 'Madonna', 'Jerry Hall', 'Joan Collins', 'Winona Ryder', 'Christina Applegate', 'Alyssa Milano', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John', 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey', 'Mickey Rourke', 'John Cusack', 'Matthew Broderick', 'Justine Bateman', 'Lisa Bonet',
     ].filter(item => item.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5)

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

@@ -98,6 +98,7 @@ export default {
 
 .item {
   display: block;
+  margin: 0;
   width: 100%;
   text-align: left;
   background: transparent;

demos/src/Examples/Community/Vue/suggestion.js

@@ -3,7 +3,7 @@ import tippy from 'tippy.js'
 import MentionList from './MentionList.vue'
 
 export default {
-  items: query => {
+  items: ({ query }) => {
     return [
       'Lea Thompson', 'Cyndi Lauper', 'Tom Cruise', 'Madonna', 'Jerry Hall', 'Joan Collins', 'Winona Ryder', 'Christina Applegate', 'Alyssa Milano', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John', 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey', 'Mickey Rourke', 'John Cusack', 'Matthew Broderick', 'Justine Bateman', 'Lisa Bonet',
     ].filter(item => item.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5)

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

@@ -1,7 +1,57 @@
-context('/src/Examples/BubbleMenu/React/', () => {
+context('/src/Examples/Menus/React/', () => {
   before(() => {
-    cy.visit('/src/Examples/BubbleMenu/React/')
+    cy.visit('/src/Examples/Menus/React/')
   })
 
-  // TODO: Write tests
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.chain().focus().clearContent().run()
+    })
+  })
+
+  // TODO: fix test
+  // it('should show menu when the editor is empty', () => {
+  //   cy.get('#app')
+  //     .find('[data-tippy-root]')
+  // })
+
+  it('should show menu when text is selected', () => {
+    cy.get('.ProseMirror')
+      .type('Test')
+      .type('{selectall}')
+
+    cy.get('#app')
+      .find('[data-tippy-root]')
+  })
+
+  const marks = [
+    {
+      button: 'Bold',
+      tag: 'strong',
+    },
+    {
+      button: 'Italic',
+      tag: 'em',
+    },
+    {
+      button: 'Strike',
+      tag: 's',
+    },
+  ]
+
+  marks.forEach(mark => {
+    it(`should apply ${mark.button} correctly`, () => {
+      cy.get('.ProseMirror')
+        .type('Test')
+        .type('{selectall}')
+
+      cy.get('#app')
+        .find('[data-tippy-root]')
+        .contains(mark.button)
+        .click()
+
+      cy.get('.ProseMirror')
+        .find(`p ${mark.tag}`)
+    })
+  })
 })

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

@@ -1,7 +1,56 @@
-context('/src/Examples/BubbleMenu/Vue/', () => {
+context('/src/Examples/Menus/Vue/', () => {
   before(() => {
-    cy.visit('/src/Examples/BubbleMenu/Vue/')
+    cy.visit('/src/Examples/Menus/Vue/')
   })
 
-  // TODO: Write tests
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.chain().focus().clearContent().run()
+    })
+  })
+
+  it('should show menu when the editor is empty', () => {
+    cy.get('#app')
+      .find('[data-tippy-root]')
+  })
+
+  it('should show menu when text is selected', () => {
+    cy.get('.ProseMirror')
+      .type('Test')
+      .type('{selectall}')
+
+    cy.get('#app')
+      .find('[data-tippy-root]')
+  })
+
+  const marks = [
+    {
+      button: 'Bold',
+      tag: 'strong',
+    },
+    {
+      button: 'Italic',
+      tag: 'em',
+    },
+    {
+      button: 'Strike',
+      tag: 's',
+    },
+  ]
+
+  marks.forEach(mark => {
+    it(`should apply ${mark.button} correctly`, () => {
+      cy.get('.ProseMirror')
+        .type('Test')
+        .type('{selectall}')
+
+      cy.get('#app div')
+        .find('[data-tippy-root]')
+        .contains(mark.button)
+        .click()
+
+      cy.get('.ProseMirror')
+        .find(`p ${mark.tag}`)
+    })
+  })
 })

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

@@ -3,5 +3,45 @@ context('/src/Examples/Minimal/Vue/', () => {
     cy.visit('/src/Examples/Minimal/Vue/')
   })
 
-  // TODO: Write tests
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.clearContent()
+    })
+  })
+
+  it('text should be wrapped in a paragraph by default', () => {
+    cy.get('.ProseMirror')
+      .type('Example Text')
+      .find('p')
+      .should('contain', 'Example Text')
+  })
+
+  it('should parse paragraphs correctly', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.setContent('<p>Example Text</p>')
+      expect(editor.getHTML()).to.eq('<p>Example Text</p>')
+
+      editor.commands.setContent('<p style="color:DodgerBlue;">Example Text</p>')
+      expect(editor.getHTML()).to.eq('<p>Example Text</p>')
+    })
+  })
+
+  it('enter should make a new paragraph', () => {
+    cy.get('.ProseMirror')
+      .type('First Paragraph{enter}Second Paragraph')
+      .find('p')
+      .should('have.length', 2)
+  })
+
+  it('backspace should remove the last paragraph', () => {
+    cy.get('.ProseMirror')
+      .type('{enter}')
+      .find('p')
+      .should('have.length', 2)
+
+    cy.get('.ProseMirror')
+      .type('{backspace}')
+      .find('p')
+      .should('have.length', 1)
+  })
 })

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

@@ -3,5 +3,36 @@ context('/src/Examples/Savvy/Vue/', () => {
     cy.visit('/src/Examples/Savvy/Vue/')
   })
 
-  // TODO: Write tests
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.clearContent()
+    })
+  })
+
+  const tests = [
+    ['(c)', '©'],
+    ['->', '→'],
+    ['>>', '»'],
+    ['1/2', '½'],
+    ['!=', '≠'],
+    ['--', '—'],
+    ['1x1', '1×1'],
+    [':-) ', '🙂'],
+    ['<3 ', '❤️'],
+    ['>:P ', '😜'],
+  ]
+
+  tests.forEach(test => {
+    it(`should parse ${test[0]} correctly`, () => {
+      cy.get('.ProseMirror')
+        .type(test[0])
+        .should('contain', test[1])
+    })
+  })
+
+  it('should parse hex colors correctly', () => {
+    cy.get('.ProseMirror')
+      .type('#FD9170')
+      .find('.color')
+  })
 })

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

@@ -98,6 +98,7 @@ export default {
 
 .item {
   display: block;
+  margin: 0;
   width: 100%;
   text-align: left;
   background: transparent;

demos/src/Experiments/Commands/Vue/suggestion.js

@@ -3,7 +3,7 @@ import { VueRenderer } from '@tiptap/vue-3'
 import CommandsList from './CommandsList.vue'
 
 export default {
-  items: query => {
+  items: ({ query }) => {
     return [
       {
         title: 'H1',

demos/src/Experiments/ExtensionStorage/React/CustomExtension.ts

@@ -0,0 +1,19 @@
+import { Extension } from '@tiptap/core'
+
+type CustomStorage = {
+  foo: number,
+}
+
+export const CustomExtension = Extension.create<{}, CustomStorage>({
+  name: 'custom',
+
+  addStorage() {
+    return {
+      foo: 123,
+    }
+  },
+
+  onUpdate() {
+    this.storage.foo += 1
+  },
+})

demos/src/Experiments/ExtensionStorage/React/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/react.ts'
+      import source from '@source'
+      setup('Experiments/ExtensionStorage', source)
+    </script>
+  </body>
+</html>