mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-11-27 23:15:15 +08:00
Merge branch 'main' of https://github.com/ueberdosis/tiptap into docs/remove-gridsome
# Conflicts: # docs/experiments/collaboration-annotation.md # docs/experiments/global-drag-handle.md
This commit is contained in:
Philipp Kühn
commit
569aa15c4f
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="setLink" :class="{ 'is-active': editor.isActive('link') }">
|
||||
link
|
||||
setLink
|
||||
</button>
|
||||
<button @click="editor.chain().focus().unsetLink().run()" v-if="editor.isActive('link')">
|
||||
remove
|
||||
unsetLink
|
||||
</button>
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
@ -36,7 +36,9 @@ export default {
|
||||
Paragraph,
|
||||
Text,
|
||||
Bold,
|
||||
Link,
|
||||
Link.configure({
|
||||
openOnClick: false,
|
||||
}),
|
||||
],
|
||||
content: `
|
||||
<p>
|
||||
@ -51,8 +53,27 @@ export default {
|
||||
|
||||
methods: {
|
||||
setLink() {
|
||||
const url = window.prompt('URL')
|
||||
const previousUrl = this.editor.getAttributes('link').href
|
||||
const url = window.prompt('URL', previousUrl)
|
||||
|
||||
// cancelled
|
||||
if (url === null) {
|
||||
return
|
||||
}
|
||||
|
||||
// empty
|
||||
if (url === '') {
|
||||
this.editor
|
||||
.chain()
|
||||
.focus()
|
||||
.extendMarkRange('link')
|
||||
.unsetLink()
|
||||
.run()
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
// update link
|
||||
this.editor
|
||||
.chain()
|
||||
.focus()
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Commands
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
The editor provides a ton of commands to programmatically add or change content or alter the selection. If you want to build your own editor you definitely want to learn more about them.
|
||||
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# createParagraphNear
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# deleteNode
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# deleteRange
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# deleteSelection
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# enter
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# exitCode
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# insertContentAt
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# joinBackward
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
# joinForward
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
https://prosemirror.net/docs/ref/#commands.joinForward
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# keyboardShortcut
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# liftEmptyBlock
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# liftListItem
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# lift
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# newlineInCode
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# resetAttributes
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# scrollIntoView
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# selectNodeBackward
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# selectNodeForward
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# selectParentNode
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# setMark
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# setNodeSelection
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# setNode
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# sinkListItem
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# splitBlock
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# splitListItem
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# toggleList
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# toggleMark
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# toggleNode
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# toggleWrap
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# undoInputRule
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# unsetAllMarks
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# unsetMark
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
# wrapInList
|
||||
|
||||
<ContentMissing />
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Editor
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
This class is a central building block of tiptap. It does most of the heavy lifting of creating a working [ProseMirror](https://ProseMirror.net/) editor such as creating the [`EditorView`](https://ProseMirror.net/docs/ref/#view.EditorView), setting the initial [`EditorState`](https://ProseMirror.net/docs/ref/#state.Editor_State) and so on.
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Events
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
The editor fires a few different events that you can hook into. Let’s have a look at all the available events first:
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Extensions
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
Extensions add new capabilities to tiptap and you’ll read the word extension here very often. Actually, there are literal Extensions. Those can’t add to the schema, but can add functionality or change the behaviour of the editor.
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Keyboard Shortcuts
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
tiptap comes with sensible keyboard shortcut defaults. Depending on what you want to use it for, you’ll probably want to change those keyboard shortcuts to your liking. Let’s have a look at what we defined for you, and show you how to change it then!
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Marks
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
One or multiple marks can be applied to [nodes](/api/nodes), for example to add inline formatting like bold and italic, or other additional information.
|
||||
|
||||
|
||||
@ -36,6 +36,13 @@ yarn add @tiptap/extension-link
|
||||
This extension doesn’t bind a specific keyboard shortcut. You would probably open your custom UI on `Mod-k` though.
|
||||
:::
|
||||
|
||||
## Get the current value
|
||||
Did you know that you can use [`getAttributes`](/api/editor#methods) to find out which attributes, for example which href, is currently set? Don’t confuse it with a [command](/api/commands) (which changes the state), it’s just a method. Here is how that could look like:
|
||||
|
||||
```js
|
||||
this.editor.getAttributes('link').href
|
||||
```
|
||||
|
||||
## Source code
|
||||
[packages/extension-link/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-link/)
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Nodes
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
If you think of the document as a tree, then nodes are just a type of content in that tree. Examples of nodes are paragraphs, headings, or code blocks. But nodes don’t have to be blocks. They can also be rendered inline with the text, for example for **@mentions**.
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Schema
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
Unlike many other editors, tiptap is based on a [schema](https://prosemirror.net/docs/guide/#schema) that defines how your content is structured. That enables you to define the kind of nodes that may occur in the document, its attributes and the way they can be nested.
|
||||
|
||||
|
||||
@ -4,16 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Changelog
|
||||
|
||||
## toc
|
||||
|
||||
:::pro Help us fill this page!
|
||||
A well-written changelog needs attention to detail, a great understanding of the project and time to write.
|
||||
|
||||
Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! With nearly 300 sponsors we are half way there already.
|
||||
|
||||
Join them and become a sponsor! Enable us to put more time into open source and we’ll fill this page and keep it up to date for you.
|
||||
|
||||
--
|
||||
|
||||
[Become a sponsor on GitHub →](https://github.com/sponsors/ueberdosis)
|
||||
:::warning
|
||||
Oops, we didn’t find time to fill this page. Writing documentation needs attention to detail, a great understanding of the project and time to write. Though tiptap is used by thousands of developers all around the world, it’s still a side project for us. Let’s change that and make open source our full-time job! [Become a sponsor!](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -8,8 +8,6 @@ tableOfContents: true
|
||||
Using the collaborative editing commercially? [Become a sponsor](/sponsor) to fund its development!
|
||||
:::
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
This example shows how you can use tiptap to let multiple users collaborate in the same document in real-time.
|
||||
|
||||
|
||||
@ -4,13 +4,11 @@ Congratulations! You’ve found our playground with a list of experiments. Be aw
|
||||
## Experimental examples
|
||||
* [Linter](/experiments/linter)
|
||||
* [Content of multiple editors in a single Y.js](/experiments/multiple-editors)
|
||||
* [Global drag handle](/experiments/global-drag-handle)
|
||||
* [Generic Figure](/experiments/generic-figure)
|
||||
|
||||
## Experimental extensions
|
||||
* [@tiptap/extension-command-menu](/experiments/commands)
|
||||
* [@tiptap/extension-iframe](/experiments/embeds)
|
||||
* [@tiptap/extension-toggle-list](/experiments/details)
|
||||
* [@tiptap/extension-collaboration-annotation](/experiments/collaboration-annotation)
|
||||
* [@tiptap/extension-trailing-node](/experiments/trailing-node)
|
||||
* [@tiptap/extension-figure](/experiments/figure)
|
||||
|
||||
@ -1,46 +0,0 @@
|
||||
# CollaborationAnnotation
|
||||
<!-- [](https://www.npmjs.com/package/@tiptap/extension-collaboration-annotation)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-collaboration-annotation?minimal=true) -->
|
||||
|
||||
⚠️ Experiment
|
||||
|
||||
:::warning Don’t use this in production
|
||||
This extension still has major issues (for example https://github.com/yjs/y-prosemirror/issues/44). We’re looking for funding to finish the extension. If you think you can help with that, reach out to humans@tiptap.dev!
|
||||
:::
|
||||
|
||||
Annotations can be used to add additional information to the content, for example comments. They live on a different level than the actual editor content.
|
||||
|
||||
<!-- :::pro Pro Extension
|
||||
We kindly ask you to [sponsor our work](/sponsor) when using this extension in production.
|
||||
::: -->
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-collaboration-annotation
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-collaboration-annotation
|
||||
```
|
||||
|
||||
This extension requires the [`Collaboration`](/api/extensions/collaboration) extension.
|
||||
|
||||
## Settings
|
||||
| Option | Type | Default | Description |
|
||||
| -------- | -------- | ----------- | ---------------------------------------------------------------------------------- |
|
||||
| document | `Object` | `null` | An initialized Y.js document. |
|
||||
| field | `String` | `'default'` | Name of a Y.js map, can be changed to sync multiple fields with one Y.js document. |
|
||||
| map | `Object` | `null` | A raw Y.js map, can be used instead of `document` and `field`. |
|
||||
|
||||
## Commands
|
||||
| Command | Parameters | Description |
|
||||
| ---------------- | ---------- | ------------------------------------------------------------------------- |
|
||||
| addAnnotation | data | Adds an annotation to the current selection, takes a string or an object. |
|
||||
| updateAnnotation | id, data | Update the data that’s associated with an annotation. |
|
||||
| deleteAnnotation | id | Remove an annotation. |
|
||||
|
||||
<!-- ## Source code
|
||||
[packages/extension-collaboration-annotation/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration-annotation/) -->
|
||||
|
||||
## Usage
|
||||
<tiptap-demo name="Experiments/CollaborationAnnotation"></tiptap-demo>
|
||||
@ -1,8 +0,0 @@
|
||||
# GlobalDragHandle
|
||||
|
||||
⚠️ Experiment
|
||||
|
||||
## Issues
|
||||
* We’re working on a better, more solid implementation. :) Give us some more time, and please, don’t ask when it’s ready. The best thing to speed up the development is to [sponsor our work](/sponsor) on GitHub.
|
||||
|
||||
<tiptap-demo name="Experiments/GlobalDragHandle"></tiptap-demo>
|
||||
@ -8,8 +8,6 @@ tableOfContents: true
|
||||
We need your support to maintain, update, support and develop tiptap. If you’re waiting for progress here, [become a sponsor and fund our work](/sponsor).
|
||||
:::
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
We strive to make tiptap accessible to everyone, but to be honest, there’s not much work done now. From our current understanding, that’s what needs to be done:
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Collaborative editing
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
Real-time collaboration, syncing between different devices and working offline used to be hard. We provide everything you need to keep everything in sync, conflict-free with the power of [Y.js](https://github.com/yjs/yjs). The following guide explains all things to take into account when you consider to make tiptap collaborative. Don’t worry, a production-grade setup doesn’t require much code.
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Configuration
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
For most cases it’s enough to say where tiptap should be rendered (`element`), what functionalities you want to enable (`extensions`) and what the initial document should be (`content`).
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Custom extensions
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
One of the strengths of tiptap is its extendability. You don’t depend on the provided extensions, it is intended to extend the editor to your liking.
|
||||
|
||||
@ -304,6 +302,45 @@ This looks for `<strong>` and `<b>` tags, and any HTML tag with an inline style
|
||||
|
||||
As you can see, you can optionally pass a `getAttrs` callback, to add more complex checks, for example for specific HTML attributes. The callback gets passed the HTML DOM node, except when checking for the `style` attribute, then it’s the value.
|
||||
|
||||
#### Using getAttrs
|
||||
The `getAttrs` function you’ve probably noticed in the example has two purposes:
|
||||
|
||||
1. Check the HTML attributes to decide whether a rule matches (and a mark or node is created from that HTML). When the function returns `false`, it’s not matching.
|
||||
2. Get the DOM Element and use the HTML attributes to set your mark or node attributes accordingly:
|
||||
|
||||
```js
|
||||
parseHTML() {
|
||||
return [
|
||||
{
|
||||
tag: 'span',
|
||||
getAttrs: element => {
|
||||
// Check if the element has an attribute
|
||||
element.hasAttribute('style')
|
||||
// Get an inline style
|
||||
element.style.color
|
||||
// Get a specific attribute
|
||||
element.getAttribute('data-color')
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
```
|
||||
|
||||
You can return an object with the attribute as the key and the parsed value to set your mark or node attribute. We would recommend to use the `parseHTML` inside `addAttributes()`, though. That will keep your code cleaner.
|
||||
|
||||
```js
|
||||
addAttributes() {
|
||||
return {
|
||||
color: {
|
||||
// Set the color attribute according to the value of the `data-color` attribute
|
||||
parseHTML: element => element.getAttribute('data-color'),
|
||||
}
|
||||
}
|
||||
},
|
||||
```
|
||||
|
||||
Read more about `getAttrs` and all other `ParseRule` properties in the [ProseMirror reference](https://prosemirror.net/docs/ref/#model.ParseRule).
|
||||
|
||||
### Commands
|
||||
```js
|
||||
import Paragraph from '@tiptap/extension-paragraph'
|
||||
@ -312,7 +349,7 @@ const CustomParagraph = Paragraph.extend({
|
||||
addCommands() {
|
||||
return {
|
||||
paragraph: () => ({ commands }) => {
|
||||
return commands.toggleNode('paragraph', 'paragraph')
|
||||
return commands.setNode('paragraph')
|
||||
},
|
||||
}
|
||||
},
|
||||
@ -489,14 +526,14 @@ export const EventHandler = Extension.create({
|
||||
```
|
||||
|
||||
### Node views (Advanced)
|
||||
For advanced use cases, where you need to execute JavaScript inside your nodes, for example to render a sophisticated link preview, you need to learn about node views.
|
||||
For advanced use cases, where you need to execute JavaScript inside your nodes, for example to render a sophisticated interface around an image, you need to learn about node views.
|
||||
|
||||
They are really powerful, but also complex. In a nutshell, you need to return a parent DOM element, and a DOM element where the content should be rendered in. Look at the following, simplified example:
|
||||
|
||||
```js
|
||||
import Link from '@tiptap/extension-link'
|
||||
import Image from '@tiptap/extension-image'
|
||||
|
||||
const CustomLink = Link.extend({
|
||||
const CustomImage = Image.extend({
|
||||
addNodeView() {
|
||||
return () => {
|
||||
const container = document.createElement('div')
|
||||
@ -517,7 +554,7 @@ const CustomLink = Link.extend({
|
||||
})
|
||||
```
|
||||
|
||||
There is a whole lot to learn about node views, so head over to the [dedicated section in our guide about node views](/guide/node-views) for more information. If you’re looking for a real-world example, look at the source code of the [`TaskItem`](/api/nodes/task-item) node. This is using a node view to render the checkboxes.
|
||||
There is a whole lot to learn about node views, so head over to the [dedicated section in our guide about node views](/guide/node-views) for more information. If you are looking for a real-world example, look at the source code of the [`TaskItem`](/api/nodes/task-item) node. This is using a node view to render the checkboxes.
|
||||
|
||||
## Create new extensions
|
||||
You can build your own extensions from scratch and you know what? It’s the same syntax as for extending existing extension described above.
|
||||
|
||||
@ -4,5 +4,3 @@ tableOfContents: true
|
||||
|
||||
# Overwrite & extend
|
||||
|
||||
## toc
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Create menus
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
tiptap comes very raw, but that’s a good thing. You have full control about the appearance of it.
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Interactive node views
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
Node views are the best thing since sliced bread, at least if you are a fan of customization (and bread). With node views you can add interactive nodes to your editor. That can literally be everything. If you can write it in JavaScript, you can use it in your editor.
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Examples
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
Node views enable you to fully customize your nodes. We are collecting a few different examples here. Feel free to copy them and start building on them.
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Node views with JavaScript
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
Using frameworks like Vue or React can feel too complex, if you’re used to work without those two. Good news: You can use Vanilla JavaScript in your node views. There is just a little bit you need to know, but let’s go through this one by one.
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Node views with React
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
Using Vanilla JavaScript can feel complex if you are used to work in React. Good news: You can use regular React components in your node views, too. There is just a little bit you need to know, but let’s go through this one by one.
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Node views with Vue
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
Using Vanilla JavaScript can feel complex if you are used to work in Vue. Good news: You can use regular Vue components in your node views, too. There is just a little bit you need to know, but let’s go through this one by one.
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Output
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
You can store your content as a JSON object or as a good old HTML string. Both work fine. And of course, you can pass both formats to the editor to restore your content. Here is an interactive example, that exports the content as HTML and JSON when the document is changed:
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Styling
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
tiptap is headless, that means there is no styling provided. That also means, you are in full control of how your editor looks. The following methods allow you to apply custom styles to the editor.
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Working with TypeScript
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
The whole tiptap is code base is written in TypeScript. If you haven’t heard of it or never used it, no worries. You don’t have to.
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Impressum
|
||||
|
||||
## toc
|
||||
|
||||
## Contact
|
||||
|
||||
Information provided according to Sec. 5 German Telemedia Act (TMG)
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Installation
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
tiptap is framework-agnostic and even works with Vanilla JavaScript (if that’s your thing). The following integration guides help you integrating tiptap in your JavaScript project.
|
||||
|
||||
|
||||
@ -5,8 +5,6 @@ tableOfContents: true
|
||||
|
||||
# Alpine.js
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
The following guide describes how to integrate tiptap with your [Alpine.js](https://github.com/alpinejs/alpine) project.
|
||||
|
||||
|
||||
@ -5,8 +5,6 @@ tableOfContents: true
|
||||
|
||||
# Livewire
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
The following guide describes how to integrate tiptap with your [Livewire](https://laravel-livewire.com/) project.
|
||||
|
||||
|
||||
@ -5,8 +5,6 @@ tableOfContents: true
|
||||
|
||||
# Nuxt.js
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
The following guide describes how to integrate tiptap with your [Nuxt.js](https://nuxtjs.org/) project.
|
||||
|
||||
|
||||
@ -5,8 +5,6 @@ tableOfContents: true
|
||||
|
||||
# React
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
The following guide describes how to integrate tiptap with your [React](https://reactjs.org/) project.
|
||||
|
||||
|
||||
@ -5,8 +5,6 @@ tableOfContents: true
|
||||
|
||||
# Svelte
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
The following guide describes how to integrate tiptap with your [SvelteKit](https://kit.svelte.dev/) project.
|
||||
|
||||
|
||||
@ -5,8 +5,6 @@ tableOfContents: true
|
||||
|
||||
# Vue.js 2
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
The following guide describes how to integrate tiptap with your [Vue](https://vuejs.org/) CLI project.
|
||||
|
||||
|
||||
@ -5,8 +5,6 @@ tableOfContents: true
|
||||
|
||||
# Vue.js 3
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
The following guide describes how to integrate tiptap with your [Vue](https://vuejs.org/) CLI project.
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Introduction
|
||||
|
||||
## toc
|
||||
|
||||
## What’s tiptap?
|
||||
[](https://www.npmjs.com/package/@tiptap/core)
|
||||
[](https://npmcharts.com/compare/@tiptap/core?minimal=true)
|
||||
@ -19,3 +17,5 @@ Create exactly the rich text editor you want out of customizable building blocks
|
||||
## What does “headless” mean?
|
||||
There is no provided user interface, you are absolutely free to build whatever interface you want. No need to overwrite any class, to use `!important` or other hacks, just write whatever you like in the setup you are used to.
|
||||
|
||||
## Why should I use tiptap?
|
||||
[ProseMirror](https://ProseMirror.net) is a well-written, reliable and very powerful editor toolkit. It’s not so much the ready-to-use editor most people look for, but with tiptap you can start in minutes, choose from tons of amazing extensions and still have that powerful ProseMirror API accessible when you really need it.
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Contributing
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
tiptap would be nothing without its lively community. Contributions have always been and will always be welcome. Here is a little bit you should know, before you send your contribution:
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Upgrade Guide
|
||||
|
||||
## toc
|
||||
|
||||
## Reasons to upgrade to tiptap 2.x
|
||||
Yes, it’s tedious work to upgrade your favorite text editor to a new API, but we made sure you’ve got enough reasons to upgrade to the newest version
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# Privacy Policy
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
We value your privacy and question everything that stores or processes your personal information. With that in mind, we still need a few external services to publish tiptap.
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@ tableOfContents: true
|
||||
|
||||
# About the project
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
To deliver a top-notch developer experience and user experience, we put ~~hundreds~~ thousands of hours of unpaid work into tiptap. Your funding helps us to make this work more and more financially sustainable. This enables us to provide helpful support, maintain all our packages, keep everything up to date, and develop new features and extensions for tiptap.
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user