diff --git a/docs/api/extensions/bubble-menu.md b/docs/api/extensions/bubble-menu.md index af0bd48c..bb261aad 100644 --- a/docs/api/extensions/bubble-menu.md +++ b/docs/api/extensions/bubble-menu.md @@ -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 diff --git a/docs/api/extensions/character-count.md b/docs/api/extensions/character-count.md index c10564fd..c82ab1a5 100644 --- a/docs/api/extensions/character-count.md +++ b/docs/api/extensions/character-count.md @@ -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 diff --git a/docs/api/extensions/collaboration-cursor.md b/docs/api/extensions/collaboration-cursor.md index ab516eee..e5a2d7ea 100644 --- a/docs/api/extensions/collaboration-cursor.md +++ b/docs/api/extensions/collaboration-cursor.md @@ -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. diff --git a/docs/api/extensions/collaboration.md b/docs/api/extensions/collaboration.md index c9792c8e..fccc1845 100644 --- a/docs/api/extensions/collaboration.md +++ b/docs/api/extensions/collaboration.md @@ -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 diff --git a/docs/api/extensions/color.md b/docs/api/extensions/color.md index fcfbf384..5322dccb 100644 --- a/docs/api/extensions/color.md +++ b/docs/api/extensions/color.md @@ -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. diff --git a/docs/api/extensions/dropcursor.md b/docs/api/extensions/dropcursor.md index 70fa0df4..b773ea6e 100644 --- a/docs/api/extensions/dropcursor.md +++ b/docs/api/extensions/dropcursor.md @@ -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 diff --git a/docs/api/extensions/floating-menu.md b/docs/api/extensions/floating-menu.md index 7b1c3937..8377ad87 100644 --- a/docs/api/extensions/floating-menu.md +++ b/docs/api/extensions/floating-menu.md @@ -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 diff --git a/docs/api/extensions/focus.md b/docs/api/extensions/focus.md index db5eec7d..e5d5597f 100644 --- a/docs/api/extensions/focus.md +++ b/docs/api/extensions/focus.md @@ -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 diff --git a/docs/api/extensions/font-family.md b/docs/api/extensions/font-family.md index 7a749d10..27113f2b 100644 --- a/docs/api/extensions/font-family.md +++ b/docs/api/extensions/font-family.md @@ -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. diff --git a/docs/api/extensions/gapcursor.md b/docs/api/extensions/gapcursor.md index 59551f51..313aa475 100644 --- a/docs/api/extensions/gapcursor.md +++ b/docs/api/extensions/gapcursor.md @@ -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 diff --git a/docs/api/extensions/history.md b/docs/api/extensions/history.md index 74ccbf66..2009a9b4 100644 --- a/docs/api/extensions/history.md +++ b/docs/api/extensions/history.md @@ -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 diff --git a/docs/api/extensions/placeholder.md b/docs/api/extensions/placeholder.md index 62456324..79c58918 100644 --- a/docs/api/extensions/placeholder.md +++ b/docs/api/extensions/placeholder.md @@ -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 diff --git a/docs/api/extensions/starter-kit.md b/docs/api/extensions/starter-kit.md index 41d61706..224f457a 100644 --- a/docs/api/extensions/starter-kit.md +++ b/docs/api/extensions/starter-kit.md @@ -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 diff --git a/docs/api/extensions/text-align.md b/docs/api/extensions/text-align.md index 8aea15a0..d25bbe6d 100644 --- a/docs/api/extensions/text-align.md +++ b/docs/api/extensions/text-align.md @@ -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 diff --git a/docs/api/extensions/typography.md b/docs/api/extensions/typography.md index 1294f049..91a1962b 100644 --- a/docs/api/extensions/typography.md +++ b/docs/api/extensions/typography.md @@ -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 diff --git a/docs/api/marks/bold.md b/docs/api/marks/bold.md index 27c4a2c5..8620f110 100644 --- a/docs/api/marks/bold.md +++ b/docs/api/marks/bold.md @@ -17,11 +17,7 @@ The extension will generate the corresponding `` HTML tags when reading ## Installation ```bash -# with npm npm install @tiptap/extension-bold - -# with Yarn -yarn add @tiptap/extension-bold ``` ## Settings diff --git a/docs/api/marks/code.md b/docs/api/marks/code.md index 2dece904..a199ae02 100644 --- a/docs/api/marks/code.md +++ b/docs/api/marks/code.md @@ -13,11 +13,7 @@ Type something with \`back-ticks around\` and it will magically tra ## Installation ```bash -# with npm npm install @tiptap/extension-code - -# with Yarn -yarn add @tiptap/extension-code ``` ## Settings diff --git a/docs/api/marks/highlight.md b/docs/api/marks/highlight.md index 1f66931c..7dd6d2c1 100644 --- a/docs/api/marks/highlight.md +++ b/docs/api/marks/highlight.md @@ -13,11 +13,7 @@ Type `==two equal signs==` and it will magically transform to highlighted< ## Installation ```bash -# with npm npm install @tiptap/extension-highlight - -# with Yarn -yarn add @tiptap/extension-highlight ``` ## Settings diff --git a/docs/api/marks/italic.md b/docs/api/marks/italic.md index c7790011..26743f04 100644 --- a/docs/api/marks/italic.md +++ b/docs/api/marks/italic.md @@ -17,11 +17,7 @@ The extension will generate the corresponding `` HTML tags when reading cont ## Installation ```bash -# with npm npm install @tiptap/extension-italic - -# with Yarn -yarn add @tiptap/extension-italic ``` ## Settings diff --git a/docs/api/marks/link.md b/docs/api/marks/link.md index d743e31b..56bf7df7 100644 --- a/docs/api/marks/link.md +++ b/docs/api/marks/link.md @@ -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 diff --git a/docs/api/marks/strike.md b/docs/api/marks/strike.md index 2cd52d9d..9b5dc91d 100644 --- a/docs/api/marks/strike.md +++ b/docs/api/marks/strike.md @@ -17,11 +17,7 @@ The extension will generate the corresponding `` HTML tags when reading conte ## Installation ```bash -# with npm npm install @tiptap/extension-strike - -# with Yarn -yarn add @tiptap/extension-strike ``` ## Settings diff --git a/docs/api/marks/subscript.md b/docs/api/marks/subscript.md index 56ba52e9..08219722 100644 --- a/docs/api/marks/subscript.md +++ b/docs/api/marks/subscript.md @@ -11,11 +11,7 @@ Use this extension to render text in subscript. If you pass `` o ## Installation ```bash -# with npm npm install @tiptap/extension-subscript - -# with Yarn -yarn add @tiptap/extension-subscript ``` ## Settings diff --git a/docs/api/marks/superscript.md b/docs/api/marks/superscript.md index 3e91fe33..34816ba5 100644 --- a/docs/api/marks/superscript.md +++ b/docs/api/marks/superscript.md @@ -11,11 +11,7 @@ Use this extension to render text in superscript. If you pass `` ## Installation ```bash -# with npm npm install @tiptap/extension-superscript - -# with Yarn -yarn add @tiptap/extension-superscript ``` ## Settings diff --git a/docs/api/marks/text-style.md b/docs/api/marks/text-style.md index ccbe9063..c14e0f48 100644 --- a/docs/api/marks/text-style.md +++ b/docs/api/marks/text-style.md @@ -11,11 +11,7 @@ This mark renders a `` 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 diff --git a/docs/api/marks/underline.md b/docs/api/marks/underline.md index 04f48c7f..a43f8fd2 100644 --- a/docs/api/marks/underline.md +++ b/docs/api/marks/underline.md @@ -17,11 +17,7 @@ The extension will generate the corresponding `` HTML tags when reading conte ## Installation ```bash -# with npm npm install @tiptap/extension-underline - -# with Yarn -yarn add @tiptap/extension-underline ``` ## Settings diff --git a/docs/api/nodes/blockquote.md b/docs/api/nodes/blockquote.md index 6cadfa8a..d15cc2ca 100644 --- a/docs/api/nodes/blockquote.md +++ b/docs/api/nodes/blockquote.md @@ -13,11 +13,7 @@ Type >  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 diff --git a/docs/api/nodes/bullet-list.md b/docs/api/nodes/bullet-list.md index c8d419c5..983e11f9 100644 --- a/docs/api/nodes/bullet-list.md +++ b/docs/api/nodes/bullet-list.md @@ -13,11 +13,7 @@ Type * , -  or +  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. diff --git a/docs/api/nodes/code-block-lowlight.md b/docs/api/nodes/code-block-lowlight.md index bfcf43eb..051e839b 100644 --- a/docs/api/nodes/code-block-lowlight.md +++ b/docs/api/nodes/code-block-lowlight.md @@ -13,11 +13,7 @@ Type ```  (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 diff --git a/docs/api/nodes/code-block.md b/docs/api/nodes/code-block.md index eb405b33..1208d24d 100644 --- a/docs/api/nodes/code-block.md +++ b/docs/api/nodes/code-block.md @@ -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 diff --git a/docs/api/nodes/document.md b/docs/api/nodes/document.md index 49d2baa7..8449e725 100644 --- a/docs/api/nodes/document.md +++ b/docs/api/nodes/document.md @@ -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 diff --git a/docs/api/nodes/hard-break.md b/docs/api/nodes/hard-break.md index c87ca169..df0b547a 100644 --- a/docs/api/nodes/hard-break.md +++ b/docs/api/nodes/hard-break.md @@ -11,11 +11,7 @@ The HardBreak extensions adds support for the `
` 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 diff --git a/docs/api/nodes/heading.md b/docs/api/nodes/heading.md index 79862acc..2c613080 100644 --- a/docs/api/nodes/heading.md +++ b/docs/api/nodes/heading.md @@ -13,11 +13,7 @@ Type #  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 diff --git a/docs/api/nodes/horizontal-rule.md b/docs/api/nodes/horizontal-rule.md index de176fc7..b7a4a349 100644 --- a/docs/api/nodes/horizontal-rule.md +++ b/docs/api/nodes/horizontal-rule.md @@ -13,11 +13,7 @@ Type three dashes (---) or three underscores and a space (___ ## Installation ```bash -# with npm npm install @tiptap/extension-horizontal-rule - -# with Yarn -yarn add @tiptap/extension-horizontal-rule ``` ## Settings diff --git a/docs/api/nodes/image.md b/docs/api/nodes/image.md index 6c43bf2d..3dc10e4b 100644 --- a/docs/api/nodes/image.md +++ b/docs/api/nodes/image.md @@ -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 diff --git a/docs/api/nodes/list-item.md b/docs/api/nodes/list-item.md index ae3876b1..b097f7c3 100644 --- a/docs/api/nodes/list-item.md +++ b/docs/api/nodes/list-item.md @@ -11,11 +11,7 @@ The ListItem extension adds support for the `
  • ` 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. diff --git a/docs/api/nodes/mention.md b/docs/api/nodes/mention.md index eee7169a..559e903a 100644 --- a/docs/api/nodes/mention.md +++ b/docs/api/nodes/mention.md @@ -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 diff --git a/docs/api/nodes/ordered-list.md b/docs/api/nodes/ordered-list.md index 8c5ff3bb..0be45801 100644 --- a/docs/api/nodes/ordered-list.md +++ b/docs/api/nodes/ordered-list.md @@ -13,11 +13,7 @@ Type 1.  (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. diff --git a/docs/api/nodes/paragraph.md b/docs/api/nodes/paragraph.md index c0a7519c..e7146fc3 100644 --- a/docs/api/nodes/paragraph.md +++ b/docs/api/nodes/paragraph.md @@ -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 diff --git a/docs/api/nodes/table-cell.md b/docs/api/nodes/table-cell.md index b3ffe986..3d9d91ef 100644 --- a/docs/api/nodes/table-cell.md +++ b/docs/api/nodes/table-cell.md @@ -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. diff --git a/docs/api/nodes/table-header.md b/docs/api/nodes/table-header.md index 7f39a882..78b5fb66 100644 --- a/docs/api/nodes/table-header.md +++ b/docs/api/nodes/table-header.md @@ -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. diff --git a/docs/api/nodes/table-row.md b/docs/api/nodes/table-row.md index fb0460c4..7846dd93 100644 --- a/docs/api/nodes/table-row.md +++ b/docs/api/nodes/table-row.md @@ -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. diff --git a/docs/api/nodes/table.md b/docs/api/nodes/table.md index a9f7ca6f..3c4c9372 100644 --- a/docs/api/nodes/table.md +++ b/docs/api/nodes/table.md @@ -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. diff --git a/docs/api/nodes/task-item.md b/docs/api/nodes/task-item.md index dc726b44..e62bb041 100644 --- a/docs/api/nodes/task-item.md +++ b/docs/api/nodes/task-item.md @@ -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. diff --git a/docs/api/nodes/task-list.md b/docs/api/nodes/task-list.md index ce1bfada..b731386e 100644 --- a/docs/api/nodes/task-list.md +++ b/docs/api/nodes/task-list.md @@ -13,11 +13,7 @@ Type [ ]  or [x]  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. diff --git a/docs/api/nodes/text.md b/docs/api/nodes/text.md index b22922f3..3332c00f 100644 --- a/docs/api/nodes/text.md +++ b/docs/api/nodes/text.md @@ -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 diff --git a/docs/guide/collaborative-editing.md b/docs/guide/collaborative-editing.md index 7c6859c4..c9173702 100644 --- a/docs/guide/collaborative-editing.md +++ b/docs/guide/collaborative-editing.md @@ -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: diff --git a/docs/installation.md b/docs/installation.md index 29c51ecd..d844c6e8 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -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 diff --git a/docs/installation/alpine.md b/docs/installation/alpine.md index 25695cc2..9da0f939 100644 --- a/docs/installation/alpine.md +++ b/docs/installation/alpine.md @@ -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`. diff --git a/docs/installation/nextjs.md b/docs/installation/nextjs.md index 765693a6..04cbc975 100644 --- a/docs/installation/nextjs.md +++ b/docs/installation/nextjs.md @@ -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`. diff --git a/docs/installation/nuxt.md b/docs/installation/nuxt.md index 5a77deb5..970b9362 100644 --- a/docs/installation/nuxt.md +++ b/docs/installation/nuxt.md @@ -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`. diff --git a/docs/installation/react.md b/docs/installation/react.md index b70c775f..21f89468 100644 --- a/docs/installation/react.md +++ b/docs/installation/react.md @@ -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`. diff --git a/docs/installation/svelte.md b/docs/installation/svelte.md index 64ec4776..2edce8a2 100644 --- a/docs/installation/svelte.md +++ b/docs/installation/svelte.md @@ -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`. diff --git a/docs/installation/vue2.md b/docs/installation/vue2.md index b748218f..6db4c602 100644 --- a/docs/installation/vue2.md +++ b/docs/installation/vue2.md @@ -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`. diff --git a/docs/installation/vue3.md b/docs/installation/vue3.md index d113ee92..791d0e39 100644 --- a/docs/installation/vue3.md +++ b/docs/installation/vue3.md @@ -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`. diff --git a/docs/overview/upgrade-guide.md b/docs/overview/upgrade-guide.md index 8218703d..45b2540d 100644 --- a/docs/overview/upgrade-guide.md +++ b/docs/overview/upgrade-guide.md @@ -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.