diff --git a/packages/web/components/templates/homeFeed/HighlightItem.tsx b/packages/web/components/templates/homeFeed/HighlightItem.tsx
index 2b40a961d..a22698b19 100644
--- a/packages/web/components/templates/homeFeed/HighlightItem.tsx
+++ b/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 (
- {/* {
- props.setShowConfirmDeleteHighlightId(props.highlight.id)
+ exportHighlight()
}}
title="Delete"
- /> */}
+ />
)
}
+
+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')
+}
diff --git a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
index 5f99162d5..343d6de40 100644
--- a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
+++ b/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 (
HIGHLIGHTS
+
+
+
+ }
+ >
+ {
+ exportHighlights()
+ }}
+ title="Export"
+ />
+
{(props.item.node.highlights ?? []).map((highlight) => (