From c9da3ab269c2822e6b1bc6d1f8783af39015f0a5 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Tue, 27 Oct 2020 22:22:34 +0100
Subject: [PATCH] clean up and add attributes to the highlight command

---
 docs/src/docPages/api/extensions/highlight.md | 10 ++++++----
 packages/core/src/extensions/toggleMark.ts    |  4 +---
 packages/extension-highlight/index.ts         |  8 +-------
 3 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/docs/src/docPages/api/extensions/highlight.md b/docs/src/docPages/api/extensions/highlight.md
index a0e72d38..01d55059 100644
--- a/docs/src/docPages/api/extensions/highlight.md
+++ b/docs/src/docPages/api/extensions/highlight.md
@@ -1,6 +1,8 @@
 # Highlight
 Use this extension to render highlighted text with `<mark>`. You can use only default `<mark>` HTML tag, which has a yellow background color by default, or apply different colors.
 
+Type `==two equal signs==` and it will magically transform to <mark>highlighted</mark> text while you type.
+
 ## Installation
 ```bash
 # With npm
@@ -16,9 +18,9 @@ yarn add @tiptap/extension-highlight
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command   | Options | Description               |
-| --------- | ------- | ------------------------- |
-| highlight | —       | Mark text as highlighted. |
+| Command   | Options | Description                                                 |
+| --------- | ------- | ----------------------------------------------------------- |
+| highlight | color   | Mark text as highlighted, optionally pass a specific color. |
 
 ## Keyboard shortcuts
 * Windows/Linux: `Control`&nbsp;`E`
@@ -28,4 +30,4 @@ yarn add @tiptap/extension-highlight
 [packages/extension-highlight/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-highlight/)
 
 ## Usage
-<demo name="Extensions/Highlight" highlight="3-5,17,36" />
+<demo name="Extensions/Highlight" highlight="3-8,48,67" />
diff --git a/packages/core/src/extensions/toggleMark.ts b/packages/core/src/extensions/toggleMark.ts
index c00da515..9b25cb87 100644
--- a/packages/core/src/extensions/toggleMark.ts
+++ b/packages/core/src/extensions/toggleMark.ts
@@ -8,10 +8,9 @@ import markIsActive from '../utils/markIsActive'
 export const ToggleMark = createExtension({
   addCommands() {
     return {
-      toggleMark: (typeOrName: string | MarkType): Command => ({ state, dispatch }) => {
+      toggleMark: (typeOrName: string | MarkType, attrs?: {}): Command => ({ state, dispatch, commands }) => {
         const type = getMarkType(typeOrName, state.schema)
 
-        /* TODO:
         const hasMarkWithDifferentAttributes = attrs
           && markIsActive(state, type)
           && !markIsActive(state, type, attrs)
@@ -20,7 +19,6 @@ export const ToggleMark = createExtension({
           // @ts-ignore
           return commands.updateMark(type, attrs)
         }
-        */
 
         return originalToggleMark(type)(state, dispatch)
       },
diff --git a/packages/extension-highlight/index.ts b/packages/extension-highlight/index.ts
index 113c39f9..5b8f89ee 100644
--- a/packages/extension-highlight/index.ts
+++ b/packages/extension-highlight/index.ts
@@ -17,7 +17,6 @@ const Highlight = createMark({
       color: {
         default: null,
         parseHTML: element => {
-          console.log(element.getAttribute('data-color'))
           return {
             color:
               element.getAttribute('data-color')
@@ -45,11 +44,6 @@ const Highlight = createMark({
       },
       {
         style: 'background-color',
-        // getAttrs: value => {
-        //   return {
-        //     color: value,
-        //   }
-        // },
       },
     ]
   },
@@ -61,7 +55,7 @@ const Highlight = createMark({
   addCommands() {
     return {
       highlight: (attrs?: HighlightOptions): Command => ({ commands }) => {
-        return commands.toggleMark('highlight')
+        return commands.toggleMark('highlight', attrs)
       },
     }
   },