# Figure and Editable Caption

**URL:** https://discuss.prosemirror.net/t/figure-and-editable-caption/462
**Category:** Uncategorized
**Created:** [October 27, 2016, 8:08pm UTC](https://discuss.prosemirror.net/t/figure-and-editable-caption/462 "2016-10-27T20:08:01Z")
**Posts on this page:** 1
**Showing post:** 5

<div class="post-metadata">

### Author: ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)
#### Post date: [October 28, 2016, 12:57pm UTC](https://discuss.prosemirror.net/t/figure-and-editable-caption/462/5 "2016-10-28T12:57:39Z")

</div>

Here’s another, possibly more complete example doing something similar.

```javascript
const imageNodeDesc = {
  figure: {
    attrs: {src: {}},
    content: "inline<_>*",
    parseDOM: [{
      tag: "figure",
      contentElement: "figcaption", // Helps the parser figure out where the child nodes are
      getAttrs(dom) {
        let img = dom.querySelector("img")
        return {src: img && img.parentNode == dom ? img.src : "default_image.jpg"}
      }
    }],
    toDOM(node) {
      return ["figure", ["img", {src: node.attrs.src}], ["figcaption", 0]]
    },
    draggable: true,
    group: "block",
  }
}

```

To cause the node to be selected on click, even though it isn’t a leaf node, you could use the [`handleClickOn`](http://prosemirror.net/ref.html#view.EditorProps.handleClickOn) prop, passing something like…

```javascript
function handleFigureClick(view, pos, node, posBefore) {
  if (node.type.name != "figure" && pos != posBefore) return false
  view.props.onAction(new NodeSelection(view.state.doc.resolve(pos).action())
  return true
}

```

---

_[View the full topic](https://discuss.prosemirror.net/t/figure-and-editable-caption/462)._