ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

remove gridsome

Browse Source
This commit is contained in:
Philipp Kühn
2021-09-16 14:41:25 +02:00
parent e012a29240
commit 2f15a11572
311 changed files with 157 additions and 10308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
docs/api/extensions/bubble-menu.md Normal file
View File

@@ -0,0 +1,99 @@
# Bubble Menu
[![Version](https://img.shields.io/npm/v/@tiptap/extension-bubble-menu.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-bubble-menu)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-bubble-menu.svg)](https://npmcharts.com/compare/@tiptap/extension-bubble-menu?minimal=true)
This extension will make a contextual menu appear near a selection of text. Use it to let users apply [marks](/api/marks) to their text selection.
As always, the markup and styling is totally up to you.
## Installation
```bash
# with npm
npm install @tiptap/extension-bubble-menu
# with Yarn
yarn add @tiptap/extension-bubble-menu
```
## Settings
| Option | Type | Default | Description |
| ------------ | -------------------- | -------------- | ----------------------------------------------------------------------- |
| element | `HTMLElement` | `null` | The DOM element that contains your menu. |
| tippyOptions | `Object` | `{}` | [Options for tippy.js](https://atomiks.github.io/tippyjs/v6/all-props/) |
| pluginKey | `string | PluginKey` | `'bubbleMenu'` | The key for the underlying ProseMirror plugin. |
| shouldShow | `(props) => boolean` | | Controls whether the menu should be shown or not. |
## Source code
[packages/extension-bubble-menu/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bubble-menu/)
## Usage
### JavaScript
```js
import { Editor } from '@tiptap/core'
import BubbleMenu from '@tiptap/extension-bubble-menu'
new Editor({
extensions: [
BubbleMenu.configure({
element: document.querySelector('.menu'),
}),
],
})
```
### Frameworks
<tiptap-demo name="Extensions/BubbleMenu"></tiptap-demo>
### Custom logic
Customize the logic for showing the menu with the `shouldShow` option. For components, `shouldShow` can be passed as a prop.
```js
BubbleMenu.configure({
shouldShow: ({ editor, view, state, oldState, from, to }) => {
// only show the bubble menu for images and links
return editor.isActive('image') || editor.isActive('link')
},
})
```
### Multiple menus
Use multiple menus by setting an unique `pluginKey`.
```js
import { Editor } from '@tiptap/core'
import BubbleMenu from '@tiptap/extension-bubble-menu'
new Editor({
extensions: [
BubbleMenu.configure({
pluginKey: 'bubbleMenuOne',
element: document.querySelector('.menu-one'),
}),
BubbleMenu.configure({
pluginKey: 'bubbleMenuTwo',
element: document.querySelector('.menu-two'),
}),
],
})
```
Alternatively you can pass a ProseMirror `PluginKey`.
```js
import { Editor } from '@tiptap/core'
import BubbleMenu from '@tiptap/extension-bubble-menu'
import { PluginKey } from 'prosemirror-state'
new Editor({
extensions: [
BubbleMenu.configure({
pluginKey: new PluginKey('bubbleMenuOne'),
element: document.querySelector('.menu-one'),
}),
BubbleMenu.configure({
pluginKey: new PluginKey('bubbleMenuTwo'),
element: document.querySelector('.menu-two'),
}),
],
})
```

38
docs/api/extensions/character-count.md Normal file
View File

@@ -0,0 +1,38 @@
# CharacterCount
[![Version](https://img.shields.io/npm/v/@tiptap/extension-character-count.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-character-count)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-character-count.svg)](https://npmcharts.com/compare/@tiptap/extension-character-count?minimal=true)
The `CharacterCount` extension limits the number of allowed character to a specific length. That’s it, that’s all.
## Installation
```bash
# with npm
npm install @tiptap/extension-character-count
# with Yarn
yarn add @tiptap/extension-character-count
```
## Settings
| Option | Type | Default | Description |
| ------ | -------- | ------- | -------------------------------------------------------- |
| limit | `Number` | `0` | The maximum number of characters that should be allowed. |
## Source code
[packages/extension-character-count/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-character-count/)
## Usage
<tiptap-demo name="Extensions/CharacterCount"></tiptap-demo>
## Count words, emojis, letters …
Want to count words instead? Or emojis? Or the letter *a*? Sure, no problem. You can access the `textContent` directly and count whatever you’re into.
```js
new Editor({
onUpdate({ editor }) {
const wordCount = editor.state.doc.textContent.split(' ').length
console.log(wordCount)
},
})
```

44
docs/api/extensions/collaboration-cursor.md Normal file
View File

@@ -0,0 +1,44 @@
# CollaborationCursor
[![Version](https://img.shields.io/npm/v/@tiptap/extension-collaboration-cursor.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-collaboration-cursor)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-collaboration-cursor.svg)](https://npmcharts.com/compare/@tiptap/extension-collaboration-cursor?minimal=true)
This extension adds information about all connected users (like their name and a specified color), their current cursor position and their text selection (if there’s one).
Open this page in multiple browser windows to test it.
:::pro Pro Extension
We kindly ask you to [sponsor our work](/sponsor) when using this extension in production.
:::
## Installation
```bash
# with npm
npm install @tiptap/extension-collaboration-cursor
# with Yarn
yarn add @tiptap/extension-collaboration-cursor
```
This extension requires the [`Collaboration`](/api/extensions/collaboration) extension.
## Settings
| Option | Type | Default | Description |
| -------- | ---------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| provider | `Object` | `null` | A Y.js network connection, for example a [y-websocket](https://github.com/yjs/y-websocket) instance. |
| user | `Object` | `{ user: null, color: null }` | Attributes of the current user, assumes to have a name and a color, but can be used with any attribute. |
| render | `Function` | … | A render function for the cursor, look at [the extension source code](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration-cursor/) for an example. |
## Commands
| Command | Parameters | Description |
| ------- | ---------- | ------------------------------------------------------------------------------------------------ |
| user | attributes | An object with the attributes of the current user, by default it expects a `name` and a `color`. |
## Source code
[packages/extension-collaboration-cursor/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration-cursor/)
## Usage
:::warning Public
The content of this editor is shared with other users.
:::
<tiptap-demo name="Extensions/CollaborationCursor" hideSource></tiptap-demo>
<tiptap-demo name="Extensions/CollaborationCursor"></tiptap-demo>

52
docs/api/extensions/collaboration.md Normal file
View File

@@ -0,0 +1,52 @@
# Collaboration
[![Version](https://img.shields.io/npm/v/@tiptap/extension-collaboration.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-collaboration)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-collaboration.svg)](https://npmcharts.com/compare/@tiptap/extension-collaboration?minimal=true)
The Collaboration extension enables you to collaborate with others in a single document. The implementation is based on [Y.js by Kevin Jahns](https://github.com/yjs/yjs), which is the coolest thing to [integrate collaborative editing](/guide/collaborative-editing) in your project.
The history works totally different in a collaborative editing setup. If you undo a change, you don’t want to undo changes of other users. To handle that behaviour this extension provides an own `undo` and `redo` command. Don’t load the default [`History`](/api/extensions/history) extension together with the Collaboration extension to avoid conflicts.
:::pro Pro Extension
We kindly ask you to [sponsor our work](/sponsor) when using this extension in production.
:::
## Installation
```bash
# with npm
npm install @tiptap/extension-collaboration yjs y-websocket
# with Yarn
yarn add @tiptap/extension-collaboration yjs y-websocket
```
## Settings
| Option | Type | Default | Description |
| -------- | -------- | ----------- | --------------------------------------------------------------------------------------- |
| document | `Object` | `null` | An initialized Y.js document. |
| field | `String` | `'default'` | Name of a Y.js fragment, can be changed to sync multiple fields with one Y.js document. |
| fragment | `Object` | `null` | A raw Y.js fragment, can be used instead of `document` and `field`. |
## Commands
| Command | Parameters | Description |
| ------- | ---------- | --------------------- |
| undo | — | Undo the last change. |
| redo | — | Redo the last change. |
## Keyboard shortcuts
### Undo
* Windows/Linux: `Control`&nbsp;`Z`
* macOS: `Cmd`&nbsp;`Z`
### Redo
* Windows/Linux: `Shift`&nbsp;`Control`&nbsp;`Z` or `Control`&nbsp;`Y`
* macOS: `Shift`&nbsp;`Cmd`&nbsp;`Z` or `Cmd`&nbsp;`Y`
## Source code
[packages/extension-collaboration/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration/)
## Usage
:::warning Public
The content of this editor is shared with other users.
:::
<tiptap-demo name="Extensions/Collaboration" hideSource></tiptap-demo>
<tiptap-demo name="Extensions/Collaboration"></tiptap-demo>

32
docs/api/extensions/color.md Normal file
View File

@@ -0,0 +1,32 @@
# Color
[![Version](https://img.shields.io/npm/v/@tiptap/extension-color.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-color)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-color.svg)](https://npmcharts.com/compare/@tiptap/extension-color?minimal=true)
This extension enables you to set the font color in the editor. It uses the [`TextStyle`](/api/marks/text-style) mark, which renders a `<span>` tag (and only that). The font color is applied as inline style then, for example `<span style="color: #958DF1">`.
## Installation
```bash
# with npm
npm install @tiptap/extension-text-style @tiptap/extension-color
# with Yarn
yarn add @tiptap/extension-text-style @tiptap/extension-color
```
This extension requires the [`TextStyle`](/api/marks/text-style) mark.
## Settings
| Option | Type | Default | Description |
| ------ | ------- | --------------- | ------------------------------------------------------------------------ |
| types | `Array` | `['textStyle']` | A list of marks to which the font family attribute should be applied to. |
## Commands
| Command | Parameters | Description |
| ------- | ---------- | -------------------------------------------- |
| color | color | Applies the given font color as inline style |
## Source code
[packages/extension-color/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-color/)
## Usage
<tiptap-demo name="Extensions/Color"></tiptap-demo>

29
docs/api/extensions/dropcursor.md Normal file
View File

@@ -0,0 +1,29 @@
# Dropcursor
[![Version](https://img.shields.io/npm/v/@tiptap/extension-dropcursor.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-dropcursor)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-dropcursor.svg)](https://npmcharts.com/compare/@tiptap/extension-dropcursor?minimal=true)
This extension loads the [ProseMirror Dropcursor plugin](https://github.com/ProseMirror/prosemirror-dropcursor) by Marijn Haverbeke, which shows a cursor at the drop position when something is dragged into the editor.
Note that tiptap is headless, but the dropcursor needs CSS for its appearance. There are settings for the color and width, and you’re free to add a custom CSS class.
## Installation
```bash
# with npm
npm install @tiptap/extension-dropcursor
# with Yarn
yarn add @tiptap/extension-dropcursor
```
## Settings
| Option | Type | Default | Description |
| ------ | -------- | ---------------- | --------------------------------------------------------------------- |
| color | `String` | `'currentcolor'` | Color of the dropcursor. |
| width | `Number` | `1` | Width of the dropcursor. |
| class | `String` | – | One or multiple CSS classes that should be applied to the dropcursor. |
## Source code
[packages/extension-dropcursor/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-dropcursor/)
## Usage
<tiptap-demo name="Extensions/Dropcursor"></tiptap-demo>

95
docs/api/extensions/floating-menu.md Normal file
View File

@@ -0,0 +1,95 @@
# Floating Menu
[![Version](https://img.shields.io/npm/v/@tiptap/extension-floating-menu.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-floating-menu)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-floating-menu.svg)](https://npmcharts.com/compare/@tiptap/extension-floating-menu?minimal=true)
This extension will make a contextual menu appear near a selection of text.
## Installation
```bash
# with npm
npm install @tiptap/extension-floating-menu
# with Yarn
yarn add @tiptap/extension-floating-menu
```
## Settings
| Option | Type | Default | Description |
| ------------ | -------------------- | ---------------- | ----------------------------------------------------------------------- |
| element | `HTMLElement` | `null` | The DOM element of your menu. |
| tippyOptions | `Object` | `{}` | [Options for tippy.js](https://atomiks.github.io/tippyjs/v6/all-props/) |
| pluginKey | `string | PluginKey` | `'floatingMenu'` | The key for the underlying ProseMirror plugin. |
| shouldShow | `(props) => boolean` | | Controls whether the menu should be shown or not. |
## Source code
[packages/extension-floating-menu/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-floating-menu/)
## Using Vanilla JavaScript
```js
import { Editor } from '@tiptap/core'
import FloatingMenu from '@tiptap/extension-floating-menu'
new Editor({
extensions: [
FloatingMenu.configure({
element: document.querySelector('.menu'),
}),
],
})
```
## Using a framework
<tiptap-demo name="Extensions/FloatingMenu"></tiptap-demo>
### Custom logic
Customize the logic for showing the menu with the `shouldShow` option. For components, `shouldShow` can be passed as a prop.
```js
FloatingMenu.configure({
shouldShow: ({ editor, view, state, oldState }) => {
// show the floating within any paragraph
return editor.isActive('paragraph')
},
})
```
### Multiple menus
Use multiple menus by setting an unique `pluginKey`.
```js
import { Editor } from '@tiptap/core'
import FloatingMenu from '@tiptap/extension-floating-menu'
new Editor({
extensions: [
FloatingMenu.configure({
pluginKey: 'floatingMenuOne',
element: document.querySelector('.menu-one'),
}),
FloatingMenu.configure({
pluginKey: 'floatingMenuTwo',
element: document.querySelector('.menu-two'),
}),
],
})
```
Alternatively you can pass a ProseMirror `PluginKey`.
```js
import { Editor } from '@tiptap/core'
import FloatingMenu from '@tiptap/extension-floating-menu'
import { PluginKey } from 'prosemirror-state'
new Editor({
extensions: [
FloatingMenu.configure({
pluginKey: new PluginKey('floatingMenuOne'),
element: document.querySelector('.menu-one'),
}),
FloatingMenu.configure({
pluginKey: new PluginKey('floatingMenuOne'),
element: document.querySelector('.menu-two'),
}),
],
})
```

28
docs/api/extensions/focus.md Normal file
View File

@@ -0,0 +1,28 @@
# Focus
[![Version](https://img.shields.io/npm/v/@tiptap/extension-focus.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-focus)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-focus.svg)](https://npmcharts.com/compare/@tiptap/extension-focus?minimal=true)
The Focus extension adds a CSS class to focused nodes. By default it adds `.has-focus`, but you can change that.
Note that it’s only a class, the styling is totally up to you. The usage example below has some CSS for that class.
## Installation
```bash
# with npm
npm install @tiptap/extension-focus
# with Yarn
yarn add @tiptap/extension-focus
```
## Settings
| Option | Type | Default | Description |
| --------- | -------- | ------------- | ---------------------------------------------------------------------------- |
| className | `String` | `'has-focus'` | The class that is applied to the focused element. |
| mode | `String` | `'all'` | Apply the class to `'all'`, the `'shallowest'` or the `'deepest'` node. |
## Source code
[packages/extension-focus/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-focus/)
## Usage
<tiptap-demo name="Extensions/Focus"></tiptap-demo>

32
docs/api/extensions/font-family.md Normal file
View File

@@ -0,0 +1,32 @@
# FontFamily
[![Version](https://img.shields.io/npm/v/@tiptap/extension-font-family.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-font-family)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-font-family.svg)](https://npmcharts.com/compare/@tiptap/extension-font-family?minimal=true)
This extension enables you to set the font family in the editor. It uses the [`TextStyle`](/api/marks/text-style) mark, which renders a `<span>` tag. The font family is applied as inline style, for example `<span style="font-family: Arial">`.
## Installation
```bash
# with npm
npm install @tiptap/extension-text-style @tiptap/extension-font-family
# with Yarn
yarn add @tiptap/extension-text-style @tiptap/extension-font-family
```
This extension requires the [`TextStyle`](/api/marks/text-style) mark.
## Settings
| Option | Type | Default | Description |
| ------ | ------- | --------------- | ------------------------------------------------------------------------ |
| types | `Array` | `['textStyle']` | A list of marks to which the font family attribute should be applied to. |
## Commands
| Command | Parameters | Description |
| ---------- | ---------- | --------------------------------------------- |
| fontFamily | fontFamily | Applies the given font family as inline style |
## Source code
[packages/extension-font-family/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-font-family/)
## Usage
<tiptap-demo name="Extensions/FontFamily"></tiptap-demo>

22
docs/api/extensions/gapcursor.md Normal file
View File

@@ -0,0 +1,22 @@
# Gapcursor
[![Version](https://img.shields.io/npm/v/@tiptap/extension-gapcursor.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-gapcursor)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-gapcursor.svg)](https://npmcharts.com/compare/@tiptap/extension-gapcursor?minimal=true)
This extension loads the [ProseMirror Gapcursor plugin](https://github.com/ProseMirror/prosemirror-gapcursor) by Marijn Haverbeke, which adds a gap for the cursor in places that don’t allow regular selection. For example, after a table at the end of a document.
Note that tiptap is headless, but the gapcursor needs CSS for its appearance. The [default CSS](https://github.com/ueberdosis/tiptap/tree/main/packages/core/src/style.ts) is loaded through the Editor class.
## Installation
```bash
# with npm
npm install @tiptap/extension-gapcursor
# with Yarn
yarn add @tiptap/extension-gapcursor
```
## Source code
[packages/extension-gapcursor/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-gapcursor/)
## Usage
<tiptap-demo name="Extensions/Gapcursor"></tiptap-demo>

47
docs/api/extensions/history.md Normal file
View File

@@ -0,0 +1,47 @@
# History
[![Version](https://img.shields.io/npm/v/@tiptap/extension-history.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-history)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-history.svg)](https://npmcharts.com/compare/@tiptap/extension-history?minimal=true)
This extension provides history support. All changes to the document will be tracked and can be removed with `undo`. Undone changes can be applied with `redo` again.
## Installation
```bash
# with npm
npm install @tiptap/extension-history
# with Yarn
yarn add @tiptap/extension-history
```
## Settings
| Option | Type | Default | Description |
| ------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| depth | `Number` | `100` | The amount of history events that are collected before the oldest events are discarded. Defaults to 100. |
| newGroupDelay | `Number` | `500` | The delay between changes after which a new group should be started (in milliseconds). When changes aren’t adjacent, a new group is always started. |
## Commands
| Command | Parameters | Description |
| ------- | ---------- | --------------------- |
| undo | — | Undo the last change. |
| redo | — | Redo the last change. |
## Keyboard shortcuts
### Undo
* Windows/Linux: `Control`&nbsp;`Z`
* macOS: `Cmd`&nbsp;`Z`
#### Russian keyboard layouts
* Windows/Linux: `Control`&nbsp;`я`
* macOS: `Cmd`&nbsp;`я`
### Redo
* Windows/Linux: `Shift`&nbsp;`Control`&nbsp;`Z` or `Control`&nbsp;`Y`
* macOS: `Shift`&nbsp;`Cmd`&nbsp;`Z` or `Cmd`&nbsp;`Y`
#### Russian keyboard layouts
* Windows/Linux: `Shift`&nbsp;`Control`&nbsp;`я`
* macOS: `Shift`&nbsp;`Cmd`&nbsp;`я`
## Source code
[packages/extension-history/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-history/)
## Usage
<tiptap-demo name="Extensions/History"></tiptap-demo>

29
docs/api/extensions/placeholder.md Normal file
View File

@@ -0,0 +1,29 @@
# Placeholder
[![Version](https://img.shields.io/npm/v/@tiptap/extension-placeholder.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-placeholder)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-placeholder.svg)](https://npmcharts.com/compare/@tiptap/extension-placeholder?minimal=true)
This extension provides placeholder support. Give your users an idea what they should write with a tiny hint. There is a handful of things to customize, if you feel like it.
## Installation
```bash
# with npm
npm install @tiptap/extension-placeholder
# with Yarn
yarn add @tiptap/extension-placeholder
```
## Settings
| Option | Type | Default | Description |
| -------------------- | ------------------- | --------------------- | ----------------------------------------------------------- |
| emptyEditorClass | `String` | `'is-editor-empty'` | The added CSS class if the editor is empty. |
| emptyNodeClass | `String` | `'is-empty'` | The added CSS class if the node is empty. |
| placeholder | `String | Function` | `'Write something …'` | The placeholder text added as `data-placeholder` attribute. |
| showOnlyWhenEditable | `Boolean` | `true` | Show decorations only when editor is editable. |
| showOnlyCurrent | `Boolean` | `true` | Show decorations only in currently selected node. |
## Source code
[packages/extension-placeholder/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-placeholder/)
## Usage
<tiptap-demo name="Extensions/Placeholder"></tiptap-demo>

80
docs/api/extensions/starter-kit.md Normal file
View File

@@ -0,0 +1,80 @@
# StarterKit
[![Version](https://img.shields.io/npm/v/@tiptap/starter-kit.svg?label=version)](https://www.npmjs.com/package/@tiptap/starter-kit)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/starter-kit.svg)](https://npmcharts.com/compare/@tiptap/starter-kit?minimal=true)
The `StarterKit` is a collection of the most popular tiptap extensions. If you’re just getting started, this extension is for you.
## Installation
```bash
# with npm
npm install @tiptap/starter-kit
# with Yarn
yarn add @tiptap/starter-kit
```
## Included extensions
### Nodes
* [`Blockquote`](/api/nodes/blockquote)
* [`BulletList`](/api/nodes/bullet-list)
* [`CodeBlock`](/api/nodes/code-block)
* [`Document`](/api/nodes/document)
* [`HardBreak`](/api/nodes/hard-break)
* [`Heading`](/api/nodes/heading)
* [`HorizontalRule`](/api/nodes/horizontal-rule)
* [`ListItem`](/api/nodes/list-item)
* [`OrderedList`](/api/nodes/ordered-list)
* [`Paragraph`](/api/nodes/paragraph)
* [`Text`](/api/nodes/text)
### Marks
* [`Bold`](/api/marks/bold)
* [`Code`](/api/marks/code)
* [`Italic`](/api/marks/italic)
* [`Strike`](/api/marks/strike)
### Extensions
* [`Dropcursor`](/api/extensions/dropcursor)
* [`Gapcursor`](/api/extensions/gapcursor)
* [`History`](/api/extensions/history)
## Source code
[packages/starter-kit/](https://github.com/ueberdosis/tiptap/blob/main/packages/starter-kit/)
## Usage
Pass `StarterKit` to the editor to load all included extension at once.
```js
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
const editor = new Editor({
content: '<p>Example Text</p>',
extensions: [
StarterKit,
],
})
```
You can configure the included extensions, or even disable a few of them, like shown below.
```js
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
const editor = new Editor({
content: '<p>Example Text</p>',
extensions: [
StarterKit.configure({
// Disable an included extension
history: false,
// Configure an included extension
heading: {
levels: [1, 2],
},
}),
],
})
```

49
docs/api/extensions/text-align.md Normal file
View File

@@ -0,0 +1,49 @@
# TextAlign
[![Version](https://img.shields.io/npm/v/@tiptap/extension-text-align.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-text-align)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-text-align.svg)](https://npmcharts.com/compare/@tiptap/extension-text-align?minimal=true)
This extension adds a text align attribute to a specified list of nodes. The attribute is used to align the text.
:::warning Firefox bug
`text-align: justify` doesn't work together with `white-space: pre-wrap` in Firefox, [that’s a known issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1253840).
:::
## Installation
```bash
# with npm
npm install @tiptap/extension-text-align
# with Yarn
yarn add @tiptap/extension-text-align
```
## Settings
| Option | Type | Default | Description |
| ---------------- | -------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| types | `Array` | `[]` | A list of nodes where the text align attribute should be applied to. Usually something like `['heading', 'paragraph']`.|
| alignments | `Array` | `['left', 'center', 'right', 'justify']` | A list of available options for the text align attribute. |
| defaultAlignment | `String` | `'left'` | The default text align. |
## Commands
| Command | Parameters | Description |
| --------- | ---------- | ------------------------------------------ |
| textAlign | alignment | Set the text align to the specified value. |
## Keyboard shortcuts
### Windows/Linux
* `Ctrl`&nbsp;`Shift`&nbsp;`L` Left
* `Ctrl`&nbsp;`Shift`&nbsp;`E` Center
* `Ctrl`&nbsp;`Shift`&nbsp;`R` Right
* `Ctrl`&nbsp;`Shift`&nbsp;`J` Justify
### macOS
* `Cmd`&nbsp;`Shift`&nbsp;`L` Left
* `Cmd`&nbsp;`Shift`&nbsp;`E` Center
* `Cmd`&nbsp;`Shift`&nbsp;`R` Right
* `Cmd`&nbsp;`Shift`&nbsp;`J` Justify
## Source code
[packages/extension-text-align/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-align/)
## Usage
<tiptap-demo name="Extensions/TextAlign"></tiptap-demo>

48
docs/api/extensions/typography.md Normal file
View File

@@ -0,0 +1,48 @@
# Typography
[![Version](https://img.shields.io/npm/v/@tiptap/extension-typography.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-typography)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-typography.svg)](https://npmcharts.com/compare/@tiptap/extension-typography?minimal=true)
This extension tries to help with common text patterns with the correct typographic character. Under the hood all rules are input rules.
## Installation
```bash
# with npm
npm install @tiptap/extension-typography
# with Yarn
yarn add @tiptap/extension-typography
```
## Rules
| Name | Description |
| ------------------- | --------------------------------------------------------------------------------------- |
| emDash | Converts double dashes `--` to an emdash `—`. |
| ellipsis | Converts three dots `...` to an ellipsis character `…` |
| openDoubleQuote | `“`Smart” opening double quotes. |
| closeDoubleQuote | “Smart`”` closing double quotes. |
| openSingleQuote | `‘`Smart’ opening single quotes. |
| closeSingleQuote | ‘Smart`’` closing single quotes. |
| leftArrow | Converts <code><&dash;</code> to an arrow `←` . |
| rightArrow | Converts <code>&dash;></code> to an arrow `→`. |
| copyright | Converts `(c)` to a copyright sign `©`. |
| registeredTrademark | Converts `(r)` to registered trademark sign `®`. |
| trademark | Converts `(tm)` to registered trademark sign `™`. |
| oneHalf | Converts `1/2` to one half `½`. |
| oneQuarter | Converts `1/4` to one quarter `¼`. |
| threeQuarters | Converts `3/4` to three quarters `¾`. |
| plusMinus | Converts `+/-` to plus/minus sign `±`. |
| notEqual | Converts <code style="font-variant-ligatures: none;">!=</code> to a not equal sign `≠`. |
| laquo | Converts `<<` to left-pointing double angle quotation mark `«`. |
| raquo | Converts `>>` to right-pointing double angle quotation mark `»`. |
| multiplication | Converts `2 * 3` or `2x3` to a multiplcation sign `2×3`. |
| superscriptTwo | Converts `^2` a superscript two `²`. |
| superscriptThree | Converts `^3` a superscript three `³`. |
## Keyboard shortcuts
* `Backspace` reverts the applied input rule
## Source code
[packages/extension-typography/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-typography/)
## Usage
<tiptap-demo name="Extensions/Typography"></tiptap-demo>

10
docs/api/extensions/unique-id.md Normal file
View File

@@ -0,0 +1,10 @@
# UniqueId
:::pro Pro extension
The UniqueId extension will be the first tiptap pro extension we’ll release on top of all the free extensions. Access to the extension and the documentation will require a tiptap pro subscription.
:::
The `UniqueId` extension adds unique IDs to all nodes. The extension keeps track of your nodes, even if you split them, merge them, undo/redo changes, crop content, paste content … It just works.
Also, you can configure which node types get an unique ID, and which not, and you can customize how those IDs are generated.
We’re preparing everything to release that extension, give us a few more days. If you can’t wait to purchase a tiptap pro license and get access to the extensions, send us an email to [humans@tiptap.dev](mailto:humans@tiptap.dev).