move nodes and marks to a separate folder, add missing extensions
This commit is contained in:
Hans Pagel
37
docs/src/docPages/api/marks/bold.md
Normal file
37
docs/src/docPages/api/marks/bold.md
Normal file
@@ -0,0 +1,37 @@
|
||||
# Bold
|
||||
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.
|
||||
|
||||
::: warning Restrictions
|
||||
The extension will generate the corresponding `<strong>` HTML tags when reading contents of the `Editor` instance. All text marked bold, regardless of the method will be normalized to `<strong>` HTML tags.
|
||||
:::
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-bold
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-bold
|
||||
```
|
||||
|
||||
## Settings
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ------ | ------- | -------------------------------------------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
| ------- | ------- | --------------- |
|
||||
| bold | — | Mark text bold. |
|
||||
|
||||
## Keyboard shortcuts
|
||||
* Windows/Linux: `Control` `B`
|
||||
* macOS: `Cmd` `B`
|
||||
|
||||
## Source code
|
||||
[packages/extension-bold/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/)
|
||||
|
||||
## Usage
|
||||
<demo name="Extensions/Bold" highlight="3-5,17,36" />
|
||||
32
docs/src/docPages/api/marks/code.md
Normal file
32
docs/src/docPages/api/marks/code.md
Normal file
@@ -0,0 +1,32 @@
|
||||
# Code
|
||||
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.
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-code
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-code
|
||||
```
|
||||
|
||||
## Settings
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ------ | ------- | -------------------------------------------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
| ------- | ------- | ------------------------- |
|
||||
| code | — | Mark text as inline code. |
|
||||
|
||||
## Keyboard shortcuts
|
||||
* `Alt` <code>`</code>
|
||||
|
||||
## Source code
|
||||
[packages/extension-code/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/)
|
||||
|
||||
## Usage
|
||||
<demo name="Extensions/Code" highlight="3-5,17,36" />
|
||||
37
docs/src/docPages/api/marks/italic.md
Normal file
37
docs/src/docPages/api/marks/italic.md
Normal file
@@ -0,0 +1,37 @@
|
||||
# Italic
|
||||
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.
|
||||
|
||||
::: warning Restrictions
|
||||
The extension will generate the corresponding `<em>` HTML tags when reading contents of the `Editor` instance. All text marked italic, regardless of the method will be normalized to `<em>` HTML tags.
|
||||
:::
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-italic
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-italic
|
||||
```
|
||||
|
||||
## Settings
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ------ | ------- | -------------------------------------------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
| ------- | ------- | ----------------- |
|
||||
| italic | — | Mark text italic. |
|
||||
|
||||
## Keyboard shortcuts
|
||||
* Windows/Linux: `Control` `I`
|
||||
* macOS: `Cmd` `I`
|
||||
|
||||
## Source code
|
||||
[packages/extension-italic/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/)
|
||||
|
||||
## Usage
|
||||
<demo name="Extensions/Italic" highlight="3-5,17,36" />
|
||||
39
docs/src/docPages/api/marks/link.md
Normal file
39
docs/src/docPages/api/marks/link.md
Normal file
@@ -0,0 +1,39 @@
|
||||
# Link
|
||||
The Link extension adds support for `<a>` tags to the editor. The extension is renderless 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. [Check out the example](/examples/links) to see how that could look like.
|
||||
|
||||
Pasted URLs will be linked automatically.
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-link
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-link
|
||||
```
|
||||
|
||||
## Settings
|
||||
| Option | Type | Default | Description |
|
||||
| ----------- | ------- | ---------------------------- | -------------------------------------------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
| openOnClick | boolean | true | If enabled, links will be opened on click. |
|
||||
| rel | string | noopener noreferrer nofollow | Configure the `rel` attribute. |
|
||||
| target | string | _blank | Set the default `target` of links. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
| ------- | -------------- | ----------------------------------------------------------- |
|
||||
| link | href<br>target | Link the selected text. Removes a link, if `href` is empty. |
|
||||
|
||||
## Keyboard shortcuts
|
||||
:::warning Doesn’t have a keyboard shortcut
|
||||
This extension doesn’t bind a specific keyboard shortcut. You would probably open your UI on `Mod-k` though.
|
||||
:::
|
||||
|
||||
## Source code
|
||||
[packages/extension-link/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-link/)
|
||||
|
||||
## Usage
|
||||
<demo name="Extensions/Link" highlight="3-8,19,38,55" />
|
||||
37
docs/src/docPages/api/marks/strike.md
Normal file
37
docs/src/docPages/api/marks/strike.md
Normal file
@@ -0,0 +1,37 @@
|
||||
# Strike
|
||||
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.
|
||||
|
||||
::: warning Restrictions
|
||||
The extension will generate the corresponding `<s>` HTML tags when reading contents of the `Editor` instance. All text striked through, regardless of the method will be normalized to `<s>` HTML tags.
|
||||
:::
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-strike
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-strike
|
||||
```
|
||||
|
||||
## Settings
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ------ | ------- | -------------------------------------------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
| ------- | ------- | --------------------------- |
|
||||
| strike | — | Mark text as strikethrough. |
|
||||
|
||||
## Keyboard shortcuts
|
||||
* Windows/Linux: `Control` `D`
|
||||
* macOS: `Cmd` `D`
|
||||
|
||||
## Source code
|
||||
[packages/extension-strike/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/)
|
||||
|
||||
## Usage
|
||||
<demo name="Extensions/Strike" highlight="3-5,17,36" />
|
||||
37
docs/src/docPages/api/marks/underline.md
Normal file
37
docs/src/docPages/api/marks/underline.md
Normal file
@@ -0,0 +1,37 @@
|
||||
# Underline
|
||||
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.
|
||||
|
||||
::: warning Restrictions
|
||||
The extension will generate the corresponding `<u>` HTML tags when reading contents of the `Editor` instance. All text marked underlined, regardless of the method will be normalized to `<u>` HTML tags.
|
||||
:::
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-underline
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-underline
|
||||
```
|
||||
|
||||
## Settings
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ------ | ------- | -------------------------------------------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
| --------- | ------- | ------------------------ |
|
||||
| underline | — | Mark text as underlined. |
|
||||
|
||||
## Keyboard shortcuts
|
||||
* Windows/Linux: `Control` `U`
|
||||
* macOS: `Cmd` `U`
|
||||
|
||||
## Source code
|
||||
[packages/extension-underline/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/)
|
||||
|
||||
## Usage
|
||||
<demo name="Extensions/Underline" highlight="3-5,17,36" />
|
||||
Reference in New Issue
Block a user