docs: remove Yarn instructions
This commit is contained in:
@@ -13,10 +13,7 @@ As always, the markup and styling is totally up to you.
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-bubble-menu
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-bubble-menu
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -11,11 +11,7 @@ The `CharacterCount` extension limits the number of allowed character to a speci
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-character-count
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-character-count
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -17,11 +17,7 @@ We kindly ask you to [sponsor our work](/sponsor) when using this extension in p
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-collaboration-cursor
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-collaboration-cursor
|
||||
```
|
||||
|
||||
This extension requires the [`Collaboration`](/api/extensions/collaboration) extension.
|
||||
|
||||
@@ -17,11 +17,7 @@ We kindly ask you to [sponsor our work](/sponsor) when using this extension in p
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-collaboration yjs y-websocket
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-collaboration yjs y-websocket
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -11,11 +11,7 @@ This extension enables you to set the font color in the editor. It uses the [`Te
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-text-style @tiptap/extension-color
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-text-style @tiptap/extension-color
|
||||
```
|
||||
|
||||
This extension requires the [`TextStyle`](/api/marks/text-style) mark.
|
||||
|
||||
@@ -13,11 +13,7 @@ Note that Tiptap is headless, but the dropcursor needs CSS for its appearance. T
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-dropcursor
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-dropcursor
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -11,10 +11,7 @@ This extension will make a contextual menu appear near a selection of text.
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-floating-menu
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-floating-menu
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -13,11 +13,7 @@ Note that it’s only a class, the styling is totally up to you. The usage examp
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-focus
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-focus
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -10,11 +10,7 @@ This extension enables you to set the font family in the editor. It uses the [`T
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-text-style @tiptap/extension-font-family
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-text-style @tiptap/extension-font-family
|
||||
```
|
||||
|
||||
This extension requires the [`TextStyle`](/api/marks/text-style) mark.
|
||||
|
||||
@@ -13,11 +13,7 @@ Note that Tiptap is headless, but the gapcursor needs CSS for its appearance. Th
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-gapcursor
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-gapcursor
|
||||
```
|
||||
|
||||
## Source code
|
||||
|
||||
@@ -11,11 +11,7 @@ This extension provides history support. All changes to the document will be tra
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-history
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-history
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -11,11 +11,7 @@ This extension provides placeholder support. Give your users an idea what they s
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-placeholder
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-placeholder
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -11,11 +11,7 @@ The `StarterKit` is a collection of the most popular Tiptap extensions. If you
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/starter-kit
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/starter-kit
|
||||
```
|
||||
|
||||
## Included extensions
|
||||
|
||||
@@ -15,11 +15,7 @@ This extension adds a text align attribute to a specified list of nodes. The att
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-text-align
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-text-align
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -11,11 +11,7 @@ This extension tries to help with common text patterns with the correct typograp
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-typography
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-typography
|
||||
```
|
||||
|
||||
## Rules
|
||||
|
||||
@@ -17,11 +17,7 @@ The extension will generate the corresponding `<strong>` HTML tags when reading
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-bold
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-bold
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -13,11 +13,7 @@ Type something with <code>\`back-ticks around\`</code> and it will magically tra
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-code
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-code
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -13,11 +13,7 @@ Type `==two equal signs==` and it will magically transform to <mark>highlighted<
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-highlight
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-highlight
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -17,11 +17,7 @@ The extension will generate the corresponding `<em>` HTML tags when reading cont
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-italic
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-italic
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -15,11 +15,7 @@ Pasted URLs will be transformed to links automatically.
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-link
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-link
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -17,11 +17,7 @@ The extension will generate the corresponding `<s>` HTML tags when reading conte
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-strike
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-strike
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -11,11 +11,7 @@ Use this extension to render text in <sub>subscript</sub>. If you pass `<sub>` o
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-subscript
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-subscript
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -11,11 +11,7 @@ Use this extension to render text in <sup>superscript</sup>. If you pass `<sup>`
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-superscript
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-superscript
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -11,11 +11,7 @@ This mark renders a `<span>` HTML tag and enables you to add a list of styling r
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-text-style
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-text-style
|
||||
```
|
||||
|
||||
## Commands
|
||||
|
||||
@@ -17,11 +17,7 @@ The extension will generate the corresponding `<u>` HTML tags when reading conte
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-underline
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-underline
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -13,11 +13,7 @@ Type <code>> </code> at the beginning of a new line and it will magically t
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-blockquote
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-blockquote
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -13,11 +13,7 @@ Type <code>* </code>, <code>- </code> or <code>+ </code> at the b
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-bullet-list @tiptap/extension-list-item
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-bullet-list @tiptap/extension-list-item
|
||||
```
|
||||
|
||||
This extension requires the [`ListItem`](/api/nodes/list-item) node.
|
||||
|
||||
@@ -13,11 +13,7 @@ Type <code>``` </code> (three backticks and a space) or <
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-code-block-lowlight
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-code-block-lowlight
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -17,11 +17,7 @@ The CodeBlock extension doesn’t come with styling and has no syntax highlighti
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-code-block
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-code-block
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -17,11 +17,7 @@ tiptap 1 tried to hide that node from you, but it has always been there. You hav
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-document
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-document
|
||||
```
|
||||
|
||||
## Source code
|
||||
|
||||
@@ -11,11 +11,7 @@ The HardBreak extensions adds support for the `<br>` HTML tag, which forces a li
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-hard-break
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-hard-break
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -13,11 +13,7 @@ Type <code># </code> at the beginning of a new line and it will magically t
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-heading
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-heading
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -13,11 +13,7 @@ Type three dashes (<code>---</code>) or three underscores and a space (<code>___
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-horizontal-rule
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-horizontal-rule
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -15,11 +15,7 @@ This extension does only the rendering of images. It doesn’t upload images to
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-image
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-image
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -11,11 +11,7 @@ The ListItem extension adds support for the `<li>` HTML tag. It’s used for bul
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-list-item
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-list-item
|
||||
```
|
||||
|
||||
This extension requires the [`BulletList`](/api/nodes/bullet-list) or [`OrderedList`](/api/nodes/ordered-list) node.
|
||||
|
||||
@@ -13,22 +13,14 @@ Literally everything can be customized. You can pass a custom component for the
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-mention
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-mention
|
||||
```
|
||||
|
||||
## Dependencies
|
||||
To place the popups correctly, we’re using [tippy.js](https://atomiks.github.io/tippyjs/) in all our examples. You are free to bring your own library, but if you’re fine with it, just install what we use:
|
||||
|
||||
```bash
|
||||
# with npm
|
||||
npm install tippy.js
|
||||
|
||||
# with Yarn
|
||||
yarn add tippy.js
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -13,11 +13,7 @@ Type <code>1. </code> (or any other number followed by a dot) at the beginn
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-ordered-list @tiptap/extension-list-item
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item
|
||||
```
|
||||
|
||||
This extension requires the [`ListItem`](/api/nodes/list-item) node.
|
||||
|
||||
@@ -15,11 +15,7 @@ tiptap 1 tried to hide that node from you, but it has always been there. You hav
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-paragraph
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-paragraph
|
||||
```
|
||||
|
||||
## Settings
|
||||
|
||||
@@ -11,11 +11,7 @@ Don’t try to use tables without table cells. It won’t be fun.
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
|
||||
```
|
||||
|
||||
This extension requires the [`Table`](/api/nodes/table), [`TableRow`](/api/nodes/table-row) and [`TableHeader`](/api/nodes/table-header) nodes.
|
||||
|
||||
@@ -27,11 +27,7 @@ TableRow.extend({
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
|
||||
```
|
||||
|
||||
This extension requires the [`Table`](/api/nodes/table), [`TableRow`](/api/nodes/table-row) and [`TableCell`](/api/nodes/table-cell) nodes.
|
||||
|
||||
@@ -11,11 +11,7 @@ What’s a table without rows? Add this extension to make your tables usable.
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
|
||||
```
|
||||
|
||||
This extension requires the [`Table`](/api/nodes/table), [`TableHeader`](/api/nodes/table-header) and [`TableCell`](/api/nodes/table-cell) nodes.
|
||||
|
||||
@@ -16,11 +16,7 @@ Don’t forget to add a `spacer.gif`. (Just joking. If you don’t know what tha
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
|
||||
```
|
||||
|
||||
This extension requires the [`TableRow`](/api/nodes/table-row), [`TableHeader`](/api/nodes/table-header) and [`TableCell`](/api/nodes/table-cell) nodes.
|
||||
|
||||
@@ -13,11 +13,7 @@ This extension doesn’t require any JavaScript framework, it’s based on Vanil
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# With npm
|
||||
npm install @tiptap/extension-task-list @tiptap/extension-task-item
|
||||
|
||||
# Or: With Yarn
|
||||
yarn add @tiptap/extension-task-list @tiptap/extension-task-item
|
||||
```
|
||||
|
||||
This extension requires the [`TaskList`](/api/nodes/task-list) node.
|
||||
|
||||
@@ -13,11 +13,7 @@ Type <code>[ ] </code> or <code>[x] </code> at the beginning of a new
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-task-list @tiptap/extension-task-item
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-task-list @tiptap/extension-task-item
|
||||
```
|
||||
|
||||
This extension requires the [`TaskItem`](/api/nodes/task-item) extension.
|
||||
|
||||
@@ -15,11 +15,7 @@ tiptap 1 tried to hide that node from you, but it has always been there. You hav
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-text
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-text
|
||||
```
|
||||
|
||||
## Source code
|
||||
|
||||
@@ -25,11 +25,7 @@ WebRTC uses a server only to connect clients with each other. The actual data is
|
||||
First, install the dependencies:
|
||||
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-collaboration yjs y-webrtc
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-collaboration yjs y-webrtc
|
||||
```
|
||||
|
||||
Now, create a new Y document, and register it with Tiptap:
|
||||
@@ -69,11 +65,7 @@ Anyway, if you want to dive deeper, head over to [the Y WebRTC repository](https
|
||||
For most uses cases, the WebSocket provider is the recommended choice. It’s very flexible and can scale very well. For the client, the example is nearly the same, only the provider is different. First, let’s install the dependencies:
|
||||
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-collaboration yjs y-websocket
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-collaboration yjs y-websocket
|
||||
```
|
||||
|
||||
And then register the WebSocket provider with Tiptap:
|
||||
@@ -108,11 +100,7 @@ To make the server part as easy as possible, we provide [an opinionated server p
|
||||
Create a new project, and install the hocuspocus server as a dependency:
|
||||
|
||||
```bash
|
||||
# with npm
|
||||
npm install @hocuspocus/server
|
||||
|
||||
# with Yarn
|
||||
yarn add @hocuspocus/server
|
||||
```
|
||||
|
||||
Create an `index.js` and throw in the following content, to create, configure and start your very own WebSocket server:
|
||||
@@ -191,11 +179,7 @@ As you can see, you can pass a name and color for every user. Look at the [colla
|
||||
Adding offline support to your collaborative editor is basically a one-liner, thanks to the fantastic [Y IndexedDB adapter](https://github.com/yjs/y-indexeddb). Install it:
|
||||
|
||||
```bash
|
||||
# with npm
|
||||
npm install y-indexeddb
|
||||
|
||||
# with Yarn
|
||||
yarn add y-indexeddb
|
||||
```
|
||||
|
||||
And connect it with a Y document:
|
||||
|
||||
@@ -31,11 +31,7 @@ For the following example you will need `@tiptap/core` (the actual editor) and `
|
||||
The StarterKit doesn’t include all, but the most common extensions.
|
||||
|
||||
```bash
|
||||
# install with npm
|
||||
npm install @tiptap/core @tiptap/starter-kit
|
||||
|
||||
# install with Yarn
|
||||
yarn add @tiptap/core @tiptap/starter-kit
|
||||
```
|
||||
|
||||
### 2. Add some markup
|
||||
|
||||
@@ -17,11 +17,11 @@ For the sake of this guide we’ll use [Vite](https://vitejs.dev/) to quickly se
|
||||
## 1. Create a project (optional)
|
||||
If you already have an existing Alpine.js project, that’s fine too. Just skip this step and proceed with the next step.
|
||||
|
||||
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.
|
||||
For the sake of this guide, let’s start with a fresh [Vite](https://vitejs.dev/) project called `my-tiptap-project`. 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 my-tiptap-project -- --template vanilla
|
||||
cd my-tiptap-project
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
@@ -31,14 +31,10 @@ npm run dev
|
||||
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
|
||||
npm install alpinejs @tiptap/core @tiptap/starter-kit
|
||||
|
||||
# install with Yarn
|
||||
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.
|
||||
If you followed step 1, 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. 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`.
|
||||
|
||||
@@ -15,27 +15,23 @@ The following guide describes how to integrate Tiptap with your [Next.js](https:
|
||||
## 1. Create a project (optional)
|
||||
If you already have an existing Next.js project, that’s fine too. Just skip this step and proceed with the next step.
|
||||
|
||||
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.
|
||||
For the sake of this guide, let’s start with a new Next.js project called `my-tiptap-project`. 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 my-tiptap-project
|
||||
|
||||
# change directory
|
||||
cd Tiptap-example
|
||||
cd my-tiptap-project
|
||||
```
|
||||
|
||||
## 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 `@tiptap/starter-kit` which includes all the extensions you need to get started quickly.
|
||||
|
||||
```bash
|
||||
# install with npm
|
||||
npm install @tiptap/react @tiptap/starter-kit
|
||||
|
||||
# install with Yarn
|
||||
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.
|
||||
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
|
||||
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`.
|
||||
|
||||
@@ -15,28 +15,24 @@ The following guide describes how to integrate Tiptap with your [Nuxt.js](https:
|
||||
## 1. Create a project (optional)
|
||||
If you already have an existing Vue project, that’s fine too. Just skip this step and proceed with the next step.
|
||||
|
||||
For the sake of this guide, let’s start with a fresh Nuxt.js project called `tiptap-example`. The following command sets up everything we need. It asks a lot of questions, but just use what floats your boat or use the defaults.
|
||||
For the sake of this guide, let’s start with a fresh Nuxt.js project called `my-tiptap-project`. The following command sets up everything we need. It asks a lot of questions, but just use what floats your boat or use the defaults.
|
||||
|
||||
```bash
|
||||
# create a project
|
||||
npm init nuxt-app Tiptap-example
|
||||
npm init nuxt-app my-tiptap-project
|
||||
|
||||
# change directory
|
||||
cd Tiptap-example
|
||||
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.
|
||||
|
||||
```bash
|
||||
# install with npm
|
||||
npm install @tiptap/vue-2 @tiptap/starter-kit
|
||||
|
||||
# install with Yarn
|
||||
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.
|
||||
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
|
||||
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`.
|
||||
|
||||
@@ -14,11 +14,7 @@ The following guide describes how to integrate Tiptap with your [React](https://
|
||||
If you just want to get up and running with Tiptap you can use the [Tiptap Create React App template by @alb](https://github.com/alb/cra-template-tiptap) to create a new project with all the steps listed below completed already.
|
||||
|
||||
```bash
|
||||
# install with npm
|
||||
npx create-react-app my-tiptap-project --template tiptap
|
||||
|
||||
# install with Yarn
|
||||
yarn create react-app my-tiptap-project --template tiptap
|
||||
```
|
||||
|
||||
### Step by step
|
||||
@@ -33,9 +29,6 @@ Let’s start with a fresh React project called `my-tiptap-project`. [Create Rea
|
||||
# create a project with npm
|
||||
npx create-react-app my-tiptap-project
|
||||
|
||||
# or if you prefer Yarn
|
||||
yarn create react-app my-tiptap-project
|
||||
|
||||
# change directory
|
||||
cd my-tiptap-project
|
||||
```
|
||||
@@ -44,14 +37,10 @@ cd my-tiptap-project
|
||||
Time to install the `@tiptap/react` package and our [`StarterKit`](/api/extensions/starter-kit), which has the most popular extensions to get started quickly.
|
||||
|
||||
```bash
|
||||
# install with npm
|
||||
npm install @tiptap/react @tiptap/starter-kit
|
||||
|
||||
# install with Yarn
|
||||
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 browser.
|
||||
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
|
||||
To actually start using Tiptap we need to create a new component. Let’s call it `Tiptap` and put the following example code in `src/Tiptap.jsx`.
|
||||
|
||||
@@ -18,11 +18,11 @@ If you just want to jump into it right-away, here is a [Svelte REPL with Tiptap]
|
||||
## 1. Create a project (optional)
|
||||
If you already have an existing SvelteKit project, that’s fine too. Just skip this step and proceed with the next step.
|
||||
|
||||
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.
|
||||
For the sake of this guide, let’s start with a fresh SvelteKit project called `my-tiptap-project`. 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 my-tiptap-project
|
||||
cd my-tiptap-project
|
||||
npm init svelte@next
|
||||
npm install
|
||||
npm run dev
|
||||
@@ -32,14 +32,10 @@ npm run dev
|
||||
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
|
||||
npm install @tiptap/core @tiptap/starter-kit
|
||||
|
||||
# install with Yarn
|
||||
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.
|
||||
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
|
||||
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`.
|
||||
|
||||
@@ -16,28 +16,24 @@ The following guide describes how to integrate Tiptap with your [Vue](https://vu
|
||||
## 1. Create a project (optional)
|
||||
If you already have an existing Vue project, that’s fine too. Just skip this step and proceed with the next step.
|
||||
|
||||
For the sake of this guide, let’s start with a fresh Vue project called `tiptap-example`. The Vue CLI sets up everything we need, just select the default Vue 2 template.
|
||||
For the sake of this guide, let’s start with a fresh Vue project called `my-tiptap-project`. The Vue CLI sets up everything we need, just select the default Vue 2 template.
|
||||
|
||||
```bash
|
||||
# create a project
|
||||
vue create Tiptap-example
|
||||
vue create my-tiptap-project
|
||||
|
||||
# change directory
|
||||
cd Tiptap-example
|
||||
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.
|
||||
|
||||
```bash
|
||||
# install with npm
|
||||
npm install @tiptap/vue-2 @tiptap/starter-kit
|
||||
|
||||
# install with Yarn
|
||||
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.
|
||||
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
|
||||
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`.
|
||||
|
||||
@@ -16,28 +16,24 @@ The following guide describes how to integrate Tiptap with your [Vue](https://vu
|
||||
## 1. Create a project (optional)
|
||||
If you already have an existing Vue project, that’s fine too. Just skip this step and proceed with the next step.
|
||||
|
||||
For the sake of this guide, let’s start with a fresh Vue project called `tiptap-example`. The Vue CLI sets up everything we need, just select the Vue 3 template.
|
||||
For the sake of this guide, let’s start with a fresh Vue project called `my-tiptap-project`. The Vue CLI sets up everything we need, just select the Vue 3 template.
|
||||
|
||||
```bash
|
||||
# create a project
|
||||
vue create Tiptap-example
|
||||
vue create my-tiptap-project
|
||||
|
||||
# change directory
|
||||
cd Tiptap-example
|
||||
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.
|
||||
|
||||
```bash
|
||||
# install with npm
|
||||
npm install @tiptap/vue-3 @tiptap/starter-kit
|
||||
|
||||
# install with Yarn
|
||||
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.
|
||||
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
|
||||
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`.
|
||||
|
||||
@@ -23,11 +23,7 @@ The whole package structure has changed, we even moved to another npm namespace,
|
||||
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
|
||||
|
||||
# with Yarn
|
||||
yarn remove Tiptap Tiptap-commands Tiptap-extensions Tiptap-utils
|
||||
npm uninstall tiptap tiptap-commands tiptap-extensions tiptap-utils
|
||||
```
|
||||
|
||||
## Install Tiptap v2
|
||||
@@ -35,11 +31,7 @@ yarn remove Tiptap Tiptap-commands Tiptap-extensions Tiptap-utils
|
||||
Once you have uninstalled the old version of Tiptap, install the new Vue 2 package and the starter kit:
|
||||
|
||||
```bash
|
||||
# install with npm
|
||||
npm install @tiptap/vue-2 @tiptap/starter-kit
|
||||
|
||||
# install with Yarn
|
||||
yarn add @tiptap/vue-2 @tiptap/starter-kit
|
||||
```
|
||||
|
||||
## Keep Tiptap v2 up to date
|
||||
@@ -55,6 +47,13 @@ You can add the `--latest` flag, to show all possible upgrades – even if they
|
||||
yarn upgrade-interactive --latest
|
||||
```
|
||||
|
||||
Unfortunately, for npm there is no integrated tool, but you can use the `npm-check` package:
|
||||
|
||||
```bash
|
||||
npm install -g npm-check
|
||||
npm-check -u
|
||||
```
|
||||
|
||||
## 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 you’re 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.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user