prosemirror length plugin.ts

import { Plugin } from 'prosemirror-state'
import { Node } from 'prosemirror-model'
import { Decoration, DecorationSet } from 'prosemirror-view'

function checkLength(doc: Node, maxLength: number) {
  if (doc.nodeSize > maxLength) {
    const elem = document.createElement('span')
    return DecorationSet.create(doc, [
      Decoration.inline(maxLength, doc.nodeSize, { class: 'bg-red-300' }),
    ])
  }
}

const maxSymbols = ({ maxLength }: { maxLength: number }) =>
  new Plugin({
    state: {
      init(_, { doc }) {
        return checkLength(doc, maxLength)
      },
      apply(tr, old) {
        return tr.docChanged ? checkLength(tr.doc, maxLength) : old
      },
    },
    props: {
      decorations(state) {
        return (this as any).getState(state)
      },
    },
  })