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/nodes/blockquote.md Normal file
View File

@@ -0,0 +1,34 @@
# 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" />

36
docs/src/docPages/api/nodes/bullet-list.md Normal file
View File

@@ -0,0 +1,36 @@
# 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" />

38
docs/src/docPages/api/nodes/code-block.md Normal file
View File

@@ -0,0 +1,38 @@
# 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" />

23
docs/src/docPages/api/nodes/document.md Normal file
View File

@@ -0,0 +1,23 @@
# 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" />

30
docs/src/docPages/api/nodes/hard-break.md Normal file
View File

@@ -0,0 +1,30 @@
# 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/nodes/heading.md Normal file
View File

@@ -0,0 +1,34 @@
# 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/nodes/horizontal-rule.md Normal file
View File

@@ -0,0 +1,32 @@
# 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/nodes/image.md Normal file
View File

@@ -0,0 +1,21 @@
# 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" />

34
docs/src/docPages/api/nodes/list-item.md Normal file
View File

@@ -0,0 +1,34 @@
# 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 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.
:::
```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" />

36
docs/src/docPages/api/nodes/ordered-list.md Normal file
View File

@@ -0,0 +1,36 @@
# 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/nodes/paragraph.md Normal file
View File

@@ -0,0 +1,35 @@
# 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" />

28
docs/src/docPages/api/nodes/task-item.md Normal file
View File

@@ -0,0 +1,28 @@
# 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.
:::
```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
*None*
## Source code
[packages/extension-task-item/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-item/)
## Usage
<demo name="Extensions/TaskItem" />

31
docs/src/docPages/api/nodes/task-list.md Normal file
View File

@@ -0,0 +1,31 @@
# 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/nodes/text.md Normal file
View File

@@ -0,0 +1,21 @@
# 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/nodes/todo-item.md Normal file
View File

@@ -0,0 +1,17 @@
# 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/nodes/todo-list.md Normal file
View File

@@ -0,0 +1,69 @@
# 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>
```