Add export to markdown for highlights

packages/web/components/templates/homeFeed/HighlightItem.tsx

@@ -206,6 +206,14 @@ function HighlightsMenu(props: HighlightsMenuProps): JSX.Element {
     })()
   }, [props.highlight])
 
+  const exportHighlight = useCallback(() => {
+    ;(async () => {
+      const markdown = highlightAsMarkdown(props.highlight)
+      await navigator.clipboard.writeText(markdown)
+      showSuccessToast('Highlight copied')
+    })()
+  }, [props.highlight])
+
   return (
     <Dropdown
       triggerElement={
@@ -238,12 +246,29 @@ function HighlightsMenu(props: HighlightsMenuProps): JSX.Element {
         }}
         title="Labels"
       />
-      {/* <DropdownOption
+      <DropdownOption
         onSelect={() => {
-          props.setShowConfirmDeleteHighlightId(props.highlight.id)
+          exportHighlight()
         }}
         title="Delete"
-      /> */}
+      />
     </Dropdown>
   )
 }
+
+export function highlightAsMarkdown(highlight: Highlight) {
+  var buffer = `> ${highlight.quote}`
+  if (highlight.annotation) {
+    buffer += `\n\n${highlight.annotation}`
+  }
+  buffer += '\n'
+  return buffer
+}
+
+export function highlightsAsMarkdown(highlights: Highlight[]) {
+  return highlights
+    .map((highlight) => {
+      return highlightAsMarkdown(highlight)
+    })
+    .join('\n\n')
+}

packages/web/components/templates/homeFeed/HighlightsLayout.tsx

@@ -1,8 +1,10 @@
 import { DotsThreeVertical, HighlighterCircle } from 'phosphor-react'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { Toaster } from 'react-hot-toast'
 import { LibraryItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
+import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
+import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
 
 import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
 import { StyledText } from '../../elements/StyledText'
@@ -11,7 +13,7 @@ import {
   timeAgo,
 } from '../../patterns/LibraryCards/LibraryCardStyles'
 import { LibraryHighlightGridCard } from '../../patterns/LibraryCards/LibraryHighlightGridCard'
-import { HighlightItem } from './HighlightItem'
+import { HighlightItem, highlightsAsMarkdown } from './HighlightItem'
 
 type HighlightItemsLayoutProps = {
   items: LibraryItem[]
@@ -238,6 +240,18 @@ type HighlightListProps = {
 }
 
 function HighlightList(props: HighlightListProps): JSX.Element {
+  const exportHighlights = useCallback(() => {
+    ;(async () => {
+      if (!props.item.node.highlights) {
+        showErrorToast('No highlights to export')
+        return
+      }
+      const markdown = highlightsAsMarkdown(props.item.node.highlights)
+      await navigator.clipboard.writeText(markdown)
+      showSuccessToast('Highlight copied')
+    })()
+  }, [props.item.node.highlights])
+
   return (
     <HStack
       css={{
@@ -263,7 +277,7 @@ function HighlightList(props: HighlightListProps): JSX.Element {
             pt: '25px',
             borderBottom: '1px solid $thBorderColor',
           }}
-          alignment="start"
+          alignment="center"
           distribution="start"
         >
           <StyledText
@@ -277,6 +291,32 @@ function HighlightList(props: HighlightListProps): JSX.Element {
           >
             HIGHLIGHTS
           </StyledText>
+          <Dropdown
+            triggerElement={
+              <Box
+                css={{
+                  display: 'flex',
+                  height: '20px',
+                  width: '20px',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  borderRadius: '1000px',
+                  '&:hover': {
+                    bg: '#898989',
+                  },
+                }}
+              >
+                <DotsThreeVertical size={20} color="#EBEBEB" weight="bold" />
+              </Box>
+            }
+          >
+            <DropdownOption
+              onSelect={() => {
+                exportHighlights()
+              }}
+              title="Export"
+            />
+          </Dropdown>
         </HStack>
         <VStack css={{ height: '100%', width: '100%' }} distribution="start">
           {(props.item.node.highlights ?? []).map((highlight) => (