Update annotation tags to avoid improperly nested HTML tags

ProjectMirador · Dec 13, 2023 · 40c9adc · 40c9adc
1 parent 7c0af08
commit 40c9adc
Showing 1 changed file with 11 additions and 8 deletions.
diff --git a/src/components/CanvasAnnotations.js b/src/components/CanvasAnnotations.js
@@ -95,14 +95,17 @@ export class CanvasAnnotations extends Component {
                 onMouseEnter={() => this.handleAnnotationHover(annotation)}
                 onMouseLeave={this.handleAnnotationBlur}
               >
-                <ListItemText primaryTypographyProps={{ variant: 'body2' }}>
-                  <SanitizedHtml ruleSet={htmlSanitizationRuleSet} htmlString={annotation.content} />
-                  <div>
-                    {annotation.tags.map((tag) => (
-                      <Chip size="small" variant="outlined" label={tag} id={tag} key={tag.toString()} />
-                    ))}
-                  </div>
-                </ListItemText>
+                <ListItemText
+                  primaryTypographyProps={{ variant: 'body2' }}
+                  primary={
+                    <SanitizedHtml ruleSet={htmlSanitizationRuleSet} htmlString={annotation.content} />
+                  }
+                  secondary={
+                    annotation.tags.map((tag) => (
+                      <Chip component="span" size="small" variant="outlined" label={tag} id={tag} key={tag.toString()} />
+                    ))
+                  }
+                />
               </MenuItem>
             </ScrollTo>
           ))}