@cu-mkp/editioncrafter 1.0.2 → 1.0.4-beta.1

package/dist/es/src/component/GlossaryView.js

@@ -1,159 +1,167 @@
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { Typography } from '@material-ui/core';
-import Parser from 'html-react-parser';
-import Navigation from './Navigation';
-import { alpha } from './AlphabetLinks';
-import Markdown from 'react-markdown';
-var GlossaryView = /*#__PURE__*/function (_Component) {
-  _inherits(GlossaryView, _Component);
-  var _super = _createSuper(GlossaryView);
-  function GlossaryView() {
-    var _this;
-    _classCallCheck(this, GlossaryView);
-    _this = _super.call(this);
-    _this.onFilterChange = function (event) {
-      var filterTerm = event.target.value;
-      _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
-        filterTerm: filterTerm
-      }));
-    };
-    _this.state = {
-      filterTerm: ''
-    };
-    return _this;
+import { Typography } from '@material-ui/core'
+import Parser from 'html-react-parser'
+import React, { Component } from 'react'
+import Markdown from 'react-markdown'
+import { connect } from 'react-redux'
+import { alpha } from './AlphabetLinks'
+import Navigation from './Navigation'
+
+class GlossaryView extends Component {
+  constructor() {
+    super()
+    this.state = { filterTerm: '' }
   }
-  _createClass(GlossaryView, [{
-    key: "renderGlossary",
-    value: function renderGlossary() {
-      var glossary = this.props.glossary.glossary;
-      var filterTerm = this.state.filterTerm.toLowerCase();
-      var entryList = Object.values(glossary.entries);
-      var checkHeadwords = function checkHeadwords(headword, term, delimiter) {
-        var words = headword.split(delimiter);
-        var _iterator = _createForOfIteratorHelper(words),
-          _step;
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var word = _step.value;
-            if (word.startsWith(term)) return true;
-          }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
-        }
-        return false;
-      };
-
-      // {head-word}, {alternate-spelling}: {meaning-number}. {part-of-speech} {meaning} [{references}]
-      var glossaryEntries = [];
-      var alphaIndex = 0;
-      for (var _i = 0, _entryList = entryList; _i < _entryList.length; _i++) {
-        var entry = _entryList[_i];
-        // render alphabetic header if we have started the next letter
-        if (filterTerm.length === 0 && entry.headWord[0] === alpha[alphaIndex]) {
-          var alphaHeadingID = "alpha-".concat(alphaIndex);
-          glossaryEntries.push( /*#__PURE__*/React.createElement(Typography, {
-            variant: "h4",
-            key: "gloss-heading-".concat(alpha[alphaIndex]),
-            id: alphaHeadingID
-          }, "\u2014", alpha[alphaIndex], ' ', "\u2014"));
-          alphaIndex++;
-        }
-        var lowerCaseHeadword = entry.headWord.toLowerCase();
-        var lowerCaseAltSpellings = entry.alternateSpellings.toLowerCase();
-        var lowerCaseModSpellings = entry.modernSpelling.toLowerCase();
-        if (filterTerm.length === 0 || filterTerm.length !== 0 && checkHeadwords(lowerCaseHeadword, filterTerm, ' ') || filterTerm.length !== 0 && checkHeadwords(lowerCaseModSpellings, filterTerm, ' ') || filterTerm.length !== 0 && checkHeadwords(lowerCaseAltSpellings, filterTerm, ', ')) {
-          var meanings = renderMeanings(entry);
-          var meaningsEndWithPeriod = meanings[meanings.length - 1].endsWith('.');
-          var altString = entry.alternateSpellings ? ", ".concat(entry.alternateSpellings) : '';
-          var pos = entry.meanings[0].partOfSpeech;
-          var partOfSpeech = pos ? "".concat(pos, ":") : '';
-          var modPunctuation = pos ? ',' : ':';
-          var modString = entry.modernSpelling ? " (mod. ".concat(entry.modernSpelling, ")") : '';
-          var comma = meaningsEndWithPeriod ? '' : ',';
-          var seeAlso = entry.seeAlso ? "".concat(comma, " see also <span>&#8594;</span>").concat(entry.seeAlso, " ") : '';
-          var synonym = entry.synonym ? ", syn. <span>&#8594;</span>".concat(entry.synonym) : '';
-          var antonym = entry.antonym ? ", ant. <span>&#8594;</span>".concat(entry.antonym) : '';
-          glossaryEntries.push( /*#__PURE__*/React.createElement(Typography, {
-            gutterBottom: true,
-            key: "gloss-".concat(entry.headWord)
-          }, /*#__PURE__*/React.createElement("u", null, entry.headWord), altString, modString, modPunctuation, ' ', partOfSpeech, ' ', meanings.map(function (meaningful) {
-            return Parser(meaningful);
-          }), Parser(seeAlso), Parser(synonym), Parser(antonym)));
-        }
+
+  renderGlossary() {
+    const { glossary } = this.props.glossary
+    const filterTerm = this.state.filterTerm.toLowerCase()
+    const entryList = Object.values(glossary.entries)
+
+    const checkHeadwords = (headword, term, delimiter) => {
+      const words = headword.split(delimiter)
+      for (const word of words) {
+        if (word.startsWith(term))
+          return true
       }
-      return glossaryEntries;
+      return false
     }
-  }, {
-    key: "render",
-    value: function render() {
-      if (!this.props.glossary.loaded) return null;
-      return /*#__PURE__*/React.createElement("div", {
-        id: "glossaryView",
-        style: {
-          position: "relative",
-          overflow: "auto"
-        }
-      }, /*#__PURE__*/React.createElement(Navigation, {
-        side: this.props.side,
-        onFilterChange: this.onFilterChange,
-        value: this.state.filterTerm,
-        documentView: this.props.documentView,
-        documentViewActions: this.props.documentViewActions
-      }), /*#__PURE__*/React.createElement("div", {
-        id: "glossaryViewInner"
-      }, /*#__PURE__*/React.createElement("div", {
-        id: "glossaryContent"
-      }, /*#__PURE__*/React.createElement(Typography, {
-        variant: "h2",
-        className: "title"
-      }, "Glossary"), this.props.glossary.glossary.title && /*#__PURE__*/React.createElement("div", {
-        className: "subtitle MuiTypography-root MuiTypography-body1"
-      }, /*#__PURE__*/React.createElement(Markdown, null, this.props.glossary.glossary.title)), /*#__PURE__*/React.createElement("div", {
-        className: "cite-instructions"
-      }, this.props.glossary.glossary.citation && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
-        className: "cite-header"
-      }, "How to Cite"), /*#__PURE__*/React.createElement("div", {
-        className: "MuiTypography-root MuiTypography-body1"
-      }, /*#__PURE__*/React.createElement(Markdown, null, this.props.glossary.glossary.citation)))), this.renderGlossary())));
+
+    // {head-word}, {alternate-spelling}: {meaning-number}. {part-of-speech} {meaning} [{references}]
+    const glossaryEntries = []
+    let alphaIndex = 0
+
+    for (const entry of entryList) {
+      // render alphabetic header if we have started the next letter
+      if (filterTerm.length === 0 && entry.headWord[0] === alpha[alphaIndex]) {
+        const alphaHeadingID = `alpha-${alphaIndex}`
+        glossaryEntries.push(
+          <Typography variant="h4" key={`gloss-heading-${alpha[alphaIndex]}`} id={alphaHeadingID}>
+            &mdash;
+            {alpha[alphaIndex]}
+            {' '}
+            &mdash;
+          </Typography>,
+        )
+        alphaIndex++
+      }
+      const lowerCaseHeadword = entry.headWord.toLowerCase()
+
+      const lowerCaseAltSpellings = entry.alternateSpellings.toLowerCase()
+      const lowerCaseModSpellings = entry.modernSpelling.toLowerCase()
+      if (filterTerm.length === 0
+        || (filterTerm.length !== 0 && checkHeadwords(lowerCaseHeadword, filterTerm, ' '))
+        || (filterTerm.length !== 0 && checkHeadwords(lowerCaseModSpellings, filterTerm, ' '))
+        || (filterTerm.length !== 0 && checkHeadwords(lowerCaseAltSpellings, filterTerm, ', '))
+      ) {
+        const meanings = renderMeanings(entry)
+        const meaningsEndWithPeriod = meanings[meanings.length - 1].endsWith('.')
+        const altString = entry.alternateSpellings ? `, ${entry.alternateSpellings}` : ''
+        const pos = entry.meanings[0].partOfSpeech
+        const partOfSpeech = pos ? `${pos}:` : ''
+        const modPunctuation = pos ? ',' : ':'
+        const modString = entry.modernSpelling ? ` (mod. ${entry.modernSpelling})` : ''
+        const comma = meaningsEndWithPeriod ? '' : ','
+        const seeAlso = entry.seeAlso ? `${comma} see also <span>&#8594;</span>${entry.seeAlso} ` : ''
+        const synonym = entry.synonym ? `, syn. <span>&#8594;</span>${entry.synonym}` : ''
+        const antonym = entry.antonym ? `, ant. <span>&#8594;</span>${entry.antonym}` : ''
+        glossaryEntries.push(
+          <Typography gutterBottom key={`gloss-${entry.headWord}`}>
+            <u>{entry.headWord}</u>
+            {altString}
+            {modString}
+            {modPunctuation}
+            {' '}
+            {partOfSpeech}
+            {' '}
+            {
+              meanings.map(meaningful => Parser(meaningful))
+            }
+            {Parser(seeAlso)}
+            {Parser(synonym)}
+            {Parser(antonym)}
+          </Typography>,
+        )
+      }
     }
-  }]);
-  return GlossaryView;
-}(Component);
+
+    return glossaryEntries
+  }
+
+  onFilterChange = (event) => {
+    const filterTerm = event.target.value
+    this.setState({ ...this.state, filterTerm })
+  }
+
+  render() {
+    if (!this.props.glossary.loaded)
+      return null
+
+    return (
+      <div id="glossaryView" style={{ position: 'relative', overflow: 'auto' }}>
+        <Navigation
+          side={this.props.side}
+          onFilterChange={this.onFilterChange}
+          value={this.state.filterTerm}
+          documentView={this.props.documentView}
+          documentViewActions={this.props.documentViewActions}
+        />
+
+        <div id="glossaryViewInner">
+          <div id="glossaryContent">
+            <Typography variant="h2" className="title">Glossary</Typography>
+            {
+              this.props.glossary.glossary.title
+              && (
+                <div className="subtitle MuiTypography-root MuiTypography-body1">
+                  <Markdown>
+                    { this.props.glossary.glossary.title }
+                  </Markdown>
+                </div>
+              )
+            }
+            <div className="cite-instructions">
+              {
+                this.props.glossary.glossary.citation
+                && (
+                  <>
+                    <Typography className="cite-header">How to Cite</Typography>
+                    <div className="MuiTypography-root MuiTypography-body1">
+                      <Markdown>
+                        { this.props.glossary.glossary.citation }
+                      </Markdown>
+                    </div>
+                  </>
+                )
+              }
+            </div>
+            { this.renderGlossary() }
+          </div>
+        </div>
+
+      </div>
+    )
+  }
+}
+
 function renderMeanings(entry) {
-  var meaningList = [];
-  for (var i = 0; i < entry.meanings.length; i++) {
-    var meaning = entry.meanings[i];
-    var refString = meaning.references ? " [".concat(meaning.references, "]") : '';
-    var numString = entry.meanings.length > 1 ? "".concat(i + 1, ". ") : '';
-    var space = i < entry.meanings.length - 1 ? ' ' : '';
-    meaningList.push("".concat(numString).concat(meaning.meaning).concat(refString).concat(space));
+  const meaningList = []
+  for (let i = 0; i < entry.meanings.length; i++) {
+    const meaning = entry.meanings[i]
+
+    const refString = meaning.references ? ` [${meaning.references}]` : ''
+    const numString = (entry.meanings.length > 1) ? `${i + 1}. ` : ''
+    const space = i < entry.meanings.length - 1 ? ' ' : ''
+    meaningList.push(
+      `${numString}${meaning.meaning}${refString}${space}`,
+    )
   }
-  return meaningList;
+  return meaningList
 }
+
 function mapStateToProps(state) {
   return {
-    glossary: state.glossary
-  };
+    glossary: state.glossary,
+  }
 }
