check if mark has attributes

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

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

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

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