.isActive() and nested nodes

Currently .isActive checks to see if the node is active at any point in a nested tree of nodes, this is slightly problematic with nested list of different types. So ,for example, I have a toolbar with both ul and ol buttons and use isActive to set the active state of the button, if you nest a ul within an ol both are technically active and so both buttons show as active.

Would it be possible to have a depth argument or ‘isActiveTop()’ so that we can check if only is the top level node matches?

Additionally isActive('paragraph') returns true with most other node types as they almost all nest a paragraph within them (list, tables, blockquotes ect.), could there be a exclusive argument or a isActiveOnly() option?

[samwillis]

Having put some more thought into this I have made a new helper that solves this problem, a depth arg would not solve it as its hard to know how ‘deep’ to test and its ambiguous how that would work on a multi node selection.

This helper, lastActiveNodes, finds the last (furthest from the root document) matching types in your selection (ignoring nesting), you can give it either a list of args similar to isActive or a group name, calling it like below. It will return a list of node type names that are the last ones active in the selection, if the selection is ‘empty’ (just the cursor) the returned list will only have at most one name. This lets you build a UI for lists that works the same as most word processors.

lastActiveNodes(editor.state, [{type: 'bulletList'}, {type: 'orderedList'}])
lastActiveNodes(editor.state, 'list')
// And types with attributes - not that you would nest headings but you get the idea
lastActiveNodes(editor.state, [
  {type: 'heading', attributes: { level: 1 }, key: 'h1'},
  {type: 'heading', attributes: { level: 2 }, key: 'h2'},
  {type: 'heading', attributes: { level: 3 }, key: 'h3'},
]))

If you are checking for arguments of the same node type (for example for headings) you can provide an additional key for each type that will be returned if it matches.

In action:

https://user-images.githubusercontent.com/31130/107784283-28391c80-6d43-11eb-96f6-d9bd9a77198b.mov

I think the inverse, a firstActiveNodes, will solve the isActive('paragraph') use case and so that’s on my todo list…

The code:

import { EditorState } from 'prosemirror-state'
import { NodeType, Node } from 'prosemirror-model'
import objectIncludes from '@tiptap/core/src/utilities/objectIncludes'
import getNodeType from '@tiptap/core/src/helpers/getNodeType'
import { AnyObject } from '@tiptap/core/src/types'


export interface LastActiveNodesItemOption {
  type: NodeType | string | null;
  attributes?: AnyObject;
  key?: string;
}

export default function lastActiveNodes(
  state: EditorState,
  typesOrGroup: LastActiveNodesItemOption[] | string
): string[] {
  const { from, to, empty } = state.selection
  let types: LastActiveNodesItemOption[]

  if (typeof typesOrGroup === 'string') {
    // types is a name of a node group
    types = Object.entries(state.schema.nodes)
      .filter(([name, nodeType]) => (nodeType as any).groups.includes(typesOrGroup))
      .map(([name, nodeType]) => {
        return {
          type: (nodeType as NodeType),
        }
      })
  } else {
    // types is a list of LastActiveNodeItemOption
    types = typesOrGroup;
    for (const item of types) {
      item.type = item.type ? getNodeType(item.type, state.schema) : null
    }
  }

  let lastNode: Node | null = null;
  let lastMatchedType: LastActiveNodesItemOption | null = null;
  const matchedTypes: Set<LastActiveNodesItemOption> = new Set();
  const notFoundTypes = new Set(types)

  state.doc.nodesBetween(from, to, (node, pos, parent) => {
    if (notFoundTypes.size == 0) return false;
    if (!node.isText) {
      const matchedType = types.filter((item) => {
        if (!item.type) {
          return true
        }
        if (typeof item.type === 'string') return false; // Typeguard, shouldn't happen
        return node.type.name === item.type.name
      })
      .find(item => {
        if (!item.attributes) return true;
        return objectIncludes(node.attrs, item.attributes)
      })
      if (matchedType) {
        if (lastMatchedType && lastNode && (lastNode !== parent)) {
          notFoundTypes.delete(lastMatchedType);
          matchedTypes.add(lastMatchedType);
        }
        lastMatchedType = matchedType;
      }
      lastNode = node;
    }
  })

  if (lastMatchedType) {
    matchedTypes.add(lastMatchedType);
  }

  return [...matchedTypes.values()].map((item) => {
    if (item.key) {
      return item.key
    } else if (typeof item.type === 'string') {
      return item.type;
    } else if (item.type?.name) {
      return item.type.name
    } else {
      return ''
    }
  })

}

[philippkuehn]

Currently, I don’t have plans to add this to the core. But thanks again for the code. I’m sure it will help some people 👍