-export default connect(mapStateToProps)(GlossaryView);
+
+export default connect(mapStateToProps)(GlossaryView)

package/dist/es/src/component/HelpPopper.js

@@ -1,78 +1,96 @@
-import React from 'react';
-import Popper from '@material-ui/core/Popper';
-import Typography from '@material-ui/core/Typography';
-import Fade from '@material-ui/core/Fade';
-import Paper from '@material-ui/core/Paper';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import { FaArrowCircleLeft, FaArrowCircleRight } from 'react-icons/fa';
-import asterisk from '../icons/howtouse-asterisk.png';
-import curly from '../icons/howtouse-curly.png';
-import square from '../icons/howtouse-square.png';
-import ups from '../icons/howtouse-ups.png';
-var HelpPopper = function HelpPopper(props) {
-  return /*#__PURE__*/React.createElement(Popper, {
-    anchorEl: props.anchorEl,
-    open: props.open,
-    style: props.marginStyle
-  }, /*#__PURE__*/React.createElement(Fade, {
-    "in": props.open
-  }, /*#__PURE__*/React.createElement(Paper, {
-    className: "helpContainer"
-  }, /*#__PURE__*/React.createElement("div", {
-    onClick: props.onClose,
-    className: "closeX"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "fa fa-window-close"
-  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
-    variant: "h6",
-    component: "h2"
-  }, "Toolbar Buttons"), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement("span", {
-    className: "fa fa-lock"
-  }), /*#__PURE__*/React.createElement(ListItemText, {
-    primary: "Toggle Sync Views"
-  })), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement("span", {
-    className: "fa fa-book"
-  }), /*#__PURE__*/React.createElement(ListItemText, {
-    primary: "Toggle Book Mode"
-  })), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement("span", {
-    className: "fa fa-code"
-  }), /*#__PURE__*/React.createElement(ListItemText, {
-    primary: "Toggle XML Mode"
-  })), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement("span", {
-    className: "horizontal-buttons"
-  }, /*#__PURE__*/React.createElement(FaArrowCircleLeft, null), /*#__PURE__*/React.createElement(FaArrowCircleRight, null)), /*#__PURE__*/React.createElement(ListItemText, {
-    primary: "Go Forward / Back"
-  })), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement("span", {
-    className: "fa fa-hand-point-right"
-  }), /*#__PURE__*/React.createElement(ListItemText, {
-    primary: "Jump to folio"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "readingGuide"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "h6",
-    component: "h2"
-  }, "Reading Guide"), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(Typography, {
-    variant: "overline",
-    component: "span"
-  }, "Syntax")), /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(Typography, {
-    variant: "overline",
-    component: "span"
-  }, "Meaning")))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("img", {
-    src: ups,
-    alt: "howtouse-ups"
-  })), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Typography, null, "Text is under the paper strip"))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("img", {
-    src: curly,
-    alt: "howtouse-curly"
-  })), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Typography, null, "Expanded version implied by abbreviation marks"))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("img", {
-    src: square,
-    alt: "howtouse-square"
-  })), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Typography, null, "Editorial interventions and corrections"))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("img", {
-    src: asterisk,
-    alt: "howtouse-asterisk"
-  })), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Typography, null, "Editorial Comments"))))))), /*#__PURE__*/React.createElement(Typography, null, "See \xA0", /*#__PURE__*/React.createElement("a", {
-    href: "#/content/how-to-use"
-  }, "How to Use"), "\xA0 for more information.")))));
-};
-export default HelpPopper;
+import Fade from '@material-ui/core/Fade'
+import List from '@material-ui/core/List'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemText from '@material-ui/core/ListItemText'
+import Paper from '@material-ui/core/Paper'
+import Popper from '@material-ui/core/Popper'
+import Typography from '@material-ui/core/Typography'
+import React from 'react'
+import {
+  FaArrowCircleLeft,
+  FaArrowCircleRight,
+} from 'react-icons/fa'
+import asterisk from '../icons/howtouse-asterisk.png'
+import curly from '../icons/howtouse-curly.png'
+import square from '../icons/howtouse-square.png'
+import ups from '../icons/howtouse-ups.png'
+
+function HelpPopper(props) {
+  return (
+    <Popper anchorEl={props.anchorEl} open={props.open} style={props.marginStyle}>
+      <Fade in={props.open}>
+        <Paper className="helpContainer">
+          <div onClick={props.onClose} className="closeX">
+            <span className="fa fa-window-close" />
+          </div>
+          <div>
+            <Typography variant="h6" component="h2">Toolbar Buttons</Typography>
+            <List>
+              <ListItem>
+                <span className="fa fa-lock" />
+                <ListItemText primary="Toggle Sync Views" />
+              </ListItem>
+              <ListItem>
+                <span className="fa fa-book" />
+                <ListItemText primary="Toggle Book Mode" />
+              </ListItem>
+              <ListItem>
+                <span className="fa fa-code" />
+                <ListItemText primary="Toggle XML Mode" />
+              </ListItem>
+              <ListItem>
+                <span className="horizontal-buttons">
+                  <FaArrowCircleLeft />
+                  <FaArrowCircleRight />
+                </span>
+                <ListItemText primary="Go Forward / Back" />
+              </ListItem>
+              <ListItem>
+                <span className="fa fa-hand-point-right" />
+                <ListItemText primary="Jump to folio" />
+              </ListItem>
+              <div className="readingGuide">
+                <Typography variant="h6" component="h2">Reading Guide</Typography>
+                <table>
+                  <thead>
+                    <tr>
+                      <th><Typography variant="overline" component="span">Syntax</Typography></th>
+                      <th><Typography variant="overline" component="span">Meaning</Typography></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td><img src={ups} alt="howtouse-ups" /></td>
+                      <td><Typography>Text is under the paper strip</Typography></td>
+                    </tr>
+                    <tr>
+                      <td><img src={curly} alt="howtouse-curly" /></td>
+                      <td><Typography>Expanded version implied by abbreviation marks</Typography></td>
+                    </tr>
+                    <tr>
+                      <td><img src={square} alt="howtouse-square" /></td>
+                      <td><Typography>Editorial interventions and corrections</Typography></td>
+                    </tr>
+                    <tr>
+                      <td><img src={asterisk} alt="howtouse-asterisk" /></td>
+                      <td><Typography>Editorial Comments</Typography></td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </List>
+            <Typography>
+              See
+              &nbsp;
+              <a href="#/content/how-to-use">How to Use</a>
+              &nbsp;
+              for more information.
+            </Typography>
+          </div>
+        </Paper>
+      </Fade>
+    </Popper>
+  )
+}
+
+export default HelpPopper