@pie-lib/editable-html 7.22.6 → 8.1.1

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
         );

package/src/plugins/toolbar/toolbar.jsx

@@ -1,13 +1,15 @@
-import { DoneButton } from './done-button';
+import React from 'react';
+import { Change } from 'slate';
 import Delete from '@material-ui/icons/Delete';
 import IconButton from '@material-ui/core/IconButton';
 import PropTypes from 'prop-types';
-import React from 'react';
 import classNames from 'classnames';
 import debug from 'debug';
 import SlatePropTypes from 'slate-prop-types';
 import debounce from 'lodash/debounce';
 
+import { DoneButton } from './done-button';
+
 import { findSingleNode, findParentNode } from '../utils';
 import { withStyles } from '@material-ui/core/styles';
 import DefaultToolbar from './default-toolbar';
@@ -167,6 +169,11 @@ export class Toolbar extends React.Component {
     log('[render] plugin: ', plugin);
 
     const handleDone = (change, done) => {
+      // use handler only if this is an actual Slate Change
+      if (!(change instanceof Change)) {
+        return;
+      }
+
       let handler = onDone;
 
       if (plugin && plugin.toolbar && plugin.toolbar.customToolbar) {

package/src/serialization.jsx

@@ -58,6 +58,15 @@ export const parseStyleString = s => {
   return result;
 };
 
+export const getBase64 = file => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = error => reject(error);
+  });
+};
+
 export const reactAttributes = o => toStyleObject(o, { camelize: true, addUnits: false });
 
 const attributesToMap = el => (acc, attribute) => {