mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-11-28 07:40:13 +08:00
docs: make all node commands a list
This commit is contained in:
Hans Pagel
parent
2fccba79cb
commit
4487fb0d75
@ -25,7 +25,7 @@ yarn add @tiptap/extension-bold
|
||||
Custom HTML attributes that should be added to the rendered HTML tag.
|
||||
|
||||
```js
|
||||
Blockquote.configure({
|
||||
Bold.configure({
|
||||
HTMLAttributes: {
|
||||
class: 'my-custom-class',
|
||||
},
|
||||
|
||||
@ -31,9 +31,13 @@ BulletList.configure({
|
||||
```
|
||||
|
||||
## Commands
|
||||
| Command | Parameters | Description |
|
||||
| ---------- | ---------- | --------------------- |
|
||||
| bulletList | — | Toggle a bullet list. |
|
||||
|
||||
### toggleBulletList()
|
||||
Toggles a bullet list.
|
||||
|
||||
```js
|
||||
editor.commands.toggleBulletList()
|
||||
```
|
||||
|
||||
## Keyboard shortcuts
|
||||
| Command | Windows/Linux | macOS |
|
||||
|
||||
@ -22,9 +22,20 @@ yarn add @tiptap/extension-code-block-lowlight
|
||||
| languageClassPrefix | `String` | `'language-'` | Adds a prefix to language classes that are applied to code tags. |
|
||||
|
||||
## Commands
|
||||
| Command | Parameters | Description |
|
||||
| --------- | ---------- | ----------------------------- |
|
||||
| codeBlock | — | Wrap content in a code block. |
|
||||
|
||||
### setCodeBlock()
|
||||
Wrap content in a code block.
|
||||
|
||||
```js
|
||||
editor.commands.setCodeBlock()
|
||||
```
|
||||
|
||||
### toggleCodeBlock()
|
||||
Toggle the code block.
|
||||
|
||||
```js
|
||||
editor.commands.toggleCodeBlock()
|
||||
```
|
||||
|
||||
## Keyboard shortcuts
|
||||
| Command | Windows/Linux | macOS |
|
||||
|
||||
@ -26,9 +26,20 @@ yarn add @tiptap/extension-code-block
|
||||
| languageClassPrefix | `String` | `'language-'` | Adds a prefix to language classes that are applied to code tags. |
|
||||
|
||||
## Commands
|
||||
| Command | Parameters | Description |
|
||||
| --------- | ---------- | ----------------------------- |
|
||||
| codeBlock | — | Wrap content in a code block. |
|
||||
|
||||
### setCodeBlock()
|
||||
Wrap content in a code block.
|
||||
|
||||
```js
|
||||
editor.commands.setCodeBlock()
|
||||
```
|
||||
|
||||
### toggleCodeBlock()
|
||||
Toggle the code block.
|
||||
|
||||
```js
|
||||
editor.commands.toggleCodeBlock()
|
||||
```
|
||||
|
||||
## Keyboard shortcuts
|
||||
| Command | Windows/Linux | macOS |
|
||||
|
||||
@ -20,9 +20,13 @@ yarn add @tiptap/extension-hard-break
|
||||
| keepMarks | `Boolean` | `true` | Decides whether to keep marks after a line break. Based on the `keepOnSplit` option for marks. |
|
||||
|
||||
## Commands
|
||||
| Command | Parameters | Description |
|
||||
| ------------ | ---------- | ----------------- |
|
||||
| setHardBreak | — | Add a line break. |
|
||||
|
||||
### setHardBreak()
|
||||
Add a line break.
|
||||
|
||||
```js
|
||||
editor.commands.setHeardBreak()
|
||||
```
|
||||
|
||||
## Keyboard shortcuts
|
||||
| Command | Windows/Linux | macOS |
|
||||
|
||||
@ -22,9 +22,20 @@ yarn add @tiptap/extension-heading
|
||||
| levels | `Array` | `[1, 2, 3, 4, 5, 6]` | Specifies which heading levels are supported. |
|
||||
|
||||
## Commands
|
||||
| Command | Parameters | Description |
|
||||
| ------- | ---------- | ------------------------------------------------ |
|
||||
| heading | level | Creates a heading node with the specified level. |
|
||||
|
||||
### setHeading()
|
||||
Creates a heading node with the specified level.
|
||||
|
||||
```js
|
||||
editor.commands.setHeading({ level: 1 })
|
||||
```
|
||||
|
||||
### toggleHeading()
|
||||
Toggles a heading node with the specified level.
|
||||
|
||||
```js
|
||||
editor.commands.toggleHeading({ level: 1 })
|
||||
```
|
||||
|
||||
## Keyboard shortcuts
|
||||
| Command | Windows/Linux | macOS |
|
||||
|
||||
@ -29,9 +29,13 @@ HorizontalRule.configure({
|
||||
```
|
||||
|
||||
## Commands
|
||||
| Command | Parameters | Description |
|
||||
| -------------- | ---------- | ------------------------- |
|
||||
| horizontalRule | — | Create a horizontal rule. |
|
||||
|
||||
### setHorizontalRule()
|
||||
Create a horizontal rule.
|
||||
|
||||
```js
|
||||
editor.commands.setHorizontalRule()
|
||||
```
|
||||
|
||||
## Source code
|
||||
[packages/extension-horizontal-rule/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-horizontal-rule/)
|
||||
|
||||
@ -23,6 +23,16 @@ yarn add @tiptap/extension-image
|
||||
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
|
||||
| inline | `Boolean` | `false` | Renders the image node inline. |
|
||||
|
||||
## Commands
|
||||
|
||||
### setImage()
|
||||
Makes the current node an image.
|
||||
|
||||
```js
|
||||
editor.commands.setImage({ src: 'https://example.com/foobar.png')
|
||||
editor.commands.setImage({ src: 'https://example.com/foobar.png', alt: 'A boring example image', title: 'An example' })
|
||||
```
|
||||
|
||||
## Source code
|
||||
[packages/extension-image/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-image/)
|
||||
|
||||
|
||||
@ -51,7 +51,6 @@ new VueRenderer(MentionList, {
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
And yes, we plan to support React, too. Meanwhile, you can roll your own `ReactRenderer`, but don’t forget to share it with the community.
|
||||
|
||||
It’s also possible to use Vanilla JavaScript, but that is probably a lot more work.
|
||||
|
||||
@ -31,9 +31,13 @@ OrderedList.configure({
|
||||
```
|
||||
|
||||
## Commands
|
||||
| Command | Parameters | Description |
|
||||
| ----------- | ---------- | ----------------------- |
|
||||
| orderedList | — | Toggle an ordered list. |
|
||||
|
||||
### toggleOrderedList()
|
||||
Toggle an ordered list.
|
||||
|
||||
```js
|
||||
editor.commands.toggleOrderedList()
|
||||
```
|
||||
|
||||
## Keyboard shortcuts
|
||||
| Command | Windows/Linux | macOS |
|
||||
|
||||
@ -31,9 +31,13 @@ Paragraph.configure({
|
||||
```
|
||||
|
||||
## Commands
|
||||
| Command | Parameters | Description |
|
||||
| --------- | ---------- | -------------------------------------------- |
|
||||
| paragraph | — | Transforms all selected nodes to paragraphs. |
|
||||
|
||||
### setParagraph()
|
||||
Transforms all selected nodes to paragraphs.
|
||||
|
||||
```js
|
||||
editor.commands.setParagraph()
|
||||
```
|
||||
|
||||
## Keyboard shortcuts
|
||||
| Command | Windows/Linux | macOS |
|
||||
|
||||
@ -1,4 +1,10 @@
|
||||
---
|
||||
tableOfContents: true
|
||||
---
|
||||
|
||||
# Table
|
||||
|
||||
## Introduction
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-table)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-table?minimal=true)
|
||||
|
||||
@ -29,26 +35,134 @@ This extension requires the [`TableRow`](/api/nodes/table-row), [`TableHeader`](
|
||||
| allowTableNodeSelection | `Boolean` | `false` | |
|
||||
|
||||
## Commands
|
||||
| Command | Parameters | Description |
|
||||
| ------------------ | ---------------------------------------------- | ----------- |
|
||||
| insertTable | `{ rows = 3, cols = 3, withHeaderRow = true }` | |
|
||||
| addColumnBefore | – | |
|
||||
| addColumnAfter | – | |
|
||||
| deleteColumn | – | |
|
||||
| addRowBefore | – | |
|
||||
| addRowAfter | – | |
|
||||
| deleteRow | – | |
|
||||
| deleteTable | – | |
|
||||
| mergeCells | – | |
|
||||
| splitCell | – | |
|
||||
| toggleHeaderColumn | – | |
|
||||
| toggleHeaderRow | – | |
|
||||
| toggleHeaderCell | – | |
|
||||
| mergeOrSplit | – | |
|
||||
| setCellAttribute | `name`, `value` | |
|
||||
| goToNextCell | – | |
|
||||
| goToPreviousCell | – | |
|
||||
| fixTables | – | |
|
||||
|
||||
### insertTable()
|
||||
Creates a new table, with the specified number of rows and columns, and with a header row (if you tell it to).
|
||||
|
||||
```js
|
||||
editor.commands.insertTable()
|
||||
editor.commands.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
|
||||
```
|
||||
|
||||
### addColumnBefore()
|
||||
Adds a column before the current column.
|
||||
|
||||
```js
|
||||
editor.commands.addColumnBefore()
|
||||
```
|
||||
|
||||
### addColumnAfter()
|
||||
Adds a column after the current column.
|
||||
|
||||
```js
|
||||
editor.commands.addColumnAfter()
|
||||
```
|
||||
|
||||
### deleteColumn()
|
||||
Deletes the current column.
|
||||
|
||||
```js
|
||||
editor.commands.deleteColumn()
|
||||
```
|
||||
|
||||
### addRowBefore()
|
||||
Adds a row above the current row.
|
||||
|
||||
```js
|
||||
editor.commands.addRowBefore()
|
||||
```
|
||||
|
||||
### addRowAfter()
|
||||
Adds a row below the current row.
|
||||
|
||||
```js
|
||||
editor.commands.addRowAfter()
|
||||
```
|
||||
|
||||
### deleteRow()
|
||||
Deletes the current row.
|
||||
|
||||
```js
|
||||
editor.commands.deleteRow()
|
||||
```
|
||||
|
||||
### deleteTable()
|
||||
Deletes the whole table.
|
||||
|
||||
```js
|
||||
editor.commands.deleteTable()
|
||||
```
|
||||
|
||||
### mergeCells()
|
||||
Merge all selected cells to a single cell.
|
||||
|
||||
```js
|
||||
editor.commands.mergeCells()
|
||||
```
|
||||
|
||||
### splitCell()
|
||||
Splits the current cell.
|
||||
|
||||
```js
|
||||
editor.commands.splitCell()
|
||||
```
|
||||
|
||||
### toggleHeaderColumn()
|
||||
Makes the current column a header column.
|
||||
|
||||
```js
|
||||
editor.commands.toggleHeaderColumn()
|
||||
```
|
||||
|
||||
### toggleHeaderRow()
|
||||
Makes the current row a header row.
|
||||
|
||||
```js
|
||||
editor.commands.toggleHeaderRow()
|
||||
```
|
||||
|
||||
### toggleHeaderCell()
|
||||
Makes the current cell a header cell.
|
||||
|
||||
```js
|
||||
editor.commands.toggleHeaderCell()
|
||||
```
|
||||
|
||||
### mergeOrSplit()
|
||||
If multiple cells are selected, they are merged. If a single cell is selected, the cell is splitted into two cells.
|
||||
|
||||
```js
|
||||
editor.commands.mergeOrSplit()
|
||||
```
|
||||
|
||||
### setCellAttribute()
|
||||
Sets the given attribute for the current cell. Can be whatever you define on the [`TableCell`](/api/nodes/table-cell) extension, for example a background color. Just make sure to register [your custom attribute](/guide/custom-extensions#attributes) first.
|
||||
|
||||
```js
|
||||
editor.commands.setCellAttribute('customAttribute', 'value')
|
||||
editor.commands.setCellAttribute('backgroundColor', '#000')
|
||||
```
|
||||
|
||||
### goToNextCell()
|
||||
Go the next cell.
|
||||
|
||||
```js
|
||||
editor.commands.goToNextCell()
|
||||
```
|
||||
|
||||
### goToPreviousCell()
|
||||
Go to the previous cell.
|
||||
|
||||
```js
|
||||
editor.commands.goToPreviousCell()
|
||||
```
|
||||
|
||||
### fixTables()
|
||||
Inspects all tables in the document and fixes them, if necessary.
|
||||
|
||||
```js
|
||||
editor.commands.fixTables()
|
||||
```
|
||||
|
||||
## Source code
|
||||
[packages/extension-table/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table/)
|
||||
|
||||
@ -31,9 +31,13 @@ TaskList.configure({
|
||||
```
|
||||
|
||||
## Commands
|
||||
| Command | Parameters | Description |
|
||||
| -------- | ---------- | ------------------- |
|
||||
| taskList | — | Toggle a task list. |
|
||||
|
||||
# toggleTaskList()
|
||||
Toggle a task list.
|
||||
|
||||
```js
|
||||
editor.commands.toggleTaskList()
|
||||
```
|
||||
|
||||
## Keyboard shortcuts
|
||||
| Command | Windows/Linux | macOS |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user