add more content, add tests to the tasklist extension

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

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.

View File

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

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 youll get a SyntaxError.
This extension requires the [`ListItem`](/api/nodes/list-item) extension.
:::
```bash

View File

@@ -2,8 +2,8 @@
The ListItem extension adds support for the `<li>` HTML tag. Its used for bullet lists and ordered lists and cant 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 doesnt 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`

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 youll 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`&nbsp;`Shift`&nbsp;`9`

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 doesnt work without at least using one of them.
::: warning Use with TaskList
This extension requires the [`TaskList`](/api/nodes/task-list) extension.
:::
```bash

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 doesnt require any framework, its 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 youll 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" />

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 youre 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 youre 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'