@pie-element/complex-rubric 3.8.4-next.9 → 5.0.1-esmbeta.0

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/lib/plugins/html/index.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = HtmlPlugin;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _icons = _interopRequireDefault(require("./icons"));
+
+var _serialization = require("./../../serialization");
+
+var toggleToRichText = function toggleToRichText(value, onChange, dismiss) {
+  var plainText = value.document.text;
+  var slateValue = dismiss ? value : (0, _serialization.htmlToValue)(plainText);
+  var change = value.change().selectAll()["delete"]().insertFragment(slateValue.document);
+  onChange(change);
+};
+
+function HtmlPlugin(opts) {
+  var isHtmlMode = opts.isHtmlMode,
+      isEditedInHtmlMode = opts.isEditedInHtmlMode,
+      toggleHtmlMode = opts.toggleHtmlMode,
+      handleAlertDialog = opts.handleAlertDialog,
+      currentValue = opts.currentValue;
+
+  var handleHtmlModeOn = function handleHtmlModeOn(value, onChange) {
+    var dialogProps = {
+      title: 'Warning',
+      text: 'Returning to rich text mode without saving will cause edits to be lost.',
+      onConfirmText: 'Dismiss changes',
+      onCloseText: 'Continue Editing',
+      onConfirm: function onConfirm() {
+        handleAlertDialog(false);
+        toggleToRichText(currentValue, onChange, true);
+        toggleHtmlMode();
+      },
+      onClose: function onClose() {
+        handleAlertDialog(false);
+      }
+    };
+    handleAlertDialog(true, dialogProps);
+  };
+
+  var handleHtmlModeOff = function handleHtmlModeOff(value, onChange) {
+    var change = value.change().selectAll()["delete"]().insertText((0, _serialization.valueToHtml)(value));
+    onChange(change);
+  };
+
+  return {
+    name: 'html',
+    toolbar: {
+      icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+        isHtmlMode: isHtmlMode
+      }),
+      ariaLabel: 'Html editor',
+      buttonStyles: {
+        margin: '0 20px 0 auto'
+      },
+      type: 'html',
+      onClick: function onClick(value, onChange) {
+        if (isHtmlMode) {
+          if (isEditedInHtmlMode) {
+            handleHtmlModeOn(value, onChange);
+          } else {
+            toggleToRichText(value, onChange);
+            toggleHtmlMode();
+          }
+        } else {
+          handleHtmlModeOff(value, onChange);
+          toggleHtmlMode();
+        }
+      }
+    }
+  };
+}
+//# sourceMappingURL=index.js.map

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/lib/plugins/html/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plugins/html/index.jsx"],"names":["toggleToRichText","value","onChange","dismiss","plainText","document","text","slateValue","change","selectAll","insertFragment","HtmlPlugin","opts","isHtmlMode","isEditedInHtmlMode","toggleHtmlMode","handleAlertDialog","currentValue","handleHtmlModeOn","dialogProps","title","onConfirmText","onCloseText","onConfirm","onClose","handleHtmlModeOff","insertText","name","toolbar","icon","ariaLabel","buttonStyles","margin","type","onClick"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAQC,QAAR,EAAkBC,OAAlB,EAA8B;AACrD,MAAMC,SAAS,GAAGH,KAAK,CAACI,QAAN,CAAeC,IAAjC;AACA,MAAMC,UAAU,GAAGJ,OAAO,GAAGF,KAAH,GAAW,gCAAYG,SAAZ,CAArC;AAEA,MAAMI,MAAM,GAAGP,KAAK,CACjBO,MADY,GAEZC,SAFY,eAIZC,cAJY,CAIGH,UAAU,CAACF,QAJd,CAAf;AAKAH,EAAAA,QAAQ,CAACM,MAAD,CAAR;AACD,CAVD;;AAYe,SAASG,UAAT,CAAoBC,IAApB,EAA0B;AACvC,MAAQC,UAAR,GAA4FD,IAA5F,CAAQC,UAAR;AAAA,MAAoBC,kBAApB,GAA4FF,IAA5F,CAAoBE,kBAApB;AAAA,MAAwCC,cAAxC,GAA4FH,IAA5F,CAAwCG,cAAxC;AAAA,MAAwDC,iBAAxD,GAA4FJ,IAA5F,CAAwDI,iBAAxD;AAAA,MAA2EC,YAA3E,GAA4FL,IAA5F,CAA2EK,YAA3E;;AAEA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACjB,KAAD,EAAQC,QAAR,EAAqB;AAC5C,QAAMiB,WAAW,GAAG;AAClBC,MAAAA,KAAK,EAAE,SADW;AAElBd,MAAAA,IAAI,EAAE,yEAFY;AAGlBe,MAAAA,aAAa,EAAE,iBAHG;AAIlBC,MAAAA,WAAW,EAAE,kBAJK;AAKlBC,MAAAA,SAAS,EAAE,qBAAM;AACfP,QAAAA,iBAAiB,CAAC,KAAD,CAAjB;AACAhB,QAAAA,gBAAgB,CAACiB,YAAD,EAAef,QAAf,EAAyB,IAAzB,CAAhB;AACAa,QAAAA,cAAc;AACf,OATiB;AAUlBS,MAAAA,OAAO,EAAE,mBAAM;AACbR,QAAAA,iBAAiB,CAAC,KAAD,CAAjB;AACD;AAZiB,KAApB;AAeAA,IAAAA,iBAAiB,CAAC,IAAD,EAAOG,WAAP,CAAjB;AACD,GAjBD;;AAmBA,MAAMM,iBAAiB,GAAG,SAApBA,iBAAoB,CAACxB,KAAD,EAAQC,QAAR,EAAqB;AAC7C,QAAMM,MAAM,GAAGP,KAAK,CACjBO,MADY,GAEZC,SAFY,eAIZiB,UAJY,CAID,gCAAYzB,KAAZ,CAJC,CAAf;AAKAC,IAAAA,QAAQ,CAACM,MAAD,CAAR;AACD,GAPD;;AASA,SAAO;AACLmB,IAAAA,IAAI,EAAE,MADD;AAELC,IAAAA,OAAO,EAAE;AACPC,MAAAA,IAAI,eAAE,gCAAC,iBAAD;AAAc,QAAA,UAAU,EAAEhB;AAA1B,QADC;AAEPiB,MAAAA,SAAS,EAAE,aAFJ;AAGPC,MAAAA,YAAY,EAAE;AACZC,QAAAA,MAAM,EAAE;AADI,OAHP;AAMPC,MAAAA,IAAI,EAAE,MANC;AAOPC,MAAAA,OAAO,EAAE,iBAACjC,KAAD,EAAQC,QAAR,EAAqB;AAC5B,YAAIW,UAAJ,EAAgB;AACd,cAAIC,kBAAJ,EAAwB;AACtBI,YAAAA,gBAAgB,CAACjB,KAAD,EAAQC,QAAR,CAAhB;AACD,WAFD,MAEO;AACLF,YAAAA,gBAAgB,CAACC,KAAD,EAAQC,QAAR,CAAhB;AACAa,YAAAA,cAAc;AACf;AACF,SAPD,MAOO;AACLU,UAAAA,iBAAiB,CAACxB,KAAD,EAAQC,QAAR,CAAjB;AACAa,UAAAA,cAAc;AACf;AACF;AAnBM;AAFJ,GAAP;AAwBD","sourcesContent":["import React from 'react';\nimport HtmlModeIcon from './icons';\nimport { htmlToValue, valueToHtml } from './../../serialization';\n\nconst toggleToRichText = (value, onChange, dismiss) => {\n  const plainText = value.document.text;\n  const slateValue = dismiss ? value : htmlToValue(plainText);\n\n  const change = value\n    .change()\n    .selectAll()\n    .delete()\n    .insertFragment(slateValue.document);\n  onChange(change);\n};\n\nexport default function HtmlPlugin(opts) {\n  const { isHtmlMode, isEditedInHtmlMode, toggleHtmlMode, handleAlertDialog, currentValue } = opts;\n\n  const handleHtmlModeOn = (value, onChange) => {\n    const dialogProps = {\n      title: 'Warning',\n      text: 'Returning to rich text mode without saving will cause edits to be lost.',\n      onConfirmText: 'Dismiss changes',\n      onCloseText: 'Continue Editing',\n      onConfirm: () => {\n        handleAlertDialog(false);\n        toggleToRichText(currentValue, onChange, true);\n        toggleHtmlMode();\n      },\n      onClose: () => {\n        handleAlertDialog(false);\n      },\n    };\n\n    handleAlertDialog(true, dialogProps);\n  };\n\n  const handleHtmlModeOff = (value, onChange) => {\n    const change = value\n      .change()\n      .selectAll()\n      .delete()\n      .insertText(valueToHtml(value));\n    onChange(change);\n  };\n\n  return {\n    name: 'html',\n    toolbar: {\n      icon: <HtmlModeIcon isHtmlMode={isHtmlMode} />,\n      ariaLabel: 'Html editor',\n      buttonStyles: {\n        margin: '0 20px 0 auto',\n      },\n      type: 'html',\n      onClick: (value, onChange) => {\n        if (isHtmlMode) {\n          if (isEditedInHtmlMode) {\n            handleHtmlModeOn(value, onChange);\n          } else {\n            toggleToRichText(value, onChange);\n            toggleHtmlMode();\n          }\n        } else {\n          handleHtmlModeOff(value, onChange);\n          toggleHtmlMode();\n        }\n      },\n    },\n  };\n}\n"],"file":"index.js"}

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/lib/plugins/image/alt-dialog.js

@@ -0,0 +1,129 @@
+"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/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/lib/plugins/image/alt-dialog.js.map

@@ -0,0 +1 @@
+{"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/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/lib/plugins/image/component.js

@@ -0,0 +1,419 @@
+"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