ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

move nodes and marks to a separate folder, add missing extensions

Browse Source
This commit is contained in:
Hans Pagel
2020-11-02 15:54:15 +01:00
parent 7ef3c04a2f
commit 4ed07ba87e
36 changed files with 193 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
docs/src/docPages/api/extensions/blockquote.md
View File

@@ -1,34 +0,0 @@
# Blockquote
The Blockquote extension enables you to use the `<blockquote>` HTML tag in the editor. This is great – you might have guessed – to use quotes in the editor.
Type <code>>&nbsp;</code> at the beginning of a new line and it will magically transform to a blockquote.
## Installation
```bash
# with npm
npm install @tiptap/extension-blockquote
# with Yarn
yarn add @tiptap/extension-blockquote
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |
## Commands
| Command | Options | Description |
| ---------- | ------- | ----------------------------- |
| blockquote | — | Wrap content in a blockquote. |
## Keyboard shortcuts
* Windows/Linux: `Control`&nbsp;`Shift`&nbsp;`9`
* macOS: `Cmd`&nbsp;`Shift`&nbsp;`9`
## Source code
[packages/extension-blockquote/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/)
## Usage
<demo name="Extensions/Blockquote" highlight="3-5,17,36" />

37
docs/src/docPages/api/extensions/bold.md
View File

@@ -1,37 +0,0 @@
# Bold
Use this extension to render text in **bold**. If you pass `<strong>`, `<b>` tags, or text with inline `style` attributes setting the `font-weight` CSS rule in the editor’s initial content, they all will be rendered accordingly.
Type `**two asterisks**` or `__two underlines__` and it will magically transform to **bold** text while you type.
::: warning Restrictions
The extension will generate the corresponding `<strong>` HTML tags when reading contents of the `Editor` instance. All text marked bold, regardless of the method will be normalized to `<strong>` HTML tags.
:::
## Installation
```bash
# with npm
npm install @tiptap/extension-bold
# with Yarn
yarn add @tiptap/extension-bold
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |
## Commands
| Command | Options | Description |
| ------- | ------- | --------------- |
| bold | — | Mark text bold. |
## Keyboard shortcuts
* Windows/Linux: `Control`&nbsp;`B`
* macOS: `Cmd`&nbsp;`B`
## Source code
[packages/extension-bold/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/)
## Usage
<demo name="Extensions/Bold" highlight="3-5,17,36" />

36
docs/src/docPages/api/extensions/bullet-list.md
View File

