---
url: /extensions/Attachment.md
description: Attachment
---
# Attachment
Attachment is a node extension that allows you to add an Attachment to your editor.
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Attachment, RichTextAttachment } from 'reactjs-tiptap-editor/attachment'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Attachment.configure({// [!code ++]
upload: (file: any) => {// [!code ++]
// upload file to server return url
},// [!code ++]
}),// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Attachment/Attachment.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Attachment/index.md)
## Contributors
## Changelog
---
---
url: /extensions/Blockquote.md
description: Blockquote
---
# Blockquote
The Blockquote extension allows you to add blockquotes to your editor.
* Based on TipTap's Blockquote extension. [@tiptap/extension-blockquote](https://tiptap.dev/docs/editor/extensions/nodes/blockquote)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Blockquote, RichTextBlockquote } from 'reactjs-tiptap-editor/blockquote'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Blockquote// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Blockquote/Blockquote.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Blockquote/index.md)
## Contributors
## Changelog
---
---
url: /extensions/Bold.md
description: Bold
---
# Bold
The Bold extension allows you to add bold text to your editor.
* Based on TipTap's Bold extension. [@tiptap/extension-bold](https://tiptap.dev/docs/editor/extensions/marks/bold)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Bold, RichTextBold } from 'reactjs-tiptap-editor/bold'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Bold// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Options
### shortcutKeys
Type: `string[]`\
Default: `['mod', 'B']`
Keyboard shortcuts for the extension.
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Bold/Bold.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Bold/index.md)
## Contributors
## Changelog
---
---
url: /guide/bubble-menu.md
description: Bubble Menu
---
# Bubble Menu
The bubble menu, as its name suggests, is a context menu that appears when you select content for editing. It provides quick access to editing operations, such as `Bold`, `Italic`, and `Code`, among others.
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
import { SlashCommandList } from 'reactjs-tiptap-editor/slashcommand'; // [!code ++]
// Extension
import { History, RichTextUndo, RichTextRedo } from 'reactjs-tiptap-editor/history';
// ... other extensions
// Bubble Menu
import {
RichTextBubbleColumns,
RichTextBubbleDrawer,
RichTextBubbleExcalidraw,
RichTextBubbleIframe,
RichTextBubbleKatex,
RichTextBubbleLink,
RichTextBubbleImage,
RichTextBubbleVideo,
RichTextBubbleImageGif,
RichTextBubbleMermaid,
RichTextBubbleTable,
RichTextBubbleText,
RichTextBubbleTwitter,
RichTextBubbleCallout
// Drag Handle
RichTextBubbleMenuDragHandle
} from 'reactjs-tiptap-editor/bubble';
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
History,
...,
];
const RichTextToolbar = () => {
return (
)
}
const RichTextBubbleMenu = () => {
return (
{/* Optional: If you want to use Slash Command inside Bubble Menu */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Note
The bubble menu will be automatically enabled when you import the correct plugins.
The system provides the following default bubble menus:
| Component Name | Functionality | Extension |
|:---------------:|----------------------------------------------------------------------------------------------|---------------------|
| RichTextBubbleText | Provides text-related editing operations like bold, italic, underline, etc. | text |
| RichTextBubbleLink | Provides link-related operations like add, edit, delete links | link |
| RichTextBubbleImage | Provides image-related operations like resizing, alignment, etc. | image |
| RichTextBubbleVideo | Provides video-related operations like playback control, size adjustment, etc. | video |
| RichTextBubbleTable | Provides table-related operations like adding/deleting rows and columns, merging cells, etc. | table |
| RichTextBubbleIframe | Provides iframe-related operations like size, link , etc. | iframe |
| RichTextBubbleColumns | Provides multi-column layout operations like adjusting column numbers, widths, etc. | column |
| RichTextBubbleImageGif | Provides general content-related operations like copy, paste, delete, image gif etc. | imageGif |
| RichTextBubbleDrawer | Provides drawer-related operations like size, link , etc. | drawer |
| RichTextBubbleExcalidraw | Provides excalidraw-related operations like size, link , etc. | excalidraw |
| RichTextBubbleMermaid | Provides mermaid-related operations like size, link , etc. | mermaid |
| RichTextBubbleTwitter | Provides twitter-related operations like size, link , etc. | twitter |
| RichTextBubbleMenuDragHandle | Provides a drag handle to move the bubble menu around the editor area. | N/A |
| RichTextBubbleCallout | Provides callout-related operations like style, content, etc. | callout |
| SlashCommandList | Provides a list of slash commands for quick access to various editor functionalities. | slashcommand |
---
---
url: /extensions/BulletList.md
description: BulletList
---
# BulletList
The BulletList extension allows you to add bullet lists to your editor.
* Based on TipTap's Bold extension. [@tiptap/bullet-list](https://tiptap.dev/docs/editor/extensions/nodes/bullet-list)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { BulletList, RichTextBulletList } from 'reactjs-tiptap-editor/bulletlist'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
BulletList// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Options
### shortcutKeys
Type: `string[]`\
Default: `['shift', 'mod', '8']`
Keyboard shortcuts for the extension.
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/BulletList/BulletList.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/BulletList/index.md)
## Contributors
## Changelog
---
---
url: /extensions/Callout.md
description: Callout
---
# Callout
The Callout extension allows you to add callout boxes with different styles to your editor.
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Callout, RichTextCallout } from 'reactjs-tiptap-editor/callout'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Callout// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Options
### shortcutKeys
Type: `string[]`\
Default: `['shift', 'mod', '8']`
Keyboard shortcuts for the extension.
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Callout/Callout.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Callout/index.md)
## Contributors
## Changelog
---
---
url: /extensions/Clear.md
description: Clear
---
# Clear
The Clear extension allows you to clear the editor content.
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Clear, RichTextClear } from 'reactjs-tiptap-editor/clear'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Clear// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Clear/Clear.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Clear/index.md)
## Contributors
## Changelog
---
---
url: /extensions/Code.md
description: Code
---
# Code
The Code extension allows you to add code to your editor.
* Based on TipTap's Code extension. [@tiptap/extension-code](https://tiptap.dev/docs/editor/extensions/marks/code)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Code, RichTextCode } from 'reactjs-tiptap-editor/code'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Code// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Options
### shortcutKeys
Type: `string[]`\
Default: `['mod', 'E']`
Keyboard shortcuts for the extension.
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Code/Code.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Code/index.md)
## Contributors
## Changelog
---
---
url: /extensions/CodeBlock.md
description: CodeBlock
---
# CodeBlock
* The `CodeBlock` extension allows you to add code blocks to your editor. It uses [prism-code-editor-lightweight](https://github.com/hunghg255/prism-code-editor-lightweight) for syntax highlighting.
## Usage
* First Install `prism-code-editor-lightweight` package:
```bash
npm install prism-code-editor-lightweight
# or
yarn add prism-code-editor-lightweight
or
pnpm install prism-code-editor-lightweight
```
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { CodeBlock, RichTextCodeBlock } from 'reactjs-tiptap-editor/codeblock'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
import 'prism-code-editor-lightweight/layout.css'; // [!code ++]
import 'prism-code-editor-lightweight/themes/github-dark.css'; // [!code ++]
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
CodeBlock// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
* You can write ` ``` `, press Enter, and write some code! It loads the language on the fly.
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/CodeBlock/CodeBlock.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/CodeBlock/index.md)
## Contributors
## Changelog
---
---
url: /extensions/CodeView.md
description: CodeView
---
# CodeView
* The `CodeView` extension allows you view html code of the editor.
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { CodeView, RichTextCodeView } from 'reactjs-tiptap-editor/codeview'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
CodeView// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/CodeView/CodeView.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/CodeView/index.md)
## Contributors
## Changelog
---
---
url: /extensions/Color.md
description: Color
---
# Color
The Color extension allows you to add text color to your editor with support for custom colors, keyboard shortcuts, and synchronized color selection across toolbar and bubble menu.
* Based on TipTap's Color extension. [@tiptap/extension-text-style](https://tiptap.dev/docs/editor/extensions/functionality/color)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Color, RichTextColor } from 'reactjs-tiptap-editor/color'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Color// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Options
### colors
Type: `string[]`\
Default: `undefined`
An array of color options to display in the color picker. If not provided, a default set of colors will be used.
```js
import { COLORS_LIST } from 'reactjs-tiptap-editor'
Color.configure({
colors: COLORS_LIST,
// or custom colors
colors: ['#FF0000', '#00FF00', '#0000FF', '#FFFF00'],
})
```
### defaultColor
Type: `string`\
Default: `undefined`
The default color to use when the extension is initialized. This color will be used when applying color via keyboard shortcut for the first time.
```js
import { DEFAULT_COLOR } from 'reactjs-tiptap-editor'
Color.configure({
defaultColor: DEFAULT_COLOR,
// or
defaultColor: '#000000',
})
```
### shortcutKeys
Type: `string[]`\
Default: `['⇧', 'mod', 'C']`
Keyboard shortcuts for applying the color. Default is `Mod-Shift-C` (Ctrl-Shift-C on Windows/Linux, Cmd-Shift-C on Mac).
```js
Color.configure({
shortcutKeys: ['⇧', 'mod', 'C'],
})
```
## Keyboard Shortcut Behavior
The `Mod-Shift-C` keyboard shortcut has intelligent toggle behavior:
1. **No color applied**: Applies the currently selected color
2. **Same color already applied**: Removes the color (toggle off)
3. **Different color applied**: Replaces with the currently selected color
4. **"No Fill" selected**: Does nothing (prevents applying undefined color)
## Color Selection Synchronization
The extension maintains a shared color state across all instances:
* Selecting a color in the toolbar updates the bubble menu
* Selecting a color in the bubble menu updates the toolbar
* Keyboard shortcut uses the last selected color
* All color pickers show the same selected color
## Examples
### Basic Usage
```tsx
import { Color } from 'reactjs-tiptap-editor/color';
const extensions = [
Color,
];
```
### With Custom Colors
```tsx
import { Color, COLORS_LIST } from 'reactjs-tiptap-editor';
const extensions = [
Color.configure({
colors: [
...COLORS_LIST,
'#FF69B4', // Hot Pink
'#8A2BE2', // Blue Violet
],
defaultColor: '#000000',
}),
];
```
### Programmatic Usage
```tsx
// Apply color
editor.chain().focus().setColor('#FF0000').run();
// Remove color
editor.chain().focus().unsetColor().run();
// Check if color is active
const isColorActive = editor.isActive('textStyle', { color: '#FF0000' });
// Get current color
const { color } = editor.getAttributes('textStyle');
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Color/Color.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Color/index.md)
## Contributors
## Changelog
---
---
url: /extensions/Column.md
description: MultiColumn
---
# Column
The Column extension allows you to create multi-column layouts in your editor.
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Column, ColumnNode, MultipleColumnNode, RichTextColumn } from 'reactjs-tiptap-editor/column'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
// custom document to support columns
const DocumentColumn = /* @__PURE__ */ Document.extend({ // [!code ++]
content: '(block|columns)+', // [!code ++]
}); // [!code ++]
const extensions = [
// Base Extensions
Document, // [!code --]
DocumentColumn, // [!code ++]
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Column// [!code ++]
ColumnNode// [!code ++]
MultipleColumnNode// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Column/Column.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Column/index.md)
## Contributors
## Changelog
---
---
url: /guide/custom-theme.md
description: Custom Theme
---
# Custom Theme
* The editor allows you to create and apply custom themes to change its appearance according to your preferences.
* Reference shacne's custom theme implementation:
## Usage
```javascript
import { themeActions, useTheme } from 'reactjs-tiptap-editor/theme'
// Set theme
themeActions.setTheme('light') // or 'dark';
// Set color
themeActions.setColor('default') // "red" | "blue" | "green" | "orange" | "rose" | "violet" | "yellow"
// Set radius
themeActions.setRadius('0.5rem') // any valid CSS border-radius value
// Usage in a React component
const { theme, color, borderRadius } = useTheme();
console.log(theme, color, borderRadius);
```
---
---
url: /extensions/Drawer.md
description: Drawer
---
# Drawer
Drawer is a node extension that allows you to add an Drawer to your editor.
* [Drawer](https://easydrawer.vercel.app/)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Drawer, RichTextDrawer } from 'reactjs-tiptap-editor/drawer'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Drawer// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Drawer/Drawer.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Drawer/index.md)
## Contributors
## Changelog
---
---
url: /extensions/Emoji.md
description: Emoji
---
# Emoji
The Document extension allows you to add a emoji to your editor.
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Emoji, RichTextEmoji } from 'reactjs-tiptap-editor/emoji'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Emoji// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Emoji/Emoji.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Emoji/index.md)
## Contributors
## Changelog
---
---
url: /extensions/Excalidraw.md
description: Excalidraw
---
# Excalidraw
The Excalidraw extension allows you to add an Excalidraw to your editor.
* Based on Excalidraw. [Excalidraw](https://excalidraw.com/)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Excalidraw, RichTextExcalidraw } from 'reactjs-tiptap-editor/excalidraw'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Excalidraw// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Excalidraw/Excalidraw.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Excalidraw/index.md)
## Contributors
## Changelog
---
---
url: /extensions/ExportPdf.md
description: Export PDF
---
# Export PDF
* Export PDF Extension for Tiptap Editor.
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { ExportPdf, RichTextExportPdf } from 'reactjs-tiptap-editor/exportpdf'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
ExportPdf// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
***
## Options
### paperSize
Type: `PaperSize`
Default: `'Letter'`
Specifies the size of the paper used when exporting to PDF.
Supported values:
```ts
type PaperSize =
| 'Legal'
| 'Letter'
| 'Tabloid'
| 'A0'
| 'A1'
| 'A2'
| 'A3'
| 'A4'
| 'A5';
```
### margins
Type:
```ts
{
top: PageMargin;
right: PageMargin;
bottom: PageMargin;
left: PageMargin;
}
```
Default:
```ts
{
top: '0.4in',
right: '0.4in',
bottom: '0.4in',
left: '0.4in'
}
```
Controls the page margins on all four sides. Values can be provided in inches (`in`), centimeters (`cm`), millimeters (`mm`), or points (`pt`).
Supported values:
```ts
type PageMargin =
// Inches
| '0in'
| '0.25in'
| '0.4in'
| '0.5in'
| '0.75in'
| '1in'
| '1.25in'
| '1.5in'
| '1.75in'
| '2in'
// Centimeters
| '0cm'
| '0.5cm'
| '1cm'
| '1.5cm'
| '2cm'
| '2.5cm'
| '3cm'
| '4cm'
| '5cm'
// Millimeters
| '0mm'
| '5mm'
| '10mm'
| '15mm'
| '20mm'
| '25mm'
| '30mm'
| '40mm'
| '50mm'
// Points
| '0pt'
| '18pt'
| '36pt'
| '54pt'
| '72pt'
| '90pt'
| '108pt'
| '144pt';
```
Example usage:
```ts
import { ExportPdf } from 'reactjs-tiptap-editor/exportpdf';
ExportPdf.configure({
paperSize: 'A4',
margins: {
top: '1in',
right: '0.4in',
bottom: '1in',
left: '0.4in',
},
});
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/ExportPdf/ExportPdf.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/ExportPdf/index.md)
## Contributors
## Changelog
---
---
url: /extensions/ExportWord.md
description: Export Word
---
# Export Word
* Export Word Extension for Tiptap Editor.
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { ExportWord, RichTextExportWord } from 'reactjs-tiptap-editor/exportword'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
ExportWord// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/ExportWord/ExportWord.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/ExportWord/index.md)
## Contributors
## Changelog
---
---
url: /extensions/FontFamily.md
description: FontFamily
---
# Font Family
The Font Family extension allows you to change the font family of your editor.
* Based on TipTap's font family extension. [@tiptap/extension-font-family](https://tiptap.dev/docs/editor/extensions/functionality/fontfamily)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { FontFamily, RichTextFontFamily } from 'reactjs-tiptap-editor/fontfamily'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
FontFamily// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Options
### fontFamilyList
Type: `(string | { value: string; name: string })[]`
Set the font list, supporting two formats:
```js
import { DEFAULT_FONT_FAMILY_LIST, FontFamily } from 'reactjs-tiptap-editor/fontfamily'
FontFamily.configure({
fontFamilyList: [
// Use default font list
...DEFAULT_FONT_FAMILY_LIST,
// Two formats
// 1. string
// 2. { name: 'xxx', value: 'xxx' }
'黑体',
'楷体',
{ name: '仿宋', value: '仿宋' },
'Arial',
'Tahoma',
'Verdana'
]
})
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/FontFamily/FontFamily.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/FontFamily/index.md)
## Contributors
## Changelog
---
---
url: /extensions/FontSize.md
description: FontSize
---
# Font Size
The Font Size extension allows you to change the font size of your editor.
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { FontSize, RichTextFontSize } from 'reactjs-tiptap-editor/fontsize'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
FontSize// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Options
### fontSizes
Type: `(string | { value: string; name: string })[]`
```js
import { DEFAULT_FONT_SIZE_LIST, FontSize } from 'reactjs-tiptap-editor/fontsize'
FontSize.configure({
fontSizes: [
// Use default font size list
...DEFAULT_FONT_SIZE_LIST,
// Two formats
// 1. string
// 2. { name: 'xxx', value: 'xxx' }
'10px',
{ name: '200 pixel', value: '200px' }
]
})
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/FontSize/FontSize.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/FontSize/index.md)
## Contributors
## Changelog
---
---
url: /extensions/Heading.md
description: Heading
---
# Heading
The Heading extension allows you to add a heading to your editor.
* Based on TipTap's heading extension. [@tiptap/extension-heading](https://tiptap.dev/docs/editor/extensions/nodes/heading)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Heading, RichTextHeading } from 'reactjs-tiptap-editor/heading'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Heading// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Options
### shortcutKeys
Type: `string[][]`\
Default: `['alt', 'mod', '${level}']`
Keyboard shortcuts for the extension. To override shortcuts for different heading levels:
```tsx
Heading.configure({
shortcutKeys: [
['alt', 'mod', '0'],
['alt', 'mod', '1'],
['alt', 'mod', '2'],
['alt', 'mod', '3'],
['alt', 'mod', '4'],
['alt', 'mod', '5'],
['alt', 'mod', '6'],
...
]
});
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Heading/Heading.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Heading/index.md)
## Contributors
## Changelog
---
---
url: /extensions/Highlight.md
description: Highlight
---
# Highlight
The Highlight extension allows you to highlight text in your editor with support for multiple colors, keyboard shortcuts, and synchronized color selection across toolbar and bubble menu.
* Based on TipTap's highlight extension. [@tiptap/extension-highlight](https://tiptap.dev/docs/editor/extensions/marks/highlight)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Highlight, RichTextHighlight } from 'reactjs-tiptap-editor/highlight'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Highlight// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Features
* 🎨 **Multiple Colors**: Support for multiple highlight colors
* ⌨️ **Keyboard Shortcuts**: Quick highlighting with `Mod-Shift-H`
* 🔄 **Smart Toggle**: Intelligent highlight toggling and replacement
* 🎯 **Synchronized Selection**: Color picker syncs between toolbar and bubble menu
* 🎨 **Custom Colors**: Add custom highlight colors via color picker
* 💾 **Recent Colors**: Automatically tracks recently used colors
* ❌ **No Fill Option**: Option to remove highlight
## Options
### defaultColor
Type: `string`\
Default: `undefined`
The default highlight color to use when the extension is initialized. This color will be used when applying highlight via keyboard shortcut for the first time.
```js
Highlight.configure({
defaultColor: '#ffff00', // Yellow
// or
defaultColor: '#ffc078', // Orange
})
```
### shortcutKeys
Type: `string[]`\
Default: `['⇧', 'mod', 'H']`
Keyboard shortcuts for applying the highlight. Default is `Mod-Shift-H` (Ctrl-Shift-H on Windows/Linux, Cmd-Shift-H on Mac).
```js
Highlight.configure({
shortcutKeys: ['⇧', 'mod', 'H'],
})
```
## Keyboard Shortcut Behavior
The `Mod-Shift-H` keyboard shortcut has intelligent toggle behavior:
1. **No highlight applied**: Applies the currently selected highlight color
2. **Same color already applied**: Removes the highlight (toggle off)
3. **Different color applied**: Replaces with the currently selected highlight color
4. **"No Fill" selected**: Does nothing (prevents applying undefined highlight)
## Color Selection Synchronization
The extension maintains a shared highlight color state across all instances:
* Selecting a color in the toolbar updates the bubble menu
* Selecting a color in the bubble menu updates the toolbar
* Keyboard shortcut uses the last selected color
* All color pickers show the same selected color
* Selecting "No Fill" clears the stored color
## Examples
### Basic Usage
```tsx
import { Highlight } from 'reactjs-tiptap-editor/highlight';
const extensions = [
Highlight,
];
```
### With Default Color
```tsx
import { Highlight } from 'reactjs-tiptap-editor/highlight';
const extensions = [
Highlight.configure({
defaultColor: '#ffc078', // Orange highlight
}),
];
```
### Programmatic Usage
```tsx
// Apply highlight with color
editor.chain().focus().setHighlight({ color: '#ffff00' }).run();
// Remove highlight
editor.chain().focus().unsetHighlight().run();
// Toggle highlight (removes if same color, applies if different or none)
editor.chain().focus().toggleHighlight({ color: '#ffff00' }).run();
// Check if highlight is active
const isHighlightActive = editor.isActive('highlight');
// Check if specific color is active
const isYellowActive = editor.isActive('highlight', { color: '#ffff00' });
// Get current highlight color
const { color } = editor.getAttributes('highlight');
```
## Color Picker
The highlight color picker includes:
* **No Fill**: Remove highlight from text
* **Color Palette**: Predefined colors for quick selection
* **Recent Colors**: Last 10 used colors
* **Custom Color**: Pick any color using the color picker
## Differences from Color Extension
| Feature | Highlight | Color |
|---------|-----------|-------|
| Purpose | Background highlighting | Text color |
| Default Shortcut | `Mod-Shift-H` | `Mod-Shift-C` |
| No Fill Behavior | Removes highlight | Removes text color |
| Visual Style | Background color | Foreground color |
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Highlight/Highlight.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Highlight/index.md)
## Contributors
## Changelog
---
---
url: /extensions/History.md
description: History
---
# History
The History extension allows you to undo and redo changes in your editor.
* Based on TipTap's highlight extension. [@tiptap/extension-history](https://www.npmjs.com/package/@tiptap/extension-history)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { History, RichTextHistory } from 'reactjs-tiptap-editor/history'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
History// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Options
### shortcutKeys
Type: `string[][]`\
Default: `[['mod', 'Z'], ['shift', 'mod', 'Z']]`
Keyboard shortcuts for the extension.
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/History/History.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/History/index.md)
## Contributors
## Changelog
---
---
url: /extensions/HorizontalRule.md
description: HorizontalRule
---
# Horizontal Rule
Horizontal Rule is a node extension that allows you to add a horizontal rule to your editor.
* Based on TipTap's Horizontal extension. [@tiptap/extension-horizontal-rule](https://tiptap.dev/docs/editor/extensions/nodes/horizontal-rule)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { HorizontalRule, RichTextHorizontalRule } from 'reactjs-tiptap-editor/horizontalrule'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
HorizontalRule// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Options
### shortcutKeys
Type: `string[]`\
Default: `['mod', 'alt', 'S']`
Keyboard shortcuts for the extension.
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/HorizontalRule/HorizontalRule.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/HorizontalRule/index.md)
## Contributors
## Changelog
---
---
url: /extensions/Iframe.md
description: Iframe
---
# Iframe
The Iframe extension allows you to add an Iframe to your editor.
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Iframe, RichTextIframe } from 'reactjs-tiptap-editor/iframe'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Iframe// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Iframe/Iframe.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Iframe/index.md)
## Contributors
## Changelog
---
---
url: /extensions/Image.md
description: Image
---
# Image
* Based on TipTap's Image extension. [@tiptap/extension-image](https://tiptap.dev/docs/editor/extensions/nodes/image)
## Usage
* First Install `react-image-crop` package:
```bash
npm install react-image-crop
# or
yarn add react-image-crop
or
pnpm install react-image-crop
```
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Image, RichTextImage } from 'reactjs-tiptap-editor/image'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
import 'react-image-crop/dist/ReactCrop.css'; // [!code ++]
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Image.configure({// [!code ++]
upload: (file: File) => {// [!code ++]
return new Promise((resolve) => {// [!code ++]
setTimeout(() => {// [!code ++]
resolve(URL.createObjectURL(file))// [!code ++]
}, 500)// [!code ++]
})// [!code ++]
},// [!code ++]
}),// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Image Gif
* ImageGif is a node extension that allows you to add an ImageGif to your editor.
* More: [ImageGif](/extensions/ImageGif/index.md)
## Props
```ts
interface IImageOptions extends GeneralOptions {
/** Function for uploading files */
upload?: (file: File) => Promise
HTMLAttributes?: any
multiple?: boolean
acceptMimes?: string[]
maxSize?: number
/** The source URL of the image */
resourceImage: 'upload' | 'link' | 'both'
defaultInline?: boolean,
enableAlt?: boolean,
onError?: (error: {
type: 'size' | 'type' | 'upload';
message: string;
file?: File;
}) => void;
}
```
| Property | Type | Description | Required | Default |
| ---------------- | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
| `upload` | `(file: File) => Promise` | Custom image upload function that receives a `File` and returns a Promise with the image URL, suitable for uploading to cloud or local servers. | No | None |
| `HTMLAttributes` | `any` | HTML attributes passed to the `![]()
` tag, such as `className`, `style`, `alt`, etc. | No | None |
| `multiple` | `boolean` | Whether to allow selecting and uploading multiple images simultaneously. | No | `true` |
| `acceptMimes` | `string[]` | List of allowed image MIME types or file extension restrictions, such as `['image/jpeg', 'image/png']`, `['image/*']`, or `['.png', '.jpg']`, etc. Supports MIME type wildcards and precise file extension restrictions. | No | Common image types `['image/jpeg', 'image/gif', 'image/png', 'image/jpg']` |
| `maxSize` | `number` | Maximum size limit for a single image (in bytes), triggers `onError` when exceeded. | No | `5MB` |
| `resourceImage` | `'upload' \| 'link' \| 'both'` | Image source method: - `'upload'`: Upload only - `'link'`: Link only - `'both'`: Both supported | Yes | `both` |
| `defaultInline` | `boolean` | Whether to insert images as inline elements by default. | No | `false` |
| `enableAlt` | `boolean` | Whether to enable alt text editing for images. | No | `true` |
| `onError` | `(error: { type: 'size' \| 'type' \| 'upload'; message: string; file?: File }) => void` | Callback function for upload or validation failures. Contains error type (size, type, upload), error message, and corresponding file. | No | None |
### resourceImage Type Description
* `'upload'`: Users can only select local files for upload
* `'link'`: Users can only input image URLs
* `'both'`: Supports both upload and URL methods
### acceptMimes Usage Instructions
Supports three format types:
1. **MIME types**: such as `['image/jpeg', 'image/png']`
2. **Wildcard types**: such as `['image/*']`, matches all image MIME types
3. **Extension types**: such as:
```ts
[
'.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg', '.svgz', '.xbm',
'.tiff', '.ico', '.jfif', '.heic', '.heif', '.avif', '.bmp',
'.apng', '.pjpeg'
]
```
### onError Example
* Customize error handling logic to unify system prompts.
* We recommend using the message field, which has built-in dynamic prompts and i18n internationalization support.
```ts
onError: ({ type, message, file }) => {
switch (type) {
case 'size':
console.warn(`File size exceeds limit: ${file?.name}`);
break;
case 'type':
console.warn(`Unsupported file type: ${file?.type}`);
break;
case 'upload':
console.error(`Upload failed: ${message}`);
break;
}
}
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Image/Image.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Image/index.md)
## Contributors
## Changelog
---
---
url: /extensions/ImageGif.md
description: ImageGif
---
# ImageGif
ImageGif is a node extension that allows you to add an ImageGif to your editor.
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { ImageGif, RichTextImageGif } from 'reactjs-tiptap-editor/imagegif'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
ImageGif.configure({// [!code ++]
API_KEY: '', // [!code ++]
provider: 'tenor' // [!code ++] (tenor or giphy)
}),// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
* `API_KEY` - You can get it from [Giphy Developers](https://developers.giphy.com/) or [Tenor Developers](https://tenor.com/)
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/ImageGif/ImageGif.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/ImageGif/index.md)
## Contributors
## Changelog
---
---
url: /extensions/ImportWord.md
description: Import Word
---
# Import Word
* Import Word Extension for Tiptap Editor.
## Usage
::: code-group
```sh [npm]
npm install mammoth
```
```sh [pnpm]
pnpm install mammoth
```
```sh [yarn]
yarn add mammoth
```
:::
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { ImportWord, RichTextImportWord } from 'reactjs-tiptap-editor/importword'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
ImportWord// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Options
### shortcutKeys
Type: `string[]`\
Default: `['alt', 'mod', 'S']`
Keyboard shortcuts for the extension.
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/ImportWord/ImportWord.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/ImportWord/index.md)
## Contributors
## Changelog
---
---
url: /extensions/Indent.md
description: Indent
---
# Indent
* Handles indenting text in the editor.
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Indent, RichTextIndent } from 'reactjs-tiptap-editor/indent'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Indent// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Options
### shortcutKeys
Type: `string[][]`\
Default: `[['Tab'], ['Shift', 'Tab']]`
Keyboard shortcuts for the extension.
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Indent/Indent.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Indent/index.md)
## Contributors
## Changelog
---
---
url: /guide/getting-started.md
description: How to install reactjs-tiptap-editor
---
# Installation
::: code-group
```sh [npm]
npm install reactjs-tiptap-editor@latest
```
```sh [pnpm]
pnpm install reactjs-tiptap-editor@latest
```
```sh [yarn]
yarn add reactjs-tiptap-editor@latest
```
:::
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
import { EditorContent, useEditor } from "@tiptap/react";
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
];
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Props
```ts
/**
* Interface for RichTextEditor component props
*/
export interface IProviderRichTextProps {
editor: Editor | null
dark: boolean
}
```
## Full Source Code Demo
[Full Source Code Demo](https://github.com/hunghg255/reactjs-tiptap-editor-demo)
---
---
url: /guide/internationalization.md
description: Internationalization
---
# Internationalization (i18n)
The editor provides built-in internationalization support, with English as the default language.
## Usage
```javascript
// Import the locale object
import { localeActions, useLocale } from 'reactjs-tiptap-editor/locale-bundle';
// Set the language to English
localeActions.setLang('en');
// End
// Usage in a React component
const { lang: currentLocale } = useLocale();
console.log(currentLocale); // Outputs the current locale messages
```
## Supported Languages
Currently, the editor supports the following languages:
| Language | Config | Version |
|----------------------|--------| -------------------------------------------------------------------------------- |
| English | en | [v0.0.5](https://github.com/hunghg255/reactjs-tiptap-editor/releases/tag/v0.0.5) |
| Vietnamese | vi | |
| Simplified Chinese | zh\_CN | |
| Brazilian Portuguese | pt\_BR | |
| Hungarian | hu\_HU | |
| Finnish | fi | |
## Adding a New Language
If the platform doesn't support your desired language, you can add a custom language, for example: `fr`.
```javascript
import { localeActions } from 'reactjs-tiptap-editor/locale-bundle';
// Don't worry about which content to translate; setMessage supports TypeScript
localeActions.setMessage('fr', {
'editor.remove': 'Supprimer',
// ...
});
```
### Overriding Default Language
To override part of the current language system, first choose a new language name, then import the default language data, and finally override the translations you want.
```javascript
import { localeActions } from 'reactjs-tiptap-editor/locale-bundle';
import { en } from 'reactjs-tiptap-editor/locale-bundle';
localeActions.setMessage('en', {
...en,
'editor.remove': 'Delete',
});
```
### Full List of Translation Keys
All translation keys used by the editor are located in the [English locale file](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/src/locales/en.ts).
Use this file as the source of truth when creating or extending a language. Simply copy the keys and translate them based on your target language.
---
---
url: /extensions/Italic.md
description: Italic
---
# Italic
* Based on TipTap's Italic extension. [@tiptap/extension-italic](https://tiptap.dev/docs/editor/extensions/marks/italic)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Italic, RichTextItalic } from 'reactjs-tiptap-editor/italic'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Italic// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Options
### shortcutKeys
Type: `string[]`\
Default: `['mod', 'I']`
Keyboard shortcuts for the extension.
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Italic/Italic.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Italic/index.md)
## Contributors
## Changelog
---
---
url: /extensions/Katex.md
description: Katex
---
# Katex
* Katex Extension for Tiptap Editor.
* This extension allows you to add Katex math equations to your editor.
* Supports inline and block math equations.
* This extension is based on [katex](https://katex.org/).
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Katex, RichTextKatex } from 'reactjs-tiptap-editor/katex'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Katex// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Katex/Katex.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Katex/index.md)
## Contributors
## Changelog
---
---
url: /extensions/LineHeight.md
description: LineHeight
---
# Line Height
The Line Height extension allows you to change the line height of your text.
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { LineHeight, RichTextLineHeight } from 'reactjs-tiptap-editor/lineheight'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
LineHeight// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Options
### lineHeights
Type: `string[]`\
Default: `['100%', '115%', '150%', '200%', '250%', '300%']`
```js
import { DEFAULT_LINE_HEIGHT_LIST, LineHeight } from 'reactjs-tiptap-editor/lineheight'
FontSize.configure({
LineHeight: [
// Use default line height list
...DEFAULT_LINE_HEIGHT_LIST,
'1',
'1.5',
'2',
'2.5'
]
})
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/LineHeight/LineHeight.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/LineHeight/index.md)
## Contributors
## Changelog
---
---
url: /extensions/Link.md
description: Link
---
# Link
Link is a node extension that allows you to add a horizontal rule to your editor.
* Based on TipTap's Link extension. [@tiptap/extension-link](https://tiptap.dev/docs/editor/extensions/marks/link)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Link, RichTextLink } from 'reactjs-tiptap-editor/link'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Link// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Link/Link.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Link/index.md)
## Contributors
## Changelog
---
---
url: /extensions/Mention.md
description: Mention
---
# Mention
Mention is a node extension that allows you to add a Mention to your editor.
* Based on TipTap's Link extension. [@tiptap/extension-mention](https://tiptap.dev/docs/editor/extensions/nodes/mention)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Mention } from 'reactjs-tiptap-editor/mention'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
// Mock Data for Mention
const MOCK_USERS = [{
id: '0',
label: 'hunghg255',
avatar: {
src: 'https://avatars.githubusercontent.com/u/42096908?v=4'
}
},
{
id: '1',
label: 'benjamincanac',
avatar: {
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
}
},
{
id: '2',
label: 'atinux',
avatar: {
src: 'https://avatars.githubusercontent.com/u/904724?v=4'
}
},
{
id: '3',
label: 'danielroe',
avatar: {
src: 'https://avatars.githubusercontent.com/u/28706372?v=4'
}
},
{
id: '4',
label: 'pi0',
avatar: {
src: 'https://avatars.githubusercontent.com/u/5158436?v=4'
}
}
];
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Mention.configure({
// suggestion: {
// char: '@',
// items: async ({ query }: any) => {
// return MOCK_USERS.filter(item => item.label.toLowerCase().startsWith(query.toLowerCase()));
// },
// }
suggestions: [
{
char: '@',
items: async ({ query }: any) => {
return MOCK_USERS.filter(item => item.label.toLowerCase().startsWith(query.toLowerCase()));
},
},
{
char: '#',
items: async ({ query }: any) => {
return MOCK_USERS.filter(item => item.label.toLowerCase().startsWith(query.toLowerCase()));
},
}
]
}),
];
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Mention/Mention.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Mention/index.md)
## Contributors
## Changelog
---
---
url: /extensions/Mermaid.md
description: Mermaid
---
# Mermaid
Mermaid is a node extension that allows you to add an Mermaid to your editor.
* [Mermaid](https://mermaid.js.org/)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Mermaid, RichTextMermaid } from 'reactjs-tiptap-editor/mermaid'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Mermaid.configure({// [!code ++]
upload: (file: any) => {// [!code ++]
// upload file to server return url
},// [!code ++]
}),// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Mermaid/Mermaid.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Mermaid/index.md)
## Contributors
## Changelog
---
---
url: /extensions/MoreMark.md
description: MoreMark
---
# More Mark
MoreMark is a collection of marks that are not available in the default TipTap editor.
* Based on TipTap's subscript [@tiptap/extension-subscript](https://tiptap.dev/docs/editor/extensions/marks/subscript) and superscript [@tiptap/extension-superscript](https://tiptap.dev/docs/editor/extensions/marks/superscript) extensions.
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { MoreMark, RichTextMoreMark } from 'reactjs-tiptap-editor/moremark'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
MoreMark// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Options
### shortcutKeys
Type: `string[][]`\
Default: `[['mod', '.'], ['mod', ',']]`
Keyboard shortcuts for the extension.
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/MoreMark/MoreMark.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/MoreMark/index.md)
## Contributors
## Changelog
---
---
url: /extensions/OrderedList.md
description: OrderedList
---
# Ordered List
Ordered List extension allows you to create ordered lists in your editor.
* Based on TipTap's ordered-list [@tiptap/extension-ordered-list](https://tiptap.dev/docs/editor/extensions/nodes/ordered-list) extensions.
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { OrderedList, RichTextOrderedList } from 'reactjs-tiptap-editor/orderedlist'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
OrderedList// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Options
### shortcutKeys
Type: `string[]`\
Default: `['mod', 'shift', '7']`
Keyboard shortcuts for the extension.
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/OrderedList/OrderedList.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/OrderedList/index.md)
## Contributors
## Changelog
---
---
url: /extensions/SearchAndReplace.md
description: Search And Replace
---
# Search And Replace
* Search and Replace Extension for Tiptap Editor.
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { SearchAndReplace, RichTextSearchAndReplace } from 'reactjs-tiptap-editor/searchandreplace'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
SearchAndReplace// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Props
| Prop | Type | Description | Default |
| --- | --- | --- | --- |
| `searchTerm` | `string` | Search Term | `''` |
| `replaceTerm` | `string` | Replace Term | `''` |
| `searchResultClass` | `string` | Search Result Class | `'search-result'` |
| `searchResultCurrentClass` | `string` | Search Result Current Class | `'search-result-current'` |
| `caseSensitive` | `boolean` | Case Sensitive | `false` |
| `disableRegex` | `boolean` | Disable Regex | `false` |
| `onChange` | `() => void` | On Change | `undefined` |
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/SearchAndReplace/SearchAndReplace.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/SearchAndReplace/index.md)
## Contributors
## Changelog
---
---
url: /extensions/SlashCommand.md
description: SlashCommand
---
# Slash Command
The Slash Command extension allows you to add slash commands to your editor.
* type `/` to trigger the slash command menu.
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { SlashCommand, SlashCommandList } from 'reactjs-tiptap-editor/slashcommand'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
SlashCommand// [!code ++]
];
const RichTextBubbleSlashCommandList = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/SlashCommand/SlashCommand.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/SlashCommand/index.md)
## Contributors
## Changelog
---
---
url: /extensions/Strike.md
description: Strike
---
# Strike
The Strike extension allows you to strike through text in your editor.
* Based on TipTap's strike extension. [@tiptap/extension-strike](https://tiptap.dev/docs/editor/extensions/marks/strike)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Strike, RichTextStrike } from 'reactjs-tiptap-editor/strike'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Strike// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Options
### shortcutKeys
Type: `string[]`\
Default: `['shift', 'mod', 'S']`
Keyboard shortcuts for the extension.
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Strike/Strike.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Strike/index.md)
## Contributors
## Changelog
---
---
url: /extensions/Table.md
description: Table
---
# Table
The Table extension allows you to add tables to your editor.
* Based on TipTap's table extension. [@tiptap/extension-table](https://tiptap.dev/docs/editor/extensions/nodes/table)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Table, RichTextTable } from 'reactjs-tiptap-editor/table'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Table// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Table/Table.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Table/index.md)
## Contributors
## Changelog
---
---
url: /extensions/TaskList.md
description: TaskList
---
# Task List
The Task List extension allows you to add task lists to your editor.
* Based on TipTap's task list extension. [@tiptap/extension-task-list](https://tiptap.dev/docs/editor/extensions/nodes/task-list)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { TaskList, RichTextTaskList } from 'reactjs-tiptap-editor/tasklist'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
TaskList// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Options
### shortcutKeys
Type: `string[]`\
Default: `['shift', 'mod', '9']`
Keyboard shortcuts for the extension.
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/TaskList/TaskList.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/TaskList/index.md)
## Contributors
## Changelog
---
---
url: /extensions/TextAlign.md
description: TextAlign
---
# Text Align
The Text Align extension allows you to align text in the editor.
* Based on TipTap's task list extension. [@tiptap/extension-text-align](https://tiptap.dev/docs/editor/extensions/functionality/textalign)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { TextAlign, RichTextAlign } from 'reactjs-tiptap-editor/textalign'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
TextAlign// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Options
### shortcutKeys
Type: `string[][]`\
Default: `[['mod', 'shift', 'L'], ['mod', 'shift', 'E'], ['mod', 'shift', 'R'], ['mod', 'shift', 'J']]`
Keyboard shortcuts for the extension (left, center, right & justify).
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/TextAlign/TextAlign.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/TextAlign/index.md)
## Contributors
## Changelog
---
---
url: /extensions/TextDirection.md
description: TextDirection
---
# Text Direction
The Text Direction extension allows you to change the text direction of your editor.
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { TextDirection, RichTextTextDirection } from 'reactjs-tiptap-editor/textdirection'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
TextDirection// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Configuration
* Refer to the following example to configure the Text Direction extension. [tiptap-text-direction](https://tiptap.dev/docs/examples/basics/text-direction)
* Require: set global `auto` direction in Editor options to enable command for auto text direction.
```
const editor = new Editor({
extensions: [StarterKit],
textDirection: 'auto', // or 'ltr', 'rtl'
})
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/TextDirection/TextDirection.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/TextDirection/index.md)
## Contributors
## Changelog
---
---
url: /guide/toolbar.md
description: Toolbar
---
# Toolbar
Toolbar is a component that is used to display buttons that are used to perform actions on the editor.
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { History, RichTextUndo, RichTextRedo } from 'reactjs-tiptap-editor/history';
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
History
];
const RichTextToolbar = () => {
return (
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
---
---
url: /extensions/Twitter.md
description: Twitter
---
# Twitter
Twitter is a node extension that allows you to add an Twitter to your editor.
* [react-tweet](https://www.npmjs.com/package/react-tweet)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Twitter, RichTextTwitter } from 'reactjs-tiptap-editor/twitter'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Twitter// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Twitter/Twitter.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Twitter/index.md)
## Contributors
## Changelog
---
---
url: /extensions/TextUnderline.md
description: UnderLine
---
# UnderLine
The UnderLine extension allows you to underline text in your editor.
* Based on TipTap's underline extension. [@tiptap/extension-underline](https://tiptap.dev/docs/editor/extensions/marks/underline)
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { TextUnderline, RichTextUnderline } from 'reactjs-tiptap-editor/textunderline'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
TextUnderline// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Options
### shortcutKeys
Type: `string[]`\
Default: `['mod', 'U']`
Keyboard shortcuts for the extension.
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/TextUnderline/TextUnderline.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/TextUnderline/index.md)
## Contributors
## Changelog
---
---
url: /extensions/Video.md
description: Video
---
# Video
The Video extension allows you to add a video to your editor.
## Usage
```tsx
import { RichTextProvider } from 'reactjs-tiptap-editor'
// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';
// Extension
import { Video, RichTextVideo } from 'reactjs-tiptap-editor/video'; // [!code ++]
// ... other extensions
// Import CSS
import 'reactjs-tiptap-editor/style.css';
const extensions = [
// Base Extensions
Document,
Text,
Dropcursor,
Gapcursor,
HardBreak,
Paragraph,
TrailingNode,
ListItem,
TextStyle,
Placeholder.configure({
placeholder: 'Press \'/\' for commands',
})
...
// Import Extensions Here
Video// [!code ++]
];
const RichTextToolbar = () => {
return (
{/* [!code ++] */}
)
}
const App = () => {
const editor = useEditor({
textDirection: 'auto', // global text direction
extensions,
});
return (
);
};
```
## Props
```ts
interface VideoOptions extends GeneralOptions {
/**
* Indicates whether fullscreen play is allowed
*
* @default true
*/
allowFullscreen: boolean
/**
* Indicates whether to display the frameborder
*
* @default false
*/
frameborder: boolean
/**
* Width of the video, can be a number or string
*
* @default VIDEO_SIZE['size-medium']
*/
width: number | string
/** HTML attributes object for passing additional attributes */
HTMLAttributes: {
[key: string]: any
}
/** Function for uploading files */
upload?: (file: File) => Promise
/** The source URL of the video */
resourceVideo: 'upload' | 'link' | 'both'
}
```
## Source
[Source](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/src/extensions/Video/Video.ts) • [Docs](https://github.com/hunghg255/reactjs-tiptap-editor/blob/master/docs/extensions/Video/index.md)
## Contributors
## Changelog