mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-28 23:59:25 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

add more content, add tests to the tasklist extension

Browse Source
This commit is contained in:
Hans Pagel 2020-11-03 17:05:27 +01:00
parent 34a3a7fe26
commit d69b8778d6
11 changed files with 145 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
docs/src/demos/Nodes/TaskList/index.spec.js Normal file
View File

@ -0,0 +1,119 @@
context('/api/nodes/task-list', () => {
before(() => {
cy.visit('/api/nodes/task-list')
})
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p>')
editor.selectAll()
})
})
it('should parse unordered lists correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<ul data-type="task_list"><li data-checked="true" data-type="task_item"><p>Example Text</p></li></ul>')
expect(editor.getHTML()).to.eq('<ul data-type="task_list"><li data-checked="true" data-type="task_item"><p>Example Text</p></li></ul>')
})
})
it('should parse unordered lists without paragraphs correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<ul data-type="task_list"><li data-checked="false" data-type="task_item">Example Text</li></ul>')
expect(editor.getHTML()).to.eq('<ul data-type="task_list"><li data-checked="false" data-type="task_item"><p>Example Text</p></li></ul>')
})
})
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')
})
})

0
docs/src/demos/Nodes/Text/TaskList/index.vue → docs/src/demos/Nodes/TaskList/index.vue
View File

2
docs/src/docPages/api/commands.md
View File

@ -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.

14
docs/src/docPages/api/marks.md
View File

@ -6,10 +6,10 @@
## 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/) |
| --------------------------------- | ----------------- | ------------------------------------------------------------------------------------------- |
| [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/) |

2
docs/src/docPages/api/nodes/bullet-list.md
View File

@ -5,7 +5,7 @@ Type <code>*&nbsp;</code>, <code>-&nbsp;</code> or <code>+&nbsp;</code> 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

7
docs/src/docPages/api/nodes/list-item.md
View File

@ -2,8 +2,8 @@
The ListItem extension adds support for the `<li>` 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`

6
docs/src/docPages/api/nodes/ordered-list.md
View File

@ -5,7 +5,7 @@ Type <code>1.&nbsp;</code> (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
@ -23,8 +23,8 @@ yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item
## Commands
| Command | Parameters | Description |
| ----------- | ---------- | ---------------------- |
| orderedList | — | Toggle a ordered list. |
| ----------- | ---------- | ----------------------- |
| orderedList | — | Toggle an ordered list. |
## Keyboard shortcuts
* `Control`&nbsp;`Shift`&nbsp;`9`

4
docs/src/docPages/api/nodes/task-item.md
View File

@ -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

12
docs/src/docPages/api/nodes/task-list.md
View File

@ -1,16 +1,18 @@
# TaskList
This extension enables you to use task lists in the editor. They are rendered as `<ul>` HTML tags.
This extension enables you to use task lists in the editor. They are rendered as `<ul data-type="task_list">`. This implementation doesn’t require any framework, it’s using plain JavaScript only.
Type <code>[ ]&nbsp;</code> or <code>[x]&nbsp;</code> at the beginning of a new line and it will magically transform to a task list.
## Installation
::: warning Use with TaskItem
The `TaskList` extension is intended to be used with the [`TaskItem`](/api/extensions/task-item) extension. Make sure to import that one too, otherwise you’ll get a SyntaxError.
This extension requires the [`TaskItem`](/api/nodes/task-item) extension.
:::
```bash
# With npm
# with npm
npm install @tiptap/extension-task-list @tiptap/extension-task-item
# Or: With Yarn
# with Yarn
yarn add @tiptap/extension-task-list @tiptap/extension-task-item
```
@ -28,4 +30,4 @@ yarn add @tiptap/extension-task-list @tiptap/extension-task-item
[packages/extension-task-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-list/)
## Usage
<demo name="Nodes/TaskList" />
<demo name="Nodes/TaskList" highlight="3-5,17-18,37-38" />

2
docs/src/docPages/overview/upgrade-guide.md
View File

@ -18,7 +18,7 @@ The new API will look pretty familiar too you, but there are a ton of changes th
…
### Explicitly register the Document, Text and Paragraph extensions
tiptap 1 tried to hide a few required extensions from you with the default setting `useBuiltInExtensions: true`. That setting has been removed and you’re required to import all extensions. Be sure to explicitly import at least the [Document](/api/extensions/document), [Paragraph](/api/extensions/paragraph) and [Text](/api/extensions/text) extensions.
tiptap 1 tried to hide a few required extensions from you with the default setting `useBuiltInExtensions: true`. That setting has been removed and you’re required to import all extensions. Be sure to explicitly import at least the [Document](/api/nodes/document), [Paragraph](/api/nodes/paragraph) and [Text](/api/nodes/text) extensions.
```js
import Document from '@tiptap/extension-document'

1
docs/src/links.yaml
View File

@ -135,7 +135,6 @@
link: /api/nodes/paragraph
- title: TaskList
link: /api/nodes/task-list
draft: true
- title: TaskItem
link: /api/nodes/task-item
draft: true