docs: explain peer dependencies

This commit is contained in:
svenadlung 2022-12-22 23:15:57 +01:00
parent b05433272c
commit e367d5ecfc
3 changed files with 125 additions and 125 deletions

View File

@ -19,6 +19,10 @@ Tiptap is framework-agnostic and even works with Vanilla JavaScript (if thats
* [Alpine.js](/installation/alpine)
* [PHP](/installation/php)
:::warning Are you using Yarn, pNPM, npm 6 or less?
Unfortunately your package manager does not install peer dependencies automatically and you have to install them by your own. Please [read this](https://tiptap.dev/installation/peer-dependencies) to understand what is needed in that case.
:::
### Community efforts
* [Angular](https://github.com/sibiraj-s/ngx-tiptap)
* [SolidJS](https://github.com/LXSMNSYC/solid-tiptap)

View File

@ -4,223 +4,222 @@ tableOfContents: true
# Peer dependencies
## Introduction
With the release of version 2.0.0-beta.205 we introduced peer dependencies. Most packages require the installation of peer dependencies.
## But why?
## Why peer dependencies
In the past it has happened that users installed ProseMirror or Yjs packages, which had a different version than the ones included in Tiptap, to develope their own extensions. This has caused version clashes.
## How to install
### NPM (version 7 or higher)
### NPM 7 or higher
If you are using NPM 7 or higher, you can ignore the following notes. NPM installs peer dependencies automatically and no further action is required.
### Yarn, pNPM, npm < Version 6
### Yarn, pNPM, npm 6 or less
#### @tiptap/core
| Package manager | Description |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-commands prosemirror-keymap prosemirror-model prosemirror-schema-list prosemirror-state prosemirror-transform prosemirror-view |
| pNPM | pnpm install prosemirror-commands prosemirror-keymap prosemirror-model prosemirror-schema-list prosemirror-state prosemirror-transform prosemirror-view |
| npm (< 6) | npm install prosemirror-commands prosemirror-keymap prosemirror-model prosemirror-schema-list prosemirror-state prosemirror-transform prosemirror-view |
| Package manager | Description |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-commands prosemirror-keymap prosemirror-model prosemirror-schema-list prosemirror-state prosemirror-transform prosemirror-view` |
| pNPM | `pnpm install prosemirror-commands prosemirror-keymap prosemirror-model prosemirror-schema-list prosemirror-state prosemirror-transform prosemirror-view` |
| npm (< 6) | `npm install prosemirror-commands prosemirror-keymap prosemirror-model prosemirror-schema-list prosemirror-state prosemirror-transform prosemirror-view` |
#### @tiptap/starter-kit
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-history prosemirror-dropcursor prosemirror-gapcursor |
| pNPM | pnpm install prosemirror-history prosemirror-dropcursor prosemirror-gapcursor |
| npm (< 6) | npm install prosemirror-history prosemirror-dropcursor prosemirror-gapcursor |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-history prosemirror-dropcursor prosemirror-gapcursor` |
| pNPM | `pnpm install prosemirror-history prosemirror-dropcursor prosemirror-gapcursor` |
| npm (< 6) | `npm install prosemirror-history prosemirror-dropcursor prosemirror-gapcursor` |
#### @tiptap/vue-2
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-view |
| pNPM | pnpm install prosemirror-view |
| npm (< 6) | npm install prosemirror-view |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-view` |
| pNPM | `pnpm install prosemirror-view` |
| npm (< 6) | `npm install prosemirror-view` |
#### @tiptap/vue-3
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-state prosemirror-view |
| pNPM | pnpm install prosemirror-state prosemirror-view |
| npm (< 6) | npm install prosemirror-state prosemirror-view |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-state prosemirror-view` |
| pNPM | `pnpm install prosemirror-state prosemirror-view` |
| npm (< 6) | `npm install prosemirror-state prosemirror-view` |
#### @tiptap/extension-bubble-menu
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-state prosemirror-view |
| pNPM | pnpm install prosemirror-state prosemirror-view |
| npm (< 6) | npm install prosemirror-state prosemirror-view |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-state prosemirror-view` |
| pNPM | `pnpm install prosemirror-state prosemirror-view` |
| npm (< 6) | `npm install prosemirror-state prosemirror-view` |
#### @tiptap/extension-floating-menu
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-state prosemirror-view |
| pNPM | pnpm install prosemirror-state prosemirror-view |
| npm (< 6) | npm install prosemirror-state prosemirror-view |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-state prosemirror-view` |
| pNPM | `pnpm install prosemirror-state prosemirror-view` |
| npm (< 6) | `npm install prosemirror-state prosemirror-view` |
#### @tiptap/extension-character-count
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-model prosemirror-state |
| pNPM | pnpm install prosemirror-model prosemirror-state |
| npm (< 6) | npm install prosemirror-model prosemirror-state |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-model prosemirror-state` |
| pNPM | `pnpm install prosemirror-model prosemirror-state` |
| npm (< 6) | `npm install prosemirror-model prosemirror-state` |
#### @tiptap/extension-code-block
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-state |
| pNPM | pnpm install prosemirror-state |
| npm (< 6) | npm install prosemirror-state |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-state` |
| pNPM | `pnpm install prosemirror-state` |
| npm (< 6) | `npm install prosemirror-state` |
#### @tiptap/extension-code-block-lowlight
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-model prosemirror-state prosemirror-view |
| pNPM | pnpm install prosemirror-model prosemirror-state prosemirror-view |
| npm (< 6) | npm install prosemirror-model prosemirror-state prosemirror-view |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-model prosemirror-state prosemirror-view` |
| pNPM | `pnpm install prosemirror-model prosemirror-state prosemirror-view` |
| npm (< 6) | `npm install prosemirror-model prosemirror-state prosemirror-view` |
#### @tiptap/extension-horizontal-rule
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-state |
| pNPM | pnpm install prosemirror-state |
| npm (< 6) | npm install prosemirror-state |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-state` |
| pNPM | `pnpm install prosemirror-state` |
| npm (< 6) | `npm install prosemirror-state` |
#### @tiptap/extension-link
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-model prosemirror-state |
| pNPM | pnpm install prosemirror-model prosemirror-state |
| npm (< 6) | npm install prosemirror-model prosemirror-state |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-model prosemirror-state` |
| pNPM | `pnpm install prosemirror-model prosemirror-state` |
| npm (< 6) | `npm install prosemirror-model prosemirror-state` |
#### @tiptap/extension-mention
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-model prosemirror-state |
| pNPM | pnpm install prosemirror-model prosemirror-state |
| npm (< 6) | npm install prosemirror-model prosemirror-state |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-model prosemirror-state` |
| pNPM | `pnpm install prosemirror-model prosemirror-state` |
| npm (< 6) | `npm install prosemirror-model prosemirror-state` |
#### @tiptap/extension-table
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-model prosemirror-state prosemirror-view |
| pNPM | pnpm install prosemirror-model prosemirror-state prosemirror-view |
| npm (< 6) | npm install prosemirror-model prosemirror-state prosemirror-view |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-model prosemirror-state prosemirror-view` |
| pNPM | `pnpm install prosemirror-model prosemirror-state prosemirror-view` |
| npm (< 6) | `npm install prosemirror-model prosemirror-state prosemirror-view` |
#### @tiptap/extension-task-item
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-model |
| pNPM | pnpm install prosemirror-model |
| npm (< 6) | npm install prosemirror-model |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-model` |
| pNPM | `pnpm install prosemirror-model` |
| npm (< 6) | `npm install prosemirror-model` |
#### @tiptap/extension-collaboration
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-state y-prosemirror |
| pNPM | pnpm install prosemirror-state y-prosemirror |
| npm (< 6) | npm install prosemirror-state y-prosemirror |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-state y-prosemirror` |
| pNPM | `pnpm install prosemirror-state y-prosemirror` |
| npm (< 6) | `npm install prosemirror-state y-prosemirror` |
#### @tiptap/extension-collaboration-cursor
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add y-prosemirror |
| pNPM | pnpm install y-prosemirror |
| npm (< 6) | npm install y-prosemirror |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add y-prosemirror` |
| pNPM | `pnpm install y-prosemirror` |
| npm (< 6) | `npm install y-prosemirror` |
#### @tiptap/extension-placeholder
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-model prosemirror-state prosemirror-view |
| pNPM | pnpm install prosemirror-model prosemirror-state prosemirror-view |
| npm (< 6) | npm install prosemirror-model prosemirror-state prosemirror-view |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-model prosemirror-state prosemirror-view` |
| pNPM | `pnpm install prosemirror-model prosemirror-state prosemirror-view` |
| npm (< 6) | `npm install prosemirror-model prosemirror-state prosemirror-view` |
#### @tiptap/extension-dropcursor
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-dropcursor |
| pNPM | pnpm install prosemirror-dropcursor |
| npm (< 6) | npm install prosemirror-dropcursor |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-dropcursor` |
| pNPM | `pnpm install prosemirror-dropcursor` |
| npm (< 6) | `npm install prosemirror-dropcursor` |
#### @tiptap/extension-focus
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-state prosemirror-view |
| pNPM | pnpm install prosemirror-state prosemirror-view |
| npm (< 6) | npm install prosemirror-state prosemirror-view |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-state prosemirror-view` |
| pNPM | `pnpm install prosemirror-state prosemirror-view` |
| npm (< 6) | `npm install prosemirror-state prosemirror-view` |
#### @tiptap/extension-gapcursor
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-gapcursor |
| pNPM | pnpm install prosemirror-gapcursor |
| npm (< 6) | npm install prosemirror-gapcursor |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-gapcursor` |
| pNPM | `pnpm install prosemirror-gapcursor` |
| npm (< 6) | `npm install prosemirror-gapcursor` |
#### @tiptap/extension-history
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-history |
| pNPM | pnpm install prosemirror-history |
| npm (< 6) | npm install prosemirror-history |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-history` |
| pNPM | `pnpm install prosemirror-history` |
| npm (< 6) | `npm install prosemirror-history` |
#### @tiptap/suggestion
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-model prosemirror-state prosemirror-view |
| pNPM | pnpm install prosemirror-model prosemirror-state prosemirror-view |
| npm (< 6) | npm install prosemirror-model prosemirror-state prosemirror-view |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-model prosemirror-state prosemirror-view` |
| pNPM | `pnpm install prosemirror-model prosemirror-state prosemirror-view` |
| npm (< 6) | `npm install prosemirror-model prosemirror-state prosemirror-view` |
#### @tiptap/html
| Package manager | Description |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Yarn | yarn add prosemirror-model |
| pNPM | pnpm install prosemirror-model |
| npm (< 6) | npm install prosemirror-model |
| Package manager | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-model` |
| pNPM | `pnpm install prosemirror-model` |
| npm (< 6) | `npm install prosemirror-model` |
:::pro Oops, this is work in progress

View File

@ -17,11 +17,8 @@ The StarterKit doesnt include all, but the most common extensions.
npm install @tiptap/core @tiptap/starter-kit
```
:::warning Using Yarn, pNPM, npm (< Version 6)?
Unfortunately your package manager does not install peer dependencies automatically and you have to install them by your own. Please see links below which packages it needs and how to install them:
- [@tiptap/core](https://tiptap.dev/installation/peer-dependencies#)
- [@tiptap/starter-kit](https://tiptap.dev/installation/peer-dependencies#)
:::warning Are you using Yarn, pNPM, npm 6 or less?
Unfortunately your package manager does not install peer dependencies automatically and you have to install them by your own. Please check the following links to find out what dependencies are needed and how to install them: [@tiptap/core](https://tiptap.dev/installation/peer-dependencies#tiptapcore), [@tiptap/starter-kit](https://tiptap.dev/installation/peer-dependencies#tiptapstarter-kit)
:::
## 2. Add some markup