@pie-lib/editable-html 9.0.4 → 9.0.5

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

@@ -1,9 +1,12 @@
 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');
 
@@ -24,16 +27,36 @@ AlignmentButton.propTypes = {
 export class ImageToolbar extends React.Component {
   static propTypes = {
     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);
+    this.props.onChange({ alignment });
+  };
+
+  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, alignment } = this.props;
+    const { classes, alignment, imageLoaded } = this.props;
 
     return (
       <div className={classes.holder}>
@@ -52,6 +75,15 @@ export class ImageToolbar extends React.Component {
           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>
     );
   }
@@ -62,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

@@ -30,17 +30,21 @@ export default function ImagePlugin(opts) {
     supports: node => node.object === 'inline' && node.type === 'image',
     customToolbar: (node, value, onToolbarDone) => {
       const alignment = node.data.get('alignment');
-      const onChange = alignment => {
+      const alt = node.data.get('alt');
+      const imageLoaded = node.data.get('loaded') !== false;
+      const onChange = newValues => {
         const update = {
           ...node.data.toObject(),
-          alignment
+          ...newValues
         };
 
         const change = value.change().setNodeByKey(node.key, { data: update });
         onToolbarDone(change, false);
       };
 
-      const Tb = () => <ImageToolbar alignment={alignment || 'left'} onChange={onChange} />;
+      const Tb = () => (
+        <ImageToolbar alt={alt} imageLoaded={imageLoaded} alignment={alignment || 'left'} onChange={onChange} />
+      );
       return Tb;
     },
     showDone: true
@@ -150,7 +154,8 @@ export const serialization = {
         height,
         margin: el.style.margin,
         justifyContent: el.style.justifyContent,
-        alignment: el.getAttribute('alignment')
+        alignment: el.getAttribute('alignment'),
+        alt: el.getAttribute('alt')
       }
     };
     log('return object: ', out);
@@ -166,6 +171,7 @@ export const serialization = {
     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`;
@@ -203,7 +209,8 @@ export const serialization = {
     const props = {
       src,
       style,
-      alignment
+      alignment,
+      alt
     };
 
     return <img {...props} />;

package/src/plugins/respArea/index.jsx

@@ -51,7 +51,6 @@ export default function ResponseAreaPlugin(opts) {
 
           if (!lastText) {
             return;
-
           }
           const parentNode = value.document.getParent(lastText.key);
 

package/src/plugins/table/index.jsx

@@ -79,7 +79,9 @@ TableCell.propTypes = {
 };
 
 export const moveFocusToBeginningOfTable = change => {
-  const addedTable = change.value.document.findDescendant(d => !!d.data && !!d.data.get('newTable'));
+  const addedTable = change.value.document.findDescendant(
+    d => !!d.data && !!d.data.get('newTable')
+  );
 
   if (!addedTable) {
     return;