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

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

@@ -1,67 +1,45 @@
-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 { Link } from 'react-scroll';
-export var alpha = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'Z'];
-var AlphabetLinks = /*#__PURE__*/function (_Component) {
-  _inherits(AlphabetLinks, _Component);
-  var _super = _createSuper(AlphabetLinks);
-  function AlphabetLinks() {
-    _classCallCheck(this, AlphabetLinks);
-    return _super.apply(this, arguments);
-  }
-  _createClass(AlphabetLinks, [{
-    key: "renderAlphaLinks",
-    value: function renderAlphaLinks() {
-      var letterLinks = [];
-      for (var i = 0; i < alpha.length; i++) {
-        var letter = alpha[i];
-        var alphaID = "alpha-".concat(i);
-        letterLinks.push( /*#__PURE__*/React.createElement("span", {
-          key: "link-".concat(alphaID)
-        }, /*#__PURE__*/React.createElement(Link, {
-          to: alphaID,
-          offset: -120,
-          containerId: "glossaryViewInner",
-          smooth: "true"
-        }, letter), ' '));
-      }
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: 'inline'
-        }
-      }, /*#__PURE__*/React.createElement("input", {
-        id: "glossary-filter",
-        className: "searchBox",
-        placeholder: "Filter by Entry",
-        onChange: this.props.onFilterChange,
-        value: this.props.filterTerm
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "alphaNav"
-      }, /*#__PURE__*/React.createElement("span", {
-        style: {
-          color: 'black'
-        }
-      }, "Go to: "), letterLinks));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "glossaryNav"
-      }, this.renderAlphaLinks());
+import React, { Component } from 'react'
+import { Link } from 'react-scroll'
+
+export const alpha = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'Z']
+
+export default class AlphabetLinks extends Component {
+  renderAlphaLinks() {
+    const letterLinks = []
+    for (let i = 0; i < alpha.length; i++) {
+      const letter = alpha[i]
+      const alphaID = `alpha-${i}`
+      letterLinks.push(
+        <span key={`link-${alphaID}`}>
+          <Link to={alphaID} offset={-120} containerId="glossaryViewInner" smooth="true">{letter}</Link>
+          {' '}
+        </span>,
+      )
     }
-  }]);
-  return AlphabetLinks;
-}(Component);
-export { AlphabetLinks as default };
+
+    return (
+      <div style={{ display: 'inline' }}>
+        <input
+          id="glossary-filter"
+          className="searchBox"
+          placeholder="Filter by Entry"
+          onChange={this.props.onFilterChange}
+          value={this.props.filterTerm}
+        />
+
+        <div className="alphaNav">
+          <span style={{ color: 'black' }}>Go to: </span>
+          { letterLinks }
+        </div>
+      </div>
+    )
+  }
+
+  render() {
+    return (
+      <div className="glossaryNav">
+        { this.renderAlphaLinks() }
+      </div>
+    )
+  }
+}

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

