From 3349ebf08151a7f1c7e708562d51ed5d6a73e1b9 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:47:39 +0100
Subject: [PATCH] add bold 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/Bold/index.vue              |  2 +-
 docs/src/demos/React/index.jsx                   |  2 +-
 docs/src/demos/SimpleMenuBar/index.vue           |  2 +-
 docs/src/docPages/api/commands.md                |  8 ++++----
 docs/src/docPages/guide/create-your-editor.md    |  2 +-
 docs/src/docPages/overview/upgrade-guide.md      |  4 ++--
 packages/extension-bold/src/index.ts             | 16 ++++++++++++++--
 13 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/docs/src/demos/Examples/Basic/index.vue b/docs/src/demos/Examples/Basic/index.vue
index 6bcbf6b5..128e4e2e 100644
--- a/docs/src/demos/Examples/Basic/index.vue
+++ b/docs/src/demos/Examples/Basic/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-if="editor">
-      <button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+      <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') }">
diff --git a/docs/src/demos/Examples/CollaborativeEditing/index.vue b/docs/src/demos/Examples/CollaborativeEditing/index.vue
index 486fdcf7..f584be4b 100644
--- a/docs/src/demos/Examples/CollaborativeEditing/index.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-if="editor">
-      <button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+      <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') }">
diff --git a/docs/src/demos/Examples/CollaborativeEditingWs/index.vue b/docs/src/demos/Examples/CollaborativeEditingWs/index.vue
index acedbb82..5b2a0159 100644
--- a/docs/src/demos/Examples/CollaborativeEditingWs/index.vue
+++ b/docs/src/demos/Examples/CollaborativeEditingWs/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-if="editor">
-      <button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+      <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') }">
diff --git a/docs/src/demos/Examples/ExportHtmlOrJson/index.vue b/docs/src/demos/Examples/ExportHtmlOrJson/index.vue
index e7c2ccb6..80211849 100644
--- a/docs/src/demos/Examples/ExportHtmlOrJson/index.vue
+++ b/docs/src/demos/Examples/ExportHtmlOrJson/index.vue
@@ -7,7 +7,7 @@
       <button class="button" @click="clearContent">
         Clear Content
       </button>
-      <button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+      <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') }">
diff --git a/docs/src/demos/Examples/Formatting/index.vue b/docs/src/demos/Examples/Formatting/index.vue
index 4d628f42..ec8d48e5 100644
--- a/docs/src/demos/Examples/Formatting/index.vue
+++ b/docs/src/demos/Examples/Formatting/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-if="editor">
-      <button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+      <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') }">
diff --git a/docs/src/demos/Guide/BuildYourEditor/index.vue b/docs/src/demos/Guide/BuildYourEditor/index.vue
index 5229d4c9..8bb8f9b8 100644
--- a/docs/src/demos/Guide/BuildYourEditor/index.vue
+++ b/docs/src/demos/Guide/BuildYourEditor/index.vue
@@ -10,7 +10,7 @@
       <button @click="editor.chain().focus().redo().run()">
         redo
       </button>
-      <button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+      <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') }">
diff --git a/docs/src/demos/Marks/Bold/index.vue b/docs/src/demos/Marks/Bold/index.vue
index 4639ece4..f99e514d 100644
--- a/docs/src/demos/Marks/Bold/index.vue
+++ b/docs/src/demos/Marks/Bold/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="editor">
-    <button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+    <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
       bold
     </button>
 
