mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-08-06 13:38:49 +08:00
docs: add badges to all extensions
This commit is contained in:
Hans Pagel
parent
20f8adc0e4
commit
b629b382e1
@ -1,4 +1,7 @@
|
||||
# Dropcursor
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-dropcursor)
|
||||
[](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.
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
# Focus
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-focus)
|
||||
[](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.
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
# FontFamily
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-font-family)
|
||||
[](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
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
# Gapcursor
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-gapcursor)
|
||||
[](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.
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
# History
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-history)
|
||||
[](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
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
# TextAlign
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-text-align)
|
||||
[](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
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
# Typography
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-typography)
|
||||
[](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
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
# Bold
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-bold)
|
||||
[](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.
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
# Code
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-code)
|
||||
[](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.
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
# Highlight
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-highlight)
|
||||
[](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.
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
# Italic
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-italic)
|
||||
[](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.
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
# Link
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-link)
|
||||
[](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.
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
# Strike
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-strike)
|
||||
[](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>∼∼text between tildes∼∼</code> and it will be magically ~~striked through~~ while you type.
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
# TextStyle
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-text-style)
|
||||
[](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
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
# Underline
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-underline)
|
||||
[](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.
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user