@@ -1,165 +1,156 @@
-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 from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
+import { withStyles } from '@material-ui/core/styles'
+import Tooltip from '@material-ui/core/Tooltip'
+import PropTypes from 'prop-types'
+import React from 'react'
+
 function arrowGenerator(color) {
   return {
     '&[x-placement*="bottom"] $arrow': {
-      top: 0,
-      left: 0,
-      marginTop: '-0.95em',
-      width: '3em',
-      height: '1em',
+      'top': 0,
+      'left': 0,
+      'marginTop': '-0.95em',
+      'width': '3em',
+      'height': '1em',
       '&::before': {
         borderWidth: '0 1em 1em 1em',
-        borderColor: "transparent transparent ".concat(color, " transparent")
-      }
+        borderColor: `transparent transparent ${color} transparent`,
+      },
     },
     '&[x-placement*="top"] $arrow': {
-      bottom: 0,
-      left: 0,
-      marginBottom: '-0.95em',
-      width: '3em',
-      height: '1em',
+      'bottom': 0,
+      'left': 0,
+      'marginBottom': '-0.95em',
+      'width': '3em',
+      'height': '1em',
       '&::before': {
         borderWidth: '1em 1em 0 1em',
-        borderColor: "".concat(color, " transparent transparent transparent")
-      }
+        borderColor: `${color} transparent transparent transparent`,
+      },
     },
     '&[x-placement*="right"] $arrow': {
-      left: 0,
-      marginLeft: '-0.95em',
-      height: '3em',
-      width: '1em',
+      'left': 0,
+      'marginLeft': '-0.95em',
+      'height': '3em',
+      'width': '1em',
       '&::before': {
         borderWidth: '1em 1em 1em 0',
-        borderColor: "transparent ".concat(color, " transparent transparent")
-      }
+        borderColor: `transparent ${color} transparent transparent`,
+      },
     },
     '&[x-placement*="left"] $arrow': {
-      right: 0,
-      marginRight: '-0.95em',
-      height: '3em',
-      width: '1em',
+      'right': 0,
+      'marginRight': '-0.95em',
+      'height': '3em',
+      'width': '1em',
       '&::before': {
         borderWidth: '1em 0 1em 1em',
-        borderColor: "transparent transparent transparent ".concat(color)
-      }
-    }
-  };
+        borderColor: `transparent transparent transparent ${color}`,
+      },
+    },
+  }
 }
-var styles = function styles(theme) {
+
+function styles(theme) {
   return {
     button: {
-      margin: theme.spacing()
+      margin: theme.spacing(),
     },
     lightTooltip: {
       backgroundColor: theme.palette.common.white,
       color: 'rgba(0, 0, 0, 0.87)',
       boxShadow: theme.shadows[1],
-      fontSize: 11
+      fontSize: 11,
     },
     arrowPopper: arrowGenerator(theme.palette.grey[700]),
     arrow: {
-      position: 'absolute',
-      fontSize: 6,
-      width: '3em',
-      height: '3em',
+      'position': 'absolute',
+      'fontSize': 6,
+      'width': '3em',
+      'height': '3em',
       '&::before': {
         content: '""',
         margin: 'auto',
         display: 'block',
         width: 0,
         height: 0,
-        borderStyle: 'solid'
-      }
+        borderStyle: 'solid',
+      },
     },
     bootstrapPopper: arrowGenerator(theme.palette.common.black),
     bootstrapTooltip: {
-      backgroundColor: theme.palette.common.black
+      backgroundColor: theme.palette.common.black,
     },
     bootstrapPlacementLeft: {
-      margin: '0 8px'
+      margin: '0 8px',
     },
     bootstrapPlacementRight: {
-      margin: '0 8px'
+      margin: '0 8px',
     },
     bootstrapPlacementTop: {
-      margin: '8px 0'
+      margin: '8px 0',
     },
     bootstrapPlacementBottom: {
-      margin: '8px 0'
+      margin: '8px 0',
     },
     htmlPopper: arrowGenerator('#dadde9'),
     htmlTooltip: {
-      backgroundColor: '#f5f5f9',
-      color: 'rgba(0, 0, 0, 0.87)',
-      maxWidth: 220,
-      fontSize: theme.typography.pxToRem(12),
-      border: '1px solid #dadde9',
+      'backgroundColor': '#f5f5f9',
+      'color': 'rgba(0, 0, 0, 0.87)',
+      'maxWidth': 220,
+      'fontSize': theme.typography.pxToRem(12),
+      'border': '1px solid #dadde9',
       '& b': {
-        fontWeight: theme.typography.fontWeightMedium
-      }
-    }
-  };
-};
-var CustomizedTooltips = /*#__PURE__*/function (_React$Component) {
-  _inherits(CustomizedTooltips, _React$Component);
-  var _super = _createSuper(CustomizedTooltips);
-  function CustomizedTooltips() {
-    var _this;
-    _classCallCheck(this, CustomizedTooltips);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.state = {
-      arrowRef: null
-    };
-    _this.handleArrowRef = function (node) {
-      _this.setState({
-        arrowRef: node
-      });
-    };
-    return _this;
+        fontWeight: theme.typography.fontWeightMedium,
+      },
+    },
+  }
+}
+
+class CustomizedTooltips extends React.Component {
+  state = {
+    arrowRef: null,
+  }
+
+  handleArrowRef = (node) => {
+    this.setState({
+      arrowRef: node,
+    })
   }
-  _createClass(CustomizedTooltips, [{
-    key: "render",
-    value: function render() {
-      var classes = this.props.classes;
-      return /*#__PURE__*/React.createElement(Tooltip, {
-        classes: {
+
+  render() {
+    const { classes } = this.props
+
+    return (
+      <Tooltip
+        classes={{
           popper: classes.htmlPopper,
-          tooltip: classes.htmlTooltip
-        },
-        PopperProps: {
+          tooltip: classes.htmlTooltip,
+        }}
+        PopperProps={{
           popperOptions: {
             modifiers: {
               arrow: {
                 enabled: Boolean(this.state.arrowRef),
-                element: this.state.arrowRef
-              }
-            }
-          }
-        },
-        title: /*#__PURE__*/React.createElement(React.Fragment, null, this.props.htmlFragment, /*#__PURE__*/React.createElement("span", {
-          className: classes.arrow,
-          ref: this.handleArrowRef
-        }))
-      }, this.props.inner);
-    }
-  }]);
-  return CustomizedTooltips;
-}(React.Component);
-export default withStyles(styles)(CustomizedTooltips);
+                element: this.state.arrowRef,
+              },
+            },
+          },
+        }}
+        title={(
+          <>
+            { this.props.htmlFragment }
+            <span className={classes.arrow} ref={this.handleArrowRef} />
+          </>
+        )}
+      >
+        { this.props.inner }
+      </Tooltip>
+    )
+  }
+}
+
+CustomizedTooltips.propTypes = {
+  classes: PropTypes.object.isRequired,
+}
+
+export default withStyles(styles)(CustomizedTooltips)

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

