diff --git a/docs/guide/output.md b/docs/guide/output.md index 3faf428187b..36b06bbc840 100644 --- a/docs/guide/output.md +++ b/docs/guide/output.md @@ -115,7 +115,7 @@ To render the saved content, set the editor to read-only. That’s how you can a 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. diff --git a/docs/guide/prosemirror.md b/docs/guide/prosemirror.md index 12e12b9b962..a034ae8b6e2 100644 --- a/docs/guide/prosemirror.md +++ b/docs/guide/prosemirror.md @@ -4,7 +4,9 @@ tableOfContents: true # Accessing ProseMirror internals -The ProseMirror internals are packaged in the `@tiptap/pm` package that you need to install with `npm install @tiptap/pm`. If you already have this done you can skip the following step. +Tiptap is built on top of ProseMirror, which has a pretty powerful API. To access it, we provide the package `@tiptap/pm`. This package provides all important ProseMirror packages like `prosemirror-state`, `prosemirror-view` or `prosemirror-model`. Using the package for custom development makes sure that you always have the same version of ProseMirror which is used by Tiptap as well. This way, we can make sure that Tiptap and all extensions are compatible with each other and prevent version clashes. Another plus is that you don't need to install all ProseMirror packages manually, especially if you are not using npm or any other package manager that supports automatic peer dependency resolution. + +Installation: ```bash npm i @tiptap/pm @@ -37,3 +39,5 @@ The following packages are available: - `@tiptap/pm/trailing-node` - `@tiptap/pm/transform` - `@tiptap/pm/view` + +You can find out more about those libraries in the [ProseMirror documentation](https://prosemirror.net/docs/ref). diff --git a/docs/installation.md b/docs/installation.md index d451999f066..d3b29119ca4 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -8,16 +8,6 @@ tableOfContents: true 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. -## Base Setup - -To get started you will need to install `@tiptap/core`, `@tiptap/pm` and `@tiptap/starter-kit` in your project like this: - -```bash -npm install @tiptap/core @tiptap/pm @tiptap/starter-kit -``` - -After that, you can start using Tiptap in your project. To integrate it into your framework, please follow the guides below. - ## Integration guides - [Vanilla JavaScript](/installation/vanilla-javascript) diff --git a/docs/installation/alpine.md b/docs/installation/alpine.md index 02c82bd9ef0..9f2f11ab4e2 100644 --- a/docs/installation/alpine.md +++ b/docs/installation/alpine.md @@ -28,7 +28,7 @@ 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, the `@tiptap/pm` 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, the `@tiptap/pm` package and the `@tiptap/starter-kit`, which includes the most common extensions to get started quickly. ```bash npm install alpinejs @tiptap/core @tiptap/pm @tiptap/starter-kit diff --git a/docs/installation/react.md b/docs/installation/react.md index 590ed176ba4..e20f4824eba 100644 --- a/docs/installation/react.md +++ b/docs/installation/react.md @@ -34,7 +34,7 @@ cd my-tiptap-project ``` #### 2. Install the dependencies -Time to install the `@tiptap/react` package and our [`StarterKit`](/api/extensions/starter-kit), which has the most popular extensions to get started quickly. +Time to install the `@tiptap/react` package, `@tiptap/pm` (the ProseMirror library) and `@tiptap/starter-kit`, which includes the most popular extensions to get started quickly. ```bash npm install @tiptap/react @tiptap/pm @tiptap/starter-kit diff --git a/docs/installation/svelte.md b/docs/installation/svelte.md index 9e931764422..e1ce79d8c97 100644 --- a/docs/installation/svelte.md +++ b/docs/installation/svelte.md @@ -28,7 +28,7 @@ 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, `@tiptap/pm` 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, `@tiptap/pm` and `@tiptap/starter-kit`, which includes the most common extensions to get started quickly. ```bash npm install @tiptap/core @tiptap/pm @tiptap/starter-kit diff --git a/docs/installation/vanilla-javascript.md b/docs/installation/vanilla-javascript.md index bc1cd6afa21..2933113aba5 100644 --- a/docs/installation/vanilla-javascript.md +++ b/docs/installation/vanilla-javascript.md @@ -9,9 +9,7 @@ tableOfContents: true You are using plain JavaScript or a framework that is not listed here? No worries, we provide everything you need. ## 1. Install the dependencies -For the following example you will need `@tiptap/core` (the actual editor), `@tiptap/pm` (the ProseMirror library) and `@tiptap/starter-kit`. - -The StarterKit doesn’t include all, but the most common extensions. +For the following example you will need `@tiptap/core` (the actual editor), `@tiptap/pm` (the ProseMirror library) and `@tiptap/starter-kit`. The StarterKit doesn’t include all, but the most common extensions. ```bash npm install @tiptap/core @tiptap/pm @tiptap/starter-kit diff --git a/docs/installation/vue2.md b/docs/installation/vue2.md index 39326addfb7..334d3aeed3e 100644 --- a/docs/installation/vue2.md +++ b/docs/installation/vue2.md @@ -27,10 +27,10 @@ cd my-tiptap-project ``` ## 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, `@tiptap/pm` (the ProseMirror library) and `@tiptap/starter-kit`, which includes the most common extensions to get started quickly. ```bash -npm install @tiptap/vue-2 @tiptap/starter-kit +npm install @tiptap/vue-2 @tiptap/pm @tiptap/starter-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. diff --git a/docs/installation/vue3.md b/docs/installation/vue3.md index 91c5d29e0d7..726af003148 100644 --- a/docs/installation/vue3.md +++ b/docs/installation/vue3.md @@ -27,10 +27,10 @@ cd my-tiptap-project ``` ## 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, `@tiptap/pm` (the ProseMirror library) and `@tiptap/starter-kit`, which includes the most common extensions to get started quickly. ```bash -npm install @tiptap/vue-3 @tiptap/starter-kit +npm install @tiptap/vue-3 @tiptap/pm @tiptap/starter-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. diff --git a/docs/links.yaml b/docs/links.yaml index 854af928b70..7c036952a2b 100644 --- a/docs/links.yaml +++ b/docs/links.yaml @@ -117,7 +117,7 @@ items: - title: Configuration link: /guide/configuration - - title: ProseMirror + - title: ProseMirror API link: /guide/prosemirror - title: Menus link: /guide/menus diff --git a/docs/overview/upgrade-guide.md b/docs/overview/upgrade-guide.md index 8b91d439fe2..b33aa3bc044 100644 --- a/docs/overview/upgrade-guide.md +++ b/docs/overview/upgrade-guide.md @@ -28,10 +28,10 @@ npm uninstall tiptap tiptap-commands tiptap-extensions tiptap-utils ## 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, the ProseMirror library and the starter kit: ```bash -npm install @tiptap/vue-2 @tiptap/starter-kit +npm install @tiptap/vue-2 @tiptap/pm @tiptap/starter-kit ``` ## Keep Tiptap v2 up to date