@pie-lib/editable-html 9.3.1-next.53 → 9.4.0

package/lib/plugins/image/component.js

@@ -1,40 +1,66 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Component = void 0;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _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;
@@ -50,14 +76,17 @@ var Component = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "applySizeData", function () {
       var _this$props = _this.props,
-        node = _this$props.node,
-        editor = _this$props.editor;
+          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, {
@@ -72,38 +101,43 @@ var Component = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "loadImage", function () {
       var _ref = _this.props || {},
-        maxImageWidth = _ref.maxImageWidth,
-        maxImageHeight = _ref.maxImageHeight;
+          maxImageWidth = _ref.maxImageWidth,
+          maxImageHeight = _ref.maxImageHeight;
+
       maxImageWidth = maxImageWidth || 700;
       maxImageHeight = maxImageHeight || 900;
-      var box = _this.img;
+      var box = _this.img; //on first load
 
-      //on first load
       if (!box.style.width || box.style.width === 'auto') {
         var dimensions = {
           width: box && box.naturalWidth || 100,
           height: box && box.naturalHeight || 100
         };
+
         var _this$updateImageDime = _this.updateImageDimensions(dimensions, {
-            width: dimensions.width < maxImageWidth ? dimensions.width : maxImageWidth,
-            height: dimensions.height < maxImageHeight ? dimensions.height : maxImageHeight
-          }, true),
-          width = _this$updateImageDime.width,
-          height = _this$updateImageDime.height;
+          width: dimensions.width < maxImageWidth ? dimensions.width : maxImageWidth,
+          height: dimensions.height < maxImageHeight ? dimensions.height : maxImageHeight
+        }, true),
+            width = _this$updateImageDime.width,
+            height = _this$updateImageDime.height;
+
         box.style.width = "".concat(width, "px");
         box.style.height = "".concat(height, "px");
+
         _this.setState({
           dimensions: {
             height: height,
             width: width
           }
         });
+
         var _this$props2 = _this.props,
-          node = _this$props2.node,
-          editor = _this$props2.editor;
+            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, {
@@ -120,29 +154,35 @@ var Component = /*#__PURE__*/function (_React$Component) {
         width: box && box.naturalWidth || 100,
         height: box && box.naturalHeight || 100
       };
+
       var _this$updateImageDime2 = _this.updateImageDimensions(dimensions, {
-          width: e.clientX - bounds.left,
-          height: e.clientY - bounds.top
-        }, true),
-        width = _this$updateImageDime2.width,
-        height = _this$updateImageDime2.height;
+        width: e.clientX - bounds.left,
+        height: e.clientY - bounds.top
+      }, true),
+          width = _this$updateImageDime2.width,
+          height = _this$updateImageDime2.height;
+
       var hasMinimumWidth = width > 50 && height > 50;
       var hasDimensionsConstraints = width <= 700 && height <= 900;
+
       if (hasMinimumWidth && hasDimensionsConstraints && box) {
         box.style.width = "".concat(width, "px");
         box.style.height = "".concat(height, "px");
+
         _this.setState({
           dimensions: {
             height: height,
             width: width
           }
         });
+
         var _this$props3 = _this.props,
-          node = _this$props3.node,
-          editor = _this$props3.editor;
+            node = _this$props3.node,
+            editor = _this$props3.editor;
         var update = node.data;
         update = update.set('width', width);
         update = update.set('height', height);
+
         if (!update.equals(node.data)) {
           editor.change(function (c) {
             return c.setNodeByKey(node.key, {
@@ -160,22 +200,23 @@ var Component = /*#__PURE__*/function (_React$Component) {
       // if we want to keep image aspect ratio
       if (keepAspectRatio) {
         var imageAspectRatio = initialDim.width / initialDim.height;
+
         if (resizeType === 'height') {
           // if we want to change image height => we update the width accordingly
           return {
             width: nextDim.height * imageAspectRatio,
             height: nextDim.height
           };
-        }
+        } // if we want to change image width => we update the height accordingly
+
 
-        // if we want to change image width => we update the height accordingly
         return {
           width: nextDim.width,
           height: nextDim.width / imageAspectRatio
         };
-      }
+      } // if we don't want to keep aspect ratio, we just update both values
+
 
-      // if we don't want to keep aspect ratio, we just update both values
       return {
         width: nextDim.width,
         height: nextDim.height
@@ -183,11 +224,13 @@ var Component = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
+
   (0, _createClass2["default"])(Component, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.applySizeData();
       var resizeHandle = this.resize;
+
       if (resizeHandle) {
         resizeHandle.addEventListener('mousedown', this.initialiseResize, false);
       }
@@ -210,12 +253,13 @@ var Component = /*#__PURE__*/function (_React$Component) {
     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;
+          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;
@@ -225,24 +269,29 @@ var Component = /*#__PURE__*/function (_React$Component) {
       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);
@@ -284,6 +333,7 @@ var Component = /*#__PURE__*/function (_React$Component) {
   }]);
   return Component;
 }(_react["default"].Component);
+
 exports.Component = Component;
 (0, _defineProperty2["default"])(Component, "propTypes", {
   node: _slatePropTypes["default"].node.isRequired,
@@ -298,6 +348,7 @@ exports.Component = Component;
   maxImageWidth: _propTypes["default"].number,
   maxImageHeight: _propTypes["default"].number
 });
+
 var styles = function styles(theme) {
   return {
     portal: {
@@ -366,6 +417,8 @@ var styles = function styles(theme) {
     }
   };
 };
+
 var _default = (0, _styles.withStyles)(styles)(Component);
+
 exports["default"] = _default;
 //# sourceMappingURL=component.js.map

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

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

package/lib/plugins/image/image-toolbar.js

@@ -1,32 +1,52 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.ImageToolbar = 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 _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _react = _interopRequireDefault(require("react"));
+
 var _debug = _interopRequireDefault(require("debug"));
+
 var _reactDom = _interopRequireDefault(require("react-dom"));
+
 var _styles = require("@material-ui/core/styles");
+
 var _classnames = _interopRequireDefault(require("classnames"));
+
 var _toolbarButtons = require("../toolbar/toolbar-buttons");
+
 var _altDialog = _interopRequireDefault(require("./alt-dialog"));
+
 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:image-toolbar');
+
 var AlignmentButton = function AlignmentButton(_ref) {
   var alignment = _ref.alignment,
-    active = _ref.active,
-    onClick = _ref.onClick;
+      active = _ref.active,
+      onClick = _ref.onClick;
   return /*#__PURE__*/_react["default"].createElement(_toolbarButtons.MarkButton, {
     active: active,
     onToggle: function onToggle() {
@@ -35,29 +55,38 @@ var AlignmentButton = function AlignmentButton(_ref) {
     label: alignment
   }, alignment);
 };
+
 AlignmentButton.propTypes = {
   alignment: _propTypes["default"].string.isRequired,
   active: _propTypes["default"].bool.isRequired,
   onClick: _propTypes["default"].func.isRequired
 };
+
 var ImageToolbar = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(ImageToolbar, _React$Component);
+
   var _super = _createSuper(ImageToolbar);
+
   function ImageToolbar() {
     var _this;
+
     (0, _classCallCheck2["default"])(this, ImageToolbar);
+
     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), "onAltTextDone", function (newAlt) {
       log('[onAltTextDone]: alt:', newAlt);
+
       _this.props.onChange({
         alt: newAlt
       }, true);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onAlignmentClick", function (alignment) {
       log('[onAlignmentClick]: alignment:', alignment);
+
       _this.props.onChange({
         alignment: alignment
       });
@@ -65,25 +94,30 @@ var ImageToolbar = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderDialog", function () {
       var alt = _this.props.alt;
       var popoverEl = document.createElement('div');
+
       var el = /*#__PURE__*/_react["default"].createElement(_altDialog["default"], {
         alt: alt,
         onDone: _this.onAltTextDone
       });
+
       _reactDom["default"].render(el, popoverEl);
+
       document.body.appendChild(popoverEl);
     });
     return _this;
   }
+
   (0, _createClass2["default"])(ImageToolbar, [{
     key: "render",
     value: function render() {
       var _classNames,
-        _this2 = this;
+          _this2 = this;
+
       var _this$props = this.props,
-        classes = _this$props.classes,
-        alignment = _this$props.alignment,
-        imageLoaded = _this$props.imageLoaded,
-        disableImageAlignmentButtons = _this$props.disableImageAlignmentButtons;
+          classes = _this$props.classes,
+          alignment = _this$props.alignment,
+          imageLoaded = _this$props.imageLoaded,
+          disableImageAlignmentButtons = _this$props.disableImageAlignmentButtons;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.holder
       }, !disableImageAlignmentButtons && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(AlignmentButton, {
@@ -108,6 +142,7 @@ var ImageToolbar = /*#__PURE__*/function (_React$Component) {
   }]);
   return ImageToolbar;
 }(_react["default"].Component);
+
 exports.ImageToolbar = ImageToolbar;
 (0, _defineProperty2["default"])(ImageToolbar, "propTypes", {
   onChange: _propTypes["default"].func.isRequired,
@@ -117,6 +152,7 @@ exports.ImageToolbar = ImageToolbar;
   imageLoaded: _propTypes["default"].bool,
   disableImageAlignmentButtons: _propTypes["default"].bool
 });
+
 var styles = function styles(theme) {
   return {
     holder: {
@@ -134,6 +170,8 @@ var styles = function styles(theme) {
     }
   };
 };
+
 var _default = (0, _styles.withStyles)(styles)(ImageToolbar);
+
 exports["default"] = _default;
 //# sourceMappingURL=image-toolbar.js.map

package/lib/plugins/image/image-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-toolbar.js","names":["log","debug","AlignmentButton","alignment","active","onClick","propTypes","PropTypes","string","isRequired","bool","func","ImageToolbar","newAlt","props","onChange","alt","popoverEl","document","createElement","el","onAltTextDone","ReactDOM","render","body","appendChild","classes","imageLoaded","disableImageAlignmentButtons","holder","onAlignmentClick","classNames","disabled","altButton","event","renderDialog","React","Component","object","styles","theme","paddingLeft","spacing","unit","display","alignItems","opacity","borderLeft","marginLeft","withStyles"],"sources":["../../../src/plugins/image/image-toolbar.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport debug from 'debug';\nimport ReactDOM from 'react-dom';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\n\nimport { MarkButton } from '../toolbar/toolbar-buttons';\nimport AltDialog from './alt-dialog';\n\nconst log = debug('@pie-lib:editable-html:plugins:image:image-toolbar');\n\nconst AlignmentButton = ({ alignment, active, onClick }) => {\n  return (\n    <MarkButton active={active} onToggle={() => onClick(alignment)} label={alignment}>\n      {alignment}\n    </MarkButton>\n  );\n};\n\nAlignmentButton.propTypes = {\n  alignment: PropTypes.string.isRequired,\n  active: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired,\n};\n\nexport class ImageToolbar extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func.isRequired,\n    classes: PropTypes.object.isRequired,\n    alignment: PropTypes.string,\n    alt: PropTypes.string,\n    imageLoaded: PropTypes.bool,\n    disableImageAlignmentButtons: PropTypes.bool,\n  };\n\n  onAltTextDone = (newAlt) => {\n    log('[onAltTextDone]: alt:', newAlt);\n\n    this.props.onChange({ alt: newAlt }, true);\n  };\n\n  onAlignmentClick = (alignment) => {\n    log('[onAlignmentClick]: alignment:', alignment);\n    this.props.onChange({ alignment });\n  };\n\n  renderDialog = () => {\n    const { alt } = this.props;\n    const popoverEl = document.createElement('div');\n\n    const el = <AltDialog alt={alt} onDone={this.onAltTextDone} />;\n\n    ReactDOM.render(el, popoverEl);\n\n    document.body.appendChild(popoverEl);\n  };\n\n  render() {\n    const { classes, alignment, imageLoaded, disableImageAlignmentButtons } = this.props;\n    return (\n      <div className={classes.holder}>\n        {!disableImageAlignmentButtons && (\n          <>\n            <AlignmentButton alignment={'left'} active={alignment === 'left'} onClick={this.onAlignmentClick} />\n            <AlignmentButton alignment={'center'} active={alignment === 'center'} onClick={this.onAlignmentClick} />\n            <AlignmentButton alignment={'right'} active={alignment === 'right'} onClick={this.onAlignmentClick} />\n          </>\n        )}\n        <span\n          className={classNames({\n            [classes.disabled]: !imageLoaded,\n            [classes.altButton]: !disableImageAlignmentButtons,\n          })}\n          onMouseDown={(event) => imageLoaded && this.renderDialog(event)}\n        >\n          Alt text\n        </span>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  holder: {\n    paddingLeft: theme.spacing.unit,\n    display: 'flex',\n    alignItems: 'center',\n  },\n  disabled: {\n    opacity: 0.5,\n  },\n  altButton: {\n    borderLeft: '1px solid grey',\n    paddingLeft: 8,\n    marginLeft: 4,\n  },\n});\n\nexport default withStyles(styles)(ImageToolbar);\n"],"mappings":"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"}
+{"version":3,"sources":["../../../src/plugins/image/image-toolbar.jsx"],"names":["log","AlignmentButton","alignment","active","onClick","propTypes","PropTypes","string","isRequired","bool","func","ImageToolbar","newAlt","props","onChange","alt","popoverEl","document","createElement","el","onAltTextDone","ReactDOM","render","body","appendChild","classes","imageLoaded","disableImageAlignmentButtons","holder","onAlignmentClick","disabled","altButton","event","renderDialog","React","Component","object","styles","theme","paddingLeft","spacing","unit","display","alignItems","opacity","borderLeft","marginLeft"],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport debug from 'debug';\nimport ReactDOM from 'react-dom';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\n\nimport { MarkButton } from '../toolbar/toolbar-buttons';\nimport AltDialog from './alt-dialog';\n\nconst log = debug('@pie-lib:editable-html:plugins:image:image-toolbar');\n\nconst AlignmentButton = ({ alignment, active, onClick }) => {\n  return (\n    <MarkButton active={active} onToggle={() => onClick(alignment)} label={alignment}>\n      {alignment}\n    </MarkButton>\n  );\n};\n\nAlignmentButton.propTypes = {\n  alignment: PropTypes.string.isRequired,\n  active: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired,\n};\n\nexport class ImageToolbar extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func.isRequired,\n    classes: PropTypes.object.isRequired,\n    alignment: PropTypes.string,\n    alt: PropTypes.string,\n    imageLoaded: PropTypes.bool,\n    disableImageAlignmentButtons: PropTypes.bool,\n  };\n\n  onAltTextDone = (newAlt) => {\n    log('[onAltTextDone]: alt:', newAlt);\n\n    this.props.onChange({ alt: newAlt }, true);\n  };\n\n  onAlignmentClick = (alignment) => {\n    log('[onAlignmentClick]: alignment:', alignment);\n    this.props.onChange({ alignment });\n  };\n\n  renderDialog = () => {\n    const { alt } = this.props;\n    const popoverEl = document.createElement('div');\n\n    const el = <AltDialog alt={alt} onDone={this.onAltTextDone} />;\n\n    ReactDOM.render(el, popoverEl);\n\n    document.body.appendChild(popoverEl);\n  };\n\n  render() {\n    const { classes, alignment, imageLoaded, disableImageAlignmentButtons } = this.props;\n    return (\n      <div className={classes.holder}>\n        {!disableImageAlignmentButtons && (\n          <>\n            <AlignmentButton alignment={'left'} active={alignment === 'left'} onClick={this.onAlignmentClick} />\n            <AlignmentButton alignment={'center'} active={alignment === 'center'} onClick={this.onAlignmentClick} />\n            <AlignmentButton alignment={'right'} active={alignment === 'right'} onClick={this.onAlignmentClick} />\n          </>\n        )}\n        <span\n          className={classNames({\n            [classes.disabled]: !imageLoaded,\n            [classes.altButton]: !disableImageAlignmentButtons,\n          })}\n          onMouseDown={(event) => imageLoaded && this.renderDialog(event)}\n        >\n          Alt text\n        </span>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  holder: {\n    paddingLeft: theme.spacing.unit,\n    display: 'flex',\n    alignItems: 'center',\n  },\n  disabled: {\n    opacity: 0.5,\n  },\n  altButton: {\n    borderLeft: '1px solid grey',\n    paddingLeft: 8,\n    marginLeft: 4,\n  },\n});\n\nexport default withStyles(styles)(ImageToolbar);\n"],"file":"image-toolbar.js"}