@@ -1,98 +1,71 @@
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import withWidth from '@material-ui/core/withWidth';
-import { createBrowserHistory } from 'history';
-import React, { useEffect, useRef, useState } from 'react';
-import { connect, Provider } from 'react-redux';
-import { HashRouter, Route, Navigate, Routes } from 'react-router-dom';
-import DocumentView from './DocumentView';
-import RouteListener from './RouteListener';
-var DiploMatic = function DiploMatic(props) {
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    containerWidth = _useState2[0],
-    setContainerWidth = _useState2[1];
-  var _useState3 = useState('min(100%, 100dvh'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    containerHeight = _useState4[0],
-    setContainerHeight = _useState4[1];
-  var containerRef = useRef(null);
-  useEffect(function () {
-    var history = createBrowserHistory();
-    history.listen(function () {
-      window.scrollTo(0, 0);
-    });
-  }, []);
-  useEffect(function () {
+import withWidth from '@material-ui/core/withWidth'
+import { createBrowserHistory } from 'history'
+import PropTypes from 'prop-types'
+import React, { useEffect, useRef, useState } from 'react'
+import { connect, Provider } from 'react-redux'
+import {
+  HashRouter,
+  Navigate,
+  Route,
+  Routes,
+} from 'react-router-dom'
+import DocumentView from './DocumentView'
+import RouteListener from './RouteListener'
+
+function DiploMatic(props) {
+  const [containerWidth, setContainerWidth] = useState(0)
+  const [containerHeight, setContainerHeight] = useState('min(100%, 100dvh')
+  const containerRef = useRef(null)
+  useEffect(() => {
+    const history = createBrowserHistory()
+    history.listen(() => {
+      window.scrollTo(0, 0)
+    })
+  }, [])
+
+  useEffect(() => {
     if (containerRef.current) {
-      setContainerWidth(containerRef.current.offsetWidth);
-      if (containerRef.current.clientHeight == 0) {
-        setContainerHeight('100dvh');
+      setContainerWidth(containerRef.current.offsetWidth)
+      if (containerRef.current.clientHeight === 0) {
+        setContainerHeight('100dvh')
       }
     }
-  }, [containerRef]);
-  var fixedFrameMode = props.diplomatic.fixedFrameMode;
-  var fixedFrameModeClass = fixedFrameMode ? 'editioncrafter' : 'editioncrafter sticky';
-  return /*#__PURE__*/React.createElement(Provider, {
-    store: props.store
-  }, /*#__PURE__*/React.createElement(HashRouter, null, /*#__PURE__*/React.createElement("div", {
-    id: "diplomatic",
-    className: fixedFrameModeClass,
-    ref: containerRef,
-    style: {
-      height: containerHeight
-    }
-  }, /*#__PURE__*/React.createElement(RouteListener, null), /*#__PURE__*/React.createElement("div", {
-    id: "content",
-    style: {
-      height: '100%'
-    }
-  }, /*#__PURE__*/React.createElement(Routes, null, /*#__PURE__*/React.createElement(Route, {
-    path: "/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2/:folioID3/:transcriptionType3",
-    element: /*#__PURE__*/React.createElement(DocumentView, Object.assign({}, props, {
-      containerWidth: containerWidth
-    })),
-    exact: true
-  }), /*#__PURE__*/React.createElement(Route, {
-    path: "/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2",
-    element: /*#__PURE__*/React.createElement(DocumentView, Object.assign({}, props, {
-      containerWidth: containerWidth
-    })),
-    exact: true
-  }), /*#__PURE__*/React.createElement(Route, {
-    path: "/ec/:folioID/:transcriptionType",
-    element: /*#__PURE__*/React.createElement(DocumentView, Object.assign({}, props, {
-      containerWidth: containerWidth
-    })),
-    exact: true
-  }), /*#__PURE__*/React.createElement(Route, {
-    path: "/ec/:folioID",
-    element: /*#__PURE__*/React.createElement(DocumentView, Object.assign({}, props, {
-      containerWidth: containerWidth
-    })),
-    exact: true
-  }), /*#__PURE__*/React.createElement(Route, {
-    path: "/ec",
-    element: /*#__PURE__*/React.createElement(DocumentView, Object.assign({}, props, {
-      containerWidth: containerWidth
-    })),
-    exact: true
-  }), /*#__PURE__*/React.createElement(Route, {
-    path: "/",
-    element: /*#__PURE__*/React.createElement(Navigate, {
-      to: "/ec"
-    }),
-    exact: true
-  }))))));
-};
+  }, [containerRef])
+
+  const { fixedFrameMode } = props.diplomatic
+  const fixedFrameModeClass = fixedFrameMode ? 'editioncrafter' : 'editioncrafter sticky'
+
+  return (
+    <Provider store={props.store}>
+      <HashRouter>
+        <div id="diplomatic" className={fixedFrameModeClass} ref={containerRef} style={{ height: containerHeight }}>
+          <RouteListener />
+          <div id="content" style={{ height: '100%' }}>
+            <Routes>
+              <Route path="/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2/:folioID3/:transcriptionType3" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
+              <Route path="/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
+              <Route path="/ec/:folioID/:transcriptionType" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
+              <Route path="/ec/:folioID" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
+              <Route path="/ec" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
+              <Route path="/" element={<Navigate to="/ec" />} exact />
+            </Routes>
+          </div>
+        </div>
+      </HashRouter>
+    </Provider>
+  )
+}
+
+DiploMatic.propTypes = {
+  store: PropTypes.isRequired,
+  config: PropTypes.isRequired,
+}
+
 function mapStateToProps(state) {
   return {
     diplomatic: state.diplomatic,
-    documentView: state.documentView
-  };
+    documentView: state.documentView,
+  }
 }
-export default withWidth()(connect(mapStateToProps)(DiploMatic));
+
+export default withWidth()(connect(mapStateToProps)(DiploMatic))