@pie-lib/editable-html 7.17.4-next.371 → 7.17.4-next.414

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["log","debug","removeDialogs","prevDialogs","document","querySelectorAll","forEach","s","remove","removePopOvers","prevPopOvers","insertDialog","value","callback","opts","newEl","createElement","initialBodyOverflow","body","style","overflow","className","configToUse","language","spanishConfig","specialConfig","characters","insertSnackBar","layoutForCharacters","reduce","obj","arr","length","columns","rows","popoverEl","closePopOver","renderPopOver","event","el","infoStyle","fontSize","lineHeight","ReactDOM","render","currentTarget","label","description","unicode","appendChild","handleClose","undefined","handleChange","val","autoClose","n","map","k","name","get","write","category","extraClass","hasPreview","actions","onMouseEnter","ev","onMouseLeave","cursorItem","querySelector","anchorKey","boundRect","getBoundingClientRect","position","top","offsetHeight","left","offsetWidth","zIndex","firstCallMade","listener","removeEventListener","addEventListener","CharacterIcon","letter","CharactersPlugin","toolbar","icon","characterIcon","characterIcons","onClick","onChange","valueToUse","char","focus","change","insertTextByKey","anchorOffset","editorDOM","key","pluginStyles","node","parentNode","p"],"sources":["../../../src/plugins/characters/index.jsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport debug from 'debug';\nimport get from 'lodash/get';\n\nimport { PureToolbar } from '@pie-lib/math-toolbar';\n\nimport CustomPopOver from './custom-popover';\nimport { insertSnackBar } from '../respArea/utils';\nimport { characterIcons, spanishConfig, specialConfig } from './utils';\nconst log = debug('@pie-lib:editable-html:plugins:characters');\n\nconst removeDialogs = () => {\n  const prevDialogs = document.querySelectorAll('.insert-character-dialog');\n\n  log('[characters:removeDialogs]');\n  prevDialogs.forEach(s => s.remove());\n};\n\nconst removePopOvers = () => {\n  const prevPopOvers = document.querySelectorAll('#mouse-over-popover');\n\n  log('[characters:removePopOvers]');\n  prevPopOvers.forEach(s => s.remove());\n};\n\nconst insertDialog = ({ value, callback, opts }) => {\n  const newEl = document.createElement('div');\n  const initialBodyOverflow = document.body.style.overflow;\n\n  log('[characters:insertDialog]');\n\n  removeDialogs();\n\n  newEl.className = 'insert-character-dialog';\n  document.body.style.overflow = 'hidden';\n\n  let configToUse;\n\n  switch (true) {\n    case opts.language === 'spanish':\n      configToUse = spanishConfig;\n      break;\n    case opts.language === 'special':\n      configToUse = specialConfig;\n      break;\n    default:\n      configToUse = opts;\n  }\n\n  if (!configToUse.characters) {\n    insertSnackBar('No characters provided or language not recognized');\n    return;\n  }\n\n  const layoutForCharacters = configToUse.characters.reduce(\n    (obj, arr) => {\n      if (arr.length >= obj.columns) {\n        obj.columns = arr.length;\n      }\n\n      return obj;\n    },\n    { rows: configToUse.characters.length, columns: 0 }\n  );\n\n  let popoverEl;\n\n  const closePopOver = () => {\n    if (popoverEl) {\n      popoverEl.remove();\n    }\n\n    removePopOvers();\n  };\n\n  const renderPopOver = (event, el) => {\n    if (!event) {\n      return;\n    }\n\n    const infoStyle = { fontSize: '20px', lineHeight: '20px' };\n\n    closePopOver();\n\n    popoverEl = document.createElement('div');\n    ReactDOM.render(\n      <CustomPopOver onClose={closePopOver} anchorEl={event.currentTarget}>\n        <div>{el.label}</div>\n\n        <div style={infoStyle}>{el.description}</div>\n\n        <div style={infoStyle}>{el.unicode}</div>\n      </CustomPopOver>,\n      popoverEl\n    );\n\n    document.body.appendChild(newEl);\n  };\n\n  const handleClose = () => {\n    newEl.remove();\n    closePopOver();\n    document.body.style.overflow = initialBodyOverflow;\n    callback(undefined, true);\n  };\n\n  const handleChange = val => {\n    if (typeof val === 'string') {\n      callback(val);\n    }\n\n    if (configToUse.autoClose) {\n      handleClose();\n    }\n  };\n\n  const el = (\n    <PureToolbar\n      autoFocus\n      noDecimal\n      hideInput\n      noLatexHandling\n      layoutForKeyPad={layoutForCharacters}\n      additionalKeys={configToUse.characters.reduce((arr, n) => {\n        arr = [\n          ...arr,\n          ...n.map(k => ({\n            name: get(k, 'name') || k,\n            write: get(k, 'write') || k,\n            label: get(k, 'label') || k,\n            category: 'character',\n            extraClass: 'character',\n            ...(configToUse.hasPreview\n              ? {\n                  actions: { onMouseEnter: ev => renderPopOver(ev, k), onMouseLeave: closePopOver }\n                }\n              : {})\n          }))\n        ];\n\n        return arr;\n      }, [])}\n      keypadMode=\"language\"\n      onChange={handleChange}\n      onDone={handleClose}\n    />\n  );\n\n  ReactDOM.render(el, newEl, () => {\n    const cursorItem = document.querySelector(`[data-key=\"${value.anchorKey}\"]`);\n\n    if (cursorItem) {\n      const boundRect = cursorItem.getBoundingClientRect();\n\n      document.body.appendChild(newEl);\n      newEl.style.position = 'fixed';\n      newEl.style.top = `${boundRect.top - newEl.offsetHeight - 10}px`;\n      newEl.style.left = `${boundRect.left + cursorItem.offsetWidth + 10}px`;\n      newEl.style.zIndex = 99999;\n\n      let firstCallMade = false;\n\n      const listener = () => {\n        // this will be triggered right after setting it because\n        // this toolbar is added on the mousedown event\n        // so right after mouseup, the click will be triggered\n        if (firstCallMade) {\n          document.body.removeEventListener('click', listener);\n          handleClose();\n        } else {\n          firstCallMade = true;\n        }\n      };\n\n      if (configToUse.autoClose) {\n        document.body.addEventListener('click', listener);\n      }\n    }\n  });\n};\n\nconst CharacterIcon = ({ letter }) => (\n  <div\n    style={{\n      fontSize: '25px',\n      lineHeight: '15px'\n    }}\n  >\n    {letter}\n  </div>\n);\n\nexport default function CharactersPlugin(opts) {\n  removeDialogs();\n  return {\n    name: 'math',\n    toolbar: {\n      icon: <CharacterIcon letter={opts.characterIcon || characterIcons[opts.language] || 'ñ'} />,\n      onClick: (value, onChange) => {\n        let valueToUse = value;\n        const callback = (char, focus) => {\n          if (char) {\n            const change = valueToUse\n              .change()\n              .insertTextByKey(valueToUse.anchorKey, valueToUse.anchorOffset, char);\n\n            valueToUse = change.value;\n            log('[characters:insert]: ', value);\n            onChange(change);\n          }\n\n          log('[characters:click]');\n\n          if (focus) {\n            const editorDOM = document.querySelector(`[data-key=\"${valueToUse.document.key}\"]`);\n\n            if (editorDOM) {\n              editorDOM.focus();\n            }\n          }\n        };\n\n        insertDialog({ value: valueToUse, callback, opts });\n      }\n    },\n\n    pluginStyles: (node, parentNode, p) => {\n      if (p) {\n        return {\n          position: 'absolute',\n          top: 'initial'\n        };\n      }\n    }\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["log","debug","removeDialogs","prevDialogs","document","querySelectorAll","forEach","s","remove","removePopOvers","prevPopOvers","insertDialog","value","callback","opts","newEl","createElement","initialBodyOverflow","body","style","overflow","className","configToUse","language","spanishConfig","specialConfig","characters","insertSnackBar","layoutForCharacters","reduce","obj","arr","length","columns","rows","popoverEl","closePopOver","renderPopOver","event","el","infoStyle","fontSize","lineHeight","ReactDOM","render","currentTarget","label","description","unicode","appendChild","handleClose","undefined","handleChange","val","autoClose","n","map","k","name","get","write","category","extraClass","hasPreview","actions","onMouseEnter","ev","onMouseLeave","cursorItem","querySelector","anchorKey","boundRect","getBoundingClientRect","position","top","offsetHeight","left","offsetWidth","zIndex","firstCallMade","listener","removeEventListener","addEventListener","CharacterIcon","letter","CharactersPlugin","toolbar","icon","characterIcon","characterIcons","onClick","onChange","valueToUse","char","focus","change","insertTextByKey","anchorOffset","editorDOM","key","pluginStyles","node","parentNode","p"],"sources":["../../../src/plugins/characters/index.jsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport debug from 'debug';\nimport get from 'lodash/get';\n\nimport { PureToolbar } from '@pie-lib/math-toolbar';\n\nimport CustomPopOver from './custom-popover';\nimport { insertSnackBar } from '../respArea/utils';\nimport { characterIcons, spanishConfig, specialConfig } from './utils';\nconst log = debug('@pie-lib:editable-html:plugins:characters');\n\nconst removeDialogs = () => {\n  const prevDialogs = document.querySelectorAll('.insert-character-dialog');\n\n  log('[characters:removeDialogs]');\n  prevDialogs.forEach(s => s.remove());\n};\n\nconst removePopOvers = () => {\n  const prevPopOvers = document.querySelectorAll('#mouse-over-popover');\n\n  log('[characters:removePopOvers]');\n  prevPopOvers.forEach(s => s.remove());\n};\n\nconst insertDialog = ({ value, callback, opts }) => {\n  const newEl = document.createElement('div');\n  const initialBodyOverflow = document.body.style.overflow;\n\n  log('[characters:insertDialog]');\n\n  removeDialogs();\n\n  newEl.className = 'insert-character-dialog';\n  document.body.style.overflow = 'hidden';\n\n  let configToUse;\n\n  switch (true) {\n    case opts.language === 'spanish':\n      configToUse = spanishConfig;\n      break;\n    case opts.language === 'special':\n      configToUse = specialConfig;\n      break;\n    default:\n      configToUse = opts;\n  }\n\n  if (!configToUse.characters) {\n    insertSnackBar('No characters provided or language not recognized');\n    return;\n  }\n\n  const layoutForCharacters = configToUse.characters.reduce(\n    (obj, arr) => {\n      if (arr.length >= obj.columns) {\n        obj.columns = arr.length;\n      }\n\n      return obj;\n    },\n    { rows: configToUse.characters.length, columns: 0 }\n  );\n\n  let popoverEl;\n\n  const closePopOver = () => {\n    if (popoverEl) {\n      popoverEl.remove();\n    }\n\n    removePopOvers();\n  };\n\n  const renderPopOver = (event, el) => {\n    if (!event) {\n      return;\n    }\n\n    const infoStyle = { fontSize: '20px', lineHeight: '20px' };\n\n    closePopOver();\n\n    popoverEl = document.createElement('div');\n    ReactDOM.render(\n      <CustomPopOver onClose={closePopOver} anchorEl={event.currentTarget}>\n        <div>{el.label}</div>\n\n        <div style={infoStyle}>{el.description}</div>\n\n        <div style={infoStyle}>{el.unicode}</div>\n      </CustomPopOver>,\n      popoverEl\n    );\n\n    document.body.appendChild(newEl);\n  };\n\n  const handleClose = () => {\n    newEl.remove();\n    closePopOver();\n    document.body.style.overflow = initialBodyOverflow;\n    callback(undefined, true);\n  };\n\n  const handleChange = val => {\n    if (typeof val === 'string') {\n      callback(val);\n    }\n\n    if (configToUse.autoClose) {\n      handleClose();\n    }\n  };\n\n  const el = (\n    <PureToolbar\n      autoFocus\n      noDecimal\n      hideInput\n      noLatexHandling\n      layoutForKeyPad={layoutForCharacters}\n      additionalKeys={configToUse.characters.reduce((arr, n) => {\n        arr = [\n          ...arr,\n          ...n.map(k => ({\n            name: get(k, 'name') || k,\n            write: get(k, 'write') || k,\n            label: get(k, 'label') || k,\n            category: 'character',\n            extraClass: 'character',\n            ...(configToUse.hasPreview\n              ? {\n                  actions: { onMouseEnter: ev => renderPopOver(ev, k), onMouseLeave: closePopOver }\n                }\n              : {})\n          }))\n        ];\n\n        return arr;\n      }, [])}\n      keypadMode=\"language\"\n      onChange={handleChange}\n      onDone={handleClose}\n    />\n  );\n\n  ReactDOM.render(el, newEl, () => {\n    const cursorItem = document.querySelector(`[data-key=\"${value.anchorKey}\"]`);\n\n    if (cursorItem) {\n      const boundRect = cursorItem.getBoundingClientRect();\n\n      document.body.appendChild(newEl);\n      newEl.style.position = 'fixed';\n      newEl.style.top = `${boundRect.top - newEl.offsetHeight - 10}px`;\n      newEl.style.left = `${boundRect.left + cursorItem.offsetWidth + 10}px`;\n      newEl.style.zIndex = 99999;\n\n      let firstCallMade = false;\n\n      const listener = () => {\n        // this will be triggered right after setting it because\n        // this toolbar is added on the mousedown event\n        // so right after mouseup, the click will be triggered\n        if (firstCallMade) {\n          document.body.removeEventListener('click', listener);\n          handleClose();\n        } else {\n          firstCallMade = true;\n        }\n      };\n\n      if (configToUse.autoClose) {\n        document.body.addEventListener('click', listener);\n      }\n    }\n  });\n};\n\nconst CharacterIcon = ({ letter }) => (\n  <div\n    style={{\n      fontSize: '25px',\n      lineHeight: '15px'\n    }}\n  >\n    {letter}\n  </div>\n);\n\nexport default function CharactersPlugin(opts) {\n  removeDialogs();\n  return {\n    name: 'math',\n    toolbar: {\n      icon: <CharacterIcon letter={opts.characterIcon || characterIcons[opts.language] || 'ñ'} />,\n      onClick: (value, onChange) => {\n        let valueToUse = value;\n        const callback = (char, focus) => {\n          if (char) {\n            const change = valueToUse\n              .change()\n              .insertTextByKey(valueToUse.anchorKey, valueToUse.anchorOffset, char);\n\n            valueToUse = change.value;\n            log('[characters:insert]: ', value);\n            onChange(change);\n          }\n\n          log('[characters:click]');\n\n          if (focus) {\n            const editorDOM = document.querySelector(`[data-key=\"${valueToUse.document.key}\"]`);\n\n            if (editorDOM) {\n              editorDOM.focus();\n            }\n          }\n        };\n\n        insertDialog({ value: valueToUse, callback, opts });\n      }\n    },\n\n    pluginStyles: (node, parentNode, p) => {\n      if (p) {\n        return {\n          position: 'absolute',\n          top: 'initial'\n        };\n      }\n    }\n  };\n}\n"],"mappings":"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"}

package/lib/plugins/image/component.js

@@ -1,52 +1,46 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Component = void 0;
 
-var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearProgress"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _react = _interopRequireDefault(require("react"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
-var _debug = _interopRequireDefault(require("debug"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _styles = require("@material-ui/core/styles");
-
-var _slatePropTypes = _interopRequireDefault(require("slate-prop-types"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearProgress"));
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+var _react = _interopRequireDefault(require("react"));
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+var _classnames = _interopRequireDefault(require("classnames"));
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+var _debug = _interopRequireDefault(require("debug"));
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+var _styles = require("@material-ui/core/styles");
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+var _slatePropTypes = _interopRequireDefault(require("slate-prop-types"));
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+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; } }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:image:component');
 
 var size = function size(s) {
@@ -54,37 +48,33 @@ var size = function size(s) {
 };
 
 var Component = /*#__PURE__*/function (_React$Component) {
-  _inherits(Component, _React$Component);
+  (0, _inherits2["default"])(Component, _React$Component);
 
   var _super = _createSuper(Component);
 
   function Component() {
     var _this;
 
-    _classCallCheck(this, Component);
+    (0, _classCallCheck2["default"])(this, Component);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "getWidth", function (percent) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getWidth", function (percent) {
       var multiplier = percent / 100;
       return _this.img.naturalWidth * multiplier;
     });
-
-    _defineProperty(_assertThisInitialized(_this), "getHeight", function (percent) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getHeight", function (percent) {
       var multiplier = percent / 100;
       return _this.img.naturalHeight * multiplier;
     });
-
-    _defineProperty(_assertThisInitialized(_this), "getPercentFromWidth", function (width) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getPercentFromWidth", function (width) {
       var floored = width / _this.img.naturalWidth * 4;
       return parseInt(floored.toFixed(0) * 25, 10);
     });
-
-    _defineProperty(_assertThisInitialized(_this), "applySizeData", function () {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "applySizeData", function () {
       var _this$props = _this.props,
           node = _this$props.node,
           editor = _this$props.editor;
@@ -95,7 +85,7 @@ var Component = /*#__PURE__*/function (_React$Component) {
         update = update.set('resizePercent', _this.getPercentFromWidth(w));
       }
 
-      log("[applySizeData] update: ", update);
+      log('[applySizeData] update: ', update);
 
       if (!update.equals(node.data)) {
         editor.change(function (c) {
@@ -105,13 +95,11 @@ var Component = /*#__PURE__*/function (_React$Component) {
         });
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "initialiseResize", function () {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "initialiseResize", function () {
       window.addEventListener('mousemove', _this.startResizing, false);
       window.addEventListener('mouseup', _this.stopResizing, false);
     });
-
-    _defineProperty(_assertThisInitialized(_this), "loadImage", function () {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "loadImage", function () {
       var _ref = _this.props || {},
           maxImageWidth = _ref.maxImageWidth,
           maxImageHeight = _ref.maxImageHeight;
@@ -159,8 +147,7 @@ var Component = /*#__PURE__*/function (_React$Component) {
         }
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "startResizing", function (e) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "startResizing", function (e) {
       var bounds = e.target.getBoundingClientRect();
       var box = _this.img;
       var dimensions = {
@@ -205,13 +192,11 @@ var Component = /*#__PURE__*/function (_React$Component) {
         }
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "stopResizing", function () {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "stopResizing", function () {
       window.removeEventListener('mousemove', _this.startResizing, false);
       window.removeEventListener('mouseup', _this.stopResizing, false);
     });
-
-    _defineProperty(_assertThisInitialized(_this), "updateImageDimensions", function (initialDim, nextDim, keepAspectRatio, resizeType) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateImageDimensions", function (initialDim, nextDim, keepAspectRatio, resizeType) {
       // if we want to keep image aspect ratio
       if (keepAspectRatio) {
         var imageAspectRatio = initialDim.width / initialDim.height;
@@ -237,11 +222,10 @@ var Component = /*#__PURE__*/function (_React$Component) {
         height: nextDim.height
       };
     });
-
     return _this;
   }
 
-  _createClass(Component, [{
+  (0, _createClass2["default"])(Component, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.applySizeData();
@@ -278,9 +262,35 @@ var Component = /*#__PURE__*/function (_React$Component) {
           onFocus = _this$props4.onFocus;
       var active = editor.value.isFocused && editor.value.selection.hasEdgeIn(node);
       var src = node.data.get('src');
-      var percent = node.data.get('percent');
       var loaded = node.data.get('loaded') !== false;
       var deleteStatus = node.data.get('deleteStatus');
+      var alignment = node.data.get('alignment');
+      var percent = node.data.get('percent');
+      var 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);
@@ -291,14 +301,17 @@ var Component = /*#__PURE__*/function (_React$Component) {
       }, "\xA0"), /*#__PURE__*/_react["default"].createElement("div", {
         key: 'comp',
         onFocus: onFocus,
-        className: className
+        className: className,
+        style: {
+          justifyContent: justifyContent
+        }
       }, /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], {
         mode: "determinate",
         value: percent > 0 ? percent : 0,
         className: progressClasses
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.imageContainer
-      }, /*#__PURE__*/_react["default"].createElement("img", _extends({}, attributes, {
+      }, /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({}, attributes, {
         className: (0, _classnames["default"])(classes.image, active && classes.active),
         ref: function ref(_ref2) {
           _this2.img = _ref2;
@@ -316,13 +329,11 @@ var Component = /*#__PURE__*/function (_React$Component) {
       }, "\xA0")];
     }
   }]);
-
   return Component;
 }(_react["default"].Component);
 
 exports.Component = Component;
-
-_defineProperty(Component, "propTypes", {
+(0, _defineProperty2["default"])(Component, "propTypes", {
   node: _slatePropTypes["default"].node.isRequired,
   editor: _propTypes["default"].shape({
     change: _propTypes["default"].func.isRequired,
@@ -354,7 +365,7 @@ var styles = function styles(theme) {
     progress: {
       position: 'absolute',
       left: '0',
-      width: '100%',
+      width: 'fit-content',
       top: '0%',
       transition: 'opacity 200ms linear'
     },
@@ -370,7 +381,7 @@ var styles = function styles(theme) {
     root: {
       position: 'relative',
       border: 'solid 1px white',
-      display: 'inline-block',
+      display: 'flex',
       transition: 'opacity 200ms linear'
     },
     "delete": {

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","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 = { width: box && box.naturalWidth || 100, height: box && box.naturalHeight || 100 };\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 = { width: box && box.naturalWidth || 100, height: box && box.naturalHeight || 100};\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\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 percent = node.data.get('percent');\n    const loaded = node.data.get('loaded') !== false;\n    const deleteStatus = node.data.get('deleteStatus');\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}>\n        <LinearProgress\n          mode=\"determinate\"\n          value={percent > 0 ? percent : 0}\n          className={progressClasses}\n        />\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          />\n          <div ref={ref => {\n            this.resize = ref;\n          }} className={classNames(classes.resize, 'resize')}/>\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: '100%',\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: 'inline-block',\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,"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","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    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\n          mode=\"determinate\"\n          value={percent > 0 ? percent : 0}\n          className={progressClasses}\n        />\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          />\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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"}

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

@@ -1,74 +1,112 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.ImageToolbar = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _react = _interopRequireDefault(require("react"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _debug = _interopRequireDefault(require("debug"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
-var _styles = require("@material-ui/core/styles");
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+var _react = _interopRequireDefault(require("react"));
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+var _debug = _interopRequireDefault(require("debug"));
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+var _styles = require("@material-ui/core/styles");
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+var _toolbarButtons = require("../toolbar/toolbar-buttons");
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+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; } }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:image:image-toolbar');
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var AlignmentButton = function AlignmentButton(_ref) {
+  var alignment = _ref.alignment,
+      active = _ref.active,
+      onClick = _ref.onClick;
+  return /*#__PURE__*/_react["default"].createElement(_toolbarButtons.MarkButton, {
+    active: active,
+    onToggle: function onToggle() {
+      return onClick(alignment);
+    },
+    label: alignment
+  }, alignment);
+};
 
-var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:image:image-toolbar');
+AlignmentButton.propTypes = {
+  alignment: _propTypes["default"].string.isRequired,
+  active: _propTypes["default"].bool.isRequired,
+  onClick: _propTypes["default"].func.isRequired
+};
 
 var ImageToolbar = /*#__PURE__*/function (_React$Component) {
-  _inherits(ImageToolbar, _React$Component);
+  (0, _inherits2["default"])(ImageToolbar, _React$Component);
 
   var _super = _createSuper(ImageToolbar);
 
   function ImageToolbar() {
-    _classCallCheck(this, ImageToolbar);
+    var _this;
 
-    return _super.apply(this, arguments);
+    (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), "onAlignmentClick", function (alignment) {
+      log('[onAlignmentClick]: alignment:', alignment);
+
+      _this.props.onChange(alignment);
+    });
+    return _this;
   }
 
-  _createClass(ImageToolbar, [{
+  (0, _createClass2["default"])(ImageToolbar, [{
     key: "render",
     value: function render() {
-      // Don't remove toolbar since we will have other new buttons
-      var classes = this.props.classes;
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          alignment = _this$props.alignment;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.holder
-      });
+      }, /*#__PURE__*/_react["default"].createElement(AlignmentButton, {
+        alignment: 'left',
+        active: alignment === 'left',
+        onClick: this.onAlignmentClick
+      }), /*#__PURE__*/_react["default"].createElement(AlignmentButton, {
+        alignment: 'center',
+        active: alignment === 'center',
+        onClick: this.onAlignmentClick
+      }), /*#__PURE__*/_react["default"].createElement(AlignmentButton, {
+        alignment: 'right',
+        active: alignment === 'right',
+        onClick: this.onAlignmentClick
+      }));
     }
   }]);
-
   return ImageToolbar;
 }(_react["default"].Component);
 
 exports.ImageToolbar = ImageToolbar;
-
-_defineProperty(ImageToolbar, "propTypes", {
+(0, _defineProperty2["default"])(ImageToolbar, "propTypes", {
   onChange: _propTypes["default"].func.isRequired,
   classes: _propTypes["default"].object.isRequired
 });

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

@@ -1 +1 @@
-{"version":3,"file":"image-toolbar.js","names":["log","debug","ImageToolbar","classes","props","holder","React","Component","onChange","PropTypes","func","isRequired","object","styles","theme","paddingLeft","spacing","unit","display","alignItems","withStyles"],"sources":["../../../src/plugins/image/image-toolbar.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport debug from 'debug';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst log = debug('@pie-lib:editable-html:plugins:image:image-toolbar');\n\nexport class ImageToolbar extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func.isRequired,\n    classes: PropTypes.object.isRequired\n  };\n\n  render() {\n    // Don't remove toolbar since we will have other new buttons\n    const { classes } = this.props;\n    return (\n      <div className={classes.holder}>\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  holder: {\n    paddingLeft: theme.spacing.unit,\n    display: 'flex',\n    alignItems: 'center'\n  }\n});\n\nexport default withStyles(styles)(ImageToolbar);\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,GAAG,GAAG,IAAAC,iBAAA,EAAM,oDAAN,CAAZ;;IAEaC,Y;;;;;;;;;;;;;WAMX,kBAAS;MACP;MACA,IAAQC,OAAR,GAAoB,KAAKC,KAAzB,CAAQD,OAAR;MACA,oBACE;QAAK,SAAS,EAAEA,OAAO,CAACE;MAAxB,EADF;IAID;;;;EAb+BC,iBAAA,CAAMC,S;;;;gBAA3BL,Y,eACQ;EACjBM,QAAQ,EAAEC,qBAAA,CAAUC,IAAV,CAAeC,UADR;EAEjBR,OAAO,EAAEM,qBAAA,CAAUG,MAAV,CAAiBD;AAFT,C;;AAerB,IAAME,MAAM,GAAG,SAATA,MAAS,CAAAC,KAAK;EAAA,OAAK;IACvBT,MAAM,EAAE;MACNU,WAAW,EAAED,KAAK,CAACE,OAAN,CAAcC,IADrB;MAENC,OAAO,EAAE,MAFH;MAGNC,UAAU,EAAE;IAHN;EADe,CAAL;AAAA,CAApB;;eAQe,IAAAC,kBAAA,EAAWP,MAAX,EAAmBX,YAAnB,C"}
+{"version":3,"file":"image-toolbar.js","names":["log","debug","AlignmentButton","alignment","active","onClick","propTypes","PropTypes","string","isRequired","bool","func","ImageToolbar","props","onChange","classes","holder","onAlignmentClick","React","Component","object","styles","theme","paddingLeft","spacing","unit","display","alignItems","withStyles"],"sources":["../../../src/plugins/image/image-toolbar.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport debug from 'debug';\nimport { withStyles } from '@material-ui/core/styles';\nimport { MarkButton } from '../toolbar/toolbar-buttons';\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  };\n\n  onAlignmentClick = alignment => {\n    log('[onAlignmentClick]: alignment:', alignment);\n    this.props.onChange(alignment);\n  };\n\n  render() {\n    const { classes, alignment } = this.props;\n\n    return (\n      <div className={classes.holder}>\n        <AlignmentButton\n          alignment={'left'}\n          active={alignment === 'left'}\n          onClick={this.onAlignmentClick}\n        />\n        <AlignmentButton\n          alignment={'center'}\n          active={alignment === 'center'}\n          onClick={this.onAlignmentClick}\n        />\n        <AlignmentButton\n          alignment={'right'}\n          active={alignment === 'right'}\n          onClick={this.onAlignmentClick}\n        />\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  holder: {\n    paddingLeft: theme.spacing.unit,\n    display: 'flex',\n    alignItems: 'center'\n  }\n});\n\nexport default withStyles(styles)(ImageToolbar);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,GAAG,GAAG,IAAAC,iBAAA,EAAM,oDAAN,CAAZ;;AAEA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,OAAoC;EAAA,IAAjCC,SAAiC,QAAjCA,SAAiC;EAAA,IAAtBC,MAAsB,QAAtBA,MAAsB;EAAA,IAAdC,OAAc,QAAdA,OAAc;EAC1D,oBACE,gCAAC,0BAAD;IAAY,MAAM,EAAED,MAApB;IAA4B,QAAQ,EAAE;MAAA,OAAMC,OAAO,CAACF,SAAD,CAAb;IAAA,CAAtC;IAAgE,KAAK,EAAEA;EAAvE,GACGA,SADH,CADF;AAKD,CAND;;AAQAD,eAAe,CAACI,SAAhB,GAA4B;EAC1BH,SAAS,EAAEI,qBAAA,CAAUC,MAAV,CAAiBC,UADF;EAE1BL,MAAM,EAAEG,qBAAA,CAAUG,IAAV,CAAeD,UAFG;EAG1BJ,OAAO,EAAEE,qBAAA,CAAUI,IAAV,CAAeF;AAHE,CAA5B;;IAMaG,Y;;;;;;;;;;;;;;;yGAMQ,UAAAT,SAAS,EAAI;MAC9BH,GAAG,CAAC,gCAAD,EAAmCG,SAAnC,CAAH;;MACA,MAAKU,KAAL,CAAWC,QAAX,CAAoBX,SAApB;IACD,C;;;;;;WAED,kBAAS;MACP,kBAA+B,KAAKU,KAApC;MAAA,IAAQE,OAAR,eAAQA,OAAR;MAAA,IAAiBZ,SAAjB,eAAiBA,SAAjB;MAEA,oBACE;QAAK,SAAS,EAAEY,OAAO,CAACC;MAAxB,gBACE,gCAAC,eAAD;QACE,SAAS,EAAE,MADb;QAEE,MAAM,EAAEb,SAAS,KAAK,MAFxB;QAGE,OAAO,EAAE,KAAKc;MAHhB,EADF,eAME,gCAAC,eAAD;QACE,SAAS,EAAE,QADb;QAEE,MAAM,EAAEd,SAAS,KAAK,QAFxB;QAGE,OAAO,EAAE,KAAKc;MAHhB,EANF,eAWE,gCAAC,eAAD;QACE,SAAS,EAAE,OADb;QAEE,MAAM,EAAEd,SAAS,KAAK,OAFxB;QAGE,OAAO,EAAE,KAAKc;MAHhB,EAXF,CADF;IAmBD;;;EAjC+BC,iBAAA,CAAMC,S;;;iCAA3BP,Y,eACQ;EACjBE,QAAQ,EAAEP,qBAAA,CAAUI,IAAV,CAAeF,UADR;EAEjBM,OAAO,EAAER,qBAAA,CAAUa,MAAV,CAAiBX;AAFT,C;;AAmCrB,IAAMY,MAAM,GAAG,SAATA,MAAS,CAAAC,KAAK;EAAA,OAAK;IACvBN,MAAM,EAAE;MACNO,WAAW,EAAED,KAAK,CAACE,OAAN,CAAcC,IADrB;MAENC,OAAO,EAAE,MAFH;MAGNC,UAAU,EAAE;IAHN;EADe,CAAL;AAAA,CAApB;;eAQe,IAAAC,kBAAA,EAAWP,MAAX,EAAmBT,YAAnB,C"}