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