Remove the buttons form the image dialoge. AltText does reset on close/open. WIP.

Author: allcaps

lib/blocks/ImageBlock.js

@@ -11,31 +11,33 @@ class ImageBlock extends Component {
         super(props);
         const { entity } = props;
 
-        const { altText, alignment } = entity.getData();
+        const { alignment } = entity.getData();
 
         this.state = {
-            altText: altText || '',
             alignment: alignment || 'left',
         };
 
         this.changeText = this.changeText.bind(this);
         this.changeAlignment = this.changeAlignment.bind(this);
-        this.onSave = this.onSave.bind(this);
         this.renderMediaOptions = this.renderMediaOptions.bind(this);
     }
 
     componentWillReceiveProps(nextProps) {
-        const { altText, alignment } = nextProps.entity.getData();
+        const { alignment } = nextProps.entity.getData();
 
         // Reset unsaved changes.
         this.setState({
-            altText: altText || '',
             alignment: alignment || 'left',
         });
     }
 
     changeText(e) {
-        this.setState({
+
+        const { onSave } = this.props;
+        const { alignment } = this.state;
+
+        onSave({
+            alignment,
             altText: e.currentTarget.value,
         });
     }
@@ -46,19 +48,10 @@ class ImageBlock extends Component {
         });
     }
 
-    onSave() {
-        const { onSave } = this.props;
-        const { alignment, altText } = this.state;
-
-        onSave({
-            alignment,
-            altText,
-        });
-    }
 
     renderMediaOptions() {
-        const { entityConfig, onCancel } = this.props;
-        const { alignment, altText } = this.state;
+        const { entityConfig } = this.props;
+        const { alignment } = this.state;
         const imageFormats = entityConfig.imageFormats || [];
 
         // TODO Add <label> elt for Alt text field.
@@ -71,7 +64,7 @@ class ImageBlock extends Component {
                             <p>
                                 <input
                                     type="text"
-                                    value={altText}
+                                    value={this.props.entity.getData().altText}
                                     onChange={this.changeText}
                                 />
                             </p>
@@ -96,22 +89,6 @@ class ImageBlock extends Component {
                         </p>
                     </div>
                 </div>
-                <p>
-                    <button
-                        type="button"
-                        className="button button-secondary"
-                        onClick={this.onSave}
-                    >
-                        Save changes
-                    </button>
-                    <button
-                        type="button"
-                        className="button button-secondary no"
-                        onClick={onCancel}
-                    >
-                        Cancel
-                    </button>
-                </p>
             </div>
         );
     }

lib/blocks/ImageBlock.test.js

@@ -69,10 +69,4 @@ describe('ImageBlock', () => {
         ).toMatchSnapshot();
     });
 
-    it('#onCancel', () => {
-        shallow(<ImageBlock {...mockProps} isActive={true} />)
-            .find('.button.no')
-            .simulate('click');
-        expect(mockProps.onCancel).toHaveBeenCalledTimes(1);
-    });
 });

lib/blocks/MediaBlock.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { EditorState } from 'draft-js';
 
 import { ENTITY_TYPE } from '../api/constants';
 
@@ -48,11 +49,16 @@ class MediaBlock extends Component {
     }
 
     onSave(nextData) {
-        const { block, contentState } = this.props;
+        const { block, contentState, editorState, onChange } = this.props;
 
         // This will update in place
-        contentState.mergeEntityData(block.getEntityAt(0), nextData);
-        this.closeBlock();
+        const nextContentState = contentState.mergeEntityData(block.getEntityAt(0), nextData);
+        onChange(EditorState.push(
+            editorState,
+            nextContentState,
+            'insert',
+        ));
+        // this.closeBlock();
     }
 
     render() {

lib/components/DraftailEditor.js

@@ -488,7 +488,7 @@ class DraftailEditor extends Component {
                 } else {
                     ret = {
                         component: MediaBlock,
-                        editable: false,
+                        editable: false,  // Will not contain text
                         props: {
                             entity: entity,
                             entityConfig: entityTypes.find(
@@ -497,6 +497,7 @@ class DraftailEditor extends Component {
                             lockEditor: this.lockEditor,
                             unlockEditor: this.unlockEditor,
                             editorState: editorState,
+                            onChange: this.onChange,
                             onUpdate: this.onDialogComplete,
                         },
                     };
@@ -644,7 +645,7 @@ class DraftailEditor extends Component {
                     editorState={editorState}
                     onChange={this.onChange}
                     placeholder={placeholder}
-                    readOnly={readOnly}
+                    readOnly={false}
                     stripPastedStyles={stripPastedStyles}
                     handleReturn={this.handleReturn}
                     keyBindingFn={behavior.getKeyBindingFn(