improve highlight toggling

docs/src/demos/Extensions/Highlight/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div v-if="editor">
     <button
-      @click="editor.chain().focus().highlight().run()"
+      @click="editor.chain().focus().highlight({
+        color: ''
+      }).run()"
       :class="{ 'is-active': editor.isActive('highlight', {
         color: ''
       }) }"

packages/core/src/commands/toggleMark.ts

@@ -2,6 +2,7 @@ import { toggleMark as originalToggleMark } from 'prosemirror-commands'
 import { MarkType } from 'prosemirror-model'
 import { Command } from '../Editor'
 import getMarkType from '../utils/getMarkType'
+import markIsActive from '../utils/markIsActive'
 
 type ToggleMarkCommand = (typeOrName: string | MarkType, attrs?: {}) => Command
 
@@ -11,8 +12,13 @@ declare module '../Editor' {
   }
 }
 
-export const toggleMark: ToggleMarkCommand = (typeOrName, attrs) => ({ state, dispatch }) => {
+export const toggleMark: ToggleMarkCommand = (typeOrName, attrs) => ({ state, dispatch, commands }) => {
   const type = getMarkType(typeOrName, state.schema)
 
+  if (markIsActive(state, type) && !markIsActive(state, type, attrs)) {
+    // @ts-ignore
+    return commands.updateMark(type, attrs)
+  }
+
   return originalToggleMark(type, attrs)(state, dispatch)
 }

packages/core/src/utils/markHasAttributes.ts

@@ -3,7 +3,7 @@ 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(
+  return attrs === undefined || JSON.stringify(attrs) === JSON.stringify(
     getMarkAttrs(state, type),
   )
 }