@pie-lib/editable-html 12.1.0-next.2 → 12.1.0-next.30

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

@@ -0,0 +1,105 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.reflect.construct.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.AltDialog = void 0;
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
+var _ArrowBackIos = _interopRequireDefault(require("@mui/icons-material/ArrowBackIos"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var AltDialog = exports.AltDialog = /*#__PURE__*/function (_React$Component) {
+  function AltDialog(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, AltDialog);
+    _this = _callSuper(this, AltDialog, [props]);
+    (0, _defineProperty2["default"])(_this, "closeDialog", function () {
+      var allDialogs = document.querySelectorAll('#text-dialog');
+      allDialogs.forEach(function (s) {
+        return s.remove();
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "onDone", function () {
+      var onDone = _this.props.onDone;
+      var value = _this.state.value;
+      onDone(value);
+      _this.closeDialog();
+    });
+    (0, _defineProperty2["default"])(_this, "handleOverflow", function () {
+      document.body.style.removeProperty('overflow');
+    });
+    var alt = props.alt;
+    _this.state = {
+      value: alt
+    };
+    return _this;
+  }
+  (0, _inherits2["default"])(AltDialog, _React$Component);
+  return (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,
+        TransitionProps: {
+          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")));
+    }
+  }]);
+}(_react["default"].Component);
+(0, _defineProperty2["default"])(AltDialog, "propTypes", {
+  onDone: _propTypes["default"].func.isRequired,
+  alt: _propTypes["default"].string
+});
+var _default = exports["default"] = AltDialog;
+//# sourceMappingURL=alt-dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alt-dialog.js","names":["_react","_interopRequireDefault","require","_DialogContent","_ArrowBackIos","_TextField","_DialogActions","_Button","_Dialog","_propTypes","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","AltDialog","exports","_React$Component","props","_this","_classCallCheck2","_defineProperty2","allDialogs","document","querySelectorAll","forEach","s","remove","onDone","value","state","closeDialog","body","style","removeProperty","alt","_inherits2","_createClass2","key","render","_this2","createElement","open","disablePortal","onClose","id","hideBackdrop","disableScrollLock","TransitionProps","onEntered","handleOverflow","display","paddingTop","multiline","placeholder","helperText","onChange","event","setState","target","FormHelperTextProps","fontSize","onClick","React","Component","PropTypes","func","isRequired","string","_default"],"sources":["../../../src/plugins/image/alt-dialog.jsx"],"sourcesContent":["import React from 'react';\nimport DialogContent from '@mui/material/DialogContent';\nimport ArrowBackIos from '@mui/icons-material/ArrowBackIos';\nimport TextField from '@mui/material/TextField';\nimport DialogActions from '@mui/material/DialogActions';\nimport Button from '@mui/material/Button';\nimport Dialog from '@mui/material/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        TransitionProps={{\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"],"mappings":"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","ignoreList":[]}

package/lib/plugins/image/component.js

@@ -0,0 +1,357 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.reflect.construct.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Component = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.number.to-fixed.js");
+require("core-js/modules/es.parse-int.js");
+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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _debug = _interopRequireDefault(require("debug"));
+var _styles = require("@mui/material/styles");
+var _slatePropTypes = _interopRequireDefault(require("slate-prop-types"));
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:image:component');
+var size = function size(s) {
+  return s ? "".concat(s, "px") : 'auto';
+};
+var StyledImageRoot = (0, _styles.styled)('div')(function (_ref) {
+  var theme = _ref.theme,
+    loading = _ref.loading;
+  return _objectSpread({
+    position: 'relative',
+    border: "solid 1px ".concat(theme.palette.common.white),
+    display: 'flex',
+    transition: 'opacity 200ms linear'
+  }, loading && {
+    opacity: 0.3
+  });
+});
+var StyledProgress = (0, _styles.styled)(_LinearProgress["default"])(function (_ref2) {
+  var hide = _ref2.hide;
+  return _objectSpread({
+    position: 'absolute',
+    left: '0',
+    width: 'fit-content',
+    top: '0%',
+    transition: 'opacity 200ms linear'
+  }, hide && {
+    opacity: 0
+  });
+});
+var StyledImageContainer = (0, _styles.styled)('div')(function () {
+  return {
+    position: 'relative',
+    width: 'fit-content',
+    display: 'flex',
+    alignItems: 'center',
+    '&&:hover > .resize': {
+      display: 'block'
+    }
+  };
+});
+var StyledImage = (0, _styles.styled)('img')(function (_ref3) {
+  var theme = _ref3.theme,
+    active = _ref3.active;
+  return _objectSpread({}, active && {
+    border: "solid 1px ".concat(theme.palette.primary.main)
+  });
+});
+var StyledResize = (0, _styles.styled)('div')(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    backgroundColor: theme.palette.primary.main,
+    cursor: 'col-resize',
+    height: '35px',
+    width: '5px',
+    borderRadius: 8,
+    marginLeft: '5px',
+    marginRight: '10px',
+    display: 'none'
+  };
+});
+var Component = exports.Component = /*#__PURE__*/function (_React$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 = _callSuper(this, Component, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "getWidth", function (percent) {
+      var multiplier = percent / 100;
+      return _this.img.naturalWidth * multiplier;
+    });
+    (0, _defineProperty2["default"])(_this, "getHeight", function (percent) {
+      var multiplier = percent / 100;
+      return _this.img.naturalHeight * multiplier;
+    });
+    (0, _defineProperty2["default"])(_this, "getPercentFromWidth", function (width) {
+      var floored = width / _this.img.naturalWidth * 4;
+      return parseInt(floored.toFixed(0) * 25, 10);
+    });
+    (0, _defineProperty2["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"])(_this, "initialiseResize", function () {
+      window.addEventListener('mousemove', _this.startResizing, false);
+      window.addEventListener('mouseup', _this.stopResizing, false);
+    });
+    (0, _defineProperty2["default"])(_this, "loadImage", function () {
+      var _ref5 = _this.props || {},
+        maxImageWidth = _ref5.maxImageWidth,
+        maxImageHeight = _ref5.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"])(_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"])(_this, "stopResizing", function () {
+      window.removeEventListener('mousemove', _this.startResizing, false);
+      window.removeEventListener('mouseup', _this.stopResizing, false);
+    });
+    (0, _defineProperty2["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, _inherits2["default"])(Component, _React$Component);
+  return (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,
+        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);
+      return [/*#__PURE__*/_react["default"].createElement("span", {
+        key: 'sp1'
+      }, "\xA0"), /*#__PURE__*/_react["default"].createElement(StyledImageRoot, {
+        key: 'comp',
+        onFocus: onFocus,
+        style: {
+          justifyContent: justifyContent
+        },
+        loading: !loaded || deleteStatus === 'pending'
+      }, /*#__PURE__*/_react["default"].createElement(StyledProgress, {
+        mode: "determinate",
+        value: percent > 0 ? percent : 0,
+        hide: loaded
+      }), /*#__PURE__*/_react["default"].createElement(StyledImageContainer, null, /*#__PURE__*/_react["default"].createElement(StyledImage, (0, _extends2["default"])({}, attributes, {
+        active: active,
+        ref: function ref(_ref6) {
+          _this2.img = _ref6;
+        },
+        src: src,
+        style: size,
+        onLoad: this.loadImage,
+        alt: alt
+      })), /*#__PURE__*/_react["default"].createElement(StyledResize, {
+        ref: function ref(_ref7) {
+          _this2.resize = _ref7;
+        },
+        className: "resize"
+      }))), /*#__PURE__*/_react["default"].createElement("span", {
+        key: 'sp2'
+      }, "\xA0")];
+    }
+  }]);
+}(_react["default"].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,
+  attributes: _propTypes["default"].object,
+  onFocus: _propTypes["default"].func,
+  onBlur: _propTypes["default"].func,
+  maxImageWidth: _propTypes["default"].number,
+  maxImageHeight: _propTypes["default"].number
+});
+var _default = exports["default"] = Component;
+//# sourceMappingURL=component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":["_LinearProgress","_interopRequireDefault","require","_propTypes","_react","_debug","_styles","_slatePropTypes","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","ownKeys","r","Object","keys","getOwnPropertySymbols","filter","getOwnPropertyDescriptor","enumerable","push","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","log","debug","size","s","concat","StyledImageRoot","styled","_ref","theme","loading","position","border","palette","common","white","display","transition","opacity","StyledProgress","LinearProgress","_ref2","hide","left","width","top","StyledImageContainer","alignItems","StyledImage","_ref3","active","primary","main","StyledResize","_ref4","backgroundColor","cursor","height","borderRadius","marginLeft","marginRight","Component","exports","_React$Component","_this","_classCallCheck2","_len","args","Array","_key","percent","multiplier","img","naturalWidth","naturalHeight","floored","parseInt","toFixed","_this$props","props","node","editor","update","data","w","get","set","getPercentFromWidth","equals","change","c","setNodeByKey","key","window","addEventListener","startResizing","stopResizing","_ref5","maxImageWidth","maxImageHeight","box","style","dimensions","_this$updateImageDime","updateImageDimensions","setState","_this$props2","bounds","target","getBoundingClientRect","_this$updateImageDime2","clientX","clientY","hasMinimumWidth","hasDimensionsConstraints","_this$props3","removeEventListener","initialDim","nextDim","keepAspectRatio","resizeType","imageAspectRatio","_inherits2","_createClass2","value","componentDidMount","applySizeData","resizeHandle","resize","initialiseResize","componentDidUpdate","getSize","objectFit","render","_this2","_this$props4","attributes","onFocus","isFocused","selection","hasEdgeIn","src","loaded","deleteStatus","alignment","alt","justifyContent","createElement","mode","_extends2","ref","onLoad","loadImage","className","React","SlatePropTypes","isRequired","PropTypes","shape","func","object","onBlur","number","_default"],"sources":["../../../src/plugins/image/component.jsx"],"sourcesContent":["import LinearProgress from '@mui/material/LinearProgress';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport debug from 'debug';\nimport { styled } from '@mui/material/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\nconst StyledImageRoot = styled('div')(({ theme, loading }) => ({\n  position: 'relative',\n  border: `solid 1px ${theme.palette.common.white}`,\n  display: 'flex',\n  transition: 'opacity 200ms linear',\n\n  ...(loading && {\n    opacity: 0.3,\n  }),\n}));\n\nconst StyledProgress = styled(LinearProgress)(({ hide }) => ({\n  position: 'absolute',\n  left: '0',\n  width: 'fit-content',\n  top: '0%',\n  transition: 'opacity 200ms linear',\n\n  ...(hide && {\n    opacity: 0,\n  }),\n}));\n\nconst StyledImageContainer = styled('div')(() => ({\n  position: 'relative',\n  width: 'fit-content',\n  display: 'flex',\n  alignItems: 'center',\n  '&&:hover > .resize': {\n    display: 'block',\n  },\n}));\n\nconst StyledImage = styled('img')(({ theme, active }) => ({\n  ...(active && {\n    border: `solid 1px ${theme.palette.primary.main}`,\n  }),\n}));\n\nconst StyledResize = styled('div')(({ theme }) => ({\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\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    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, 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    return [\n      <span key={'sp1'}>&nbsp;</span>,\n      <StyledImageRoot\n        key={'comp'}\n        onFocus={onFocus}\n        style={{ justifyContent }}\n        loading={!loaded || deleteStatus === 'pending'}\n      >\n        <StyledProgress mode=\"determinate\" value={percent > 0 ? percent : 0} hide={loaded} />\n        <StyledImageContainer>\n          <StyledImage\n            {...attributes}\n            active={active}\n            ref={(ref) => {\n              this.img = ref;\n            }}\n            src={src}\n            style={size}\n            onLoad={this.loadImage}\n            alt={alt}\n          />\n          <StyledResize\n            ref={(ref) => {\n              this.resize = ref;\n            }}\n            className=\"resize\"\n          />\n        </StyledImageContainer>\n      </StyledImageRoot>,\n      <span key={'sp2'}>&nbsp;</span>,\n    ];\n  }\n}\n\nexport default Component;\n"],"mappings":"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","ignoreList":[]}