@@ -1,36 +0,0 @@
# BulletList
This extension enables you to use bullet lists in the editor. They are rendered as `<ul>` HTML tags,
Type <code>*&nbsp;</code>, <code>-&nbsp;</code> or <code>+&nbsp;</code> at the beginning of a new line and it will magically transform to a bullet list.
## 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.
:::
```bash
# with npm
npm install @tiptap/extension-bullet-list @tiptap/extension-list-item
# with Yarn
yarn add @tiptap/extension-bullet-list @tiptap/extension-list-item
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |
## Commands
| Command | Options | Description |
| ----------- | ------- | --------------------- |
| bullet_list | — | Toggle a bullet list. |
## Keyboard shortcuts
* `Control`&nbsp;`Shift`&nbsp;`8`
## Source code
[packages/extension-bullet-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/)
## Usage
<demo name="Extensions/BulletList" highlight="3-5,17-18,37-38" />

11
docs/src/docPages/api/extensions/code-block-highlight.md
View File

@@ -1,11 +0,0 @@
# CodeBlockHighlight
Enables you to use the `<pre>` HTML tag with auto-detected syntax highlighting in the editor.
## Settings
*None*
## Commands
*None*
## Keyboard shortcuts
*None*

38
docs/src/docPages/api/extensions/code-block.md
View File

@@ -1,38 +0,0 @@
# CodeBlock
With the CodeBlock extension you can add fenced code blocks to your documents. It’ll wrap the code in `<pre>` and `<code>` HTML tags.
Type <code>&grave;&grave;&grave;&nbsp;</code> (three backticks and a space) or <code>&Tilde;&Tilde;&Tilde;&nbsp;</code> (three tildes and a space) and a code block is instantly added for you. You can even specify the language, try writing <code>&grave;&grave;&grave;css&nbsp;</code>. That should add a `language-css` class to the `<code>`-tag.
::: warning Restrictions
The CodeBlock extension doesn’t come with styling and has no syntax highlighting built-in. It’s on our roadmap though.
:::
## Installation
```bash
# with npm
npm install @tiptap/extension-code-block
# with Yarn
yarn add @tiptap/extension-code-block
```
## Settings
| Option | Type | Default | Description |
| ------------------- | ------ | --------- | ---------------------------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |
| languageClassPrefix | string | language- | Adds a prefix to language classes that are applied to code tags. |
## Commands
| Command | Options | Description |
| --------- | ------- | ----------------------------- |
| codeBlock | — | Wrap content in a code block. |
## Keyboard shortcuts
* Windows/Linux: `Control`&nbsp;`Shift`&nbsp;`C`
* macOS: `Cmd`&nbsp;`Shift`&nbsp;`C`
## Source code
[packages/extension-code-block/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/)
## Usage
<demo name="Extensions/CodeBlock" highlight="3-5,17,36" />

32
docs/src/docPages/api/extensions/code.md
View File

@@ -1,32 +0,0 @@
# Code
The Code extensions enables you to use the `<code>` HTML tag in the editor. If you paste in text with `<code>` tags it will rendered accordingly.
Type something with <code>\`back-ticks around\`</code> and it will magically transform to `inline code` while you type.
## Installation
```bash
# with npm
npm install @tiptap/extension-code
# with Yarn
yarn add @tiptap/extension-code
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |
## Commands
| Command | Options | Description |
| ------- | ------- | ------------------------- |
| code | — | Mark text as inline code. |
## Keyboard shortcuts
* `Alt`&nbsp;<code>`</code>
## Source code
[packages/extension-code/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/)
## Usage
<demo name="Extensions/Code" highlight="3-5,17,36" />

23
docs/src/docPages/api/extensions/document.md
View File

@@ -1,23 +0,0 @@
# Document
**The `Document` extension is required**, no matter what you build with tiptap. It’s a so called “topNode”, a node that’s the home to all other nodes. Think of it like the `<body>` tag for your document.
The node is very tiny though. It defines a name of the node (`document`), is configured to be a top node (`topNode: true`) and that it can contain multiple other nodes (`block`). That’s all. But have a look yourself:
:::warning Breaking Change from 1.x → 2.x
tiptap 1 tried to hide that node from you, but it has always been there. A tiny, but important change though: **We renamed the default type from `doc` to `document`.** To keep it like that, use your own implementation of the `Document` node or migrate the stored JSON to use the new name.
:::
## Installation
```bash
# with npm
npm install @tiptap/extension-document
# with Yarn
yarn add @tiptap/extension-document
```
## Source code
[packages/extension-document/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/)
## Usage
<demo name="Extensions/Document" highlight="10,28" />

25
docs/src/docPages/api/extensions/dropcursor.md Normal file
View File

@@ -0,0 +1,25 @@
# Dropcursor
## Installation
```bash
# with npm
npm install @tiptap/extension-dropcursor
# with Yarn
yarn add @tiptap/extension-dropcursor
```
## Settings
*None*
## Commands
*None*
## Keyboard shortcuts
*None*
## Source code
[packages/extension-dropcursor/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-dropcursor/)
## Usage
<demo name="Extensions/Dropcursor" highlight="" />

25
docs/src/docPages/api/extensions/focus.md Normal file
View File

@@ -0,0 +1,25 @@
# Focus
## Installation
```bash
# with npm
npm install @tiptap/extension-focus
# with Yarn
yarn add @tiptap/extension-focus
```
## Settings
*None*
## Commands
*None*
## Keyboard shortcuts
*None*
## Source code
[packages/extension-focus/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-focus/)
## Usage
<demo name="Extensions/Focus" highlight="" />

25
docs/src/docPages/api/extensions/gapcursor.md Normal file
View File

@@ -0,0 +1,25 @@
# Gapcursor
## Installation
```bash
# with npm
npm install @tiptap/extension-gapcursor
# with Yarn
yarn add @tiptap/extension-gapcursor
```
## Settings
*None*
## Commands
*None*
## Keyboard shortcuts
*None*
## Source code
[packages/extension-gapcursor/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-gapcursor/)
## Usage
<demo name="Extensions/Gapcursor" highlight="" />

30
docs/src/docPages/api/extensions/hard-break.md
View File

@@ -1,30 +0,0 @@
# HardBreak
The HardBreak extensions adds support for the `<br>` HTML tag, which forces a line break.
## Installation
```bash
# with npm
npm install @tiptap/extension-hard-break
# with Yarn
yarn add @tiptap/extension-hard-break
```
## Settings
*None*
## Commands
| Command | Options | Description |
| --------- | ------- | ----------------- |
| hardBreak | — | Add a line break. |
## Keyboard shortcuts
* `Shift`&nbsp;`Enter`
* Windows/Linux: `Control`&nbsp;`Enter`
* macOS: `Cmd`&nbsp;`Enter`
## Source code
[packages/extension-hard-break/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/)
## Usage
<demo name="Extensions/HardBreak" highlight="3-5,17,36" />

34
docs/src/docPages/api/extensions/heading.md
View File

@@ -1,34 +0,0 @@
# Heading
The Heading extension adds support for headings of different levels. Headings are rendered with `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>` or `<h6>` HTML tags. By default all six heading levels (or styles) are enabled, but you can pass an array to only allow a few levels. Check the usage example to see how this is done.
Type <code>#&nbsp;</code> at the beginning of a new line and it will magically transform to a heading, same for <code>##&nbsp;</code>, <code>###&nbsp;</code>, <code>####&nbsp;</code>, <code>#####&nbsp;</code> and <code>######&nbsp;</code>.
## Installation
```bash
# with npm
npm install @tiptap/extension-heading
# with Yarn
yarn add @tiptap/extension-heading
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------------------ | --------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |
| levels | Array | [1, 2, 3, 4, 5, 6] | Specifies which heading levels are supported. |
## Commands
| Command | Options | Description |
| ------- | ------- | ----------------------- |
| heading | level | Creates a heading node. |
## Keyboard shortcuts
* Windows/Linux: `Control`&nbsp;`Alt`&nbsp;`1-6`
* macOS: `Cmd`&nbsp;`Alt`&nbsp;`1-6`
## Source code
[packages/extension-heading/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/)
## Usage
<demo name="Extensions/Heading" highlight="3-11,23,42-44" />

