From 1d5d1f7c6ea594bd2c985c82f17bac48bfcb854f Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Mon, 5 Oct 2020 17:12:57 +0200
Subject: [PATCH] check if mark has attributes

---
 docs/src/demos/Extensions/Highlight/index.vue | 9 +++++++--
 packages/core/src/Editor.ts                   | 2 +-
 packages/core/src/utils/markHasAttributes.ts  | 9 +++++++++
 packages/core/src/utils/markIsActive.ts       | 9 ++++++---
 4 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 packages/core/src/utils/markHasAttributes.ts

diff --git a/docs/src/demos/Extensions/Highlight/index.vue b/docs/src/demos/Extensions/Highlight/index.vue
index d397aa68..62766a30 100644
--- a/docs/src/demos/Extensions/Highlight/index.vue
+++ b/docs/src/demos/Extensions/Highlight/index.vue
@@ -1,6 +1,11 @@
 <template>
   <div v-if="editor">
-    <button @click="editor.chain().focus().highlight().run()" :class="{ 'is-active': editor.isActive('highlight') }">
+    <button
+      @click="editor.chain().focus().highlight().run()"
+      :class="{ 'is-active': editor.isActive('highlight', {
+        color: ''
+      }) }"
+    >
       highlight (default)
     </button>
     <button @click="editor.chain().focus().highlight({ color: 'red' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'red' }) }">
@@ -53,7 +58,7 @@ export default {
       content: `
           <p>This isn’t highlighted.</s></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>
+          <p><mark style="background-color: red;">And this is highlighted too, but in a different color.</mark></p>
         `,
     })
   },
diff --git a/packages/core/src/Editor.ts b/packages/core/src/Editor.ts
index 2be9f517..d9ee686a 100644
--- a/packages/core/src/Editor.ts
+++ b/packages/core/src/Editor.ts
@@ -351,7 +351,7 @@ export class Editor extends EventEmitter {
     if (schemaType === 'node') {
       return nodeIsActive(this.state, this.schema.nodes[name], attrs)
     } if (schemaType === 'mark') {
-      return markIsActive(this.state, this.schema.marks[name])
+      return markIsActive(this.state, this.schema.marks[name], attrs)
     }
 
     return false
diff --git a/packages/core/src/utils/markHasAttributes.ts b/packages/core/src/utils/markHasAttributes.ts
new file mode 100644
index 00000000..4fd4a4eb
--- /dev/null
+++ b/packages/core/src/utils/markHasAttributes.ts
@@ -0,0 +1,9 @@
+import { EditorState } from 'prosemirror-state'
+import { MarkType } from 'prosemirror-model'
+import getMarkAttrs from './getMarkAttrs'
+
+export default function markHasAttributes(state: EditorState, type: MarkType, attrs?: Object) {
+  return attrs === null || JSON.stringify(attrs) === JSON.stringify(
+    getMarkAttrs(state, type),
+  )
+}
diff --git a/packages/core/src/utils/markIsActive.ts b/packages/core/src/utils/markIsActive.ts
index e8be9511..bf72f643 100644
--- a/packages/core/src/utils/markIsActive.ts
+++ b/packages/core/src/utils/markIsActive.ts
@@ -1,7 +1,8 @@
 import { EditorState } from 'prosemirror-state'
 import { MarkType } from 'prosemirror-model'
+import markHasAttributes from './markHasAttributes'
 
-export default function markIsActive(state: EditorState, type: MarkType) {
+export default function markIsActive(state: EditorState, type: MarkType, attrs?: {}) {
   const {
     from,
     $from,
@@ -9,9 +10,11 @@ export default function markIsActive(state: EditorState, type: MarkType) {
     empty,
   } = state.selection
 
+  const hasAttributes = markHasAttributes(state, type, attrs)
+
   if (empty) {
-    return !!type.isInSet(state.storedMarks || $from.marks())
+    return (type.isInSet(state.storedMarks || $from.marks()) && hasAttributes)
   }
 
-  return !!state.doc.rangeHasMark(from, to, type)
+  return (state.doc.rangeHasMark(from, to, type) && hasAttributes)
 }