diff --git a/docs/src/docPages/api/extensions/blockquote.md b/docs/src/docPages/api/extensions/blockquote.md index 559faa11..ae4b8c99 100644 --- a/docs/src/docPages/api/extensions/blockquote.md +++ b/docs/src/docPages/api/extensions/blockquote.md @@ -1,7 +1,16 @@ # Blockquote The Blockquote extension enables you to use the `
` HTML tag in the editor. This is great – you might have guessed – to use quotes in the editor. -Type `> ​` at the beginning of a new line and it will be magically transformed to a blockquote. +Type `> ​` at the beginning of a new line and it will magically transform to a blockquote. + +## Installation +```bash +# With npm +npm install @tiptap/extension-blockquote + +# Or: With Yarn +yarn add @tiptap/extension-blockquote +``` ## Options | Option | Type | Default | Description | @@ -17,7 +26,7 @@ Type `> ​` at the beginning of a new line and it will be magically transformed * Windows & Linux: `Control` + `Shift` + `9` * macOS: `Command` + `Shift` + `9` -## Source Code +## Source code [packages/extension-blockquote/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/) ## Usage diff --git a/docs/src/docPages/api/extensions/bold.md b/docs/src/docPages/api/extensions/bold.md index c3a7e75d..b9005f1c 100644 --- a/docs/src/docPages/api/extensions/bold.md +++ b/docs/src/docPages/api/extensions/bold.md @@ -1,7 +1,7 @@ # Bold Use this extension to render text in **bold**. If you pass ``, `` tags, or text with inline `style` attributes setting the `font-weight` CSS rule in the editor’s initial content, they all will be rendered accordingly. -Type `**two asterisks**` or `__two underlines__` and it will be magically transformed to **bold** text while you type. +Type `**two asterisks**` or `__two underlines__` and it will magically transform to **bold** text while you type. ::: warning Restrictions The extension will generate the corresponding `` HTML tags when reading contents of the `Editor` instance. All text marked bold, regardless of the method will be normalized to `` HTML tags. @@ -21,7 +21,7 @@ The extension will generate the corresponding `` HTML tags when reading * Windows & Linux: `Control` + `B` * macOS: `Command` + `B` -## Source Code +## Source code [packages/extension-bold/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/) ## Usage diff --git a/docs/src/docPages/api/extensions/bullet-list.md b/docs/src/docPages/api/extensions/bullet-list.md index 2a68f14f..34ffa757 100644 --- a/docs/src/docPages/api/extensions/bullet-list.md +++ b/docs/src/docPages/api/extensions/bullet-list.md @@ -1,7 +1,7 @@ # BulletList This extension enables you to use bullet lists in the editor. They are rendered as `
    ` HTML tags, -Type `* ​`, `- ​` or `+ ​` at the beginning of a new line and it will be magically transformed to a bullet list. +Type `* ​`, `- ​` or `+ ​` at the beginning of a new line and it will magically transform to a bullet list. ::: warning Use with ListItem The `BulletList` extension is intended to be used with the [`ListItem`](/api/extensions/list-item) extension. Make sure to import that one too, otherwise you’ll get a SyntaxError. @@ -20,7 +20,7 @@ The `BulletList` extension is intended to be used with the [`ListItem`](/api/ext ## Keyboard shortcuts * `Control` + `Shift` + `8` -## Source Code +## Source code [packages/extension-bullet-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/) ## Usage diff --git a/docs/src/docPages/api/extensions/code-block.md b/docs/src/docPages/api/extensions/code-block.md index 3edc00be..69b70f4f 100644 --- a/docs/src/docPages/api/extensions/code-block.md +++ b/docs/src/docPages/api/extensions/code-block.md @@ -20,7 +20,7 @@ The CodeBlock extension doesn’t come with styling and has no syntax highlighti ## Keyboard shortcuts * `Shift` + `Control` + `\` -## Source Code +## Source code [packages/extension-code-block/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/) ## Usage diff --git a/docs/src/docPages/api/extensions/code.md b/docs/src/docPages/api/extensions/code.md index 33303010..d6329a16 100644 --- a/docs/src/docPages/api/extensions/code.md +++ b/docs/src/docPages/api/extensions/code.md @@ -1,7 +1,7 @@ # Code The Code extensions enables you to use the `` HTML tag in the editor. If you paste in text with `` tags it will rendered accordingly. -Type something with \`back-ticks around\` and it will be magically transformed to `inline code` while you type. +Type something with \`back-ticks around\` and it will magically transform to `inline code` while you type. ## Options | Option | Type | Default | Description | @@ -16,7 +16,7 @@ Type something with \`back-ticks around\` and it will be magically transformed t ## Keyboard shortcuts * `Alt` + ` -## Source Code +## Source code [packages/extension-code/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/) ## Usage diff --git a/docs/src/docPages/api/extensions/document.md b/docs/src/docPages/api/extensions/document.md index 017eec5b..2ac899a5 100644 --- a/docs/src/docPages/api/extensions/document.md +++ b/docs/src/docPages/api/extensions/document.md @@ -7,7 +7,7 @@ The node is very tiny though. It defines a name of the node (`document`), is con Tiptap 1 tried to hide that node from you, but it has always been there. A tiny, but important change though: **We renamed the default type from `doc` to `document`.** To keep it like that, use your own implementation of the `Document` node or migrate the stored JSON to use the new name. ::: -## Source Code +## Source code [packages/extension-document/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/) ## Usage diff --git a/docs/src/docPages/api/extensions/hard-break.md b/docs/src/docPages/api/extensions/hard-break.md index 7b47bf98..1bf9c857 100644 --- a/docs/src/docPages/api/extensions/hard-break.md +++ b/docs/src/docPages/api/extensions/hard-break.md @@ -14,7 +14,7 @@ The HardBreak extensions adds support for the `
    ` HTML tag, which forces a li * Windows & Linux: `Control` + `Enter` * macOS: `Command` + `Enter` -## Source Code +## Source code [packages/extension-hard-break/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/) ## Usage diff --git a/docs/src/docPages/api/extensions/heading.md b/docs/src/docPages/api/extensions/heading.md index a6087725..26cf08c3 100644 --- a/docs/src/docPages/api/extensions/heading.md +++ b/docs/src/docPages/api/extensions/heading.md @@ -1,7 +1,7 @@ # Heading The Heading extension adds support for headings of different levels. Headings are rendered with `

    `, `

    `, `

    `, `

    `, `

    ` or `
    ` HTML tags. By default all six headline levels are enabled, but you can pass an array to only allow a few levels. Check the usage example to see how this is done. -Type `# ​` at the beginning of a new line and it will be magically transformed to a headline, same for `## ​`, `### ​`, `#### ​`, `##### ​` and `###### ​`. +Type `# ​` at the beginning of a new line and it will magically transform to a headline, same for `## ​`, `### ​`, `#### ​`, `##### ​` and `###### ​`. ## Options | Option | Type | Default | Description | @@ -22,7 +22,7 @@ Type `# ​` at the beginning of a new line and it will be magically transformed * `Control` + `Shift` + `5` → H5 * `Control` + `Shift` + `6` → H6 -## Source Code +## Source code [packages/extension-heading/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/) ## Usage diff --git a/docs/src/docPages/api/extensions/history.md b/docs/src/docPages/api/extensions/history.md index a4900072..9009198f 100644 --- a/docs/src/docPages/api/extensions/history.md +++ b/docs/src/docPages/api/extensions/history.md @@ -18,7 +18,7 @@ This extension provides history support. All changes to the document will be tra * Windows & Linux: `Shift` + `Control` + `Z` * macOS: `Shift` + `Command` + `Z` -## Source Code +## Source code [packages/extension-history/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-history/) ## Usage diff --git a/docs/src/docPages/api/extensions/horizontal-rule.md b/docs/src/docPages/api/extensions/horizontal-rule.md index f2a496f3..e5c9c26d 100644 --- a/docs/src/docPages/api/extensions/horizontal-rule.md +++ b/docs/src/docPages/api/extensions/horizontal-rule.md @@ -1,7 +1,7 @@ # HorizontalRule Use this extension to render a `
    ` HTML tag. If you pass `
    ` in the editor’s initial content, it’ll be rendered accordingly. -Type three dashes (`---`) or three underscores and a space (`___ ​`) at the beginning of a new line and it will be magically transformed to a horizontal rule. +Type three dashes (`---`) or three underscores and a space (`___ ​`) at the beginning of a new line and it will magically transform to a horizontal rule. ## Options | Option | Type | Default | Description | @@ -16,7 +16,7 @@ Type three dashes (`---`) or three underscores and a space (`___ ​`) at the be ## Keyboard shortcuts *None* -## Source Code +## Source code [packages/extension-horizontal-rule/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/) ## Usage diff --git a/docs/src/docPages/api/extensions/italic.md b/docs/src/docPages/api/extensions/italic.md index 398f725e..9d2f57c8 100644 --- a/docs/src/docPages/api/extensions/italic.md +++ b/docs/src/docPages/api/extensions/italic.md @@ -19,7 +19,7 @@ The extension will generate the corresponding `` HTML tags when reading cont * Windows & Linux: `Control` + `I` * macOS: `Command` + `I` -## Source Code +## Source code [packages/extension-italic/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/) ## Usage diff --git a/docs/src/docPages/api/extensions/paragraph.md b/docs/src/docPages/api/extensions/paragraph.md index b6326538..3ab58b99 100644 --- a/docs/src/docPages/api/extensions/paragraph.md +++ b/docs/src/docPages/api/extensions/paragraph.md @@ -12,7 +12,7 @@ Yes, the schema is very strict. Without this extension you won’t even be able ## Keyboard shortcuts *None* -## Source Code +## Source code [packages/extension-paragraph/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/) ## Usage diff --git a/docs/src/docPages/api/extensions/strike.md b/docs/src/docPages/api/extensions/strike.md index 36913e65..9da05886 100644 --- a/docs/src/docPages/api/extensions/strike.md +++ b/docs/src/docPages/api/extensions/strike.md @@ -21,7 +21,7 @@ The extension will generate the corresponding `` HTML tags when reading conte * Windows & Linux: `Control` + `D` * macOS: `Command` + `D` -## Source Code +## Source code [packages/extension-strike/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/) ## Usage diff --git a/docs/src/docPages/api/extensions/text.md b/docs/src/docPages/api/extensions/text.md index 4e256c44..53a67f0e 100644 --- a/docs/src/docPages/api/extensions/text.md +++ b/docs/src/docPages/api/extensions/text.md @@ -5,7 +5,7 @@ Tiptap 1 tried to hide that node from you, but it has always been there. ::: -## Source Code +## Source code [packages/extension-text/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/) ## Usage diff --git a/docs/src/docPages/api/extensions/underline.md b/docs/src/docPages/api/extensions/underline.md index ab27c3ce..0aa359b9 100644 --- a/docs/src/docPages/api/extensions/underline.md +++ b/docs/src/docPages/api/extensions/underline.md @@ -19,7 +19,7 @@ The extension will generate the corresponding `` HTML tags when reading conte * Windows & Linux: `Control` + `U` * macOS: `Command` + `U` -## Source Code +## Source code [packages/extension-underline/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/) ## Usage diff --git a/docs/src/docPages/overview/installation.md b/docs/src/docPages/overview/installation.md index 0384cf60..8682148a 100644 --- a/docs/src/docPages/overview/installation.md +++ b/docs/src/docPages/overview/installation.md @@ -1,6 +1,28 @@ # Installation -tiptap has a very modular package structure and is independent of any framework. Depending on what you want to do with tiptap there are a few different ways to install tiptap in your project. Choose the way that fits your project best. +tiptap has a modular package structure and is independent of any framework. Depending on what you want to do with tiptap there are a few different ways to install tiptap in your project. Choose the way that fits your project best. + +## Vue.js + +To use tiptap with Vue.js (and tools that are based on Vue.js) install tiptap together with the Vue.js rendering adapter in your project. We even prepared a Vue.js starter kit, which gives you a good headstart. + +```bash +# With npm +npm install @tiptap/core @tiptap/vue @tiptap/vue-starter-kit + +# Or: With Yarn +yarn add @tiptap/core @tiptap/vue @tiptap/vue-starter-kit +``` + +| Package | Description | +| -------------------------------------------------------------------------------- | ----------------------------------- | +| [@tiptap/core](https://www.npmjs.com/package/@tiptap/core) | The actual editor | +| [@tiptap/vue](https://www.npmjs.com/package/@tiptap/vue) | Rendering for Vue.js | +| [@tiptap/vue-starter-kit](https://www.npmjs.com/package/@tiptap/vue-starter-kit) | Installs the most common extensions | + +Create a new component and add the following content to get a basic version of tiptap: + + ## Plain JavaScript @@ -27,22 +49,6 @@ new Editor({ }) ``` -## Vue.js - -To use tiptap with Vue.js (and tools that are based on Vue.js) install the Vue.js adapter in your project: - -```bash -# With npm -npm install @tiptap/vue @tiptap/vue-starter-kit - -# Or: With Yarn -yarn add @tiptap/vue @tiptap/vue-starter-kit -``` - -We even prepared a Vue.js starter kit for you. That should give you a good headstart. Create a new component and add the following content to get a basic version of tiptap: - - - ## CodeSandbox CodeSandbox is an online coding environment. It’s great to fiddle around without setting up a local project and it’s great to share your code with others.