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

package/src/plugins/image/component.jsx

@@ -10,39 +10,39 @@ 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: PropTypes.shape({
       type: PropTypes.string,
       children: PropTypes.array,
-      data: PropTypes.object
+      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);
   };
@@ -67,9 +67,9 @@ export class Component extends React.Component {
         type: 'set_node',
         path: nodePath,
         properties: {
-          data: node.data
+          data: node.data,
         },
-        newProperties: { data: update }
+        newProperties: { data: update },
       });
     }
   };
@@ -97,7 +97,7 @@ export class Component extends React.Component {
     return {
       width: size(data.width),
       height: size(data.height),
-      objectFit: 'contain'
+      objectFit: 'contain',
     };
   }
 
@@ -112,23 +112,23 @@ 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;
@@ -145,29 +145,29 @@ export class Component extends React.Component {
           type: 'set_node',
           path: nodePath,
           properties: {
-            data: node.data
+            data: node.data,
           },
-          newProperties: { data: update }
+          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;
@@ -178,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;
@@ -189,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 }));
       }
     }
   };
@@ -208,21 +208,21 @@ 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,
     };
   };
 
@@ -237,12 +237,15 @@ export class Component extends React.Component {
       case 'left':
         justifyContent = 'flex-start';
         break;
+
       case 'center':
         justifyContent = 'center';
         break;
+
       case 'right':
         justifyContent = 'flex-end';
         break;
+
       default:
         justifyContent = 'flex-start';
         break;
@@ -255,25 +258,21 @@ export class Component extends React.Component {
 
     const className = classNames(classes.root, {
       [classes.loading]: !isLoaded,
-      [classes.pendingDelete]: deleteStatus === 'pending'
+      [classes.pendingDelete]: deleteStatus === 'pending',
     });
 
     const progressClasses = classNames(classes.progress, {
-      [classes.hideProgress]: isLoaded
+      [classes.hideProgress]: isLoaded,
     });
 
     return (
       <div onFocus={onFocus} className={className} style={{ justifyContent }} {...attributes}>
         {children}
-        <LinearProgress
-          mode="determinate"
-          value={percent > 0 ? percent : 0}
-          className={progressClasses}
-        />
+        <LinearProgress mode="determinate" value={percent > 0 ? percent : 0} className={progressClasses} />
         <div className={classes.imageContainer}>
           <img
             className={classNames(classes.image, { [classes.active]: active })}
-            ref={ref => {
+            ref={(ref) => {
               this.img = ref;
             }}
             src={src}
@@ -282,7 +281,7 @@ export class Component extends React.Component {
             alt={alt}
           />
           <div
-            ref={ref => {
+            ref={(ref) => {
               this.resize = ref;
             }}
             className={classNames(classes.resize, 'resize')}
@@ -293,47 +292,47 @@ export class Component extends React.Component {
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   portal: {
     position: 'absolute',
     opacity: 0,
-    transition: 'opacity 200ms linear'
+    transition: 'opacity 200ms linear',
   },
   floatingButtonRow: {
-    backgroundColor: 'white',
+    backgroundColor: theme.palette.background.paper,
     borderRadius: '1px',
     display: 'flex',
     padding: '10px',
-    border: 'solid 1px #eeeeee',
+    border: `solid 1px ${theme.palette.grey[200]}`,
     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 white',
-    display: 'inline-flex',
+    border: `solid 1px ${theme.palette.common.white}`,
+    display: 'flex',
     transition: 'opacity 200ms linear',
-    width: '100%'
+    width: '100%',
   },
   delete: {
     position: 'absolute',
-    right: 0
+    right: 0,
   },
   imageContainer: {
     position: 'relative',
@@ -342,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,
@@ -356,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,16 +30,17 @@ export class ImageToolbar extends React.Component {
     classes: PropTypes.object.isRequired,
     alignment: PropTypes.string,
     alt: PropTypes.string,
-    imageLoaded: PropTypes.bool
+    imageLoaded: PropTypes.bool,
+    disableImageAlignmentButtons: PropTypes.bool,
   };
 
-  onAltTextDone = newAlt => {
+  onAltTextDone = (newAlt) => {
     log('[onAltTextDone]: alt:', newAlt);
 
-    this.props.onChange({ alt: newAlt });
+    this.props.onChange({ alt: newAlt }, true);
   };
 
-  onAlignmentClick = alignment => {
+  onAlignmentClick = (alignment) => {
     log('[onAlignmentClick]: alignment:', alignment);
     this.props.onChange({ alignment });
   };
@@ -56,31 +57,22 @@ export class ImageToolbar extends React.Component {
   };
 
   render() {
-    const { classes, alignment, imageLoaded } = this.props;
-
+    const { classes, alignment, imageLoaded, disableImageAlignmentButtons } = this.props;
     return (
       <div className={classes.holder}>
-        <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}
-        />
+        {!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} />
+          </>
+        )}
         <span
           className={classNames({
             [classes.disabled]: !imageLoaded,
-            [classes.altButton]: true
+            [classes.altButton]: !disableImageAlignmentButtons,
           })}
-          onMouseDown={event => imageLoaded && this.renderDialog(event)}
+          onMouseDown={(event) => imageLoaded && this.renderDialog(event)}
         >
           Alt text
         </span>
@@ -89,14 +81,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',

package/src/plugins/image/index.jsx

@@ -15,16 +15,16 @@ const log = debug('@pie-lib:editable-html:plugins:image');
 export default function ImagePlugin(opts) {
   const toolbar = opts.insertImageRequested && {
     icon: <Image />,
-    onClick: editor => {
+    onClick: (editor) => {
       log('[toolbar] onClick');
       const inline = {
         type: 'image',
         data: {
           newImage: true,
           loaded: false,
-          src: undefined
+          src: undefined,
         },
-        children: [{ text: '' }]
+        children: [{ text: '' }],
       };
 
       editor.insertNode(inline);
@@ -38,65 +38,71 @@ export default function ImagePlugin(opts) {
       const alignment = node.data.alignment;
       const alt = node.data.alt;
       const imageLoaded = node.data.loaded !== false;
-      const onChange = newValues => {
+      const onChange = (newValues) => {
         const update = {
           ...node.data,
-          ...newValues
+          ...newValues,
         };
 
         editor.apply({
           type: 'set_node',
           path: nodePath,
           properties: {
-            data: node.data
+            data: node.data,
           },
-          newProperties: { data: update }
+          newProperties: { data: update },
         });
 
         onToolbarDone(null, false);
       };
 
       const Tb = () => (
-        <ImageToolbar alt={alt} imageLoaded={imageLoaded} alignment={alignment || 'left'} onChange={onChange} />
+        <ImageToolbar
+          disableImageAlignmentButtons={opts.disableImageAlignmentButtons}
+          alt={alt}
+          imageLoaded={imageLoaded}
+          alignment={alignment || 'left'}
+          onChange={onChange}
+        />
       );
       return Tb;
     },
-    showDone: true
+    showDone: true,
   };
 
   return {
     name: 'image',
     toolbar,
-    rules: editor => {
+    rules: (editor) => {
       const { isVoid, isInline } = editor;
 
-      editor.isVoid = element => {
+      editor.isVoid = (element) => {
         return element.type === 'image' ? true : isVoid(element);
       };
 
-      editor.isInline = element => {
+      editor.isInline = (element) => {
         return element.type === 'image' ? true : isInline(element);
       };
 
       return editor;
     },
-    supports: node => node.type === 'image',
+    supports: (node) => node.type === 'image',
     deleteNode: (e, node, nodePath, editor, onChange) => {
       e.preventDefault();
 
       if (opts.onDelete) {
         const update = {
           ...node.data,
-          deleteStatus: 'pending'
+          deleteStatus: 'pending',
         };
 
         editor.apply({
           type: 'set_node',
           path: nodePath,
           properties: {
-            data: node.data
+            data: node.data,
           },
-          newProperties: { data: update }
+          newProperties: { data: update },
         });
 
         editor.selection = null;
@@ -105,7 +111,7 @@ export default function ImagePlugin(opts) {
           if (!err) {
             editor.apply({
               type: 'remove_node',
-              path: nodePath
+              path: nodePath,
             });
           } else {
             log('[error]: ', err);
@@ -113,9 +119,9 @@ export default function ImagePlugin(opts) {
               type: 'set_node',
               path: nodePath,
               properties: {
-                data: node.data
+                data: node.data,
               },
-              newProperties: { data: { ...node.data, deleteStatus: 'failed' } }
+              newProperties: { data: { ...node.data, deleteStatus: 'failed' } },
             });
           }
 
@@ -128,15 +134,15 @@ export default function ImagePlugin(opts) {
         editor.selection = null;
         editor.apply({
           type: 'remove_node',
-          path: nodePath
+          path: nodePath,
         });
         onChange(editor, () => {
           setTimeout(() => ReactEditor.focus(editor), 50);
         });
       }
     },
-    stopReset: value => {
-      const imgPendingInsertion = value.document.findDescendant(n => {
+    stopReset: (value) => {
+      const imgPendingInsertion = value.document.findDescendant((n) => {
         if (n.type !== 'image') {
           return;
         }
@@ -153,25 +159,21 @@ export default function ImagePlugin(opts) {
             onFocus: opts.onFocus,
             onBlur: opts.onBlur,
             maxImageWidth: opts.maxImageWidth,
-            maxImageHeight: opts.maxImageHeight
+            maxImageHeight: opts.maxImageHeight,
           },
-          props
-        );
-        return (
-          <ImageComponent {...all}>
-            {props.children}
-          </ImageComponent>
+          props,
         );
+        return <ImageComponent {...all}>{props.children}</ImageComponent>;
       }
     },
-    normalizeNode: node => {
+    normalizeNode: (node) => {
       const textNodeMap = {};
       const updateNodesArray = [];
       let index = 0;
 
       if (node.object !== 'document') return;
 
-      node.findDescendant(d => {
+      node.findDescendant((d) => {
         if (d.object === 'text') {
           textNodeMap[index] = d;
         }
@@ -187,12 +189,12 @@ export default function ImagePlugin(opts) {
 
       if (!updateNodesArray.length) return;
 
-      return change => {
+      return (change) => {
         change.withoutNormalization(() => {
-          updateNodesArray.forEach(n => change.insertTextByKey(n.key, 0, ' '));
+          updateNodesArray.forEach((n) => change.insertTextByKey(n.key, 0, ' '));
         });
       };
-    }
+    },
   };
 }
 
@@ -215,8 +217,8 @@ export const serialization = {
         margin: el.style.margin,
         justifyContent: el.style.justifyContent,
         alignment: el.getAttribute('alignment'),
-        alt: el.getAttribute('alt')
-      }
+        alt: el.getAttribute('alt'),
+      },
     });
     log('return object: ', out);
     return out;
@@ -225,15 +227,7 @@ export const serialization = {
     if (object.type !== 'image') return;
 
     const { data } = object;
-    const {
-      alignment,
-      alt,
-      src,
-      height,
-      margin,
-      justifyContent,
-      width
-    } = data;
+    const { alignment, alt, src, height, margin, justifyContent, width } = data;
     const style = {};
 
     if (width) {
@@ -273,9 +267,9 @@ export const serialization = {
       src,
       style,
       alignment,
-      alt
+      alt,
     };
 
     return <img {...props} />;
-  }
+  },
 };