Fix tei-note display on Bow in the Clouds (#66)

* partial fix for tei-note display issue * fix link styling on tei-ref
cu-mkp · Sep 22, 2023 · 8f8c4dc · 8f8c4dc
1 parent 5e3272a
commit 8f8c4dc
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 32 deletions.
diff --git a/editioncrafter/src/component/EditorComment.js b/editioncrafter/src/component/EditorComment.js
@@ -1,39 +1,34 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import Typography from '@material-ui/core/Typography';
 import Popper from '@material-ui/core/Popper';
 import Fade from '@material-ui/core/Fade';
 import Paper from '@material-ui/core/Paper';
 import Parser from 'html-react-parser';
 
-class EditorComment extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      anchorRef: null,
-      open: false,
-    };
-  }
+const EditorComment = (props) => {
+  const [anchorRef, setAnchorRef] = useState(null);
+  const [open, setOpen] = useState(false);
 
-  onOpen = event => {
-    this.setState({ anchorRef: event.currentTarget, open: true });
+  const onOpen = (event) => {
+    setAnchorRef(event.currentTarget);
+    setOpen(true);
   };
 
-  onClose = event => {
-    this.setState({ ...this.state, open: false });
+  const onClose = (event) => {
+    setOpen(false);
   };
 
-  renderPopper() {
-    const { anchorRef, open } = this.state;
-    const interpreted = Parser(this.props.text);
-    const content = interpreted || `ERROR: Could not find comment for id: ${this.props.commentID}.`;
+  const renderPopper = () => {
+    const interpreted = Parser(props.text);
+    const content = interpreted || `ERROR: Could not find comment for id: ${props.commentID}.`;
     const style = { maxWidth: 200, padding: '25px 15px 15px 15px' };
     const closeXStyle = { float: 'right', padding: 5, fontStyle: 'bold' };
 
     return (
-      <Popper id={this.props.commentID} open={open} anchorEl={anchorRef}>
+      <Popper id={props.commentID} open={open} anchorEl={anchorRef}>
         <Fade in={open}>
           <Paper className="editor-comment-content">
-            <div onClick={this.onClose} style={closeXStyle}>
+            <div onClick={onClose} style={closeXStyle}>
               <span className="fa fa-window-close" />
             </div>
             <Typography style={style}>{content}</Typography>
@@ -43,16 +38,14 @@ class EditorComment extends Component {
     );
   }
 
-  render() {
-    const style = { display: 'inline' };
-    const asteriskStyle = { fontStyle: 'bold', fontSize: '18pt', color: 'red' };
-    return (
-      <div style={style}>
-        <span onClick={(e) => this.onOpen(e)} style={asteriskStyle}>*</span>
-        {this.renderPopper()}
-      </div>
-    );
-  }
+  const style = { display: 'inline' };
+  const asteriskStyle = { fontStyle: 'bold', fontSize: '18pt', color: 'red' };
+  return (
+    <div style={style}>
+      <span onClick={(e) => onOpen(e)} style={asteriskStyle}>*</span>
+      {renderPopper()}
+    </div>
+  );
 }
 
 export default EditorComment;
diff --git a/editioncrafter/src/component/TranscriptionView.js b/editioncrafter/src/component/TranscriptionView.js
@@ -45,7 +45,7 @@ const htmlToReactParserOptions = (selectedZone) => {
         }
         case 'tei-note': {
           const text = domNode.children[0]?.data || '';
-          const id = domNode.attribs.n;
+          const id = domNode.attribs.n || domNode.attribs.id;
 
           // Not sure what else to do if there's no ID
           if (!id) {

diff --git a/editioncrafter/src/scss/_CETEIcean.scss b/editioncrafter/src/scss/_CETEIcean.scss
@@ -674,8 +674,6 @@ tei-recordhist {
 }
 tei-ref {
   color: #5f0000;
-  text-decoration: underline;
-  cursor: pointer;
 }
 tei-remarks {
   font-weight: bold;