@pie-lib/editable-html 9.0.2 → 9.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html",
-  "version": "9.0.2",
+  "version": "9.0.5",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
@@ -12,7 +12,7 @@
     "@material-ui/styles": "^3.0.0-alpha.10",
     "@pie-lib/drag": "^1.1.52",
     "@pie-lib/math-rendering": "^2.4.5",
-    "@pie-lib/math-toolbar": "^1.10.2",
+    "@pie-lib/math-toolbar": "^1.10.3",
     "@pie-lib/render-ui": "^4.13.1",
     "change-case": "^3.0.2",
     "classnames": "^2.2.6",
@@ -29,6 +29,7 @@
     "slate-edit-list": "^0.11.3",
     "slate-edit-table": "^0.17.0",
     "slate-html-serializer": "^0.6.12",
+    "slate-plain-serializer": "^0.5.26",
     "slate-prop-types": "^0.4.38",
     "slate-react": "^0.14.3",
     "slate-schema-violations": "^0.1.39",
@@ -46,6 +47,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "115df735f550ec05ba33dd6c654bd956f1a2b806",
+  "gitHead": "45e12d524142a6576c9ebb9292de01a34e88fc03",
   "scripts": {}
 }

package/src/editor.jsx

@@ -11,6 +11,8 @@ import debug from 'debug';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 import { color } from '@pie-lib/render-ui';
+import Plain from 'slate-plain-serializer';
+
 import { getBase64 } from './serialization';
 
 export { ALL_PLUGINS, DEFAULT_PLUGINS, serialization };
@@ -31,7 +33,7 @@ const defaultResponseAreaProps = {
   onHandleAreaChange: () => {}
 };
 
-const defaultLanguageCharactersProps = [{ language: 'spanish' }, { language: 'special' }];
+const defaultLanguageCharactersProps = [];
 
 const createToolbarOpts = toolbarOpts => {
   return {
@@ -100,7 +102,7 @@ export class Editor extends React.Component {
     }),
     className: PropTypes.string,
     maxImageWidth: PropTypes.number,
-    maxImageHeight: PropTypes.number,
+    maxImageHeight: PropTypes.number
   };
 
   static defaultProps = {
@@ -350,7 +352,7 @@ export class Editor extends React.Component {
     log('[onBlur] node: ', node);
 
     return new Promise(resolve => {
-      this.setState({ focusedNode: node }, this.handleBlur.bind(this, resolve));
+      this.setState({ focusedNode: !node ? null : node }, this.handleBlur.bind(this, resolve));
       this.props.onBlur(event);
     });
   };
@@ -572,14 +574,21 @@ export class Editor extends React.Component {
   };
 
   onDropPaste = async (event, change, dropContext) => {
-    if (!this.props.imageSupport) {
-      return;
-    }
     const editor = change.editor;
     const transfer = getEventTransfer(event);
-    const file = transfer.files[0];
+    const file = transfer.files && transfer.files[0];
+
+    const type = transfer.type;
+    const fragment = transfer.fragment;
+    const text = transfer.text;
 
-    if (file && file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png') {
+    if (
+      file &&
+      (file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png')
+    ) {
+      if (!this.props.imageSupport) {
+        return;
+      }
       try {
         log('[onDropPaste]');
         const src = await getBase64(file);
@@ -606,6 +615,27 @@ export class Editor extends React.Component {
       } catch (err) {
         log('[onDropPaste] error: ', err);
       }
+    } else if (type === 'fragment') {
+      change.insertFragment(fragment);
+    } else if (type === 'text' || type === 'html') {
+      if (!text) {
+        return;
+      }
+      const {
+        value: { document, selection, startBlock }
+      } = change;
+
+      if (startBlock.isVoid) {
+        return;
+      }
+
+      const defaultBlock = startBlock;
+      const defaultMarks = document.getInsertMarksAtRange(selection);
+      const frag = Plain.deserialize(text, {
+        defaultBlock,
+        defaultMarks
+      }).document;
+      change.insertFragment(frag);
     }
   };
 

package/src/index.jsx

@@ -95,9 +95,9 @@ export default class EditableHtml extends React.Component {
         c.focus();
 
         if (position === 'end' && lastText) {
-          c.moveFocusTo(lastText.key, lastText.text.length).moveAnchorTo(
+          c.moveFocusTo(lastText.key, lastText.text?.length).moveAnchorTo(
             lastText.key,
-            lastText.text.length
+            lastText.text?.length
           );
         }
 

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

@@ -208,6 +208,7 @@ export class Component extends React.Component {
     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;
 
@@ -261,6 +262,7 @@ export class Component extends React.Component {
             src={src}
             style={size}
             onLoad={this.loadImage}
+            alt={alt}
           />
           <div
             ref={ref => {

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;