@pie-lib/editable-html 7.17.4-next.53 → 7.17.4-next.549

package/src/plugins/image/alt-dialog.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import DialogContent from '@material-ui/core/DialogContent';
+import ArrowBackIos from '@material-ui/icons/ArrowBackIos';
+import TextField from '@material-ui/core/TextField';
+import DialogActions from '@material-ui/core/DialogActions';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import PropTypes from "prop-types";
+
+export class AltDialog extends React.Component {
+  static propTypes = {
+    onDone: PropTypes.func.isRequired,
+    alt: PropTypes.string
+  };
+
+  constructor(props) {
+    super(props);
+
+    const { alt } = props;
+
+    this.state = {
+      value: alt
+    };
+  }
+
+  closeDialog = () => {
+    const allDialogs = document.querySelectorAll('#text-dialog');
+
+    allDialogs.forEach(function(s) {
+      return s.remove();
+    });
+  };
+
+  onDone = () => {
+    const { onDone } = this.props;
+    const { value } = this.state;
+
+    onDone(value);
+    this.closeDialog();
+  };
+
+  render() {
+    const { value } = this.state;
+
+    return (
+      <Dialog open disablePortal onClose={this.closeDialog} id="text-dialog" hideBackdrop>
+        <DialogContent>
+          <div style={{ display: 'flex' }}>
+            <ArrowBackIos style={{ paddingTop: '6px' }} />
+            <TextField
+              multiline
+              placeholder={'Enter an Alt Text description of this image'}
+              helperText={
+                'Users with visual limitations rely on Alt Text, since screen readers cannot otherwise describe the contents of an image.'
+              }
+              value={value}
+              onChange={event => this.setState({ value: event.target.value })}
+            />
+          </div>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={this.onDone}>Done</Button>
+        </DialogActions>
+      </Dialog>
+    );
+  }
+}
+
+export default AltDialog;

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,19 +43,11 @@ 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);
@@ -63,8 +57,19 @@ export class Component extends React.Component {
     }
   };
 
+  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,14 +84,152 @@ 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);
     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');
+    const alt = node.data.get('alt');
+    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);
@@ -95,7 +238,6 @@ export class Component extends React.Component {
 
     const className = classNames(
       classes.root,
-      active && classes.active,
       !loaded && classes.loading,
       deleteStatus === 'pending' && classes.pendingDelete
     );
@@ -104,13 +246,31 @@ 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}
           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}
+            alt={alt}
+          />
+          <div
+            ref={ref => {
+              this.resize = ref;
+            }}
+            className={classNames(classes.resize, 'resize')}
+          />
+        </div>
       </div>,
       <span key={'sp2'}>&nbsp;</span>
     ];
@@ -135,7 +295,7 @@ const styles = theme => ({
   progress: {
     position: 'absolute',
     left: '0',
-    width: '100%',
+    width: 'fit-content',
     top: '0%',
     transition: 'opacity 200ms linear'
   },
@@ -151,15 +311,38 @@ const styles = theme => ({
   root: {
     position: 'relative',
     border: 'solid 1px white',
-    display: 'inline-block',
+    display: 'flex',
     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
   }
 });
 

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

@@ -1,51 +1,89 @@
-import { MarkButton } from '../toolbar/toolbar-buttons';
-
 import PropTypes from 'prop-types';
 import React from 'react';
 import debug from 'debug';
+import ReactDOM from 'react-dom';
 import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+
+import { MarkButton } from '../toolbar/toolbar-buttons';
+import AltDialog from './alt-dialog';
 
 const log = debug('@pie-lib:editable-html:plugins:image:image-toolbar');
 
-const PercentButton = ({ percent, active, onClick }) => {
-  const label = `${percent}%`;
+const AlignmentButton = ({ alignment, active, onClick }) => {
   return (
-    <MarkButton active={active} onToggle={() => onClick(percent)} label={label}>
-      {label}
+    <MarkButton active={active} onToggle={() => onClick(alignment)} label={alignment}>
+      {alignment}
     </MarkButton>
   );
 };
 
-PercentButton.propTypes = {
-  percent: PropTypes.number.isRequired,
+AlignmentButton.propTypes = {
+  alignment: PropTypes.string.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
+    classes: PropTypes.object.isRequired,
+    alignment: PropTypes.string,
+    alt: PropTypes.string,
+    imageLoaded: PropTypes.bool
+  };
+
+  onAltTextDone = newAlt => {
+    log('[onAltTextDone]: alt:', newAlt);
+
+    this.props.onChange({ alt: newAlt });
+  };
+
+  onAlignmentClick = alignment => {
+    log('[onAlignmentClick]: alignment:', alignment);
+    this.props.onChange({ alignment });
   };
 
-  onPercentClick = percent => {
-    log('[onPercentClick]: percent:', percent);
-    this.props.onChange(percent);
+  renderDialog = () => {
+    const { alt } = this.props;
+    const popoverEl = document.createElement('div');
+
+    const el = <AltDialog alt={alt} onDone={this.onAltTextDone} />;
+
+    ReactDOM.render(el, popoverEl);
+
+    document.body.appendChild(popoverEl);
   };
 
   render() {
-    const { classes, percent } = this.props;
+    const { classes, alignment, imageLoaded } = 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}
+        <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
+          })}
+          onMouseDown={event => imageLoaded && this.renderDialog(event)}
+        >
+          Alt text
+        </span>
       </div>
     );
   }
