From b629b382e1cbe3361b41d5addceff884fb59d71b Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Mon, 25 Jan 2021 10:35:52 +0100
Subject: [PATCH] docs: add badges to all extensions

---
 docs/src/docPages/api/extensions/dropcursor.md  | 3 +++
 docs/src/docPages/api/extensions/focus.md       | 3 +++
 docs/src/docPages/api/extensions/font-family.md | 3 +++
 docs/src/docPages/api/extensions/gapcursor.md   | 3 +++
 docs/src/docPages/api/extensions/history.md     | 3 +++
 docs/src/docPages/api/extensions/text-align.md  | 3 +++
 docs/src/docPages/api/extensions/typography.md  | 3 +++
 docs/src/docPages/api/marks/bold.md             | 3 +++
 docs/src/docPages/api/marks/code.md             | 3 +++
 docs/src/docPages/api/marks/highlight.md        | 3 +++
 docs/src/docPages/api/marks/italic.md           | 3 +++
 docs/src/docPages/api/marks/link.md             | 3 +++
 docs/src/docPages/api/marks/strike.md           | 3 +++
 docs/src/docPages/api/marks/text-style.md       | 3 +++
 docs/src/docPages/api/marks/underline.md        | 3 +++
 docs/src/docPages/api/nodes/blockquote.md       | 2 ++
 docs/src/docPages/api/nodes/bullet-list.md      | 3 +++
 docs/src/docPages/api/nodes/code-block.md       | 3 +++
 docs/src/docPages/api/nodes/document.md         | 3 +++
 docs/src/docPages/api/nodes/hard-break.md       | 3 +++
 docs/src/docPages/api/nodes/heading.md          | 3 +++
 docs/src/docPages/api/nodes/horizontal-rule.md  | 3 +++
 docs/src/docPages/api/nodes/image.md            | 3 +++
 docs/src/docPages/api/nodes/list-item.md        | 3 +++
 docs/src/docPages/api/nodes/mention.md          | 3 +++
 docs/src/docPages/api/nodes/ordered-list.md     | 3 +++
 docs/src/docPages/api/nodes/paragraph.md        | 3 +++
 docs/src/docPages/api/nodes/task-item.md        | 3 +++
 docs/src/docPages/api/nodes/task-list.md        | 3 +++
 docs/src/docPages/api/nodes/text.md             | 3 +++
 30 files changed, 89 insertions(+)

