Get view in transformPastedText

1

I am building a small plugin for pasting, but the problem is I need the current content in the editor because I want to limit the past size.

transformPastedText(text) {
	// I need this text
	const text = view.dom.textContent;
	return text.slice(0, limit - text.length)
}

How can I access this in the plugin?

Also what is the best way to get plain text from HTML clipboard transformPastedHTML?

Thank you in advance/

2

I can’t really think of a reason why you’d need the DOM to transform pasted input. Since transformPastedText is passed only the text string, you’ll need to arrange access to other values in some other way, by creating a function value that closes over them somehow.

3

I am trying to limit the input length. Therefore I am making a plugin that will limit you to the n characters. Basically how maxlength works on the input. I don’t know a better way to do this.

export default function MaxLength(length) {
  return new Plugin({
    key: new PluginKey('maxlength'),
    props: {
      handleDOMEvents: {
        keydown(view, event) {
          const charCode = event.key;
          // TODO Not ideal :(
          if (charCode === 'Delete' || charCode === 'Backspace' || charCode === 'ArrowRight' || charCode === 'ArrowLeft' || event.ctrlKey) {
            return;
          }

          const text = view.dom.textContent;
          if (typeof text === 'string' && text.length >= length - 1) {
            event.preventDefault()
          }
        }
      },
    },
  })
}

Now I need to cover the case when someone copies the text. If you have a better solution (but it needs to be a plugin) I am open to it.

Note: This input is always only one p because it acts like input

4

Try writing a plugin with an appendTransaction callback — that’s usually a better way to handle things that need to react to every change, as opposed to trying to capture all possible sources of input.