32
docs/src/docPages/api/extensions/horizontal-rule.md
View File

@@ -1,32 +0,0 @@
# HorizontalRule
Use this extension to render a `<hr>` HTML tag. If you pass `<hr>` in the editor’s initial content, it’ll be rendered accordingly.
Type three dashes (<code>---</code>) or three underscores and a space (<code>___ </code>) at the beginning of a new line and it will magically transform to a horizontal rule.
## Installation
```bash
# with npm
npm install @tiptap/extension-horizontal-rule
# with Yarn
yarn add @tiptap/extension-horizontal-rule
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |
## Commands
| Command | Options | Description |
| --------------- | ------- | ------------------------- |
| horizontalRule | — | Create a horizontal rule. |
## Keyboard shortcuts
*None*
## Source code
[packages/extension-horizontal-rule/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/)
## Usage
<demo name="Extensions/HorizontalRule" highlight="3-5,17,36" />

21
docs/src/docPages/api/extensions/image.md
View File

@@ -1,21 +0,0 @@
# Image
## Installation
```bash
# with npm
npm install @tiptap/extension-image
# with Yarn
yarn add @tiptap/extension-image
```
## Settings
| Option | Type | Default | Description |
| ------ | ------- | ------- | ------------------------ |
| inline | boolean | false | Renders the node inline. |
## Source code
[packages/extension-image/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-image/)
## Usage
<demo name="Extensions/Image" />

37
docs/src/docPages/api/extensions/italic.md
View File

@@ -1,37 +0,0 @@
# Italic
Use this extension to render text in *italic*. If you pass `<em>`, `<i>` tags, or text with inline `style` attributes setting `font-style: italic` in the editor’s initial content, they all will be rendered accordingly.
Type `*one asterisk*` or `_one underline_` and it will magically transform to *italic* text while you type.
::: warning Restrictions
The extension will generate the corresponding `<em>` HTML tags when reading contents of the `Editor` instance. All text marked italic, regardless of the method will be normalized to `<em>` HTML tags.
:::
## Installation
```bash
# with npm
npm install @tiptap/extension-italic
# with Yarn
yarn add @tiptap/extension-italic
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |
## Commands
| Command | Options | Description |
| ------- | ------- | ----------------- |
| italic | — | Mark text italic. |
## Keyboard shortcuts
* Windows/Linux: `Control`&nbsp;`I`
* macOS: `Cmd`&nbsp;`I`
## Source code
[packages/extension-italic/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/)
## Usage
<demo name="Extensions/Italic" highlight="3-5,17,36" />

