@pie-lib/editable-html 11.1.2-next.0 → 11.2.0-beta.2

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

@@ -1,129 +0,0 @@
-"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 () {
-      var allDialogs = document.querySelectorAll('#text-dialog');
-      allDialogs.forEach(function (s) {
-        return s.remove();
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDone", function () {
-      var onDone = _this.props.onDone;
-      var value = _this.state.value;
-      onDone(value);
-
-      _this.closeDialog();
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOverflow", function () {
-      document.body.style.removeProperty('overflow');
-    });
-    var alt = props.alt;
-    _this.state = {
-      value: alt
-    };
-    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,
-        disablePortal: true,
-        onClose: this.closeDialog,
-        id: "text-dialog",
-        hideBackdrop: true,
-        disableScrollLock: true,
-        onEntered: this.handleOverflow
-      }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(_ArrowBackIos["default"], {
-        style: {
-          paddingTop: '6px'
-        }
-      }), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
-        multiline: true,
-        placeholder: 'Enter an Alt Text description of this image',
-        helperText: 'Users with visual limitations rely on Alt Text, since screen readers cannot otherwise describe the contents of an image.',
-        value: value,
-        onChange: function onChange(event) {
-          return _this2.setState({
-            value: event.target.value
-          });
-        },
-        FormHelperTextProps: {
-          style: {
-            fontSize: 14
-          }
-        }
-      }))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-        onClick: this.onDone
-      }, "Done")));
-    }
-  }]);
-  return AltDialog;
-}(_react["default"].Component);
-
-exports.AltDialog = AltDialog;
-(0, _defineProperty2["default"])(AltDialog, "propTypes", {
-  onDone: _propTypes["default"].func.isRequired,
-  alt: _propTypes["default"].string
-});
-var _default = AltDialog;
-exports["default"] = _default;
-//# sourceMappingURL=alt-dialog.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/plugins/image/alt-dialog.jsx"],"names":["AltDialog","props","allDialogs","document","querySelectorAll","forEach","s","remove","onDone","value","state","closeDialog","body","style","removeProperty","alt","handleOverflow","display","paddingTop","event","setState","target","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;AAAA,uGA0BF,YAAM;AACrBR,MAAAA,QAAQ,CAACS,IAAT,CAAcC,KAAd,CAAoBC,cAApB,CAAmC,UAAnC;AACD,KA5BkB;AAGjB,QAAQC,GAAR,GAAgBd,KAAhB,CAAQc,GAAR;AAEA,UAAKL,KAAL,GAAa;AACXD,MAAAA,KAAK,EAAEM;AADI,KAAb;AALiB;AAQlB;;;;WAsBD,kBAAS;AAAA;;AACP,UAAQN,KAAR,GAAkB,KAAKC,KAAvB,CAAQD,KAAR;AAEA,0BACE,gCAAC,kBAAD;AACE,QAAA,IAAI,MADN;AAEE,QAAA,aAAa,MAFf;AAGE,QAAA,OAAO,EAAE,KAAKE,WAHhB;AAIE,QAAA,EAAE,EAAC,aAJL;AAKE,QAAA,YAAY,MALd;AAME,QAAA,iBAAiB,MANnB;AAOE,QAAA,SAAS,EAAE,KAAKK;AAPlB,sBASE,gCAAC,yBAAD,qBACE;AAAK,QAAA,KAAK,EAAE;AAAEC,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,EAAET,KANT;AAOE,QAAA,QAAQ,EAAE,kBAACU,KAAD;AAAA,iBAAW,MAAI,CAACC,QAAL,CAAc;AAAEX,YAAAA,KAAK,EAAEU,KAAK,CAACE,MAAN,CAAaZ;AAAtB,WAAd,CAAX;AAAA,SAPZ;AAQE,QAAA,mBAAmB,EAAE;AAAEI,UAAAA,KAAK,EAAE;AAAES,YAAAA,QAAQ,EAAE;AAAZ;AAAT;AARvB,QAFF,CADF,CATF,eAwBE,gCAAC,yBAAD,qBACE,gCAAC,kBAAD;AAAQ,QAAA,OAAO,EAAE,KAAKd;AAAtB,gBADF,CAxBF,CADF;AA8BD;;;EArE4Be,kBAAMC,S;;;iCAAxBxB,S,eACQ;AACjBQ,EAAAA,MAAM,EAAEiB,sBAAUC,IAAV,CAAeC,UADN;AAEjBZ,EAAAA,GAAG,EAAEU,sBAAUG;AAFE,C;eAuEN5B,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  handleOverflow = () => {\n    document.body.style.removeProperty('overflow');\n  };\n\n  render() {\n    const { value } = this.state;\n\n    return (\n      <Dialog\n        open\n        disablePortal\n        onClose={this.closeDialog}\n        id=\"text-dialog\"\n        hideBackdrop\n        disableScrollLock\n        onEntered={this.handleOverflow}\n      >\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,419 +0,0 @@
-"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 _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 _styles = require("@material-ui/core/styles");
-
-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;
-      return _this.img.naturalWidth * multiplier;
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getHeight", function (percent) {
-      var multiplier = percent / 100;
-      return _this.img.naturalHeight * multiplier;
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getPercentFromWidth", function (width) {
-      var floored = width / _this.img.naturalWidth * 4;
-      return parseInt(floored.toFixed(0) * 25, 10);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "applySizeData", function () {
-      var _this$props = _this.props,
-          node = _this$props.node,
-          editor = _this$props.editor;
-      var update = node.data;
-      var w = update.get('width');
-
-      if (w) {
-        update = update.set('resizePercent', _this.getPercentFromWidth(w));
-      }
-
-      log('[applySizeData] update: ', update);
-
-      if (!update.equals(node.data)) {
-        editor.change(function (c) {
-          return c.setNodeByKey(node.key, {
-            data: update
-          });
-        });
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "initialiseResize", function () {
-      window.addEventListener('mousemove', _this.startResizing, false);
-      window.addEventListener('mouseup', _this.stopResizing, false);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "loadImage", function () {
-      var _ref = _this.props || {},
-          maxImageWidth = _ref.maxImageWidth,
-          maxImageHeight = _ref.maxImageHeight;
-
-      maxImageWidth = maxImageWidth || 700;
-      maxImageHeight = maxImageHeight || 900;
-      var box = _this.img; //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;
-
-        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 = 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
-            });
-          });
-        }
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "startResizing", function (e) {
-      var bounds = e.target.getBoundingClientRect();
-      var box = _this.img;
-      var dimensions = {
-        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;
-
-      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;
-        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
-            });
-          });
-        }
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "stopResizing", function () {
-      window.removeEventListener('mousemove', _this.startResizing, false);
-      window.removeEventListener('mouseup', _this.stopResizing, false);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateImageDimensions", function (initialDim, nextDim, keepAspectRatio, resizeType) {
-      // 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
-
-
-        return {
-          width: nextDim.width,
-          height: nextDim.width / imageAspectRatio
-        };
-      } // if we don't want to keep aspect ratio, we just update both values
-
-
-      return {
-        width: nextDim.width,
-        height: nextDim.height
-      };
-    });
-    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);
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      this.applySizeData();
-    }
-  }, {
-    key: "getSize",
-    value: function getSize(data) {
-      return {
-        width: size(data.get('width')),
-        height: size(data.get('height')),
-        objectFit: 'contain'
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props4 = this.props,
-          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, !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
-        }
-      }, /*#__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", (0, _extends2["default"])({}, attributes, {
-        className: (0, _classnames["default"])(classes.image, active && classes.active),
-        ref: function ref(_ref2) {
-          _this2.img = _ref2;
-        },
-        src: src,
-        style: size,
-        onLoad: this.loadImage,
-        alt: alt
-      })), /*#__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: _slatePropTypes["default"].node.isRequired,
-  editor: _propTypes["default"].shape({
-    change: _propTypes["default"].func.isRequired,
-    value: _propTypes["default"].object
-  }).isRequired,
-  classes: _propTypes["default"].object.isRequired,
-  attributes: _propTypes["default"].object,
-  onFocus: _propTypes["default"].func,
-  onBlur: _propTypes["default"].func,
-  maxImageWidth: _propTypes["default"].number,
-  maxImageHeight: _propTypes["default"].number
-});
-
-var styles = function styles(theme) {
-  return {
-    portal: {
-      position: 'absolute',
-      opacity: 0,
-      transition: 'opacity 200ms linear'
-    },
-    floatingButtonRow: {
-      backgroundColor: theme.palette.background.paper,
-      borderRadius: '1px',
-      display: 'flex',
-      padding: '10px',
-      border: "solid 1px ".concat(theme.palette.grey[200]),
-      boxShadow: '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)'
-    },
-    progress: {
-      position: 'absolute',
-      left: '0',
-      width: 'fit-content',
-      top: '0%',
-      transition: 'opacity 200ms linear'
-    },
-    hideProgress: {
-      opacity: 0
-    },
-    loading: {
-      opacity: 0.3
-    },
-    pendingDelete: {
-      opacity: 0.3
-    },
-    root: {
-      position: 'relative',
-      border: "solid 1px ".concat(theme.palette.common.white),
-      display: 'flex',
-      transition: 'opacity 200ms linear'
-    },
-    "delete": {
-      position: 'absolute',
-      right: 0
-    },
-    imageContainer: {
-      position: 'relative',
-      width: 'fit-content',
-      display: 'flex',
-      alignItems: 'center',
-      '&&:hover > .resize': {
-        display: 'block'
-      }
-    },
-    active: {
-      border: "solid 1px ".concat(theme.palette.primary.main)
-    },
-    resize: {
-      backgroundColor: theme.palette.primary.main,
-      cursor: 'col-resize',
-      height: '35px',
-      width: '5px',
-      borderRadius: 8,
-      marginLeft: '5px',
-      marginRight: '10px',
-      display: 'none'
-    },
-    drawableHeight: {
-      minHeight: 350
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(Component);
-
-exports["default"] = _default;
-//# sourceMappingURL=component.js.map

package/lib/plugins/image/component.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/plugins/image/component.jsx"],"names":["log","size","s","Component","percent","multiplier","img","naturalWidth","naturalHeight","width","floored","parseInt","toFixed","props","node","editor","update","data","w","get","set","getPercentFromWidth","equals","change","c","setNodeByKey","key","window","addEventListener","startResizing","stopResizing","maxImageWidth","maxImageHeight","box","style","dimensions","height","updateImageDimensions","setState","e","bounds","target","getBoundingClientRect","clientX","left","clientY","top","hasMinimumWidth","hasDimensionsConstraints","removeEventListener","initialDim","nextDim","keepAspectRatio","resizeType","imageAspectRatio","applySizeData","resizeHandle","resize","initialiseResize","objectFit","classes","attributes","onFocus","active","value","isFocused","selection","hasEdgeIn","src","loaded","deleteStatus","alignment","alt","justifyContent","getSize","className","root","loading","pendingDelete","progressClasses","progress","hideProgress","imageContainer","image","ref","loadImage","React","SlatePropTypes","isRequired","PropTypes","shape","func","object","onBlur","number","styles","theme","portal","position","opacity","transition","floatingButtonRow","backgroundColor","palette","background","paper","borderRadius","display","padding","border","grey","boxShadow","common","white","right","alignItems","primary","main","cursor","marginLeft","marginRight","drawableHeight","minHeight"],"mappings":"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","sourcesContent":["import LinearProgress from '@material-ui/core/LinearProgress';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport classNames from 'classnames';\nimport debug from 'debug';\nimport { withStyles } from '@material-ui/core/styles';\nimport SlatePropTypes from 'slate-prop-types';\n\nconst log = debug('@pie-lib:editable-html:plugins:image:component');\n\nconst size = (s) => (s ? `${s}px` : 'auto');\n\nexport class Component extends React.Component {\n  static propTypes = {\n    node: SlatePropTypes.node.isRequired,\n    editor: PropTypes.shape({\n      change: PropTypes.func.isRequired,\n      value: PropTypes.object,\n    }).isRequired,\n    classes: PropTypes.object.isRequired,\n    attributes: PropTypes.object,\n    onFocus: PropTypes.func,\n    onBlur: PropTypes.func,\n    maxImageWidth: PropTypes.number,\n    maxImageHeight: PropTypes.number,\n  };\n\n  getWidth = (percent) => {\n    const multiplier = percent / 100;\n    return this.img.naturalWidth * multiplier;\n  };\n\n  getHeight = (percent) => {\n    const multiplier = percent / 100;\n    return this.img.naturalHeight * multiplier;\n  };\n\n  getPercentFromWidth = (width) => {\n    var floored = (width / this.img.naturalWidth) * 4;\n    return parseInt(floored.toFixed(0) * 25, 10);\n  };\n\n  applySizeData = () => {\n    const { node, editor } = this.props;\n\n    let update = node.data;\n\n    const w = update.get('width');\n    if (w) {\n      update = update.set('resizePercent', this.getPercentFromWidth(w));\n    }\n\n    log('[applySizeData] update: ', update);\n\n    if (!update.equals(node.data)) {\n      editor.change((c) => c.setNodeByKey(node.key, { data: update }));\n    }\n  };\n\n  initialiseResize = () => {\n    window.addEventListener('mousemove', this.startResizing, false);\n    window.addEventListener('mouseup', this.stopResizing, false);\n  };\n\n  componentDidMount() {\n    this.applySizeData();\n\n    const resizeHandle = this.resize;\n\n    if (resizeHandle) {\n      resizeHandle.addEventListener('mousedown', this.initialiseResize, false);\n    }\n  }\n\n  componentDidUpdate() {\n    this.applySizeData();\n  }\n\n  getSize(data) {\n    return {\n      width: size(data.get('width')),\n      height: size(data.get('height')),\n      objectFit: 'contain',\n    };\n  }\n\n  loadImage = () => {\n    let { maxImageWidth, maxImageHeight } = this.props || {};\n    maxImageWidth = maxImageWidth || 700;\n    maxImageHeight = maxImageHeight || 900;\n\n    const box = this.img;\n\n    //on first load\n    if (!box.style.width || box.style.width === 'auto') {\n      const dimensions = {\n        width: (box && box.naturalWidth) || 100,\n        height: (box && box.naturalHeight) || 100,\n      };\n\n      const { width, height } = this.updateImageDimensions(\n        dimensions,\n        {\n          width: dimensions.width < maxImageWidth ? dimensions.width : maxImageWidth,\n          height: dimensions.height < maxImageHeight ? dimensions.height : maxImageHeight,\n        },\n        true,\n      );\n\n      box.style.width = `${width}px`;\n      box.style.height = `${height}px`;\n\n      this.setState({\n        dimensions: { height: height, width: width },\n      });\n\n      const { node, editor } = this.props;\n\n      let update = node.data;\n\n      update = update.set('width', width);\n      update = update.set('height', height);\n\n      if (!update.equals(node.data)) {\n        editor.change((c) => c.setNodeByKey(node.key, { data: update }));\n      }\n    }\n  };\n\n  startResizing = (e) => {\n    const bounds = e.target.getBoundingClientRect();\n    const box = this.img;\n    const dimensions = {\n      width: (box && box.naturalWidth) || 100,\n      height: (box && box.naturalHeight) || 100,\n    };\n\n    const { width, height } = this.updateImageDimensions(\n      dimensions,\n      {\n        width: e.clientX - bounds.left,\n        height: e.clientY - bounds.top,\n      },\n      true,\n    );\n\n    const hasMinimumWidth = width > 50 && height > 50;\n    const hasDimensionsConstraints = width <= 700 && height <= 900;\n\n    if (hasMinimumWidth && hasDimensionsConstraints && box) {\n      box.style.width = `${width}px`;\n      box.style.height = `${height}px`;\n\n      this.setState({\n        dimensions: { height: height, width: width },\n      });\n\n      const { node, editor } = this.props;\n\n      let update = node.data;\n\n      update = update.set('width', width);\n      update = update.set('height', height);\n\n      if (!update.equals(node.data)) {\n        editor.change((c) => c.setNodeByKey(node.key, { data: update }));\n      }\n    }\n  };\n\n  stopResizing = () => {\n    window.removeEventListener('mousemove', this.startResizing, false);\n    window.removeEventListener('mouseup', this.stopResizing, false);\n  };\n\n  updateImageDimensions = (initialDim, nextDim, keepAspectRatio, resizeType) => {\n    // if we want to keep image aspect ratio\n    if (keepAspectRatio) {\n      const imageAspectRatio = initialDim.width / initialDim.height;\n\n      if (resizeType === 'height') {\n        // if we want to change image height => we update the width accordingly\n        return {\n          width: nextDim.height * imageAspectRatio,\n          height: nextDim.height,\n        };\n      }\n\n      // if we want to change image width => we update the height accordingly\n      return {\n        width: nextDim.width,\n        height: nextDim.width / imageAspectRatio,\n      };\n    }\n\n    // if we don't want to keep aspect ratio, we just update both values\n    return {\n      width: nextDim.width,\n      height: nextDim.height,\n    };\n  };\n\n  render() {\n    const { node, editor, classes, attributes, onFocus } = this.props;\n    const active = editor.value.isFocused && editor.value.selection.hasEdgeIn(node);\n    const src = node.data.get('src');\n    const loaded = node.data.get('loaded') !== false;\n    const deleteStatus = node.data.get('deleteStatus');\n    const alignment = node.data.get('alignment');\n    const percent = node.data.get('percent');\n    const alt = node.data.get('alt');\n    let justifyContent;\n\n    switch (alignment) {\n      case 'left':\n        justifyContent = 'flex-start';\n        break;\n\n      case 'center':\n        justifyContent = 'center';\n        break;\n\n      case 'right':\n        justifyContent = 'flex-end';\n        break;\n\n      default:\n        justifyContent = 'flex-start';\n        break;\n    }\n    log('[render] node.data:', node.data);\n\n    const size = this.getSize(node.data);\n\n    log('[render] style:', size);\n\n    const className = classNames(\n      classes.root,\n      !loaded && classes.loading,\n      deleteStatus === 'pending' && classes.pendingDelete,\n    );\n\n    const progressClasses = classNames(classes.progress, loaded && classes.hideProgress);\n\n    return [\n      <span key={'sp1'}>&nbsp;</span>,\n      <div key={'comp'} onFocus={onFocus} className={className} style={{ justifyContent }}>\n        <LinearProgress mode=\"determinate\" value={percent > 0 ? percent : 0} className={progressClasses} />\n        <div className={classes.imageContainer}>\n          <img\n            {...attributes}\n            className={classNames(classes.image, active && classes.active)}\n            ref={(ref) => {\n              this.img = ref;\n            }}\n            src={src}\n            style={size}\n            onLoad={this.loadImage}\n            alt={alt}\n          />\n          <div\n            ref={(ref) => {\n              this.resize = ref;\n            }}\n            className={classNames(classes.resize, 'resize')}\n          />\n        </div>\n      </div>,\n      <span key={'sp2'}>&nbsp;</span>,\n    ];\n  }\n}\n\nconst styles = (theme) => ({\n  portal: {\n    position: 'absolute',\n    opacity: 0,\n    transition: 'opacity 200ms linear',\n  },\n  floatingButtonRow: {\n    backgroundColor: theme.palette.background.paper,\n    borderRadius: '1px',\n    display: 'flex',\n    padding: '10px',\n    border: `solid 1px ${theme.palette.grey[200]}`,\n    boxShadow:\n      '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',\n  },\n  progress: {\n    position: 'absolute',\n    left: '0',\n    width: 'fit-content',\n    top: '0%',\n    transition: 'opacity 200ms linear',\n  },\n  hideProgress: {\n    opacity: 0,\n  },\n  loading: {\n    opacity: 0.3,\n  },\n  pendingDelete: {\n    opacity: 0.3,\n  },\n  root: {\n    position: 'relative',\n    border: `solid 1px ${theme.palette.common.white}`,\n    display: 'flex',\n    transition: 'opacity 200ms linear',\n  },\n  delete: {\n    position: 'absolute',\n    right: 0,\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n    display: 'flex',\n    alignItems: 'center',\n\n    '&&:hover > .resize': {\n      display: 'block',\n    },\n  },\n  active: {\n    border: `solid 1px ${theme.palette.primary.main}`,\n  },\n  resize: {\n    backgroundColor: theme.palette.primary.main,\n    cursor: 'col-resize',\n    height: '35px',\n    width: '5px',\n    borderRadius: 8,\n    marginLeft: '5px',\n    marginRight: '10px',\n    display: 'none',\n  },\n  drawableHeight: {\n    minHeight: 350,\n  },\n});\n\nexport default withStyles(styles)(Component);\n"],"file":"component.js"}