@pie-lib/editable-html 7.17.4-next.59 → 7.17.4-next.595

package/lib/plugins/characters/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["spanishConfig","characters","specialConfig","hasPreview","unicode","description","write","label","extraProps","style","gridRow","String","fromCodePoint","characterIcons","spanish","special"],"sources":["../../../src/plugins/characters/utils.js"],"sourcesContent":["export const spanishConfig = {\n  characters: [\n    ['á', 'é', 'í', 'ó', 'ú'],\n    ['Á', 'É', 'Í', 'Ó', 'Ú'],\n    ['—', '«', '»', 'ñ', 'ü'],\n    ['-', '¿', '¡', 'Ñ', 'Ü']\n  ]\n};\n\nexport const specialConfig = {\n  hasPreview: true,\n  characters: [\n    [\n      {\n        unicode: 'U+00A2',\n        description: 'CENT SIGN',\n        write: '¢',\n        label: '¢'\n      },\n      {\n        unicode: 'U+00BF',\n        description: 'INVERTED QUESTION MARK',\n        write: '¿',\n        label: '¿'\n      },\n      {\n        unicode: 'U+00B4',\n        description: 'ACUTE ACCENT',\n        write: '´',\n        label: '´',\n        extraProps: { style: { gridRow: 'span 2' } }\n      },\n      {\n        unicode: 'U+00E1',\n        description: 'LATIN SMALL LETTER A WITH ACUTE',\n        write: 'á',\n        label: 'á'\n      },\n      {\n        unicode: 'U+00E9',\n        description: 'LATIN SMALL LETTER E WITH ACUTE',\n        write: 'é',\n        label: 'é'\n      },\n      {\n        unicode: 'U+00ED',\n        description: 'LATIN SMALL LETTER I WITH ACUTE',\n        write: 'í',\n        label: 'í'\n      },\n      {\n        unicode: 'U+00F3',\n        description: 'LATIN SMALL LETTER O WITH ACUTE',\n        write: 'ó',\n        label: 'ó'\n      },\n      {\n        unicode: 'U+00FA',\n        description: 'LATIN SMALL LETTER U WITH ACUTE',\n        write: 'ú',\n        label: 'ú'\n      },\n      {\n        unicode: 'U+00F1',\n        description: 'LATIN SMALL LETTER N WITH TILDE',\n        write: 'ñ',\n        label: 'ñ'\n      }\n    ],\n    [\n      {\n        unicode: 'U+20AC',\n        description: 'EURO SIGN',\n        write: '€',\n        label: '€'\n      },\n      {\n        unicode: 'U+00A1',\n        description: 'INVERTED EXCLAMATION MARK',\n        write: '¡',\n        label: '¡'\n      },\n      {\n        unicode: 'U+00C1',\n        description: 'LATIN CAPITAL LETTER A WITH ACUTE',\n        write: 'Á',\n        label: 'Á'\n      },\n      {\n        unicode: 'U+00C9',\n        description: 'LATIN CAPITAL LETTER E WITH ACUTE',\n        write: 'É',\n        label: 'É'\n      },\n      {\n        unicode: 'U+00CD',\n        description: 'LATIN CAPITAL LETTER I WITH ACUTE',\n        write: 'Í',\n        label: 'Í'\n      },\n      {\n        unicode: 'U+00D3',\n        description: 'LATIN CAPITAL LETTER O WITH ACUTE',\n        write: 'Ó',\n        label: 'Ó'\n      },\n      {\n        unicode: 'U+00DA',\n        description: 'LATIN CAPITAL LETTER U WITH ACUTE',\n        write: 'Ú',\n        label: 'Ú'\n      },\n      {\n        unicode: 'U+00D1',\n        description: 'LATIN CAPITAL LETTER N WITH TILDE',\n        write: 'Ñ',\n        label: 'Ñ'\n      }\n    ],\n    [\n      {\n        unicode: 'U+00A3',\n        description: 'POUND SIGN',\n        write: '£',\n        label: '£'\n      },\n      {\n        unicode: 'U+00AB',\n        description: 'LEFT-POINTING DOUBLE ANGLE QUOTATION MARK',\n        write: '«',\n        label: '«'\n      },\n      {\n        unicode: 'U+005E',\n        description: 'CIRCUMFLEX ACCENT',\n        write: '^',\n        label: '^',\n        extraProps: { style: { gridRow: 'span 2' } }\n      },\n      {\n        unicode: 'U+00E2',\n        description: 'LATIN SMALL LETTER A WITH CIRCUMFLEX',\n        write: 'â',\n        label: 'â'\n      },\n      {\n        unicode: 'U+00EA',\n        description: 'LATIN SMALL LETTER E WITH CIRCUMFLEX',\n        write: 'ê',\n        label: 'ê'\n      },\n      {\n        unicode: 'U+00EE',\n        description: 'LATIN SMALL LETTER I WITH CIRCUMFLEX',\n        write: 'î',\n        label: 'î'\n      },\n      {\n        unicode: 'U+00F4',\n        description: 'LATIN SMALL LETTER O WITH CIRCUMFLEX',\n        write: 'ô',\n        label: 'ô'\n      },\n      {\n        unicode: 'U+00FB',\n        description: 'LATIN SMALL LETTER U WITH CIRCUMFLEX',\n        write: 'û',\n        label: 'û'\n      },\n      {\n        unicode: 'U+00E7',\n        description: 'LATIN SMALL LETTER C WITH CEDILLA',\n        write: 'ç',\n        label: 'ç'\n      }\n    ],\n    [\n      {\n        unicode: 'U+00A5',\n        description: 'YEN SIGN',\n        write: '¥',\n        label: '¥'\n      },\n      {\n        unicode: 'U+00BB',\n        description: 'RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK',\n        write: '»',\n        label: '»'\n      },\n      {\n        unicode: 'U+00C2',\n        description: 'LATIN CAPITAL LETTER A WITH CIRCUMFLEX',\n        write: 'Â',\n        label: 'Â'\n      },\n      {\n        unicode: 'U+00CA',\n        description: 'LATIN CAPITAL LETTER E WITH CIRCUMFLEX',\n        write: 'Ê',\n        label: 'Ê'\n      },\n      {\n        unicode: 'U+00CE',\n        description: 'LATIN CAPITAL LETTER I WITH CIRCUMFLEX',\n        write: 'Î',\n        label: 'Î'\n      },\n      {\n        unicode: 'U+00D4',\n        description: 'LATIN CAPITAL LETTER O WITH CIRCUMFLEX',\n        write: 'Ô',\n        label: 'Ô'\n      },\n      {\n        unicode: 'U+00DB',\n        description: 'LATIN CAPITAL LETTER U WITH CIRCUMFLEX',\n        write: 'Û',\n        label: 'Û'\n      },\n      {\n        unicode: 'U+00C7',\n        description: 'LATIN CAPITAL LETTER C WITH CEDILLA',\n        write: 'Ç',\n        label: 'Ç'\n      }\n    ],\n    [\n      {\n        unicode: 'U+00A0',\n        description: 'NO-BREAK SPACE',\n        write: String.fromCodePoint('0x00A0'),\n        label: ' '\n      },\n      {\n        unicode: 'U+00A7',\n        description: 'SECTION SIGN',\n        write: '§',\n        label: '§'\n      },\n      {\n        unicode: 'U+00A8',\n        description: 'DIAERESIS',\n        write: '¨',\n        label: '¨',\n        extraProps: { style: { gridRow: 'span 2' } }\n      },\n      {\n        unicode: 'U+00E4',\n        description: 'LATIN SMALL LETTER A WITH DIAERESIS',\n        write: 'ä',\n        label: 'ä'\n      },\n      {\n        unicode: 'U+00EB',\n        description: 'LATIN SMALL LETTER E WITH DIAERESIS',\n        write: 'ë',\n        label: 'ë'\n      },\n      {\n        unicode: 'U+00EF',\n        description: 'LATIN SMALL LETTER I WITH DIAERESIS',\n        write: 'ï',\n        label: 'ï'\n      },\n      {\n        unicode: 'U+00F6',\n        description: 'LATIN SMALL LETTER O WITH DIAERESIS',\n        write: 'ö',\n        label: 'ö'\n      },\n      {\n        unicode: 'U+00FC',\n        description: 'LATIN SMALL LETTER U WITH DIAERESIS',\n        write: 'ü',\n        label: 'ü'\n      },\n      {\n        unicode: 'U+00DF',\n        description: 'LATIN SMALL LETTER SHARP S',\n        write: 'ß',\n        label: 'ß'\n      }\n    ],\n    [\n      {\n        unicode: 'U+2009',\n        description: 'THIN SPACE',\n        write: String.fromCodePoint('0x2009'),\n        label: ' '\n      },\n      {\n        unicode: 'U+2026',\n        description: 'HORIZONTAL ELLIPSIS',\n        write: '…',\n        label: '…'\n      },\n      {\n        unicode: 'U+00C4',\n        description: 'LATIN CAPITAL LETTER A WITH DIAERESIS',\n        write: 'Ä',\n        label: 'Ä'\n      },\n      {\n        unicode: 'U+00CB',\n        description: 'LATIN CAPITAL LETTER E WITH DIAERESIS',\n        write: 'Ë',\n        label: 'Ë'\n      },\n      {\n        unicode: 'U+00CF',\n        description: 'LATIN CAPITAL LETTER I WITH DIAERESIS',\n        write: 'Ï',\n        label: 'Ï'\n      },\n      {\n        unicode: 'U+00D6',\n        description: 'LATIN CAPITAL LETTER O WITH DIAERESIS',\n        write: 'Ö',\n        label: 'Ö'\n      },\n      {\n        unicode: 'U+00DC',\n        description: 'LATIN CAPITAL LETTER U WITH DIAERESIS',\n        write: 'Ü',\n        label: 'Ü'\n      },\n      {\n        unicode: 'U+2212',\n        description: 'MINUS SIGN',\n        write: '−',\n        label: '−'\n      }\n    ],\n    [\n      {\n        unicode: 'U+200A',\n        description: 'HAIR SPACE',\n        write: String.fromCodePoint('0x200A'),\n        label: ' '\n      },\n      {\n        unicode: 'U+2022',\n        description: 'BULLET',\n        write: '•',\n        label: '•'\n      },\n      {\n        unicode: 'U+0060',\n        description: 'GRAVE ACCENT',\n        write: '`',\n        label: '`',\n        extraProps: { style: { gridRow: 'span 2' } }\n      },\n      {\n        unicode: 'U+00E0',\n        description: 'LATIN SMALL LETTER A WITH GRAVE',\n        write: 'à',\n        label: 'à'\n      },\n      {\n        unicode: 'U+00E8',\n        description: 'LATIN SMALL LETTER E WITH GRAVE',\n        write: 'è',\n        label: 'è'\n      },\n      {\n        unicode: 'U+00EC',\n        description: 'LATIN SMALL LETTER I WITH GRAVE',\n        write: 'ì',\n        label: 'ì'\n      },\n      {\n        unicode: 'U+00F2',\n        description: 'LATIN SMALL LETTER O WITH GRAVE',\n        write: 'ò',\n        label: 'ò'\n      },\n      {\n        unicode: 'U+00F9',\n        description: 'LATIN SMALL LETTER U WITH GRAVE',\n        write: 'ù',\n        label: 'ù'\n      },\n      {\n        unicode: 'U+2013',\n        description: 'EN DASH',\n        write: '–',\n        label: '–'\n      }\n    ],\n    [\n      {\n        unicode: 'U+0009',\n        description: 'TAB',\n        write: String.fromCodePoint('0x0009'),\n        label: 'TAB'\n      },\n      {\n        unicode: 'U+25E6',\n        description: 'WHITE BULLET',\n        write: '◦',\n        label: '◦'\n      },\n      {\n        unicode: 'U+00C0',\n        description: 'LATIN CAPITAL LETTER A WITH GRAVE',\n        write: 'À',\n        label: 'À'\n      },\n      {\n        unicode: 'U+00C8',\n        description: 'LATIN CAPITAL LETTER E WITH GRAVE',\n        write: 'È',\n        label: 'È'\n      },\n      {\n        unicode: 'U+00CC',\n        description: 'LATIN CAPITAL LETTER I WITH GRAVE',\n        write: 'Ì',\n        label: 'Ì'\n      },\n      {\n        unicode: 'U+00D2',\n        description: 'LATIN CAPITAL LETTER O WITH GRAVE',\n        write: 'Ò',\n        label: 'Ò'\n      },\n      {\n        unicode: 'U+00D9',\n        description: 'LATIN CAPITAL LETTER U WITH GRAVE',\n        write: 'Ù',\n        label: 'Ù'\n      },\n      {\n        unicode: 'U+2014',\n        description: 'EM DASH',\n        write: '—',\n        label: '—'\n      }\n    ]\n  ]\n};\n\nexport const characterIcons = {\n  spanish: 'ñ',\n  special: '€'\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,119 @@
+"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();
+    });
+    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
+      }, /*#__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
+          });
+        }
+      }))), /*#__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

@@ -0,0 +1 @@
+{"version":3,"file":"alt-dialog.js","names":["AltDialog","props","allDialogs","document","querySelectorAll","forEach","s","remove","onDone","value","state","closeDialog","alt","display","paddingTop","event","setState","target","React","Component","PropTypes","func","isRequired","string"],"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            />\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":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEaA,S;;;;;EAMX,mBAAYC,KAAZ,EAAmB;IAAA;;IAAA;IACjB,0BAAMA,KAAN;IADiB,gGAUL,YAAM;MAClB,IAAMC,UAAU,GAAGC,QAAQ,CAACC,gBAAT,CAA0B,cAA1B,CAAnB;MAEAF,UAAU,CAACG,OAAX,CAAmB,UAASC,CAAT,EAAY;QAC7B,OAAOA,CAAC,CAACC,MAAF,EAAP;MACD,CAFD;IAGD,CAhBkB;IAAA,2FAkBV,YAAM;MACb,IAAQC,MAAR,GAAmB,MAAKP,KAAxB,CAAQO,MAAR;MACA,IAAQC,KAAR,GAAkB,MAAKC,KAAvB,CAAQD,KAAR;MAEAD,MAAM,CAACC,KAAD,CAAN;;MACA,MAAKE,WAAL;IACD,CAxBkB;IAGjB,IAAQC,GAAR,GAAgBX,KAAhB,CAAQW,GAAR;IAEA,MAAKF,KAAL,GAAa;MACXD,KAAK,EAAEG;IADI,CAAb;IALiB;EAQlB;;;;WAkBD,kBAAS;MAAA;;MACP,IAAQH,KAAR,GAAkB,KAAKC,KAAvB,CAAQD,KAAR;MAEA,oBACE,gCAAC,kBAAD;QAAQ,IAAI,MAAZ;QAAa,aAAa,MAA1B;QAA2B,OAAO,EAAE,KAAKE,WAAzC;QAAsD,EAAE,EAAC,aAAzD;QAAuE,YAAY;MAAnF,gBACE,gCAAC,yBAAD,qBACE;QAAK,KAAK,EAAE;UAAEE,OAAO,EAAE;QAAX;MAAZ,gBACE,gCAAC,wBAAD;QAAc,KAAK,EAAE;UAAEC,UAAU,EAAE;QAAd;MAArB,EADF,eAEE,gCAAC,qBAAD;QACE,SAAS,MADX;QAEE,WAAW,EAAE,6CAFf;QAGE,UAAU,EACR,0HAJJ;QAME,KAAK,EAAEL,KANT;QAOE,QAAQ,EAAE,kBAAAM,KAAK;UAAA,OAAI,MAAI,CAACC,QAAL,CAAc;YAAEP,KAAK,EAAEM,KAAK,CAACE,MAAN,CAAaR;UAAtB,CAAd,CAAJ;QAAA;MAPjB,EAFF,CADF,CADF,eAeE,gCAAC,yBAAD,qBACE,gCAAC,kBAAD;QAAQ,OAAO,EAAE,KAAKD;MAAtB,UADF,CAfF,CADF;IAqBD;;;EAxD4BU,iBAAA,CAAMC,S;;;iCAAxBnB,S,eACQ;EACjBQ,MAAM,EAAEY,qBAAA,CAAUC,IAAV,CAAeC,UADN;EAEjBV,GAAG,EAAEQ,qBAAA,CAAUG;AAFE,C;eA0DNvB,S"}

package/lib/plugins/image/component.js

@@ -1,47 +1,45 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Component = void 0;
 
-var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearProgress"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _react = _interopRequireDefault(require("react"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _debug = _interopRequireDefault(require("debug"));
-
-var _styles = require("@material-ui/core/styles");
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
-var _slatePropTypes = _interopRequireDefault(require("slate-prop-types"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearProgress"));
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+var _react = _interopRequireDefault(require("react"));
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+var _classnames = _interopRequireDefault(require("classnames"));
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+var _debug = _interopRequireDefault(require("debug"));
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+var _styles = require("@material-ui/core/styles");
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+var _slatePropTypes = _interopRequireDefault(require("slate-prop-types"));
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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');
 
@@ -49,56 +47,42 @@ var size = function size(s) {
   return s ? "".concat(s, "px") : 'auto';
 };
 
-var Component =
-/*#__PURE__*/
-function (_React$Component) {
-  _inherits(Component, _React$Component);
+var Component = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Component, _React$Component);
 
