improve extensions documentation, add italic documentation

docs/src/demos/Extensions/Italic/index.vue

@@ -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>

docs/src/docPages/api/extensions/blockquote.md

@@ -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` + `→`

docs/src/docPages/api/extensions/bold.md

@@ -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" />

docs/src/docPages/api/extensions/bullet-list.md

@@ -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`

docs/src/docPages/api/extensions/code.md

@@ -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` + `

docs/src/docPages/api/extensions/history.md

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

docs/src/docPages/api/extensions/horizontal-rule.md

@@ -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*

docs/src/docPages/api/extensions/italic.md

@@ -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
+<Demo name="Extensions/Italic" highlight="3-5,17,36" />
-<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>
-```

docs/src/docPages/api/extensions/ordered-list.md

@@ -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`

docs/src/docPages/api/extensions/placeholder.md

@@ -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 |
+| deleteTable | — | Deletes the complete table which is active |
-| addColumnBefore | none | Add a column before the selection. |
+| addColumnBefore | — | Add a column before the selection. |
-| addColumnAfter | none | Add a column after the selection. |
+| addColumnAfter | — | Add a column after the selection. |
-| deleteColumn | none | Removes the selected columns. |
+| deleteColumn | — | Removes the selected columns. |
-| addRowBefore | none | Add a table row before the selection. |
+| addRowBefore | — | Add a table row before the selection. |
-| addRowAfter | none | Add a table row after the selection. |
+| addRowAfter | — | Add a table row after the selection. |
-| toggleCellMerge | none | See mergeCells and splitCells |
+| toggleCellMerge | — | See mergeCells and splitCells |
-| mergeCells | none | Merge the selected cells into a single cell. Only available when the selected cells' outline forms a rectangle. |
+| mergeCells | — | 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. |
+| splitCell | — | 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. |
+| toggleHeaderColumn | — | Toggles whether the selected column contains header cells. |
-| toggleHeaderRow | none | Toggles whether the selected row contains header cells. |
+| toggleHeaderRow | — | Toggles whether the selected row contains header cells. |
-| toggleHeaderCell | none | Toggles whether the selected column contains header cells. |
+| toggleHeaderCell | — | 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. |
+| 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 | none | Inspect all tables in the given state's document and return a transaction that fixes them, if necessary. |
+| fixTables | — | Inspect all tables in the given state's document and return a transaction that fixes them, if necessary. |
 
 ## Usage
 ::: warning

docs/src/docPages/api/extensions/strike.md

@@ -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`

docs/src/docPages/api/extensions/todo-list.md

@@ -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*

docs/src/docPages/api/extensions/underline.md

@@ -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`