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

improve extensions documentation, add italic documentation

Browse Source
This commit is contained in:
Hans Pagel
2020-08-20 21:25:15 +02:00
parent 672fe2beab
commit ecd95b8c71
13 changed files with 90 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
docs/src/demos/Extensions/Italic/index.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<div v-if="editor">
<button @click="editor.focus().italic()" :class="{ 'is-active': editor.isActive('italic') }">
italic
</button>
<editor-content :editor="editor" />
</div>
</template>
<script>
import { Editor } from '@tiptap/core'
import { EditorContent } from '@tiptap/vue'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Italic from '@tiptap/extension-italic'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
new Document(),
new Paragraph(),
new Text(),
new Italic(),
],
content: `
<p>This isn’t italic.</p>
<p><em>This is italic.</em></p>
<p><i>And this.</i></p>
<p style="font-style: italic">This as well.</p>
`,
})
},
beforeDestroy() {
this.editor.destroy()
}
}
</script>

2
docs/src/docPages/api/extensions/blockquote.md
View File

@@ -7,7 +7,7 @@ The Blockquote extension enables you to use the `<blockquote>` HTML tag in the e
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| blockquote | none | Wrap content in a blockquote. |
| blockquote | — | Wrap content in a blockquote. |
## Keybindings
* `Control` + `→`

11
docs/src/docPages/api/extensions/bold.md
View File

@@ -2,7 +2,7 @@
This extension is used to render text in **bold**. If you pass `<strong>`, `<b>` tags, or text with inline `style` attributes setting the `font-weight` CSS rule in the editor’s initial content, they will all be rendered accordingly.
::: warning Restrictions
The extension will generate the corresponding `<strong>` HTML tags when reading contents of the `Editor` instance. All text marked as bold, regardless of the method will be normalized to `<strong>` HTML tags.
The extension will generate the corresponding `<strong>` HTML tags when reading contents of the `Editor` instance. All text marked bold, regardless of the method will be normalized to `<strong>` HTML tags.
:::
## Options
@@ -11,15 +11,14 @@ The extension will generate the corresponding `<strong>` HTML tags when reading
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| bold | none | Mark text as bold. |
| bold | — | Mark text bold. |
## Keybindings
* Windows & Linux: `Control` + `B`
* macOS: `Command` + `B`
## Usage
<Demo name="Extensions/Bold" />
## Source Code
[packages/extension-bold/index.ts](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/index.ts)
## Usage
<Demo name="Extensions/Bold" highlight="3-5,17,36" />

2
docs/src/docPages/api/extensions/bullet-list.md
View File

@@ -11,7 +11,7 @@ It’s intended to be used with the `ListItem` extension.
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| bullet_list | none | Toggle a bullet list. |
| bullet_list | — | Toggle a bullet list. |
## Keybindings
* `Control` + `Shift` + `8`

2
docs/src/docPages/api/extensions/code.md
View File