-  function Component() {
-    var _getPrototypeOf2;
+  var _super = _createSuper(Component);
 
+  function Component() {
     var _this;
 
-    _classCallCheck(this, Component);
+    (0, _classCallCheck2["default"])(this, Component);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Component)).call.apply(_getPrototypeOf2, [this].concat(args)));
-
-    _defineProperty(_assertThisInitialized(_this), "getWidth", function (percent) {
+    _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;
     });
-
-    _defineProperty(_assertThisInitialized(_this), "getHeight", function (percent) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getHeight", function (percent) {
       var multiplier = percent / 100;
       return _this.img.naturalHeight * multiplier;
     });
-
-    _defineProperty(_assertThisInitialized(_this), "getPercentFromWidth", function (width) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getPercentFromWidth", function (width) {
       var floored = width / _this.img.naturalWidth * 4;
       return parseInt(floored.toFixed(0) * 25, 10);
     });
-
-    _defineProperty(_assertThisInitialized(_this), "applySizeData", function () {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "applySizeData", function () {
       var _this$props = _this.props,
           node = _this$props.node,
           editor = _this$props.editor;
-      var resizePercent = node.data.get('resizePercent');
-      log('[applySizeData]: resizePercent: ', resizePercent);
       var update = node.data;
+      var w = update.get('width');
 
-      if (resizePercent) {
-        update = update.set('width', _this.getWidth(resizePercent));
-        update = update.set('height', _this.getHeight(resizePercent));
-      } else {
-        var w = update.get('width');
-
-        if (w) {
-          update = update.set('resizePercent', _this.getPercentFromWidth(w));
-        }
+      if (w) {
+        update = update.set('resizePercent', _this.getPercentFromWidth(w));
       }
 
       log('[applySizeData] update: ', update);
@@ -111,14 +95,145 @@ function (_React$Component) {
         });
       }
     });
