isActive() doesn't work with multiple attributes

[ThomasKientz]

Describe the bug
The isActive props on menuBar doesn't works if the node's schema contains more attributes than passed in the prop's function.

Steps to Reproduce / Codesandbox Example
Add a attribute to the "Heading" extension.

export default class Heading extends Node {
 // ...

  get schema() {
    return {
      attrs: {
        level: {
          default: 1,
        },
        align: { // <----  Added prop
          default: '',
        },
      },
      // ...
    }
  }

isActive.heading({ level: 1 }) doesn't return true anymore.

<editor-menu-bar v-slot="{ commands, isActive }" :editor="editor">
  <div class="menubar">
    <button
      class="menubar__button"
      :class="{ 'is-active': isActive.heading({ level: 1 }) }"
      @click="commands.heading({ level: 1 })"
    >
      H1
    </button>
  </div>
</editor-menu-bar>

Explanation

The bug is caused by the nodeIsActive() util function which compares the attributes passed in (eg isActive.heading({ level: 1 })) with the attributes of the node (eg {level: 1, align: null}). As the attributes are not exactly the same, the function will return false. One way of coping with that would be to only check if the attributes passed in ({ level: 1 }) are "included" in the node.

Solution

Replace https://github.com/scrumpy/tiptap/blob/master/packages/tiptap-utils/src/utils/nodeIsActive.js#L15
with return node.node.hasMarkup(type, {...node.node.attrs, ...attrs})

export default function nodeIsActive(state, type, attrs = {}) {
  const predicate = node => node.type === type
  const node = findSelectedNodeOfType(type)(state.selection)
    || findParentNode(predicate)(state.selection)

  if (!Object.keys(attrs).length || !node) {
    return !!node
  }

  return node.node.hasMarkup(type, {...node.node.attrs, ...attrs})
}

[ThomasKientz]

Related to #621