docs: update content

This commit is contained in:
Hans Pagel
2021-02-04 17:33:59 +01:00
parent d40131d8d1
commit ac97e393d1
14 changed files with 96 additions and 55 deletions

View File

@@ -3,7 +3,7 @@
## toc
## Introduction
Extensions are the way to add functionality to tiptap. By default tiptap comes bare, without any of them, but we have a long list of extensions that are ready to be used with tiptap.
Extensions add new capabilities to tiptap. [Nodes](/api/nodes) and [marks](/api/marks) are rendered in HTML. Extensions cant add to the schema, but can add functionality or change the behaviour of the editor.
## List of provided extensions
| Title | Default Extension | Source Code |
@@ -19,7 +19,7 @@ Extensions are the way to add functionality to tiptap. By default tiptap comes b
| [TextAlign](/api/extensions/text-align) | | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-align/) |
| [Typography](/api/extensions/typography) | | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-typography/) |
You dont have to use it, but we prepared a `@tiptap/vue-starter-kit` which includes the most common extensions. Learn [how you can use the `defaultExtensions()`](/examples/default).
You dont have to use it, but we prepared a `@tiptap/starter-kit` which includes the most common extensions. See an example on [how to use `defaultExtensions()`](/examples/default).
## How extensions work
Although tiptap tries to hide most of the complexity of ProseMirror, its built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. Youll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap.

View File

@@ -3,8 +3,7 @@
## toc
## Introduction
TODO
Marks add new capabilities to tiptap. Marks are like different types of inline styling, for example bold, italic or highlights.
## List of supported marks
| Title | Default Extension | Source Code |

View File

@@ -3,8 +3,7 @@
## toc
## Introduction
TODO
Nodes add new capabilities to tiptap. Nodes are like block types, for example a paragraph, heading, or code block.
## List of supported nodes
| Title | Default Extension | Source Code |
@@ -29,3 +28,27 @@ TODO
| [TaskList](/api/nodes/task-list) | | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-list/) |
| [TaskItem](/api/nodes/task-item) | | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-item/) |
| [Text](/api/nodes/text) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/) |
## Create a new node
Youre free to create your own nodes for tiptap. Here is the boilerplate code thats need to create and register your own node:
```js
import { Node } from '@tiptap/core'
const CustomNode = Node.create({
// Your code here
})
const editor = new Editor({
extensions: [
// Register your custom node with the editor.
CustomNode,
// … and dont forget all other extensions.
Document,
Paragraph,
Text,
// …
],
```
Learn [more about custom extensions in our guide](/guide/build-extensions).

View File

@@ -1,5 +1,8 @@
# HTML
TODO
[![Version](https://img.shields.io/npm/v/@tiptap/html.svg?label=version)](https://www.npmjs.com/package/@tiptap/html)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/html.svg)](https://npmcharts.com/compare/@tiptap/html?minimal=true)
The utility helps rendering JSON content as HTML without an editor instance, for example on the server side. All it needs is a JSON and an array of extensions.
## Source code
[packages/html/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/html/)

View File

@@ -1,5 +1,8 @@
# Suggestion
TODO
[![Version](https://img.shields.io/npm/v/@tiptap/suggestion.svg?label=version)](https://www.npmjs.com/package/@tiptap/suggestion)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/suggestion.svg)](https://npmcharts.com/compare/@tiptap/suggestion?minimal=true)
This utility helps with all kinds of suggestions in the editor. Have a look at the [`Mention`](/api/nodes/mention), [`Hashtag`](/api/nodes/hashtag) or [`Emoji`](/api/nodes/emoji) node to see it in action.
## Settings
| Option | Type | Default | Description |
@@ -13,13 +16,6 @@ TODO
| items | `Function` | `() => {}` | Pass an array of filtered suggestions, can be async. |
| render | `Function` | `() => ({})` | A render function for the autocomplete popup. |
## Render
TODO
## Source code
[packages/suggestion/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/suggestion/)
## Usage
* [`Emoji`](/api/nodes/emoji)
* [`Hashtag`](/api/nodes/hashtag)
* [`Mention`](/api/nodes/mention)