From cbc717334d27f1823df904368c357777a94fbf96 Mon Sep 17 00:00:00 2001 From: Sven Adlung Date: Tue, 16 Nov 2021 15:12:43 +0100 Subject: [PATCH] Add OrderedList demo for React --- demos/src/Nodes/OrderedList/React/index.html | 15 +++ demos/src/Nodes/OrderedList/React/index.jsx | 60 +++++++++++ .../src/Nodes/OrderedList/React/index.spec.js | 101 ++++++++++++++++++ demos/src/Nodes/OrderedList/React/styles.scss | 11 ++ 4 files changed, 187 insertions(+) create mode 100644 demos/src/Nodes/OrderedList/React/index.html create mode 100644 demos/src/Nodes/OrderedList/React/index.jsx create mode 100644 demos/src/Nodes/OrderedList/React/index.spec.js create mode 100644 demos/src/Nodes/OrderedList/React/styles.scss diff --git a/demos/src/Nodes/OrderedList/React/index.html b/demos/src/Nodes/OrderedList/React/index.html new file mode 100644 index 00000000..52fe24f5 --- /dev/null +++ b/demos/src/Nodes/OrderedList/React/index.html @@ -0,0 +1,15 @@ + + + + + + + +
+ + + diff --git a/demos/src/Nodes/OrderedList/React/index.jsx b/demos/src/Nodes/OrderedList/React/index.jsx new file mode 100644 index 00000000..47778f16 --- /dev/null +++ b/demos/src/Nodes/OrderedList/React/index.jsx @@ -0,0 +1,60 @@ +import React from 'react' +import { useEditor, EditorContent } from '@tiptap/react' +import Document from '@tiptap/extension-document' +import Paragraph from '@tiptap/extension-paragraph' +import Text from '@tiptap/extension-text' +import OrderedList from '@tiptap/extension-ordered-list' +import ListItem from '@tiptap/extension-list-item' +import './styles.scss' + +export default () => { + const editor = useEditor({ + extensions: [Document, Paragraph, Text, OrderedList, ListItem], + content: ` +
    +
  1. A list item
    2. +
  2. And another one
    3. +
+ +
    +
  1. This item starts at 5
    2. +
  2. And another one
    3. +
+ `, + }) + + if (!editor) { + return null + } + + return ( + <> + + + + + + + + ) +} diff --git a/demos/src/Nodes/OrderedList/React/index.spec.js b/demos/src/Nodes/OrderedList/React/index.spec.js new file mode 100644 index 00000000..f773d780 --- /dev/null +++ b/demos/src/Nodes/OrderedList/React/index.spec.js @@ -0,0 +1,101 @@ +context('/src/Nodes/OrderedList/React/', () => { + before(() => { + cy.visit('/src/Nodes/OrderedList/React/') + }) + + beforeEach(() => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('

Example Text

') + cy.get('.ProseMirror').type('{selectall}') + }) + }) + + it('should parse ordered lists correctly', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('

  1. Example Text

') + expect(editor.getHTML()).to.eq('

  1. Example Text

') + }) + }) + + it('should parse ordered lists without paragraphs correctly', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('
  1. Example Text
') + expect(editor.getHTML()).to.eq('

  1. Example Text

') + }) + }) + + it('the button should make the selected line a ordered list item', () => { + cy.get('.ProseMirror ol').should('not.exist') + + cy.get('.ProseMirror ol li').should('not.exist') + + cy.get('button:nth-child(1)').click() + + cy.get('.ProseMirror').find('ol').should('contain', 'Example Text') + + cy.get('.ProseMirror').find('ol li').should('contain', 'Example Text') + }) + + it('the button should toggle the ordered list', () => { + cy.get('.ProseMirror ol').should('not.exist') + + cy.get('button:nth-child(1)').click() + + cy.get('.ProseMirror').find('ol').should('contain', 'Example Text') + + cy.get('button:nth-child(1)').click() + + cy.get('.ProseMirror ol').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() + }) + + cy.get('.ProseMirror').type('1. List Item 1{enter}{enter}Paragraph') + + cy.get('.ProseMirror').find('li').its('length').should('eq', 1) + + cy.get('.ProseMirror').find('p').should('contain', 'Paragraph') + }) + + it('should make a ordered list from a number', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.clearContent() + }) + + cy.get('.ProseMirror').type('1. List Item 1{enter}List Item 2') + + cy.get('.ProseMirror').find('li:nth-child(1)').should('contain', 'List Item 1') + + cy.get('.ProseMirror').find('li:nth-child(2)').should('contain', 'List Item 2') + }) + + it('should make a ordered list from a number other than number one', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.clearContent() + }) + + cy.get('.ProseMirror').type('2. List Item 1{enter}List Item 2') + + cy.get('.ProseMirror').find('ol').should('have.attr', 'start', '2') + }) + + it('should remove the ordered list after pressing backspace', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.clearContent() + }) + + cy.get('.ProseMirror').type('1. {backspace}Example') + + cy.get('.ProseMirror').find('p').should('contain', '1. Example') + }) +}) diff --git a/demos/src/Nodes/OrderedList/React/styles.scss b/demos/src/Nodes/OrderedList/React/styles.scss new file mode 100644 index 00000000..d7d0f5ad --- /dev/null +++ b/demos/src/Nodes/OrderedList/React/styles.scss @@ -0,0 +1,11 @@ +/* Basic editor styles */ +.ProseMirror { + > * + * { + margin-top: 0.75em; + } + + ul, + ol { + padding: 0 1rem; + } +}