@pie-lib/editable-html 9.5.13 → 10.0.0-beta.1

package/src/plugins/image/component.jsx

@@ -1,41 +1,48 @@
-import LinearProgress from '@material-ui/core/LinearProgress';
-import PropTypes from 'prop-types';
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import debug from 'debug';
+import isEqual from 'lodash/isEqual';
+import cloneDeep from 'lodash/cloneDeep';
+import LinearProgress from '@material-ui/core/LinearProgress';
 import { withStyles } from '@material-ui/core/styles';
-import SlatePropTypes from 'slate-prop-types';
+import { Editor } from 'slate';
 
 const log = debug('@pie-lib:editable-html:plugins:image:component');
 
-const size = (s) => (s ? `${s}px` : 'auto');
+const size = s => (s ? `${s}px` : 'auto');
 
 export class Component extends React.Component {
   static propTypes = {
-    node: SlatePropTypes.node.isRequired,
+    node: PropTypes.shape({
+      type: PropTypes.string,
+      children: PropTypes.array,
+      data: PropTypes.object
+    }).isRequired,
+    focused: PropTypes.bool,
     editor: PropTypes.shape({
       change: PropTypes.func.isRequired,
-      value: PropTypes.object,
+      value: PropTypes.object
     }).isRequired,
     classes: PropTypes.object.isRequired,
     attributes: PropTypes.object,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     maxImageWidth: PropTypes.number,
-    maxImageHeight: PropTypes.number,
+    maxImageHeight: PropTypes.number
   };
 
-  getWidth = (percent) => {
+  getWidth = percent => {
     const multiplier = percent / 100;
     return this.img.naturalWidth * multiplier;
   };
 
-  getHeight = (percent) => {
+  getHeight = percent => {
     const multiplier = percent / 100;
     return this.img.naturalHeight * multiplier;
   };
 
-  getPercentFromWidth = (width) => {
+  getPercentFromWidth = width => {
     var floored = (width / this.img.naturalWidth) * 4;
     return parseInt(floored.toFixed(0) * 25, 10);
   };
@@ -43,17 +50,27 @@ export class Component extends React.Component {
   applySizeData = () => {
     const { node, editor } = this.props;
 
-    let update = node.data;
+    let update = cloneDeep(node.data);
+
+    const w = update.width;
 
-    const w = update.get('width');
     if (w) {
-      update = update.set('resizePercent', this.getPercentFromWidth(w));
+      update = update.resizePercent = this.getPercentFromWidth(w);
     }
 
     log('[applySizeData] update: ', update);
 
-    if (!update.equals(node.data)) {
-      editor.change((c) => c.setNodeByKey(node.key, { data: update }));
+    if (!isEqual(update, node.data)) {
+      const nodePath = Editor.path(editor, editor.selection);
+
+      editor.apply({
+        type: 'set_node',
+        path: nodePath,
+        properties: {
+          data: node.data
+        },
+        newProperties: { data: update }
+      });
     }
   };
 
@@ -78,9 +95,9 @@ export class Component extends React.Component {
 
   getSize(data) {
     return {
-      width: size(data.get('width')),
-      height: size(data.get('height')),
-      objectFit: 'contain',
+      width: size(data.width),
+      height: size(data.height),
+      objectFit: 'contain'
     };
   }
 
@@ -95,53 +112,62 @@ export class Component extends React.Component {
     if (!box.style.width || box.style.width === 'auto') {
       const dimensions = {
         width: (box && box.naturalWidth) || 100,
-        height: (box && box.naturalHeight) || 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,
+          height: dimensions.height < maxImageHeight ? dimensions.height : maxImageHeight
         },
-        true,
+        true
       );
 
       box.style.width = `${width}px`;
       box.style.height = `${height}px`;
 
       this.setState({
-        dimensions: { height: height, width: width },
+        dimensions: { height: height, width: width }
       });
 
       const { node, editor } = this.props;
 
-      let update = node.data;
+      const update = cloneDeep(node.data);
 
-      update = update.set('width', width);
-      update = update.set('height', height);
+      update.width = width;
+      update.height = height;
 
-      if (!update.equals(node.data)) {
-        editor.change((c) => c.setNodeByKey(node.key, { data: update }));
+      if (!isEqual(update, node.data)) {
+        const nodePath = Editor.path(editor, editor.selection);
+
+        editor.apply({
+          type: 'set_node',
+          path: nodePath,
+          properties: {
+            data: node.data
+          },
+          newProperties: { data: update }
+        });
       }
     }
   };
 
-  startResizing = (e) => {
+  startResizing = e => {
     const bounds = e.target.getBoundingClientRect();
     const box = this.img;
     const dimensions = {
       width: (box && box.naturalWidth) || 100,
-      height: (box && box.naturalHeight) || 100,
+      height: (box && box.naturalHeight) || 100
     };
 
     const { width, height } = this.updateImageDimensions(
       dimensions,
       {
         width: e.clientX - bounds.left,
-        height: e.clientY - bounds.top,
+        height: e.clientY - bounds.top
       },
-      true,
+      true
     );
 
     const hasMinimumWidth = width > 50 && height > 50;
@@ -152,7 +178,7 @@ export class Component extends React.Component {
       box.style.height = `${height}px`;
 
       this.setState({
-        dimensions: { height: height, width: width },
+        dimensions: { height: height, width: width }
       });
 
       const { node, editor } = this.props;
@@ -163,7 +189,7 @@ export class Component extends React.Component {
       update = update.set('height', height);
 
       if (!update.equals(node.data)) {
-        editor.change((c) => c.setNodeByKey(node.key, { data: update }));
+        editor.change(c => c.setNodeByKey(node.key, { data: update }));
       }
     }
   };
@@ -182,55 +208,43 @@ export class Component extends React.Component {
         // if we want to change image height => we update the width accordingly
         return {
           width: nextDim.height * imageAspectRatio,
-          height: nextDim.height,
+          height: nextDim.height
         };
       }
 
       // if we want to change image width => we update the height accordingly
       return {
         width: nextDim.width,
-        height: nextDim.width / imageAspectRatio,
+        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,
+      height: nextDim.height
     };
   };
 
   render() {
-    const { node, editor, classes, attributes, onFocus } = this.props;
-    const active = editor.value.isFocused && editor.value.selection.hasEdgeIn(node);
-    const src = node.data.get('src');
-    const loaded = node.data.get('loaded') !== false;
-    const deleteStatus = node.data.get('deleteStatus');
-    const alignment = node.data.get('alignment');
-    const percent = node.data.get('percent');
-    const alt = node.data.get('alt');
-    let margin;
+    const { node, focused, classes, attributes, children, onFocus } = this.props;
+    const active = focused;
+    const { alignment, alt, deleteStatus, loaded, percent, src } = node.data;
+    const isLoaded = loaded !== false;
     let justifyContent;
 
     switch (alignment) {
       case 'left':
         justifyContent = 'flex-start';
-        margin = '0';
         break;
-
       case 'center':
         justifyContent = 'center';
-        margin = '0 auto';
         break;
-
       case 'right':
         justifyContent = 'flex-end';
-        margin = 'auto 0 0 auto ';
         break;
-
       default:
         justifyContent = 'flex-start';
-        margin = '0';
         break;
     }
     log('[render] node.data:', node.data);
@@ -239,23 +253,27 @@ export class Component extends React.Component {
 
     log('[render] style:', size);
 
-    const className = classNames(
-      classes.root,
-      !loaded && classes.loading,
-      deleteStatus === 'pending' && classes.pendingDelete,
-    );
-
-    const progressClasses = classNames(classes.progress, loaded && classes.hideProgress);
-
-    return [
-      <span key={'sp1'}>&nbsp;</span>,
-      <div key={'comp'} onFocus={onFocus} className={className} style={{ justifyContent }}>
-        <LinearProgress mode="determinate" value={percent > 0 ? percent : 0} className={progressClasses} />
+    const className = classNames(classes.root, {
+      [classes.loading]: !isLoaded,
+      [classes.pendingDelete]: deleteStatus === 'pending'
+    });
+
+    const progressClasses = classNames(classes.progress, {
+      [classes.hideProgress]: isLoaded
+    });
+
+    return (
+      <div onFocus={onFocus} className={className} style={{ justifyContent }} {...attributes}>
+        {children}
+        <LinearProgress
+          mode="determinate"
+          value={percent > 0 ? percent : 0}
+          className={progressClasses}
+        />
         <div className={classes.imageContainer}>
           <img
-            {...attributes}
-            className={classNames(classes.image, active && classes.active)}
-            ref={(ref) => {
+            className={classNames(classes.image, { [classes.active]: active })}
+            ref={ref => {
               this.img = ref;
             }}
             src={src}
@@ -264,58 +282,57 @@ export class Component extends React.Component {
             alt={alt}
           />
           <div
-            ref={(ref) => {
+            ref={ref => {
               this.resize = ref;
             }}
             className={classNames(classes.resize, 'resize')}
           />
         </div>
-      </div>,
-      <span key={'sp2'}>&nbsp;</span>,
-    ];
+      </div>
+    );
   }
 }
 
-const styles = (theme) => ({
+const styles = theme => ({
   portal: {
     position: 'absolute',
     opacity: 0,
-    transition: 'opacity 200ms linear',
+    transition: 'opacity 200ms linear'
   },
   floatingButtonRow: {
-    backgroundColor: theme.palette.background.paper,
+    backgroundColor: 'white',
     borderRadius: '1px',
     display: 'flex',
     padding: '10px',
-    border: `solid 1px ${theme.palette.grey[200]}`,
+    border: 'solid 1px #eeeeee',
     boxShadow:
-      '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)',
+      '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)'
   },
   progress: {
     position: 'absolute',
     left: '0',
     width: 'fit-content',
     top: '0%',
-    transition: 'opacity 200ms linear',
+    transition: 'opacity 200ms linear'
   },
   hideProgress: {
-    opacity: 0,
+    opacity: 0
   },
   loading: {
-    opacity: 0.3,
+    opacity: 0.3
   },
   pendingDelete: {
-    opacity: 0.3,
+    opacity: 0.3
   },
   root: {
     position: 'relative',
-    border: `solid 1px ${theme.palette.common.white}`,
+    border: 'solid 1px white',
     display: 'flex',
-    transition: 'opacity 200ms linear',
+    transition: 'opacity 200ms linear'
   },
   delete: {
     position: 'absolute',
-    right: 0,
+    right: 0
   },
   imageContainer: {
     position: 'relative',
@@ -324,11 +341,11 @@ const styles = (theme) => ({
     alignItems: 'center',
 
     '&&:hover > .resize': {
-      display: 'block',
-    },
+      display: 'block'
+    }
   },
   active: {
-    border: `solid 1px ${theme.palette.primary.main}`,
+    border: `solid 1px ${theme.palette.primary.main}`
   },
   resize: {
     backgroundColor: theme.palette.primary.main,
@@ -338,11 +355,11 @@ const styles = (theme) => ({
     borderRadius: 8,
     marginLeft: '5px',
     marginRight: '10px',
-    display: 'none',
+    display: 'none'
   },
   drawableHeight: {
-    minHeight: 350,
-  },
+    minHeight: 350
+  }
 });
 
 export default withStyles(styles)(Component);

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

@@ -21,7 +21,7 @@ const AlignmentButton = ({ alignment, active, onClick }) => {
 AlignmentButton.propTypes = {
   alignment: PropTypes.string.isRequired,
   active: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired
 };
 
 export class ImageToolbar extends React.Component {
@@ -30,17 +30,16 @@ export class ImageToolbar extends React.Component {
     classes: PropTypes.object.isRequired,
     alignment: PropTypes.string,
     alt: PropTypes.string,
-    imageLoaded: PropTypes.bool,
-    disableImageAlignmentButtons: PropTypes.bool,
+    imageLoaded: PropTypes.bool
   };
 
-  onAltTextDone = (newAlt) => {
+  onAltTextDone = newAlt => {
     log('[onAltTextDone]: alt:', newAlt);
 
-    this.props.onChange({ alt: newAlt }, true);
+    this.props.onChange({ alt: newAlt });
   };
 
-  onAlignmentClick = (alignment) => {
+  onAlignmentClick = alignment => {
     log('[onAlignmentClick]: alignment:', alignment);
     this.props.onChange({ alignment });
   };
@@ -57,22 +56,31 @@ export class ImageToolbar extends React.Component {
   };
 
   render() {
-    const { classes, alignment, imageLoaded, disableImageAlignmentButtons } = this.props;
+    const { classes, alignment, imageLoaded } = this.props;
+
     return (
       <div className={classes.holder}>
-        {!disableImageAlignmentButtons && (
-          <>
-            <AlignmentButton alignment={'left'} active={alignment === 'left'} onClick={this.onAlignmentClick} />
-            <AlignmentButton alignment={'center'} active={alignment === 'center'} onClick={this.onAlignmentClick} />
-            <AlignmentButton alignment={'right'} active={alignment === 'right'} onClick={this.onAlignmentClick} />
-          </>
-        )}
+        <AlignmentButton
+          alignment={'left'}
+          active={alignment === 'left'}
+          onClick={this.onAlignmentClick}
+        />
+        <AlignmentButton
+          alignment={'center'}
+          active={alignment === 'center'}
+          onClick={this.onAlignmentClick}
+        />
+        <AlignmentButton
+          alignment={'right'}
+          active={alignment === 'right'}
+          onClick={this.onAlignmentClick}
+        />
         <span
           className={classNames({
             [classes.disabled]: !imageLoaded,
-            [classes.altButton]: !disableImageAlignmentButtons,
+            [classes.altButton]: true
           })}
-          onMouseDown={(event) => imageLoaded && this.renderDialog(event)}
+          onMouseDown={event => imageLoaded && this.renderDialog(event)}
         >
           Alt text
         </span>
@@ -81,14 +89,14 @@ export class ImageToolbar extends React.Component {
   }
 }
 
-const styles = (theme) => ({
+const styles = theme => ({
   holder: {
     paddingLeft: theme.spacing.unit,
     display: 'flex',
-    alignItems: 'center',
+    alignItems: 'center'
   },
   disabled: {
-    opacity: 0.5,
+    opacity: 0.5
   },
   altButton: {
     borderLeft: '1px solid grey',