add italic

packages/extension-italic/index.ts

@@ -0,0 +1,26 @@
+import { Mark } from '@tiptap/core'
+import { toggleMark } from 'prosemirror-commands'
+
+export default class Italic extends Mark {
+
+  name = 'italic'
+
+  created() {
+    this.editor.registerCommand('italic', (next, { view }) => {
+      toggleMark(this.schemaType)(view.state, view.dispatch)
+      next()
+    })
+  }
+
+  schema() {
+    return {
+      parseDOM: [
+        { tag: 'i' },
+        { tag: 'em' },
+        { style: 'font-style=italic' },
+      ],
+      toDOM: () => ['em', 0],
+    }
+  }
+
+}

packages/extension-italic/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@tiptap/extension-italic",
+  "version": "1.0.0",
+  "source": "index.ts",
+  "main": "dist/tiptap-extension-italic.js",
+  "umd:main": "dist/tiptap-extension-italic.umd.js",
+  "module": "dist/tiptap-extension-italic.mjs", 
+  "unpkg": "dist/tiptap-extension-italic.js",
+  "jsdelivr": "dist/tiptap-extension-italic.js",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "2.x"
+  }
+}

src/demos/HandleExtensions/index.vue

@@ -10,6 +10,9 @@
       <button @click="editor.bold().focus()" :class="{ 'is-active': editor.isActive.bold() }">
         bold
       </button>
+      <button @click="editor.italic().focus()" :class="{ 'is-active': editor.isActive.italic() }">
+        italic
+      </button>
     </div>
     <editor-content :editor="editor" />
   </div>
@@ -23,6 +26,7 @@ import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import History from '@tiptap/extension-history'
 import Bold from '@tiptap/extension-bold'
+import Italic from '@tiptap/extension-italic'
 
 export default {
   components: {
@@ -44,6 +48,7 @@ export default {
         new Text(),
         new History(),
         new Bold(),
+        new Italic(),
       ],
     })
   },