Decorating a Marker with a TextArea does not allow text entry


#1

Greetings all,

So as part of a project I’m doing to support my thesis, I’m trying to develop an Atom package. A significant portion of what I need to do is provide inline areas that can be used to display and edit text and yet are not part of the actual editor. That is, they don’t count towards line numbers, aren’t linted, etc… Decorating line markers with an HTML textarea seemed like a good way to do this to me, but after hours of struggling, I still can’t get this to work right.

For reproduceability, you can execute the following lines in the developer console:

let editor = atom.workspace.getActiveTextEditor();
let myMarker = editor.markBufferPosition([1, 0], {invalidate: 'never'});
let textarea = document.createElement('textarea');
textarea.classList.add("native-key-bindings");
textarea.tabIndex = -1;
textarea.style.backgroundColor = 'orange';
textarea.value = "Hello there";
let decoration = editor.decorateMarker(myMarker, {item: textarea,
                                                  type: "block",
                                                  position: "after",
                                                  class: "native-key-bindings"});

I’ve also tried wrapping the text-area in a div with slightly different but still undesirable results.
Can anyone tell me what I’m doing wrong?


#2

Can you explain why your solution is not what you wanted? From your description of what you want, your solution appears to work correctly for me