How to define a selectable Blocknode with editable text content

1

In my schema I have a figure node, defined as block. It contains an image (in my case that is a React component) and a figcaption, which acts as container for editable text content. In regard to the figcaption, the whole thing behaves like a normal block text node (e.g. ‘paragraph’). But when I click on the image, I would like the whole figure to get selected, which does not happen, by default.

Is that intended behavior ? I guess yes, at least that is how the block nodes from basic schema behave.

So right now I am experimenting with an ugly hack, to listen for click event at the dom node of the image, and from there I programmatically select the figure.

Is there a better way to do this ?

2

The handleClickOn prop should allow you to wire behavior like this up in a less hacky way. Non-leaf nodes don’t get selected by default when clicked (only when ctrl-clicked).

3

Thanks for clarification, but handleClickOn does only get called when I click on the children (in my figure example, the figcaption text). Clicking on a the image or any other area belonging to the figure (but outside the children) has no effect.

handleDOMEvent does get called, but processing that one does not really help to make it less hacky to select the node (and without patch, the actual DOM event does not get passed)

4

handleClickOn is supposed to be called for the node that’s directly clicked. What does the DOM structure of your node look like? If I click, for example, in the margin of a list item, this seems to work, but maybe you’re hitting a broken case.

5

the DOM structure looks like this:

<figure>
  <div>
    <img src="http://some.image.jpeg">
  </div>
  <figcaption>Some text</figcaption>
</figure>
6

Is there any further development regarding this? I am currently facing issues implementing something similar. I am also using prosemirror-markdown with it and want the title to be kept in sync with the figcaption textContent.