@pie-lib/editable-html 10.0.0-beta.7 → 10.0.0

package/lib/plugins/image/alt-dialog.js

@@ -1,32 +1,54 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.AltDialog = void 0;
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
+
 var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
+
 var _ArrowBackIos = _interopRequireDefault(require("@material-ui/icons/ArrowBackIos"));
+
 var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+
 var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
 var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
 var AltDialog = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(AltDialog, _React$Component);
+
   var _super = _createSuper(AltDialog);
+
   function AltDialog(props) {
     var _this;
+
     (0, _classCallCheck2["default"])(this, AltDialog);
     _this = _super.call(this, props);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "closeDialog", function () {
@@ -39,6 +61,7 @@ var AltDialog = /*#__PURE__*/function (_React$Component) {
       var onDone = _this.props.onDone;
       var value = _this.state.value;
       onDone(value);
+
       _this.closeDialog();
     });
     var alt = props.alt;
@@ -47,10 +70,12 @@ var AltDialog = /*#__PURE__*/function (_React$Component) {
     };
     return _this;
   }
+
   (0, _createClass2["default"])(AltDialog, [{
     key: "render",
     value: function render() {
       var _this2 = this;
+
       var value = this.state.value;
       return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
         open: true,
@@ -88,6 +113,7 @@ var AltDialog = /*#__PURE__*/function (_React$Component) {
   }]);
   return AltDialog;
 }(_react["default"].Component);
+
 exports.AltDialog = AltDialog;
 (0, _defineProperty2["default"])(AltDialog, "propTypes", {
   onDone: _propTypes["default"].func.isRequired,

package/lib/plugins/image/alt-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"alt-dialog.js","names":["_react","_interopRequireDefault","require","_DialogContent","_ArrowBackIos","_TextField","_DialogActions","_Button","_Dialog","_propTypes","_createSuper","Derived","hasNativeReflectConstruct","_isNativeReflectConstruct","_createSuperInternal","Super","_getPrototypeOf2","result","NewTarget","constructor","Reflect","construct","arguments","apply","_possibleConstructorReturn2","sham","Proxy","Boolean","prototype","valueOf","call","e","AltDialog","_React$Component","_inherits2","_super","props","_this","_classCallCheck2","_defineProperty2","_assertThisInitialized2","allDialogs","document","querySelectorAll","forEach","s","remove","onDone","value","state","closeDialog","alt","_createClass2","key","render","_this2","createElement","open","disablePortal","onClose","id","hideBackdrop","style","display","paddingTop","multiline","placeholder","helperText","onChange","event","setState","target","FormHelperTextProps","fontSize","onClick","React","Component","exports","PropTypes","func","isRequired","string","_default"],"sources":["../../../src/plugins/image/alt-dialog.jsx"],"sourcesContent":["import React from 'react';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport ArrowBackIos from '@material-ui/icons/ArrowBackIos';\nimport TextField from '@material-ui/core/TextField';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport PropTypes from 'prop-types';\n\nexport class AltDialog extends React.Component {\n  static propTypes = {\n    onDone: PropTypes.func.isRequired,\n    alt: PropTypes.string,\n  };\n\n  constructor(props) {\n    super(props);\n\n    const { alt } = props;\n\n    this.state = {\n      value: alt,\n    };\n  }\n\n  closeDialog = () => {\n    const allDialogs = document.querySelectorAll('#text-dialog');\n\n    allDialogs.forEach(function(s) {\n      return s.remove();\n    });\n  };\n\n  onDone = () => {\n    const { onDone } = this.props;\n    const { value } = this.state;\n\n    onDone(value);\n    this.closeDialog();\n  };\n\n  render() {\n    const { value } = this.state;\n\n    return (\n      <Dialog open disablePortal onClose={this.closeDialog} id=\"text-dialog\" hideBackdrop>\n        <DialogContent>\n          <div style={{ display: 'flex' }}>\n            <ArrowBackIos style={{ paddingTop: '6px' }} />\n            <TextField\n              multiline\n              placeholder={'Enter an Alt Text description of this image'}\n              helperText={\n                'Users with visual limitations rely on Alt Text, since screen readers cannot otherwise describe the contents of an image.'\n              }\n              value={value}\n              onChange={(event) => this.setState({ value: event.target.value })}\n              FormHelperTextProps={{ style: { fontSize: 14 } }}\n            />\n          </div>\n        </DialogContent>\n        <DialogActions>\n          <Button onClick={this.onDone}>Done</Button>\n        </DialogActions>\n      </Dialog>\n    );\n  }\n}\n\nexport default AltDialog;\n"],"mappings":"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"}
+{"version":3,"sources":["../../../src/plugins/image/alt-dialog.jsx"],"names":["AltDialog","props","allDialogs","document","querySelectorAll","forEach","s","remove","onDone","value","state","closeDialog","alt","display","paddingTop","event","setState","target","style","fontSize","React","Component","PropTypes","func","isRequired","string"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEaA,S;;;;;AAMX,qBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,oGAUL,YAAM;AAClB,UAAMC,UAAU,GAAGC,QAAQ,CAACC,gBAAT,CAA0B,cAA1B,CAAnB;AAEAF,MAAAA,UAAU,CAACG,OAAX,CAAmB,UAASC,CAAT,EAAY;AAC7B,eAAOA,CAAC,CAACC,MAAF,EAAP;AACD,OAFD;AAGD,KAhBkB;AAAA,+FAkBV,YAAM;AACb,UAAQC,MAAR,GAAmB,MAAKP,KAAxB,CAAQO,MAAR;AACA,UAAQC,KAAR,GAAkB,MAAKC,KAAvB,CAAQD,KAAR;AAEAD,MAAAA,MAAM,CAACC,KAAD,CAAN;;AACA,YAAKE,WAAL;AACD,KAxBkB;AAGjB,QAAQC,GAAR,GAAgBX,KAAhB,CAAQW,GAAR;AAEA,UAAKF,KAAL,GAAa;AACXD,MAAAA,KAAK,EAAEG;AADI,KAAb;AALiB;AAQlB;;;;WAkBD,kBAAS;AAAA;;AACP,UAAQH,KAAR,GAAkB,KAAKC,KAAvB,CAAQD,KAAR;AAEA,0BACE,gCAAC,kBAAD;AAAQ,QAAA,IAAI,MAAZ;AAAa,QAAA,aAAa,MAA1B;AAA2B,QAAA,OAAO,EAAE,KAAKE,WAAzC;AAAsD,QAAA,EAAE,EAAC,aAAzD;AAAuE,QAAA,YAAY;AAAnF,sBACE,gCAAC,yBAAD,qBACE;AAAK,QAAA,KAAK,EAAE;AAAEE,UAAAA,OAAO,EAAE;AAAX;AAAZ,sBACE,gCAAC,wBAAD;AAAc,QAAA,KAAK,EAAE;AAAEC,UAAAA,UAAU,EAAE;AAAd;AAArB,QADF,eAEE,gCAAC,qBAAD;AACE,QAAA,SAAS,MADX;AAEE,QAAA,WAAW,EAAE,6CAFf;AAGE,QAAA,UAAU,EACR,0HAJJ;AAME,QAAA,KAAK,EAAEL,KANT;AAOE,QAAA,QAAQ,EAAE,kBAACM,KAAD;AAAA,iBAAW,MAAI,CAACC,QAAL,CAAc;AAAEP,YAAAA,KAAK,EAAEM,KAAK,CAACE,MAAN,CAAaR;AAAtB,WAAd,CAAX;AAAA,SAPZ;AAQE,QAAA,mBAAmB,EAAE;AAAES,UAAAA,KAAK,EAAE;AAAEC,YAAAA,QAAQ,EAAE;AAAZ;AAAT;AARvB,QAFF,CADF,CADF,eAgBE,gCAAC,yBAAD,qBACE,gCAAC,kBAAD;AAAQ,QAAA,OAAO,EAAE,KAAKX;AAAtB,gBADF,CAhBF,CADF;AAsBD;;;EAzD4BY,kBAAMC,S;;;iCAAxBrB,S,eACQ;AACjBQ,EAAAA,MAAM,EAAEc,sBAAUC,IAAV,CAAeC,UADN;AAEjBZ,EAAAA,GAAG,EAAEU,sBAAUG;AAFE,C;eA2DNzB,S","sourcesContent":["import React from 'react';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport ArrowBackIos from '@material-ui/icons/ArrowBackIos';\nimport TextField from '@material-ui/core/TextField';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport PropTypes from 'prop-types';\n\nexport class AltDialog extends React.Component {\n  static propTypes = {\n    onDone: PropTypes.func.isRequired,\n    alt: PropTypes.string,\n  };\n\n  constructor(props) {\n    super(props);\n\n    const { alt } = props;\n\n    this.state = {\n      value: alt,\n    };\n  }\n\n  closeDialog = () => {\n    const allDialogs = document.querySelectorAll('#text-dialog');\n\n    allDialogs.forEach(function(s) {\n      return s.remove();\n    });\n  };\n\n  onDone = () => {\n    const { onDone } = this.props;\n    const { value } = this.state;\n\n    onDone(value);\n    this.closeDialog();\n  };\n\n  render() {\n    const { value } = this.state;\n\n    return (\n      <Dialog open disablePortal onClose={this.closeDialog} id=\"text-dialog\" hideBackdrop>\n        <DialogContent>\n          <div style={{ display: 'flex' }}>\n            <ArrowBackIos style={{ paddingTop: '6px' }} />\n            <TextField\n              multiline\n              placeholder={'Enter an Alt Text description of this image'}\n              helperText={\n                'Users with visual limitations rely on Alt Text, since screen readers cannot otherwise describe the contents of an image.'\n              }\n              value={value}\n              onChange={(event) => this.setState({ value: event.target.value })}\n              FormHelperTextProps={{ style: { fontSize: 14 } }}\n            />\n          </div>\n        </DialogContent>\n        <DialogActions>\n          <Button onClick={this.onDone}>Done</Button>\n        </DialogActions>\n      </Dialog>\n    );\n  }\n}\n\nexport default AltDialog;\n"],"file":"alt-dialog.js"}

package/lib/plugins/image/component.js

@@ -1,42 +1,66 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Component = void 0;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+
+var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearProgress"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
+
 var _debug = _interopRequireDefault(require("debug"));
-var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearProgress"));
+
 var _styles = require("@material-ui/core/styles");
-var _slate = require("slate");
+
+var _slatePropTypes = _interopRequireDefault(require("slate-prop-types"));
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
 var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:image:component');
+
 var size = function size(s) {
   return s ? "".concat(s, "px") : 'auto';
 };
+
 var Component = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(Component, _React$Component);
+
   var _super = _createSuper(Component);
+
   function Component() {
     var _this;
+
     (0, _classCallCheck2["default"])(this, Component);
+
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
+
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getWidth", function (percent) {
       var multiplier = percent / 100;
@@ -52,25 +76,22 @@ var Component = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "applySizeData", function () {
       var _this$props = _this.props,
-        node = _this$props.node,
-        editor = _this$props.editor;
-      var update = (0, _cloneDeep["default"])(node.data);
-      var w = update.width;
+          node = _this$props.node,
+          editor = _this$props.editor;
+      var update = node.data;
+      var w = update.get('width');
+
       if (w) {
-        update = update.resizePercent = _this.getPercentFromWidth(w);
+        update = update.set('resizePercent', _this.getPercentFromWidth(w));
       }
+
       log('[applySizeData] update: ', update);
-      if (editor.selection && !(0, _isEqual["default"])(update, node.data)) {
-        var nodePath = _slate.Editor.path(editor, editor.selection);
-        editor.apply({
-          type: 'set_node',
-          path: nodePath,
-          properties: {
-            data: node.data
-          },
-          newProperties: {
+
+      if (!update.equals(node.data)) {
+        editor.change(function (c) {
+          return c.setNodeByKey(node.key, {
             data: update
-          }
+          });
         });
       }
     });
@@ -80,49 +101,48 @@ var Component = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "loadImage", function () {
       var _ref = _this.props || {},
-        maxImageWidth = _ref.maxImageWidth,
-        maxImageHeight = _ref.maxImageHeight;
+          maxImageWidth = _ref.maxImageWidth,
+          maxImageHeight = _ref.maxImageHeight;
+
       maxImageWidth = maxImageWidth || 700;
       maxImageHeight = maxImageHeight || 900;
-      var box = _this.img;
+      var box = _this.img; //on first load
 
-      //on first load
       if (!box.style.width || box.style.width === 'auto') {
         var dimensions = {
           width: box && box.naturalWidth || 100,
           height: box && box.naturalHeight || 100
         };
+
         var _this$updateImageDime = _this.updateImageDimensions(dimensions, {
-            width: dimensions.width < maxImageWidth ? dimensions.width : maxImageWidth,
-            height: dimensions.height < maxImageHeight ? dimensions.height : maxImageHeight
-          }, true),
-          width = _this$updateImageDime.width,
-          height = _this$updateImageDime.height;
+          width: dimensions.width < maxImageWidth ? dimensions.width : maxImageWidth,
+          height: dimensions.height < maxImageHeight ? dimensions.height : maxImageHeight
+        }, true),
+            width = _this$updateImageDime.width,
+            height = _this$updateImageDime.height;
+
         box.style.width = "".concat(width, "px");
         box.style.height = "".concat(height, "px");
+
         _this.setState({
           dimensions: {
             height: height,
             width: width
           }
         });
+
         var _this$props2 = _this.props,
-          node = _this$props2.node,
-          editor = _this$props2.editor;
-        var update = (0, _cloneDeep["default"])(node.data);
-        update.width = width;
-        update.height = height;
-        if (editor.selection && !(0, _isEqual["default"])(update, node.data)) {
-          var nodePath = _slate.Editor.path(editor, editor.selection);
-          editor.apply({
-            type: 'set_node',
-            path: nodePath,
-            properties: {
-              data: node.data
-            },
-            newProperties: {
+            node = _this$props2.node,
+            editor = _this$props2.editor;
+        var update = node.data;
+        update = update.set('width', width);
+        update = update.set('height', height);
+
+        if (!update.equals(node.data)) {
+          editor.change(function (c) {
+            return c.setNodeByKey(node.key, {
               data: update
-            }
+            });
           });
         }
       }
@@ -134,29 +154,35 @@ var Component = /*#__PURE__*/function (_React$Component) {
         width: box && box.naturalWidth || 100,
         height: box && box.naturalHeight || 100
       };
+
       var _this$updateImageDime2 = _this.updateImageDimensions(dimensions, {
-          width: e.clientX - bounds.left,
-          height: e.clientY - bounds.top
-        }, true),
-        width = _this$updateImageDime2.width,
-        height = _this$updateImageDime2.height;
+        width: e.clientX - bounds.left,
+        height: e.clientY - bounds.top
+      }, true),
+          width = _this$updateImageDime2.width,
+          height = _this$updateImageDime2.height;
+
       var hasMinimumWidth = width > 50 && height > 50;
       var hasDimensionsConstraints = width <= 700 && height <= 900;
+
       if (hasMinimumWidth && hasDimensionsConstraints && box) {
         box.style.width = "".concat(width, "px");
         box.style.height = "".concat(height, "px");
+
         _this.setState({
           dimensions: {
             height: height,
             width: width
           }
         });
+
         var _this$props3 = _this.props,
-          node = _this$props3.node,
-          editor = _this$props3.editor;
+            node = _this$props3.node,
+            editor = _this$props3.editor;
         var update = node.data;
         update = update.set('width', width);
         update = update.set('height', height);
+
         if (!update.equals(node.data)) {
           editor.change(function (c) {
             return c.setNodeByKey(node.key, {
@@ -174,22 +200,23 @@ var Component = /*#__PURE__*/function (_React$Component) {
       // if we want to keep image aspect ratio
       if (keepAspectRatio) {
         var imageAspectRatio = initialDim.width / initialDim.height;
+
         if (resizeType === 'height') {
           // if we want to change image height => we update the width accordingly
           return {
             width: nextDim.height * imageAspectRatio,
             height: nextDim.height
           };
-        }
+        } // if we want to change image width => we update the height accordingly
+
 
-        // if we want to change image width => we update the height accordingly
         return {
           width: nextDim.width,
           height: nextDim.width / imageAspectRatio
         };
-      }
+      } // if we don't want to keep aspect ratio, we just update both values
+
 
-      // if we don't want to keep aspect ratio, we just update both values
       return {
         width: nextDim.width,
         height: nextDim.height
@@ -197,11 +224,13 @@ var Component = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
+
   (0, _createClass2["default"])(Component, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.applySizeData();
       var resizeHandle = this.resize;
+
       if (resizeHandle) {
         resizeHandle.addEventListener('mousedown', this.initialiseResize, false);
       }
@@ -215,66 +244,71 @@ var Component = /*#__PURE__*/function (_React$Component) {
     key: "getSize",
     value: function getSize(data) {
       return {
-        width: size(data.width),
-        height: size(data.height),
+        width: size(data.get('width')),
+        height: size(data.get('height')),
         objectFit: 'contain'
       };
     }
   }, {
     key: "render",
     value: function render() {
-      var _classNames,
-        _this2 = this;
+      var _this2 = this;
+
       var _this$props4 = this.props,
-        node = _this$props4.node,
-        focused = _this$props4.focused,
-        classes = _this$props4.classes,
-        attributes = _this$props4.attributes,
-        children = _this$props4.children,
-        onFocus = _this$props4.onFocus;
-      var active = focused;
-      var _node$data = node.data,
-        alignment = _node$data.alignment,
-        alt = _node$data.alt,
-        deleteStatus = _node$data.deleteStatus,
-        loaded = _node$data.loaded,
-        percent = _node$data.percent,
-        src = _node$data.src;
-      var isLoaded = loaded !== false;
+          node = _this$props4.node,
+          editor = _this$props4.editor,
+          classes = _this$props4.classes,
+          attributes = _this$props4.attributes,
+          onFocus = _this$props4.onFocus;
+      var active = editor.value.isFocused && editor.value.selection.hasEdgeIn(node);
+      var src = node.data.get('src');
+      var loaded = node.data.get('loaded') !== false;
+      var deleteStatus = node.data.get('deleteStatus');
+      var alignment = node.data.get('alignment');
+      var percent = node.data.get('percent');
+      var alt = node.data.get('alt');
       var justifyContent;
+
       switch (alignment) {
         case 'left':
           justifyContent = 'flex-start';
           break;
+
         case 'center':
           justifyContent = 'center';
           break;
+
         case 'right':
           justifyContent = 'flex-end';
           break;
+
         default:
           justifyContent = 'flex-start';
           break;
       }
+
       log('[render] node.data:', node.data);
       var size = this.getSize(node.data);
       log('[render] style:', size);
-      var className = (0, _classnames["default"])(classes.root, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.loading, !isLoaded), (0, _defineProperty2["default"])(_classNames, classes.pendingDelete, deleteStatus === 'pending'), _classNames));
-      var progressClasses = (0, _classnames["default"])(classes.progress, (0, _defineProperty2["default"])({}, classes.hideProgress, isLoaded));
-      return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+      var className = (0, _classnames["default"])(classes.root, !loaded && classes.loading, deleteStatus === 'pending' && classes.pendingDelete);
+      var progressClasses = (0, _classnames["default"])(classes.progress, loaded && classes.hideProgress);
+      return [/*#__PURE__*/_react["default"].createElement("span", {
+        key: 'sp1'
+      }, "\xA0"), /*#__PURE__*/_react["default"].createElement("div", {
+        key: 'comp',
         onFocus: onFocus,
         className: className,
         style: {
           justifyContent: justifyContent
         }
-      }, attributes), children, /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], {
         mode: "determinate",
         value: percent > 0 ? percent : 0,
         className: progressClasses
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.imageContainer
-      }, /*#__PURE__*/_react["default"].createElement("img", {
-        className: (0, _classnames["default"])(classes.image, (0, _defineProperty2["default"])({}, classes.active, active)),
+      }, /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({}, attributes, {
+        className: (0, _classnames["default"])(classes.image, active && classes.active),
         ref: function ref(_ref2) {
           _this2.img = _ref2;
         },
@@ -282,24 +316,22 @@ var Component = /*#__PURE__*/function (_React$Component) {
         style: size,
         onLoad: this.loadImage,
         alt: alt
-      }), /*#__PURE__*/_react["default"].createElement("div", {
+      })), /*#__PURE__*/_react["default"].createElement("div", {
         ref: function ref(_ref3) {
           _this2.resize = _ref3;
         },
         className: (0, _classnames["default"])(classes.resize, 'resize')
-      })));
+      }))), /*#__PURE__*/_react["default"].createElement("span", {
+        key: 'sp2'
+      }, "\xA0")];
     }
   }]);
   return Component;
 }(_react["default"].Component);
+
 exports.Component = Component;
 (0, _defineProperty2["default"])(Component, "propTypes", {
-  node: _propTypes["default"].shape({
-    type: _propTypes["default"].string,
-    children: _propTypes["default"].array,
-    data: _propTypes["default"].object
-  }).isRequired,
-  focused: _propTypes["default"].bool,
+  node: _slatePropTypes["default"].node.isRequired,
   editor: _propTypes["default"].shape({
     change: _propTypes["default"].func.isRequired,
     value: _propTypes["default"].object
@@ -311,6 +343,7 @@ exports.Component = Component;
   maxImageWidth: _propTypes["default"].number,
   maxImageHeight: _propTypes["default"].number
 });
+
 var styles = function styles(theme) {
   return {
     portal: {
@@ -346,8 +379,7 @@ var styles = function styles(theme) {
       position: 'relative',
       border: "solid 1px ".concat(theme.palette.common.white),
       display: 'flex',
-      transition: 'opacity 200ms linear',
-      width: '100%'
+      transition: 'opacity 200ms linear'
     },
     "delete": {
       position: 'absolute',
@@ -380,6 +412,8 @@ var styles = function styles(theme) {
     }
   };
 };
+
 var _default = (0, _styles.withStyles)(styles)(Component);
+
 exports["default"] = _default;
 //# sourceMappingURL=component.js.map