@pie-lib/editable-html 10.0.0-beta.7 → 10.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","names":["_react","_interopRequireDefault","require","_propTypes","_classnames","_debug","_isEqual","_cloneDeep","_LinearProgress","_styles","_slate","_createSuper","Derived","hasNativeReflectConstruct","_isNativeReflectConstruct","_createSuperInternal","Super","_getPrototypeOf2","result","NewTarget","constructor","Reflect","construct","arguments","apply","_possibleConstructorReturn2","sham","Proxy","Boolean","prototype","valueOf","call","e","log","debug","size","s","concat","Component","_React$Component","_inherits2","_super","_this","_classCallCheck2","_len","length","args","Array","_key","_defineProperty2","_assertThisInitialized2","percent","multiplier","img","naturalWidth","naturalHeight","width","floored","parseInt","toFixed","_this$props","props","node","editor","update","cloneDeep","data","w","resizePercent","getPercentFromWidth","selection","isEqual","nodePath","Editor","path","type","properties","newProperties","window","addEventListener","startResizing","stopResizing","_ref","maxImageWidth","maxImageHeight","box","style","dimensions","height","_this$updateImageDime","updateImageDimensions","setState","_this$props2","bounds","target","getBoundingClientRect","_this$updateImageDime2","clientX","left","clientY","top","hasMinimumWidth","hasDimensionsConstraints","_this$props3","set","equals","change","c","setNodeByKey","key","removeEventListener","initialDim","nextDim","keepAspectRatio","resizeType","imageAspectRatio","_createClass2","value","componentDidMount","applySizeData","resizeHandle","resize","initialiseResize","componentDidUpdate","getSize","objectFit","render","_classNames","_this2","_this$props4","focused","classes","attributes","children","onFocus","active","_node$data","alignment","alt","deleteStatus","loaded","src","isLoaded","justifyContent","className","classNames","root","loading","pendingDelete","progressClasses","progress","hideProgress","createElement","_extends2","mode","imageContainer","image","ref","onLoad","loadImage","React","exports","PropTypes","shape","string","array","object","isRequired","bool","func","onBlur","number","styles","theme","portal","position","opacity","transition","floatingButtonRow","backgroundColor","palette","background","paper","borderRadius","display","padding","border","grey","boxShadow","common","white","right","alignItems","primary","main","cursor","marginLeft","marginRight","drawableHeight","minHeight","_default","withStyles"],"sources":["../../../src/plugins/image/component.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport debug from 'debug';\nimport isEqual from 'lodash/isEqual';\nimport cloneDeep from 'lodash/cloneDeep';\nimport LinearProgress from '@material-ui/core/LinearProgress';\nimport { withStyles } from '@material-ui/core/styles';\nimport { Editor } from 'slate';\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: PropTypes.shape({\n      type: PropTypes.string,\n      children: PropTypes.array,\n      data: PropTypes.object\n    }).isRequired,\n    focused: PropTypes.bool,\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 = cloneDeep(node.data);\n\n    const w = update.width;\n\n    if (w) {\n      update = update.resizePercent = this.getPercentFromWidth(w);\n    }\n\n    log('[applySizeData] update: ', update);\n\n    if (editor.selection && !isEqual(update, node.data)) {\n      const nodePath = Editor.path(editor, editor.selection);\n\n      editor.apply({\n        type: 'set_node',\n        path: nodePath,\n        properties: {\n          data: node.data\n        },\n        newProperties: { data: update }\n      });\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.width),\n      height: size(data.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      const update = cloneDeep(node.data);\n\n      update.width = width;\n      update.height = height;\n\n      if (editor.selection && !isEqual(update, node.data)) {\n        const nodePath = Editor.path(editor, editor.selection);\n\n        editor.apply({\n          type: 'set_node',\n          path: nodePath,\n          properties: {\n            data: node.data,\n          },\n          newProperties: { data: update },\n        });\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, focused, classes, attributes, children, onFocus } = this.props;\n    const active = focused;\n    const { alignment, alt, deleteStatus, loaded, percent, src } = node.data;\n    const isLoaded = loaded !== false;\n    let justifyContent;\n\n    switch (alignment) {\n      case 'left':\n        justifyContent = 'flex-start';\n        break;\n\n      case 'center':\n        justifyContent = 'center';\n        break;\n\n      case 'right':\n        justifyContent = 'flex-end';\n        break;\n\n      default:\n        justifyContent = 'flex-start';\n        break;\n    }\n    log('[render] node.data:', node.data);\n\n    const size = this.getSize(node.data);\n\n    log('[render] style:', size);\n\n    const className = classNames(classes.root, {\n      [classes.loading]: !isLoaded,\n      [classes.pendingDelete]: deleteStatus === 'pending',\n    });\n\n    const progressClasses = classNames(classes.progress, {\n      [classes.hideProgress]: isLoaded\n    });\n\n    return (\n      <div onFocus={onFocus} className={className} style={{ justifyContent }} {...attributes}>\n        {children}\n        <LinearProgress\n          mode=\"determinate\"\n          value={percent > 0 ? percent : 0}\n          className={progressClasses}\n        />\n        <div className={classes.imageContainer}>\n          <img\n            className={classNames(classes.image, { [classes.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          <div\n            ref={(ref) => {\n              this.resize = ref;\n            }}\n            className={classNames(classes.resize, 'resize')}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  portal: {\n    position: 'absolute',\n    opacity: 0,\n    transition: 'opacity 200ms linear',\n  },\n  floatingButtonRow: {\n    backgroundColor: theme.palette.background.paper,\n    borderRadius: '1px',\n    display: 'flex',\n    padding: '10px',\n    border: `solid 1px ${theme.palette.grey[200]}`,\n    boxShadow:\n      '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',\n  },\n  progress: {\n    position: 'absolute',\n    left: '0',\n    width: 'fit-content',\n    top: '0%',\n    transition: 'opacity 200ms linear',\n  },\n  hideProgress: {\n    opacity: 0,\n  },\n  loading: {\n    opacity: 0.3,\n  },\n  pendingDelete: {\n    opacity: 0.3,\n  },\n  root: {\n    position: 'relative',\n    border: `solid 1px ${theme.palette.common.white}`,\n    display: 'flex',\n    transition: 'opacity 200ms linear',\n    width: '100%',\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","justifyContent","getSize","className","root","loading","pendingDelete","progressClasses","progress","hideProgress","imageContainer","image","ref","loadImage","React","SlatePropTypes","isRequired","PropTypes","shape","func","object","onBlur","number","styles","theme","portal","position","opacity","transition","floatingButtonRow","backgroundColor","palette","background","paper","borderRadius","display","padding","border","grey","boxShadow","common","white","right","alignItems","primary","main","cursor","marginLeft","marginRight","drawableHeight","minHeight"],"mappings":"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","sourcesContent":["import LinearProgress from '@material-ui/core/LinearProgress';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport classNames from 'classnames';\nimport debug from 'debug';\nimport { withStyles } from '@material-ui/core/styles';\nimport SlatePropTypes from 'slate-prop-types';\n\nconst log = debug('@pie-lib:editable-html:plugins:image:component');\n\nconst size = (s) => (s ? `${s}px` : 'auto');\n\nexport class Component extends React.Component {\n  static propTypes = {\n    node: SlatePropTypes.node.isRequired,\n    editor: PropTypes.shape({\n      change: PropTypes.func.isRequired,\n      value: PropTypes.object,\n    }).isRequired,\n    classes: PropTypes.object.isRequired,\n    attributes: PropTypes.object,\n    onFocus: PropTypes.func,\n    onBlur: PropTypes.func,\n    maxImageWidth: PropTypes.number,\n    maxImageHeight: PropTypes.number,\n  };\n\n  getWidth = (percent) => {\n    const multiplier = percent / 100;\n    return this.img.naturalWidth * multiplier;\n  };\n\n  getHeight = (percent) => {\n    const multiplier = percent / 100;\n    return this.img.naturalHeight * multiplier;\n  };\n\n  getPercentFromWidth = (width) => {\n    var floored = (width / this.img.naturalWidth) * 4;\n    return parseInt(floored.toFixed(0) * 25, 10);\n  };\n\n  applySizeData = () => {\n    const { node, editor } = this.props;\n\n    let update = node.data;\n\n    const w = update.get('width');\n    if (w) {\n      update = update.set('resizePercent', this.getPercentFromWidth(w));\n    }\n\n    log('[applySizeData] update: ', update);\n\n    if (!update.equals(node.data)) {\n      editor.change((c) => c.setNodeByKey(node.key, { data: update }));\n    }\n  };\n\n  initialiseResize = () => {\n    window.addEventListener('mousemove', this.startResizing, false);\n    window.addEventListener('mouseup', this.stopResizing, false);\n  };\n\n  componentDidMount() {\n    this.applySizeData();\n\n    const resizeHandle = this.resize;\n\n    if (resizeHandle) {\n      resizeHandle.addEventListener('mousedown', this.initialiseResize, false);\n    }\n  }\n\n  componentDidUpdate() {\n    this.applySizeData();\n  }\n\n  getSize(data) {\n    return {\n      width: size(data.get('width')),\n      height: size(data.get('height')),\n      objectFit: 'contain',\n    };\n  }\n\n  loadImage = () => {\n    let { maxImageWidth, maxImageHeight } = this.props || {};\n    maxImageWidth = maxImageWidth || 700;\n    maxImageHeight = maxImageHeight || 900;\n\n    const box = this.img;\n\n    //on first load\n    if (!box.style.width || box.style.width === 'auto') {\n      const dimensions = {\n        width: (box && box.naturalWidth) || 100,\n        height: (box && box.naturalHeight) || 100,\n      };\n\n      const { width, height } = this.updateImageDimensions(\n        dimensions,\n        {\n          width: dimensions.width < maxImageWidth ? dimensions.width : maxImageWidth,\n          height: dimensions.height < maxImageHeight ? dimensions.height : maxImageHeight,\n        },\n        true,\n      );\n\n      box.style.width = `${width}px`;\n      box.style.height = `${height}px`;\n\n      this.setState({\n        dimensions: { height: height, width: width },\n      });\n\n      const { node, editor } = this.props;\n\n      let update = node.data;\n\n      update = update.set('width', width);\n      update = update.set('height', height);\n\n      if (!update.equals(node.data)) {\n        editor.change((c) => c.setNodeByKey(node.key, { data: update }));\n      }\n    }\n  };\n\n  startResizing = (e) => {\n    const bounds = e.target.getBoundingClientRect();\n    const box = this.img;\n    const dimensions = {\n      width: (box && box.naturalWidth) || 100,\n      height: (box && box.naturalHeight) || 100,\n    };\n\n    const { width, height } = this.updateImageDimensions(\n      dimensions,\n      {\n        width: e.clientX - bounds.left,\n        height: e.clientY - bounds.top,\n      },\n      true,\n    );\n\n    const hasMinimumWidth = width > 50 && height > 50;\n    const hasDimensionsConstraints = width <= 700 && height <= 900;\n\n    if (hasMinimumWidth && hasDimensionsConstraints && box) {\n      box.style.width = `${width}px`;\n      box.style.height = `${height}px`;\n\n      this.setState({\n        dimensions: { height: height, width: width },\n      });\n\n      const { node, editor } = this.props;\n\n      let update = node.data;\n\n      update = update.set('width', width);\n      update = update.set('height', height);\n\n      if (!update.equals(node.data)) {\n        editor.change((c) => c.setNodeByKey(node.key, { data: update }));\n      }\n    }\n  };\n\n  stopResizing = () => {\n    window.removeEventListener('mousemove', this.startResizing, false);\n    window.removeEventListener('mouseup', this.stopResizing, false);\n  };\n\n  updateImageDimensions = (initialDim, nextDim, keepAspectRatio, resizeType) => {\n    // if we want to keep image aspect ratio\n    if (keepAspectRatio) {\n      const imageAspectRatio = initialDim.width / initialDim.height;\n\n      if (resizeType === 'height') {\n        // if we want to change image height => we update the width accordingly\n        return {\n          width: nextDim.height * imageAspectRatio,\n          height: nextDim.height,\n        };\n      }\n\n      // if we want to change image width => we update the height accordingly\n      return {\n        width: nextDim.width,\n        height: nextDim.width / imageAspectRatio,\n      };\n    }\n\n    // if we don't want to keep aspect ratio, we just update both values\n    return {\n      width: nextDim.width,\n      height: nextDim.height,\n    };\n  };\n\n  render() {\n    const { node, editor, classes, attributes, onFocus } = this.props;\n    const active = editor.value.isFocused && editor.value.selection.hasEdgeIn(node);\n    const src = node.data.get('src');\n    const loaded = node.data.get('loaded') !== false;\n    const deleteStatus = node.data.get('deleteStatus');\n    const alignment = node.data.get('alignment');\n    const percent = node.data.get('percent');\n    const alt = node.data.get('alt');\n    let justifyContent;\n\n    switch (alignment) {\n      case 'left':\n        justifyContent = 'flex-start';\n        break;\n\n      case 'center':\n        justifyContent = 'center';\n        break;\n\n      case 'right':\n        justifyContent = 'flex-end';\n        break;\n\n      default:\n        justifyContent = 'flex-start';\n        break;\n    }\n    log('[render] node.data:', node.data);\n\n    const size = this.getSize(node.data);\n\n    log('[render] style:', size);\n\n    const className = classNames(\n      classes.root,\n      !loaded && classes.loading,\n      deleteStatus === 'pending' && classes.pendingDelete,\n    );\n\n    const progressClasses = classNames(classes.progress, loaded && classes.hideProgress);\n\n    return [\n      <span key={'sp1'}>&nbsp;</span>,\n      <div key={'comp'} onFocus={onFocus} className={className} style={{ justifyContent }}>\n        <LinearProgress mode=\"determinate\" value={percent > 0 ? percent : 0} className={progressClasses} />\n        <div className={classes.imageContainer}>\n          <img\n            {...attributes}\n            className={classNames(classes.image, active && classes.active)}\n            ref={(ref) => {\n              this.img = ref;\n            }}\n            src={src}\n            style={size}\n            onLoad={this.loadImage}\n            alt={alt}\n          />\n          <div\n            ref={(ref) => {\n              this.resize = ref;\n            }}\n            className={classNames(classes.resize, 'resize')}\n          />\n        </div>\n      </div>,\n      <span key={'sp2'}>&nbsp;</span>,\n    ];\n  }\n}\n\nconst styles = (theme) => ({\n  portal: {\n    position: 'absolute',\n    opacity: 0,\n    transition: 'opacity 200ms linear',\n  },\n  floatingButtonRow: {\n    backgroundColor: theme.palette.background.paper,\n    borderRadius: '1px',\n    display: 'flex',\n    padding: '10px',\n    border: `solid 1px ${theme.palette.grey[200]}`,\n    boxShadow:\n      '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',\n  },\n  progress: {\n    position: 'absolute',\n    left: '0',\n    width: 'fit-content',\n    top: '0%',\n    transition: 'opacity 200ms linear',\n  },\n  hideProgress: {\n    opacity: 0,\n  },\n  loading: {\n    opacity: 0.3,\n  },\n  pendingDelete: {\n    opacity: 0.3,\n  },\n  root: {\n    position: 'relative',\n    border: `solid 1px ${theme.palette.common.white}`,\n    display: 'flex',\n    transition: 'opacity 200ms linear',\n  },\n  delete: {\n    position: 'absolute',\n    right: 0,\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n    display: 'flex',\n    alignItems: 'center',\n\n    '&&:hover > .resize': {\n      display: 'block',\n    },\n  },\n  active: {\n    border: `solid 1px ${theme.palette.primary.main}`,\n  },\n  resize: {\n    backgroundColor: theme.palette.primary.main,\n    cursor: 'col-resize',\n    height: '35px',\n    width: '5px',\n    borderRadius: 8,\n    marginLeft: '5px',\n    marginRight: '10px',\n    display: 'none',\n  },\n  drawableHeight: {\n    minHeight: 350,\n  },\n});\n\nexport default withStyles(styles)(Component);\n"],"file":"component.js"}

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":["_propTypes","_interopRequireDefault","require","_react","_debug","_reactDom","_styles","_classnames","_toolbarButtons","_altDialog","_createSuper","Derived","hasNativeReflectConstruct","_isNativeReflectConstruct","_createSuperInternal","Super","_getPrototypeOf2","result","NewTarget","constructor","Reflect","construct","arguments","apply","_possibleConstructorReturn2","sham","Proxy","Boolean","prototype","valueOf","call","e","log","debug","AlignmentButton","_ref","alignment","active","onClick","createElement","MarkButton","onToggle","label","propTypes","PropTypes","string","isRequired","bool","func","ImageToolbar","_React$Component","_inherits2","_super","_this","_classCallCheck2","_len","length","args","Array","_key","concat","_defineProperty2","_assertThisInitialized2","newAlt","props","onChange","alt","popoverEl","document","el","onDone","onAltTextDone","ReactDOM","render","body","appendChild","_createClass2","key","value","_classNames","_this2","_this$props","classes","imageLoaded","disableImageAlignmentButtons","className","holder","Fragment","onAlignmentClick","classNames","disabled","altButton","onMouseDown","event","renderDialog","React","Component","exports","object","styles","theme","paddingLeft","spacing","unit","display","alignItems","opacity","borderLeft","marginLeft","_default","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"}