@pie-lib/editable-html 7.17.4-next.333 → 7.17.4-next.364

package/lib/editor.js

@@ -134,7 +134,9 @@ var Editor = /*#__PURE__*/function (_React$Component) {
             props.imageSupport.add(handler);
           },
           onFocus: _this.onPluginFocus,
-          onBlur: _this.onPluginBlur
+          onBlur: _this.onPluginBlur,
+          maxImageWidth: _this.props.maxImageWidth,
+          maxImageHeight: _this.props.maxImageHeight
         },
         toolbar: {
           /**
@@ -723,7 +725,9 @@ _defineProperty(Editor, "propTypes", {
     });
     return !allValid && new Error("Invalid values: ".concat(values, ", values must be one of [").concat(_plugins.ALL_PLUGINS.join(','), "]"));
   }),
-  className: _propTypes["default"].string
+  className: _propTypes["default"].string,
+  maxImageWidth: _propTypes["default"].number,
+  maxImageHeight: _propTypes["default"].number
 });
 
 _defineProperty(Editor, "defaultProps", {

package/lib/editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"editor.js","names":["log","debug","defaultToolbarOpts","position","alignment","alwaysVisible","showDone","doneOn","defaultResponseAreaProps","options","respAreaToolbar","onHandleAreaChange","defaultLanguageCharactersProps","createToolbarOpts","toolbarOpts","Editor","props","normalizedResponseAreaProps","responseAreaProps","plugins","buildPlugins","activePlugins","math","onClick","onMathClick","onFocus","onPluginFocus","onBlur","onPluginBlur","image","onDelete","imageSupport","src","done","e","state","value","insertImageRequested","getHandler","handler","add","toolbar","disableUnderline","autoWidth","autoWidthToolbar","onDone","nonEmpty","setState","toolbarInFocus","focusedNode","editor","blur","startText","text","length","resetValue","then","onEditingDone","table","responseArea","type","maxResponseAreas","error","languageCharacters","languageCharactersProps","media","focus","createChange","change","onChange","relatedTarget","target","node","findNode","stashedValue","stashValue","c","collapseToStartOf","selectedNode","resolve","event","Promise","handleBlur","bind","editorDOM","document","querySelector","key","setTimeout","wrapperRef","editorElement","activeElement","closest","className","toolbarElement","toolbarRef","isInCurrentComponent","contains","removeEventListener","handleDomBlur","__TEMPORARY_CHANGE_DATA","data","domEl","setNodeByKey","addEventListener","force","stopReset","reduce","s","p","isFocused","toObject","newValue","Value","fromJSON","toJSON","charactersLimit","v","endsWith","undefined","parseInt","isNaN","object","last","nodes","parent","getParent","Block","pos","onResize","handlePlugins","onRef","window","autoFocus","nextProps","newToolbarOpts","isEqual","zeroWidthEls","querySelectorAll","Array","from","forEach","el","style","minWidth","display","equals","width","minHeight","height","maxHeight","valueToSize","disabled","spellCheck","highlightShape","classes","placeholder","pluginProps","onKeyDown","sizeStyle","buildSizeStyle","names","classNames","withBg","toolbarOnTop","ref","r","slateEditor","editorRef","normalize","changeData","React","Component","PropTypes","bool","func","isRequired","SlateTypes","number","oneOfType","string","any","shape","oneOf","arrayOf","language","characterIcon","characters","values","allValid","every","ALL_PLUGINS","includes","Error","join","styles","backgroundColor","fontFamily","tableLayout","borderCollapse","color","background","borderTop","padding","textAlign","border","marginTop","withStyles"],"sources":["../src/editor.jsx"],"sourcesContent":["import { Editor as SlateEditor, findNode } from 'slate-react';\nimport SlateTypes from 'slate-prop-types';\n\nimport isEqual from 'lodash/isEqual';\nimport * as serialization from './serialization';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport { Value, Block } from 'slate';\nimport { buildPlugins, ALL_PLUGINS, DEFAULT_PLUGINS } from './plugins';\nimport debug from 'debug';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { color } from '@pie-lib/render-ui';\n\nexport { ALL_PLUGINS, DEFAULT_PLUGINS, serialization };\n\nconst log = debug('editable-html:editor');\n\nconst defaultToolbarOpts = {\n  position: 'bottom',\n  alignment: 'left',\n  alwaysVisible: false,\n  showDone: true,\n  doneOn: 'blur'\n};\n\nconst defaultResponseAreaProps = {\n  options: {},\n  respAreaToolbar: () => {},\n  onHandleAreaChange: () => {}\n};\n\nconst defaultLanguageCharactersProps = [];\n\nconst createToolbarOpts = toolbarOpts => {\n  return {\n    ...defaultToolbarOpts,\n    ...toolbarOpts\n  };\n};\n\nexport class Editor extends React.Component {\n  static propTypes = {\n    autoFocus: PropTypes.bool,\n    editorRef: PropTypes.func.isRequired,\n    onRef: PropTypes.func.isRequired,\n    onChange: PropTypes.func.isRequired,\n    onFocus: PropTypes.func,\n    onBlur: PropTypes.func,\n    onKeyDown: PropTypes.func,\n    focus: PropTypes.func.isRequired,\n    value: SlateTypes.value.isRequired,\n    imageSupport: PropTypes.object,\n    charactersLimit: PropTypes.number,\n    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    classes: PropTypes.object.isRequired,\n    highlightShape: PropTypes.bool,\n    disabled: PropTypes.bool,\n    spellCheck: PropTypes.bool,\n    nonEmpty: PropTypes.bool,\n    disableUnderline: PropTypes.bool,\n    autoWidthToolbar: PropTypes.bool,\n    pluginProps: PropTypes.any,\n    placeholder: PropTypes.string,\n    responseAreaProps: PropTypes.shape({\n      type: PropTypes.oneOf([\n        'explicit-constructed-response',\n        'inline-dropdown',\n        'drag-in-the-blank'\n      ]),\n      options: PropTypes.object,\n      respAreaToolbar: PropTypes.func,\n      onHandleAreaChange: PropTypes.func\n    }),\n    languageCharactersProps: PropTypes.arrayOf(\n      PropTypes.shape({\n        language: PropTypes.string,\n        characterIcon: PropTypes.string,\n        characters: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))\n      })\n    ),\n    toolbarOpts: PropTypes.shape({\n      position: PropTypes.oneOf(['bottom', 'top']),\n      alignment: PropTypes.oneOf(['left', 'right']),\n      alwaysVisible: PropTypes.bool,\n      showDone: PropTypes.bool,\n      doneOn: PropTypes.string\n    }),\n    activePlugins: PropTypes.arrayOf(values => {\n      const allValid = values.every(v => ALL_PLUGINS.includes(v));\n\n      return (\n        !allValid &&\n        new Error(`Invalid values: ${values}, values must be one of [${ALL_PLUGINS.join(',')}]`)\n      );\n    }),\n    className: PropTypes.string\n  };\n\n  static defaultProps = {\n    disableUnderline: true,\n    onFocus: () => {},\n    onBlur: () => {},\n    onKeyDown: () => {},\n    toolbarOpts: defaultToolbarOpts,\n    responseAreaProps: defaultResponseAreaProps,\n    languageCharactersProps: defaultLanguageCharactersProps\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      value: props.value,\n      toolbarOpts: createToolbarOpts(props.toolbarOpts)\n    };\n\n    this.onResize = () => {\n      props.onChange(this.state.value, true);\n    };\n\n    this.handlePlugins(this.props);\n  }\n\n  handlePlugins = props => {\n    const normalizedResponseAreaProps = {\n      ...defaultResponseAreaProps,\n      ...props.responseAreaProps\n    };\n\n    this.plugins = buildPlugins(props.activePlugins, {\n      math: {\n        onClick: this.onMathClick,\n        onFocus: this.onPluginFocus,\n        onBlur: this.onPluginBlur\n      },\n      image: {\n        onDelete:\n          props.imageSupport &&\n          props.imageSupport.delete &&\n          ((src, done) => {\n            props.imageSupport.delete(src, e => {\n              done(e, this.state.value);\n            });\n          }),\n        insertImageRequested:\n          props.imageSupport &&\n          (getHandler => {\n            /**\n             * The handler is the object through which the outer context\n             * communicates file upload events like: fileChosen, cancel, progress\n             */\n            const handler = getHandler(() => this.state.value);\n            props.imageSupport.add(handler);\n          }),\n        onFocus: this.onPluginFocus,\n        onBlur: this.onPluginBlur\n      },\n      toolbar: {\n        /**\n         * To minimize converting html -> state -> html\n         * We only emit markup once 'done' is clicked.\n         */\n        disableUnderline: props.disableUnderline,\n        autoWidth: props.autoWidthToolbar,\n        onDone: () => {\n          const { nonEmpty } = props;\n\n          log('[onDone]');\n          this.setState({ toolbarInFocus: false, focusedNode: null });\n          this.editor.blur();\n\n          if (nonEmpty && this.state.value.startText.text.length === 0) {\n            this.resetValue(true).then(() => {\n              this.onEditingDone();\n            });\n          } else {\n            this.onEditingDone();\n          }\n        }\n      },\n      table: {\n        onFocus: () => {\n          log('[table:onFocus]...');\n          this.onPluginFocus();\n        },\n        onBlur: () => {\n          log('[table:onBlur]...');\n          this.onPluginBlur();\n        }\n      },\n      responseArea: {\n        type: normalizedResponseAreaProps.type,\n        options: normalizedResponseAreaProps.options,\n        maxResponseAreas: normalizedResponseAreaProps.maxResponseAreas,\n        respAreaToolbar: normalizedResponseAreaProps.respAreaToolbar,\n        onHandleAreaChange: normalizedResponseAreaProps.onHandleAreaChange,\n        error: normalizedResponseAreaProps.error,\n        onFocus: () => {\n          log('[table:onFocus]...');\n          this.onPluginFocus();\n        },\n        onBlur: () => {\n          log('[table:onBlur]...');\n          this.onPluginBlur();\n        }\n      },\n      languageCharacters: props.languageCharactersProps,\n      media: {\n        focus: this.focus,\n        createChange: () => this.state.value.change(),\n        onChange: this.onChange\n      }\n    });\n  };\n\n  componentDidMount() {\n    // onRef is needed to get the ref of the component because we export it using withStyles\n    this.props.onRef(this);\n\n    window.addEventListener('resize', this.onResize);\n\n    if (this.editor && this.props.autoFocus) {\n      Promise.resolve().then(() => {\n        if (this.editor) {\n          const editorDOM = document.querySelector(\n            `[data-key=\"${this.editor.value.document.key}\"]`\n          );\n\n          this.editor.focus();\n\n          if (editorDOM) {\n            editorDOM.focus();\n          }\n        }\n      });\n    }\n  }\n\n  componentWillReceiveProps(nextProps) {\n    const { toolbarOpts } = this.state;\n    const newToolbarOpts = createToolbarOpts(nextProps.toolbarOpts);\n\n    if (!isEqual(newToolbarOpts, toolbarOpts)) {\n      this.setState({\n        toolbarOpts: newToolbarOpts\n      });\n    }\n\n    if (!isEqual(nextProps.languageCharactersProps, this.props.languageCharactersProps)) {\n      this.handlePlugins(nextProps);\n    }\n  }\n\n  componentDidUpdate() {\n    // The cursor is on a zero width element and when that is placed near void elements, it is not visible\n    // so we increase the width to at least 2px in order for the user to see it\n    const zeroWidthEls = document.querySelectorAll('[data-slate-zero-width=\"z\"]');\n\n    Array.from(zeroWidthEls).forEach(el => {\n      el.style.minWidth = '2px';\n      el.style.display = 'inline-block';\n    });\n  }\n\n  onPluginBlur = e => {\n    log('[onPluginBlur]', e && e.relatedTarget);\n    const target = e && e.relatedTarget;\n\n    const node = target ? findNode(target, this.state.value) : null;\n    log('[onPluginBlur] node: ', node);\n    this.setState({ focusedNode: node }, () => {\n      this.resetValue();\n    });\n  };\n\n  onPluginFocus = e => {\n    log('[onPluginFocus]', e && e.target);\n    const target = e && e.target;\n    if (target) {\n      const node = findNode(target, this.state.value);\n      log('[onPluginFocus] node: ', node);\n\n      const stashedValue = this.state.stashedValue || this.state.value;\n      this.setState({ focusedNode: node, stashedValue });\n    } else {\n      this.setState({ focusedNode: null });\n    }\n    this.stashValue();\n  };\n\n  onMathClick = node => {\n    this.editor.change(c => c.collapseToStartOf(node));\n    this.setState({ selectedNode: node });\n  };\n\n  onEditingDone = () => {\n    log('[onEditingDone]');\n    this.setState({ stashedValue: null, focusedNode: null });\n    log('[onEditingDone] value: ', this.state.value);\n    this.props.onChange(this.state.value, true);\n  };\n\n  /**\n   * Remove onResize event listener\n   */\n  componentWillUnmount() {\n    window.removeEventListener('resize', this.onResize);\n  }\n\n  // Allowing time for onChange to take effect if it is called\n  handleBlur = resolve => {\n    const { nonEmpty } = this.props;\n    const {\n      toolbarOpts: { doneOn }\n    } = this.state;\n\n    this.setState({ toolbarInFocus: false, focusedNode: null });\n\n    if (this.editor) {\n      this.editor.blur();\n    }\n\n    if (doneOn === 'blur') {\n      if (nonEmpty && this.state.value.startText.text.length === 0) {\n        this.resetValue(true).then(() => {\n          this.onEditingDone();\n          resolve();\n        });\n      } else {\n        this.onEditingDone();\n        resolve();\n      }\n    }\n  };\n\n  onBlur = event => {\n    log('[onBlur]');\n    const target = event.relatedTarget;\n\n    const node = target ? findNode(target, this.state.value) : null;\n\n    log('[onBlur] node: ', node);\n\n    return new Promise(resolve => {\n      this.setState({ focusedNode: node }, this.handleBlur.bind(this, resolve));\n      this.props.onBlur(event);\n    });\n  };\n\n  handleDomBlur = e => {\n    const editorDOM = document.querySelector(`[data-key=\"${this.state.value.document.key}\"]`);\n\n    setTimeout(() => {\n      if (!this.wrapperRef) {\n        return;\n      }\n\n      const editorElement =\n        !editorDOM || document.activeElement.closest(`[class*=\"${editorDOM.className}\"]`);\n      const toolbarElement =\n        !this.toolbarRef ||\n        document.activeElement.closest(`[class*=\"${this.toolbarRef.className}\"]`);\n      const isInCurrentComponent =\n        this.wrapperRef.contains(editorElement) || this.wrapperRef.contains(toolbarElement);\n\n      if (!isInCurrentComponent) {\n        editorDOM.removeEventListener('blur', this.handleDomBlur);\n        this.onBlur(e);\n      }\n    }, 50);\n  };\n\n  /*\n   * Needs to be wrapped otherwise it causes issues because of race conditions\n   * Known issue for slatejs. See: https://github.com/ianstormtaylor/slate/issues/2097\n   * Using timeout I wasn't able to test this\n   *\n   * Note: The use of promises has been causing issues with MathQuill\n   * */\n  onFocus = () =>\n    new Promise(resolve => {\n      const editorDOM = document.querySelector(`[data-key=\"${this.state.value.document.key}\"]`);\n\n      log('[onFocus]', document.activeElement);\n\n      /**\n       * This is a temporary hack - @see changeData below for some more information.\n       */\n      if (this.__TEMPORARY_CHANGE_DATA) {\n        const { key, data } = this.__TEMPORARY_CHANGE_DATA;\n        const domEl = document.querySelector(`[data-key=\"${key}\"]`);\n\n        if (domEl) {\n          let change = this.state.value.change().setNodeByKey(key, { data });\n\n          this.setState({ value: change.value }, () => {\n            this.__TEMPORARY_CHANGE_DATA = null;\n          });\n        }\n      }\n\n      /**\n       * This is needed just in case the browser decides to make the editor\n       * lose focus without triggering the onBlur event (can happen in a few cases).\n       * This will also trigger onBlur if the user clicks outside of the page when the editor\n       * is focused.\n       */\n      if (editorDOM === document.activeElement) {\n        editorDOM.removeEventListener('blur', this.handleDomBlur);\n        editorDOM.addEventListener('blur', this.handleDomBlur);\n      }\n\n      this.stashValue();\n      this.props.onFocus();\n\n      resolve();\n    });\n\n  stashValue = () => {\n    log('[stashValue]');\n    if (!this.state.stashedValue) {\n      this.setState({ stashedValue: this.state.value });\n    }\n  };\n\n  /**\n   * Reset the value if the user didn't click done.\n   */\n  resetValue = force => {\n    const { value, focusedNode } = this.state;\n\n    const stopReset = this.plugins.reduce((s, p) => {\n      return s || (p.stopReset && p.stopReset(this.state.value));\n    }, false);\n\n    log('[resetValue]', value.isFocused, focusedNode, 'stopReset: ', stopReset);\n    if ((this.state.stashedValue && !value.isFocused && !focusedNode && !stopReset) || force) {\n      log('[resetValue] resetting...');\n      log('stashed', this.state.stashedValue.document.toObject());\n      log('current', this.state.value.document.toObject());\n\n      const newValue = Value.fromJSON(this.state.stashedValue.toJSON());\n\n      log('newValue: ', newValue.document);\n      return new Promise(resolve => {\n        setTimeout(() => {\n          this.setState({ value: newValue, stashedValue: null }, () => {\n            log('value now: ', this.state.value.document.toJSON());\n            resolve();\n          });\n        }, 50);\n      });\n    } else {\n      return Promise.resolve({});\n    }\n  };\n\n  onChange = (change, done) => {\n    log('[onChange]');\n\n    const { value } = change;\n    const { charactersLimit } = this.props;\n\n    if (\n      value &&\n      value.document &&\n      value.document.text &&\n      value.document.text.length > charactersLimit\n    ) {\n      return;\n    }\n\n    this.setState({ value }, () => {\n      log('[onChange], call done()');\n\n      if (done) {\n        done();\n      }\n    });\n  };\n\n  UNSAFE_componentWillReceiveProps(props) {\n    if (!props.value.document.equals(this.props.value.document)) {\n      this.setState({\n        focus: false,\n        value: props.value\n      });\n    }\n  }\n\n  valueToSize = v => {\n    if (!v) {\n      return;\n    }\n\n    if (typeof v === 'string') {\n      if (v.endsWith('%')) {\n        return undefined;\n      } else if (v.endsWith('px') || v.endsWith('vh') || v.endsWith('vw')) {\n        return v;\n      } else {\n        const value = parseInt(v, 10);\n        return isNaN(value) ? value : `${value}px`;\n      }\n    }\n    if (typeof v === 'number') {\n      return `${v}px`;\n    }\n\n    return;\n  };\n\n  buildSizeStyle() {\n    const { width, minHeight, height, maxHeight } = this.props;\n\n    return {\n      width: this.valueToSize(width),\n      height: this.valueToSize(height),\n      minHeight: this.valueToSize(minHeight),\n      maxHeight: this.valueToSize(maxHeight)\n    };\n  }\n\n  validateNode = node => {\n    if (node.object !== 'block') return;\n\n    const last = node.nodes.last();\n    if (!last) return;\n\n    if (last.type !== 'image') return;\n\n    log('[validateNode] last is image..');\n\n    const parent = last.getParent(last.key);\n    const p = Block.getParent(last.key);\n    log('[validateNode] parent:', parent, p);\n\n    return undefined;\n  };\n\n  changeData = (key, data) => {\n    log('[changeData]. .. ', key, data);\n\n    /**\n     * HACK ALERT: We should be calling setState here and storing the change data:\n     *\n     * <code>this.setState({changeData: { key, data}})</code>\n     * However this is causing issues with the Mathquill instance. The 'input' event stops firing on the element and no\n     * more changes get through. The issues seem to be related to the promises in onBlur/onFocus. But removing these\n     * brings it's own problems. A major clean up is planned for this component so I've decided to temporarily settle\n     * on this hack rather than spend more time on this.\n     */\n\n    // Uncomment this line to see the bug described above.\n    // this.setState({changeData: {key, data}})\n\n    this.__TEMPORARY_CHANGE_DATA = { key, data };\n  };\n\n  focus = (pos, node) => {\n    const position = pos || 'end';\n\n    this.props.focus(position, node);\n  };\n\n  render() {\n    const {\n      disabled,\n      spellCheck,\n      highlightShape,\n      classes,\n      className,\n      placeholder,\n      pluginProps,\n      onKeyDown\n    } = this.props;\n\n    const { value, focusedNode, toolbarOpts } = this.state;\n\n    log('[render] value: ', value);\n    const sizeStyle = this.buildSizeStyle();\n    const names = classNames(\n      {\n        [classes.withBg]: highlightShape,\n        [classes.toolbarOnTop]: toolbarOpts.alwaysVisible && toolbarOpts.position === 'top'\n      },\n      className\n    );\n\n    return (\n      <div\n        ref={ref => (this.wrapperRef = ref)}\n        style={{ width: sizeStyle.width }}\n        className={names}\n      >\n        <SlateEditor\n          plugins={this.plugins}\n          innerRef={r => {\n            if (r) {\n              this.slateEditor = r;\n            }\n          }}\n          ref={r => (this.editor = r && this.props.editorRef(r))}\n          toolbarRef={r => {\n            if (r) {\n              this.toolbarRef = r;\n            }\n          }}\n          value={value}\n          focus={this.focus}\n          onKeyDown={onKeyDown}\n          onChange={this.onChange}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n          onEditingDone={this.onEditingDone}\n          focusedNode={focusedNode}\n          normalize={this.normalize}\n          readOnly={disabled}\n          spellCheck={spellCheck}\n          className={classes.slateEditor}\n          style={{\n            minHeight: sizeStyle.minHeight,\n            height: sizeStyle.height,\n            maxHeight: sizeStyle.maxHeight\n          }}\n          pluginProps={pluginProps}\n          toolbarOpts={toolbarOpts}\n          placeholder={placeholder}\n          onDataChange={this.changeData}\n        />\n      </div>\n    );\n  }\n}\n\n// TODO color - hardcoded gray background and keypad colors will need to change too\nconst styles = {\n  withBg: {\n    backgroundColor: 'rgba(0,0,0,0.06)'\n  },\n  slateEditor: {\n    fontFamily: 'Roboto, sans-serif',\n\n    '& table': {\n      tableLayout: 'fixed',\n      width: '100%',\n      borderCollapse: 'collapse',\n      color: color.text(),\n      backgroundColor: color.background()\n    },\n    '& table:not([border=\"1\"]) tr': {\n      borderTop: '1px solid #dfe2e5'\n      // TODO perhaps secondary color for background, for now disable\n      // '&:nth-child(2n)': {\n      //   backgroundColor: '#f6f8fa'\n      // }\n    },\n    '& td, th': {\n      padding: '.6em 1em',\n      textAlign: 'center'\n    },\n    '& table:not([border=\"1\"]) td, th': {\n      border: '1px solid #dfe2e5'\n    }\n  },\n  toolbarOnTop: {\n    marginTop: '45px'\n  }\n};\n\nexport default withStyles(styles)(Editor);\n"],"mappings":"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"}
+{"version":3,"file":"editor.js","names":["log","debug","defaultToolbarOpts","position","alignment","alwaysVisible","showDone","doneOn","defaultResponseAreaProps","options","respAreaToolbar","onHandleAreaChange","defaultLanguageCharactersProps","createToolbarOpts","toolbarOpts","Editor","props","normalizedResponseAreaProps","responseAreaProps","plugins","buildPlugins","activePlugins","math","onClick","onMathClick","onFocus","onPluginFocus","onBlur","onPluginBlur","image","onDelete","imageSupport","src","done","e","state","value","insertImageRequested","getHandler","handler","add","maxImageWidth","maxImageHeight","toolbar","disableUnderline","autoWidth","autoWidthToolbar","onDone","nonEmpty","setState","toolbarInFocus","focusedNode","editor","blur","startText","text","length","resetValue","then","onEditingDone","table","responseArea","type","maxResponseAreas","error","languageCharacters","languageCharactersProps","media","focus","createChange","change","onChange","relatedTarget","target","node","findNode","stashedValue","stashValue","c","collapseToStartOf","selectedNode","resolve","event","Promise","handleBlur","bind","editorDOM","document","querySelector","key","setTimeout","wrapperRef","editorElement","activeElement","closest","className","toolbarElement","toolbarRef","isInCurrentComponent","contains","removeEventListener","handleDomBlur","__TEMPORARY_CHANGE_DATA","data","domEl","setNodeByKey","addEventListener","force","stopReset","reduce","s","p","isFocused","toObject","newValue","Value","fromJSON","toJSON","charactersLimit","v","endsWith","undefined","parseInt","isNaN","object","last","nodes","parent","getParent","Block","pos","onResize","handlePlugins","onRef","window","autoFocus","nextProps","newToolbarOpts","isEqual","zeroWidthEls","querySelectorAll","Array","from","forEach","el","style","minWidth","display","equals","width","minHeight","height","maxHeight","valueToSize","disabled","spellCheck","highlightShape","classes","placeholder","pluginProps","onKeyDown","sizeStyle","buildSizeStyle","names","classNames","withBg","toolbarOnTop","ref","r","slateEditor","editorRef","normalize","changeData","React","Component","PropTypes","bool","func","isRequired","SlateTypes","number","oneOfType","string","any","shape","oneOf","arrayOf","language","characterIcon","characters","values","allValid","every","ALL_PLUGINS","includes","Error","join","styles","backgroundColor","fontFamily","tableLayout","borderCollapse","color","background","borderTop","padding","textAlign","border","marginTop","withStyles"],"sources":["../src/editor.jsx"],"sourcesContent":["import { Editor as SlateEditor, findNode } from 'slate-react';\nimport SlateTypes from 'slate-prop-types';\n\nimport isEqual from 'lodash/isEqual';\nimport * as serialization from './serialization';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport { Value, Block } from 'slate';\nimport { buildPlugins, ALL_PLUGINS, DEFAULT_PLUGINS } from './plugins';\nimport debug from 'debug';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { color } from '@pie-lib/render-ui';\n\nexport { ALL_PLUGINS, DEFAULT_PLUGINS, serialization };\n\nconst log = debug('editable-html:editor');\n\nconst defaultToolbarOpts = {\n  position: 'bottom',\n  alignment: 'left',\n  alwaysVisible: false,\n  showDone: true,\n  doneOn: 'blur'\n};\n\nconst defaultResponseAreaProps = {\n  options: {},\n  respAreaToolbar: () => {},\n  onHandleAreaChange: () => {}\n};\n\nconst defaultLanguageCharactersProps = [];\n\nconst createToolbarOpts = toolbarOpts => {\n  return {\n    ...defaultToolbarOpts,\n    ...toolbarOpts\n  };\n};\n\nexport class Editor extends React.Component {\n  static propTypes = {\n    autoFocus: PropTypes.bool,\n    editorRef: PropTypes.func.isRequired,\n    onRef: PropTypes.func.isRequired,\n    onChange: PropTypes.func.isRequired,\n    onFocus: PropTypes.func,\n    onBlur: PropTypes.func,\n    onKeyDown: PropTypes.func,\n    focus: PropTypes.func.isRequired,\n    value: SlateTypes.value.isRequired,\n    imageSupport: PropTypes.object,\n    charactersLimit: PropTypes.number,\n    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    classes: PropTypes.object.isRequired,\n    highlightShape: PropTypes.bool,\n    disabled: PropTypes.bool,\n    spellCheck: PropTypes.bool,\n    nonEmpty: PropTypes.bool,\n    disableUnderline: PropTypes.bool,\n    autoWidthToolbar: PropTypes.bool,\n    pluginProps: PropTypes.any,\n    placeholder: PropTypes.string,\n    responseAreaProps: PropTypes.shape({\n      type: PropTypes.oneOf([\n        'explicit-constructed-response',\n        'inline-dropdown',\n        'drag-in-the-blank'\n      ]),\n      options: PropTypes.object,\n      respAreaToolbar: PropTypes.func,\n      onHandleAreaChange: PropTypes.func\n    }),\n    languageCharactersProps: PropTypes.arrayOf(\n      PropTypes.shape({\n        language: PropTypes.string,\n        characterIcon: PropTypes.string,\n        characters: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))\n      })\n    ),\n    toolbarOpts: PropTypes.shape({\n      position: PropTypes.oneOf(['bottom', 'top']),\n      alignment: PropTypes.oneOf(['left', 'right']),\n      alwaysVisible: PropTypes.bool,\n      showDone: PropTypes.bool,\n      doneOn: PropTypes.string\n    }),\n    activePlugins: PropTypes.arrayOf(values => {\n      const allValid = values.every(v => ALL_PLUGINS.includes(v));\n\n      return (\n        !allValid &&\n        new Error(`Invalid values: ${values}, values must be one of [${ALL_PLUGINS.join(',')}]`)\n      );\n    }),\n    className: PropTypes.string,\n    maxImageWidth: PropTypes.number,\n    maxImageHeight: PropTypes.number,\n  };\n\n  static defaultProps = {\n    disableUnderline: true,\n    onFocus: () => {},\n    onBlur: () => {},\n    onKeyDown: () => {},\n    toolbarOpts: defaultToolbarOpts,\n    responseAreaProps: defaultResponseAreaProps,\n    languageCharactersProps: defaultLanguageCharactersProps\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      value: props.value,\n      toolbarOpts: createToolbarOpts(props.toolbarOpts)\n    };\n\n    this.onResize = () => {\n      props.onChange(this.state.value, true);\n    };\n\n    this.handlePlugins(this.props);\n  }\n\n  handlePlugins = props => {\n    const normalizedResponseAreaProps = {\n      ...defaultResponseAreaProps,\n      ...props.responseAreaProps\n    };\n\n    this.plugins = buildPlugins(props.activePlugins, {\n      math: {\n        onClick: this.onMathClick,\n        onFocus: this.onPluginFocus,\n        onBlur: this.onPluginBlur\n      },\n      image: {\n        onDelete:\n          props.imageSupport &&\n          props.imageSupport.delete &&\n          ((src, done) => {\n            props.imageSupport.delete(src, e => {\n              done(e, this.state.value);\n            });\n          }),\n        insertImageRequested:\n          props.imageSupport &&\n          (getHandler => {\n            /**\n             * The handler is the object through which the outer context\n             * communicates file upload events like: fileChosen, cancel, progress\n             */\n            const handler = getHandler(() => this.state.value);\n            props.imageSupport.add(handler);\n          }),\n        onFocus: this.onPluginFocus,\n        onBlur: this.onPluginBlur,\n        maxImageWidth: this.props.maxImageWidth,\n        maxImageHeight: this.props.maxImageHeight,\n      },\n      toolbar: {\n        /**\n         * To minimize converting html -> state -> html\n         * We only emit markup once 'done' is clicked.\n         */\n        disableUnderline: props.disableUnderline,\n        autoWidth: props.autoWidthToolbar,\n        onDone: () => {\n          const { nonEmpty } = props;\n\n          log('[onDone]');\n          this.setState({ toolbarInFocus: false, focusedNode: null });\n          this.editor.blur();\n\n          if (nonEmpty && this.state.value.startText.text.length === 0) {\n            this.resetValue(true).then(() => {\n              this.onEditingDone();\n            });\n          } else {\n            this.onEditingDone();\n          }\n        }\n      },\n      table: {\n        onFocus: () => {\n          log('[table:onFocus]...');\n          this.onPluginFocus();\n        },\n        onBlur: () => {\n          log('[table:onBlur]...');\n          this.onPluginBlur();\n        }\n      },\n      responseArea: {\n        type: normalizedResponseAreaProps.type,\n        options: normalizedResponseAreaProps.options,\n        maxResponseAreas: normalizedResponseAreaProps.maxResponseAreas,\n        respAreaToolbar: normalizedResponseAreaProps.respAreaToolbar,\n        onHandleAreaChange: normalizedResponseAreaProps.onHandleAreaChange,\n        error: normalizedResponseAreaProps.error,\n        onFocus: () => {\n          log('[table:onFocus]...');\n          this.onPluginFocus();\n        },\n        onBlur: () => {\n          log('[table:onBlur]...');\n          this.onPluginBlur();\n        }\n      },\n      languageCharacters: props.languageCharactersProps,\n      media: {\n        focus: this.focus,\n        createChange: () => this.state.value.change(),\n        onChange: this.onChange\n      }\n    });\n  };\n\n  componentDidMount() {\n    // onRef is needed to get the ref of the component because we export it using withStyles\n    this.props.onRef(this);\n\n    window.addEventListener('resize', this.onResize);\n\n    if (this.editor && this.props.autoFocus) {\n      Promise.resolve().then(() => {\n        if (this.editor) {\n          const editorDOM = document.querySelector(\n            `[data-key=\"${this.editor.value.document.key}\"]`\n          );\n\n          this.editor.focus();\n\n          if (editorDOM) {\n            editorDOM.focus();\n          }\n        }\n      });\n    }\n  }\n\n  componentWillReceiveProps(nextProps) {\n    const { toolbarOpts } = this.state;\n    const newToolbarOpts = createToolbarOpts(nextProps.toolbarOpts);\n\n    if (!isEqual(newToolbarOpts, toolbarOpts)) {\n      this.setState({\n        toolbarOpts: newToolbarOpts\n      });\n    }\n\n    if (!isEqual(nextProps.languageCharactersProps, this.props.languageCharactersProps)) {\n      this.handlePlugins(nextProps);\n    }\n  }\n\n  componentDidUpdate() {\n    // The cursor is on a zero width element and when that is placed near void elements, it is not visible\n    // so we increase the width to at least 2px in order for the user to see it\n    const zeroWidthEls = document.querySelectorAll('[data-slate-zero-width=\"z\"]');\n\n    Array.from(zeroWidthEls).forEach(el => {\n      el.style.minWidth = '2px';\n      el.style.display = 'inline-block';\n    });\n  }\n\n  onPluginBlur = e => {\n    log('[onPluginBlur]', e && e.relatedTarget);\n    const target = e && e.relatedTarget;\n\n    const node = target ? findNode(target, this.state.value) : null;\n    log('[onPluginBlur] node: ', node);\n    this.setState({ focusedNode: node }, () => {\n      this.resetValue();\n    });\n  };\n\n  onPluginFocus = e => {\n    log('[onPluginFocus]', e && e.target);\n    const target = e && e.target;\n    if (target) {\n      const node = findNode(target, this.state.value);\n      log('[onPluginFocus] node: ', node);\n\n      const stashedValue = this.state.stashedValue || this.state.value;\n      this.setState({ focusedNode: node, stashedValue });\n    } else {\n      this.setState({ focusedNode: null });\n    }\n    this.stashValue();\n  };\n\n  onMathClick = node => {\n    this.editor.change(c => c.collapseToStartOf(node));\n    this.setState({ selectedNode: node });\n  };\n\n  onEditingDone = () => {\n    log('[onEditingDone]');\n    this.setState({ stashedValue: null, focusedNode: null });\n    log('[onEditingDone] value: ', this.state.value);\n    this.props.onChange(this.state.value, true);\n  };\n\n  /**\n   * Remove onResize event listener\n   */\n  componentWillUnmount() {\n    window.removeEventListener('resize', this.onResize);\n  }\n\n  // Allowing time for onChange to take effect if it is called\n  handleBlur = resolve => {\n    const { nonEmpty } = this.props;\n    const {\n      toolbarOpts: { doneOn }\n    } = this.state;\n\n    this.setState({ toolbarInFocus: false, focusedNode: null });\n\n    if (this.editor) {\n      this.editor.blur();\n    }\n\n    if (doneOn === 'blur') {\n      if (nonEmpty && this.state.value.startText.text.length === 0) {\n        this.resetValue(true).then(() => {\n          this.onEditingDone();\n          resolve();\n        });\n      } else {\n        this.onEditingDone();\n        resolve();\n      }\n    }\n  };\n\n  onBlur = event => {\n    log('[onBlur]');\n    const target = event.relatedTarget;\n\n    const node = target ? findNode(target, this.state.value) : null;\n\n    log('[onBlur] node: ', node);\n\n    return new Promise(resolve => {\n      this.setState({ focusedNode: node }, this.handleBlur.bind(this, resolve));\n      this.props.onBlur(event);\n    });\n  };\n\n  handleDomBlur = e => {\n    const editorDOM = document.querySelector(`[data-key=\"${this.state.value.document.key}\"]`);\n\n    setTimeout(() => {\n      if (!this.wrapperRef) {\n        return;\n      }\n\n      const editorElement =\n        !editorDOM || document.activeElement.closest(`[class*=\"${editorDOM.className}\"]`);\n      const toolbarElement =\n        !this.toolbarRef ||\n        document.activeElement.closest(`[class*=\"${this.toolbarRef.className}\"]`);\n      const isInCurrentComponent =\n        this.wrapperRef.contains(editorElement) || this.wrapperRef.contains(toolbarElement);\n\n      if (!isInCurrentComponent) {\n        editorDOM.removeEventListener('blur', this.handleDomBlur);\n        this.onBlur(e);\n      }\n    }, 50);\n  };\n\n  /*\n   * Needs to be wrapped otherwise it causes issues because of race conditions\n   * Known issue for slatejs. See: https://github.com/ianstormtaylor/slate/issues/2097\n   * Using timeout I wasn't able to test this\n   *\n   * Note: The use of promises has been causing issues with MathQuill\n   * */\n  onFocus = () =>\n    new Promise(resolve => {\n      const editorDOM = document.querySelector(`[data-key=\"${this.state.value.document.key}\"]`);\n\n      log('[onFocus]', document.activeElement);\n\n      /**\n       * This is a temporary hack - @see changeData below for some more information.\n       */\n      if (this.__TEMPORARY_CHANGE_DATA) {\n        const { key, data } = this.__TEMPORARY_CHANGE_DATA;\n        const domEl = document.querySelector(`[data-key=\"${key}\"]`);\n\n        if (domEl) {\n          let change = this.state.value.change().setNodeByKey(key, { data });\n\n          this.setState({ value: change.value }, () => {\n            this.__TEMPORARY_CHANGE_DATA = null;\n          });\n        }\n      }\n\n      /**\n       * This is needed just in case the browser decides to make the editor\n       * lose focus without triggering the onBlur event (can happen in a few cases).\n       * This will also trigger onBlur if the user clicks outside of the page when the editor\n       * is focused.\n       */\n      if (editorDOM === document.activeElement) {\n        editorDOM.removeEventListener('blur', this.handleDomBlur);\n        editorDOM.addEventListener('blur', this.handleDomBlur);\n      }\n\n      this.stashValue();\n      this.props.onFocus();\n\n      resolve();\n    });\n\n  stashValue = () => {\n    log('[stashValue]');\n    if (!this.state.stashedValue) {\n      this.setState({ stashedValue: this.state.value });\n    }\n  };\n\n  /**\n   * Reset the value if the user didn't click done.\n   */\n  resetValue = force => {\n    const { value, focusedNode } = this.state;\n\n    const stopReset = this.plugins.reduce((s, p) => {\n      return s || (p.stopReset && p.stopReset(this.state.value));\n    }, false);\n\n    log('[resetValue]', value.isFocused, focusedNode, 'stopReset: ', stopReset);\n    if ((this.state.stashedValue && !value.isFocused && !focusedNode && !stopReset) || force) {\n      log('[resetValue] resetting...');\n      log('stashed', this.state.stashedValue.document.toObject());\n      log('current', this.state.value.document.toObject());\n\n      const newValue = Value.fromJSON(this.state.stashedValue.toJSON());\n\n      log('newValue: ', newValue.document);\n      return new Promise(resolve => {\n        setTimeout(() => {\n          this.setState({ value: newValue, stashedValue: null }, () => {\n            log('value now: ', this.state.value.document.toJSON());\n            resolve();\n          });\n        }, 50);\n      });\n    } else {\n      return Promise.resolve({});\n    }\n  };\n\n  onChange = (change, done) => {\n    log('[onChange]');\n\n    const { value } = change;\n    const { charactersLimit } = this.props;\n\n    if (\n      value &&\n      value.document &&\n      value.document.text &&\n      value.document.text.length > charactersLimit\n    ) {\n      return;\n    }\n\n    this.setState({ value }, () => {\n      log('[onChange], call done()');\n\n      if (done) {\n        done();\n      }\n    });\n  };\n\n  UNSAFE_componentWillReceiveProps(props) {\n    if (!props.value.document.equals(this.props.value.document)) {\n      this.setState({\n        focus: false,\n        value: props.value\n      });\n    }\n  }\n\n  valueToSize = v => {\n    if (!v) {\n      return;\n    }\n\n    if (typeof v === 'string') {\n      if (v.endsWith('%')) {\n        return undefined;\n      } else if (v.endsWith('px') || v.endsWith('vh') || v.endsWith('vw')) {\n        return v;\n      } else {\n        const value = parseInt(v, 10);\n        return isNaN(value) ? value : `${value}px`;\n      }\n    }\n    if (typeof v === 'number') {\n      return `${v}px`;\n    }\n\n    return;\n  };\n\n  buildSizeStyle() {\n    const { width, minHeight, height, maxHeight } = this.props;\n\n    return {\n      width: this.valueToSize(width),\n      height: this.valueToSize(height),\n      minHeight: this.valueToSize(minHeight),\n      maxHeight: this.valueToSize(maxHeight)\n    };\n  }\n\n  validateNode = node => {\n    if (node.object !== 'block') return;\n\n    const last = node.nodes.last();\n    if (!last) return;\n\n    if (last.type !== 'image') return;\n\n    log('[validateNode] last is image..');\n\n    const parent = last.getParent(last.key);\n    const p = Block.getParent(last.key);\n    log('[validateNode] parent:', parent, p);\n\n    return undefined;\n  };\n\n  changeData = (key, data) => {\n    log('[changeData]. .. ', key, data);\n\n    /**\n     * HACK ALERT: We should be calling setState here and storing the change data:\n     *\n     * <code>this.setState({changeData: { key, data}})</code>\n     * However this is causing issues with the Mathquill instance. The 'input' event stops firing on the element and no\n     * more changes get through. The issues seem to be related to the promises in onBlur/onFocus. But removing these\n     * brings it's own problems. A major clean up is planned for this component so I've decided to temporarily settle\n     * on this hack rather than spend more time on this.\n     */\n\n    // Uncomment this line to see the bug described above.\n    // this.setState({changeData: {key, data}})\n\n    this.__TEMPORARY_CHANGE_DATA = { key, data };\n  };\n\n  focus = (pos, node) => {\n    const position = pos || 'end';\n\n    this.props.focus(position, node);\n  };\n\n  render() {\n    const {\n      disabled,\n      spellCheck,\n      highlightShape,\n      classes,\n      className,\n      placeholder,\n      pluginProps,\n      onKeyDown\n    } = this.props;\n\n    const { value, focusedNode, toolbarOpts } = this.state;\n\n    log('[render] value: ', value);\n    const sizeStyle = this.buildSizeStyle();\n    const names = classNames(\n      {\n        [classes.withBg]: highlightShape,\n        [classes.toolbarOnTop]: toolbarOpts.alwaysVisible && toolbarOpts.position === 'top'\n      },\n      className\n    );\n\n    return (\n      <div\n        ref={ref => (this.wrapperRef = ref)}\n        style={{ width: sizeStyle.width }}\n        className={names}\n      >\n        <SlateEditor\n          plugins={this.plugins}\n          innerRef={r => {\n            if (r) {\n              this.slateEditor = r;\n            }\n          }}\n          ref={r => (this.editor = r && this.props.editorRef(r))}\n          toolbarRef={r => {\n            if (r) {\n              this.toolbarRef = r;\n            }\n          }}\n          value={value}\n          focus={this.focus}\n          onKeyDown={onKeyDown}\n          onChange={this.onChange}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n          onEditingDone={this.onEditingDone}\n          focusedNode={focusedNode}\n          normalize={this.normalize}\n          readOnly={disabled}\n          spellCheck={spellCheck}\n          className={classes.slateEditor}\n          style={{\n            minHeight: sizeStyle.minHeight,\n            height: sizeStyle.height,\n            maxHeight: sizeStyle.maxHeight\n          }}\n          pluginProps={pluginProps}\n          toolbarOpts={toolbarOpts}\n          placeholder={placeholder}\n          onDataChange={this.changeData}\n        />\n      </div>\n    );\n  }\n}\n\n// TODO color - hardcoded gray background and keypad colors will need to change too\nconst styles = {\n  withBg: {\n    backgroundColor: 'rgba(0,0,0,0.06)'\n  },\n  slateEditor: {\n    fontFamily: 'Roboto, sans-serif',\n\n    '& table': {\n      tableLayout: 'fixed',\n      width: '100%',\n      borderCollapse: 'collapse',\n      color: color.text(),\n      backgroundColor: color.background()\n    },\n    '& table:not([border=\"1\"]) tr': {\n      borderTop: '1px solid #dfe2e5'\n      // TODO perhaps secondary color for background, for now disable\n      // '&:nth-child(2n)': {\n      //   backgroundColor: '#f6f8fa'\n      // }\n    },\n    '& td, th': {\n      padding: '.6em 1em',\n      textAlign: 'center'\n    },\n    '& table:not([border=\"1\"]) td, th': {\n      border: '1px solid #dfe2e5'\n    }\n  },\n  toolbarOnTop: {\n    marginTop: '45px'\n  }\n};\n\nexport default withStyles(styles)(Editor);\n"],"mappings":"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"}

package/lib/plugins/image/component.js

@@ -88,22 +88,14 @@ var Component = /*#__PURE__*/function (_React$Component) {
       var _this$props = _this.props,
           node = _this$props.node,
           editor = _this$props.editor;
-      var resizePercent = node.data.get('resizePercent');
-      log('[applySizeData]: resizePercent: ', resizePercent);
       var update = node.data;
+      var w = update.get('width');
 
-      if (resizePercent) {
-        update = update.set('width', _this.getWidth(resizePercent));
-        update = update.set('height', _this.getHeight(resizePercent));
-      } else {
-        var w = update.get('width');
-
-        if (w) {
-          update = update.set('resizePercent', _this.getPercentFromWidth(w));
-        }
+      if (w) {
+        update = update.set('resizePercent', _this.getPercentFromWidth(w));
       }
 
-      log('[applySizeData] update: ', update);
+      log("[applySizeData] update: ", update);
 
       if (!update.equals(node.data)) {
         editor.change(function (c) {
@@ -114,6 +106,138 @@ var Component = /*#__PURE__*/function (_React$Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "initialiseResize", function () {
+      window.addEventListener('mousemove', _this.startResizing, false);
+      window.addEventListener('mouseup', _this.stopResizing, false);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "loadImage", function () {
+      var _ref = _this.props || {},
+          maxImageWidth = _ref.maxImageWidth,
+          maxImageHeight = _ref.maxImageHeight;
+
+      maxImageWidth = maxImageWidth || 700;
+      maxImageHeight = maxImageHeight || 900;
+      var box = _this.img; //on first load
+
+      if (!box.style.width || box.style.width === 'auto') {
+        var dimensions = {
+          width: box && box.naturalWidth || 100,
+          height: box && box.naturalHeight || 100
+        };
+
+        var _this$updateImageDime = _this.updateImageDimensions(dimensions, {
+          width: dimensions.width < maxImageWidth ? dimensions.width : maxImageWidth,
+          height: dimensions.height < maxImageHeight ? dimensions.height : maxImageHeight
+        }, true),
+            width = _this$updateImageDime.width,
+            height = _this$updateImageDime.height;
+
+        box.style.width = "".concat(width, "px");
+        box.style.height = "".concat(height, "px");
+
+        _this.setState({
+          dimensions: {
+            height: height,
+            width: width
+          }
+        });
+
+        var _this$props2 = _this.props,
+            node = _this$props2.node,
+            editor = _this$props2.editor;
+        var update = node.data;
+        update = update.set('width', width);
+        update = update.set('height', height);
+
+        if (!update.equals(node.data)) {
+          editor.change(function (c) {
+            return c.setNodeByKey(node.key, {
+              data: update
+            });
+          });
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "startResizing", function (e) {
+      var bounds = e.target.getBoundingClientRect();
+      var box = _this.img;
+      var dimensions = {
+        width: box && box.naturalWidth || 100,
+        height: box && box.naturalHeight || 100
+      };
+
+      var _this$updateImageDime2 = _this.updateImageDimensions(dimensions, {
+        width: e.clientX - bounds.left,
+        height: e.clientY - bounds.top
+      }, true),
+          width = _this$updateImageDime2.width,
+          height = _this$updateImageDime2.height;
+
+      var hasMinimumWidth = width > 50 && height > 50;
+      var hasDimensionsConstraints = width <= 700 && height <= 900;
+
+      if (hasMinimumWidth && hasDimensionsConstraints && box) {
+        box.style.width = "".concat(width, "px");
+        box.style.height = "".concat(height, "px");
+
+        _this.setState({
+          dimensions: {
+            height: height,
+            width: width
+          }
+        });
+
+        var _this$props3 = _this.props,
+            node = _this$props3.node,
+            editor = _this$props3.editor;
+        var update = node.data;
+        update = update.set('width', width);
+        update = update.set('height', height);
+
+        if (!update.equals(node.data)) {
+          editor.change(function (c) {
+            return c.setNodeByKey(node.key, {
+              data: update
+            });
+          });
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "stopResizing", function () {
+      window.removeEventListener('mousemove', _this.startResizing, false);
+      window.removeEventListener('mouseup', _this.stopResizing, false);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "updateImageDimensions", function (initialDim, nextDim, keepAspectRatio, resizeType) {
+      // if we want to keep image aspect ratio
+      if (keepAspectRatio) {
+        var imageAspectRatio = initialDim.width / initialDim.height;
+
+        if (resizeType === 'height') {
+          // if we want to change image height => we update the width accordingly
+          return {
+            width: nextDim.height * imageAspectRatio,
+            height: nextDim.height
+          };
+        } // if we want to change image width => we update the height accordingly
+
+
+        return {
+          width: nextDim.width,
+          height: nextDim.width / imageAspectRatio
+        };
+      } // if we don't want to keep aspect ratio, we just update both values
+
+
+      return {
+        width: nextDim.width,
+        height: nextDim.height
+      };
+    });
+
     return _this;
   }
 
@@ -121,6 +245,11 @@ var Component = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.applySizeData();
+      var resizeHandle = this.resize;
+
+      if (resizeHandle) {
+        resizeHandle.addEventListener('mousedown', this.initialiseResize, false);
+      }
     }
   }, {
     key: "componentDidUpdate",
@@ -141,12 +270,12 @@ var Component = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      var _this$props2 = this.props,
-          node = _this$props2.node,
-          editor = _this$props2.editor,
-          classes = _this$props2.classes,
-          attributes = _this$props2.attributes,
-          onFocus = _this$props2.onFocus;
+      var _this$props4 = this.props,
+          node = _this$props4.node,
+          editor = _this$props4.editor,
+          classes = _this$props4.classes,
+          attributes = _this$props4.attributes,
+          onFocus = _this$props4.onFocus;
       var active = editor.value.isFocused && editor.value.selection.hasEdgeIn(node);
       var src = node.data.get('src');
       var percent = node.data.get('percent');
@@ -155,7 +284,7 @@ var Component = /*#__PURE__*/function (_React$Component) {
       log('[render] node.data:', node.data);
       var size = this.getSize(node.data);
       log('[render] style:', size);
-      var className = (0, _classnames["default"])(classes.root, active && classes.active, !loaded && classes.loading, deleteStatus === 'pending' && classes.pendingDelete);
+      var className = (0, _classnames["default"])(classes.root, !loaded && classes.loading, deleteStatus === 'pending' && classes.pendingDelete);
       var progressClasses = (0, _classnames["default"])(classes.progress, loaded && classes.hideProgress);
       return [/*#__PURE__*/_react["default"].createElement("span", {
         key: 'sp1'
@@ -167,13 +296,21 @@ var Component = /*#__PURE__*/function (_React$Component) {
         mode: "determinate",
         value: percent > 0 ? percent : 0,
         className: progressClasses
-      }), /*#__PURE__*/_react["default"].createElement("img", _extends({
-        src: src
-      }, attributes, {
-        ref: function ref(r) {
-          return _this2.img = r;
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.imageContainer
+      }, /*#__PURE__*/_react["default"].createElement("img", _extends({}, attributes, {
+        className: (0, _classnames["default"])(classes.image, active && classes.active),
+        ref: function ref(_ref2) {
+          _this2.img = _ref2;
+        },
+        src: src,
+        style: size,
+        onLoad: this.loadImage
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        ref: function ref(_ref3) {
+          _this2.resize = _ref3;
         },
-        style: size
+        className: (0, _classnames["default"])(classes.resize, 'resize')
       }))), /*#__PURE__*/_react["default"].createElement("span", {
         key: 'sp2'
       }, "\xA0")];
@@ -194,7 +331,9 @@ _defineProperty(Component, "propTypes", {
   classes: _propTypes["default"].object.isRequired,
   attributes: _propTypes["default"].object,
   onFocus: _propTypes["default"].func,
-  onBlur: _propTypes["default"].func
+  onBlur: _propTypes["default"].func,
+  maxImageWidth: _propTypes["default"].number,
+  maxImageHeight: _propTypes["default"].number
 });
 
 var styles = function styles(theme) {
@@ -234,12 +373,34 @@ var styles = function styles(theme) {
       display: 'inline-block',
       transition: 'opacity 200ms linear'
     },
-    active: {
-      border: "solid 1px ".concat(theme.palette.primary.main)
-    },
     "delete": {
       position: 'absolute',
       right: 0
+    },
+    imageContainer: {
+      position: 'relative',
+      width: 'fit-content',
+      display: 'flex',
+      alignItems: 'center',
+      '&&:hover > .resize': {
+        display: 'block'
+      }
+    },
+    active: {
+      border: "solid 1px ".concat(theme.palette.primary.main)
+    },
+    resize: {
+      backgroundColor: theme.palette.primary.main,
+      cursor: 'col-resize',
+      height: '35px',
+      width: '5px',
+      borderRadius: 8,
+      marginLeft: '5px',
+      marginRight: '10px',
+      display: 'none'
+    },
+    drawableHeight: {
+      minHeight: 350
     }
   };
 };

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","resizePercent","data","get","update","set","getWidth","getHeight","w","getPercentFromWidth","equals","change","c","setNodeByKey","key","applySizeData","height","objectFit","classes","attributes","onFocus","active","value","isFocused","selection","hasEdgeIn","src","loaded","deleteStatus","getSize","className","classNames","root","loading","pendingDelete","progressClasses","progress","hideProgress","r","React","SlatePropTypes","isRequired","PropTypes","shape","func","object","onBlur","styles","theme","portal","position","opacity","transition","floatingButtonRow","backgroundColor","borderRadius","display","padding","border","boxShadow","left","top","palette","primary","main","right","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  };\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    const resizePercent = node.data.get('resizePercent');\n    log('[applySizeData]: resizePercent: ', resizePercent);\n\n    let update = node.data;\n\n    if (resizePercent) {\n      update = update.set('width', this.getWidth(resizePercent));\n      update = update.set('height', this.getHeight(resizePercent));\n    } else {\n      const w = update.get('width');\n      if (w) {\n        update = update.set('resizePercent', this.getPercentFromWidth(w));\n      }\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  componentDidMount() {\n    this.applySizeData();\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  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      active && classes.active,\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        <img src={src} {...attributes} ref={r => (this.img = r)} style={size} />\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  active: {\n    border: `solid 1px ${theme.palette.primary.main}`\n  },\n  delete: {\n    position: 'absolute',\n    right: 0\n  }\n});\n\nexport default withStyles(styles)(Component);\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,GAAG,GAAG,IAAAC,iBAAA,EAAM,gDAAN,CAAZ;;AAEA,IAAMC,IAAI,GAAG,SAAPA,IAAO,CAAAC,CAAC;EAAA,OAAKA,CAAC,aAAMA,CAAN,UAAc,MAApB;AAAA,CAAd;;IAEaC,S;;;;;;;;;;;;;;;;+DAaA,UAAAC,OAAO,EAAI;MACpB,IAAMC,UAAU,GAAGD,OAAO,GAAG,GAA7B;MACA,OAAO,MAAKE,GAAL,CAASC,YAAT,GAAwBF,UAA/B;IACD,C;;gEAEW,UAAAD,OAAO,EAAI;MACrB,IAAMC,UAAU,GAAGD,OAAO,GAAG,GAA7B;MACA,OAAO,MAAKE,GAAL,CAASE,aAAT,GAAyBH,UAAhC;IACD,C;;0EAEqB,UAAAI,KAAK,EAAI;MAC7B,IAAIC,OAAO,GAAID,KAAK,GAAG,MAAKH,GAAL,CAASC,YAAlB,GAAkC,CAAhD;MACA,OAAOI,QAAQ,CAACD,OAAO,CAACE,OAAR,CAAgB,CAAhB,IAAqB,EAAtB,EAA0B,EAA1B,CAAf;IACD,C;;oEAEe,YAAM;MACpB,kBAAyB,MAAKC,KAA9B;MAAA,IAAQC,IAAR,eAAQA,IAAR;MAAA,IAAcC,MAAd,eAAcA,MAAd;MAEA,IAAMC,aAAa,GAAGF,IAAI,CAACG,IAAL,CAAUC,GAAV,CAAc,eAAd,CAAtB;MACAnB,GAAG,CAAC,kCAAD,EAAqCiB,aAArC,CAAH;MAEA,IAAIG,MAAM,GAAGL,IAAI,CAACG,IAAlB;;MAEA,IAAID,aAAJ,EAAmB;QACjBG,MAAM,GAAGA,MAAM,CAACC,GAAP,CAAW,OAAX,EAAoB,MAAKC,QAAL,CAAcL,aAAd,CAApB,CAAT;QACAG,MAAM,GAAGA,MAAM,CAACC,GAAP,CAAW,QAAX,EAAqB,MAAKE,SAAL,CAAeN,aAAf,CAArB,CAAT;MACD,CAHD,MAGO;QACL,IAAMO,CAAC,GAAGJ,MAAM,CAACD,GAAP,CAAW,OAAX,CAAV;;QACA,IAAIK,CAAJ,EAAO;UACLJ,MAAM,GAAGA,MAAM,CAACC,GAAP,CAAW,eAAX,EAA4B,MAAKI,mBAAL,CAAyBD,CAAzB,CAA5B,CAAT;QACD;MACF;;MAEDxB,GAAG,CAAC,0BAAD,EAA6BoB,MAA7B,CAAH;;MAEA,IAAI,CAACA,MAAM,CAACM,MAAP,CAAcX,IAAI,CAACG,IAAnB,CAAL,EAA+B;QAC7BF,MAAM,CAACW,MAAP,CAAc,UAAAC,CAAC;UAAA,OAAIA,CAAC,CAACC,YAAF,CAAed,IAAI,CAACe,GAApB,EAAyB;YAAEZ,IAAI,EAAEE;UAAR,CAAzB,CAAJ;QAAA,CAAf;MACD;IACF,C;;;;;;;WAED,6BAAoB;MAClB,KAAKW,aAAL;IACD;;;WAED,8BAAqB;MACnB,KAAKA,aAAL;IACD;;;WAED,iBAAQb,IAAR,EAAc;MACZ,OAAO;QACLR,KAAK,EAAER,IAAI,CAACgB,IAAI,CAACC,GAAL,CAAS,OAAT,CAAD,CADN;QAELa,MAAM,EAAE9B,IAAI,CAACgB,IAAI,CAACC,GAAL,CAAS,QAAT,CAAD,CAFP;QAGLc,SAAS,EAAE;MAHN,CAAP;IAKD;;;WAED,kBAAS;MAAA;;MACP,mBAAuD,KAAKnB,KAA5D;MAAA,IAAQC,IAAR,gBAAQA,IAAR;MAAA,IAAcC,MAAd,gBAAcA,MAAd;MAAA,IAAsBkB,OAAtB,gBAAsBA,OAAtB;MAAA,IAA+BC,UAA/B,gBAA+BA,UAA/B;MAAA,IAA2CC,OAA3C,gBAA2CA,OAA3C;MACA,IAAMC,MAAM,GAAGrB,MAAM,CAACsB,KAAP,CAAaC,SAAb,IAA0BvB,MAAM,CAACsB,KAAP,CAAaE,SAAb,CAAuBC,SAAvB,CAAiC1B,IAAjC,CAAzC;MACA,IAAM2B,GAAG,GAAG3B,IAAI,CAACG,IAAL,CAAUC,GAAV,CAAc,KAAd,CAAZ;MACA,IAAMd,OAAO,GAAGU,IAAI,CAACG,IAAL,CAAUC,GAAV,CAAc,SAAd,CAAhB;MACA,IAAMwB,MAAM,GAAG5B,IAAI,CAACG,IAAL,CAAUC,GAAV,CAAc,QAAd,MAA4B,KAA3C;MACA,IAAMyB,YAAY,GAAG7B,IAAI,CAACG,IAAL,CAAUC,GAAV,CAAc,cAAd,CAArB;MAEAnB,GAAG,CAAC,qBAAD,EAAwBe,IAAI,CAACG,IAA7B,CAAH;MAEA,IAAMhB,IAAI,GAAG,KAAK2C,OAAL,CAAa9B,IAAI,CAACG,IAAlB,CAAb;MAEAlB,GAAG,CAAC,iBAAD,EAAoBE,IAApB,CAAH;MAEA,IAAM4C,SAAS,GAAG,IAAAC,sBAAA,EAChBb,OAAO,CAACc,IADQ,EAEhBX,MAAM,IAAIH,OAAO,CAACG,MAFF,EAGhB,CAACM,MAAD,IAAWT,OAAO,CAACe,OAHH,EAIhBL,YAAY,KAAK,SAAjB,IAA8BV,OAAO,CAACgB,aAJtB,CAAlB;MAOA,IAAMC,eAAe,GAAG,IAAAJ,sBAAA,EAAWb,OAAO,CAACkB,QAAnB,EAA6BT,MAAM,IAAIT,OAAO,CAACmB,YAA/C,CAAxB;MAEA,OAAO,cACL;QAAM,GAAG,EAAE;MAAX,UADK,eAEL;QAAK,GAAG,EAAE,MAAV;QAAkB,OAAO,EAAEjB,OAA3B;QAAoC,SAAS,EAAEU;MAA/C,gBACE,gCAAC,0BAAD;QACE,IAAI,EAAC,aADP;QAEE,KAAK,EAAEzC,OAAO,GAAG,CAAV,GAAcA,OAAd,GAAwB,CAFjC;QAGE,SAAS,EAAE8C;MAHb,EADF,eAME;QAAK,GAAG,EAAET;MAAV,GAAmBP,UAAnB;QAA+B,GAAG,EAAE,aAAAmB,CAAC;UAAA,OAAK,MAAI,CAAC/C,GAAL,GAAW+C,CAAhB;QAAA,CAArC;QAAyD,KAAK,EAAEpD;MAAhE,GANF,CAFK,eAUL;QAAM,GAAG,EAAE;MAAX,UAVK,CAAP;IAYD;;;;EAxG4BqD,iBAAA,CAAMnD,S;;;;gBAAxBA,S,eACQ;EACjBW,IAAI,EAAEyC,0BAAA,CAAezC,IAAf,CAAoB0C,UADT;EAEjBzC,MAAM,EAAE0C,qBAAA,CAAUC,KAAV,CAAgB;IACtBhC,MAAM,EAAE+B,qBAAA,CAAUE,IAAV,CAAeH,UADD;IAEtBnB,KAAK,EAAEoB,qBAAA,CAAUG;EAFK,CAAhB,EAGLJ,UALc;EAMjBvB,OAAO,EAAEwB,qBAAA,CAAUG,MAAV,CAAiBJ,UANT;EAOjBtB,UAAU,EAAEuB,qBAAA,CAAUG,MAPL;EAQjBzB,OAAO,EAAEsB,qBAAA,CAAUE,IARF;EASjBE,MAAM,EAAEJ,qBAAA,CAAUE;AATD,C;;AA0GrB,IAAMG,MAAM,GAAG,SAATA,MAAS,CAAAC,KAAK;EAAA,OAAK;IACvBC,MAAM,EAAE;MACNC,QAAQ,EAAE,UADJ;MAENC,OAAO,EAAE,CAFH;MAGNC,UAAU,EAAE;IAHN,CADe;IAMvBC,iBAAiB,EAAE;MACjBC,eAAe,EAAE,OADA;MAEjBC,YAAY,EAAE,KAFG;MAGjBC,OAAO,EAAE,MAHQ;MAIjBC,OAAO,EAAE,MAJQ;MAKjBC,MAAM,EAAE,mBALS;MAMjBC,SAAS,EACP;IAPe,CANI;IAevBvB,QAAQ,EAAE;MACRc,QAAQ,EAAE,UADF;MAERU,IAAI,EAAE,GAFE;MAGRlE,KAAK,EAAE,MAHC;MAIRmE,GAAG,EAAE,IAJG;MAKRT,UAAU,EAAE;IALJ,CAfa;IAsBvBf,YAAY,EAAE;MACZc,OAAO,EAAE;IADG,CAtBS;IAyBvBlB,OAAO,EAAE;MACPkB,OAAO,EAAE;IADF,CAzBc;IA4BvBjB,aAAa,EAAE;MACbiB,OAAO,EAAE;IADI,CA5BQ;IA+BvBnB,IAAI,EAAE;MACJkB,QAAQ,EAAE,UADN;MAEJQ,MAAM,EAAE,iBAFJ;MAGJF,OAAO,EAAE,cAHL;MAIJJ,UAAU,EAAE;IAJR,CA/BiB;IAqCvB/B,MAAM,EAAE;MACNqC,MAAM,sBAAeV,KAAK,CAACc,OAAN,CAAcC,OAAd,CAAsBC,IAArC;IADA,CArCe;IAwCvB,UAAQ;MACNd,QAAQ,EAAE,UADJ;MAENe,KAAK,EAAE;IAFD;EAxCe,CAAL;AAAA,CAApB;;eA8Ce,IAAAC,kBAAA,EAAWnB,MAAX,EAAmB3D,SAAnB,C"}
+{"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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"}

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

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.ImageToolbar = void 0;
 
-var _toolbarButtons = require("../toolbar/toolbar-buttons");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -43,76 +41,25 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:image:image-toolbar');
 
-var PercentButton = function PercentButton(_ref) {
-  var percent = _ref.percent,
-      active = _ref.active,
-      onClick = _ref.onClick;
-  var label = "".concat(percent, "%");
-  return /*#__PURE__*/_react["default"].createElement(_toolbarButtons.MarkButton, {
-    active: active,
-    onToggle: function onToggle() {
-      return onClick(percent);
-    },
-    label: label
-  }, label);
-};
-
-PercentButton.propTypes = {
-  percent: _propTypes["default"].number.isRequired,
-  active: _propTypes["default"].bool.isRequired,
-  onClick: _propTypes["default"].func.isRequired
-};
-
 var ImageToolbar = /*#__PURE__*/function (_React$Component) {
   _inherits(ImageToolbar, _React$Component);
 
   var _super = _createSuper(ImageToolbar);
 
   function ImageToolbar() {
-    var _this;
-
     _classCallCheck(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));
-
-    _defineProperty(_assertThisInitialized(_this), "onPercentClick", function (percent) {
-      log('[onPercentClick]: percent:', percent);
-
-      _this.props.onChange(percent);
-    });
-
-    return _this;
+    return _super.apply(this, arguments);
   }
 
   _createClass(ImageToolbar, [{
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-          classes = _this$props.classes,
-          percent = _this$props.percent;
+      // Don't remove toolbar since we will have other new buttons
+      var classes = this.props.classes;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.holder
-      }, /*#__PURE__*/_react["default"].createElement(PercentButton, {
-        percent: 25,
-        active: percent === 25,
-        onClick: this.onPercentClick
-      }), /*#__PURE__*/_react["default"].createElement(PercentButton, {
-        percent: 50,
-        active: percent === 50,
-        onClick: this.onPercentClick
-      }), /*#__PURE__*/_react["default"].createElement(PercentButton, {
-        active: percent === 75,
-        percent: 75,
-        onClick: this.onPercentClick
-      }), /*#__PURE__*/_react["default"].createElement(PercentButton, {
-        percent: 100,
-        active: percent === 100 || !percent,
-        onClick: this.onPercentClick
-      }));
+      });
     }
   }]);
 
@@ -122,7 +69,6 @@ var ImageToolbar = /*#__PURE__*/function (_React$Component) {
 exports.ImageToolbar = ImageToolbar;
 
 _defineProperty(ImageToolbar, "propTypes", {
-  percent: _propTypes["default"].number.isRequired,
   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","PercentButton","percent","active","onClick","label","propTypes","PropTypes","number","isRequired","bool","func","ImageToolbar","props","onChange","classes","holder","onPercentClick","React","Component","object","styles","theme","paddingLeft","spacing","unit","display","alignItems","withStyles"],"sources":["../../../src/plugins/image/image-toolbar.jsx"],"sourcesContent":["import { MarkButton } from '../toolbar/toolbar-buttons';\n\nimport 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\nconst PercentButton = ({ percent, active, onClick }) => {\n  const label = `${percent}%`;\n  return (\n    <MarkButton active={active} onToggle={() => onClick(percent)} label={label}>\n      {label}\n    </MarkButton>\n  );\n};\n\nPercentButton.propTypes = {\n  percent: PropTypes.number.isRequired,\n  active: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired\n};\n\nexport class ImageToolbar extends React.Component {\n  static propTypes = {\n    percent: PropTypes.number.isRequired,\n    onChange: PropTypes.func.isRequired,\n    classes: PropTypes.object.isRequired\n  };\n\n  onPercentClick = percent => {\n    log('[onPercentClick]: percent:', percent);\n    this.props.onChange(percent);\n  };\n\n  render() {\n    const { classes, percent } = this.props;\n    return (\n      <div className={classes.holder}>\n        <PercentButton percent={25} active={percent === 25} onClick={this.onPercentClick} />\n        <PercentButton percent={50} active={percent === 50} onClick={this.onPercentClick} />\n        <PercentButton active={percent === 75} percent={75} onClick={this.onPercentClick} />\n        <PercentButton\n          percent={100}\n          active={percent === 100 || !percent}\n          onClick={this.onPercentClick}\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;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,GAAG,GAAG,IAAAC,iBAAA,EAAM,oDAAN,CAAZ;;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAAkC;EAAA,IAA/BC,OAA+B,QAA/BA,OAA+B;EAAA,IAAtBC,MAAsB,QAAtBA,MAAsB;EAAA,IAAdC,OAAc,QAAdA,OAAc;EACtD,IAAMC,KAAK,aAAMH,OAAN,MAAX;EACA,oBACE,gCAAC,0BAAD;IAAY,MAAM,EAAEC,MAApB;IAA4B,QAAQ,EAAE;MAAA,OAAMC,OAAO,CAACF,OAAD,CAAb;IAAA,CAAtC;IAA8D,KAAK,EAAEG;EAArE,GACGA,KADH,CADF;AAKD,CAPD;;AASAJ,aAAa,CAACK,SAAd,GAA0B;EACxBJ,OAAO,EAAEK,qBAAA,CAAUC,MAAV,CAAiBC,UADF;EAExBN,MAAM,EAAEI,qBAAA,CAAUG,IAAV,CAAeD,UAFC;EAGxBL,OAAO,EAAEG,qBAAA,CAAUI,IAAV,CAAeF;AAHA,CAA1B;;IAMaG,Y;;;;;;;;;;;;;;;;qEAOM,UAAAV,OAAO,EAAI;MAC1BH,GAAG,CAAC,4BAAD,EAA+BG,OAA/B,CAAH;;MACA,MAAKW,KAAL,CAAWC,QAAX,CAAoBZ,OAApB;IACD,C;;;;;;;WAED,kBAAS;MACP,kBAA6B,KAAKW,KAAlC;MAAA,IAAQE,OAAR,eAAQA,OAAR;MAAA,IAAiBb,OAAjB,eAAiBA,OAAjB;MACA,oBACE;QAAK,SAAS,EAAEa,OAAO,CAACC;MAAxB,gBACE,gCAAC,aAAD;QAAe,OAAO,EAAE,EAAxB;QAA4B,MAAM,EAAEd,OAAO,KAAK,EAAhD;QAAoD,OAAO,EAAE,KAAKe;MAAlE,EADF,eAEE,gCAAC,aAAD;QAAe,OAAO,EAAE,EAAxB;QAA4B,MAAM,EAAEf,OAAO,KAAK,EAAhD;QAAoD,OAAO,EAAE,KAAKe;MAAlE,EAFF,eAGE,gCAAC,aAAD;QAAe,MAAM,EAAEf,OAAO,KAAK,EAAnC;QAAuC,OAAO,EAAE,EAAhD;QAAoD,OAAO,EAAE,KAAKe;MAAlE,EAHF,eAIE,gCAAC,aAAD;QACE,OAAO,EAAE,GADX;QAEE,MAAM,EAAEf,OAAO,KAAK,GAAZ,IAAmB,CAACA,OAF9B;QAGE,OAAO,EAAE,KAAKe;MAHhB,EAJF,CADF;IAYD;;;;EA1B+BC,iBAAA,CAAMC,S;;;;gBAA3BP,Y,eACQ;EACjBV,OAAO,EAAEK,qBAAA,CAAUC,MAAV,CAAiBC,UADT;EAEjBK,QAAQ,EAAEP,qBAAA,CAAUI,IAAV,CAAeF,UAFR;EAGjBM,OAAO,EAAER,qBAAA,CAAUa,MAAV,CAAiBX;AAHT,C;;AA4BrB,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"}
+{"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"}

package/lib/plugins/image/index.js

@@ -128,7 +128,9 @@ function ImagePlugin(opts) {
         var all = Object.assign({
           onDelete: opts.onDelete,
           onFocus: opts.onFocus,
-          onBlur: opts.onBlur
+          onBlur: opts.onBlur,
+          maxImageWidth: opts.maxImageWidth,
+          maxImageHeight: opts.maxImageHeight
         }, props);
         return /*#__PURE__*/_react["default"].createElement(_component["default"], all);
       }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["log","debug","ImagePlugin","opts","toolbar","insertImageRequested","icon","onClick","value","onChange","inline","Inline","create","type","isVoid","data","loaded","src","undefined","change","insertInline","getValue","InsertImageHandler","supports","node","object","customToolbar","onToolbarDone","percent","get","resizePercent","update","toObject","setNodeByKey","key","Tb","showDone","name","deleteNode","e","preventDefault","onDelete","merge","Data","deleteStatus","err","v","removeNodeByKey","stopReset","imgPendingInsertion","document","findDescendant","n","renderNode","props","all","Object","assign","onFocus","onBlur","normalizeNode","textNodeMap","updateNodesArray","index","d","text","push","length","withoutNormalization","forEach","insertTextByKey","serialization","deserialize","el","tagName","toLowerCase","style","width","height","parseInt","replace","out","getAttribute","serialize","objectFit"],"sources":["../../../src/plugins/image/index.jsx"],"sourcesContent":["import { Data, Inline } from 'slate';\n\nimport Image from '@material-ui/icons/Image';\nimport ImageComponent from './component';\nimport ImageToolbar from './image-toolbar';\nimport InsertImageHandler from './insert-image-handler';\nimport React from 'react';\nimport debug from 'debug';\n\nconst log = debug('@pie-lib:editable-html:plugins:image');\n\nexport default function ImagePlugin(opts) {\n  const toolbar = opts.insertImageRequested && {\n    icon: <Image />,\n    onClick: (value, onChange) => {\n      log('[toolbar] onClick');\n      const inline = Inline.create({\n        type: 'image',\n        isVoid: true,\n        data: {\n          loaded: false,\n          src: undefined\n        }\n      });\n\n      const change = value.change().insertInline(inline);\n      onChange(change);\n      opts.insertImageRequested(getValue => new InsertImageHandler(inline, getValue, onChange));\n    },\n    supports: node => node.object === 'inline' && node.type === 'image',\n    customToolbar: (node, value, onToolbarDone) => {\n      const percent = node.data.get('resizePercent');\n\n      const onChange = resizePercent => {\n        const update = {\n          ...node.data.toObject(),\n          resizePercent\n        };\n\n        const change = value.change().setNodeByKey(node.key, { data: update });\n        onToolbarDone(change, false);\n      };\n\n      const Tb = () => <ImageToolbar percent={percent || 100} onChange={onChange} />;\n      return Tb;\n    },\n    showDone: true\n  };\n\n  return {\n    name: 'image',\n    toolbar,\n    deleteNode: (e, node, value, onChange) => {\n      e.preventDefault();\n      if (opts.onDelete) {\n        const update = node.data.merge(Data.create({ deleteStatus: 'pending' }));\n\n        let change = value.change().setNodeByKey(node.key, { data: update });\n\n        onChange(change);\n        opts.onDelete(node.data.get('src'), (err, v) => {\n          if (!err) {\n            change = v.change().removeNodeByKey(node.key);\n          } else {\n            log('[error]: ', err);\n            change = v\n              .change()\n              .setNodeByKey(node.key, node.data.merge(Data.create({ deleteStatus: 'failed' })));\n          }\n          onChange(change);\n        });\n      } else {\n        let change = value.change().removeNodeByKey(node.key);\n        onChange(change);\n      }\n    },\n    stopReset: value => {\n      const imgPendingInsertion = value.document.findDescendant(n => {\n        if (n.type !== 'image') {\n          return;\n        }\n        return n.data.get('loaded') === false;\n      });\n      /** don't reset if there is an image pending insertion */\n      return imgPendingInsertion !== undefined && imgPendingInsertion !== null;\n    },\n    renderNode(props) {\n      if (props.node.type === 'image') {\n        const all = Object.assign(\n          {\n            onDelete: opts.onDelete,\n            onFocus: opts.onFocus,\n            onBlur: opts.onBlur\n          },\n          props\n        );\n        return <ImageComponent {...all} />;\n      }\n    },\n    normalizeNode: node => {\n      const textNodeMap = {};\n      const updateNodesArray = [];\n      let index = 0;\n\n      if (node.object !== 'document') return;\n\n      node.findDescendant(d => {\n        if (d.object === 'text') {\n          textNodeMap[index] = d;\n        }\n\n        if (d.type === 'image') {\n          if (index > 0 && textNodeMap[index - 1] && textNodeMap[index - 1].text === '') {\n            updateNodesArray.push(textNodeMap[index - 1]);\n          }\n        }\n\n        index++;\n      });\n\n      if (!updateNodesArray.length) return;\n\n      return change => {\n        change.withoutNormalization(() => {\n          updateNodesArray.forEach(n => change.insertTextByKey(n.key, 0, ' '));\n        });\n      };\n    }\n  };\n}\n\nexport const serialization = {\n  deserialize(el /*, next*/) {\n    const name = el.tagName.toLowerCase();\n    if (name !== 'img') return;\n\n    log('deserialize: ', name);\n    const style = el.style || { width: '', height: '' };\n    const width = parseInt(style.width.replace('px', ''), 10) || null;\n    const height = parseInt(style.height.replace('px', ''), 10) || null;\n\n    const out = {\n      object: 'inline',\n      type: 'image',\n      isVoid: true,\n      data: {\n        src: el.getAttribute('src'),\n        width,\n        height\n      }\n    };\n    log('return object: ', out);\n    return out;\n  },\n  serialize(object /*, children*/) {\n    if (object.type !== 'image') return;\n\n    const { data } = object;\n    const src = data.get('src');\n    const width = data.get('width');\n    const height = data.get('height');\n    const style = {};\n    if (width) {\n      style.width = `${width}px`;\n    }\n\n    if (height) {\n      style.height = `${height}px`;\n    }\n\n    style.objectFit = 'contain';\n\n    const props = {\n      src,\n      style\n    };\n\n    return <img {...props} />;\n  }\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["log","debug","ImagePlugin","opts","toolbar","insertImageRequested","icon","onClick","value","onChange","inline","Inline","create","type","isVoid","data","loaded","src","undefined","change","insertInline","getValue","InsertImageHandler","supports","node","object","customToolbar","onToolbarDone","percent","get","resizePercent","update","toObject","setNodeByKey","key","Tb","showDone","name","deleteNode","e","preventDefault","onDelete","merge","Data","deleteStatus","err","v","removeNodeByKey","stopReset","imgPendingInsertion","document","findDescendant","n","renderNode","props","all","Object","assign","onFocus","onBlur","maxImageWidth","maxImageHeight","normalizeNode","textNodeMap","updateNodesArray","index","d","text","push","length","withoutNormalization","forEach","insertTextByKey","serialization","deserialize","el","tagName","toLowerCase","style","width","height","parseInt","replace","out","getAttribute","serialize","objectFit"],"sources":["../../../src/plugins/image/index.jsx"],"sourcesContent":["import { Data, Inline } from 'slate';\n\nimport Image from '@material-ui/icons/Image';\nimport ImageComponent from './component';\nimport ImageToolbar from './image-toolbar';\nimport InsertImageHandler from './insert-image-handler';\nimport React from 'react';\nimport debug from 'debug';\n\nconst log = debug('@pie-lib:editable-html:plugins:image');\n\nexport default function ImagePlugin(opts) {\n  const toolbar = opts.insertImageRequested && {\n    icon: <Image />,\n    onClick: (value, onChange) => {\n      log('[toolbar] onClick');\n      const inline = Inline.create({\n        type: 'image',\n        isVoid: true,\n        data: {\n          loaded: false,\n          src: undefined\n        }\n      });\n\n      const change = value.change().insertInline(inline);\n      onChange(change);\n      opts.insertImageRequested(getValue => new InsertImageHandler(inline, getValue, onChange));\n    },\n    supports: node => node.object === 'inline' && node.type === 'image',\n    customToolbar: (node, value, onToolbarDone) => {\n      const percent = node.data.get('resizePercent');\n\n      const onChange = resizePercent => {\n        const update = {\n          ...node.data.toObject(),\n          resizePercent\n        };\n\n        const change = value.change().setNodeByKey(node.key, { data: update });\n        onToolbarDone(change, false);\n      };\n\n      const Tb = () => <ImageToolbar percent={percent || 100} onChange={onChange} />;\n      return Tb;\n    },\n    showDone: true\n  };\n\n  return {\n    name: 'image',\n    toolbar,\n    deleteNode: (e, node, value, onChange) => {\n      e.preventDefault();\n      if (opts.onDelete) {\n        const update = node.data.merge(Data.create({ deleteStatus: 'pending' }));\n\n        let change = value.change().setNodeByKey(node.key, { data: update });\n\n        onChange(change);\n        opts.onDelete(node.data.get('src'), (err, v) => {\n          if (!err) {\n            change = v.change().removeNodeByKey(node.key);\n          } else {\n            log('[error]: ', err);\n            change = v\n              .change()\n              .setNodeByKey(node.key, node.data.merge(Data.create({ deleteStatus: 'failed' })));\n          }\n          onChange(change);\n        });\n      } else {\n        let change = value.change().removeNodeByKey(node.key);\n        onChange(change);\n      }\n    },\n    stopReset: value => {\n      const imgPendingInsertion = value.document.findDescendant(n => {\n        if (n.type !== 'image') {\n          return;\n        }\n        return n.data.get('loaded') === false;\n      });\n      /** don't reset if there is an image pending insertion */\n      return imgPendingInsertion !== undefined && imgPendingInsertion !== null;\n    },\n    renderNode(props) {\n      if (props.node.type === 'image') {\n        const all = Object.assign(\n          {\n            onDelete: opts.onDelete,\n            onFocus: opts.onFocus,\n            onBlur: opts.onBlur,\n            maxImageWidth: opts.maxImageWidth,\n            maxImageHeight: opts.maxImageHeight,\n          },\n          props\n        );\n        return <ImageComponent {...all} />;\n      }\n    },\n    normalizeNode: node => {\n      const textNodeMap = {};\n      const updateNodesArray = [];\n      let index = 0;\n\n      if (node.object !== 'document') return;\n\n      node.findDescendant(d => {\n        if (d.object === 'text') {\n          textNodeMap[index] = d;\n        }\n\n        if (d.type === 'image') {\n          if (index > 0 && textNodeMap[index - 1] && textNodeMap[index - 1].text === '') {\n            updateNodesArray.push(textNodeMap[index - 1]);\n          }\n        }\n\n        index++;\n      });\n\n      if (!updateNodesArray.length) return;\n\n      return change => {\n        change.withoutNormalization(() => {\n          updateNodesArray.forEach(n => change.insertTextByKey(n.key, 0, ' '));\n        });\n      };\n    }\n  };\n}\n\nexport const serialization = {\n  deserialize(el /*, next*/) {\n    const name = el.tagName.toLowerCase();\n    if (name !== 'img') return;\n\n    log('deserialize: ', name);\n    const style = el.style || { width: '', height: '' };\n    const width = parseInt(style.width.replace('px', ''), 10) || null;\n    const height = parseInt(style.height.replace('px', ''), 10) || null;\n\n    const out = {\n      object: 'inline',\n      type: 'image',\n      isVoid: true,\n      data: {\n        src: el.getAttribute('src'),\n        width,\n        height\n      }\n    };\n    log('return object: ', out);\n    return out;\n  },\n  serialize(object /*, children*/) {\n    if (object.type !== 'image') return;\n\n    const { data } = object;\n    const src = data.get('src');\n    const width = data.get('width');\n    const height = data.get('height');\n    const style = {};\n    if (width) {\n      style.width = `${width}px`;\n    }\n\n    if (height) {\n      style.height = `${height}px`;\n    }\n\n    style.objectFit = 'contain';\n\n    const props = {\n      src,\n      style\n    };\n\n    return <img {...props} />;\n  }\n};\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html",
-  "version": "7.17.4-next.333+9e77aef6",
+  "version": "7.17.4-next.364+b3e82467",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
@@ -11,9 +11,9 @@
     "@material-ui/icons": "^3.0.2",
     "@material-ui/styles": "^3.0.0-alpha.10",
     "@pie-lib/drag": "^1.1.52",
-    "@pie-lib/math-rendering": "^2.3.10-next.333+9e77aef6",
-    "@pie-lib/math-toolbar": "^1.8.1-next.333+9e77aef6",
-    "@pie-lib/render-ui": "^4.12.1-next.333+9e77aef6",
+    "@pie-lib/math-rendering": "^2.4.2",
+    "@pie-lib/math-toolbar": "^1.9.3",
+    "@pie-lib/render-ui": "^4.12.8",
     "change-case": "^3.0.2",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
@@ -46,6 +46,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9e77aef6241de40777005d2ab73f57e4e45fb744",
+  "gitHead": "b3e8246703d2bfb05da422b7deab145c64d0fb3f",
   "scripts": {}
 }

package/src/editor.jsx

@@ -97,7 +97,9 @@ export class Editor extends React.Component {
         new Error(`Invalid values: ${values}, values must be one of [${ALL_PLUGINS.join(',')}]`)
       );
     }),
-    className: PropTypes.string
+    className: PropTypes.string,
+    maxImageWidth: PropTypes.number,
+    maxImageHeight: PropTypes.number,
   };
 
   static defaultProps = {
@@ -156,7 +158,9 @@ export class Editor extends React.Component {
             props.imageSupport.add(handler);
           }),
         onFocus: this.onPluginFocus,
-        onBlur: this.onPluginBlur
+        onBlur: this.onPluginBlur,
+        maxImageWidth: this.props.maxImageWidth,
+        maxImageHeight: this.props.maxImageHeight,
       },
       toolbar: {
         /**

package/src/plugins/image/component.jsx

@@ -20,7 +20,9 @@ export class Component extends React.Component {
     classes: PropTypes.object.isRequired,
     attributes: PropTypes.object,
     onFocus: PropTypes.func,
-    onBlur: PropTypes.func
+    onBlur: PropTypes.func,
+    maxImageWidth: PropTypes.number,
+    maxImageHeight: PropTypes.number,
   };
 
   getWidth = percent => {
@@ -41,30 +43,33 @@ export class Component extends React.Component {
   applySizeData = () => {
     const { node, editor } = this.props;
 
-    const resizePercent = node.data.get('resizePercent');
-    log('[applySizeData]: resizePercent: ', resizePercent);
-
     let update = node.data;
 
-    if (resizePercent) {
-      update = update.set('width', this.getWidth(resizePercent));
-      update = update.set('height', this.getHeight(resizePercent));
-    } else {
-      const w = update.get('width');
-      if (w) {
-        update = update.set('resizePercent', this.getPercentFromWidth(w));
-      }
+    const w = update.get('width');
+    if (w) {
+      update = update.set('resizePercent', this.getPercentFromWidth(w));
     }
 
-    log('[applySizeData] update: ', update);
+    log("[applySizeData] update: ", update);
 
     if (!update.equals(node.data)) {
       editor.change(c => c.setNodeByKey(node.key, { data: update }));
     }
   };
 
+  initialiseResize = () => {
+    window.addEventListener('mousemove', this.startResizing, false);
+    window.addEventListener('mouseup', this.stopResizing, false);
+  };
+
   componentDidMount() {
     this.applySizeData();
+
+    const resizeHandle = this.resize;
+
+    if (resizeHandle) {
+      resizeHandle.addEventListener('mousedown', this.initialiseResize, false);
+    }
   }
 
   componentDidUpdate() {
@@ -79,6 +84,117 @@ export class Component extends React.Component {
     };
   }
 
+  loadImage = () => {
+    let { maxImageWidth, maxImageHeight } = this.props || {};
+    maxImageWidth = maxImageWidth || 700;
+    maxImageHeight = maxImageHeight || 900;
+
+    const box = this.img;
+
+    //on first load
+    if (!box.style.width || box.style.width === 'auto') {
+      const dimensions = { width: box && box.naturalWidth || 100, height: box && box.naturalHeight || 100 };
+
+      const { width, height } = this.updateImageDimensions(
+        dimensions,
+        {
+          width: dimensions.width < maxImageWidth ? dimensions.width : maxImageWidth,
+          height: dimensions.height < maxImageHeight ? dimensions.height : maxImageHeight
+        },
+        true
+      );
+
+      box.style.width = `${width}px`;
+      box.style.height = `${height}px`;
+
+      this.setState({
+        dimensions: { height: height, width: width },
+      });
+
+      const { node, editor } = this.props;
+
+      let update = node.data;
+
+      update = update.set('width', width);
+      update = update.set('height', height);
+
+      if (!update.equals(node.data)) {
+        editor.change(c => c.setNodeByKey(node.key, { data: update }));
+      }
+    }
+  };
+
+  startResizing = (e) => {
+    const bounds = e.target.getBoundingClientRect();
+    const box = this.img;
+    const dimensions = { width: box && box.naturalWidth || 100, height: box && box.naturalHeight || 100};
+
+    const { width, height } = this.updateImageDimensions(
+      dimensions,
+      {
+        width: e.clientX - bounds.left,
+        height: e.clientY - bounds.top
+      },
+      true
+    );
+
+    const hasMinimumWidth = width > 50 && height > 50;
+    const hasDimensionsConstraints = width <= 700 && height <= 900;
+
+    if (hasMinimumWidth && hasDimensionsConstraints && box) {
+      box.style.width = `${width}px`;
+      box.style.height = `${height}px`;
+
+      this.setState({
+        dimensions: { height: height, width: width }
+      });
+
+      const { node, editor } = this.props;
+
+      let update = node.data;
+
+      update = update.set('width', width);
+      update = update.set('height', height);
+
+      if (!update.equals(node.data)) {
+        editor.change(c => c.setNodeByKey(node.key, { data: update }));
+      }
+    }
+  };
+
+  stopResizing = () => {
+    window.removeEventListener('mousemove', this.startResizing, false);
+    window.removeEventListener('mouseup', this.stopResizing, false);
+  };
+
+  updateImageDimensions = (initialDim, nextDim, keepAspectRatio, resizeType) => {
+    // if we want to keep image aspect ratio
+    if (keepAspectRatio) {
+      const imageAspectRatio = initialDim.width / initialDim.height;
+
+      if (resizeType === 'height') {
+        // if we want to change image height => we update the width accordingly
+        return {
+          width: nextDim.height * imageAspectRatio,
+          height: nextDim.height
+        }
+      }
+
+      // if we want to change image width => we update the height accordingly
+      return {
+        width: nextDim.width,
+        height: nextDim.width / imageAspectRatio
+      }
+    }
+
+    // if we don't want to keep aspect ratio, we just update both values
+    return {
+      width: nextDim.width,
+      height: nextDim.height
+    }
+  };
+
+
   render() {
     const { node, editor, classes, attributes, onFocus } = this.props;
     const active = editor.value.isFocused && editor.value.selection.hasEdgeIn(node);
@@ -95,7 +211,6 @@ export class Component extends React.Component {
 
     const className = classNames(
       classes.root,
-      active && classes.active,
       !loaded && classes.loading,
       deleteStatus === 'pending' && classes.pendingDelete
     );
@@ -110,7 +225,21 @@ export class Component extends React.Component {
           value={percent > 0 ? percent : 0}
           className={progressClasses}
         />
-        <img src={src} {...attributes} ref={r => (this.img = r)} style={size} />
+        <div className={classes.imageContainer}>
+          <img
+            {...attributes}
+            className={classNames(classes.image, active && classes.active)}
+            ref={ref => {
+              this.img = ref;
+            }}
+            src={src}
+            style={size}
+            onLoad={this.loadImage}
+          />
+          <div ref={ref => {
+            this.resize = ref;
+          }} className={classNames(classes.resize, 'resize')}/>
+        </div>
       </div>,
       <span key={'sp2'}>&nbsp;</span>
     ];
@@ -154,13 +283,36 @@ const styles = theme => ({
     display: 'inline-block',
     transition: 'opacity 200ms linear'
   },
-  active: {
-    border: `solid 1px ${theme.palette.primary.main}`
-  },
   delete: {
     position: 'absolute',
     right: 0
-  }
+  },
+  imageContainer: {
+    position: 'relative',
+    width: 'fit-content',
+    display: 'flex',
+    alignItems: 'center',
+
+    '&&:hover > .resize': {
+      display: 'block'
+    }
+  },
+  active: {
+    border: `solid 1px ${theme.palette.primary.main}`
+  },
+  resize: {
+    backgroundColor: theme.palette.primary.main,
+    cursor: 'col-resize',
+    height: '35px',
+    width: '5px',
+    borderRadius: 8,
+    marginLeft: '5px',
+    marginRight: '10px',
+    display: 'none'
+  },
+  drawableHeight: {
+    minHeight: 350,
+  },
 });
 
 export default withStyles(styles)(Component);

package/src/plugins/image/image-toolbar.jsx

@@ -1,5 +1,3 @@
-import { MarkButton } from '../toolbar/toolbar-buttons';
-
 import PropTypes from 'prop-types';
 import React from 'react';
 import debug from 'debug';
@@ -7,45 +5,17 @@ import { withStyles } from '@material-ui/core/styles';
 
 const log = debug('@pie-lib:editable-html:plugins:image:image-toolbar');
 
-const PercentButton = ({ percent, active, onClick }) => {
-  const label = `${percent}%`;
-  return (
-    <MarkButton active={active} onToggle={() => onClick(percent)} label={label}>
-      {label}
-    </MarkButton>
-  );
-};
-
-PercentButton.propTypes = {
-  percent: PropTypes.number.isRequired,
-  active: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired
-};
-
 export class ImageToolbar extends React.Component {
   static propTypes = {
-    percent: PropTypes.number.isRequired,
     onChange: PropTypes.func.isRequired,
     classes: PropTypes.object.isRequired
   };
 
-  onPercentClick = percent => {
-    log('[onPercentClick]: percent:', percent);
-    this.props.onChange(percent);
-  };
-
   render() {
-    const { classes, percent } = this.props;
+    // Don't remove toolbar since we will have other new buttons
+    const { classes } = this.props;
     return (
       <div className={classes.holder}>
-        <PercentButton percent={25} active={percent === 25} onClick={this.onPercentClick} />
-        <PercentButton percent={50} active={percent === 50} onClick={this.onPercentClick} />
-        <PercentButton active={percent === 75} percent={75} onClick={this.onPercentClick} />
-        <PercentButton
-          percent={100}
-          active={percent === 100 || !percent}
-          onClick={this.onPercentClick}
-        />
       </div>
     );
   }

package/src/plugins/image/index.jsx

@@ -90,7 +90,9 @@ export default function ImagePlugin(opts) {
           {
             onDelete: opts.onDelete,
             onFocus: opts.onFocus,
-            onBlur: opts.onBlur
+            onBlur: opts.onBlur,
+            maxImageWidth: opts.maxImageWidth,
+            maxImageHeight: opts.maxImageHeight,
           },
           props
         );