Issue 2267 - add a copy button to highlights

packages/web/components/patterns/HighlightBar.tsx

@@ -6,7 +6,7 @@ import { StyledText } from '../elements/StyledText'
 import { Button } from '../elements/Button'
 import { HStack, Box } from '../elements/LayoutPrimitives'
 import { PenWithColorIcon } from '../elements/images/PenWithColorIcon'
-import { Note, Tag, Trash } from 'phosphor-react'
+import { Note, Tag, Trash, Copy } from 'phosphor-react'
 
 type PageCoordinates = {
   pageX: number
@@ -21,6 +21,7 @@ export type HighlightAction =
   | 'post'
   | 'unshare'
   | 'setHighlightLabels'
+  | 'copy'
 
 type HighlightBarProps = {
   anchorCoordinates: PageCoordinates
@@ -36,7 +37,7 @@ export function HighlightBar(props: HighlightBarProps): JSX.Element {
       <Box
         css={{
           width: '100%',
-          maxWidth: props.isNewHighlight ? '280px' : '330px',
+          maxWidth: props.isNewHighlight ? '330px' : '380px',
           height: '48px',
           position: 'fixed',
           background: '$grayBg',
@@ -60,7 +61,7 @@ export function HighlightBar(props: HighlightBarProps): JSX.Element {
       <Box
         css={{
           width: '100%',
-          maxWidth: props.isNewHighlight ? '280px' : '330px',
+          maxWidth: props.isNewHighlight ? '330px' : '380px',
           height: '48px',
           position: 'absolute',
           background: '$grayBg',
@@ -197,6 +198,29 @@ function BarContent(props: HighlightBarProps): JSX.Element {
           </StyledText>
         </HStack>
       </Button>
+      <Separator />
+      <Button
+        style="plainIcon"
+        title="Copy text to clipboard"
+        onClick={() => props.handleButtonClick('copy')}
+        css={{ color: '$readerFont', height: '100%', m: 0, p: 0 }}
+      >
+        <HStack css={{ height: '100%', alignItems: 'center' }}>
+          <Copy size={24} color={theme.colors.readerFont.toString()} />
+          <StyledText
+            style="body"
+            css={{
+              pl: '12px',
+              m: '0px',
+              color: '$readerFont',
+              fontWeight: '400',
+              fontSize: '16px',
+            }}
+          >
+            Copy
+          </StyledText>
+        </HStack>
+      </Button>
       {/* <Separator />
       <Button
         style="plainIcon"

packages/web/components/templates/article/HighlightsLayer.tsx

@@ -10,6 +10,7 @@ import type { HighlightLocation } from '../../../lib/highlights/highlightGenerat
 import { useSelection } from '../../../lib/highlights/useSelection'
 import type { Highlight } from '../../../lib/networking/fragments/highlightFragment'
 import {
+  getHighlightElements,
   highlightIdAttribute,
   highlightNoteIdAttribute,
   SelectionAttributes,
@@ -263,7 +264,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
   }
 
   const createHighlightCallback = useCallback(
-    async (successAction: HighlightModalAction, annotation?: string) => {
+    async (annotation?: string) => {
       if (!selectionData) {
         return
       }
@@ -395,7 +396,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
   )
 
   const handleCloseNotebook = useCallback(
-    (updatedHighlights: Highlight[], deletedHighlights: Highlight[]) => {
+    (updatedHighlights: Highlight[]) => {
       props.setShowHighlightsModal(false)
 
       // Remove all the existing highlights, then set the new ones
@@ -454,6 +455,30 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
             })
           }
           break
+        case 'copy': {
+          const selection = window.getSelection()
+          if (selection === null) return
+
+          const userSelectionText = selection.toString()
+          let textToCopy = ''
+
+          if (focusedHighlight) {
+            const highlightedElements = getHighlightElements(
+              focusedHighlight.id
+            )
+            highlightedElements.forEach(
+              (element) => (textToCopy += element.textContent)
+            )
+          } else if (userSelectionText) {
+            textToCopy = userSelectionText
+          }
+
+          if (textToCopy) await navigator.clipboard.writeText(textToCopy)
+
+          selection.empty()
+          setSelectionData(null)
+          break
+        }
         case 'setHighlightLabels':
           if (props.isAppleAppEmbed) {
             window?.webkit?.messageHandlers.highlightAction?.postMessage({
@@ -474,6 +499,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
       props.isAppleAppEmbed,
       removeHighlightCallback,
       selectionData,
+      setSelectionData,
     ]
   )
 
@@ -615,7 +641,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
         dispatchHighlightMessage('noteCreated')
       } else {
         try {
-          await createHighlightCallback('none', event.annotation)
+          await createHighlightCallback('none')
           dispatchHighlightMessage('noteCreated')
         } catch (error) {
           dispatchHighlightError('saveAnnotation', error)