@@ -7,7 +7,7 @@ The Code extensions enables you to use the `<code>` HTML tag in the editor.
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| code | none | Mark text as code. |
| code | — | Mark text as code. |
## Keybindings
* `Alt` + `

4
docs/src/docPages/api/extensions/history.md
View File

@@ -4,8 +4,8 @@ Enables history support.
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| undo | none | Undo the latest change. |
| redo | none | Redo the latest change. |
| undo | — | Undo the latest change. |
| redo | — | Redo the latest change. |
## Keybindings
* Windows & Linux: `Control` + `Z` → Undo

2
docs/src/docPages/api/extensions/horizontal-rule.md
View File

@@ -7,7 +7,7 @@ Enables you to use the `<hr>` HTML tag in the editor.
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| horizontal_rule | none | Create a horizontal rule. |
| horizontal_rule | — | Create a horizontal rule. |
## Keybindings
*None*

54
docs/src/docPages/api/extensions/italic.md
View File

@@ -1,5 +1,9 @@
# Italic
Enables you to use the `<em>` HTML tag in the editor.
This extension is used to render text in *italic*. If you pass `<em>`, `<i>` tags, or text with inline `style` attributes setting `font-style: italic` in the editor’s initial content, they will all be rendered accordingly.
::: warning Restrictions
The extension will generate the corresponding `<em>` HTML tags when reading contents of the `Editor` instance. All text marked italic, regardless of the method will be normalized to `<em>` HTML tags.
:::
## Options
*None*
@@ -7,52 +11,14 @@ Enables you to use the `<em>` HTML tag in the editor.
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| italic | none | Mark text as italic. |
| italic | — | Mark text italic. |
## Keybindings
* Windows & Linux: `Control` + `I`
* macOS: `Command` + `I`
## Source Code
[packages/extension-italic/index.ts](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/index.ts)
## Usage
```markup
<template>
<div>
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
<button type="button" :class="{ 'is-active': isActive.italic() }" @click="commands.italic">
Italic
</button>
</editor-menu-bar>
<editor-content :editor="editor" />
</div>
</template>
<script>
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
import { Italic } from 'tiptap-extensions'
export default {
components: {
EditorMenuBar,
EditorContent,
},
data() {
return {
editor: new Editor({
extensions: [
new Italic(),
],
content: `
<p><em>This is italic</em></p>
<p><i>And this</i></p>
<p style="font-style: italic">This as well</p>
`,
}),
}
},
beforeDestroy() {
this.editor.destroy()
}
}
</script>
```
<Demo name="Extensions/Italic" highlight="3-5,17,36" />

2
docs/src/docPages/api/extensions/ordered-list.md
View File

@@ -11,7 +11,7 @@ This extensions is intended to be used with the `ListItem` extension.
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| ordered_list | none | Toggle an ordered list. |
| ordered_list | — | Toggle an ordered list. |
## Keybindings
* `Control` + `Shift` + `9`

28
docs/src/docPages/api/extensions/placeholder.md
View File

@@ -19,20 +19,20 @@ Each `<TableCell>` includes a single `<Paragraph>`.
| Command | Options | Description |
| ------ | ---- | ---------------- |
| createTable | ```{ rowsCount, colsCount, withHeaderRow }``` | Returns a table node of a given size. `withHeaderRow` defines whether the first row of the table will be a header row. |
| deleteTable | none | Deletes the complete table which is active |
| addColumnBefore | none | Add a column before the selection. |
| addColumnAfter | none | Add a column after the selection. |
| deleteColumn | none | Removes the selected columns. |
| addRowBefore | none | Add a table row before the selection. |
| addRowAfter | none | Add a table row after the selection. |
| toggleCellMerge | none | See mergeCells and splitCells |
| mergeCells | none | Merge the selected cells into a single cell. Only available when the selected cells' outline forms a rectangle. |
| splitCell | none | Split a selected cell, whose rowspan or colspan is greater than one into smaller cells. |
| toggleHeaderColumn | none | Toggles whether the selected column contains header cells. |
| toggleHeaderRow | none | Toggles whether the selected row contains header cells. |
| toggleHeaderCell | none | Toggles whether the selected column contains header cells. |
| setCellAttr | none | Returns a command that sets the given attribute to the given value, and is only available when the currently selected cell doesn't already have that attribute set to that value. |
| fixTables | none | Inspect all tables in the given state's document and return a transaction that fixes them, if necessary. |
| deleteTable | — | Deletes the complete table which is active |
| addColumnBefore | — | Add a column before the selection. |
| addColumnAfter | — | Add a column after the selection. |
| deleteColumn | — | Removes the selected columns. |
| addRowBefore | — | Add a table row before the selection. |
| addRowAfter | — | Add a table row after the selection. |
| toggleCellMerge | — | See mergeCells and splitCells |
| mergeCells | — | Merge the selected cells into a single cell. Only available when the selected cells' outline forms a rectangle. |
| splitCell | — | Split a selected cell, whose rowspan or colspan is greater than one into smaller cells. |
| toggleHeaderColumn | — | Toggles whether the selected column contains header cells. |
| toggleHeaderRow | — | Toggles whether the selected row contains header cells. |
| toggleHeaderCell | — | Toggles whether the selected column contains header cells. |
| setCellAttr | — | Returns a command that sets the given attribute to the given value, and is only available when the currently selected cell doesn't already have that attribute set to that value. |
| fixTables | — | Inspect all tables in the given state's document and return a transaction that fixes them, if necessary. |
## Usage
::: warning

2
docs/src/docPages/api/extensions/strike.md
View File

@@ -7,7 +7,7 @@ Enables you to use the `<s>` HTML tag in the editor.
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| strike | none | Mark text as strikethrough. |
| strike | — | Mark text as strikethrough. |
## Keybindings
* Windows & Linux: `Control` + `D`

2
docs/src/docPages/api/extensions/todo-list.md
View File

@@ -11,7 +11,7 @@ This extensions is intended to be used with the `TodoItem` extension.
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| todo_list | none | Toggle todo list. |
| todo_list | — | Toggle todo list. |
## Keybindings
*None*

2
docs/src/docPages/api/extensions/underline.md
View File

@@ -7,7 +7,7 @@ Enables you to use the `<u>` HTML tag in the editor.
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| underline | none | Mark text as underlined. |
| underline | — | Mark text as underlined. |
## Keybindings
* Windows & Linux: `Control` + `U`