docs: update content

This commit is contained in:
Hans Pagel 2021-02-11 23:37:41 +01:00
parent 2955ef274a
commit 44c1567a01
3 changed files with 34 additions and 9 deletions

View File

@ -186,6 +186,29 @@ Have a look at all of the core commands listed below. They should give you a goo
| .selectNodeForward() | Select a node forward. | | .selectNodeForward() | Select a node forward. |
| .selectParentNode() | Select the parent node. | | .selectParentNode() | Select the parent node. |
## Example use cases
### Quote a text
TODO
Add a blockquote, with a specified text, add a paragraph below, set the cursor there.
```js
// Untested, work in progress, likely to change
this.editor
.chain()
.focus()
.createParagraphNear()
.insertText(text)
.setBlockquote()
.insertHTML('<p></p>')
.createParagraphNear()
.unsetBlockquote()
.createParagraphNear()
.insertHTML('<p></p>')
.run()
```
## Add your own commands ## Add your own commands
All extensions can add additional commands (and most do), check out the specific [documentation for the provided nodes](/api/nodes), [marks](/api/marks), and [extensions](/api/extensions) to learn more about those. All extensions can add additional commands (and most do), check out the specific [documentation for the provided nodes](/api/nodes), [marks](/api/marks), and [extensions](/api/extensions) to learn more about those.

View File

@ -3,7 +3,9 @@
## toc ## toc
## Introduction ## Introduction
Extensions add new capabilities to tiptap. [Nodes](/api/nodes) and [marks](/api/marks) are rendered in HTML. Extensions cant add to the schema, but can add functionality or change the behaviour of the editor. Extensions add new capabilities to tiptap and youll read the word extension here very often. Actually, there are literal Extensions. Those cant add to the schema, but can add functionality or change the behaviour of the editor.
There are also some extensions with more capabilities. We call them [nodes](/api/nodes) and [marks](/api/marks) which can render content in the editor.
## List of provided extensions ## List of provided extensions
| Title | Default Extension | Source Code | | Title | Default Extension | Source Code |
@ -19,7 +21,7 @@ Extensions add new capabilities to tiptap. [Nodes](/api/nodes) and [marks](/api/
| [TextAlign](/api/extensions/text-align) | | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-align/) | | [TextAlign](/api/extensions/text-align) | | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-align/) |
| [Typography](/api/extensions/typography) | | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-typography/) | | [Typography](/api/extensions/typography) | | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-typography/) |
You dont have to use it, but we prepared a `@tiptap/starter-kit` which includes the most common extensions. See an example on [how to use `defaultExtensions()`](/examples/default). You dont have to use it, but we prepared a `@tiptap/starter-kit` which includes the most common extensions. Read more about [`defaultExtensions()`](/guide/configuration#default-extensions).
## How extensions work ## How extensions work
Although tiptap tries to hide most of the complexity of ProseMirror, its built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. Youll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap. Although tiptap tries to hide most of the complexity of ProseMirror, its built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. Youll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap.

View File

@ -35,7 +35,7 @@
Headless Headless
</h3> </h3>
<p> <p>
We dont tell you what a menu should look like or where it should be rendered in the DOM. Thats why tiptap is headless and comes without any CSS. You are in full control over markup, styling and behaviour. Its headless and comes without any CSS. You are in full control over markup, styling and behaviour.
</p> </p>
<div> <div>
<btn type="tertiary" icon="arrow-right" to="/guide/styling"> <btn type="tertiary" icon="arrow-right" to="/guide/styling">
@ -49,7 +49,7 @@
Framework-agnostic Framework-agnostic
</h3> </h3>
<p> <p>
No matter what framework you use, youll enjoy tiptap. Out of the box, it works with plain JavaScript and Vue.js, but its also possible to use it in <g-link to="/installation/react">React</g-link>, <g-link to="/installation/svelte">Svelte</g-link> and others. Out of the box, tiptap works with plain JavaScript and Vue.js, but its also possible to use it in <g-link to="/installation/react">React</g-link>, <g-link to="/installation/svelte">Svelte</g-link> and others.
</p> </p>
<div> <div>
<btn type="tertiary" icon="arrow-right" to="/installation"> <btn type="tertiary" icon="arrow-right" to="/installation">
@ -63,7 +63,7 @@
TypeScript TypeScript
</h3> </h3>
<p> <p>
tiptap 2 is written in TypeScript. That helps to find bugs early and gives a nice autocomplete for the API (if your IDE supports that) on top of the extensive human written documentation. TypeScript helps to find bugs early and gives you a nice autocomplete for the API on top of the extensive human written documentation.
</p> </p>
<div> <div>
<btn type="tertiary" icon="arrow-right" to="/guide/typescript"> <btn type="tertiary" icon="arrow-right" to="/guide/typescript">
@ -77,7 +77,7 @@
Collaborative Collaborative
</h3> </h3>
<p> <p>
Real-time collaboration, syncing between different devices and working offline used to be hard. We provide everything you need to keep everything in sync, conflict-free with the power of <g-link to="https://github.com/yjs/yjs">Y.js</g-link>. Real-time collaboration, syncing between different devices and working offline isnt hard anymore. Keep everything in sync with the magic of <g-link to="https://github.com/yjs/yjs">Y.js</g-link>.
</p> </p>
<div> <div>
<btn type="tertiary" icon="arrow-right" to="/guide/collaborative-editing"> <btn type="tertiary" icon="arrow-right" to="/guide/collaborative-editing">
@ -91,7 +91,7 @@
Community Community
</h3> </h3>
<p> <p>
Over the years, a lovely community has grown around tiptap. Theres so much content shared, so many people helping out in issues and a ton of community extensions, youll be surprised how much that can help. Theres so much content shared, so many people helping out in issues and a ton of community extensions, youll be surprised how much that all can help.
</p> </p>
<div> <div>
<btn type="tertiary" icon="arrow-right" to="https://github.com/ueberdosis/tiptap-next"> <btn type="tertiary" icon="arrow-right" to="https://github.com/ueberdosis/tiptap-next">
@ -108,7 +108,7 @@
Quickstart Quickstart
</h2> </h2>
<p> <p>
For quick demos or to give it just a spin, grab the latest build from a CDN. Here is a quick example to get you started with tiptap: For quick demos or to give it just a spin, grab the latest build from a CDN. Here is an example to get you started with tiptap:
</p> </p>
<!-- eslint-disable --> <!-- eslint-disable -->
<prism language="html">&lt;!DOCTYPE html&gt; <prism language="html">&lt;!DOCTYPE html&gt;
@ -134,7 +134,7 @@
<!-- eslint-enable --> <!-- eslint-enable -->
<div> <div>
<btn type="tertiary" icon="arrow-right" to="/installation"> <btn type="tertiary" icon="arrow-right" to="/installation">
Learn More Learn more
</btn> </btn>
</div> </div>
</div> </div>