Decorations become null after creation

1

I’m not sure if this is a ProseMirror issue or something I’m just not understanding about basic JavaScript.

I’m creating new node Decorations, which look correct in the console, but once I push them to an array their values changes to a Decoration object with a value of null. When I add the null decorations to the document nothing shows up, as expected.

import {Plugin} from "prosemirror-state"
import {Decoration, DecorationSet} from "prosemirror-view"

const hashtagMentionPlugin = () => {
  return new Plugin({
    props: {
      decorations: state => {
        const decorations = []

        let mentionRegex = new RegExp(/@[a-zA-Z0-9]+/g)

        state.doc.descendants((node, pos) => {
          if (node.type.name === 'text') {
            let allMentions = [...node.text.matchAll(mentionRegex)]

            for (var mention of allMentions) {
              let start = pos + mention.index
              let end = start + mention[0].length
              let deco = Decoration.node(start, end, {
                class: 'testing',
              })
              console.log('new deco',deco)
              decorations.push(deco)
              console.log('decorations array',decorations)
            }
          }
        })

        console.log('final decorations',decorations)

        return DecorationSet.create(state.doc, decorations)
      },
    },
  })
}

export default hashtagMentionPlugin

Here’s the output from the console:

image

I feel like there must be something simple I’m missing here, but I can’t see it for the life of me.

2

DecorationSet may change the array it is passed, and console output is sometimes weird, in that when you ‘open’ an object or array, its current content, not the content at the time it was logged, is displayed. I don’t think the null in the array you’re seeing is relevant here. Rather, you can’t create node decorations on text. You probably want an inline decoration.