Fix opening links in a new tab

src/sidepanel/details/linkify-new-tab.tsx

@@ -0,0 +1,23 @@
+import Linkify from 'react-linkify';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+/**
+ * A wrapper component that uses react-linkify to convert any plain text URLs
+ * within its children into clickable links that open in a new tab.
+ */
+export function LinkifyNewTab({children}: Props) {
+  return (
+    <Linkify
+      componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => (
+        <a href={decoratedHref} key={key} target="_blank" rel="noopener noreferrer">
+          {decoratedText}
+        </a>
+      )}
+    >
+      {children}
+    </Linkify>
+  );
+}

src/sidepanel/details/multiline-text.tsx

@@ -1,4 +1,4 @@
-import Linkify from 'react-linkify';
+import {LinkifyNewTab} from './linkify-new-tab';
 
 interface Props {
   lines: (React.ReactNode | string)[];
@@ -9,7 +9,7 @@ export function MultilineText(props: Props) {
     <>
       {props.lines.map((line, index) => (
         <div key={index}>
-          <Linkify properties={{target: '_blank'}}>{line}</Linkify>
+          <LinkifyNewTab>{line}</LinkifyNewTab>
           <br />
         </div>
       ))}

src/sidepanel/details/sources.tsx

@@ -1,8 +1,8 @@
 import {useIntl} from 'react-intl';
-import Linkify from 'react-linkify';
 import {List} from 'semantic-ui-react';
 import {formatDateOrRange} from '../../util/date_util';
 import {Source} from '../../util/gedcom_util';
+import {LinkifyNewTab} from './linkify-new-tab';
 
 interface Props {
   sources?: Source[];
@@ -20,14 +20,14 @@ export function Sources({sources}: Props) {
           <List.Icon verticalAlign="middle" name="circle" size="tiny" />
           <List.Content>
             <List.Header>
-              <Linkify properties={{target: '_blank'}}>
+              <LinkifyNewTab>
                 {[source.author, source.title, source.publicationInfo]
                   .filter((sourceElement) => !!sourceElement)
                   .join(', ')}
-              </Linkify>
+              </LinkifyNewTab>
             </List.Header>
             <List.Description>
-              <Linkify properties={{target: '_blank'}}>{source.page}</Linkify>
+              <LinkifyNewTab>{source.page}</LinkifyNewTab>
               {source.date && ` [${formatDateOrRange(source.date, intl)}]`}
             </List.Description>
           </List.Content>