From ff03915dac2f1d74da4b0cec2e25434116e8089b Mon Sep 17 00:00:00 2001
From: Jennifer Chen <shinyi.chen@gmail.com>
Date: Mon, 22 Dec 2025 12:37:23 -0800
Subject: [PATCH 1/4] update the quick citation copy dropdown with most used
 formats

---
 src/api/export/types.ts                       | 14 +++++++++
 .../AbstractDetails/AbstractCitationModal.tsx | 30 +++++++++++++++----
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/api/export/types.ts b/src/api/export/types.ts
index 0480dcf37..2859d6844 100644
--- a/src/api/export/types.ts
+++ b/src/api/export/types.ts
@@ -30,6 +30,20 @@ export enum ExportApiFormatKey {
   votable = 'votable',
 }
 
+export const MostUsedExportFormats = [
+  ExportApiFormatKey.bibtex,
+  ExportApiFormatKey.agu,
+  ExportApiFormatKey.ris,
+  ExportApiFormatKey.aastex,
+  ExportApiFormatKey.endnote,
+  ExportApiFormatKey.ieee,
+  ExportApiFormatKey.mnras,
+  ExportApiFormatKey.icarus,
+  ExportApiFormatKey.soph,
+  ExportApiFormatKey.procite,
+  ExportApiFormatKey.refworks,
+];
+
 export enum ExportApiErrorKey {
   NO_RESULT = 'no result from solr',
   QUERY_ISSUE = 'unable to query solr',
diff --git a/src/components/AbstractDetails/AbstractCitationModal.tsx b/src/components/AbstractDetails/AbstractCitationModal.tsx
index ca03e40bd..2f9239023 100644
--- a/src/components/AbstractDetails/AbstractCitationModal.tsx
+++ b/src/components/AbstractDetails/AbstractCitationModal.tsx
@@ -1,5 +1,5 @@
 import { useGetExportCitation } from '@/api/export/export';
-import { ExportApiFormatKey } from '@/api/export/types';
+import { ExportApiFormatKey, MostUsedExportFormats } from '@/api/export/types';
 import { useExportFormats } from '@/lib/useExportFormats';
 import { useSettings } from '@/lib/useSettings';
 import { parseAPIError } from '@/utils/common/parseAPIError';
@@ -16,11 +16,13 @@ import {
   AlertTitle,
   AlertDescription,
   Flex,
+  Textarea,
 } from '@chakra-ui/react';
 import { useState } from 'react';
 import { SimpleCopyButton } from '../CopyButton';
 import { LoadingMessage } from '../Feedbacks';
 import { Select } from '../Select';
+import { SimpleLink } from '../SimpleLink';
 
 export const AbstractCitationModal = ({
   isOpen,
@@ -35,7 +37,7 @@ export const AbstractCitationModal = ({
 
   const { formatOptions, getFormatOptionById } = useExportFormats();
 
-  const options = formatOptions.filter((o) => o.type === 'HTML');
+  const options = formatOptions.filter((o) => o.type === 'HTML' || MostUsedExportFormats.includes(o.id));
 
   const defaultOption = settings.defaultCitationFormat
     ? getFormatOptionById(settings.defaultCitationFormat)
@@ -68,6 +70,11 @@ export const AbstractCitationModal = ({
             onChange={(o) => setSelectedOption(o)}
             stylesTheme="default.sm"
           />
+          <Flex justifyContent="end" my={1}>
+            <SimpleLink href={`/abs/${bibcode}/exportcitation/bibtex`} fontSize="sm" fontWeight="bold">
+              Advanced options
+            </SimpleLink>
+          </Flex>
           <Box my={6}>
             {isLoading ? (
               <LoadingMessage message="Loading" />
@@ -79,10 +86,21 @@ export const AbstractCitationModal = ({
               </Alert>
             ) : (
               <>
-                <Box fontSize="sm" fontWeight="medium" dangerouslySetInnerHTML={{ __html: data.export }} />
-                <Flex justifyContent="end">
-                  <SimpleCopyButton text={data.export} variant="outline" size="xs" asHtml />
-                </Flex>
+                {selectedOption.type === 'HTML' ? (
+                  <>
+                    <Box fontSize="sm" fontWeight="medium" dangerouslySetInnerHTML={{ __html: data.export }} />
+                    <Flex justifyContent="end">
+                      <SimpleCopyButton text={data.export} variant="outline" size="xs" asHtml />
+                    </Flex>
+                  </>
+                ) : (
+                  <>
+                    <Textarea value={data.export} fontSize="sm" fontWeight="medium" mb={2} h={150} />
+                    <Flex justifyContent="end">
+                      <SimpleCopyButton text={data.export} variant="outline" size="xs" />
+                    </Flex>
+                  </>
+                )}
               </>
             )}
           </Box>

From 2f1519a36a8712dd989bc20d68a6914e566833f0 Mon Sep 17 00:00:00 2001
From: Jennifer Chen <shinyi.chen@gmail.com>
Date: Mon, 22 Dec 2025 12:37:53 -0800
Subject: [PATCH 2/4] fix copy to clipboard

---
 src/components/CopyButton/CopyButton.tsx | 58 +++++++++++++++++-------
 1 file changed, 42 insertions(+), 16 deletions(-)

diff --git a/src/components/CopyButton/CopyButton.tsx b/src/components/CopyButton/CopyButton.tsx
index c630855bb..012a9e7b2 100644
--- a/src/components/CopyButton/CopyButton.tsx
+++ b/src/components/CopyButton/CopyButton.tsx
@@ -1,7 +1,6 @@
 import { CheckIcon, CopyIcon } from '@chakra-ui/icons';
 import { Button, ButtonProps, IconButton, MenuItem, MenuItemProps, useClipboard } from '@chakra-ui/react';
 import { ReactElement, useEffect, useState } from 'react';
-import CopyToClipboard from 'react-copy-html-to-clipboard';
 
 export interface ICopyButtonProps extends ButtonProps {
   text: string;
@@ -13,6 +12,24 @@ export interface ICopyButtonProps extends ButtonProps {
 
 const DEFAULT_TIMEOUT = 1500;
 
+const copyPlainTextToClipboard = (text: string) => {
+  navigator.clipboard.writeText(text);
+};
+
+const copyHtmlToClipboard = (html: string) => {
+  const blobHtml = new Blob([html], { type: 'text/html' });
+  const blobText = new Blob([html.replace(/<[^>]+>/g, '')], {
+    type: 'text/plain',
+  });
+
+  const item = new ClipboardItem({
+    'text/html': blobHtml,
+    'text/plain': blobText,
+  });
+
+  navigator.clipboard.write([item]);
+};
+
 export const SimpleCopyButton = (props: ICopyButtonProps): ReactElement => {
   const { text, onCopyComplete, timeout = DEFAULT_TIMEOUT, asHtml = false, ...rest } = props;
 
@@ -28,13 +45,18 @@ export const SimpleCopyButton = (props: ICopyButtonProps): ReactElement => {
     }
   }, [hasCopied]);
 
-  const handleCopied = () => {
+  const handleCopied = (asHtml: boolean) => {
+    if (asHtml) {
+      copyHtmlToClipboard(text);
+    } else {
+      copyPlainTextToClipboard(text);
+    }
     setHasCopied(true);
     onCopyComplete?.();
   };
 
   return (
-    <CopyToClipboard text={text} onCopy={handleCopied} options={{ asHtml: asHtml }}>
+    <>
       {hasCopied ? (
         <IconButton aria-label="copied" icon={<CheckIcon />} variant="link" color="green.500" {...rest} />
       ) : (
@@ -42,11 +64,11 @@ export const SimpleCopyButton = (props: ICopyButtonProps): ReactElement => {
           icon={<CopyIcon />}
           variant="link"
           aria-label="copy to clipboard"
-          onClick={handleCopied}
+          onClick={() => handleCopied(asHtml)}
           {...rest}
         />
       )}
-    </CopyToClipboard>
+    </>
   );
 };
 
@@ -64,22 +86,26 @@ export const LabeledCopyButton = (props: ICopyButtonProps & { label: string }):
     }
   }, [hasCopied]);
 
-  const handleCopied = () => {
+  const handleCopied = (asHtml: boolean) => {
+    if (asHtml) {
+      copyHtmlToClipboard(text);
+    } else {
+      copyPlainTextToClipboard(text);
+    }
     setHasCopied(true);
     onCopyComplete?.();
   };
 
   return (
-    <CopyToClipboard text={text} onCopy={handleCopied} options={{ asHtml: asHtml }}>
-      <Button
-        variant="link"
-        aria-label="copy to clipboard"
-        {...(iconPos === 'left' ? { leftIcon: <CopyIcon /> } : { rightIcon: <CopyIcon /> })}
-        {...rest}
-      >
-        {hasCopied ? 'Copied to clipboard!' : label}
-      </Button>
-    </CopyToClipboard>
+    <Button
+      variant="link"
+      aria-label="copy to clipboard"
+      onClick={() => handleCopied(asHtml)}
+      {...(iconPos === 'left' ? { leftIcon: <CopyIcon /> } : { rightIcon: <CopyIcon /> })}
+      {...rest}
+    >
+      {hasCopied ? 'Copied to clipboard!' : label}
+    </Button>
   );
 };
 

From 05830b029cd63a4b1868777bfcfbe11264fb3b9a Mon Sep 17 00:00:00 2001
From: Jennifer Chen <shinyi.chen@gmail.com>
Date: Mon, 22 Dec 2025 15:25:13 -0800
Subject: [PATCH 3/4] update citation setting, copy citation menu item

---
 package.json                                  |  2 --
 pnpm-lock.yaml                                | 35 ------------------
 src/api/export/types.ts                       | 12 +++++--
 .../AbstractDetails/AbstractCitationModal.tsx |  2 +-
 src/components/CopyButton/CopyButton.tsx      | 36 ++++++++++++++-----
 .../Libraries/DocumentList/DocumentList.tsx   | 16 ++++-----
 .../ResultList/Item/ItemResourceDropdowns.tsx |  7 ++--
 .../ResultList/SimpleResultList.tsx           | 16 ++++-----
 .../Export/Tabs/QuickExportFormatTabPane.tsx  | 27 +++++++++-----
 src/lib/useExportFormats.ts                   |  6 ++--
 10 files changed, 75 insertions(+), 84 deletions(-)

diff --git a/package.json b/package.json
index eeaabe15e..f765555cd 100644
--- a/package.json
+++ b/package.json
@@ -103,8 +103,6 @@
     "ramda-adjunct": "^3.3.0",
     "react": "^18.3.1",
     "react-compound-slider": "^3.4.0",
-    "react-copy-html-to-clipboard": "^6.0.4",
-    "react-copy-to-clipboard": "^5.1.0",
     "react-device-detect": "^2.2.3",
     "react-error-boundary": "^4.0.4",
     "react-google-recaptcha-v3": "^1.10.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c20e3f16c..8e3aad65a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -206,12 +206,6 @@ importers:
       react-compound-slider:
         specifier: ^3.4.0
         version: 3.4.0(react@18.3.1)
-      react-copy-html-to-clipboard:
-        specifier: ^6.0.4
-        version: 6.0.4(react@18.3.1)
-      react-copy-to-clipboard:
-        specifier: ^5.1.0
-        version: 5.1.0(react@18.3.1)
       react-device-detect:
         specifier: ^2.2.3
         version: 2.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -3266,9 +3260,6 @@ packages:
     resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
     engines: {node: '>=12.13'}
 
-  copy-html-to-clipboard@4.0.1:
-    resolution: {integrity: sha512-uvEr7smwMQReydH7XzSgpxM1SywZfxS+1NLhlSvzLIGz8esPbY248y1Tg7LTYsr/yVP/1kUyf8Ypgd9ljJJkBw==}
-
   copy-to-clipboard@3.3.3:
     resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
 
@@ -5307,16 +5298,6 @@ packages:
     peerDependencies:
       react: '>=16.9'
 
-  react-copy-html-to-clipboard@6.0.4:
-    resolution: {integrity: sha512-lUV84N9OiL3exfM+lK7XEN30xgK7XLRqAqcr+8m9ZtQ82xGUjT7fCWwvOS88YH/TaANqokWWZRtrgSMK1m8huw==}
-    peerDependencies:
-      react: ^15.3.0
-
-  react-copy-to-clipboard@5.1.0:
-    resolution: {integrity: sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==}
-    peerDependencies:
-      react: ^15.3.0 || 16 || 17 || 18
-
   react-device-detect@2.2.3:
     resolution: {integrity: sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==}
     peerDependencies:
@@ -9591,10 +9572,6 @@ snapshots:
     dependencies:
       is-what: 4.1.16
 
-  copy-html-to-clipboard@4.0.1:
-    dependencies:
-      toggle-selection: 1.0.6
-
   copy-to-clipboard@3.3.3:
     dependencies:
       toggle-selection: 1.0.6
@@ -11971,18 +11948,6 @@ snapshots:
       react: 18.3.1
       warning: 4.0.3
 
-  react-copy-html-to-clipboard@6.0.4(react@18.3.1):
-    dependencies:
-      copy-html-to-clipboard: 4.0.1
-      prop-types: 15.8.1
-      react: 18.3.1
-
-  react-copy-to-clipboard@5.1.0(react@18.3.1):
-    dependencies:
-      copy-to-clipboard: 3.3.3
-      prop-types: 15.8.1
-      react: 18.3.1
-
   react-device-detect@2.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       react: 18.3.1
diff --git a/src/api/export/types.ts b/src/api/export/types.ts
index 2859d6844..9950bc5ea 100644
--- a/src/api/export/types.ts
+++ b/src/api/export/types.ts
@@ -75,10 +75,16 @@ export interface IExportApiParams {
   keyformat?: [string];
   journalformat?: [ExportApiJournalFormat];
   maxauthor?: [number];
+  outputformat?: number;
 }
 
 export interface IExportApiResponse {
-  export: string;
-  msg: string;
-  error?: ExportApiErrorKey;
+  docs?: {
+    bibcode: string;
+    reference: string;
+  }[];
+  numFound?: number;
+  export?: string;
+  msg?: string;
+  error?: string;
 }
diff --git a/src/components/AbstractDetails/AbstractCitationModal.tsx b/src/components/AbstractDetails/AbstractCitationModal.tsx
index 2f9239023..ce4bd0f0b 100644
--- a/src/components/AbstractDetails/AbstractCitationModal.tsx
+++ b/src/components/AbstractDetails/AbstractCitationModal.tsx
@@ -37,7 +37,7 @@ export const AbstractCitationModal = ({
 
   const { formatOptions, getFormatOptionById } = useExportFormats();
 
-  const options = formatOptions.filter((o) => o.type === 'HTML' || MostUsedExportFormats.includes(o.id));
+  const options = formatOptions.filter((o) => MostUsedExportFormats.includes(o.id));
 
   const defaultOption = settings.defaultCitationFormat
     ? getFormatOptionById(settings.defaultCitationFormat)
diff --git a/src/components/CopyButton/CopyButton.tsx b/src/components/CopyButton/CopyButton.tsx
index 012a9e7b2..aeec29640 100644
--- a/src/components/CopyButton/CopyButton.tsx
+++ b/src/components/CopyButton/CopyButton.tsx
@@ -1,12 +1,15 @@
 import { CheckIcon, CopyIcon } from '@chakra-ui/icons';
-import { Button, ButtonProps, IconButton, MenuItem, MenuItemProps, useClipboard } from '@chakra-ui/react';
+import { Button, ButtonProps, IconButton, MenuItem, MenuItemProps } from '@chakra-ui/react';
 import { ReactElement, useEffect, useState } from 'react';
 
-export interface ICopyButtonProps extends ButtonProps {
+interface ICopyProps {
   text: string;
   onCopyComplete?: () => void;
   timeout?: number;
   asHtml?: boolean;
+}
+
+export interface ICopyButtonProps extends ICopyProps, ButtonProps {
   iconPos?: 'left' | 'right';
 }
 
@@ -109,16 +112,33 @@ export const LabeledCopyButton = (props: ICopyButtonProps & { label: string }):
   );
 };
 
-export const CopyMenuItem = (props: MenuItemProps & { label: string; text: string }): ReactElement => {
-  const { label, text, ...rest } = props;
-  const { onCopy, setValue } = useClipboard(text);
+export const CopyMenuItem = (props: MenuItemProps & ICopyProps & { label: string }): ReactElement => {
+  const { label, text, timeout = DEFAULT_TIMEOUT, onCopyComplete, asHtml = false, ...rest } = props;
+
+  const [hasCopied, setHasCopied] = useState(false);
 
   useEffect(() => {
-    setValue(text);
-  }, [text]);
+    if (hasCopied) {
+      const timeoutId = setTimeout(() => {
+        setHasCopied(false);
+      }, timeout);
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, [hasCopied]);
+
+  const handleCopied = (asHtml: boolean) => {
+    if (asHtml) {
+      copyHtmlToClipboard(text);
+    } else {
+      copyPlainTextToClipboard(text);
+    }
+    setHasCopied(true);
+    onCopyComplete?.();
+  };
 
   return (
-    <MenuItem onClick={onCopy} {...rest}>
+    <MenuItem onClick={() => handleCopied(asHtml)} {...rest}>
       {label} <CopyIcon mx={2} />
     </MenuItem>
   );
diff --git a/src/components/Libraries/DocumentList/DocumentList.tsx b/src/components/Libraries/DocumentList/DocumentList.tsx
index 13b128d39..ee17fb535 100644
--- a/src/components/Libraries/DocumentList/DocumentList.tsx
+++ b/src/components/Libraries/DocumentList/DocumentList.tsx
@@ -6,7 +6,6 @@ import { INote, LibraryIdentifier } from '@/api/biblib/types';
 import { IDocsEntity } from '@/api/search/types';
 import { useGetExportCitation } from '@/api/export/export';
 import { useSettings } from '@/lib/useSettings';
-import { logger } from '@/logger';
 
 export interface ISimpleResultListProps extends HTMLAttributes<HTMLDivElement> {
   library: LibraryIdentifier;
@@ -49,6 +48,7 @@ export const DocumentList = (props: ISimpleResultListProps): ReactElement => {
       format: defaultCitationFormat,
       bibcode: bibcodes,
       sort: ['bibcode asc'],
+      outputformat: 2,
     },
     { enabled: !!settings?.defaultCitationFormat },
   );
@@ -56,17 +56,13 @@ export const DocumentList = (props: ISimpleResultListProps): ReactElement => {
   // a map from bibcode to citation
   const defaultCitations = useMemo(() => {
     const citationSet = new Map<string, string>();
-    try {
-      if (!!citationData) {
-        citationData.export.split('\n').forEach((c, index) => {
-          citationSet.set(bibcodes[index], c);
-        });
-      }
-    } catch (err) {
-      logger.error({ err }, 'Error processing citation data');
+    if (!!citationData) {
+      citationData.docs.map((doc) => {
+        citationSet.set(doc.bibcode, doc.reference);
+      });
     }
     return citationSet;
-  }, [citationData, bibcodes]);
+  }, [citationData]);
 
   const start = indexStart + 1;
 
diff --git a/src/components/ResultList/Item/ItemResourceDropdowns.tsx b/src/components/ResultList/Item/ItemResourceDropdowns.tsx
index 4f38a52d9..36cefbd79 100644
--- a/src/components/ResultList/Item/ItemResourceDropdowns.tsx
+++ b/src/components/ResultList/Item/ItemResourceDropdowns.tsx
@@ -19,7 +19,7 @@ import { MouseEventHandler, ReactElement, useEffect } from 'react';
 import { SimpleLinkDropdown } from '@/components/Dropdown';
 import { isBrowser } from '@/utils/common/guards';
 import { IDocsEntity } from '@/api/search/types';
-import CopyToClipboard from 'react-copy-html-to-clipboard';
+import { CopyMenuItem } from '@/components/CopyButton';
 
 export interface IItemResourceDropdownsProps {
   doc: IDocsEntity;
@@ -303,10 +303,7 @@ export const ItemResourceDropdowns = ({ doc, defaultCitation }: IItemResourceDro
           />
           <MenuList>
             <MenuItem onClick={handleCopyAbstractUrl}>Copy URL</MenuItem>
-
-            <CopyToClipboard text={defaultCitation} onCopy={handleCitationCopied} options={{ asHtml: true }}>
-              <MenuItem>Copy Citation</MenuItem>
-            </CopyToClipboard>
+            <CopyMenuItem text={defaultCitation} onCopyComplete={handleCitationCopied} label="Copy Citation" asHtml />
           </MenuList>
         </Menu>
       </Tooltip>
diff --git a/src/components/ResultList/SimpleResultList.tsx b/src/components/ResultList/SimpleResultList.tsx
index 01275016a..5eb53e0e2 100644
--- a/src/components/ResultList/SimpleResultList.tsx
+++ b/src/components/ResultList/SimpleResultList.tsx
@@ -8,7 +8,6 @@ import { useHighlights } from './useHighlights';
 import { IDocsEntity } from '@/api/search/types';
 import { useGetExportCitation } from '@/api/export/export';
 import { useSettings } from '@/lib/useSettings';
-import { logger } from '@/logger';
 import { handleBoundaryError } from '@/lib/errorHandler';
 
 export interface ISimpleResultListProps extends HTMLAttributes<HTMLDivElement> {
@@ -79,6 +78,7 @@ export const SimpleResultList = (props: ISimpleResultListProps): ReactElement =>
       format: defaultCitationFormat,
       bibcode: bibcodes,
       sort: ['bibcode asc'],
+      outputformat: 2,
     },
     { enabled: !!settings?.defaultCitationFormat },
   );
@@ -86,17 +86,13 @@ export const SimpleResultList = (props: ISimpleResultListProps): ReactElement =>
   // a map from bibcode to citation
   const defaultCitations = useMemo(() => {
     const citationSet = new Map<string, string>();
-    try {
-      if (!!citationData) {
-        citationData.export.split('\n').forEach((c, index) => {
-          citationSet.set(bibcodes[index], c);
-        });
-      }
-    } catch (err) {
-      logger.error({ err }, 'Error processing citation data');
+    if (!!citationData) {
+      citationData.docs.map((doc) => {
+        citationSet.set(doc.bibcode, doc.reference);
+      });
     }
     return citationSet;
-  }, [citationData, bibcodes]);
+  }, [citationData]);
 
   return (
     <Flex
diff --git a/src/components/Settings/Export/Tabs/QuickExportFormatTabPane.tsx b/src/components/Settings/Export/Tabs/QuickExportFormatTabPane.tsx
index 54825ec0f..3882ddc9e 100644
--- a/src/components/Settings/Export/Tabs/QuickExportFormatTabPane.tsx
+++ b/src/components/Settings/Export/Tabs/QuickExportFormatTabPane.tsx
@@ -1,4 +1,4 @@
-import { Box, Stack, Text } from '@chakra-ui/react';
+import { Box, Stack, Text, Textarea } from '@chakra-ui/react';
 
 import { UserDataSetterEvent } from '@/pages/user/settings/export';
 import { Dispatch, useMemo } from 'react';
@@ -7,7 +7,8 @@ import { IDocsEntity } from '@/api/search/types';
 import { useGetExportCitation } from '@/api/export/export';
 import { Select } from '@/components/Select';
 import { ExportFormatOption, useExportFormats } from '@/lib/useExportFormats';
-import { ExportApiFormatKey } from '@/api/export/types';
+import { ExportApiFormatKey, MostUsedExportFormats } from '@/api/export/types';
+import { LoadingMessage } from '@/components/Feedbacks';
 
 export interface QuickExportFormatTabPaneProps {
   sampleBib: IDocsEntity['bibcode'];
@@ -17,9 +18,11 @@ export interface QuickExportFormatTabPaneProps {
 export const QuickExportFormatTabPane = ({ sampleBib, dispatch }: QuickExportFormatTabPaneProps) => {
   const { settings: userSettings } = useSettings({ suspense: false });
 
+  const { defaultCitationFormat } = userSettings;
+
   const { formatOptions } = useExportFormats();
 
-  const citationFormatOptions = formatOptions.filter((o) => o.type === 'HTML');
+  const citationFormatOptions = formatOptions.filter((o) => MostUsedExportFormats.includes(o.id));
 
   // default export format changed
   const handleApplyDefaulCitationFormat = (format: ExportFormatOption) => {
@@ -27,15 +30,13 @@ export const QuickExportFormatTabPane = ({ sampleBib, dispatch }: QuickExportFor
   };
 
   const defaultCitationFormatOpt = useMemo(() => {
-    const { defaultCitationFormat } = userSettings;
-
     return (
       citationFormatOptions.find((option) => option.id === defaultCitationFormat) ??
       citationFormatOptions.find((option) => option.id === ExportApiFormatKey.agu)
     );
-  }, [userSettings, citationFormatOptions]);
+  }, [defaultCitationFormat, citationFormatOptions]);
 
-  const { data } = useGetExportCitation({
+  const { data, isLoading } = useGetExportCitation({
     format: defaultCitationFormatOpt.id,
     bibcode: [sampleBib],
     maxauthor: [2000],
@@ -56,7 +57,17 @@ export const QuickExportFormatTabPane = ({ sampleBib, dispatch }: QuickExportFor
       <Text size="md" fontWeight="bold">
         Sample Format
       </Text>
-      <Box fontWeight="medium" dangerouslySetInnerHTML={{ __html: data?.export }} />
+      {isLoading ? (
+        <LoadingMessage message="Loading" />
+      ) : (
+        <>
+          {defaultCitationFormatOpt.type === 'HTML' ? (
+            <Box fontWeight="medium" dangerouslySetInnerHTML={{ __html: data?.export }} />
+          ) : (
+            <Textarea value={data.export} fontSize="sm" fontWeight="medium" mb={2} h={150} />
+          )}
+        </>
+      )}
     </Stack>
   );
 };
diff --git a/src/lib/useExportFormats.ts b/src/lib/useExportFormats.ts
index 0d19ec627..f4e1727df 100644
--- a/src/lib/useExportFormats.ts
+++ b/src/lib/useExportFormats.ts
@@ -1,5 +1,5 @@
 import { useGetExportFormats } from '@/api/export/export';
-import { ExportFormatsApiResponse, IExportFormat } from '@/api/export/types';
+import { ExportFormatsApiResponse, IExportFormat, MostUsedExportFormats } from '@/api/export/types';
 import { DEFAULT_EXPORT_FORMATS } from '@/components/CitationExporter';
 import { SelectOption } from '@/components/Select';
 import { UseQueryOptions } from '@tanstack/react-query';
@@ -67,7 +67,9 @@ export const useExportFormats = (options?: UseQueryOptions<ExportFormatsApiRespo
 
   const isValidCitationFormatId = useCallback(
     (id: string) => {
-      return typeof id === 'string' && formatOptions.findIndex((o) => o.id === id && o.type === 'HTML') > -1;
+      return (
+        typeof id === 'string' && formatOptions.findIndex((o) => o.id === id) > -1 && MostUsedExportFormats.includes(id)
+      );
     },
     [formatOptions],
   );

From 728c5878fac3a3a79ac1f8f3e47d1be2ba26a95d Mon Sep 17 00:00:00 2001
From: Tim Hostetler <6970899+thostetler@users.noreply.github.com>
Date: Mon, 5 Jan 2026 16:08:07 -0500
Subject: [PATCH 4/4] fix: add null safety for citation format and type casting

---
 src/components/ResultList/Item/ItemResourceDropdowns.tsx   | 7 ++++++-
 .../Settings/Export/Tabs/QuickExportFormatTabPane.tsx      | 2 +-
 src/lib/useExportFormats.ts                                | 4 +++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/ResultList/Item/ItemResourceDropdowns.tsx b/src/components/ResultList/Item/ItemResourceDropdowns.tsx
index 36cefbd79..6d42213c2 100644
--- a/src/components/ResultList/Item/ItemResourceDropdowns.tsx
+++ b/src/components/ResultList/Item/ItemResourceDropdowns.tsx
@@ -303,7 +303,12 @@ export const ItemResourceDropdowns = ({ doc, defaultCitation }: IItemResourceDro
           />
           <MenuList>
             <MenuItem onClick={handleCopyAbstractUrl}>Copy URL</MenuItem>
-            <CopyMenuItem text={defaultCitation} onCopyComplete={handleCitationCopied} label="Copy Citation" asHtml />
+            <CopyMenuItem
+              text={defaultCitation ?? ''}
+              onCopyComplete={handleCitationCopied}
+              label="Copy Citation"
+              asHtml
+            />
           </MenuList>
         </Menu>
       </Tooltip>
diff --git a/src/components/Settings/Export/Tabs/QuickExportFormatTabPane.tsx b/src/components/Settings/Export/Tabs/QuickExportFormatTabPane.tsx
index 3882ddc9e..40544b006 100644
--- a/src/components/Settings/Export/Tabs/QuickExportFormatTabPane.tsx
+++ b/src/components/Settings/Export/Tabs/QuickExportFormatTabPane.tsx
@@ -64,7 +64,7 @@ export const QuickExportFormatTabPane = ({ sampleBib, dispatch }: QuickExportFor
           {defaultCitationFormatOpt.type === 'HTML' ? (
             <Box fontWeight="medium" dangerouslySetInnerHTML={{ __html: data?.export }} />
           ) : (
-            <Textarea value={data.export} fontSize="sm" fontWeight="medium" mb={2} h={150} />
+            <Textarea value={data?.export ?? ''} fontSize="sm" fontWeight="medium" mb={2} h={150} />
           )}
         </>
       )}
diff --git a/src/lib/useExportFormats.ts b/src/lib/useExportFormats.ts
index f4e1727df..c5ddee257 100644
--- a/src/lib/useExportFormats.ts
+++ b/src/lib/useExportFormats.ts
@@ -68,7 +68,9 @@ export const useExportFormats = (options?: UseQueryOptions<ExportFormatsApiRespo
   const isValidCitationFormatId = useCallback(
     (id: string) => {
       return (
-        typeof id === 'string' && formatOptions.findIndex((o) => o.id === id) > -1 && MostUsedExportFormats.includes(id)
+        typeof id === 'string' &&
+        formatOptions.findIndex((o) => o.id === id) > -1 &&
+        MostUsedExportFormats.includes(id as ExportApiFormatKey)
       );
     },
     [formatOptions],