mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 06:03:22 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

docs: improve peer dependency hints

Browse Source
This commit is contained in:
svenadlung 2022-12-23 00:00:57 +01:00
parent c519716720
commit 2399a9c2ca
15 changed files with 87 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/api/extensions/collaboration-cursor.md
View File

@ -20,6 +20,10 @@ We kindly ask you to [sponsor our work](/sponsor) when using this extension in p
npm install @tiptap/extension-collaboration-cursor
```
:::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 [see here](https://tiptap.dev/installation/peer-dependencies#tiptapextension-collaboration-cursor) which packages are needed and how to install them.
:::
This extension requires the [`Collaboration`](/api/extensions/collaboration) extension.
## Settings

4
docs/api/extensions/collaboration.md
View File

@ -20,6 +20,10 @@ We kindly ask you to [sponsor our work](/sponsor) when using this extension in p
npm install @tiptap/extension-collaboration yjs y-websocket
```
:::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 [see here](https://tiptap.dev/installation/peer-dependencies#tiptapextension-collaboration) which packages are needed and how to install them.
:::
## Settings
### document

16
docs/api/extensions/dropcursor.md
View File

@ -16,19 +16,9 @@ Note that Tiptap is headless, but the dropcursor needs CSS for its appearance. T
npm install @tiptap/extension-dropcursor
```
If you use NPM 6 or lower, yarn or pnpm, you also need to install the Prosemirror dependencies.
```bash
# NPM 6 and lower
npm install prosemirror-dropcursor
# yarn
yarn add prosemirror-dropcursor
# pnpm
pnpm install prosemirror-dropcursor
```
:::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 [see here](https://tiptap.dev/installation/peer-dependencies#tiptapextension-dropcursor) which packages are needed and how to install them.
:::
## Settings

15
docs/api/extensions/gapcursor.md
View File

@ -16,18 +16,9 @@ Note that Tiptap is headless, but the gapcursor needs CSS for its appearance. Th
npm install @tiptap/extension-gapcursor
```
If you use NPM 6 or lower, yarn or pnpm, you also need to install the Prosemirror dependencies.
```bash
# NPM 6 and lower
npm install prosemirror-gapcursor
# yarn
yarn add prosemirror-gapcursor
# pnpm
pnpm install prosemirror-gapcursor
```
:::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 [see here](https://tiptap.dev/installation/peer-dependencies#tiptapextension-gapcursor) which packages are needed and how to install them.
:::
## Source code
[packages/extension-gapcursor/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-gapcursor/)

15
docs/api/extensions/history.md
View File

@ -14,18 +14,9 @@ This extension provides history support. All changes to the document will be tra
npm install @tiptap/extension-history
```
If you use NPM 6 or lower, yarn or pnpm, you also need to install the Prosemirror dependencies.
```bash
# NPM 6 and lower
npm install prosemirror-history
# yarn
yarn add prosemirror-history
# pnpm
pnpm install prosemirror-history
```
:::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 [see here](https://tiptap.dev/installation/peer-dependencies#tiptapextension-history) which packages are needed and how to install them.
:::
## Settings

4
docs/api/extensions/starter-kit.md
View File

@ -14,6 +14,10 @@ The `StarterKit` is a collection of the most popular Tiptap extensions. If you
npm install @tiptap/starter-kit
```
:::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 [see here](https://tiptap.dev/installation/peer-dependencies#tiptapstarter-kit) which packages are needed and how to install them.
:::
## Included extensions
### Nodes

8
docs/guide/collaborative-editing.md
View File

@ -28,6 +28,10 @@ First, install the dependencies:
npm install @tiptap/extension-collaboration yjs y-webrtc
```
:::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 [see here](https://tiptap.dev/installation/peer-dependencies#tiptapextension-collaboration) which packages are needed and how to install them.
:::
Now, create a new Y document, and register it with Tiptap:
```js
@ -74,6 +78,10 @@ For the client, the example is nearly the same, only the provider is different.
npm install @tiptap/extension-collaboration @hocuspocus/provider
```
:::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 [see here](https://tiptap.dev/installation/peer-dependencies#tiptapextension-collaboration) which packages are needed and how to install them.
:::
And then register the WebSocket provider with Tiptap:
```js

4
docs/installation/alpine.md
View File

@ -34,6 +34,10 @@ Okay, enough of the boring boilerplate work. Let’s finally install Tiptap! For
npm install alpinejs @tiptap/core @tiptap/starter-kit
```
:::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)
:::
If you followed step 1, you can now start your project with `npm run dev`, and open [http://localhost:5173](http://localhost:5173) in your favorite browser. This might be different, if you’re working with an existing project.
## 3. Initialize the editor

4
docs/installation/nextjs.md
View File

@ -31,6 +31,10 @@ Now that we have a standard boilerplate set up we can get started on getting Tip
npm install @tiptap/react @tiptap/starter-kit
```
:::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)
:::
If you followed step 1 and 2, you can now start your project with `npm run 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

4
docs/installation/nuxt.md
View File

@ -32,6 +32,10 @@ Okay, enough of the boring boilerplate work. Let’s finally install Tiptap! For
npm install @tiptap/vue-2 @tiptap/starter-kit
```
:::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)
:::
If you followed step 1 and 2, you can now start your project with `npm run 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

202
docs/installation/peer-dependencies.md
View File

@ -8,7 +8,7 @@ tableOfContents: true
With the release of version 2.0.0-beta.205 we introduced peer dependencies. Most packages require the installation of peer dependencies.
## 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.
In the past it has happened that users installed ProseMirror or Yjs packages to develope their own extensions, which had a different version than the ones included in Tiptap. This has caused version clashes.
## How to install
@ -17,7 +17,8 @@ If you are using NPM 7 or higher, you can ignore the following notes. NPM instal
### Yarn, pNPM, npm 6 or less
#### @tiptap/core
#### @tiptap/core
| Package manager | Command |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-commands prosemirror-keymap prosemirror-model prosemirror-schema-list prosemirror-state prosemirror-transform prosemirror-view` |
@ -26,6 +27,7 @@ If you are using NPM 7 or higher, you can ignore the following notes. NPM instal
#### @tiptap/starter-kit
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-history prosemirror-dropcursor prosemirror-gapcursor` |
@ -33,168 +35,6 @@ If you are using NPM 7 or higher, you can ignore the following notes. NPM instal
| npm 6 or less | `npm install prosemirror-history prosemirror-dropcursor prosemirror-gapcursor` |
#### @tiptap/vue-2
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-view` |
| pNPM | `pnpm install prosemirror-view` |
| npm 6 or less | `npm install prosemirror-view` |
#### @tiptap/vue-3
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-state prosemirror-view` |
| pNPM | `pnpm install prosemirror-state prosemirror-view` |
| npm 6 or less | `npm install prosemirror-state prosemirror-view` |
#### @tiptap/extension-bubble-menu
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-state prosemirror-view` |
| pNPM | `pnpm install prosemirror-state prosemirror-view` |
| npm 6 or less | `npm install prosemirror-state prosemirror-view` |
#### @tiptap/extension-floating-menu
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-state prosemirror-view` |
| pNPM | `pnpm install prosemirror-state prosemirror-view` |
| npm 6 or less | `npm install prosemirror-state prosemirror-view` |
#### @tiptap/extension-character-count
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-model prosemirror-state` |
| pNPM | `pnpm install prosemirror-model prosemirror-state` |
| npm 6 or less | `npm install prosemirror-model prosemirror-state` |
#### @tiptap/extension-code-block
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-state` |
| pNPM | `pnpm install prosemirror-state` |
| npm 6 or less | `npm install prosemirror-state` |
#### @tiptap/extension-code-block-lowlight
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-model prosemirror-state prosemirror-view` |
| pNPM | `pnpm install prosemirror-model prosemirror-state prosemirror-view` |
| npm 6 or less | `npm install prosemirror-model prosemirror-state prosemirror-view` |
#### @tiptap/extension-horizontal-rule
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-state` |
| pNPM | `pnpm install prosemirror-state` |
| npm 6 or less | `npm install prosemirror-state` |
#### @tiptap/extension-link
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-model prosemirror-state` |
| pNPM | `pnpm install prosemirror-model prosemirror-state` |
| npm 6 or less | `npm install prosemirror-model prosemirror-state` |
#### @tiptap/extension-mention
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-model prosemirror-state` |
| pNPM | `pnpm install prosemirror-model prosemirror-state` |
| npm 6 or less | `npm install prosemirror-model prosemirror-state` |
#### @tiptap/extension-table
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-model prosemirror-state prosemirror-view` |
| pNPM | `pnpm install prosemirror-model prosemirror-state prosemirror-view` |
| npm 6 or less | `npm install prosemirror-model prosemirror-state prosemirror-view` |
#### @tiptap/extension-task-item
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-model` |
| pNPM | `pnpm install prosemirror-model` |
| npm 6 or less | `npm install prosemirror-model` |
#### @tiptap/extension-collaboration
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-state y-prosemirror` |
| pNPM | `pnpm install prosemirror-state y-prosemirror` |
| npm 6 or less | `npm install prosemirror-state y-prosemirror` |
#### @tiptap/extension-collaboration-cursor
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add y-prosemirror` |
| pNPM | `pnpm install y-prosemirror` |
| npm 6 or less | `npm install y-prosemirror` |
#### @tiptap/extension-placeholder
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-model prosemirror-state prosemirror-view` |
| pNPM | `pnpm install prosemirror-model prosemirror-state prosemirror-view` |
| npm 6 or less | `npm install prosemirror-model prosemirror-state prosemirror-view` |
#### @tiptap/extension-dropcursor
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-dropcursor` |
| pNPM | `pnpm install prosemirror-dropcursor` |
| npm 6 or less | `npm install prosemirror-dropcursor` |
#### @tiptap/extension-focus
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-state prosemirror-view` |
| pNPM | `pnpm install prosemirror-state prosemirror-view` |
| npm 6 or less | `npm install prosemirror-state prosemirror-view` |
#### @tiptap/extension-gapcursor
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-gapcursor` |
| pNPM | `pnpm install prosemirror-gapcursor` |
| npm 6 or less | `npm install prosemirror-gapcursor` |
#### @tiptap/extension-history
| Package manager | Command |
@ -204,22 +44,40 @@ If you are using NPM 7 or higher, you can ignore the following notes. NPM instal
| npm 6 or less | `npm install prosemirror-history` |
#### @tiptap/suggestion
#### @tiptap/extension-gapcursor
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-model prosemirror-state prosemirror-view` |
| pNPM | `pnpm install prosemirror-model prosemirror-state prosemirror-view` |
| npm 6 or less | `npm install prosemirror-model prosemirror-state prosemirror-view` |
| Yarn | `yarn add prosemirror-gapcursor` |
| pNPM | `pnpm install prosemirror-gapcursor` |
| npm 6 or less | `npm install prosemirror-gapcursor` |
#### @tiptap/html
#### @tiptap/extension-dropcursor
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add prosemirror-model` |
| pNPM | `pnpm install prosemirror-model` |
| npm 6 or less | `npm install prosemirror-model` |
| Yarn | `yarn add prosemirror-dropcursor` |
| pNPM | `pnpm install prosemirror-dropcursor` |
| npm 6 or less | `npm install prosemirror-dropcursor` |
#### @tiptap/extension-collaboration
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add y-prosemirror` |
| pNPM | `pnpm install y-prosemirror` |
| npm 6 or less | `npm install y-prosemirror` |
#### @tiptap/extension-collaboration-cursor
| Package manager | Command |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Yarn | `yarn add y-prosemirror` |
| pNPM | `pnpm install y-prosemirror` |
| npm 6 or less | `npm install y-prosemirror` |
:::pro Oops, this is work in progress

4
docs/installation/react.md
View File

@ -40,6 +40,10 @@ Time to install the `@tiptap/react` package and our [`StarterKit`](/api/extensio
npm install @tiptap/react @tiptap/starter-kit
```
:::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)
:::
If you followed step 1 and 2, you can now start your project with `npm run start`, and open [http://localhost:3000](http://localhost:3000) in your browser.
#### 3. Create a new component

4
docs/installation/svelte.md
View File

@ -34,6 +34,10 @@ Okay, enough of the boring boilerplate work. Let’s finally install Tiptap! For
npm install @tiptap/core @tiptap/starter-kit
```
:::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)
:::
If you followed step 1 and 2, you can now start your project with `npm run 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

4
docs/installation/vue2.md
View File

@ -33,6 +33,10 @@ Okay, enough of the boring boilerplate work. Let’s finally install Tiptap! For
npm install @tiptap/vue-2 @tiptap/starter-kit
```
:::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)
:::
If you followed step 1 and 2, you can now start your project with `npm run 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

4
docs/installation/vue3.md
View File

@ -33,6 +33,10 @@ Okay, enough of the boring boilerplate work. Let’s finally install Tiptap! For
npm install @tiptap/vue-3 @tiptap/starter-kit
```
:::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)
:::
If you followed step 1 and 2, you can now start your project with `npm run 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