39
docs/src/docPages/api/extensions/link.md
View File

@@ -1,39 +0,0 @@
# Link
The Link extension adds support for `<a>` tags to the editor. The extension is renderless too, there is no actual UI to add, modify or delete links. The usage example below uses the native JavaScript prompt to show you how that could work.
In a real world application, you would probably add a more sophisticated user interface. [Check out the example](/examples/links) to see how that could look like.
Pasted URLs will be linked automatically.
## Installation
```bash
# with npm
npm install @tiptap/extension-link
# with Yarn
yarn add @tiptap/extension-link
```
## Settings
| Option | Type | Default | Description |
| ----------- | ------- | ---------------------------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |
| openOnClick | boolean | true | If enabled, links will be opened on click. |
| rel | string | noopener noreferrer nofollow | Configure the `rel` attribute. |
| target | string | _blank | Set the default `target` of links. |
## Commands
| Command | Options | Description |
| ------- | -------------- | ----------------------------------------------------------- |
| link | href<br>target | Link the selected text. Removes a link, if `href` is empty. |
## Keyboard shortcuts
:::warning Doesn’t have a keyboard shortcut
This extension doesn’t bind a specific keyboard shortcut. You would probably open your UI on `Mod-k` though.
:::
## Source code
[packages/extension-link/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-link/)
## Usage
<demo name="Extensions/Link" highlight="3-8,19,38,55" />

34
docs/src/docPages/api/extensions/list-item.md
View File

@@ -1,34 +0,0 @@
# ListItem
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 extensions 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.
:::
```bash
# with npm
npm install @tiptap/extension-list-item
# with Yarn
yarn add @tiptap/extension-list-item
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |
## Commands
*None*
## Keyboard shortcuts
* New list item: `Enter`
* Sink a list item: `Tab`
* Lift a list item: `Shift`&nbsp;`Tab`
## Source code
[packages/extension-list-item/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-list-item/)
## Usage
<demo name="Extensions/ListItem" highlight="3-8,20-22,41-43" />

2
docs/src/docPages/api/extensions/mention.md
View File

@@ -1,2 +0,0 @@
# Mention
Enables you to use mentions in the editor.

36
docs/src/docPages/api/extensions/ordered-list.md
View File

@@ -1,36 +0,0 @@
# OrderedList
This extension enables you to use ordered lists in the editor. They are rendered as `<ol>` HTML tags,
Type <code>1.&nbsp;</code> (or any other number followed by a dot) at the beginning of a new line and it will magically transform to a ordered list.
## 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.
:::
```bash
# with npm
npm install @tiptap/extension-ordered-list @tiptap/extension-list-item
# with Yarn
yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |
## Commands
| Command | Options | Description |
| ------------ | ------- | ---------------------- |
| ordered_list | — | Toggle a ordered list. |
## Keyboard shortcuts
* `Control`&nbsp;`Shift`&nbsp;`9`
## Source code
[packages/extension-ordered-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-ordered-list/)
## Usage
<demo name="Extensions/OrderedList" highlight="3-5,17-18,37-38" />

