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

docs: update content

Browse Source
This commit is contained in:
Hans Pagel
2021-01-20 17:58:53 +01:00
parent 0685e33cca
commit 48cbca07dd
10 changed files with 874 additions and 439 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/src/docPages/api/extensions.md
View File

@@ -20,6 +20,13 @@ Extensions are the way to add functionality to tiptap. By default tiptap comes b
You don’t 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/basic).
## How extensions work
Although tiptap tries to hide most of the complexity of ProseMirror, it’s built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. You’ll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap.
Existing [nodes](/api/nodes), [marks](/api/marks) and [extensions](/api/extensions) can give you a good impression on how to approach your own extensions. To make it easier to switch between the documentation and the source code, we linked to the file on GitHub from every single extension documentation page.
We recommend to start with customizing existing extensions first, and create your own extensions with the gained knowledge later. That’s why all the below examples extend existing extensions, but all examples will work on newly created extensions aswell.
## Create a new extension
You’re free to create your own extensions for tiptap. Here is the boilerplate code that’s need to create and register your own extension:

21
docs/src/docPages/api/nodes/mention.md
View File

@@ -1,4 +1,5 @@
# Mention
Honestly, the mention node is amazing. It adds support for `@mentions`, for example to ping users, and provides full control over the rendering.
## Installation
```bash
@@ -10,22 +11,10 @@ yarn add @tiptap/extension-mention
```
## Settings
| Option | Type | Default | Description |
| -------------- | -------- | -------------------------- | ---------------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
| suggestion | `Object` | `{ char: '@', command: … ` | [Suggestion utility](/api/utilities/suggestion) |
## Settings for suggestions
| Option | Type | Default | Description |
| --------------- | ---------- | -------------- | ----------------------------------------------------------- |
| char | `String` | `'@'` | The character that triggers the autocomplete popup. |
| allowSpaces | `Boolean` | `false` | Allows or disallows spaces in suggested items. |
| startOfLine | `Boolean` | `false` | Trigger the autocomplete popup at the start of a line only. |
| decorationTag | `String` | `'span'` | The HTML tag that should be rendered for the suggestion. |
| decorationClass | `String` | `'suggestion'` | A CSS class that should be added to the suggestion. |
| command | `Function` | `() => {}'` | Executed when a suggestion is selected. |
| items | `Function` | `() => {}` | Pass an array of filtered suggestions, can be async. |
| render | `Function` | `() => ({})` | A render function for the autocomplete popup. |
| Option | Type | Default | Description |
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
| suggestion | `Object` | `{ … }` | [Read more](/api/utilities/suggestion) |
## Source code
[packages/extension-mention/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-mention/)

9
docs/src/docPages/api/schema.md
View File

@@ -154,6 +154,15 @@ Node.create({
})
```
One example is the [`Mention`](/api/nodes/mention) extension, which somehow looks like text, but behaves more like a single unit. As this doesn’t have editable text content, it’s empty when you copy such node. Good news though, you can control that. Here is the example from the [`Mention`](/api/nodes/mention) extension:
```js
// Used to convert an atom node to plain text
renderText({ node }) {
return `@${node.attrs.id}`
},
```
#### Selectable
Besides the already visible text selection, there is an invisible node selection. If you want to make your nodes selectable, you can configure it like this: