mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-11-28 23:59:25 +08:00
add more content, add tests to the tasklist extension
This commit is contained in:
Hans Pagel
parent
34a3a7fe26
commit
d69b8778d6
119
docs/src/demos/Nodes/TaskList/index.spec.js
Normal file
119
docs/src/demos/Nodes/TaskList/index.spec.js
Normal 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')
|
||||
})
|
||||
})
|
||||
@ -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.
|
||||
|
||||
@ -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/) |
|
||||
|
||||
@ -5,7 +5,7 @@ Type <code>* </code>, <code>- </code> or <code>+ </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
|
||||
|
||||
@ -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`
|
||||
|
||||
@ -5,7 +5,7 @@ Type <code>1. </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
|
||||
@ -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`
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>[ ] </code> or <code>[x] </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" />
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user