+    (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;
   }
 
-  _createClass(Component, [{
+  (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",
@@ -139,51 +254,88 @@ function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      var _this$props2 = this.props,
-          node = _this$props2.node,
-          editor = _this$props2.editor,
-          classes = _this$props2.classes,
-          attributes = _this$props2.attributes,
-          onFocus = _this$props2.onFocus;
+      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 percent = node.data.get('percent');
       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 margin;
+      var justifyContent;
+
+      switch (alignment) {
+        case 'left':
+          justifyContent = 'flex-start';
+          margin = '0';
+          break;
+
+        case 'center':
+          justifyContent = 'center';
+          margin = '0 auto';
+          break;
+
+        case 'right':
+          justifyContent = 'flex-end';
+          margin = 'auto 0 0 auto ';
+          break;
+
+        default:
+          justifyContent = 'flex-start';
+          margin = '0';
+          break;
+      }
+
       log('[render] node.data:', node.data);
       var size = this.getSize(node.data);
       log('[render] style:', size);
-      var className = (0, _classnames["default"])(classes.root, active && classes.active, !loaded && classes.loading, deleteStatus === 'pending' && classes.pendingDelete);
+      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 [_react["default"].createElement("span", {
+      return [/*#__PURE__*/_react["default"].createElement("span", {
         key: 'sp1'
-      }, "\xA0"), _react["default"].createElement("div", {
+      }, "\xA0"), /*#__PURE__*/_react["default"].createElement("div", {
         key: 'comp',
         onFocus: onFocus,
-        className: className
-      }, _react["default"].createElement(_LinearProgress["default"], {
+        className: className,
+        style: {
+          justifyContent: justifyContent
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], {
         mode: "determinate",
         value: percent > 0 ? percent : 0,
         className: progressClasses
-      }), _react["default"].createElement("img", _extends({
-        src: src
-      }, attributes, {
-        ref: function ref(r) {
-          return _this2.img = r;
+      }), /*#__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;
         },
-        style: size
-      }))), _react["default"].createElement("span", {
+        className: (0, _classnames["default"])(classes.resize, 'resize')
+      }))), /*#__PURE__*/_react["default"].createElement("span", {
         key: 'sp2'
       }, "\xA0")];
     }
   }]);
-
   return Component;
 }(_react["default"].Component);
 
 exports.Component = Component;
-
-_defineProperty(Component, "propTypes", {
+(0, _defineProperty2["default"])(Component, "propTypes", {
   node: _slatePropTypes["default"].node.isRequired,
   editor: _propTypes["default"].shape({
     change: _propTypes["default"].func.isRequired,
@@ -192,7 +344,9 @@ _defineProperty(Component, "propTypes", {
   classes: _propTypes["default"].object.isRequired,
   attributes: _propTypes["default"].object,
   onFocus: _propTypes["default"].func,
-  onBlur: _propTypes["default"].func
+  onBlur: _propTypes["default"].func,
+  maxImageWidth: _propTypes["default"].number,
+  maxImageHeight: _propTypes["default"].number
 });
 
 var styles = function styles(theme) {
@@ -213,7 +367,7 @@ var styles = function styles(theme) {
     progress: {
       position: 'absolute',
       left: '0',
-      width: '100%',
+      width: 'fit-content',
       top: '0%',
       transition: 'opacity 200ms linear'
     },
@@ -229,15 +383,37 @@ var styles = function styles(theme) {
     root: {
       position: 'relative',
       border: 'solid 1px white',
-      display: 'inline-block',
+      display: 'flex',
       transition: 'opacity 200ms linear'
     },
-    active: {
-      border: "solid 1px ".concat(theme.palette.primary.main)
-    },
     "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
     }
   };
 };