From ee6c34121f68672c8f4e0704b182846a001f485b Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Wed, 5 Jun 2019 17:05:29 +0530
Subject: [PATCH] Add placeholder text for empty image captions using css

---
 rendered.html                    |  2 --
 src/components/blocks/image.js   | 13 +++++++++++--
 src/components/blocks/image.scss | 11 +++++++++++
 src/components/customrenderer.js |  3 ++-
 src/editor.js                    |  4 +++-
 src/example.js                   |  4 ++--
 6 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/rendered.html b/rendered.html
index ce9df9c0..20a56430 100644
--- a/rendered.html
+++ b/rendered.html
@@ -39,8 +39,6 @@
     }
 
     window.addEventListener('message', function(e) {
-      console.log(e);
-      console.log();
       if (typeof e.data === 'object') {
         return;
       }
diff --git a/src/components/blocks/image.js b/src/components/blocks/image.js
index a0a0d4cb..d0c95d39 100644
--- a/src/components/blocks/image.js
+++ b/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>
diff --git a/src/components/blocks/image.scss b/src/components/blocks/image.scss
index f4ed6906..8cc60284 100644
--- a/src/components/blocks/image.scss
+++ b/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 {
diff --git a/src/components/customrenderer.js b/src/components/customrenderer.js
index c17e7cde..978c9f69 100644
--- a/src/components/customrenderer.js
+++ b/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 {
diff --git a/src/editor.js b/src/editor.js
index d3f8b9d1..d5012616 100644
--- a/src/editor.js
+++ b/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);
   }
 
   /**
diff --git a/src/example.js b/src/example.js
index cb6d723b..ae09ec55 100644
--- a/src/example.js
+++ b/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) {