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

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

@@ -1,209 +1,220 @@
-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 React from 'react';
-import { connect } from 'react-redux';
-import { useSearchParams } from 'react-router-dom';
-import Navigation from './Navigation';
-import Pagination from './Pagination';
-import Parser from './Parser';
-import EditorComment from './EditorComment';
-import ErrorBoundary from './ErrorBoundary';
-import Watermark from './Watermark';
-import { BigRingSpinner } from './RingSpinner';
-var addZoneStyle = function addZoneStyle(selectedZone, domNode, facses) {
+import React from 'react'
+import { connect } from 'react-redux'
+import { useSearchParams } from 'react-router-dom'
+import EditorComment from './EditorComment'
+import ErrorBoundary from './ErrorBoundary'
+import Navigation from './Navigation'
+import Pagination from './Pagination'
+import Parser from './Parser'
+import { BigRingSpinner } from './RingSpinner'
+import Watermark from './Watermark'
+
+function addZoneStyle(selectedZone, domNode, facses) {
   if (facses.includes(selectedZone)) {
     // Keep any classes that might already be set
     if (domNode.attribs.classname) {
-      domNode.attribs.classname += ' selected-zone';
-    } else {
-      domNode.attribs.classname = 'selected-zone';
+      domNode.attribs.classname += ' selected-zone'
+    }
+    else {
+      domNode.attribs.classname = 'selected-zone'
     }
   }
-  return domNode;
-};
-var setUpForZoneHighlighting = function setUpForZoneHighlighting(selectedZone, domNode) {
+
+  return domNode
+}
+
+function setUpForZoneHighlighting(selectedZone, domNode) {
   if (selectedZone && domNode.attribs['data-facs']) {
     // The facs field can contain multiple values
-    var facses = domNode.attribs['data-facs'].split(' ');
-    return addZoneStyle(selectedZone, domNode, facses);
+    const facses = domNode.attribs['data-facs'].split(' ')
+
+    return addZoneStyle(selectedZone, domNode, facses)
   }
-  return domNode;
-};
-var htmlToReactParserOptions = function htmlToReactParserOptions(selectedZone) {
-  var parserOptions = {
-    replace: function replace(domNode) {
+
+  return domNode
+}
+
+function htmlToReactParserOptions(selectedZone) {
+  const parserOptions = {
+    replace(domNode) {
       switch (domNode.name) {
-        case 'tei-line':
-          {
-            console.log(domNode.attribs['data-facs']);
-            return setUpForZoneHighlighting(selectedZone, domNode);
-          }
-        case 'tei-surface':
-          {
-            return setUpForZoneHighlighting(selectedZone, domNode);
-          }
-        case 'tei-note':
-          {
-            var _domNode$children$;
-            var text = ((_domNode$children$ = domNode.children[0]) === null || _domNode$children$ === void 0 ? void 0 : _domNode$children$.data) || '';
-            var id = domNode.attribs.n || domNode.attribs.id;
-
-            // Not sure what else to do if there's no ID
-            if (!id) {
-              return domNode;
-            }
-            return /*#__PURE__*/React.createElement(EditorComment, {
-              commentID: id,
-              text: text
-            });
-          }
-        case 'tei-figure':
-          {
-            var _graphicEl$attribs, _descEl$children$;
-            var graphicEl = domNode.children.find(function (ch) {
-              return ch.name === 'tei-graphic';
-            });
-            var src = graphicEl === null || graphicEl === void 0 ? void 0 : (_graphicEl$attribs = graphicEl.attribs) === null || _graphicEl$attribs === void 0 ? void 0 : _graphicEl$attribs.url;
-            if (!src) {
-              return domNode;
-            }
-            var descEl = domNode.children.find(function (ch) {
-              return ch.name === 'tei-figdesc';
-            });
-            var desc = descEl === null || descEl === void 0 ? void 0 : (_descEl$children$ = descEl.children[0]) === null || _descEl$children$ === void 0 ? void 0 : _descEl$children$.data;
-            return /*#__PURE__*/React.createElement("figure", {
-              className: "inline-figure"
-            }, /*#__PURE__*/React.createElement("img", {
-              src: src,
-              alt: desc || '',
-              className: "inline-image"
-            }), desc ? /*#__PURE__*/React.createElement("figcaption", null, desc) : null);
+        case 'tei-line': {
+          return setUpForZoneHighlighting(selectedZone, domNode)
+        }
+        case 'tei-surface': {
+          return setUpForZoneHighlighting(selectedZone, domNode)
+        }
+        case 'tei-note': {
+          const text = domNode.children[0]?.data || ''
+          const id = domNode.attribs.n || domNode.attribs.id
+
+          // Not sure what else to do if there's no ID
+          if (!id) {
+            return domNode
           }
-        case 'div':
-          {
-            return setUpForZoneHighlighting(selectedZone, domNode);
+
+          return (
+            <EditorComment commentID={id} text={text} />
+          )
+        }
+        case 'tei-figure': {
+          const graphicEl = domNode.children.find(ch => ch.name === 'tei-graphic')
+          const src = graphicEl?.attribs?.url
+          if (!src) {
+            return domNode
           }
+
+          const descEl = domNode.children.find(ch => ch.name === 'tei-figdesc')
+          const desc = descEl?.children[0]?.data
+          return (
+            <figure className="inline-figure">
+              <img src={src} alt={desc || ''} className="inline-image" />
+              { desc ? <figcaption>{desc}</figcaption> : null }
+            </figure>
+          )
+        }
+
+        case 'div': {
+          return setUpForZoneHighlighting(selectedZone, domNode)
+        }
+
         default:
           /* Otherwise, Just pass through */
-          return domNode;
+          return domNode
       }
-    }
-  };
-  return parserOptions;
-};
-var TranscriptionView = function TranscriptionView(props) {
-  var _useSearchParams = useSearchParams(),
-    _useSearchParams2 = _slicedToArray(_useSearchParams, 1),
-    searchParams = _useSearchParams2[0];
-  var side = props.side,
-    folioID = props.folioID,
-    transcriptionType = props.transcriptionType,
-    document = props.document,
-    documentView = props.documentView,
-    documentViewActions = props.documentViewActions;
+    },
+  }
+  return parserOptions
+}
+
+function TranscriptionView(props) {
+  const [searchParams] = useSearchParams()
+
+  const {
+    side,
+    folioID,
+    transcriptionType,
+    document,
+    documentView,
+    documentViewActions,
+  } = props
+
   if (folioID === '-1') {
-    console.log('no folio');
-    return /*#__PURE__*/React.createElement(Watermark, {
-      documentView: documentView,
-      documentViewActions: documentViewActions,
-      side: side
-    });
+    return (
+      <Watermark
+        documentView={documentView}
+        documentViewActions={documentViewActions}
+        side={side}
+      />
+    )
   }
-  var folio = document.folioIndex[folioID];
+
+  const folio = document.folioIndex[folioID]
+
   if (folio && !folio.loading && !folio.transcription) {
-    return /*#__PURE__*/React.createElement(Watermark, {
-      documentView: documentView,
-      documentViewActions: documentViewActions,
-      side: side
-    });
+    return (
+      <Watermark
+        documentView={documentView}
+        documentViewActions={documentViewActions}
+        side={side}
+      />
+    )
   }
-  var transcriptionData = folio && folio.transcription && folio.transcription[transcriptionType];
+  const transcriptionData = folio && folio.transcription && folio.transcription[transcriptionType]
+
   if (folio && !folio.loading && !transcriptionData) {
-    console.log('no transcription data');
-    return /*#__PURE__*/React.createElement(Watermark, {
-      documentView: documentView,
-      documentViewActions: documentViewActions,
-      side: side
-    });
+    return (
+      <Watermark
+        documentView={documentView}
+        documentViewActions={documentViewActions}
+        side={side}
+      />
+    )
   }
 
   // Configure parser to replace certain tags with components
-  var htmlToReactParserOptionsSide = htmlToReactParserOptions(searchParams.get('zone'));
-  var html = transcriptionData && transcriptionData.html;
-  var layout = transcriptionData && transcriptionData.layout;
+  const htmlToReactParserOptionsSide = htmlToReactParserOptions(searchParams.get('zone'))
+  const html = transcriptionData && transcriptionData.html
+  const layout = transcriptionData && transcriptionData.layout
+
   if (folio && !folio.loading && !html) {
-    console.log('no html');
-    return /*#__PURE__*/React.createElement(Watermark, {
-      documentView: documentView,
-      documentViewActions: documentViewActions,
-      side: side
-    });
+    return (
+      <Watermark
+        documentView={documentView}
+        documentViewActions={documentViewActions}
+        side={side}
+      />
+    )
   }
+
   if (folio && folio.loading) {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Navigation, {
-      side: side,
-      documentView: documentView,
-      documentViewActions: documentViewActions,
-      documentName: document.variorum && folio.doc_id
-    }), /*#__PURE__*/React.createElement(Pagination, {
-      side: side,
-      documentView: documentView,
-      documentViewActions: documentViewActions
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "transcriptionViewComponent"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "transcriptContent"
-    }, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(BigRingSpinner, {
-      delay: 3000,
-      color: "dark"
-    })))), /*#__PURE__*/React.createElement(Pagination, {
-      side: side,
-      documentView: documentView,
-      documentViewActions: documentViewActions,
-      bottom: true
-    }));
+    return (
+      <div>
+        <Navigation
+          side={side}
+          documentView={documentView}
+          documentViewActions={documentViewActions}
+          documentName={document.variorum && folio.doc_id}
+        />
+        <Pagination side={side} documentView={documentView} documentViewActions={documentViewActions} />
+        <div className="transcriptionViewComponent">
+          <div className="transcriptContent">
+            <ErrorBoundary>
+              <BigRingSpinner delay={3000} color="dark" />
+            </ErrorBoundary>
+          </div>
+        </div>
+
+        <Pagination
+          side={side}
+          documentView={documentView}
+          documentViewActions={documentViewActions}
+          bottom
+        />
+      </div>
+    )
   }
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: "relative",
-      overflow: "auto"
-    }
-  }, /*#__PURE__*/React.createElement(Navigation, {
-    side: side,
-    documentView: documentView,
-    documentViewActions: documentViewActions,
-    documentName: document.variorum && folio.doc_id
-  }), /*#__PURE__*/React.createElement(Pagination, {
-    side: side,
-    documentView: documentView,
-    documentViewActions: documentViewActions
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "transcriptionViewComponent"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "transcriptContent"
-  }, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement("div", {
-    className: "surface grid-mode",
-    style: {
-      gridTemplateAreas: layout
-    }
-  }, /*#__PURE__*/React.createElement(Parser, {
-    html: html,
-    htmlToReactParserOptionsSide: htmlToReactParserOptionsSide
-  }))))), /*#__PURE__*/React.createElement(Pagination, {
-    side: side,
-    documentView: documentView,
-    documentViewActions: documentViewActions,
-    bottom: true
-  }));
-};
+
+  return (
+    <div style={{ position: 'relative', overflow: 'auto' }}>
+      <Navigation
+        side={side}
+        documentView={documentView}
+        documentViewActions={documentViewActions}
+        documentName={document.variorum && folio.doc_id}
+      />
+      <Pagination side={side} documentView={documentView} documentViewActions={documentViewActions} />
+      <div className="transcriptionViewComponent">
+        <div className="transcriptContent">
+          <ErrorBoundary>
+            <div
+              className="surface grid-mode"
+              style={{ gridTemplateAreas: layout }}
+            >
+              <Parser
+                html={html}
+                htmlToReactParserOptionsSide={htmlToReactParserOptionsSide}
+              />
+            </div>
+          </ErrorBoundary>
+        </div>
+      </div>
+
+      <Pagination
+        side={side}
+        documentView={documentView}
+        documentViewActions={documentViewActions}
+        bottom
+      />
+    </div>
+  )
+}
+
 function mapStateToProps(state) {
   return {
     annotations: state.annotations,
-    document: state.document
-  };
+    document: state.document,
+  }
 }
