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

package/src/plugins/image/component.jsx

@@ -22,7 +22,7 @@ export class Component extends React.Component {
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     maxImageWidth: PropTypes.number,
-    maxImageHeight: PropTypes.number,
+    maxImageHeight: PropTypes.number
   };
 
   getWidth = percent => {
@@ -50,7 +50,7 @@ export class Component extends React.Component {
       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 }));
@@ -93,7 +93,10 @@ export class Component extends React.Component {
 
     //on first load
     if (!box.style.width || box.style.width === 'auto') {
-      const dimensions = { width: box && box.naturalWidth || 100, height: box && box.naturalHeight || 100 };
+      const dimensions = {
+        width: (box && box.naturalWidth) || 100,
+        height: (box && box.naturalHeight) || 100
+      };
 
       const { width, height } = this.updateImageDimensions(
         dimensions,
@@ -108,7 +111,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;
@@ -124,10 +127,13 @@ export class Component extends React.Component {
     }
   };
 
-  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};
+    const dimensions = {
+      width: (box && box.naturalWidth) || 100,
+      height: (box && box.naturalHeight) || 100
+    };
 
     const { width, height } = this.updateImageDimensions(
       dimensions,
@@ -177,32 +183,52 @@ export class Component extends React.Component {
         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);
     const src = node.data.get('src');
-    const percent = node.data.get('percent');
     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');
+    let margin;
+    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);
 
     const size = this.getSize(node.data);
@@ -219,7 +245,7 @@ export class Component extends React.Component {
 
     return [
       <span key={'sp1'}>&nbsp;</span>,
-      <div key={'comp'} onFocus={onFocus} className={className}>
+      <div key={'comp'} onFocus={onFocus} className={className} style={{ justifyContent }}>
         <LinearProgress
           mode="determinate"
           value={percent > 0 ? percent : 0}
@@ -236,9 +262,12 @@ export class Component extends React.Component {
             style={size}
             onLoad={this.loadImage}
           />
-          <div ref={ref => {
-            this.resize = ref;
-          }} className={classNames(classes.resize, 'resize')}/>
+          <div
+            ref={ref => {
+              this.resize = ref;
+            }}
+            className={classNames(classes.resize, 'resize')}
+          />
         </div>
       </div>,
       <span key={'sp2'}>&nbsp;</span>
@@ -264,7 +293,7 @@ const styles = theme => ({
   progress: {
     position: 'absolute',
     left: '0',
-    width: '100%',
+    width: 'fit-content',
     top: '0%',
     transition: 'opacity 200ms linear'
   },
@@ -280,7 +309,7 @@ const styles = theme => ({
   root: {
     position: 'relative',
     border: 'solid 1px white',
-    display: 'inline-block',
+    display: 'flex',
     transition: 'opacity 200ms linear'
   },
   delete: {
@@ -311,8 +340,8 @@ const styles = theme => ({
     display: 'none'
   },
   drawableHeight: {
-    minHeight: 350,
-  },
+    minHeight: 350
+  }
 });
 
 export default withStyles(styles)(Component);

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

@@ -2,20 +2,55 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import debug from 'debug';
 import { withStyles } from '@material-ui/core/styles';
+import { MarkButton } from '../toolbar/toolbar-buttons';
 
 const log = debug('@pie-lib:editable-html:plugins:image:image-toolbar');
 
+const AlignmentButton = ({ alignment, active, onClick }) => {
+  return (
+    <MarkButton active={active} onToggle={() => onClick(alignment)} label={alignment}>
+      {alignment}
+    </MarkButton>
+  );
+};
+
+AlignmentButton.propTypes = {
+  alignment: PropTypes.string.isRequired,
+  active: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired
+};
+
 export class ImageToolbar extends React.Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
     classes: PropTypes.object.isRequired
   };
 
+  onAlignmentClick = alignment => {
+    log('[onAlignmentClick]: alignment:', alignment);
+    this.props.onChange(alignment);
+  };
+
   render() {
-    // Don't remove toolbar since we will have other new buttons
-    const { classes } = this.props;
+    const { classes, alignment } = 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}
+        />
       </div>
     );
   }

package/src/plugins/image/index.jsx

@@ -29,19 +29,18 @@ export default function ImagePlugin(opts) {
     },
     supports: node => node.object === 'inline' && node.type === 'image',
     customToolbar: (node, value, onToolbarDone) => {
-      const percent = node.data.get('resizePercent');
-
-      const onChange = resizePercent => {
+      const alignment = node.data.get('alignment');
+      const onChange = alignment => {
         const update = {
           ...node.data.toObject(),
-          resizePercent
+          alignment
         };
 
         const change = value.change().setNodeByKey(node.key, { data: update });
         onToolbarDone(change, false);
       };
 
-      const Tb = () => <ImageToolbar percent={percent || 100} onChange={onChange} />;
+      const Tb = () => <ImageToolbar alignment={alignment || 'left'} onChange={onChange} />;
       return Tb;
     },
     showDone: true
@@ -92,7 +91,7 @@ export default function ImagePlugin(opts) {
             onFocus: opts.onFocus,
             onBlur: opts.onBlur,
             maxImageWidth: opts.maxImageWidth,
-            maxImageHeight: opts.maxImageHeight,
+            maxImageHeight: opts.maxImageHeight
           },
           props
         );
@@ -137,7 +136,7 @@ export const serialization = {
     if (name !== 'img') return;
 
     log('deserialize: ', name);
-    const style = el.style || { width: '', height: '' };
+    const style = el.style || { width: '', height: '', margin: '', justifyContent: '' };
     const width = parseInt(style.width.replace('px', ''), 10) || null;
     const height = parseInt(style.height.replace('px', ''), 10) || null;
 
@@ -148,7 +147,10 @@ export const serialization = {
       data: {
         src: el.getAttribute('src'),
         width,
-        height
+        height,
+        margin: el.style.margin,
+        justifyContent: el.style.justifyContent,
+        alignment: el.getAttribute('alignment')
       }
     };
     log('return object: ', out);
@@ -161,6 +163,9 @@ export const serialization = {
     const src = data.get('src');
     const width = data.get('width');
     const height = data.get('height');
+    const alignment = data.get('alignment');
+    const margin = data.get('margin');
+    const justifyContent = data.get('margin');
     const style = {};
     if (width) {
       style.width = `${width}px`;
@@ -170,11 +175,35 @@ export const serialization = {
       style.height = `${height}px`;
     }
 
+    style.margin = margin;
+    style.justifyContent = justifyContent;
+
+    if (alignment) {
+      switch (alignment) {
+        case 'left':
+          style.justifyContent = 'flex-start';
+          style.margin = '0';
+          break;
+        case 'center':
+          style.justifyContent = 'center';
+          style.margin = '0 auto';
+          break;
+        case 'right':
+          style.justifyContent = 'flex-end';
+          style.margin = 'auto 0 0 auto';
+          break;
+        default:
+          style.justifyContent = 'flex-start';
+          break;
+      }
+    }
+
     style.objectFit = 'contain';
 
     const props = {
       src,
-      style
+      style,
+      alignment
     };
 
     return <img {...props} />;