@pie-lib/editable-html 9.0.3 → 9.1.0

package/lib/plugins/toolbar/editor-and-toolbar.js

@@ -69,7 +69,8 @@ var EditorAndToolbar = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this = this;
+      var _this = this,
+          _classNames;
 
       var _this$props = this.props,
           classes = _this$props.classes,
@@ -100,11 +101,12 @@ var EditorAndToolbar = /*#__PURE__*/function (_React$Component) {
 
       log('[render] inFocus: ', inFocus, 'value.isFocused:', value.isFocused, 'focused node: ', focusedNode);
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classes.root, toolbarOpts && toolbarOpts.error && classes.error)
+        className: (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.noBorder, toolbarOpts && toolbarOpts.noBorder), (0, _defineProperty2["default"])(_classNames, classes.error, toolbarOpts && toolbarOpts.error), _classNames), classes.root)
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: holderNames
+        className: holderNames,
+        id: 'holder'
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.children
+        className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, classes.noPadding, toolbarOpts && toolbarOpts.noBorder), classes.children)
       }, clonedChildren)), /*#__PURE__*/_react["default"].createElement(_toolbar["default"], {
         autoWidth: autoWidth,
         plugins: plugins,
@@ -254,6 +256,12 @@ var style = {
   },
   error: {
     border: '2px solid red'
+  },
+  noBorder: {
+    border: 'none'
+  },
+  noPadding: {
+    padding: 0
   }
 };
 

package/lib/plugins/toolbar/editor-and-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/plugins/toolbar/editor-and-toolbar.jsx"],"names":["log","EditorAndToolbar","IS_FIREFOX","editorRef","tmp","isUpdatingSelection","props","classes","children","value","plugins","onChange","onDone","focusedNode","autoWidth","readOnly","disableUnderline","pluginProps","toolbarOpts","onDataChange","toolbarRef","inFocus","isFocused","undefined","holderNames","editorHolder","editorInFocus","disabledUnderline","clonedChildren","React","cloneElement","ref","el","root","error","Component","PropTypes","oneOfType","arrayOf","node","isRequired","SlatePropTypes","array","func","bool","object","shape","position","oneOf","alwaysVisible","string","style","padding","border","borderRadius","cursor","wordBreak","overflow","maxHeight","overflowY","color","text","backgroundColor","background","left","right","bottom","height","content","transition","pointerEvents","transform","primary","display","backgroundSize","backgroundImage","backgroundRepeat","backgroundPosition"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Toolbar from './toolbar';\nimport classNames from 'classnames';\nimport debug from 'debug';\nimport { primary } from '../../theme';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport SlatePropTypes from 'slate-prop-types';\nimport { IS_FIREFOX } from 'slate-dev-environment';\nimport { color } from '@pie-lib/render-ui';\n\nconst log = debug('@pie-lib:editable-html:plugins:toolbar:editor-and-toolbar');\n\nexport class EditorAndToolbar extends React.Component {\n  static propTypes = {\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n    value: SlatePropTypes.value.isRequired,\n    plugins: PropTypes.array.isRequired,\n    onChange: PropTypes.func.isRequired,\n    onDone: PropTypes.func.isRequired,\n    onDataChange: PropTypes.func,\n    toolbarRef: PropTypes.func,\n    focusedNode: SlatePropTypes.node,\n    readOnly: PropTypes.bool,\n    disableUnderline: PropTypes.bool,\n    autoWidth: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    pluginProps: PropTypes.object,\n    toolbarOpts: PropTypes.shape({\n      position: PropTypes.oneOf(['bottom', 'top']),\n      alwaysVisible: PropTypes.bool,\n      error: PropTypes.string\n    })\n  };\n\n  /** This is an interim fix until this PR is merged in slate:\n   * https://github.com/ianstormtaylor/slate/pull/2236\n   */\n  componentDidMount() {\n    if (IS_FIREFOX) {\n      this.editorRef.tmp.isUpdatingSelection = true;\n    }\n  }\n\n  render() {\n    const {\n      classes,\n      children,\n      value,\n      plugins,\n      onChange,\n      onDone,\n      focusedNode,\n      autoWidth,\n      readOnly,\n      disableUnderline,\n      pluginProps,\n      toolbarOpts,\n      onDataChange,\n      toolbarRef\n    } = this.props;\n\n    const inFocus = value.isFocused || (focusedNode !== null && focusedNode !== undefined);\n    const holderNames = classNames(\n      classes.editorHolder,\n      inFocus && classes.editorInFocus,\n      readOnly && classes.readOnly,\n      disableUnderline && classes.disabledUnderline\n    );\n    let clonedChildren = children;\n\n    if (typeof children !== 'string') {\n      clonedChildren = React.cloneElement(children, {\n        ref: el => (this.editorRef = el)\n      });\n    }\n\n    log(\n      '[render] inFocus: ',\n      inFocus,\n      'value.isFocused:',\n      value.isFocused,\n      'focused node: ',\n      focusedNode\n    );\n\n    return (\n      <div className={classNames(classes.root, toolbarOpts && toolbarOpts.error && classes.error)}>\n        <div className={holderNames}>\n          <div className={classes.children}>{clonedChildren}</div>\n        </div>\n        <Toolbar\n          autoWidth={autoWidth}\n          plugins={plugins}\n          focusedNode={focusedNode}\n          value={value}\n          isFocused={inFocus}\n          onChange={onChange}\n          onDone={onDone}\n          onDataChange={onDataChange}\n          toolbarRef={toolbarRef}\n          pluginProps={pluginProps}\n          toolbarOpts={toolbarOpts}\n        />\n      </div>\n    );\n  }\n}\n\nconst style = {\n  root: {\n    position: 'relative',\n    padding: '0px',\n    border: '1px solid #ccc',\n    borderRadius: '4px',\n    cursor: 'text',\n    '& [data-slate-editor=\"true\"]': {\n      wordBreak: 'break-word',\n      overflow: 'visible',\n      maxHeight: '500px',\n      // needed in order to be able to put the focus before a void element when it is the first one in the editor\n      padding: '5px'\n    }\n  },\n  children: {\n    padding: '10px 16px'\n  },\n  editorHolder: {\n    position: 'relative',\n    padding: '0px',\n    overflowY: 'scroll',\n    color: color.text(),\n    backgroundColor: color.background(),\n    '&::before': {\n      left: '0',\n      right: '0',\n      bottom: '0',\n      height: '1px',\n      content: '\"\"',\n      position: 'absolute',\n      transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',\n      pointerEvents: 'none',\n      backgroundColor: 'rgba(0, 0, 0, 0.42)'\n    },\n    '&::after': {\n      left: '0',\n      right: '0',\n      bottom: '0',\n      height: '1px',\n      content: '\"\"',\n      position: 'absolute',\n      transform: 'scaleX(0)',\n      transition:\n        'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 200ms linear',\n      backgroundColor: 'rgba(0, 0, 0, 0.42)'\n    },\n    '&:focus': {\n      '&::after': {\n        transform: 'scaleX(1)',\n        backgroundColor: primary,\n        height: '2px'\n      }\n    },\n    '&:hover': {\n      '&::after': {\n        transform: 'scaleX(1)',\n        backgroundColor: 'black',\n        height: '2px'\n      }\n    }\n  },\n  disabledUnderline: {\n    '&::before': {\n      display: 'none'\n    },\n    '&::after': {\n      display: 'none'\n    }\n  },\n\n  readOnly: {\n    '&::before': {\n      background: 'transparent',\n      backgroundSize: '5px 1px',\n      backgroundImage: 'linear-gradient(to right, rgba(0, 0, 0, 0.42) 33%, transparent 0%)',\n      backgroundRepeat: 'repeat-x',\n      backgroundPosition: 'left top'\n    },\n    '&::after': {\n      left: '0',\n      right: '0',\n      bottom: '0',\n      height: '1px',\n      content: '\"\"',\n      position: 'absolute',\n      transform: 'scaleX(0)',\n      transition: 'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 0ms linear',\n      backgroundColor: 'rgba(0, 0, 0, 0)'\n    },\n    '&:hover': {\n      '&::after': {\n        transform: 'scaleX(0)',\n        backgroundColor: 'black',\n        height: '2px'\n      }\n    }\n  },\n  editorInFocus: {\n    '&::after': {\n      transform: 'scaleX(1)',\n      backgroundColor: primary,\n      height: '2px'\n    },\n    '&:hover': {\n      '&::after': {\n        backgroundColor: primary\n      }\n    }\n  },\n  error: {\n    border: '2px solid red'\n  }\n};\n\nexport default withStyles(style)(EditorAndToolbar);\n"],"file":"editor-and-toolbar.js"}
+{"version":3,"sources":["../../../src/plugins/toolbar/editor-and-toolbar.jsx"],"names":["log","EditorAndToolbar","IS_FIREFOX","editorRef","tmp","isUpdatingSelection","props","classes","children","value","plugins","onChange","onDone","focusedNode","autoWidth","readOnly","disableUnderline","pluginProps","toolbarOpts","onDataChange","toolbarRef","inFocus","isFocused","undefined","holderNames","editorHolder","editorInFocus","disabledUnderline","clonedChildren","React","cloneElement","ref","el","noBorder","error","root","noPadding","Component","PropTypes","oneOfType","arrayOf","node","isRequired","SlatePropTypes","array","func","bool","object","shape","position","oneOf","alwaysVisible","string","style","padding","border","borderRadius","cursor","wordBreak","overflow","maxHeight","overflowY","color","text","backgroundColor","background","left","right","bottom","height","content","transition","pointerEvents","transform","primary","display","backgroundSize","backgroundImage","backgroundRepeat","backgroundPosition"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Toolbar from './toolbar';\nimport classNames from 'classnames';\nimport debug from 'debug';\nimport { primary } from '../../theme';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport SlatePropTypes from 'slate-prop-types';\nimport { IS_FIREFOX } from 'slate-dev-environment';\nimport { color } from '@pie-lib/render-ui';\n\nconst log = debug('@pie-lib:editable-html:plugins:toolbar:editor-and-toolbar');\n\nexport class EditorAndToolbar extends React.Component {\n  static propTypes = {\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n    value: SlatePropTypes.value.isRequired,\n    plugins: PropTypes.array.isRequired,\n    onChange: PropTypes.func.isRequired,\n    onDone: PropTypes.func.isRequired,\n    onDataChange: PropTypes.func,\n    toolbarRef: PropTypes.func,\n    focusedNode: SlatePropTypes.node,\n    readOnly: PropTypes.bool,\n    disableUnderline: PropTypes.bool,\n    autoWidth: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    pluginProps: PropTypes.object,\n    toolbarOpts: PropTypes.shape({\n      position: PropTypes.oneOf(['bottom', 'top']),\n      alwaysVisible: PropTypes.bool,\n      error: PropTypes.string\n    })\n  };\n\n  /** This is an interim fix until this PR is merged in slate:\n   * https://github.com/ianstormtaylor/slate/pull/2236\n   */\n  componentDidMount() {\n    if (IS_FIREFOX) {\n      this.editorRef.tmp.isUpdatingSelection = true;\n    }\n  }\n\n  render() {\n    const {\n      classes,\n      children,\n      value,\n      plugins,\n      onChange,\n      onDone,\n      focusedNode,\n      autoWidth,\n      readOnly,\n      disableUnderline,\n      pluginProps,\n      toolbarOpts,\n      onDataChange,\n      toolbarRef\n    } = this.props;\n\n    const inFocus = value.isFocused || (focusedNode !== null && focusedNode !== undefined);\n    const holderNames = classNames(\n      classes.editorHolder,\n      inFocus && classes.editorInFocus,\n      readOnly && classes.readOnly,\n      disableUnderline && classes.disabledUnderline\n    );\n    let clonedChildren = children;\n\n    if (typeof children !== 'string') {\n      clonedChildren = React.cloneElement(children, {\n        ref: el => (this.editorRef = el)\n      });\n    }\n\n    log(\n      '[render] inFocus: ',\n      inFocus,\n      'value.isFocused:',\n      value.isFocused,\n      'focused node: ',\n      focusedNode\n    );\n\n    return (\n      <div\n        className={classNames(\n          {\n            [classes.noBorder]: toolbarOpts && toolbarOpts.noBorder,\n            [classes.error]: toolbarOpts && toolbarOpts.error\n          },\n          classes.root\n        )}\n      >\n        <div className={holderNames} id={'holder'}>\n          <div\n            className={classNames(\n              {\n                [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder\n              },\n              classes.children\n            )}\n          >\n            {clonedChildren}\n          </div>\n        </div>\n        <Toolbar\n          autoWidth={autoWidth}\n          plugins={plugins}\n          focusedNode={focusedNode}\n          value={value}\n          isFocused={inFocus}\n          onChange={onChange}\n          onDone={onDone}\n          onDataChange={onDataChange}\n          toolbarRef={toolbarRef}\n          pluginProps={pluginProps}\n          toolbarOpts={toolbarOpts}\n        />\n      </div>\n    );\n  }\n}\n\nconst style = {\n  root: {\n    position: 'relative',\n    padding: '0px',\n    border: '1px solid #ccc',\n    borderRadius: '4px',\n    cursor: 'text',\n    '& [data-slate-editor=\"true\"]': {\n      wordBreak: 'break-word',\n      overflow: 'visible',\n      maxHeight: '500px',\n      // needed in order to be able to put the focus before a void element when it is the first one in the editor\n      padding: '5px'\n    }\n  },\n  children: {\n    padding: '10px 16px'\n  },\n  editorHolder: {\n    position: 'relative',\n    padding: '0px',\n    overflowY: 'scroll',\n    color: color.text(),\n    backgroundColor: color.background(),\n    '&::before': {\n      left: '0',\n      right: '0',\n      bottom: '0',\n      height: '1px',\n      content: '\"\"',\n      position: 'absolute',\n      transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',\n      pointerEvents: 'none',\n      backgroundColor: 'rgba(0, 0, 0, 0.42)'\n    },\n    '&::after': {\n      left: '0',\n      right: '0',\n      bottom: '0',\n      height: '1px',\n      content: '\"\"',\n      position: 'absolute',\n      transform: 'scaleX(0)',\n      transition:\n        'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 200ms linear',\n      backgroundColor: 'rgba(0, 0, 0, 0.42)'\n    },\n    '&:focus': {\n      '&::after': {\n        transform: 'scaleX(1)',\n        backgroundColor: primary,\n        height: '2px'\n      }\n    },\n    '&:hover': {\n      '&::after': {\n        transform: 'scaleX(1)',\n        backgroundColor: 'black',\n        height: '2px'\n      }\n    }\n  },\n  disabledUnderline: {\n    '&::before': {\n      display: 'none'\n    },\n    '&::after': {\n      display: 'none'\n    }\n  },\n\n  readOnly: {\n    '&::before': {\n      background: 'transparent',\n      backgroundSize: '5px 1px',\n      backgroundImage: 'linear-gradient(to right, rgba(0, 0, 0, 0.42) 33%, transparent 0%)',\n      backgroundRepeat: 'repeat-x',\n      backgroundPosition: 'left top'\n    },\n    '&::after': {\n      left: '0',\n      right: '0',\n      bottom: '0',\n      height: '1px',\n      content: '\"\"',\n      position: 'absolute',\n      transform: 'scaleX(0)',\n      transition: 'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 0ms linear',\n      backgroundColor: 'rgba(0, 0, 0, 0)'\n    },\n    '&:hover': {\n      '&::after': {\n        transform: 'scaleX(0)',\n        backgroundColor: 'black',\n        height: '2px'\n      }\n    }\n  },\n  editorInFocus: {\n    '&::after': {\n      transform: 'scaleX(1)',\n      backgroundColor: primary,\n      height: '2px'\n    },\n    '&:hover': {\n      '&::after': {\n        backgroundColor: primary\n      }\n    }\n  },\n  error: {\n    border: '2px solid red'\n  },\n  noBorder: {\n    border: 'none'\n  },\n  noPadding: {\n    padding: 0\n  }\n};\n\nexport default withStyles(style)(EditorAndToolbar);\n"],"file":"editor-and-toolbar.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html",
-  "version": "9.0.3",
+  "version": "9.1.0",
   "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",
@@ -47,6 +47,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3b70ee38ae16864e35fe07901cd7c2ca6b51f30a",
+  "gitHead": "5f0932d39d7f01be0f96665b8fbe45ee745c2868",
   "scripts": {}
 }

package/src/editor.jsx

@@ -33,7 +33,7 @@ const defaultResponseAreaProps = {
   onHandleAreaChange: () => {}
 };
 
-const defaultLanguageCharactersProps = [{ language: 'spanish' }, { language: 'special' }];
+const defaultLanguageCharactersProps = [];
 
 const createToolbarOpts = toolbarOpts => {
   return {
@@ -352,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);
     });
   };
@@ -639,6 +639,31 @@ export class Editor extends React.Component {
     }
   };
 
+  renderPlaceholder = props => {
+    const { editor } = props;
+    const { document } = editor.value;
+
+    if (!editor.props.placeholder || document.text !== '' || document.nodes.size !== 1) {
+      return false;
+    }
+
+    return (
+      <span
+        contentEditable={false}
+        style={{
+          display: 'inline-block',
+          width: 'fit-content', // for centering the placeholder if text-align is set to center
+          maxWidth: '100%',
+          whiteSpace: 'nowrap',
+          opacity: '0.33',
+          pointerEvents: 'none'
+        }}
+      >
+        {editor.props.placeholder}
+      </span>
+    );
+  };
+
   render() {
     const {
       disabled,
@@ -704,6 +729,7 @@ export class Editor extends React.Component {
           pluginProps={pluginProps}
           toolbarOpts={toolbarOpts}
           placeholder={placeholder}
+          renderPlaceholder={this.renderPlaceholder}
           onDataChange={this.changeData}
         />
       </div>

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;

package/src/plugins/toolbar/editor-and-toolbar.jsx

@@ -85,9 +85,26 @@ export class EditorAndToolbar extends React.Component {
     );
 
     return (
-      <div className={classNames(classes.root, toolbarOpts && toolbarOpts.error && classes.error)}>
-        <div className={holderNames}>
-          <div className={classes.children}>{clonedChildren}</div>
+      <div
+        className={classNames(
+          {
+            [classes.noBorder]: toolbarOpts && toolbarOpts.noBorder,
+            [classes.error]: toolbarOpts && toolbarOpts.error
+          },
+          classes.root
+        )}
+      >
+        <div className={holderNames} id={'holder'}>
+          <div
+            className={classNames(
+              {
+                [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder
+              },
+              classes.children
+            )}
+          >
+            {clonedChildren}
+          </div>
         </div>
         <Toolbar
           autoWidth={autoWidth}
@@ -219,6 +236,12 @@ const style = {
   },
   error: {
     border: '2px solid red'
+  },
+  noBorder: {
+    border: 'none'
+  },
+  noPadding: {
+    padding: 0
   }
 };