@@ -56,7 +94,15 @@ const styles = theme => ({
     paddingLeft: theme.spacing.unit,
     display: 'flex',
     alignItems: 'center'
-  }
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  altButton: {
+    borderLeft: '1px solid grey',
+    paddingLeft: 8,
+    marginLeft: 4,
+  },
 });
 
 export default withStyles(styles)(ImageToolbar);

package/src/plugins/image/index.jsx

@@ -29,19 +29,22 @@ 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 alt = node.data.get('alt');
+      const imageLoaded = node.data.get('loaded') !== false;
+      const onChange = newValues => {
         const update = {
           ...node.data.toObject(),
-          resizePercent
+          ...newValues
         };
 
         const change = value.change().setNodeByKey(node.key, { data: update });
         onToolbarDone(change, false);
       };
 
-      const Tb = () => <ImageToolbar percent={percent || 100} onChange={onChange} />;
+      const Tb = () => (
+        <ImageToolbar alt={alt} imageLoaded={imageLoaded} alignment={alignment || 'left'} onChange={onChange} />
+      );
       return Tb;
     },
     showDone: true
@@ -90,7 +93,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
         );
@@ -135,7 +140,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;
 
@@ -146,7 +151,11 @@ export const serialization = {
       data: {
         src: el.getAttribute('src'),
         width,
-        height
+        height,
+        margin: el.style.margin,
+        justifyContent: el.style.justifyContent,
+        alignment: el.getAttribute('alignment'),
+        alt: el.getAttribute('alt')
       }
     };
     log('return object: ', out);
@@ -159,6 +168,10 @@ 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 alt = data.get('alt');
     const style = {};
     if (width) {
       style.width = `${width}px`;
@@ -168,11 +181,36 @@ 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,
+      alt
     };
 
     return <img {...props} />;

package/src/plugins/index.jsx

@@ -4,6 +4,7 @@ import BulletedListIcon from '@material-ui/icons/FormatListBulleted';
 import NumberedListIcon from '@material-ui/icons/FormatListNumbered';
 import ImagePlugin from './image';
 import MediaPlugin from './media';
+import CharactersPlugin from './characters';
 import Italic from '@material-ui/icons/FormatItalic';
 import MathPlugin from './math';
 import React from 'react';
@@ -63,6 +64,7 @@ export const ALL_PLUGINS = [
   'numbered-list',
   'image',
   'math',
+  'languageCharacters',
   'table',
   'video',
   'audio',
@@ -103,10 +105,11 @@ export const buildPlugins = (activePlugins, opts) => {
     addIf('video', MediaPlugin('video', opts.media)),
     addIf('audio', MediaPlugin('audio', opts.media)),
     addIf('math', mathPlugin),
+    ...opts.languageCharacters.map(config => addIf('languageCharacters', CharactersPlugin(config))),
     addIf('bulleted-list', List({ key: 'l', type: 'ul_list', icon: <BulletedListIcon /> })),
     addIf('numbered-list', List({ key: 'n', type: 'ol_list', icon: <NumberedListIcon /> })),
     ToolbarPlugin(opts.toolbar),
-    SoftBreakPlugin(),
+    SoftBreakPlugin({ shift: true }),
     addIf('responseArea', respAreaPlugin)
   ]);
 };