Scix 702 update quick citation formats

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",

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',
@@ -61,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;
 }

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) => 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>

src/components/CopyButton/CopyButton.tsx

@@ -1,18 +1,38 @@
 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';
-import CopyToClipboard from 'react-copy-html-to-clipboard';
 
-export interface ICopyButtonProps extends ButtonProps {
+interface ICopyProps {
   text: string;
   onCopyComplete?: () => void;
   timeout?: number;
   asHtml?: boolean;
+}
+
+export interface ICopyButtonProps extends ICopyProps, ButtonProps {
   iconPos?: 'left' | 'right';
 }
 
 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,25 +48,30 @@ 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} />
       ) : (
         <IconButton
           icon={<CopyIcon />}
           variant="link"
           aria-label="copy to clipboard"
-          onClick={handleCopied}
+          onClick={() => handleCopied(asHtml)}
           {...rest}
         />
       )}
-    </CopyToClipboard>
+    </>
   );
 };
 
@@ -64,35 +89,56 @@ 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>
   );
 };
 
-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>
   );

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,24 +48,21 @@ export const DocumentList = (props: ISimpleResultListProps): ReactElement => {
       format: defaultCitationFormat,
       bibcode: bibcodes,
       sort: ['bibcode asc'],
+      outputformat: 2,
     },
     { enabled: !!settings?.defaultCitationFormat },
   );
 
   // 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;