From f24e8f7ee951df96cc3467b264526eb39ac97d80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 17 Nov 2020 21:49:23 +0100
Subject: [PATCH] add italic commands

---
 docs/src/demos/Examples/Basic/index.vue          |  2 +-
 .../Examples/CollaborativeEditing/index.vue      |  2 +-
 .../Examples/CollaborativeEditingWs/index.vue    |  2 +-
 .../demos/Examples/ExportHtmlOrJson/index.vue    |  2 +-
 docs/src/demos/Examples/Formatting/index.vue     |  2 +-
 docs/src/demos/Guide/BuildYourEditor/index.vue   |  2 +-
 docs/src/demos/Marks/Italic/index.vue            |  2 +-
 docs/src/docPages/api/commands.md                |  2 +-
 packages/extension-italic/src/index.ts           | 16 ++++++++++++++--
 9 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/docs/src/demos/Examples/Basic/index.vue b/docs/src/demos/Examples/Basic/index.vue
index 128e4e2e..e3609917 100644
--- a/docs/src/demos/Examples/Basic/index.vue
+++ b/docs/src/demos/Examples/Basic/index.vue
@@ -4,7 +4,7 @@
       <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
         bold
       </button>
-      <button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
         italic
       </button>
       <button @click="editor.chain().focus().strike().run()" :class="{ 'is-active': editor.isActive('strike') }">
diff --git a/docs/src/demos/Examples/CollaborativeEditing/index.vue b/docs/src/demos/Examples/CollaborativeEditing/index.vue
index f584be4b..66882cd9 100644
--- a/docs/src/demos/Examples/CollaborativeEditing/index.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/index.vue
@@ -4,7 +4,7 @@
       <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
         bold
       </button>
-      <button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
         italic
       </button>
       <button @click="editor.chain().focus().strike().run()" :class="{ 'is-active': editor.isActive('strike') }">
diff --git a/docs/src/demos/Examples/CollaborativeEditingWs/index.vue b/docs/src/demos/Examples/CollaborativeEditingWs/index.vue
index 5b2a0159..1769a64d 100644
--- a/docs/src/demos/Examples/CollaborativeEditingWs/index.vue
+++ b/docs/src/demos/Examples/CollaborativeEditingWs/index.vue
@@ -4,7 +4,7 @@
       <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
         bold
       </button>
-      <button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
         italic
       </button>
       <button @click="editor.chain().focus().strike().run()" :class="{ 'is-active': editor.isActive('strike') }">
diff --git a/docs/src/demos/Examples/ExportHtmlOrJson/index.vue b/docs/src/demos/Examples/ExportHtmlOrJson/index.vue
index 80211849..cc17b2d2 100644
--- a/docs/src/demos/Examples/ExportHtmlOrJson/index.vue
+++ b/docs/src/demos/Examples/ExportHtmlOrJson/index.vue
@@ -10,7 +10,7 @@
       <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
         Bold
       </button>
-      <button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
         Italic
       </button>
     </div>
diff --git a/docs/src/demos/Examples/Formatting/index.vue b/docs/src/demos/Examples/Formatting/index.vue
index ec8d48e5..b2ba788f 100644
--- a/docs/src/demos/Examples/Formatting/index.vue
+++ b/docs/src/demos/Examples/Formatting/index.vue
@@ -4,7 +4,7 @@
       <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
         bold
       </button>
-      <button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
         italic
       </button>
       <button @click="editor.chain().focus().heading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
diff --git a/docs/src/demos/Guide/BuildYourEditor/index.vue b/docs/src/demos/Guide/BuildYourEditor/index.vue
index 8bb8f9b8..afd4cbef 100644
--- a/docs/src/demos/Guide/BuildYourEditor/index.vue
+++ b/docs/src/demos/Guide/BuildYourEditor/index.vue
@@ -13,7 +13,7 @@
       <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
         bold
       </button>
-      <button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
         italic
       </button>
       <button @click="editor.chain().focus().heading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
diff --git a/docs/src/demos/Marks/Italic/index.vue b/docs/src/demos/Marks/Italic/index.vue
index c736e023..7a47c219 100644
--- a/docs/src/demos/Marks/Italic/index.vue
+++ b/docs/src/demos/Marks/Italic/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="editor">
-    <button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+    <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
       italic
     </button>
 
diff --git a/docs/src/docPages/api/commands.md b/docs/src/docPages/api/commands.md
index 767ab5af..7302b8fe 100644
--- a/docs/src/docPages/api/commands.md
+++ b/docs/src/docPages/api/commands.md
@@ -63,7 +63,7 @@ editor
   .can()
   .chain()
   .toggleBold()
-  .italic()
+  .toggleItalic()
   .run()
 ```
 
diff --git a/packages/extension-italic/src/index.ts b/packages/extension-italic/src/index.ts
index 9843f65e..3302c4e7 100644
--- a/packages/extension-italic/src/index.ts
+++ b/packages/extension-italic/src/index.ts
@@ -44,18 +44,30 @@ const Italic = Mark.create({
 
   addCommands() {
     return {
+      /**
+       * Set a italic mark
+       */
+      setItalic: (): Command => ({ commands }) => {
+        return commands.addMark('italic')
+      },
       /**
        * Toggle an italic mark
        */
-      italic: (): Command => ({ commands }) => {
+      toggleItalic: (): Command => ({ commands }) => {
         return commands.toggleMark('italic')
       },
+      /**
+       * Set a italic mark
+       */
+      unsetItalic: (): Command => ({ commands }) => {
+        return commands.addMark('italic')
+      },
     }
   },
 
   addKeyboardShortcuts() {
     return {
-      'Mod-i': () => this.editor.commands.italic(),
+      'Mod-i': () => this.editor.commands.toggleItalic(),
     }
   },