35
docs/src/docPages/api/extensions/paragraph.md
View File

@@ -1,35 +0,0 @@
# Paragraph
Yes, the schema is very strict. Without this extension you won’t even be able to use paragraphs in the editor.
:::warning Breaking Change from 1.x → 2.x
tiptap 1 tried to hide that node from you, but it has always been there. You have to explicitly import it from now on (or use `defaultExtensions()`).
:::
## Installation
```bash
# with npm
npm install @tiptap/extension-paragraph
# with Yarn
yarn add @tiptap/extension-paragraph
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |
## Commands
| Command | Options | Description |
| --------- | ------- | -------------------------------------------- |
| paragraph | — | Transforms all selected nodes to paragraphs. |
## Keyboard shortcuts
* Windows & Linux: `Control`&nbsp;`Alt`&nbsp;`0`
* macOS: `Cmd`&nbsp;`Alt`&nbsp;`0`
## Source code
[packages/extension-paragraph/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/)
## Usage
<demo name="Extensions/Paragraph" highlight="11,29" />

2
docs/src/docPages/api/extensions/placeholder.md
View File

@@ -1,2 +0,0 @@
# Placeholder
Enables you to show placeholders on empty paragraphs.

37
docs/src/docPages/api/extensions/strike.md
View File

@@ -1,37 +0,0 @@
# Strike
Use this extension to render ~~striked text~~. If you pass `<s>`, `<del>`, `<strike>` tags, or text with inline `style` attributes setting `text-decoration: line-through` in the editor’s initial content, they all will be rendered accordingly.
Type <code>&Tilde;&Tilde;text between tildes&Tilde;&Tilde;</code> and it will be magically ~~striked through~~ while you type.
::: warning Restrictions
The extension will generate the corresponding `<s>` HTML tags when reading contents of the `Editor` instance. All text striked through, regardless of the method will be normalized to `<s>` HTML tags.
:::
## Installation
```bash
# with npm
npm install @tiptap/extension-strike
# with Yarn
yarn add @tiptap/extension-strike
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |
## Commands
| Command | Options | Description |
| ------- | ------- | --------------------------- |
| strike | — | Mark text as strikethrough. |
## Keyboard shortcuts
* Windows/Linux: `Control`&nbsp;`D`
* macOS: `Cmd`&nbsp;`D`
## Source code
[packages/extension-strike/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/)
## Usage
<demo name="Extensions/Strike" highlight="3-5,17,36" />

6
docs/src/docPages/api/extensions/table-cell.md
View File

@@ -1,6 +0,0 @@
# TableCell
Enables you to use the `<td>` HTML tag in the editor.
::: warning Restrictions
This extensions is intended to be used with the `Table` extension.
:::

6
docs/src/docPages/api/extensions/table-header.md
View File

@@ -1,6 +0,0 @@
# TableHeader
Enables you to use the `<th>` HTML tag in the editor.
::: warning Restrictions
This extensions is intended to be used with the `Table` extension.
:::

6
docs/src/docPages/api/extensions/table-row.md
View File

@@ -1,6 +0,0 @@
# TableRow
Enables you to use the `<tr>` HTML tag in the editor.
::: warning Restrictions
This extensions is intended to be used with the `Table` extension.
:::

31
docs/src/docPages/api/extensions/task-list.md
View File

