Add placeholder text for empty image captions using css

rendered.html

@@ -39,8 +39,6 @@
     }
 
     window.addEventListener('message', function(e) {
-      console.log(e);
-      console.log();
       if (typeof e.data === 'object') {
         return;
       }

src/components/blocks/image.js

@@ -31,16 +31,25 @@ class ImageBlock extends React.Component {
   };
 
   render() {
-    const { block } = this.props;
+    const { blockProps, block } = this.props;
     const data = block.getData();
     const src = data.get('src');
+    const showPlaceholder = block.getLength() === 0 && blockProps.placeholder;
+
     if (src !== null) {
+      const extraProps = {};
+
+      if (showPlaceholder) {
+        extraProps['data-placeholder'] = blockProps.placeholder;
+        extraProps.className = 'md-block-image-caption--empty';
+      }
+
       return (
         <div>
           <div className="md-block-image-inner-container" onClick={this.focusBlock}>
             <img role="presentation" src={src} />
           </div>
-          <figcaption>
+          <figcaption {...extraProps}>
             <EditorBlock {...this.props} />
           </figcaption>
         </div>

src/components/blocks/image.scss

@@ -27,6 +27,17 @@ figure.md-block-image {
         .public-DraftStyleDefault-block {
             text-align: center;
         }
+
+        &.md-block-image-caption--empty {
+          position: relative;
+
+          &::before {
+            position: absolute;
+            content: attr(data-placeholder);
+            left: 0;
+            opacity: 0.5;
+          }
+        }
     }
 
     .md-block-image-inner-container {

src/components/customrenderer.js

@@ -7,7 +7,7 @@ import BreakBlock from './blocks/break';
 
 import { Block } from '../util/constants';
 
-export default (setEditorState, getEditorState) => (contentBlock) => {
+export default (setEditorState, getEditorState, extraProps) => (contentBlock) => {
   // console.log(editorState, onChange);
   const type = contentBlock.getType();
   switch (type) {
@@ -36,6 +36,7 @@ export default (setEditorState, getEditorState) => (contentBlock) => {
       props: {
         setEditorState,
         getEditorState,
+        placeholder: extraProps ? extraProps.imageCaptionPlaceholder : '',
       },
     };
     case Block.BREAK: return {

src/editor.js

@@ -75,6 +75,7 @@ class MediumDraftEditor extends React.Component {
       description: PropTypes.string,
     })),
     placeholder: PropTypes.string,
+    imageCaptionPlaceholder: PropTypes.string,
     continuousBlocks: PropTypes.arrayOf(PropTypes.string),
     sideButtons: PropTypes.arrayOf(PropTypes.shape({
       title: PropTypes.string.isRequired,
@@ -104,6 +105,7 @@ class MediumDraftEditor extends React.Component {
     blockButtons: BLOCK_BUTTONS,
     inlineButtons: INLINE_BUTTONS,
     placeholder: 'Write your story...',
+    imageCaptionPlaceholder: 'Add image caption...',
     continuousBlocks: [
       Block.UNSTYLED,
       Block.BLOCKQUOTE,
@@ -140,7 +142,7 @@ class MediumDraftEditor extends React.Component {
     this.toggleBlockType = this._toggleBlockType.bind(this);
     this.toggleInlineStyle = this._toggleInlineStyle.bind(this);
     this.setLink = this.setLink.bind(this);
-    this.blockRendererFn = this.props.rendererFn(this.onChange, this.getEditorState);
+    this.blockRendererFn = this.props.rendererFn(this.onChange, this.getEditorState, this.props);
   }
 
   /**

src/example.js

@@ -346,12 +346,12 @@ class App extends React.Component {
     setTimeout(this.fetchData, 1000);
   }
 
-  rendererFn(setEditorState, getEditorState) {
+  rendererFn(setEditorState, getEditorState, ...args) {
     const atomicRenderers = {
       embed: AtomicEmbedComponent,
       separator: AtomicSeparatorComponent,
     };
-    const rFnOld = rendererFn(setEditorState, getEditorState);
+    const rFnOld = rendererFn(setEditorState, getEditorState, ...args);
     const rFnNew = (contentBlock) => {
       const type = contentBlock.getType();
       switch(type) {