diff --git a/docs/src/demos/React/index.jsx b/docs/src/demos/React/index.jsx
index 44a8d68b..47f4c50b 100644
--- a/docs/src/demos/React/index.jsx
+++ b/docs/src/demos/React/index.jsx
@@ -14,7 +14,7 @@ const MenuBar = () => {
       </button>
       <button
         className={`${editor.isActive('bold') ? 'is-active' : ''}`}
-        onClick={() => editor.chain().focus().bold().run()}
+        onClick={() => editor.chain().focus().toggleBold().run()}
       >
         Bold
       </button>
diff --git a/docs/src/demos/SimpleMenuBar/index.vue b/docs/src/demos/SimpleMenuBar/index.vue
index 030bc756..c6c3c025 100644
--- a/docs/src/demos/SimpleMenuBar/index.vue
+++ b/docs/src/demos/SimpleMenuBar/index.vue
@@ -5,7 +5,7 @@
       <button
         class="menubar__button"
         :class="{ 'is-active': editor.isActive('bold') }"
-        @click="editor.chain().focus().bold().run()"
+        @click="editor.chain().focus().toggleBold().run()"
       >
         Bold
       </button>
diff --git a/docs/src/docPages/api/commands.md b/docs/src/docPages/api/commands.md
index 579a966e..767ab5af 100644
--- a/docs/src/docPages/api/commands.md
+++ b/docs/src/docPages/api/commands.md
@@ -9,7 +9,7 @@ The editor provides a ton of commands to programmtically add or change content o
 All available commands are accessible through an editor instance. Let’s say you want to make text bold when a user clicks on a button. That’s how that would look like:
 
 ```js
-editor.commands.bold()
+editor.commands.toggleBold()
 ```
 
 While that’s perfectly fine and does make the selected bold, you’d likely want to change multiple commands in one run. Let’s have a look at how that works.
@@ -21,7 +21,7 @@ Most commands can be combined to one call. That’s shorter than separate functi
 editor
   .chain()
   .focus()
-  .bold()
+  .toggleBold()
   .run()
 ```
 
@@ -53,7 +53,7 @@ Sometimes, you don’t want to actually run the commands, but only know if it wo
 ```js
 editor
   .can()
-  .bold()
+  .toggleBold()
 ```
 
 And you can use it together with `.chain()`, too. Here is an example which checks if it’s possible to apply all the commands:
@@ -62,7 +62,7 @@ And you can use it together with `.chain()`, too. Here is an example which check
 editor
   .can()
   .chain()
-  .bold()
+  .toggleBold()
   .italic()
   .run()
 ```
diff --git a/docs/src/docPages/guide/create-your-editor.md b/docs/src/docPages/guide/create-your-editor.md
index 6987443c..3f0f831a 100644
--- a/docs/src/docPages/guide/create-your-editor.md
+++ b/docs/src/docPages/guide/create-your-editor.md
@@ -10,7 +10,7 @@ Let’s start to add your first button to the editor. Once initiated the editor
 
 <demo name="SimpleMenuBar" highlight="5-11" />
 
-To mark selected text bold we can use `editor.commands.bold()`. There a ton of other commands and you can even chain them to do multiple things at once.
+To mark selected text bold we can use `editor.commands.toggleBold()`. There a ton of other commands and you can even chain them to do multiple things at once.
 
 You might wonder what features tiptap supports out of the box. In the above example we added the `@tiptap/starter-kit`. That already includes support for paragraphs, text, bold, italic, inline code and code blocks. There are a lot more, but you have to explicitly import them. You will learn how that works in the next example.
 
diff --git a/docs/src/docPages/overview/upgrade-guide.md b/docs/src/docPages/overview/upgrade-guide.md
index 6c24f5ef..d58c8944 100644
--- a/docs/src/docPages/overview/upgrade-guide.md
+++ b/docs/src/docPages/overview/upgrade-guide.md
@@ -91,7 +91,7 @@ Read more about [all the nifty details building custom extensions](/guide/build-
 Most commands can be combined to one call now. That’s shorter than separate function calls in most cases. Here is an example to make the selected text bold:
 
 ```js
-editor.chain().bold().focus().run()
+editor.chain().toggleBold().focus().run()
 ```
 
 The `.chain()` is required to start a new chain and the `.run()` is needed to actually execute all the commands in between. Read more about [the new tiptap commands](/api/commands) in our API documentation.
@@ -102,7 +102,7 @@ We tried to hide the `.focus()` command from you with tiptap 1 and executed that
 With tiptap 2.x you have to explicitly call the `focus()` and you probably want to do that in a lot of places. Here is an example:
 
 ```js
-editor.chain().focus().bold().run()
+editor.chain().focus().toggleBold().run()
 ```
 
 ### Collaborative editing
diff --git a/packages/extension-bold/src/index.ts b/packages/extension-bold/src/index.ts
index 64ff675e..ce83dc5f 100644
--- a/packages/extension-bold/src/index.ts
+++ b/packages/extension-bold/src/index.ts
@@ -42,18 +42,30 @@ const Bold = Mark.create({
 
   addCommands() {
     return {
+      /**
+       * Set a bold mark
+       */
+      setBold: (): Command => ({ commands }) => {
+        return commands.addMark('bold')
+      },
       /**
        * Toggle a bold mark
        */
-      bold: (): Command => ({ commands }) => {
+      toggleBold: (): Command => ({ commands }) => {
         return commands.toggleMark('bold')
       },
+      /**
+       * Unset a bold mark
+       */
+      unsetBold: (): Command => ({ commands }) => {
+        return commands.removeMark('bold')
+      },
     }
   },
 
   addKeyboardShortcuts() {
     return {
-      'Mod-b': () => this.editor.commands.bold(),
+      'Mod-b': () => this.editor.commands.toggleBold(),
     }
   },