how do i add captions to a website in js?

I faced with a similar issue recently. Here the simplified demo of how it can work. Pay attention that EditorBlock component from draft-js is used on the image caption node. You should use EditorBlock in your custom component if you want an editable area inside the custom component.

class MyCustomBlock extends React.Component {
  render() {
    const imgSrc = this.props.block.get("data").src;

    return (
      <div className="my-custom-block">
        <figure className="custom-block__image-wrap">
          <img src={imgSrc} className="custom-block__image" />
          <figcaption className="custom-block__caption">
            <EditorBlock {...this.props} />
          </figcaption>
        </figure>
      </div>
    );
  }
}