mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-11-27 23:15:15 +08:00
docs: use regular case for Tiptap
This commit is contained in:
Hans Pagel
parent
3fe97621e7
commit
f45c8d0ca7
@ -5,7 +5,7 @@ tableOfContents: true
|
||||
# About the project
|
||||
|
||||
## 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.
|
||||
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.
|
||||
|
||||
Give back to the open source community and [sponsor us on GitHub](https://github.com/sponsors/ueberdosis)! ♥
|
||||
|
||||
@ -13,27 +13,27 @@ Give back to the open source community and [sponsor us on GitHub](https://github
|
||||
* Get early access to private repositories
|
||||
* Your issues and pull requests get a `sponsor ♥` label
|
||||
* Get a sponsor badge in all your comments on GitHub
|
||||
* Invest in the future of tiptap
|
||||
* Invest in the future of Tiptap
|
||||
* Give back to the open source community
|
||||
* Show support in your GitHub profile
|
||||
|
||||
Sounds good? [Sponsor us on GitHub!](https://github.com/sponsors/ueberdosis)
|
||||
|
||||
## The maintainers of tiptap
|
||||
If you are thankful for tiptap, you should say thank you to the lovely people of [überdosis](https://ueberdosis.io). The amazing company we are all building together and the amazing company that funded the initial development costs of tiptap.
|
||||
## The maintainers of Tiptap
|
||||
If you are thankful for Tiptap, you should say thank you to the lovely people of [überdosis](https://ueberdosis.io). The amazing company we are all building together and the amazing company that funded the initial development costs of Tiptap.
|
||||
|
||||
AND you should definitely hire us if you want us to design und build an amazing digital product for you. Bonus points if it’s somehow text editing related.
|
||||
|
||||
But here are the friendly faces of the two maintainers of tiptap, Philipp Kühn (left) and Hans Pagel (right). You’ve probably read our names in the thousands of commits, pull requests or Tweets already.
|
||||
But here are the friendly faces of the two maintainers of Tiptap, Philipp Kühn (left) and Hans Pagel (right). You’ve probably read our names in the thousands of commits, pull requests or Tweets already.
|
||||
|
||||
|
||||
|
||||
|
||||
## More peace of mind
|
||||
Companies betting on tiptap probably want some peace of mind and ensure that we keep maintaining tiptap, but don’t forget that our work is based on the work of other lovely people that you should definitely sponsor too:
|
||||
Companies betting on Tiptap probably want some peace of mind and ensure that we keep maintaining Tiptap, but don’t forget that our work is based on the work of other lovely people that you should definitely sponsor too:
|
||||
|
||||
* [Sponsor Marijn Haverbeke](https://marijnhaverbeke.nl/fund/) (ProseMirror)
|
||||
* [Sponsor Kevin Jahns](https://github.com/sponsors/dmonad) (Y.js)
|
||||
* [Sponsor Y-Collective](https://opencollective.com/y-collective) (Y.js + tiptap)
|
||||
* [Sponsor Y-Collective](https://opencollective.com/y-collective) (Y.js + Tiptap)
|
||||
|
||||
## Frequently asked questions
|
||||
|
||||
@ -46,4 +46,4 @@ We are part of the [Y-Collective](https://opencollective.com/y-collective), a fu
|
||||
If you have an issue, a question, want to talk something through or anything else, [please use GitHub issues](https://github.com/ueberdosis/tiptap/issues/new/choose) to keep everything accessible to the whole community. For everything else, reach out to [humans@tiptap.dev](mailto:humans@tiptap.dev). We can take on a limited number of custom development and consulting contracts.
|
||||
|
||||
### Can we have a call?
|
||||
Nope, we are big fans of asynchronous communication. If you really need to reach out in private, send us an email to [humans@tiptap.dev](mailto:humans@tiptap.dev), but don’t expect technical email support. That all happens on [GitHub](https://github.com/ueberdosis/tiptap/issues)
|
||||
Nope, we are big fans of asynchronous communication. If you really need to reach out in private, send us an email to [humans@tiptap.dev](mailto:humans@tiptap.dev), but don’t expect technical email support. That all happens on [GitHub](https://github.com/ueberdosis/tiptap/issues)
|
||||
|
||||
@ -105,7 +105,7 @@ export default (value) => ({ tr, dispatch }) => {
|
||||
}
|
||||
```
|
||||
|
||||
If you’re just wrapping another tiptap command, you don’t need to check that, we’ll do it for you.
|
||||
If you’re just wrapping another Tiptap command, you don’t need to check that, we’ll do it for you.
|
||||
|
||||
```js
|
||||
addCommands() {
|
||||
@ -272,7 +272,7 @@ But how do you write those commands? There’s a little bit to learn about that.
|
||||
:::pro Oops, this is work in progress
|
||||
A well-written 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! With nearly 300 sponsors we are half way there already.
|
||||
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.
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# createParagraphNear
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# deleteNode
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# deleteRange
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# deleteSelection
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# enter
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# exitCode
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# insertContentAt
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# joinBackward
|
||||
|
||||
:::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)
|
||||
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,7 +1,7 @@
|
||||
# joinForward
|
||||
|
||||
:::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)
|
||||
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,5 +1,5 @@
|
||||
# keyboardShortcut
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# liftEmptyBlock
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# liftListItem
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# lift
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# newlineInCode
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# resetAttributes
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# scrollIntoView
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# selectNodeBackward
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# selectNodeForward
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# selectParentNode
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# setMark
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# setNodeSelection
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# setNode
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# sinkListItem
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# splitBlock
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# splitListItem
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# toggleList
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# toggleMark
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# toggleNode
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# toggleWrap
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# undoInputRule
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# unsetAllMarks
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# unsetMark
|
||||
|
||||
:::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)
|
||||
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,5 @@
|
||||
# wrapInList
|
||||
|
||||
:::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)
|
||||
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)
|
||||
:::
|
||||
|
||||
@ -5,7 +5,7 @@ tableOfContents: true
|
||||
# Editor
|
||||
|
||||
## 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.
|
||||
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.
|
||||
|
||||
## Methods
|
||||
The editor instance will provide a bunch of public methods. Methods are regular functions and can return anything. They’ll help you to work with the editor.
|
||||
@ -151,7 +151,7 @@ editor.isEmpty
|
||||
## Settings
|
||||
|
||||
### element
|
||||
The `element` specifies the HTML element the editor will be binded too. The following code will integrate tiptap with an element with the `.element` class:
|
||||
The `element` specifies the HTML element the editor will be binded too. The following code will integrate Tiptap with an element with the `.element` class:
|
||||
|
||||
```js
|
||||
import { Editor } from '@tiptap/core'
|
||||
@ -259,7 +259,7 @@ new Editor({
|
||||
```
|
||||
|
||||
### enableInputRules
|
||||
By default, tiptap enables all [input rules](/guide/custom-extensions/#input-rules). With `enableInputRules` you can disable that.
|
||||
By default, Tiptap enables all [input rules](/guide/custom-extensions/#input-rules). With `enableInputRules` you can disable that.
|
||||
|
||||
```js
|
||||
import { Editor } from '@tiptap/core'
|
||||
@ -275,7 +275,7 @@ new Editor({
|
||||
```
|
||||
|
||||
### enablePasteRules
|
||||
By default, tiptap enables all [paste rules](/guide/custom-extensions/#paste-rules). With `enablePasteRules` you can disable that.
|
||||
By default, Tiptap enables all [paste rules](/guide/custom-extensions/#paste-rules). With `enablePasteRules` you can disable that.
|
||||
|
||||
```js
|
||||
import { Editor } from '@tiptap/core'
|
||||
@ -291,7 +291,7 @@ new Editor({
|
||||
```
|
||||
|
||||
### injectCSS
|
||||
By default, tiptap injects [a little bit of CSS](https://github.com/ueberdosis/tiptap/tree/main/packages/core/src/style.ts). With `injectCSS` you can disable that.
|
||||
By default, Tiptap injects [a little bit of CSS](https://github.com/ueberdosis/tiptap/tree/main/packages/core/src/style.ts). With `injectCSS` you can disable that.
|
||||
|
||||
```js
|
||||
import { Editor } from '@tiptap/core'
|
||||
|
||||
@ -5,7 +5,7 @@ tableOfContents: true
|
||||
# Extensions
|
||||
|
||||
## 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.
|
||||
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.
|
||||
|
||||
There are also some extensions with more capabilities. We call them [nodes](/api/nodes) and [marks](/api/marks) which can render content in the editor.
|
||||
|
||||
@ -29,14 +29,14 @@ There are also some extensions with more capabilities. We call them [nodes](/api
|
||||
You don’t have to use it, but we prepared a `@tiptap/starter-kit` which includes the most common extensions. Read more about [`StarterKit`](/guide/configuration#default-extensions).
|
||||
|
||||
## 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.
|
||||
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:
|
||||
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:
|
||||
|
||||
```js
|
||||
import { Extension } from '@tiptap/core'
|
||||
|
||||
@ -9,7 +9,7 @@ icon: drag-drop-line
|
||||
|
||||
This extension loads the [ProseMirror Dropcursor plugin](https://github.com/ProseMirror/prosemirror-dropcursor) by Marijn Haverbeke, which shows a cursor at the drop position when something is dragged into the editor.
|
||||
|
||||
Note that tiptap is headless, but the dropcursor needs CSS for its appearance. There are settings for the color and width, and you’re free to add a custom CSS class.
|
||||
Note that Tiptap is headless, but the dropcursor needs CSS for its appearance. There are settings for the color and width, and you’re free to add a custom CSS class.
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
|
||||
@ -9,7 +9,7 @@ icon: space
|
||||
|
||||
This extension loads the [ProseMirror Gapcursor plugin](https://github.com/ProseMirror/prosemirror-gapcursor) by Marijn Haverbeke, which adds a gap for the cursor in places that don’t allow regular selection. For example, after a table at the end of a document.
|
||||
|
||||
Note that tiptap is headless, but the gapcursor needs CSS for its appearance. The [default CSS](https://github.com/ueberdosis/tiptap/tree/main/packages/core/src/style.ts) is loaded through the Editor class.
|
||||
Note that Tiptap is headless, but the gapcursor needs CSS for its appearance. The [default CSS](https://github.com/ueberdosis/tiptap/tree/main/packages/core/src/style.ts) is loaded through the Editor class.
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
|
||||
@ -7,7 +7,7 @@ icon: stack-line
|
||||
[](https://www.npmjs.com/package/@tiptap/starter-kit)
|
||||
[](https://npmcharts.com/compare/@tiptap/starter-kit?minimal=true)
|
||||
|
||||
The `StarterKit` is a collection of the most popular tiptap extensions. If you’re just getting started, this extension is for you.
|
||||
The `StarterKit` is a collection of the most popular Tiptap extensions. If you’re just getting started, this extension is for you.
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# Introduction
|
||||
tiptap is a friendly wrapper around [ProseMirror](https://ProseMirror.net). 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.
|
||||
tiptap is a friendly wrapper around [ProseMirror](https://ProseMirror.net). 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.
|
||||
|
||||
### Structure
|
||||
ProseMirror works with a strict [Schema](/api/schema), which defines the allowed structure of a document. A document is a tree of headings, paragraphs and others elements, so called nodes. Marks can be attached to a node, e. g. to emphasize part of it. [Commands](/api/commands) change that document programmatically.
|
||||
|
||||
@ -32,7 +32,7 @@ If you think of the document as a tree, then nodes are just a type of content in
|
||||
| [Text](/api/nodes/text) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text/) |
|
||||
|
||||
## Create a new node
|
||||
You’re free to create your own nodes for tiptap. Here is the boilerplate code that’s need to create and register your own node:
|
||||
You’re free to create your own nodes for Tiptap. Here is the boilerplate code that’s need to create and register your own node:
|
||||
|
||||
```js
|
||||
import { Node } from '@tiptap/core'
|
||||
|
||||
@ -7,7 +7,7 @@ icon: file-line
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-document)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-document?minimal=true)
|
||||
|
||||
**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 `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 (`doc`), 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:
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ There is no extension or example yet, but it’s definitely on our list to build
|
||||
If you want to give it a shot yourself, you could start altering the [`Mention`](/api/nodes/mention) node. This uses the [`Suggestion`](/api/utilities/suggestion) utility, which should help with an autocomplete and such things.
|
||||
|
||||
:::pro Fund the development ♥
|
||||
We need your support to maintain, update, support and develop tiptap. If you’re waiting for this extension, [become a sponsor and fund our work](/sponsor).
|
||||
We need your support to maintain, update, support and develop Tiptap. If you’re waiting for this extension, [become a sponsor and fund our work](/sponsor).
|
||||
:::
|
||||
|
||||
## Bring your own emoji picker
|
||||
|
||||
@ -6,7 +6,7 @@ icon: hashtag
|
||||
# Hashtag
|
||||
|
||||
:::pro Fund the development ♥
|
||||
We need your support to maintain, update, support and develop tiptap. If you’re waiting for this extension, [become a sponsor and fund our work](/sponsor).
|
||||
We need your support to maintain, update, support and develop Tiptap. If you’re waiting for this extension, [become a sponsor and fund our work](/sponsor).
|
||||
:::
|
||||
|
||||
TODO
|
||||
|
||||
@ -38,7 +38,7 @@ Image.configure({
|
||||
### inline
|
||||
Renders the image node inline, for example in a paragraph tag: `<p><img src="spacer.gif"></p>`. By default images are on the same level as paragraphs.
|
||||
|
||||
It totally depends on what kind of editing experience you’d like to have, but can be useful if you (for example) migrate from Quill to tiptap.
|
||||
It totally depends on what kind of editing experience you’d like to have, but can be useful if you (for example) migrate from Quill to Tiptap.
|
||||
|
||||
Default: `false`
|
||||
|
||||
|
||||
@ -5,11 +5,11 @@ tableOfContents: true
|
||||
# Schema
|
||||
|
||||
## 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.
|
||||
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.
|
||||
|
||||
This schema is *very* strict. You can’t use any HTML element or attribute that is not defined in your schema.
|
||||
|
||||
Let me give you one example: If you paste something like `This is <strong>important</strong>` into tiptap, but don’t have any extension that handles `strong` tags, you’ll only see `This is important` – without the strong tags.
|
||||
Let me give you one example: If you paste something like `This is <strong>important</strong>` into Tiptap, but don’t have any extension that handles `strong` tags, you’ll only see `This is important` – without the strong tags.
|
||||
|
||||
## How a schema looks like
|
||||
When you’ll work with the provided extensions only, you don’t have to care that much about the schema. If you’re building your own extensions, it’s probably helpful to understand how the schema works. Let’s look at the most simple schema for a typical ProseMirror editor:
|
||||
@ -36,10 +36,10 @@ When you’ll work with the provided extensions only, you don’t have to care t
|
||||
|
||||
We register three nodes here. `doc`, `paragraph` and `text`. `doc` is the root node which allows one or more block nodes as children (`content: 'block+'`). Since `paragraph` is in the group of block nodes (`group: 'block'`) our document can only contain paragraphs. Our paragraphs allow zero or more inline nodes as children (`content: 'inline*'`) so there can only be `text` in it. `parseDOM` defines how a node can be parsed from pasted HTML. `toDOM` defines how it will be rendered in the DOM.
|
||||
|
||||
In tiptap every node, mark and extension is living in its own file. This allows us to split the logic. Under the hood the whole schema will be merged together:
|
||||
In Tiptap every node, mark and extension is living in its own file. This allows us to split the logic. Under the hood the whole schema will be merged together:
|
||||
|
||||
```js
|
||||
// the tiptap schema API
|
||||
// the Tiptap schema API
|
||||
import { Node } from '@tiptap/core'
|
||||
|
||||
const Document = Node.create({
|
||||
@ -294,7 +294,7 @@ Mark.create({
|
||||
```
|
||||
|
||||
## Get the underlying ProseMirror schema
|
||||
There are a few use cases where you need to work with the underlying schema. You’ll need that if you’re using the tiptap collaborative text editing features or if you want to manually render your content as HTML.
|
||||
There are a few use cases where you need to work with the underlying schema. You’ll need that if you’re using the Tiptap collaborative text editing features or if you want to manually render your content as HTML.
|
||||
|
||||
### Option 1: With an Editor
|
||||
If you need this on the client side and need an editor instance anyway, it’s available through the editor:
|
||||
|
||||
@ -5,5 +5,5 @@ tableOfContents: true
|
||||
# Changelog
|
||||
|
||||
:::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)
|
||||
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)
|
||||
:::
|
||||
|
||||
@ -9,7 +9,7 @@ Using the collaborative editing commercially? [Become a sponsor](/sponsor) to fu
|
||||
:::
|
||||
|
||||
## Introduction
|
||||
This example shows how you can use tiptap to let multiple users collaborate in the same document in real-time.
|
||||
This example shows how you can use Tiptap to let multiple users collaborate in the same document in real-time.
|
||||
|
||||
It connects all clients to a WebSocket server and merges changes to the document with the power of [Y.js](https://github.com/yjs/yjs). If you want to learn more about collaborative text editing, check out [our guide on collaborative editing](/guide/collaborative-editing).
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Drawing
|
||||
Did you ever wanted to draw in a text editor? Me neither. Anyway, here is an example how that could work with tiptap. If you want to build something like that, [learn more about node views](/guide/node-views).
|
||||
Did you ever wanted to draw in a text editor? Me neither. Anyway, here is an example how that could work with Tiptap. If you want to build something like that, [learn more about node views](/guide/node-views).
|
||||
|
||||
https://embed.tiptap.dev/preview/Examples/Drawing
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
:::pro What about …
|
||||
We’d love to build more features related to images: Resizeable images, images with a caption, floating images … But that takes time.
|
||||
|
||||
Though thousands of developers use tiptap every day, it’s still not our full-time job. We’d like to change that. Are you able to help us reach our goal?
|
||||
Though thousands of developers use Tiptap every day, it’s still not our full-time job. We’d like to change that. Are you able to help us reach our goal?
|
||||
|
||||
[Become a sponsor on GitHub →](https://github.com/sponsors/ueberdosis)
|
||||
:::
|
||||
|
||||
@ -5,6 +5,6 @@
|
||||
Linter can be used to check the content as per your wish and highlight it to the user. Linter extension can have multiple plugins for each task you want to achieve.
|
||||
|
||||
## Issues
|
||||
* There is no decoration API in tiptap, that’s why this is a lot of ProseMirror work. Before we’ll publish that example, we’d need to find a few ways to make it more tiptap-like. For example, it would be great to use Vue/React components for the widget.
|
||||
* There is no decoration API in Tiptap, that’s why this is a lot of ProseMirror work. Before we’ll publish that example, we’d need to find a few ways to make it more Tiptap-like. For example, it would be great to use Vue/React components for the widget.
|
||||
|
||||
https://embed.tiptap.dev/preview/Experiments/Linter
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# Multiple editors
|
||||
|
||||
The following example has three different instances of tiptap. The first is configured to have a single paragraph of text, the second to have a task list and the third to have text. All of them are stored in a single Y.js document, which can be synced in real-time with other users.
|
||||
The following example has three different instances of Tiptap. The first is configured to have a single paragraph of text, the second to have a task list and the third to have text. All of them are stored in a single Y.js document, which can be synced in real-time with other users.
|
||||
|
||||
https://embed.tiptap.dev/preview/Experiments/MultipleEditors
|
||||
|
||||
@ -5,11 +5,11 @@ tableOfContents: true
|
||||
# Accessibility
|
||||
|
||||
:::pro Fund the development ♥
|
||||
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).
|
||||
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).
|
||||
:::
|
||||
|
||||
## 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:
|
||||
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:
|
||||
|
||||
## Interface
|
||||
An interface needs to have well-defined contrasts, big enough click areas, semantic markup, must be keyboard accessible and well documented. Currently, we don’t even provide an interface, so for now that’s totally up to you.
|
||||
@ -17,7 +17,7 @@ An interface needs to have well-defined contrasts, big enough click areas, seman
|
||||
But no worries, we’ll provide an interface soon and take accessibility into account early on.
|
||||
|
||||
## Output
|
||||
The editor needs to produce semantic markup, must be keyboard accessible and well documented. The tiptap content is well structured so that’s a good foundation already. That said, we can add support and encourage the usage of additional attributes, for example the Alt-attribute for images.
|
||||
The editor needs to produce semantic markup, must be keyboard accessible and well documented. The Tiptap content is well structured so that’s a good foundation already. That said, we can add support and encourage the usage of additional attributes, for example the Alt-attribute for images.
|
||||
|
||||
### Writing assistance (optional)
|
||||
An optional writing assitance could help people writing content semanticly correct, for example pointing out an incorrect usage of heading levels. With that kind of assistance provided by the core developers, we could help to improve the content of a lot of applications.
|
||||
|
||||
@ -5,10 +5,10 @@ tableOfContents: true
|
||||
# Collaborative editing
|
||||
|
||||
## 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.
|
||||
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.
|
||||
|
||||
## Configure the editor
|
||||
The underyling schema tiptap uses is an excellent foundation to sync documents. With the [`Collaboration`](/api/extensions/collaboration) you can tell tiptap to track changes to the document with [Y.js](https://github.com/yjs/yjs).
|
||||
The underyling schema Tiptap uses is an excellent foundation to sync documents. With the [`Collaboration`](/api/extensions/collaboration) you can tell Tiptap to track changes to the document with [Y.js](https://github.com/yjs/yjs).
|
||||
|
||||
Y.js is a conflict-free replicated data types implementation, or in other words: It’s reaaally good in merging changes. And to achieve that, changes don’t have to come in order. It’s totally fine to change a document while being offline and merge it with other changes when the device is online again.
|
||||
|
||||
@ -27,7 +27,7 @@ npm install @tiptap/extension-collaboration yjs y-webrtc
|
||||
yarn add @tiptap/extension-collaboration yjs y-webrtc
|
||||
```
|
||||
|
||||
Now, create a new Y document, and register it with tiptap:
|
||||
Now, create a new Y document, and register it with Tiptap:
|
||||
|
||||
```js
|
||||
import { Editor } from '@tiptap/core'
|
||||
@ -43,7 +43,7 @@ const provider = new WebrtcProvider('example-document', ydoc)
|
||||
const editor = new Editor({
|
||||
extensions: [
|
||||
// …
|
||||
// Register the document with tiptap
|
||||
// Register the document with Tiptap
|
||||
Collaboration.configure({
|
||||
document: ydoc,
|
||||
}),
|
||||
@ -51,7 +51,7 @@ const editor = new Editor({
|
||||
})
|
||||
```
|
||||
|
||||
This should be enough to create a collaborative instance of tiptap. Crazy, isn’t it? Try it out, and open the editor in two different browsers. Changes should be synced between different windows.
|
||||
This should be enough to create a collaborative instance of Tiptap. Crazy, isn’t it? Try it out, and open the editor in two different browsers. Changes should be synced between different windows.
|
||||
|
||||
So how does this magic work? All clients need to connect with eachother, that’s the job of a *provider*. The [WebRTC provider](https://github.com/yjs/y-webrtc) is the easiest way to get started with, as it requires a public server to connect clients directly with each other, but not to sync the actual changes. This has two downsides, though.
|
||||
|
||||
@ -71,7 +71,7 @@ npm install @tiptap/extension-collaboration yjs y-websocket
|
||||
yarn add @tiptap/extension-collaboration yjs y-websocket
|
||||
```
|
||||
|
||||
And then register the WebSocket provider with tiptap:
|
||||
And then register the WebSocket provider with Tiptap:
|
||||
|
||||
```js
|
||||
import { Editor } from '@tiptap/core'
|
||||
@ -87,7 +87,7 @@ const provider = new WebsocketProvider('ws://127.0.0.1:1234', 'example-document'
|
||||
const editor = new Editor({
|
||||
extensions: [
|
||||
// …
|
||||
// Register the document with tiptap
|
||||
// Register the document with Tiptap
|
||||
Collaboration.configure({
|
||||
document: ydoc,
|
||||
}),
|
||||
@ -135,7 +135,7 @@ node ./index.js
|
||||
<!-- TODO: This should output something like “Listening on ws://127.0.0.1:1234”. -->
|
||||
Try opening http://127.0.0.1:1234 in your browser. You should see a plain text `OK` if everything works fine.
|
||||
|
||||
Go back to your tiptap editor and hit reload, it should now connect to the WebSocket server and changes should sync with all other clients. Amazing, isn’t it?
|
||||
Go back to your Tiptap editor and hit reload, it should now connect to the WebSocket server and changes should sync with all other clients. Amazing, isn’t it?
|
||||
|
||||
### Multiple network providers
|
||||
You can even combine multiple providers. That’s not needed, but could keep clients connected, even if one connection - for example the WebSocket server - goes down for a while. Here is an example:
|
||||
@ -239,7 +239,7 @@ In the backend, you can split the string to know the user is typing on a page wi
|
||||
And if you’d like to sync multiple fields with one Y.js document, just pass different fragment names to the collaboration extension:
|
||||
|
||||
```js
|
||||
// a tiptap instance for the field
|
||||
// a Tiptap instance for the field
|
||||
Collaboration.configure({
|
||||
document: ydoc,
|
||||
field: 'title',
|
||||
@ -354,11 +354,11 @@ hocuspocus.listen()
|
||||
### Schema updates
|
||||
tiptap is very strict with the [schema](/api/schema), that means, if you add something that’s not allowed according to the configured schema it’ll be thrown away. That can lead to a strange behaviour when multiple clients with different schemas share changes to a document.
|
||||
|
||||
Let’s say you added an editor to your app and the first people use it already. They have all a loaded instance of tiptap with all default extensions, and therefor a schema that only allows those. But you want to add task lists in the next update, so you add the extension and deploy again.
|
||||
Let’s say you added an editor to your app and the first people use it already. They have all a loaded instance of Tiptap with all default extensions, and therefor a schema that only allows those. But you want to add task lists in the next update, so you add the extension and deploy again.
|
||||
|
||||
A new user opens your app and has the updated schema (with task lists), while all others still have the old schema (without task lists). The new user checks out the newly added tasks lists and adds it to a document to show that feature to other users in that document. But then, it magically disappears right after she added it. What happened?
|
||||
|
||||
When one user adds a new node (or mark), that change will be synced to all other connected clients. The other connected clients apply those changes to the editor, and tiptap, strict as it is, removes the newly added node, because it’s not allowed according to their (old) schema. Those changes will be synced to other connected clients and oops, it’s removed everywhere. To avoid this you have a few options:
|
||||
When one user adds a new node (or mark), that change will be synced to all other connected clients. The other connected clients apply those changes to the editor, and Tiptap, strict as it is, removes the newly added node, because it’s not allowed according to their (old) schema. Those changes will be synced to other connected clients and oops, it’s removed everywhere. To avoid this you have a few options:
|
||||
|
||||
1. Never change the schema (not cool).
|
||||
2. Force clients to update when you deploy a new schema (tough).
|
||||
|
||||
@ -5,7 +5,7 @@ tableOfContents: true
|
||||
# Configuration
|
||||
|
||||
## 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`).
|
||||
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`).
|
||||
|
||||
A few more things can be configured though. Let’s look at a fully configured editor example.
|
||||
|
||||
@ -34,7 +34,7 @@ new Editor({
|
||||
|
||||
This will do the following:
|
||||
|
||||
1. bind tiptap to `.element`,
|
||||
1. bind Tiptap to `.element`,
|
||||
2. load the `Document`, `Paragraph` and `Text` extensions,
|
||||
3. set the initial content,
|
||||
4. place the cursor in the editor after initialization,
|
||||
@ -63,7 +63,7 @@ new Editor({
|
||||
```
|
||||
|
||||
### Configure extensions
|
||||
Most extensions can be configured. Add a `.configure()` and pass an object to it.
|
||||
Most extensions can be configured. Add a `.configure()` and pass an object to it.
|
||||
|
||||
The following example will disable the default heading levels 4, 5 and 6 and just allow 1, 2 and 3:
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ tableOfContents: true
|
||||
# Custom extensions
|
||||
|
||||
## 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.
|
||||
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.
|
||||
|
||||
With custom extensions you can add new content types and new functionalities, on top of what already exists or from scratch. Let’s start with a few common examples of how you can extend existing nodes, marks and extensions.
|
||||
|
||||
@ -65,7 +65,7 @@ The order in which extensions are loaded influences two things:
|
||||
The [`Link`](/api/marks/link) mark for example has a higher priority, which means it will be rendered as `<a href="…"><strong>Example</strong></a>` instead of `<strong><a href="…">Example</a></strong>`.
|
||||
|
||||
### Settings
|
||||
All settings can be configured through the extension anyway, but if you want to change the default settings, for example to provide a library on top of tiptap for other developers, you can do it like that:
|
||||
All settings can be configured through the extension anyway, but if you want to change the default settings, for example to provide a library on top of Tiptap for other developers, you can do it like that:
|
||||
|
||||
```js
|
||||
import Heading from '@tiptap/extension-heading'
|
||||
@ -124,7 +124,7 @@ const CustomParagraph = Paragraph.extend({
|
||||
// <p color="pink">Example Text</p>
|
||||
```
|
||||
|
||||
That is already enough to tell tiptap about the new attribute, and set `'pink'` as the default value. All attributes will be rendered as a HTML attribute by default, and parsed from the content when initiated.
|
||||
That is already enough to tell Tiptap about the new attribute, and set `'pink'` as the default value. All attributes will be rendered as a HTML attribute by default, and parsed from the content when initiated.
|
||||
|
||||
Let’s stick with the color example and assume you want to add an inline style to actually color the text. With the `renderHTML` function you can return HTML attributes which will be rendered in the output.
|
||||
|
||||
@ -486,10 +486,10 @@ this.parent
|
||||
```
|
||||
|
||||
### ProseMirror Plugins (Advanced)
|
||||
After all, tiptap is built on ProseMirror and ProseMirror has a pretty powerful plugin API, too. To access that directly, use `addProseMirrorPlugins()`.
|
||||
After all, Tiptap is built on ProseMirror and ProseMirror has a pretty powerful plugin API, too. To access that directly, use `addProseMirrorPlugins()`.
|
||||
|
||||
#### Existing plugins
|
||||
You can wrap existing ProseMirror plugins in tiptap extensions like shown in the example below.
|
||||
You can wrap existing ProseMirror plugins in Tiptap extensions like shown in the example below.
|
||||
|
||||
```js
|
||||
import { history } from 'prosemirror-history'
|
||||
@ -507,7 +507,7 @@ const History = Extension.create({
|
||||
#### Access the ProseMirror API
|
||||
To hook into events, for example a click, double click or when content is pasted, you can pass [event handlers](https://prosemirror.net/docs/ref/#view.EditorProps) to `editorProps` on the [editor](/api/editor#editor-props).
|
||||
|
||||
Or you can add them to a tiptap extension like shown in the below example.
|
||||
Or you can add them to a Tiptap extension like shown in the below example.
|
||||
|
||||
```js
|
||||
import { Extension } from '@tiptap/core'
|
||||
@ -596,7 +596,7 @@ const CustomMark = Mark.create({
|
||||
```
|
||||
|
||||
### Create an extension
|
||||
Extensions add new capabilities to tiptap and you’ll read the word extension here very often, even for nodes and marks. But there are literal extensions. Those can’t add to the schema (like marks and nodes do), but can add functionality or change the behaviour of the editor.
|
||||
Extensions add new capabilities to Tiptap and you’ll read the word extension here very often, even for nodes and marks. But there are literal extensions. Those can’t add to the schema (like marks and nodes do), but can add functionality or change the behaviour of the editor.
|
||||
|
||||
A good example to learn from is probably [`TextAlign`](/api/extensions/text-align).
|
||||
|
||||
|
||||
@ -46,7 +46,7 @@ Oh, that’s a long command, right? Actually, it’s a [chain of commands](/api/
|
||||
editor.chain().focus().toggleBold().run()
|
||||
```
|
||||
|
||||
1. `editor` should be a tiptap instance,
|
||||
1. `editor` should be a Tiptap instance,
|
||||
2. `chain()` is used to tell the editor you want to execute multiple commands,
|
||||
3. `focus()` sets the focus back to the editor,
|
||||
4. `toggleBold()` marks the selected text bold, or removes the bold mark from the text selection if it’s already applied and
|
||||
|
||||
@ -7,7 +7,7 @@ tableOfContents: true
|
||||
## 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.
|
||||
|
||||
Node views are amazing to improve the in-editor experience, but can also be used in a read-only instance of tiptap. They are unrelated to the HTML output by design, so you have full control about the in-editor experience *and* the output.
|
||||
Node views are amazing to improve the in-editor experience, but can also be used in a read-only instance of Tiptap. They are unrelated to the HTML output by design, so you have full control about the in-editor experience *and* the output.
|
||||
|
||||
## Different types of node views
|
||||
Depending on what you would like to build, node views work a little bit different and can have their verify specific capabilities, but also pitfalls. The main question is: How should your custom node look like?
|
||||
@ -40,7 +40,7 @@ tiptap adds a `contenteditable="false"` to those by default.
|
||||
|
||||
That’s how you could render mentions, which shouldn’t be editable. Users can add or delete them, but not delete single characters.
|
||||
|
||||
Statamic uses those for their Bard editor, which renders complex modules inside tiptap, which can have their own text inputs.
|
||||
Statamic uses those for their Bard editor, which renders complex modules inside Tiptap, which can have their own text inputs.
|
||||
|
||||
### Mixed content
|
||||
You can even mix non-editable and editable text. That’s great to build complex things, and still use marks like bold and italic inside the editable content.
|
||||
@ -63,7 +63,7 @@ You can even mix non-editable and editable text. That’s great to build complex
|
||||
```
|
||||
|
||||
## Markup
|
||||
But what happens if you [access the editor content](/guide/output)? If you’re working with HTML, you’ll need to tell tiptap how your node should be serialized.
|
||||
But what happens if you [access the editor content](/guide/output)? If you’re working with HTML, you’ll need to tell Tiptap how your node should be serialized.
|
||||
|
||||
The editor **does not** export the rendered JavaScript node, and for a lot of use cases you wouldn’t want that anyway.
|
||||
|
||||
@ -104,7 +104,7 @@ parseHTML() {
|
||||
```
|
||||
|
||||
### Render JavaScript/Vue/React
|
||||
But what if you want to render your actual JavaScript/Vue/React code? Consider using tiptap to render your output. Just set the editor to `editable: false` and no one will notice you’re using an editor to render the content. :-)
|
||||
But what if you want to render your actual JavaScript/Vue/React code? Consider using Tiptap to render your output. Just set the editor to `editable: false` and no one will notice you’re using an editor to render the content. :-)
|
||||
|
||||
<!-- ## Reference
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ Here is what you need to do to render a node view inside your editor:
|
||||
1. [Create a node extension](/guide/custom-extensions)
|
||||
2. Register a new node view with `addNodeView()`
|
||||
3. Write your render function
|
||||
4. [Configure tiptap to use your new node extension](/guide/configuration)
|
||||
4. [Configure Tiptap to use your new node extension](/guide/configuration)
|
||||
|
||||
This is how your node extension could look like:
|
||||
|
||||
@ -120,4 +120,4 @@ Got it? You’re free to do anything you like, as long as you return a container
|
||||
|
||||
https://embed.tiptap.dev/preview/GuideNodeViews/JavaScriptContent
|
||||
|
||||
Keep in mind that this content is rendered by tiptap. That means you need to tell what kind of content is allowed, for example with `content: 'inline*'` in your node extension (that’s what we use in the above example).
|
||||
Keep in mind that this content is rendered by Tiptap. That means you need to tell what kind of content is allowed, for example with `content: 'inline*'` in your node extension (that’s what we use in the above example).
|
||||
|
||||
@ -14,7 +14,7 @@ Here is what you need to do to render React components inside your editor:
|
||||
2. Create a React component
|
||||
3. Pass that component to the provided `ReactNodeViewRenderer`
|
||||
4. Register it with `addNodeView()`
|
||||
5. [Configure tiptap to use your new node extension](/guide/configuration)
|
||||
5. [Configure Tiptap to use your new node extension](/guide/configuration)
|
||||
|
||||
This is how your node extension could look like:
|
||||
|
||||
@ -92,7 +92,7 @@ You don’t need to add those `className` attributes, feel free to remove them o
|
||||
|
||||
https://embed.tiptap.dev/preview/GuideNodeViews/ReactComponentContent
|
||||
|
||||
Keep in mind that this content is rendered by tiptap. That means you need to tell what kind of content is allowed, for example with `content: 'inline*'` in your node extension (that’s what we use in the above example).
|
||||
Keep in mind that this content is rendered by Tiptap. That means you need to tell what kind of content is allowed, for example with `content: 'inline*'` in your node extension (that’s what we use in the above example).
|
||||
|
||||
The `NodeViewWrapper` and `NodeViewContent` components render a `<div>` HTML tag (`<span>` for inline nodes), but you can change that. For example `<NodeViewContent as="p">` should render a paragraph. One limitation though: That tag must not change during runtime.
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ Here is what you need to do to render Vue components inside your editor:
|
||||
2. Create a Vue component
|
||||
3. Pass that component to the provided `VueNodeViewRenderer`
|
||||
4. Register it with `addNodeView()`
|
||||
5. [Configure tiptap to use your new node extension](/guide/configuration)
|
||||
5. [Configure Tiptap to use your new node extension](/guide/configuration)
|
||||
|
||||
This is how your node extension could look like:
|
||||
|
||||
@ -114,7 +114,7 @@ You don’t need to add those `class` attributes, feel free to remove them or pa
|
||||
|
||||
https://embed.tiptap.dev/preview/GuideNodeViews/VueComponentContent
|
||||
|
||||
Keep in mind that this content is rendered by tiptap. That means you need to tell what kind of content is allowed, for example with `content: 'inline*'` in your node extension (that’s what we use in the above example).
|
||||
Keep in mind that this content is rendered by Tiptap. That means you need to tell what kind of content is allowed, for example with `content: 'inline*'` in your node extension (that’s what we use in the above example).
|
||||
|
||||
The `NodeViewWrapper` and `NodeViewContent` components render a `<div>` HTML tag (`<span>` for inline nodes), but you can change that. For example `<node-view-content as="p">` should render a paragraph. One limitation though: That tag must not change during runtime.
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ You can store your content as a JSON object or as a good old HTML string. Both w
|
||||
## Export
|
||||
|
||||
### Option 1: JSON
|
||||
JSON is probably easier to loop through, for example to look for a mention and it’s more like what tiptap uses under the hood. Anyway, if you want to use JSON to store the content we provide a method to retrieve the content as JSON:
|
||||
JSON is probably easier to loop through, for example to look for a mention and it’s more like what Tiptap uses under the hood. Anyway, if you want to use JSON to store the content we provide a method to retrieve the content as JSON:
|
||||
|
||||
```js
|
||||
const json = editor.getJSON()
|
||||
@ -82,14 +82,14 @@ Unfortunately, **tiptap doesn’t support Markdown as an input or output format*
|
||||
|
||||
* Both, HTML and JSON, can have deeply nested structures, Markdown is flat.
|
||||
* Markdown standards vary.
|
||||
* tiptap’s strength is customization, that doesn’t work very well with Markdown.
|
||||
* Tiptap’s strength is customization, that doesn’t work very well with Markdown.
|
||||
* There are enough packages to convert HTML to Markdown and vice-versa.
|
||||
|
||||
You should really consider to work with HTML or JSON to store your content, they are perfectly fine for most use cases.
|
||||
|
||||
If you still think you need Markdown, ProseMirror has an [example on how to deal with Markdown](https://prosemirror.net/examples/markdown/), [Nextcloud Text](https://github.com/nextcloud/text) uses tiptap 1 to work with Markdown. Maybe you can learn from them. Or if you are looking for a really good Markdown editor, try [CodeMirror](https://codemirror.net/).
|
||||
If you still think you need Markdown, ProseMirror has an [example on how to deal with Markdown](https://prosemirror.net/examples/markdown/), [Nextcloud Text](https://github.com/nextcloud/text) uses Tiptap 1 to work with Markdown. Maybe you can learn from them. Or if you are looking for a really good Markdown editor, try [CodeMirror](https://codemirror.net/).
|
||||
|
||||
That said, tiptap does support [Markdown shortcuts](/examples/markdown-shortcuts) to format your content. Also you’re free to let your content look like Markdown, for example add a `#` before an `<h1>` with CSS.
|
||||
That said, Tiptap does support [Markdown shortcuts](/examples/markdown-shortcuts) to format your content. Also you’re free to let your content look like Markdown, for example add a `#` before an `<h1>` with CSS.
|
||||
|
||||
## Listening for changes
|
||||
If you want to continuously store the updated content while people write, you can [hook into events](/api/events). Here is an example how that could look like:
|
||||
@ -109,13 +109,13 @@ const editor = new Editor({
|
||||
|
||||
## Rendering
|
||||
|
||||
### Option 1: Read-only instance of tiptap
|
||||
### Option 1: Read-only instance of Tiptap
|
||||
To render the saved content, set the editor to read-only. That’s how you can achieve the exact same rendering as it’s in the editor, without duplicating your CSS and other code.
|
||||
|
||||
https://embed.tiptap.dev/preview/GuideContent/ReadOnly
|
||||
|
||||
### Option 2: Generate HTML from ProseMirror JSON
|
||||
If you need to render the content on the server side, for example to generate the HTML for a blog post which has been written in tiptap, you’ll probably want to do just that without an actual editor instance.
|
||||
If you need to render the content on the server side, for example to generate the HTML for a blog post which has been written in Tiptap, you’ll probably want to do just that without an actual editor instance.
|
||||
|
||||
That’s what the `generateHTML()` is for. It’s a helper function which renders HTML without an actual editor instance.
|
||||
|
||||
@ -126,11 +126,11 @@ By the way, the other way is possible, too. The below examples shows how to gene
|
||||
https://embed.tiptap.dev/preview/GuideContent/GenerateJSON
|
||||
|
||||
## Migration
|
||||
If you’re migrating existing content to tiptap we would recommend to get your existing output to HTML. That’s probably the best format to get your initial content into tiptap, because ProseMirror ensures there is nothing wrong with it. Even if there are some tags or attributes that aren’t allowed (based on your configuration), tiptap just throws them away quietly.
|
||||
If you’re migrating existing content to Tiptap we would recommend to get your existing output to HTML. That’s probably the best format to get your initial content into Tiptap, because ProseMirror ensures there is nothing wrong with it. Even if there are some tags or attributes that aren’t allowed (based on your configuration), Tiptap just throws them away quietly.
|
||||
|
||||
We’re about to go through a few cases to help with that, for example we provide a PHP package to convert HTML to a compatible JSON structure: [ueberdosis/prosemirror-to-html](https://github.com/ueberdosis/html-to-prosemirror).
|
||||
|
||||
[Share your experiences with us!](mailto:humans@tiptap.dev) We’d like to add more information here.
|
||||
|
||||
## Security
|
||||
There is no reason to use one or the other because of security concerns. If someone wants to send malicious content to your server, it doesn’t matter if it’s JSON or HTML. It doesn’t even matter if you’re using tiptap or not. You should always validate user input.
|
||||
There is no reason to use one or the other because of security concerns. If someone wants to send malicious content to your server, it doesn’t matter if it’s JSON or HTML. It doesn’t even matter if you’re using Tiptap or not. You should always validate user input.
|
||||
|
||||
@ -5,13 +5,13 @@ tableOfContents: true
|
||||
# Working with TypeScript
|
||||
|
||||
## 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.
|
||||
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.
|
||||
|
||||
TypeScript extends JavaScript by adding types (hence the name). It adds new syntax, which doesn’t exist in Vanilla JavaScript. It’s actually removed before running in the browser, but this step – the compilation – is important to find bugs early. It checks if you passe the right types of data to functions. For a big and complex project, that’s very valuable. It means we’ll get notified of lot of bugs, before shipping code to you.
|
||||
|
||||
**Anyway, if you don’t use TypeScript in your project, that’s fine.** You will still be able to use tiptap and nevertheless get a nice autocomplete for the tiptap API (if your editor supports it, but most do).
|
||||
**Anyway, if you don’t use TypeScript in your project, that’s fine.** You will still be able to use Tiptap and nevertheless get a nice autocomplete for the Tiptap API (if your editor supports it, but most do).
|
||||
|
||||
If you are using TypeScript in your project and want to extend tiptap, there are two types that are good to know about.
|
||||
If you are using TypeScript in your project and want to extend Tiptap, there are two types that are good to know about.
|
||||
|
||||
## Types
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ tableOfContents: true
|
||||
# Installation
|
||||
|
||||
## 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.
|
||||
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.
|
||||
|
||||
## Integration guides
|
||||
* [CDN](/installation/cdn)
|
||||
@ -61,4 +61,4 @@ new Editor({
|
||||
})
|
||||
```
|
||||
|
||||
Open your project in the browser to see tiptap in action. Good work! Time to give yourself a pat on the back.
|
||||
Open your project in the browser to see Tiptap in action. Good work! Time to give yourself a pat on the back.
|
||||
|
||||
@ -6,7 +6,7 @@ tableOfContents: true
|
||||
# Alpine.js
|
||||
|
||||
## Introduction
|
||||
The following guide describes how to integrate tiptap with your [Alpine.js](https://github.com/alpinejs/alpine) project.
|
||||
The following guide describes how to integrate Tiptap with your [Alpine.js](https://github.com/alpinejs/alpine) project.
|
||||
|
||||
For the sake of this guide we’ll use [Vite](https://vitejs.dev/) to quickly set up a project, but you can use whatever you’re used to. Vite is just really fast and we love it.
|
||||
|
||||
@ -20,15 +20,15 @@ If you already have an existing Alpine.js project, that’s fine too. Just skip
|
||||
For the sake of this guide, let’s start with a fresh [Vite](https://vitejs.dev/) project called `tiptap-example`. Vite sets up everything we need, just select the Vanilla JavaScript template.
|
||||
|
||||
```bash
|
||||
npm init vite@latest tiptap-example -- --template vanilla
|
||||
cd tiptap-example
|
||||
npm init vite@latest Tiptap-example -- --template vanilla
|
||||
cd Tiptap-example
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## 2. Install the dependencies
|
||||
|
||||
Okay, enough of the boring boilerplate work. Let’s finally install tiptap! For the following example you’ll need `alpinejs`, the `@tiptap/core` package and the `@tiptap/starter-kit` which has the most common extensions to get started quickly.
|
||||
Okay, enough of the boring boilerplate work. Let’s finally install Tiptap! For the following example you’ll need `alpinejs`, the `@tiptap/core` package and the `@tiptap/starter-kit` which has the most common extensions to get started quickly.
|
||||
|
||||
```bash
|
||||
# install with npm
|
||||
@ -41,9 +41,9 @@ yarn add alpinejs @tiptap/core @tiptap/starter-kit
|
||||
If you followed step 1, you can now start your project with `npm run dev` or `yarn dev`, and open [http://localhost:3000](http://localhost:3000) in your favorite browser. This might be different, if you’re working with an existing project.
|
||||
|
||||
## 3. Initialize the editor
|
||||
To actually start using tiptap, you’ll need to write a little bit of JavaScript. Let’s put the following example code in a file called `main.js`.
|
||||
To actually start using Tiptap, you’ll need to write a little bit of JavaScript. Let’s put the following example code in a file called `main.js`.
|
||||
|
||||
This is the fastest way to get tiptap up and running with Alpine.js. It will give you a very basic version of tiptap. No worries, you will be able to add more functionality soon.
|
||||
This is the fastest way to get Tiptap up and running with Alpine.js. It will give you a very basic version of Tiptap. No worries, you will be able to add more functionality soon.
|
||||
|
||||
```js
|
||||
import Alpine from 'alpinejs'
|
||||
@ -127,4 +127,4 @@ Now, let’s replace the content of the `index.html` with the following example
|
||||
</html>
|
||||
```
|
||||
|
||||
You should now see tiptap in your browser. Time to give yourself a pat on the back! :)
|
||||
You should now see Tiptap in your browser. Time to give yourself a pat on the back! :)
|
||||
|
||||
@ -24,4 +24,4 @@ For testing purposes or demos, use our [Skypack](https://www.skypack.dev/) CDN b
|
||||
</html>
|
||||
```
|
||||
|
||||
You should now see tiptap in your browser. Time to give yourself a pat on the back! :)
|
||||
You should now see Tiptap in your browser. Time to give yourself a pat on the back! :)
|
||||
|
||||
@ -6,7 +6,7 @@ tableOfContents: true
|
||||
# Livewire
|
||||
|
||||
## Introduction
|
||||
The following guide describes how to integrate tiptap with your [Livewire](https://laravel-livewire.com/) project.
|
||||
The following guide describes how to integrate Tiptap with your [Livewire](https://laravel-livewire.com/) project.
|
||||
|
||||
TODO
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ tableOfContents: true
|
||||
# Next.js
|
||||
|
||||
## Introduction
|
||||
The following guide describes how to integrate tiptap with your [Next.js](https://nextjs.org/) project.
|
||||
The following guide describes how to integrate Tiptap with your [Next.js](https://nextjs.org/) project.
|
||||
|
||||
## Requirements
|
||||
* [Node](https://nodejs.org/en/download/) installed on your machine
|
||||
@ -18,14 +18,14 @@ If you already have an existing Next.js project, that’s fine too. Just skip th
|
||||
For the sake of this guide, let’s start with a new Next.js project called `tiptap-example`. The following command sets up everything we need to get started.
|
||||
```bash
|
||||
# create a project
|
||||
npx create-next-app tiptap-example
|
||||
npx create-next-app Tiptap-example
|
||||
|
||||
# change directory
|
||||
cd tiptap-example
|
||||
cd Tiptap-example
|
||||
```
|
||||
|
||||
## 2. Install the dependencies
|
||||
Now that we have a standard boilerplate set up we can get started on getting tiptap up and running! For this we will need to install two packages: `@tiptap/react` and `@tipta/starter-kit` which includes all the extensions you need to get started quickly.
|
||||
Now that we have a standard boilerplate set up we can get started on getting Tiptap up and running! For this we will need to install two packages: `@tiptap/react` and `@tipta/starter-kit` which includes all the extensions you need to get started quickly.
|
||||
|
||||
```bash
|
||||
# install with npm
|
||||
@ -38,7 +38,7 @@ yarn add @tiptap/react @tiptap/starter-kit
|
||||
If you followed step 1 and 2, you can now start your project with `npm run dev` or `yarn dev`, and open [http://localhost:3000/](http://localhost:3000/) in your favorite browser. This might be different, if you’re working with an existing project.
|
||||
|
||||
## 3. Create a new component
|
||||
To actually start using tiptap, you’ll need to add a new component to your app. To do this, first create a directory called `components/`. Now it's time to create our component which we'll call `Tiptap`. To do this put the following example code in `components/Tiptap.js`.
|
||||
To actually start using Tiptap, you’ll need to add a new component to your app. To do this, first create a directory called `components/`. Now it's time to create our component which we'll call `Tiptap`. To do this put the following example code in `components/Tiptap.js`.
|
||||
|
||||
```jsx
|
||||
import { useEditor, EditorContent } from '@tiptap/react'
|
||||
@ -72,4 +72,4 @@ export default function Home() {
|
||||
)
|
||||
}
|
||||
```
|
||||
You should now see tiptap in your browser. Time to give yourself a pat on the back! :)
|
||||
You should now see Tiptap in your browser. Time to give yourself a pat on the back! :)
|
||||
|
||||
@ -6,7 +6,7 @@ tableOfContents: true
|
||||
# Nuxt.js
|
||||
|
||||
## Introduction
|
||||
The following guide describes how to integrate tiptap with your [Nuxt.js](https://nuxtjs.org/) project.
|
||||
The following guide describes how to integrate Tiptap with your [Nuxt.js](https://nuxtjs.org/) project.
|
||||
|
||||
## Requirements
|
||||
* [Node](https://nodejs.org/en/download/) installed on your machine
|
||||
@ -19,14 +19,14 @@ For the sake of this guide, let’s start with a fresh Nuxt.js project called `t
|
||||
|
||||
```bash
|
||||
# create a project
|
||||
npm init nuxt-app tiptap-example
|
||||
npm init nuxt-app Tiptap-example
|
||||
|
||||
# change directory
|
||||
cd tiptap-example
|
||||
cd Tiptap-example
|
||||
```
|
||||
|
||||
## 2. Install the dependencies
|
||||
Okay, enough of the boring boilerplate work. Let’s finally install tiptap! For the following example you’ll need the `@tiptap/vue-2` package, with a few components, and `@tiptap/starter-kit` which has the most common extensions to get started quickly.
|
||||
Okay, enough of the boring boilerplate work. Let’s finally install Tiptap! For the following example you’ll need the `@tiptap/vue-2` package, with a few components, and `@tiptap/starter-kit` which has the most common extensions to get started quickly.
|
||||
|
||||
```bash
|
||||
# install with npm
|
||||
@ -39,9 +39,9 @@ yarn add @tiptap/vue-2 @tiptap/starter-kit
|
||||
If you followed step 1 and 2, you can now start your project with `npm run serve` or `yarn serve`, and open [http://localhost:8080/](http://localhost:8080/) in your favorite browser. This might be different, if you’re working with an existing project.
|
||||
|
||||
## 3. Create a new component
|
||||
To actually start using tiptap, you’ll need to add a new component to your app. Let’s call it `Tiptap` and put the following example code in `src/components/Tiptap.vue`.
|
||||
To actually start using Tiptap, you’ll need to add a new component to your app. Let’s call it `Tiptap` and put the following example code in `src/components/Tiptap.vue`.
|
||||
|
||||
This is the fastest way to get tiptap up and running with Vue. It will give you a very basic version of tiptap, without any buttons. No worries, you will be able to add more functionality soon.
|
||||
This is the fastest way to get Tiptap up and running with Vue. It will give you a very basic version of Tiptap, without any buttons. No worries, you will be able to add more functionality soon.
|
||||
|
||||
```html
|
||||
<template>
|
||||
@ -65,7 +65,7 @@ export default {
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
content: '<p>I’m running tiptap with Vue.js. 🎉</p>',
|
||||
content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
|
||||
extensions: [
|
||||
StarterKit,
|
||||
],
|
||||
@ -92,11 +92,11 @@ Now, let’s replace the content of `pages/index.vue` with the following example
|
||||
</template>
|
||||
```
|
||||
|
||||
Note that tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `<client-only>` tag. [Read more about cient-only components.](https://nuxtjs.org/api/components-client-only)
|
||||
Note that Tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `<client-only>` tag. [Read more about cient-only components.](https://nuxtjs.org/api/components-client-only)
|
||||
|
||||
You should now see tiptap in your browser. Time to give yourself a pat on the back! :)
|
||||
You should now see Tiptap in your browser. Time to give yourself a pat on the back! :)
|
||||
|
||||
## 5. Use v-model (optional)
|
||||
You’re probably used to bind your data with `v-model` in forms, that’s also possible with tiptap. Here is a working example component, that you can integrate in your project:
|
||||
You’re probably used to bind your data with `v-model` in forms, that’s also possible with Tiptap. Here is a working example component, that you can integrate in your project:
|
||||
|
||||
https://embed.tiptap.dev/preview/GuideGettingStarted/VModel
|
||||
|
||||
@ -6,18 +6,18 @@ tableOfContents: true
|
||||
# React
|
||||
|
||||
## Introduction
|
||||
The following guide describes how to integrate tiptap with your [React](https://reactjs.org/) project.
|
||||
The following guide describes how to integrate Tiptap with your [React](https://reactjs.org/) project.
|
||||
|
||||
## Requirements
|
||||
* [Node](https://nodejs.org/en/download/) installed on your machine
|
||||
* Experience with [React](https://reactjs.org/docs/getting-started.html)
|
||||
|
||||
## Using a template
|
||||
If you just want to get up and running with tiptap you can use the [tiptap Create React App template](https://github.com/alb/cra-template-tiptap) by [@alb](https://github.com/alb) to automatically create a new project with all the steps below already completed.
|
||||
If you just want to get up and running with Tiptap you can use the [tiptap Create React App template](https://github.com/alb/cra-template-tiptap) by [@alb](https://github.com/alb) to automatically create a new project with all the steps below already completed.
|
||||
|
||||
```bash
|
||||
# create a project based on the tiptap template
|
||||
npx create-react-app tiptap-example --template tiptap
|
||||
# create a project based on the Tiptap template
|
||||
npx create-react-app Tiptap-example --template Tiptap
|
||||
```
|
||||
|
||||
## 1. Create a project (optional)
|
||||
@ -27,14 +27,14 @@ For the sake of this guide, let’s start with a fresh React project called `tip
|
||||
|
||||
```bash
|
||||
# create a project
|
||||
npx create-react-app tiptap-example
|
||||
npx create-react-app Tiptap-example
|
||||
|
||||
# change directory
|
||||
cd tiptap-example
|
||||
cd Tiptap-example
|
||||
```
|
||||
|
||||
## 2. Install the dependencies
|
||||
Okay, enough of the boring boilerplate work. Let’s finally install tiptap! For the following example you’ll need the `@tiptap/react` package, with a few components, and `@tiptap/starter-kit` which has the most common extensions to get started quickly.
|
||||
Okay, enough of the boring boilerplate work. Let’s finally install Tiptap! For the following example you’ll need the `@tiptap/react` package, with a few components, and `@tiptap/starter-kit` which has the most common extensions to get started quickly.
|
||||
|
||||
```bash
|
||||
# install with npm
|
||||
@ -47,9 +47,9 @@ yarn add @tiptap/react @tiptap/starter-kit
|
||||
If you followed step 1 and 2, you can now start your project with `npm run start` or `yarn start`, and open [http://localhost:3000](http://localhost:3000) in your favorite browser. This might be different, if you’re working with an existing project.
|
||||
|
||||
## 3. Create a new component
|
||||
To actually start using tiptap, you’ll need to create a new component in your app. Let’s call it `Tiptap` and put the following example code in `src/Tiptap.jsx`.
|
||||
To actually start using Tiptap, you’ll need to create a new component in your app. Let’s call it `Tiptap` and put the following example code in `src/Tiptap.jsx`.
|
||||
|
||||
This is the fastest way to get tiptap up and running with React. It will give you a very basic version of tiptap, without any buttons. No worries, you will be able to add more functionality soon.
|
||||
This is the fastest way to get Tiptap up and running with React. It will give you a very basic version of Tiptap, without any buttons. No worries, you will be able to add more functionality soon.
|
||||
|
||||
```jsx
|
||||
import { useEditor, EditorContent } from '@tiptap/react'
|
||||
@ -88,7 +88,7 @@ const App = () => {
|
||||
export default App
|
||||
```
|
||||
|
||||
You should now see tiptap in your browser. Time to give yourself a pat on the back! :)
|
||||
You should now see Tiptap in your browser. Time to give yourself a pat on the back! :)
|
||||
|
||||
## 5. The complete setup (optional)
|
||||
Ready to add more? Below is a demo that shows how you could set up what we call the default editor. Feel free to take this and start customizing it then:
|
||||
|
||||
@ -6,10 +6,10 @@ tableOfContents: true
|
||||
# Svelte
|
||||
|
||||
## Introduction
|
||||
The following guide describes how to integrate tiptap with your [SvelteKit](https://kit.svelte.dev/) project.
|
||||
The following guide describes how to integrate Tiptap with your [SvelteKit](https://kit.svelte.dev/) project.
|
||||
|
||||
## Take a shortcut: Svelte REPL with tiptap
|
||||
If you just want to jump into it right-away, here is a [Svelte REPL with tiptap](https://svelte.dev/repl/798f1b81b9184780aca18d9a005487d2?version=3.31.2) installed.
|
||||
## Take a shortcut: Svelte REPL with Tiptap
|
||||
If you just want to jump into it right-away, here is a [Svelte REPL with Tiptap](https://svelte.dev/repl/798f1b81b9184780aca18d9a005487d2?version=3.31.2) installed.
|
||||
|
||||
## Requirements
|
||||
* [Node](https://nodejs.org/en/download/) installed on your machine
|
||||
@ -21,15 +21,15 @@ If you already have an existing SvelteKit project, that’s fine too. Just skip
|
||||
For the sake of this guide, let’s start with a fresh SvelteKit project called `tiptap-example`. The following commands set up everything we need. It asks a lot of questions, but just use what floats your boat or use the defaults.
|
||||
|
||||
```bash
|
||||
mkdir tiptap-example
|
||||
cd tiptap-example
|
||||
mkdir Tiptap-example
|
||||
cd Tiptap-example
|
||||
npm init svelte@next
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## 2. Install the dependencies
|
||||
Okay, enough of the boring boilerplate work. Let’s finally install tiptap! For the following example you’ll need the `@tiptap/core` package, with a few components, and `@tiptap/starter-kit` which has the most common extensions to get started quickly.
|
||||
Okay, enough of the boring boilerplate work. Let’s finally install Tiptap! For the following example you’ll need the `@tiptap/core` package, with a few components, and `@tiptap/starter-kit` which has the most common extensions to get started quickly.
|
||||
|
||||
```bash
|
||||
# install with npm
|
||||
@ -42,9 +42,9 @@ yarn add @tiptap/core @tiptap/starter-kit
|
||||
If you followed step 1 and 2, you can now start your project with `npm run dev` or `yarn dev`, and open [http://localhost:3000/](http://localhost:3000/) in your favorite browser. This might be different, if you’re working with an existing project.
|
||||
|
||||
## 3. Create a new component
|
||||
To actually start using tiptap, you’ll need to add a new component to your app. Let’s call it `Tiptap` and put the following example code in `src/lib/Tiptap.svelte`.
|
||||
To actually start using Tiptap, you’ll need to add a new component to your app. Let’s call it `Tiptap` and put the following example code in `src/lib/Tiptap.svelte`.
|
||||
|
||||
This is the fastest way to get tiptap up and running with SvelteKit. It will give you a very basic version of tiptap, without any buttons. No worries, you will be able to add more functionality soon.
|
||||
This is the fastest way to get Tiptap up and running with SvelteKit. It will give you a very basic version of Tiptap, without any buttons. No worries, you will be able to add more functionality soon.
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
@ -117,4 +117,4 @@ Now, let’s replace the content of `src/routes/index.svelte` with the following
|
||||
</main>
|
||||
```
|
||||
|
||||
You should now see tiptap in your browser. Time to give yourself a pat on the back! :)
|
||||
You should now see Tiptap in your browser. Time to give yourself a pat on the back! :)
|
||||
|
||||
@ -6,7 +6,7 @@ tableOfContents: true
|
||||
# Vue.js 2
|
||||
|
||||
## Introduction
|
||||
The following guide describes how to integrate tiptap with your [Vue](https://vuejs.org/) CLI project.
|
||||
The following guide describes how to integrate Tiptap with your [Vue](https://vuejs.org/) CLI project.
|
||||
|
||||
## Requirements
|
||||
* [Node](https://nodejs.org/en/download/) installed on your machine
|
||||
@ -20,14 +20,14 @@ For the sake of this guide, let’s start with a fresh Vue project called `tipta
|
||||
|
||||
```bash
|
||||
# create a project
|
||||
vue create tiptap-example
|
||||
vue create Tiptap-example
|
||||
|
||||
# change directory
|
||||
cd tiptap-example
|
||||
cd Tiptap-example
|
||||
```
|
||||
|
||||
## 2. Install the dependencies
|
||||
Okay, enough of the boring boilerplate work. Let’s finally install tiptap! For the following example you’ll need the `@tiptap/vue-2` package, with a few components, and `@tiptap/starter-kit` which has the most common extensions to get started quickly.
|
||||
Okay, enough of the boring boilerplate work. Let’s finally install Tiptap! For the following example you’ll need the `@tiptap/vue-2` package, with a few components, and `@tiptap/starter-kit` which has the most common extensions to get started quickly.
|
||||
|
||||
```bash
|
||||
# install with npm
|
||||
@ -40,9 +40,9 @@ yarn add @tiptap/vue-2 @tiptap/starter-kit
|
||||
If you followed step 1 and 2, you can now start your project with `npm run dev` or `yarn dev`, and open [http://localhost:8080](http://localhost:8080) in your favorite browser. This might be different, if you’re working with an existing project.
|
||||
|
||||
## 3. Create a new component
|
||||
To actually start using tiptap, you’ll need to add a new component to your app. Let’s call it `Tiptap` and put the following example code in `components/Tiptap.vue`.
|
||||
To actually start using Tiptap, you’ll need to add a new component to your app. Let’s call it `Tiptap` and put the following example code in `components/Tiptap.vue`.
|
||||
|
||||
This is the fastest way to get tiptap up and running with Vue. It will give you a very basic version of tiptap, without any buttons. No worries, you will be able to add more functionality soon.
|
||||
This is the fastest way to get Tiptap up and running with Vue. It will give you a very basic version of Tiptap, without any buttons. No worries, you will be able to add more functionality soon.
|
||||
|
||||
```html
|
||||
<template>
|
||||
@ -66,7 +66,7 @@ export default {
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
content: '<p>I’m running tiptap with Vue.js. 🎉</p>',
|
||||
content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
|
||||
extensions: [
|
||||
StarterKit,
|
||||
],
|
||||
@ -102,9 +102,9 @@ export default {
|
||||
</script>
|
||||
```
|
||||
|
||||
You should now see tiptap in your browser. Time to give yourself a pat on the back! :)
|
||||
You should now see Tiptap in your browser. Time to give yourself a pat on the back! :)
|
||||
|
||||
## 5. Use v-model (optional)
|
||||
You’re probably used to bind your data with `v-model` in forms, that’s also possible with tiptap. Here is a working example component, that you can integrate in your project:
|
||||
You’re probably used to bind your data with `v-model` in forms, that’s also possible with Tiptap. Here is a working example component, that you can integrate in your project:
|
||||
|
||||
https://embed.tiptap.dev/preview/GuideGettingStarted/VModel
|
||||
|
||||
@ -6,7 +6,7 @@ tableOfContents: true
|
||||
# Vue.js 3
|
||||
|
||||
## Introduction
|
||||
The following guide describes how to integrate tiptap with your [Vue](https://vuejs.org/) CLI project.
|
||||
The following guide describes how to integrate Tiptap with your [Vue](https://vuejs.org/) CLI project.
|
||||
|
||||
## Requirements
|
||||
* [Node](https://nodejs.org/en/download/) installed on your machine
|
||||
@ -20,14 +20,14 @@ For the sake of this guide, let’s start with a fresh Vue project called `tipta
|
||||
|
||||
```bash
|
||||
# create a project
|
||||
vue create tiptap-example
|
||||
vue create Tiptap-example
|
||||
|
||||
# change directory
|
||||
cd tiptap-example
|
||||
cd Tiptap-example
|
||||
```
|
||||
|
||||
## 2. Install the dependencies
|
||||
Okay, enough of the boring boilerplate work. Let’s finally install tiptap! For the following example you’ll need the `@tiptap/vue-3` package, with a few components, and `@tiptap/starter-kit` which has the most common extensions to get started quickly.
|
||||
Okay, enough of the boring boilerplate work. Let’s finally install Tiptap! For the following example you’ll need the `@tiptap/vue-3` package, with a few components, and `@tiptap/starter-kit` which has the most common extensions to get started quickly.
|
||||
|
||||
```bash
|
||||
# install with npm
|
||||
@ -40,9 +40,9 @@ yarn add @tiptap/vue-3 @tiptap/starter-kit
|
||||
If you followed step 1 and 2, you can now start your project with `npm run dev` or `yarn dev`, and open [http://localhost:8080](http://localhost:8080) in your favorite browser. This might be different, if you’re working with an existing project.
|
||||
|
||||
## 3. Create a new component
|
||||
To actually start using tiptap, you’ll need to add a new component to your app. Let’s call it `Tiptap` and put the following example code in `components/Tiptap.vue`.
|
||||
To actually start using Tiptap, you’ll need to add a new component to your app. Let’s call it `Tiptap` and put the following example code in `components/Tiptap.vue`.
|
||||
|
||||
This is the fastest way to get tiptap up and running with Vue. It will give you a very basic version of tiptap, without any buttons. No worries, you will be able to add more functionality soon.
|
||||
This is the fastest way to get Tiptap up and running with Vue. It will give you a very basic version of Tiptap, without any buttons. No worries, you will be able to add more functionality soon.
|
||||
|
||||
```html
|
||||
<template>
|
||||
@ -66,7 +66,7 @@ export default {
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
content: '<p>I’m running tiptap with Vue.js. 🎉</p>',
|
||||
content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
|
||||
extensions: [
|
||||
StarterKit,
|
||||
],
|
||||
@ -98,7 +98,7 @@ export default {
|
||||
|
||||
setup() {
|
||||
const editor = useEditor({
|
||||
content: '<p>I’m running tiptap with Vue.js. 🎉</p>',
|
||||
content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
|
||||
extensions: [
|
||||
StarterKit,
|
||||
],
|
||||
@ -132,10 +132,10 @@ export default {
|
||||
</script>
|
||||
```
|
||||
|
||||
You should now see tiptap in your browser. Time to give yourself a pat on the back! :)
|
||||
You should now see Tiptap in your browser. Time to give yourself a pat on the back! :)
|
||||
|
||||
## 5. Use v-model (optional)
|
||||
You’re probably used to bind your data with `v-model` in forms, that’s also possible with tiptap. Here is how that would work with tiptap:
|
||||
You’re probably used to bind your data with `v-model` in forms, that’s also possible with Tiptap. Here is how that would work with Tiptap:
|
||||
|
||||
```html
|
||||
<template>
|
||||
|
||||
@ -4,7 +4,7 @@ tableOfContents: true
|
||||
|
||||
# Introduction
|
||||
|
||||
## What’s tiptap?
|
||||
## What’s Tiptap?
|
||||
[](https://www.npmjs.com/package/@tiptap/core)
|
||||
[](https://npmcharts.com/compare/@tiptap/core?minimal=true)
|
||||
[](https://www.npmjs.com/package/@tiptap/core)
|
||||
@ -12,10 +12,10 @@ tableOfContents: true
|
||||
|
||||
tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
|
||||
|
||||
Create exactly the rich text editor you want out of customizable building blocks. tiptap comes with sensible defaults, a lot of extensions and a friendly API to customize every aspect. It’s backed by a welcoming community, open source, and free.
|
||||
Create exactly the rich text editor you want out of customizable building blocks. Tiptap comes with sensible defaults, a lot of extensions and a friendly API to customize every aspect. It’s backed by a welcoming community, open source, and free.
|
||||
|
||||
## 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.
|
||||
## 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.
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# Jobs
|
||||
Some great companies are looking for developers right now. If you’re looking for a job to work with tiptap and/or hocuspocus, consider applying:
|
||||
Some great companies are looking for developers right now. If you’re looking for a job to work with Tiptap and/or hocuspocus, consider applying:
|
||||
|
||||
**[Frontend Developer](https://bitcrowd.net/jobs) @ bitcrowd**<br>
|
||||
tiptap · Remote · Germany · Full-time
|
||||
|
||||
@ -5,7 +5,7 @@ tableOfContents: true
|
||||
# Upgrade Guide
|
||||
|
||||
## Introduction
|
||||
First of all, tiptap v1 isn’t supported anymore and won’t receive any further updates.
|
||||
First of all, Tiptap v1 isn’t supported anymore and won’t receive any further updates.
|
||||
|
||||
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.
|
||||
|
||||
@ -17,22 +17,22 @@ Yes, it’s tedious work to upgrade your favorite text editor to a new API, but
|
||||
|
||||
The new API will look pretty familiar to you, but there are a ton of changes though. To make the upgrade a little bit easier, here is everything you need to know:
|
||||
|
||||
## Uninstall tiptap v1
|
||||
The whole package structure has changed, we even moved to another npm namespace, so you’ll need to remove the old version entirely before upgrading to tiptap 2.
|
||||
## Uninstall Tiptap v1
|
||||
The whole package structure has changed, we even moved to another npm namespace, so you’ll need to remove the old version entirely before upgrading to Tiptap 2.
|
||||
|
||||
Otherwise you’ll run into an exception, for example “looks like multiple versions of prosemirror-model were loaded”.
|
||||
|
||||
```bash
|
||||
# with npm
|
||||
npm uninstall tiptap tiptap-commands tiptap-extensions tiptap-utils
|
||||
npm uninstall Tiptap Tiptap-commands Tiptap-extensions Tiptap-utils
|
||||
|
||||
# with Yarn
|
||||
yarn remove tiptap tiptap-commands tiptap-extensions tiptap-utils
|
||||
yarn remove Tiptap Tiptap-commands Tiptap-extensions Tiptap-utils
|
||||
```
|
||||
|
||||
## Install tiptap v2
|
||||
## Install Tiptap v2
|
||||
|
||||
Once you have uninstalled the old version of tiptap, install the new Vue 2 package and the starter kit:
|
||||
Once you have uninstalled the old version of Tiptap, install the new Vue 2 package and the starter kit:
|
||||
|
||||
```bash
|
||||
# install with npm
|
||||
@ -42,8 +42,8 @@ npm install @tiptap/vue-2 @tiptap/starter-kit
|
||||
yarn add @tiptap/vue-2 @tiptap/starter-kit
|
||||
```
|
||||
|
||||
## Keep tiptap v2 up to date
|
||||
We are constantly releasing updates to tiptap. Did you know there’s an easy-to-use command to update your dependencies with Yarn?
|
||||
## Keep Tiptap v2 up to date
|
||||
We are constantly releasing updates to Tiptap. Did you know there’s an easy-to-use command to update your dependencies with Yarn?
|
||||
|
||||
```bash
|
||||
yarn upgrade-interactive
|
||||
@ -171,12 +171,12 @@ Most commands can be combined to one call now. That’s shorter than separate fu
|
||||
editor.chain().toggleBold().focus().run()
|
||||
```
|
||||
|
||||
The `.chain()` is required to start a new chain and the `.run()` is needed to actually execute all the commands in between. Read more about [the new tiptap commands](/api/commands) in our API documentation.
|
||||
The `.chain()` is required to start a new chain and the `.run()` is needed to actually execute all the commands in between. Read more about [the new Tiptap commands](/api/commands) in our API documentation.
|
||||
|
||||
## .focus() isn’t called on every command anymore
|
||||
We tried to hide the `.focus()` command from you with tiptap 1 and executed that on every command. That led to issues in specific use cases, where you want to run a command, but don’t want to focus the editor.
|
||||
We tried to hide the `.focus()` command from you with Tiptap 1 and executed that on every command. That led to issues in specific use cases, where you want to run a command, but don’t want to focus the editor.
|
||||
|
||||
With tiptap v2 you have to explicitly call the `focus()` and you probably want to do that in a lot of places. Here is an example:
|
||||
With Tiptap v2 you have to explicitly call the `focus()` and you probably want to do that in a lot of places. Here is an example:
|
||||
|
||||
```js
|
||||
editor.chain().focus().toggleBold().run()
|
||||
@ -186,14 +186,14 @@ editor.chain().focus().toggleBold().run()
|
||||
The new event callbacks have fewer parameters. The same things should be available through `this.` now. [Read more about events here.](/api/events)
|
||||
|
||||
## Collaborative editing
|
||||
The reference implementation for collaborative editing uses Y.js now. That’s a whole different thing. You still can use the tiptap 1 extension, but it’s up to you to adapt it to the new extension API. If you’ve done this, don’t forget to share it with us so we can link to it from here!
|
||||
The reference implementation for collaborative editing uses Y.js now. That’s a whole different thing. You still can use the Tiptap 1 extension, but it’s up to you to adapt it to the new extension API. If you’ve done this, don’t forget to share it with us so we can link to it from here!
|
||||
|
||||
Read more about [the new collaborative editing experience](/guide/collaborative-editing) in our guide.
|
||||
|
||||
## Marks don’t support node view anymore
|
||||
For marks, node views are [not well supported in ProseMirror](https://discuss.prosemirror.net/t/there-is-a-bug-in-marks-nodeview/2722/2). There is also [a related issue](https://github.com/ueberdosis/tiptap/issues/613) for tiptap 1. That’s why we removed it in tiptap 2.
|
||||
For marks, node views are [not well supported in ProseMirror](https://discuss.prosemirror.net/t/there-is-a-bug-in-marks-nodeview/2722/2). There is also [a related issue](https://github.com/ueberdosis/tiptap/issues/613) for Tiptap 1. That’s why we removed it in Tiptap 2.
|
||||
|
||||
## Become a sponsor
|
||||
tiptap wouldn’t exist without the funding of its community. If you fell in love with tiptap, don’t forget to [become a sponsor](/sponsor) and make the maintenance, development and support sustainable.
|
||||
tiptap wouldn’t exist without the funding of its community. If you fell in love with Tiptap, don’t forget to [become a sponsor](/sponsor) and make the maintenance, development and support sustainable.
|
||||
|
||||
In exchange, we’ll take you into our hearts, invite you to private repositories, add a `sponsor ♥` label to your issues and pull requests and more.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user