From d69b8778d6f1866cf292c9f1ed5e7bc93a263d62 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Tue, 3 Nov 2020 17:05:27 +0100 Subject: [PATCH] add more content, add tests to the tasklist extension --- docs/src/demos/Nodes/TaskList/index.spec.js | 119 ++++++++++++++++++ .../demos/Nodes/{Text => }/TaskList/index.vue | 0 docs/src/docPages/api/commands.md | 2 +- docs/src/docPages/api/marks.md | 16 +-- docs/src/docPages/api/nodes/bullet-list.md | 2 +- docs/src/docPages/api/nodes/list-item.md | 7 +- docs/src/docPages/api/nodes/ordered-list.md | 8 +- docs/src/docPages/api/nodes/task-item.md | 4 +- docs/src/docPages/api/nodes/task-list.md | 12 +- docs/src/docPages/overview/upgrade-guide.md | 2 +- docs/src/links.yaml | 1 - 11 files changed, 145 insertions(+), 28 deletions(-) create mode 100644 docs/src/demos/Nodes/TaskList/index.spec.js rename docs/src/demos/Nodes/{Text => }/TaskList/index.vue (100%) diff --git a/docs/src/demos/Nodes/TaskList/index.spec.js b/docs/src/demos/Nodes/TaskList/index.spec.js new file mode 100644 index 00000000..6a572062 --- /dev/null +++ b/docs/src/demos/Nodes/TaskList/index.spec.js @@ -0,0 +1,119 @@ +context('/api/nodes/task-list', () => { + before(() => { + cy.visit('/api/nodes/task-list') + }) + + beforeEach(() => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.setContent('

Example Text

') + editor.selectAll() + }) + }) + + it('should parse unordered lists correctly', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.setContent('') + expect(editor.getHTML()).to.eq('') + }) + }) + + it('should parse unordered lists without paragraphs correctly', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.setContent('') + expect(editor.getHTML()).to.eq('') + }) + }) + + it('the button should make the selected line a task list item', () => { + cy.get('.ProseMirror ul') + .should('not.exist') + + cy.get('.ProseMirror ul li') + .should('not.exist') + + cy.get('.demo__preview button:nth-child(1)') + .click() + + cy.get('.ProseMirror') + .find('ul[data-type="task_list"]') + .should('contain', 'Example Text') + + cy.get('.ProseMirror') + .find('ul[data-type="task_list"] li') + .should('contain', 'Example Text') + }) + + it('the button should toggle the task list', () => { + cy.get('.ProseMirror ul') + .should('not.exist') + + cy.get('.demo__preview button:nth-child(1)') + .click() + + cy.get('.ProseMirror') + .find('ul[data-type="task_list"]') + .should('contain', 'Example Text') + + cy.get('.demo__preview button:nth-child(1)') + .click() + + cy.get('.ProseMirror ul') + .should('not.exist') + }) + + it('should leave the list with double enter', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.clearContent() + }) + + cy.get('.ProseMirror') + .type('[ ] 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 task list from square brackets', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.clearContent() + }) + + cy.get('.ProseMirror') + .type('[ ] List Item 1{enter}List Item 2') + + cy.get('.ProseMirror') + .find('li:nth-child(1)') + .should('contain', 'List Item 1') + .should('have.attr', 'data-checked', 'false') + + cy.get('.ProseMirror') + .find('li:nth-child(2)') + .should('contain', 'List Item 2') + .should('have.attr', 'data-checked', 'false') + }) + + it.only('should make a task list from checked square brackets', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.clearContent() + }) + + cy.get('.ProseMirror') + .type('[x] List Item 1{enter}List Item 2') + + cy.get('.ProseMirror') + .find('li:nth-child(1)') + .should('contain', 'List Item 1') + .should('have.attr', 'data-checked', 'true') + + cy.get('.ProseMirror') + .find('li:nth-child(2)') + .should('contain', 'List Item 2') + .should('have.attr', 'data-checked', 'true') + }) +}) diff --git a/docs/src/demos/Nodes/Text/TaskList/index.vue b/docs/src/demos/Nodes/TaskList/index.vue similarity index 100% rename from docs/src/demos/Nodes/Text/TaskList/index.vue rename to docs/src/demos/Nodes/TaskList/index.vue diff --git a/docs/src/docPages/api/commands.md b/docs/src/docPages/api/commands.md index ff158b86..8956e002 100644 --- a/docs/src/docPages/api/commands.md +++ b/docs/src/docPages/api/commands.md @@ -67,4 +67,4 @@ Have a look at all of the core commands listed below. They should give you a goo | .selectAll() | Select the whole document. | ### Extensions -All extension can add additional commands (and most do), check out the specific [documentation for the provided extensions](/api/extensions) to learn more about that. Of course, you can [add your custom extensions](/guide/build-custom-extensions) with custom commands aswell. +All extension can add additional commands (and most do), check out the specific [documentation for the provided extensions](/api/extensions), [nodes](/api/nodes), and [marks](/api/marks) to learn more about that. Of course, you can [add your custom extensions](/guide/build-custom-extensions) with custom commands aswell. diff --git a/docs/src/docPages/api/marks.md b/docs/src/docPages/api/marks.md index 1c260686..31acae58 100644 --- a/docs/src/docPages/api/marks.md +++ b/docs/src/docPages/api/marks.md @@ -5,11 +5,11 @@ ## Introduction ## List of supported marks -| Title | Default Extension | Source Code | -| ----------------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------ | -| [Bold](/api/extensions/bold) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/) | -| [Code](/api/extensions/code) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/) | -| [Italic](/api/extensions/italic) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/) | -| [Link](/api/extensions/link) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-link/) | -| [Strike](/api/extensions/strike) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/) | -| [Underline](/api/extensions/underline) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/) | +| Title | Default Extension | Source Code | +| --------------------------------- | ----------------- | ------------------------------------------------------------------------------------------- | +| [Bold](/api/marks/bold) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/) | +| [Code](/api/marks/code) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/) | +| [Italic](/api/marks/italic) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/) | +| [Link](/api/marks/link) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-link/) | +| [Strike](/api/marks/strike) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/) | +| [Underline](/api/marks/underline) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/) | diff --git a/docs/src/docPages/api/nodes/bullet-list.md b/docs/src/docPages/api/nodes/bullet-list.md index 54ff543e..602d7219 100644 --- a/docs/src/docPages/api/nodes/bullet-list.md +++ b/docs/src/docPages/api/nodes/bullet-list.md @@ -5,7 +5,7 @@ Type * , -  or +  at the b ## Installation ::: warning Use with ListItem -The `BulletList` extension is intended to be used with the [`ListItem`](/api/extensions/list-item) extension. Make sure to import that one too, otherwise you’ll get a SyntaxError. +This extension requires the [`ListItem`](/api/nodes/list-item) extension. ::: ```bash diff --git a/docs/src/docPages/api/nodes/list-item.md b/docs/src/docPages/api/nodes/list-item.md index 16926eed..3fbc1f42 100644 --- a/docs/src/docPages/api/nodes/list-item.md +++ b/docs/src/docPages/api/nodes/list-item.md @@ -2,8 +2,8 @@ The ListItem extension adds support for the `
  • ` HTML tag. It’s used for bullet lists and ordered lists and can’t really be used without them. ## Installation -::: warning Restrictions -This extension is intended to be used with the [`BulletList`](/api/extensions/bullet-list) or [`OrderedList`](/api/extensions/ordered-list) extension. It doesn’t work without at least using one of them. +::: warning Use with BulletList and/or OrderedList +This extension requires the [`BulletList`](/api/nodes/bullet-list) or [`OrderedList`](/api/nodes/ordered-list) extension. ::: ```bash @@ -19,9 +19,6 @@ yarn add @tiptap/extension-list-item | ------ | ------ | ------- | -------------------------------------------- | | class | string | – | Add a custom class to the rendered HTML tag. | -## Commands -*None* - ## Keyboard shortcuts * New list item: `Enter` * Sink a list item: `Tab` diff --git a/docs/src/docPages/api/nodes/ordered-list.md b/docs/src/docPages/api/nodes/ordered-list.md index b5980e3d..38dc26e7 100644 --- a/docs/src/docPages/api/nodes/ordered-list.md +++ b/docs/src/docPages/api/nodes/ordered-list.md @@ -5,7 +5,7 @@ Type 1.  (or any other number followed by a dot) at the beginn ## Installation ::: warning Use with ListItem -The `OrderedList` extension is intended to be used with the [`ListItem`](/api/extensions/list-item) extension. Make sure to import that one too, otherwise you’ll get a SyntaxError. +This extension requires the [`ListItem`](/api/nodes/list-item) extension. ::: ```bash @@ -22,9 +22,9 @@ yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item | class | string | – | Add a custom class to the rendered HTML tag. | ## Commands -| Command | Parameters | Description | -| ----------- | ---------- | ---------------------- | -| orderedList | — | Toggle a ordered list. | +| Command | Parameters | Description | +| ----------- | ---------- | ----------------------- | +| orderedList | — | Toggle an ordered list. | ## Keyboard shortcuts * `Control` `Shift` `9` diff --git a/docs/src/docPages/api/nodes/task-item.md b/docs/src/docPages/api/nodes/task-item.md index 5a5738f6..be6e772c 100644 --- a/docs/src/docPages/api/nodes/task-item.md +++ b/docs/src/docPages/api/nodes/task-item.md @@ -1,8 +1,8 @@ # TaskItem ## Installation -::: warning Restrictions -This extension is intended to be used with the [`TaskList`](/api/extensions/task-list) extension. It doesn’t work without at least using one of them. +::: warning Use with TaskList +This extension requires the [`TaskList`](/api/nodes/task-list) extension. ::: ```bash diff --git a/docs/src/docPages/api/nodes/task-list.md b/docs/src/docPages/api/nodes/task-list.md index ae1bfa9e..82a74d4b 100644 --- a/docs/src/docPages/api/nodes/task-list.md +++ b/docs/src/docPages/api/nodes/task-list.md @@ -1,16 +1,18 @@ # TaskList -This extension enables you to use task lists in the editor. They are rendered as `