@@ -1,31 +0,0 @@
# TaskList
This extension enables you to use task lists in the editor. They are rendered as `<ul>` HTML tags.
## 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.
:::
```bash
# With npm
npm install @tiptap/extension-task-list @tiptap/extension-task-item
# Or: With Yarn
yarn add @tiptap/extension-task-list @tiptap/extension-task-item
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |
## Commands
| Command | Options | Description |
| -------- | ------- | ------------------- |
| taskList | — | Toggle a task list. |
## Source code
[packages/extension-task-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-list/)
## Usage
<demo name="Extensions/TaskList" />

21
docs/src/docPages/api/extensions/text.md
View File

@@ -1,21 +0,0 @@
# Text
**The `Text` extension is required**, at least if you want to work with text of any kind and that’s very likely. This extension is a little bit different, it doesn’t even render HTML. It’s plain text, that’s all.
:::warning Breaking Change from 1.x → 2.x
tiptap 1 tried to hide that node from you, but it has always been there. You have to explicitly import it from now on (or use `defaultExtensions()`).
:::
## Installation
```bash
# with npm
npm install @tiptap/extension-text
# with Yarn
yarn add @tiptap/extension-text
```
## Source code
[packages/extension-text/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/)
## Usage
<demo name="Extensions/Text" highlight="12,30" />

17
docs/src/docPages/api/extensions/todo-item.md
View File

@@ -1,17 +0,0 @@
# TodoItem
It renders a single toggleable item of a list.
::: warning Restrictions
This extensions is intended to be used with the `TodoList` extension.
:::
## Settings
| Option | Type | Default | Description |
| ------ | ------- | ------- | ------------------------------------- |
| nested | Boolean | false | Specifies if you can nest todo lists. |
## Commands
*None*
## Keyboard shortcuts
*None*

69
docs/src/docPages/api/extensions/todo-list.md
View File

@@ -1,69 +0,0 @@
# TodoList
Renders a toggleable list of items.
::: warning Restrictions
This extensions is intended to be used with the `TodoItem` extension.
:::
## Settings
*None*
## Commands
| Command | Options | Description |
| --------- | ------- | ----------------- |
| todo_list | — | Toggle todo list. |
## Keyboard shortcuts
*None*
## Usage
```markup
<template>
<div>
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
<button type="button" :class="{ 'is-active': isActive.todo_list() }" @click="commands.todo_list">
Todo List
</button>
</editor-menu-bar>
<editor-content :editor="editor" />
</div>
</template>
<script>
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
import { TodoItem, TodoList } from 'tiptap-extensions'
export default {
components: {
EditorMenuBar,
EditorContent,
},
data() {
return {
editor: new Editor({
extensions: [
TodoItem({
nested: true,
}),
TodoList(),
],
content: `
<ul data-type="todo_list">
<li data-type="todo_item" data-done="true">
Checked item
</li>
<li data-type="todo_item" data-done="false">
Unchecked item
</li>
</ul>
`,
}),
}
},
beforeDestroy() {
this.editor.destroy()
}
}
</script>
```

17
docs/src/docPages/api/extensions/typography.md Normal file
View File

@@ -0,0 +1,17 @@
# Typography
## Installation
```bash
# with npm
npm install @tiptap/typography
# with Yarn
yarn add @tiptap/typography
```
## Source code
[packages/typography/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/typography/)
## Usage
<demo name="Extensions/Typography" highlight="" />

37
docs/src/docPages/api/extensions/underline.md
View File

@@ -1,37 +0,0 @@
# Underline
Use this extension to render text <u>underlined</u>. If you pass `<u>` tags, or text with inline `style` attributes setting `text-decoration: underline` in the editor’s initial content, they all will be rendered accordingly.
Be aware that underlined text in the Internet usually indicates that it’s a clickable link. Don’t confuse your users with underlined text.
::: warning Restrictions
The extension will generate the corresponding `<u>` HTML tags when reading contents of the `Editor` instance. All text marked underlined, regardless of the method will be normalized to `<u>` HTML tags.
:::
## Installation
```bash
# with npm
npm install @tiptap/extension-underline
# with Yarn
yarn add @tiptap/extension-underline
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | – | Add a custom class to the rendered HTML tag. |
## Commands
| Command | Options | Description |
| --------- | ------- | ------------------------ |
| underline | — | Mark text as underlined. |
## Keyboard shortcuts
* Windows/Linux: `Control`&nbsp;`U`
* macOS: `Cmd`&nbsp;`U`
## Source code
[packages/extension-underline/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/)
## Usage
<demo name="Extensions/Underline" highlight="3-5,17,36" />