Image : Add options

image: {uploadOnly : false, noAlignmentPopup: false}

- uploadOnly : hide "URL" tab if uploadCallback is defined
- noAlignmentPopup : disable image alignment popover

js/src/Renderer/Image/index.js

@@ -77,9 +77,11 @@ const getImageComponent = (config) => {
     render(): Object {
       const { block } = this.props;
       const { hovered } = this.state;
-      const { isReadOnly } = config;
+      const { isReadOnly, toolBar } = config;
       const entity = Entity.get(block.getEntityAt(0));
       const { src, alignment, height, width } = entity.getData();
+      const showAlignmentOptions = !(toolBar() && toolBar().image.noAlignmentPopup === true);
+
       return (
         <span
           onMouseEnter={this.toggleHovered}
@@ -103,7 +105,7 @@ const getImageComponent = (config) => {
               }}
             />
             {
-              !isReadOnly() && hovered ?
+              !isReadOnly() && hovered && showAlignmentOptions ?
                 this.renderAlignmentOptions()
                 :
                 undefined

js/src/components/Controls/Image/index.js

@@ -21,6 +21,7 @@ export default class ImageControl extends Component {
     showModal: false,
     dragEnter: false,
     showImageUpload: !!this.props.config.uploadCallback,
+    uploadOnly: !!this.props.config.uploadOnly,
     showImageLoading: false,
     height: 'auto',
     width: '100%',
@@ -186,7 +187,7 @@ export default class ImageControl extends Component {
   };
 
   renderAddImageModal(): Object {
-    const { imgSrc, showImageUpload, showImageLoading, dragEnter, height, width } = this.state;
+    const { imgSrc, showImageUpload, showImageLoading, uploadOnly, dragEnter, height, width } = this.state;
     const { config: { popupClassName, uploadCallback } } = this.props;
     return (
       <div
@@ -210,18 +211,20 @@ export default class ImageControl extends Component {
             :
             undefined
           }
-          <span
-            onClick={this.showImageURLOption}
-            className="rdw-image-modal-header-option"
-          >
-            <span>URL</span>
+          { uploadOnly && uploadCallback ? undefined :
             <span
-              className={classNames(
-                'rdw-image-modal-header-label',
-                { 'rdw-image-modal-header-label-highlighted': !showImageUpload }
-              )}
-            />
-          </span>
+              onClick={this.showImageURLOption}
+              className="rdw-image-modal-header-option"
+            >
+              <span>URL</span>
+              <span
+                className={classNames(
+                  'rdw-image-modal-header-label',
+                  { 'rdw-image-modal-header-label-highlighted': !showImageUpload }
+                )}
+              />
+            </span>
+          }
         </div>
         {
           showImageUpload && uploadCallback ?

js/src/components/Editor/index.js

@@ -95,7 +95,7 @@ export default class WysiwygEditor extends Component {
     this.wrapperId = `rdw-wrapper${Math.floor(Math.random() * 10000)}`;
     this.modalHandler = new ModalHandler();
     this.focusHandler = new FocusHandler();
-    this.blockRendererFn = getBlockRenderFunc({ isReadOnly: this.isReadOnly }, props.customBlockRenderFunc);
+    this.blockRendererFn = getBlockRenderFunc({ isReadOnly: this.isReadOnly, toolBar : this.toolBar }, props.customBlockRenderFunc);
     this.editorProps = this.filterEditorProps(props);
     this.customStyleMap = getCustomStyleMap();
   }
@@ -254,6 +254,8 @@ export default class WysiwygEditor extends Component {
 
   isReadOnly = () => this.props.readOnly;
 
+  toolBar = () => this.props.toolbar;
+
   createEditorState = (compositeDecorator) => {
     let editorState;
     if (hasProperty(this.props, 'editorState')) {

package.json

@@ -23,6 +23,7 @@
     "draft-js": "^0.10.0",
     "draftjs-to-html": "^0.5.1",
     "draftjs-to-markdown": "^0.2.0",
+    "draftjs-utils": "^0.6.2",
     "enzyme": "^2.7.1",
     "eslint": "^3.15.0",
     "eslint-config-airbnb": "^14.0.0",