fix crash on transcriptions with ref attributes (#58)

editioncrafter/package.json

@@ -31,7 +31,7 @@
     "@recogito/annotorious-openseadragon": "^2.7.11",
     "axios": "^1.3.4",
     "history": "^5.3.0",
-    "html-react-parser": "^3.0.9",
+    "html-react-parser": "^4.2.2",
     "openseadragon": "^4.1.0",
     "prop-types": "^15.5.10",
     "react-icons": "^4.8.0",

editioncrafter/src/component/Parser.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import HtmlReactParser from 'html-react-parser';
+
+// This component addresses a conflict between React and
+// documents whose elements contain `ref` attributes.
+// Because we're parsing transcription contents as React
+// elements, migrating TranscriptionView to a function
+// component caused React to error about the ref attributes.
+
+// The short-term fix is to wrap this simple class component
+// around the parser.
+
+class Parser extends React.Component {
+  render() {
+    const { html, htmlToReactParserOptionsSide } = this.props;
+
+    return HtmlReactParser(html, htmlToReactParserOptionsSide);
+  }
+}
+
+export default Parser;

editioncrafter/src/component/TranscriptionView.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import Parser from 'html-react-parser';
 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';
@@ -140,7 +140,10 @@ const TranscriptionView = (props) => {
               className="surface grid-mode"
               style={surfaceStyle}
             >
-              {Parser(html, htmlToReactParserOptionsSide)}
+              <Parser
+                html={html}
+                htmlToReactParserOptionsSide={htmlToReactParserOptionsSide}
+              />
             </div>
           </ErrorBoundary>
         </div>