substance/commons/FigureComponent.js

Substance is a JavaScript library for web-based content editing. It provides building blocks for realizing custom text editors and web-based publishing system. It is developed to power our online editing platform [Substance](http://substance.io).

import { Component, $$ } from '../dom'
import { renderProperty } from '../editor'

export default class FigureComponent extends Component {
  render () {
    const { node } = this.props
    const { urlResolver } = this.context
    const el = $$('div', { class: 'sc-figure' })
    let url = node.image
    if (urlResolver) {
      url = urlResolver.resolveUrl(url)
    }
    el.append(
      $$('img', { src: url })
    )
    el.append(
      renderProperty(this, node.getDocument(), [node.id, 'legend'], { placeholder: 'Enter caption' })
        .addClass('se-legend')
    )
    return el
  }
}