Desktop/ts/components/CaptionEditor.md

Image

let caption = null;

<div style={{ position: 'relative', width: '100%', height: 500 }}>
  <CaptionEditor
    url={util.gifObjectUrl}
    attachment={{
      contentType: 'image/jpeg',
    }}
    onChangeCaption={caption => console.log('onChangeCaption', caption)}
    i18n={util.i18n}
  />
</div>;

Image with caption

let caption =
  "This is the user-provided caption. We show it overlaid on the image. If it's really long, then it wraps, but it doesn't get too close to the edges of the image.";

<div style={{ position: 'relative', width: '100%', height: 500 }}>
  <CaptionEditor
    url="https://placekitten.com/800/600"
    attachment={{
      contentType: 'image/jpeg',
    }}
    caption={caption}
    contentType="image/jpeg"
    onChangeCaption={caption => console.log('onChangeCaption', caption)}
    i18n={util.i18n}
  />
</div>;

Video

let caption = null;

<div style={{ position: 'relative', width: '100%', height: 500 }}>
  <CaptionEditor
    url="fixtures/pixabay-Soap-Bubble-7141.mp4"
    attachment={{
      contentType: 'video/mp4',
    }}
    onChangeCaption={caption => console.log('onChangeCaption', caption)}
    i18n={util.i18n}
  />
</div>;

Video with caption

let caption =
  "This is the user-provided caption. We show it overlaid on the image. If it's really long, then it wraps, but it doesn't get too close to the edges of the image.";

<div style={{ position: 'relative', width: '100%', height: 500 }}>
  <CaptionEditor
    url="fixtures/pixabay-Soap-Bubble-7141.mp4"
    attachment={{
      contentType: 'video/mp4',
    }}
    caption={caption}
    onChangeCaption={caption => console.log('onChangeCaption', caption)}
    i18n={util.i18n}
  />
</div>;