Textarea in widget (locked leaf type)

1

I’m looking at refactoring our widgets. Now they are overlays with absolute positioning, but putting them in the PM content flow will simplify things.

But when a widget has a textarea or input, I can’t focus and type there. The text goes to the previous PM position, even though the textarea has focus.

Noticed the same issue with @peteb’s widgets:

2

You are right. For my application that isn’t a problem because my editor is being used to build HTML content not data entry. Another issue I found in FF is that you sometimes get a NS_ERROR_FAILURE. It doesn’t affect anything and apparently has something to do with focus in FF.

That also made me wonder if text entered in input fields is even tracked by PM.

3

@marijn ideally I could give the widget container schema a property to specify “I’m responsible for the DOM in here.”

4

With this patch the editor won’t interpret key (and composition/input) events when it isn’t focused. That should address this problem.

5

Still seems to be some issues when triple-click selecting text in an input. Also any selection of text in an iframe widget.

6

I found this quite old but related post. I can focus and type anything in the textarea, but when I press delete or backspace, the editor content changes, which I am not sure is bug or not.

Here is my plugin code

new Plugin({
        state: {
          init(){},
          apply(tr, set, old, state){
            const dom = document.createElement('div')
            const textarea = document.createElement('textarea')
            textarea.onKeyPress = function(e){
              e.stopPropagation()
            }
            dom.appendChild(textarea)
            return DecorationSet.create(state.doc, [
              Decoration.widget(0, dom)
            ])
            
          }
        },

And the issue can be reproduced by:

  1. in prosemirror editor, type some text, like textarea in widget
  2. select part of the text
  3. focus in the textarea, and type anything, everything works
  4. now press delete or backspace, the selected text will be deleted, and the textarea becomes empty.
7

You’ll want to provide a stopEvent option for the widget. Also, onKeyPress (with capital letters) isn’t going to have any effect, and you want onkeydown anyway, because that’s the event that the editor handlers.

Furthermore, if you recreate your widget every time apply is called, that will indeed reset the textarea whenever something happens in the editor, so that’s probably not a good idea. Using a function, instead of a DOM node, when creating the decoration, and making sure you keep passing the exact same function value, can prevent this.

8

It seems that I have been ignoring this option before, although I used it in nodeviews. Thank you for pointing out my mistake and the helpful instruction.