tiptap/docs/src/docPages/overview/upgrade-guide.md

112 lines
4.4 KiB
Markdown
Raw Normal View History

# Upgrade Guide
## toc
2020-09-27 16:29:01 +08:00
2020-09-15 23:26:27 +08:00
## Reasons to upgrade to tiptap 2.x
2020-09-22 21:45:57 +08:00
Yes, its tedious work to upgrade your favorite text editor to a new API, but we made sure youve got enough reasons to upgrade to the newest version
2020-09-09 21:57:30 +08:00
2020-11-03 23:13:13 +08:00
* Autocompletion in your IDE (thanks to TypeScript)
2020-09-22 21:45:57 +08:00
* Amazing documentation with 100+ pages
* Active development, new features in the making
* Tons of new extensions planned
* Well-tested code base
2020-09-09 21:57:30 +08:00
2020-09-22 21:45:57 +08:00
## Upgrading from 1.x to 2.x
2020-09-16 03:07:16 +08:00
The new API will look pretty familiar too you, but there are a ton of changes though. To make the upgrade a little bit easier, here is everything you need to know:
### Upgrade to Vue.js 3
2020-11-12 22:31:44 +08:00
:::warning Work in progress
Were waiting for Gridsome to be compatible with Vue.js 3.
:::
2020-09-30 22:16:15 +08:00
### Explicitly register the Document, Text and Paragraph extensions
tiptap 1 tried to hide a few required extensions from you with the default setting `useBuiltInExtensions: true`. That setting has been removed and youre required to import all extensions. Be sure to explicitly import at least the [Document](/api/nodes/document), [Paragraph](/api/nodes/paragraph) and [Text](/api/nodes/text) extensions.
2020-09-15 23:26:27 +08:00
```js
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
new Editor({
extensions: [
2020-11-16 17:03:12 +08:00
Document,
Paragraph,
Text,
2020-11-05 22:11:24 +08:00
// all your other extensions
2020-09-15 23:26:27 +08:00
]
})
```
2020-09-30 22:16:15 +08:00
### New document type
2020-10-28 23:32:06 +08:00
~~**We renamed the default `Document` type from `doc` to `document`.** To keep it like that, use your own implementation of the `Document` node or migrate the stored JSON to use the new name.~~
2020-09-09 21:57:30 +08:00
2020-09-30 22:16:15 +08:00
### New extension API
2020-09-22 21:45:57 +08:00
In case youve built some custom extensions for your project, youre required to rewrite them to fit the new API. No worries, you can keep a lot of your work though. The `schema`, `commands`, `keys`, `inputRules` and `pasteRules` all work like they did before. Its just different how you register them.
2020-09-09 21:57:30 +08:00
```js
2020-11-16 17:03:12 +08:00
import { NodeExtension } from '@tiptap/core'
2020-10-28 23:32:06 +08:00
2020-11-16 17:03:12 +08:00
const CustomExtension = NodeExtension.create({
2020-10-28 23:32:06 +08:00
name: 'custom_extension'
defaultOptions: {
},
addAttributes() {
},
parseHTML() {
},
2020-11-16 17:03:12 +08:00
renderHTML({ node, HTMLAttributes }) {
2020-10-28 23:32:06 +08:00
},
addCommands() {
},
addKeyboardShortcuts() {
},
addInputRules() {
},
// and more …
})
```
2020-11-12 22:31:44 +08:00
Read more about [all the nifty details building custom extensions](/guide/build-custom-extensions) in our guide.
2020-09-22 21:45:57 +08:00
2020-09-30 22:16:15 +08:00
### Renamed API methods
2020-09-16 23:01:47 +08:00
[We renamed a lot of commands](/api/commands), hopefully you can migrate to the new API with search & replace. Here is a list of what changed:
| Old method name | New method name |
| --------------- | --------------- |
2020-10-28 23:32:06 +08:00
| ~~`…`~~ | `…` |
2020-09-16 23:01:47 +08:00
2020-09-30 22:16:15 +08:00
### Commands can be chained now
2020-11-12 22:31:44 +08:00
Most commands can be combined to one call now. Thats shorter than separate function calls in most cases. Here is an example to make the selected text bold:
2020-09-24 21:44:03 +08:00
2020-11-12 22:31:44 +08:00
```js
editor.chain().bold().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.
2020-09-24 21:44:03 +08:00
2020-09-30 22:16:15 +08:00
### .focus() isnt called on every command anymore
2020-11-12 22:31:44 +08:00
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 dont want to focus the editor.
With tiptap 2.x you have to explicitly call the `focus()` and you probably want to do that in a lot of places. Here is an example:
2020-09-16 23:01:47 +08:00
```js
2020-09-22 15:08:08 +08:00
editor.chain().focus().bold().run()
2020-09-16 23:01:47 +08:00
```
2020-11-12 22:31:44 +08:00
### Collaborative editing
The reference implementation for collaborative editing uses Y.js now. Thats a whole different thing. You still can use the tiptap 1 extension, but its up to you to adapt it to the new extension API. If youve done this, dont 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.
### Become a sponsor
tiptap wouldnt exist without the funding of its community. If you fell in love with tiptap, dont forget to [become a sponsor](/sponsor) and make the [maintenance, development and support](/open) sustainable.
In exchange, well take you into our hearts, invite you to private repositories, add a `sponsor 💖` label to your issues and pull requests and more.