ref opens new tab with createButton (Doenet#1932)

jaltekruse · Feb 27, 2023 · ff5bfe2 · ff5bfe2
1 parent a304b27
commit ff5bfe2
Showing 1 changed file with 14 additions and 10 deletions.
diff --git a/src/Viewer/renderers/ref.jsx b/src/Viewer/renderers/ref.jsx
@@ -16,7 +16,7 @@ import styled from 'styled-components';
 //     }
 //   `;
 
-const RefButton = styled.button `
+const RefButton = styled.button`
   position: relative;
   height: 24px;
   display: inline-block;
@@ -130,36 +130,40 @@ export default React.memo(function Ref(props) {
 
 
   if (SVs.createButton) {
-    if (externalUri) {
+    if (targetForATag === "_blank") {
       return <span id={id}><a name={id} />
-        <RefButton id={id + "_button"} onClick={() => window.location.href = url} disabled={SVs.disabled}>{SVs.linkText}</RefButton>
+        <RefButton id={id + "_button"} onClick={() => window.open(url, targetForATag)} disabled={SVs.disabled}>{SVs.linkText}</RefButton>
       </span>;
     } else {
       return <span id={id}><a name={id} />
         <RefButton id={id + "_button"} onClick={() => navigate(url)} disabled={SVs.disabled}>{SVs.linkText}</RefButton>
       </span>;
     }
-    
+
   } else {
     if (haveValidTarget) {
 
       if (externalUri || url === "#") {
         // for some reason, if url = "#", the <Link>, below, causes a refresh
         // as it removes the # from the url.  So we use a <a> directly in this case.
         console.log('first case');
-        return <a style={{color: 'var(--mainBlue)',
-          borderRadius: '5px'}} target={targetForATag} id={name} name={name} href={url} >{linkContent}</a>
+        return <a style={{
+          color: 'var(--mainBlue)',
+          borderRadius: '5px'
+        }} target={targetForATag} id={name} name={name} href={url} >{linkContent}</a>
 
       } else {
 
         let scrollAttribute = scrollableContainer === window ? "scrollY" : "scrollTop";
         let stateObj = { fromLink: true }
         Object.defineProperty(stateObj, 'previousScrollPosition', { get: () => scrollableContainer?.[scrollAttribute], enumerable: true });
         console.log('second case');
-        return <Link 
-        style={{color: 'var(--mainBlue)',
-        borderRadius: '5px'}}
-        target={targetForATag} id={id} name={id} to={url} state={stateObj} >{linkContent}</Link>
+        return <Link
+          style={{
+            color: 'var(--mainBlue)',
+            borderRadius: '5px'
+          }}
+          target={targetForATag} id={id} name={id} to={url} state={stateObj} >{linkContent}</Link>
 
       }
     } else {