-export default connect(mapStateToProps)(TranscriptionView);
+
+export default connect(mapStateToProps)(TranscriptionView)

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

@@ -1,30 +1,21 @@
-import React from 'react';
-import Navigation from './Navigation';
-import Pagination from './Pagination';
-var Watermark = function Watermark(_ref) {
-  var side = _ref.side,
-    documentView = _ref.documentView,
-    documentViewActions = _ref.documentViewActions;
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: "relative"
-    },
-    className: "watermarkContainer"
-  }, documentView.left.iiifShortID !== '-1' && documentView.right.iiifShortID !== '-1' ? /*#__PURE__*/React.createElement(Navigation, {
-    side: side,
-    documentView: documentView,
-    documentViewActions: documentViewActions
-  }) : null, /*#__PURE__*/React.createElement("div", {
-    className: "transcriptContent"
-  }, /*#__PURE__*/React.createElement(Pagination, {
-    side: side,
-    className: "pagination_upper",
-    documentView: documentView,
-    documentViewActions: documentViewActions
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "watermark"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: side !== 'third' ? "watermark_contents" : "third_pane_blank"
-  }))));
-};
-export default Watermark;
+import React from 'react'
+import Navigation from './Navigation'
+import Pagination from './Pagination'
+
+function Watermark({ side, documentView, documentViewActions }) {
+  return (
+    <div style={{ position: 'relative' }} className="watermarkContainer">
+      { documentView.left.iiifShortID !== '-1' && documentView.right.iiifShortID !== '-1'
+        ? <Navigation side={side} documentView={documentView} documentViewActions={documentViewActions} />
+        : null}
+      <div className="transcriptContent">
+        <Pagination side={side} className="pagination_upper" documentView={documentView} documentViewActions={documentViewActions} />
+        <div className="watermark">
+          <div className={side !== 'third' ? 'watermark_contents' : 'third_pane_blank'} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Watermark

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

@@ -1,87 +1,65 @@
-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 Navigation from './Navigation';
-import Pagination from './Pagination';
-import Watermark from './Watermark';
-var XMLView = /*#__PURE__*/function (_Component) {
-  _inherits(XMLView, _Component);
-  var _super = _createSuper(XMLView);
-  function XMLView() {
-    _classCallCheck(this, XMLView);
-    return _super.apply(this, arguments);
-  }
-  _createClass(XMLView, [{
-    key: "render",
-    value:
-    // RENDER
-    function render() {
-      var _this$props = this.props,
-        side = _this$props.side,
-        document = _this$props.document,
-        documentView = _this$props.documentView,
-        documentViewActions = _this$props.documentViewActions;
-      var thisClass = "xmlViewComponent ".concat(side);
-      var thisID = "xmlViewComponent_".concat(side);
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import Navigation from './Navigation'
+import Pagination from './Pagination'
+import Watermark from './Watermark'
+
+class XMLView extends Component {
+  // RENDER
+  render() {
+    const {
+      side,
+      document,
+      documentView,
+      documentViewActions,
+    } = this.props
 
-      // Retrofit - the folios are loaded asynchronously
-      var folioID = documentView[side].iiifShortID;
-      if (folioID === '-1') {
-        return /*#__PURE__*/React.createElement("div", {
-          className: "watermark"
-        }, /*#__PURE__*/React.createElement("div", {
-          className: "watermark_contents"
-        }));
-      }
-      var folio = document.folioIndex[folioID];
-      if (!folio.transcription) {
-        return /*#__PURE__*/React.createElement(Watermark, {
-          documentView: documentView,
-          documentViewActions: documentViewActions,
-          side: side
-        });
-      }
-      var transcriptionType = documentView[side].transcriptionType;
-      var transcriptionData = folio.transcription[transcriptionType];
-      var xmlContent = transcriptionData.xml;
-      return /*#__PURE__*/React.createElement("div", {
-        id: thisID,
-        className: thisClass,
-        style: {
-          position: "relative",
-          overflow: "auto"
-        }
-      }, /*#__PURE__*/React.createElement(Navigation, {
-        side: side,
-        documentView: documentView,
-        documentViewActions: documentViewActions,
-        documentName: document.variorum && folio.doc_id
-      }), /*#__PURE__*/React.createElement(Pagination, {
-        side: side,
-        className: "pagination_upper",
-        documentView: documentView,
-        documentViewActions: documentViewActions
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "xmlContentInner"
-      }, /*#__PURE__*/React.createElement("pre", null, xmlContent)));
+    const thisClass = `xmlViewComponent ${side}`
+    const thisID = `xmlViewComponent_${side}`
+
+    // Retrofit - the folios are loaded asynchronously
+    const folioID = documentView[side].iiifShortID
+    if (folioID === '-1') {
+      return (
+        <div className="watermark">
+          <div className="watermark_contents" />
+        </div>
+      )
     }
-  }]);
-  return XMLView;
-}(Component);
+
+    const folio = document.folioIndex[folioID]
+    if (!folio.transcription) {
+      return (
+        <Watermark
+          documentView={documentView}
+          documentViewActions={documentViewActions}
+          side={side}
+        />
+      )
+    }
+
+    const { transcriptionType } = documentView[side]
+    const transcriptionData = folio.transcription[transcriptionType]
+    const { xml: xmlContent } = transcriptionData
+
+    return (
+      <div id={thisID} className={thisClass} style={{ position: 'relative', overflow: 'auto' }}>
+        <Navigation side={side} documentView={documentView} documentViewActions={documentViewActions} documentName={document.variorum && folio.doc_id} />
+        <Pagination side={side} className="pagination_upper" documentView={documentView} documentViewActions={documentViewActions} />
+
+        <div className="xmlContentInner">
+          <pre>{xmlContent}</pre>
+        </div>
+
+      </div>
+    )
+  }
+}
+
 function mapStateToProps(state) {
   return {
-    document: state.document
-  };
+    document: state.document,
+  }
 }
-export default connect(mapStateToProps)(XMLView);
+
+export default connect(mapStateToProps)(XMLView)

package/dist/es/src/hooks/useIsWidthUp.js

@@ -1,7 +1,9 @@
-import { useTheme } from '@material-ui/core/styles';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
-var useIsWidthUp = function useIsWidthUp(breakpoint) {
-  var theme = useTheme();
-  return useMediaQuery(theme.breakpoints.up(breakpoint));
-};
-export default useIsWidthUp;
+import { useTheme } from '@material-ui/core/styles'
+import useMediaQuery from '@material-ui/core/useMediaQuery'
+
+function useIsWidthUp(breakpoint) {
+  const theme = useTheme()
+  return useMediaQuery(theme.breakpoints.up(breakpoint))
+}
+
+export default useIsWidthUp