diff --git a/docs/src/docPages/api/extensions/dropcursor.md b/docs/src/docPages/api/extensions/dropcursor.md
index 2ded34fc..234927d5 100644
--- a/docs/src/docPages/api/extensions/dropcursor.md
+++ b/docs/src/docPages/api/extensions/dropcursor.md
@@ -1,4 +1,7 @@
 # Dropcursor
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-dropcursor.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-dropcursor)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-dropcursor.svg)](https://npmcharts.com/compare/@tiptap/extension-dropcursor?minimal=true)
+
 This extension loads the [ProseMirror Dropcursor plugin](https://github.com/ProseMirror/prosemirror-dropcursor) by Marijn Haverbeke, which shows a cursor at the drop position when something is dragged into the editor.
 
 Note that tiptap is headless, but the dropcursor needs CSS for its appearance. There are settings for the color and width, and you’re free to add a custom CSS class.
diff --git a/docs/src/docPages/api/extensions/focus.md b/docs/src/docPages/api/extensions/focus.md
index 988cb484..307e19b4 100644
--- a/docs/src/docPages/api/extensions/focus.md
+++ b/docs/src/docPages/api/extensions/focus.md
@@ -1,4 +1,7 @@
 # Focus
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-focus.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-focus)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-focus.svg)](https://npmcharts.com/compare/@tiptap/extension-focus?minimal=true)
+
 The Focus extension adds a CSS class to focused nodes. By default it adds `.has-class`, but you can change that.
 
 Note that it’s only a class, the styling is totally up to you. The usage example below has some CSS for that class.
diff --git a/docs/src/docPages/api/extensions/font-family.md b/docs/src/docPages/api/extensions/font-family.md
index a4930fc0..4b494a37 100644
--- a/docs/src/docPages/api/extensions/font-family.md
+++ b/docs/src/docPages/api/extensions/font-family.md
@@ -1,4 +1,7 @@
 # FontFamily
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-font-family.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-font-family)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-font-family.svg)](https://npmcharts.com/compare/@tiptap/extension-font-family?minimal=true)
+
 This extension enables you to set the font family in the editor. It uses the [`TextStyle`](/api/marks/text-style) mark, which renders a `<span>` tag. The font family is applied as inline style, for example `<span style="font-family: Arial">`.
 
 ## Installation
diff --git a/docs/src/docPages/api/extensions/gapcursor.md b/docs/src/docPages/api/extensions/gapcursor.md
index 33919bba..6bf54a5c 100644
--- a/docs/src/docPages/api/extensions/gapcursor.md
+++ b/docs/src/docPages/api/extensions/gapcursor.md
@@ -1,4 +1,7 @@
 # Gapcursor
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-gapcursor.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-gapcursor)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-gapcursor.svg)](https://npmcharts.com/compare/@tiptap/extension-gapcursor?minimal=true)
+
 This extension loads the [ProseMirror Gapcursor plugin](https://github.com/ProseMirror/prosemirror-gapcursor) by Marijn Haverbeke, which adds a gap for the cursor in places that don’t allow regular selection. For example, after a table at the end of a document.
 
 Note that tiptap is headless, but the dropcursor needs CSS for its appearance. The [default CSS](https://github.com/ueberdosis/tiptap-next/tree/main/packages/core/src/style.ts) is loaded through the Editor class.
diff --git a/docs/src/docPages/api/extensions/history.md b/docs/src/docPages/api/extensions/history.md
index 19d9630f..251c16c9 100644
--- a/docs/src/docPages/api/extensions/history.md
+++ b/docs/src/docPages/api/extensions/history.md
@@ -1,4 +1,7 @@
 # History
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-history.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-history)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-history.svg)](https://npmcharts.com/compare/@tiptap/extension-history?minimal=true)
+
 This extension provides history support. All changes to the document will be tracked and can be removed with `undo`. Undone changes can be applied with `redo` again.
 
 ## Installation
diff --git a/docs/src/docPages/api/extensions/text-align.md b/docs/src/docPages/api/extensions/text-align.md
index 7e5196ad..2ea2f2e9 100644
--- a/docs/src/docPages/api/extensions/text-align.md
+++ b/docs/src/docPages/api/extensions/text-align.md
@@ -1,4 +1,7 @@
 # TextAlign
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-text-align.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-text-align)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-text-align.svg)](https://npmcharts.com/compare/@tiptap/extension-text-align?minimal=true)
+
 This extension adds a text align attribute to a specified list of nodes. The attribute is used to align the text.
 
 ## Installation
diff --git a/docs/src/docPages/api/extensions/typography.md b/docs/src/docPages/api/extensions/typography.md
index 37a0ff3d..8ada943d 100644
--- a/docs/src/docPages/api/extensions/typography.md
+++ b/docs/src/docPages/api/extensions/typography.md
@@ -1,4 +1,7 @@
 # Typography
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-typography.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-typography)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-typography.svg)](https://npmcharts.com/compare/@tiptap/extension-typography?minimal=true)
+
 This extension tries to help with common text patterns with the correct typographic character. Under the hood all rules are input rules.
 
 ## Installation
diff --git a/docs/src/docPages/api/marks/bold.md b/docs/src/docPages/api/marks/bold.md
index a927a5a8..42f5761f 100644
--- a/docs/src/docPages/api/marks/bold.md
+++ b/docs/src/docPages/api/marks/bold.md
@@ -1,4 +1,7 @@
 # Bold
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-bold.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-bold)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-bold.svg)](https://npmcharts.com/compare/@tiptap/extension-bold?minimal=true)
+
 Use this extension to render text in **bold**. If you pass `<strong>`, `<b>` 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 magically transform to **bold** text while you type.
diff --git a/docs/src/docPages/api/marks/code.md b/docs/src/docPages/api/marks/code.md
index be98f271..3a24d567 100644
--- a/docs/src/docPages/api/marks/code.md
+++ b/docs/src/docPages/api/marks/code.md
@@ -1,4 +1,7 @@
 # Code
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-code.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-code)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-code.svg)](https://npmcharts.com/compare/@tiptap/extension-code?minimal=true)
+
 The Code extensions enables you to use the `<code>` HTML tag in the editor. If you paste in text with `<code>` tags it will rendered accordingly.
 
 Type something with <code>\`back-ticks around\`</code> and it will magically transform to `inline code` while you type.
diff --git a/docs/src/docPages/api/marks/highlight.md b/docs/src/docPages/api/marks/highlight.md
index f30f6ea0..c39a1eeb 100644
--- a/docs/src/docPages/api/marks/highlight.md
+++ b/docs/src/docPages/api/marks/highlight.md
@@ -1,4 +1,7 @@
 # Highlight
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-highlight.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-highlight)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-highlight.svg)](https://npmcharts.com/compare/@tiptap/extension-highlight?minimal=true)
+
 Use this extension to render highlighted text with `<mark>`. You can use only default `<mark>` HTML tag, which has a yellow background color by default, or apply different colors.
 
 Type `==two equal signs==` and it will magically transform to <mark>highlighted</mark> text while you type.
diff --git a/docs/src/docPages/api/marks/italic.md b/docs/src/docPages/api/marks/italic.md
index 3ece3ec9..31c53511 100644
--- a/docs/src/docPages/api/marks/italic.md
+++ b/docs/src/docPages/api/marks/italic.md
@@ -1,4 +1,7 @@
 # Italic
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-italic.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-italic)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-italic.svg)](https://npmcharts.com/compare/@tiptap/extension-italic?minimal=true)
+
 Use this extension to render text in *italic*. If you pass `<em>`, `<i>` tags, or text with inline `style` attributes setting `font-style: italic` in the editor’s initial content, they all will be rendered accordingly.
 
 Type `*one asterisk*` or `_one underline_` and it will magically transform to *italic* text while you type.
diff --git a/docs/src/docPages/api/marks/link.md b/docs/src/docPages/api/marks/link.md
index 180e093d..5276e2a9 100644
--- a/docs/src/docPages/api/marks/link.md
+++ b/docs/src/docPages/api/marks/link.md
@@ -1,4 +1,7 @@
 # Link
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-link.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-link)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-link.svg)](https://npmcharts.com/compare/@tiptap/extension-link?minimal=true)
+
 The Link extension adds support for `<a>` tags to the editor. The extension is headless too, there is no actual UI to add, modify or delete links. The usage example below uses the native JavaScript prompt to show you how that could work.
 
 In a real world application, you would probably add a more sophisticated user interface.
diff --git a/docs/src/docPages/api/marks/strike.md b/docs/src/docPages/api/marks/strike.md
index 302562a9..8caac5cc 100644
--- a/docs/src/docPages/api/marks/strike.md
+++ b/docs/src/docPages/api/marks/strike.md
@@ -1,4 +1,7 @@
 # Strike
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-strike.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-strike)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-strike.svg)](https://npmcharts.com/compare/@tiptap/extension-strike?minimal=true)
+
 Use this extension to render ~~striked text~~. If you pass `<s>`, `<del>`, `<strike>` tags, or text with inline `style` attributes setting `text-decoration: line-through` in the editor’s initial content, they all will be rendered accordingly.
 
 Type <code>&Tilde;&Tilde;text between tildes&Tilde;&Tilde;</code> and it will be magically ~~striked through~~ while you type.
diff --git a/docs/src/docPages/api/marks/text-style.md b/docs/src/docPages/api/marks/text-style.md
index e620235a..b42d51ed 100644
--- a/docs/src/docPages/api/marks/text-style.md
+++ b/docs/src/docPages/api/marks/text-style.md
@@ -1,4 +1,7 @@
 # TextStyle
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-text-style.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-text-style)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-text-style.svg)](https://npmcharts.com/compare/@tiptap/extension-text-style?minimal=true)
+
 This mark renders a `<span>` HTML tag and enables you to add a list of styling related attributes, for example font-family, font-size, or font-color. The extension doesn’t add any styling attribute by default, but other extensions use it as the foundation, for example [`FontFamily`](/api/extensions/font-family).
 
 ## Installation
diff --git a/docs/src/docPages/api/marks/underline.md b/docs/src/docPages/api/marks/underline.md
index 560ad711..69815ea2 100644
--- a/docs/src/docPages/api/marks/underline.md
+++ b/docs/src/docPages/api/marks/underline.md
@@ -1,4 +1,7 @@
 # Underline
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-underline.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-underline)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-underline.svg)](https://npmcharts.com/compare/@tiptap/extension-underline?minimal=true)
+
 Use this extension to render text <u>underlined</u>. If you pass `<u>` tags, or text with inline `style` attributes setting `text-decoration: underline` in the editor’s initial content, they all will be rendered accordingly.
 
 Be aware that underlined text in the Internet usually indicates that it’s a clickable link. Don’t confuse your users with underlined text.
diff --git a/docs/src/docPages/api/nodes/blockquote.md b/docs/src/docPages/api/nodes/blockquote.md
index 2d794aee..c11350bf 100644
--- a/docs/src/docPages/api/nodes/blockquote.md
+++ b/docs/src/docPages/api/nodes/blockquote.md
@@ -1,4 +1,6 @@
 # Blockquote
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-blockquote.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-blockquote)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-blockquote.svg)](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.
 
diff --git a/docs/src/docPages/api/nodes/bullet-list.md b/docs/src/docPages/api/nodes/bullet-list.md
index c95d54f0..1c687115 100644
--- a/docs/src/docPages/api/nodes/bullet-list.md
+++ b/docs/src/docPages/api/nodes/bullet-list.md
@@ -1,4 +1,7 @@
 # BulletList
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-bullet-list.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-bullet-list)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-bullet-list.svg)](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>*&nbsp;</code>, <code>-&nbsp;</code> or <code>+&nbsp;</code> at the beginning of a new line and it will magically transform to a bullet list.
diff --git a/docs/src/docPages/api/nodes/code-block.md b/docs/src/docPages/api/nodes/code-block.md
index 93968d24..caba885e 100644
--- a/docs/src/docPages/api/nodes/code-block.md
+++ b/docs/src/docPages/api/nodes/code-block.md
@@ -1,4 +1,7 @@
 # CodeBlock
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-code-block.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-code-block)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-code-block.svg)](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>&grave;&grave;&grave;&nbsp;</code> (three backticks and a space) or <code>&Tilde;&Tilde;&Tilde;&nbsp;</code> (three tildes and a space) and a code block is instantly added for you. You can even specify the language, try writing <code>&grave;&grave;&grave;css&nbsp;</code>. That should add a `language-css` class to the `<code>`-tag.
diff --git a/docs/src/docPages/api/nodes/document.md b/docs/src/docPages/api/nodes/document.md
index e887bed8..b8af44e7 100644
--- a/docs/src/docPages/api/nodes/document.md
+++ b/docs/src/docPages/api/nodes/document.md
@@ -1,4 +1,7 @@
 # Document
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-document.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-document)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-document.svg)](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:
diff --git a/docs/src/docPages/api/nodes/hard-break.md b/docs/src/docPages/api/nodes/hard-break.md
index 83fc2a99..636c57ef 100644
--- a/docs/src/docPages/api/nodes/hard-break.md
+++ b/docs/src/docPages/api/nodes/hard-break.md
@@ -1,4 +1,7 @@
 # HardBreak
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-hard-break.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-hard-break)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-hard-break.svg)](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
diff --git a/docs/src/docPages/api/nodes/heading.md b/docs/src/docPages/api/nodes/heading.md
index c4cce893..d116e76c 100644
--- a/docs/src/docPages/api/nodes/heading.md
+++ b/docs/src/docPages/api/nodes/heading.md
@@ -1,4 +1,7 @@
 # Heading
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-heading.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-heading)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-heading.svg)](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>#&nbsp;</code> at the beginning of a new line and it will magically transform to a heading, same for <code>##&nbsp;</code>, <code>###&nbsp;</code>, <code>####&nbsp;</code>, <code>#####&nbsp;</code> and <code>######&nbsp;</code>.
diff --git a/docs/src/docPages/api/nodes/horizontal-rule.md b/docs/src/docPages/api/nodes/horizontal-rule.md
index 44b083f8..fdb8a338 100644
--- a/docs/src/docPages/api/nodes/horizontal-rule.md
+++ b/docs/src/docPages/api/nodes/horizontal-rule.md
@@ -1,4 +1,7 @@
 # HorizontalRule
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-horizontal-rule.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-horizontal-rule)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-horizontal-rule.svg)](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.
diff --git a/docs/src/docPages/api/nodes/image.md b/docs/src/docPages/api/nodes/image.md
index 76a12785..efe0b9c7 100644
--- a/docs/src/docPages/api/nodes/image.md
+++ b/docs/src/docPages/api/nodes/image.md
@@ -1,4 +1,7 @@
 # Image
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-image.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-image)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-image.svg)](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
diff --git a/docs/src/docPages/api/nodes/list-item.md b/docs/src/docPages/api/nodes/list-item.md
index 54c21751..21cb2f8e 100644
--- a/docs/src/docPages/api/nodes/list-item.md
+++ b/docs/src/docPages/api/nodes/list-item.md
@@ -1,4 +1,7 @@
 # ListItem
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-list-item.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-list-item)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-list-item.svg)](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
diff --git a/docs/src/docPages/api/nodes/mention.md b/docs/src/docPages/api/nodes/mention.md
index b1ed4cb4..f9b3e0a0 100644
--- a/docs/src/docPages/api/nodes/mention.md
+++ b/docs/src/docPages/api/nodes/mention.md
@@ -1,4 +1,7 @@
 # Mention
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-mention.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-mention)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-mention.svg)](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
diff --git a/docs/src/docPages/api/nodes/ordered-list.md b/docs/src/docPages/api/nodes/ordered-list.md
index 64b71dbc..c4bc77c7 100644
--- a/docs/src/docPages/api/nodes/ordered-list.md
+++ b/docs/src/docPages/api/nodes/ordered-list.md
@@ -1,4 +1,7 @@
 # OrderedList
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-ordered-list.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-ordered-list)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-ordered-list.svg)](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.&nbsp;</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.
diff --git a/docs/src/docPages/api/nodes/paragraph.md b/docs/src/docPages/api/nodes/paragraph.md
index b36ed947..8b4a4515 100644
--- a/docs/src/docPages/api/nodes/paragraph.md
+++ b/docs/src/docPages/api/nodes/paragraph.md
@@ -1,4 +1,7 @@
 # Paragraph
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-paragraph.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-paragraph)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-paragraph.svg)](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
diff --git a/docs/src/docPages/api/nodes/task-item.md b/docs/src/docPages/api/nodes/task-item.md
index 7e1e8487..241c9207 100644
--- a/docs/src/docPages/api/nodes/task-item.md
+++ b/docs/src/docPages/api/nodes/task-item.md
@@ -1,4 +1,7 @@
 # TaskItem
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-task-item.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-task-item)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-task-item.svg)](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.
diff --git a/docs/src/docPages/api/nodes/task-list.md b/docs/src/docPages/api/nodes/task-list.md
index 6fd1d1c9..10d7d10d 100644
--- a/docs/src/docPages/api/nodes/task-list.md
+++ b/docs/src/docPages/api/nodes/task-list.md
@@ -1,4 +1,7 @@
 # TaskList
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-task-list.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-task-list)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-task-list.svg)](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>[ ]&nbsp;</code> or <code>[x]&nbsp;</code> at the beginning of a new line and it will magically transform to a task list.
diff --git a/docs/src/docPages/api/nodes/text.md b/docs/src/docPages/api/nodes/text.md
index c283cc72..4c1c493d 100644
--- a/docs/src/docPages/api/nodes/text.md
+++ b/docs/src/docPages/api/nodes/text.md
@@ -1,4 +1,7 @@
 # Text
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-text.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-text)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-text.svg)](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