add bold commands

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') }">

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') }">

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') }">

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') }">

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') }">

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') }">

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>
 

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>

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>

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()
 ```

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.
 

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

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(),
     }
   },