docs: add badges to all extensions
This commit is contained in:
Hans Pagel
@@ -1,4 +1,6 @@
|
||||
# Blockquote
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-blockquote)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-blockquote?minimal=true)
|
||||
|
||||
The Blockquote extension enables you to use the `<blockquote>` HTML tag in the editor. This is great to use quotes in the editor.
|
||||
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# BulletList
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-bullet-list)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-bullet-list?minimal=true)
|
||||
|
||||
This extension enables you to use bullet lists in the editor. They are rendered as `<ul>` HTML tags.
|
||||
|
||||
Type <code>* </code>, <code>- </code> or <code>+ </code> at the beginning of a new line and it will magically transform to a bullet list.
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# CodeBlock
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-code-block)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-code-block?minimal=true)
|
||||
|
||||
With the CodeBlock extension you can add fenced code blocks to your documents. It’ll wrap the code in `<pre>` and `<code>` HTML tags.
|
||||
|
||||
Type <code>``` </code> (three backticks and a space) or <code>∼∼∼ </code> (three tildes and a space) and a code block is instantly added for you. You can even specify the language, try writing <code>```css </code>. That should add a `language-css` class to the `<code>`-tag.
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# Document
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-document)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-document?minimal=true)
|
||||
|
||||
**The `Document` extension is required**, no matter what you build with tiptap. It’s a so called “topNode”, a node that’s the home to all other nodes. Think of it like the `<body>` tag for your document.
|
||||
|
||||
The node is very tiny though. It defines a name of the node (`document`), is configured to be a top node (`topNode: true`) and that it can contain multiple other nodes (`block`). That’s all. But have a look yourself:
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# HardBreak
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-hard-break)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-hard-break?minimal=true)
|
||||
|
||||
The HardBreak extensions adds support for the `<br>` HTML tag, which forces a line break.
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# Heading
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-heading)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-heading?minimal=true)
|
||||
|
||||
The Heading extension adds support for headings of different levels. Headings are rendered with `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>` or `<h6>` HTML tags. By default all six heading levels (or styles) 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 <code># </code> at the beginning of a new line and it will magically transform to a heading, same for <code>## </code>, <code>### </code>, <code>#### </code>, <code>##### </code> and <code>###### </code>.
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# HorizontalRule
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-horizontal-rule)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-horizontal-rule?minimal=true)
|
||||
|
||||
Use this extension to render a `<hr>` HTML tag. If you pass `<hr>` in the editor’s initial content, it’ll be rendered accordingly.
|
||||
|
||||
Type three dashes (<code>---</code>) or three underscores and a space (<code>___ </code>) at the beginning of a new line and it will magically transform to a horizontal rule.
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# Image
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-image)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-image?minimal=true)
|
||||
|
||||
Use this extension to render `<img>` HTML tags. By default, those images are blocks. If you want to render images in line with text set the `inline` option to `true`.
|
||||
|
||||
:::warning Restrictions
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# ListItem
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-list-item)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-list-item?minimal=true)
|
||||
|
||||
The ListItem extension adds support for the `<li>` HTML tag. It’s used for bullet lists and ordered lists and can’t really be used without them.
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# Mention
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-mention)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-mention?minimal=true)
|
||||
|
||||
Honestly, the mention node is amazing. It adds support for `@mentions`, for example to ping users, and provides full control over the rendering.
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# OrderedList
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-ordered-list)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-ordered-list?minimal=true)
|
||||
|
||||
This extension enables you to use ordered lists in the editor. They are rendered as `<ol>` HTML tags.
|
||||
|
||||
Type <code>1. </code> (or any other number followed by a dot) at the beginning of a new line and it will magically transform to a ordered list.
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# Paragraph
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-paragraph)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-paragraph?minimal=true)
|
||||
|
||||
Yes, the schema is very strict. Without this extension you won’t even be able to use paragraphs in the editor.
|
||||
|
||||
:::warning Breaking Change from 1.x → 2.x
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# TaskItem
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-task-item)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-task-item?minimal=true)
|
||||
|
||||
This extension renders a task item list element, which is a `<li>` tag with a `data-type` attribute set to `taskItem`. It also renders a checkbox inside the list element, which updates a `checked` attribute.
|
||||
|
||||
This extension doesn’t require any JavaScript framework, it’s based on plain JavaScript.
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# TaskList
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-task-list)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-task-list?minimal=true)
|
||||
|
||||
This extension enables you to use task lists in the editor. They are rendered as `<ul data-type="task_list">`. This implementation doesn’t require any framework, it’s using plain JavaScript only.
|
||||
|
||||
Type <code>[ ] </code> or <code>[x] </code> at the beginning of a new line and it will magically transform to a task list.
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
# Text
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-text)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-text?minimal=true)
|
||||
|
||||
**The `Text` extension is required**, at least if you want to work with text of any kind and that’s very likely. This extension is a little bit different, it doesn’t even render HTML. It’s plain text, that’s all.
|
||||
|
||||
:::warning Breaking Change from 1.x → 2.x
|
||||
|
||||
Reference in New Issue
Block a user