Hey!
I’m creating an editor using ProseMirror and noticed a weird behavior that when I render a NodeView that contains an <input> element within it when I focus the <input> the editor gets blurred. According to this issue it seems to be intended?
What I’m trying to do is to render a <figure> tag and have an editable <figcaption> within it (input inside the figcaption). However, whenever I click the input, the editor loses focus. Is there any way to solve that other than popping some sort of a popover/modal/dropdown to insert the caption (where the popped element is hoisted to out of the editor with preventDefault() on mousedown event so the editor does not lose focus I guess?)
Browsers have a single focused element. There’s no concept of nested focus or something like that. Even if you move your focusable field outside of the editor, focusing it will blur the editor.
I’ve been thinking about this for a while (we’re stuck in the pop-a-modal world at my work) and I think one way to get around this would be to break up a figure into multiple nested nodes: (figure, img, figcaption, etc) and then insert them as a group. Then your figcaption can be allowed to only contain plain text nodes, but we’d have to modify our display libraries a bit and it’s been low on my priority list. There’s also the matter of how to mange the alt-text for the image.
One could, I suppose do something like add a plugin that watches for Figure nodes and applies the value of an inner alt-text node to the image as needed, but you’d have to be careful about infinite loops (and I imagine with enough of these things, performance), not to mention you’d need a way to excise, or hide the “form only” nodes.
I wonder if there’s some way to bend the decoration and/or widget system to help with this.