From 021d911ad626a96c68504a99b2575eff1951a946 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Mon, 5 Oct 2020 16:17:31 +0200
Subject: [PATCH] add color parameter to highlight command

---
 docs/src/demos/Extensions/Highlight/index.vue | 19 +++++++++++++++++--
 packages/core/src/commands/toggleMark.ts      |  6 +++---
 packages/extension-highlight/index.ts         |  4 ++--
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/docs/src/demos/Extensions/Highlight/index.vue b/docs/src/demos/Extensions/Highlight/index.vue
index bf881cd4..d397aa68 100644
--- a/docs/src/demos/Extensions/Highlight/index.vue
+++ b/docs/src/demos/Extensions/Highlight/index.vue
@@ -1,7 +1,22 @@
 <template>
   <div v-if="editor">
     <button @click="editor.chain().focus().highlight().run()" :class="{ 'is-active': editor.isActive('highlight') }">
-      highlight
+      highlight (default)
+    </button>
+    <button @click="editor.chain().focus().highlight({ color: 'red' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'red' }) }">
+      red
+    </button>
+    <button @click="editor.chain().focus().highlight({ color: 'orange' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'orange' }) }">
+      orange
+    </button>
+    <button @click="editor.chain().focus().highlight({ color: 'green' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'green' }) }">
+      green
+    </button>
+    <button @click="editor.chain().focus().highlight({ color: 'blue' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'blue' }) }">
+      blue
+    </button>
+    <button @click="editor.chain().focus().highlight({ color: 'purple' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'purple' }) }">
+      purple
     </button>
 
     <editor-content :editor="editor" />
@@ -37,7 +52,7 @@ export default {
       ],
       content: `
           <p>This isn’t highlighted.</s></p>
-          <p><mark>But this one is.</mark></p>
+          <p><mark>But that one is.</mark></p>
           <p><mark style="background-color: pink;">And this is highlighted too, but in a different color.</mark></p>
         `,
     })
diff --git a/packages/core/src/commands/toggleMark.ts b/packages/core/src/commands/toggleMark.ts
index 65aacab7..49596cff 100644
--- a/packages/core/src/commands/toggleMark.ts
+++ b/packages/core/src/commands/toggleMark.ts
@@ -3,7 +3,7 @@ import { MarkType } from 'prosemirror-model'
 import { Command } from '../Editor'
 import getMarkType from '../utils/getMarkType'
 
-type ToggleMarkCommand = (typeOrName: string | MarkType) => Command
+type ToggleMarkCommand = (typeOrName: string | MarkType, attrs?: {}) => Command
 
 declare module '../Editor' {
   interface Commands {
@@ -11,8 +11,8 @@ declare module '../Editor' {
   }
 }
 
-export const toggleMark: ToggleMarkCommand = typeOrName => ({ state, dispatch }) => {
+export const toggleMark: ToggleMarkCommand = (typeOrName, attrs) => ({ state, dispatch }) => {
   const type = getMarkType(typeOrName, state.schema)
 
-  return originalToggleMark(type)(state, dispatch)
+  return originalToggleMark(type, attrs)(state, dispatch)
 }
diff --git a/packages/extension-highlight/index.ts b/packages/extension-highlight/index.ts
index fcf8aa16..59111f04 100644
--- a/packages/extension-highlight/index.ts
+++ b/packages/extension-highlight/index.ts
@@ -34,8 +34,8 @@ export default new Mark()
     }, 0],
   }))
   .commands(({ name }) => ({
-    highlight: () => ({ commands }) => {
-      return commands.toggleMark(name)
+    highlight: attrs => ({ commands }) => {
+      return commands.toggleMark(name, attrs)
     },
   }))
   .keys(({ editor }) => ({