From 36898eea935ee8996af20e3cfceb030305b6b8fe Mon Sep 17 00:00:00 2001
From: Rahul Tripathi <rahul@bitfort.in>
Date: Thu, 22 Jun 2023 17:16:29 +0530
Subject: [PATCH 1/4] Issue 2267 - add a copy button to highlights

---
 .../web/components/patterns/HighlightBar.tsx  | 30 +++++++++++++++--
 .../templates/article/HighlightsLayer.tsx     | 32 +++++++++++++++++--
 2 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/packages/web/components/patterns/HighlightBar.tsx b/packages/web/components/patterns/HighlightBar.tsx
index ee1b16414..b1ba39049 100644
--- a/packages/web/components/patterns/HighlightBar.tsx
+++ b/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"
diff --git a/packages/web/components/templates/article/HighlightsLayer.tsx b/packages/web/components/templates/article/HighlightsLayer.tsx
index a0f13faee..adc40c786 100644
--- a/packages/web/components/templates/article/HighlightsLayer.tsx
+++ b/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)

From 273d98332ea1d1693de7b77a0a4d65d04411467f Mon Sep 17 00:00:00 2001
From: Rahul Tripathi <rahul@bitfort.in>
Date: Thu, 22 Jun 2023 17:54:04 +0530
Subject: [PATCH 2/4] Clean up HighlightBar.tsx and remove dup code

---
 .../web/components/patterns/HighlightBar.tsx  | 259 +++++++-----------
 1 file changed, 98 insertions(+), 161 deletions(-)

diff --git a/packages/web/components/patterns/HighlightBar.tsx b/packages/web/components/patterns/HighlightBar.tsx
index b1ba39049..ad1aff3f3 100644
--- a/packages/web/components/patterns/HighlightBar.tsx
+++ b/packages/web/components/patterns/HighlightBar.tsx
@@ -32,50 +32,75 @@ type HighlightBarProps = {
 }
 
 export function HighlightBar(props: HighlightBarProps): JSX.Element {
-  if (props.displayAtBottom) {
-    return (
-      <Box
-        css={{
-          width: '100%',
-          maxWidth: props.isNewHighlight ? '330px' : '380px',
-          height: '48px',
-          position: 'fixed',
-          background: '$grayBg',
-          borderRadius: '4px',
-          border: '1px solid $grayBorder',
-          boxShadow: theme.shadows.cardBoxShadow.toString(),
-          bottom: 'calc(38px + env(safe-area-inset-bottom, 40px))',
-          '@smDown': {
-            maxWidth: '85%',
-            bottom: `calc(28px + ${
-              isAndroid() ? 30 : 0
-            }px + env(safe-area-inset-bottom, 40px))`,
-          },
-        }}
-      >
-        <BarContent {...props} />
-      </Box>
-    )
-  } else {
-    return (
-      <Box
-        css={{
-          width: '100%',
-          maxWidth: props.isNewHighlight ? '330px' : '380px',
-          height: '48px',
-          position: 'absolute',
-          background: '$grayBg',
-          borderRadius: '4px',
-          border: '1px solid $grayBorder',
-          boxShadow: theme.shadows.cardBoxShadow.toString(),
-          left: props.anchorCoordinates.pageX,
-          top: props.anchorCoordinates.pageY,
-        }}
-      >
-        <BarContent {...props} />
-      </Box>
-    )
-  }
+  return (
+    <Box
+      css={{
+        width: '100%',
+        maxWidth: props.isNewHighlight ? '330px' : '380px',
+        height: '48px',
+        position: props.displayAtBottom ? 'fixed' : 'absolute',
+        background: '$grayBg',
+        borderRadius: '4px',
+        border: '1px solid $grayBorder',
+        boxShadow: theme.shadows.cardBoxShadow.toString(),
+        bottom: props.displayAtBottom
+          ? 'calc(38px + env(safe-area-inset-bottom, 40px))'
+          : undefined,
+        '@smDown': props.displayAtBottom
+          ? {
+              maxWidth: '85%',
+              bottom: `calc(28px + ${
+                isAndroid() ? 30 : 0
+              }px + env(safe-area-inset-bottom, 40px))`,
+            }
+          : undefined,
+        left: props.displayAtBottom ? undefined : props.anchorCoordinates.pageX,
+        top: props.displayAtBottom ? undefined : props.anchorCoordinates.pageY,
+      }}
+    >
+      <BarContent {...props} />
+    </Box>
+  )
+}
+
+type BarButtonProps = {
+  title: string
+  onClick: VoidFunction
+  iconElement: JSX.Element
+  text: string
+}
+
+function BarButton({ text, title, iconElement, onClick }: BarButtonProps) {
+  return (
+    <Button
+      style="plainIcon"
+      title={title}
+      onClick={onClick}
+      css={{
+        flexDirection: 'column',
+        height: '100%',
+        m: 0,
+        p: 0,
+        alignItems: 'baseline',
+      }}
+    >
+      <HStack css={{ height: '100%', alignItems: 'center' }}>
+        {iconElement}
+        <StyledText
+          style="body"
+          css={{
+            pl: '12px',
+            m: '0px',
+            color: '$readerFont',
+            fontWeight: '400',
+            fontSize: '16px',
+          }}
+        >
+          {text}
+        </StyledText>
+      </HStack>
+    </Button>
+  )
 }
 
 function BarContent(props: HighlightBarProps): JSX.Element {
@@ -97,139 +122,51 @@ function BarContent(props: HighlightBarProps): JSX.Element {
       }}
     >
       {props.isNewHighlight ? (
-        <Button
-          style="plainIcon"
+        <BarButton
+          text="Highlight"
           title="Create Highlight"
+          iconElement={<PenWithColorIcon />}
           onClick={() => props.handleButtonClick('create')}
-          css={{
-            flexDirection: 'column',
-            height: '100%',
-            m: 0,
-            p: 0,
-            alignItems: 'baseline',
-          }}
-        >
-          <HStack css={{ height: '100%', alignItems: 'center' }}>
-            <PenWithColorIcon />
-            <StyledText
-              style="body"
-              css={{
-                pl: '12px',
-                m: '0px',
-                color: '$readerFont',
-                fontWeight: '400',
-                fontSize: '16px',
-              }}
-            >
-              Highlight
-            </StyledText>
-          </HStack>
-        </Button>
+        />
       ) : (
         <>
-          <Button
-            style="plainIcon"
+          <BarButton
+            text="Delete"
             title="Remove Highlight"
-            onClick={() => props.handleButtonClick('delete')}
-            css={{ color: '$readerFont', height: '100%', m: 0, p: 0 }}
-          >
-            <HStack css={{ height: '100%', alignItems: 'center' }}>
+            iconElement={
               <Trash size={24} color={theme.colors.omnivoreRed.toString()} />
-              <StyledText
-                style="body"
-                css={{
-                  pl: '12px',
-                  m: '0px',
-                  color: '$readerFont',
-                  fontWeight: '400',
-                  fontSize: '16px',
-                }}
-              >
-                Delete
-              </StyledText>
-            </HStack>
-          </Button>
+            }
+            onClick={() => props.handleButtonClick('delete')}
+          />
           <Separator />
-
-          <Button
-            style="plainIcon"
+          <BarButton
+            text="Labels"
             title="Set Labels"
-            onClick={() => props.handleButtonClick('setHighlightLabels')}
-            css={{ color: '$readerFont', height: '100%', m: 0, p: 0 }}
-          >
-            <HStack css={{ height: '100%', alignItems: 'center' }}>
+            iconElement={
               <Tag size={24} color={theme.colors.readerFont.toString()} />
-              <StyledText
-                style="body"
-                css={{
-                  pl: '12px',
-                  m: '0px',
-                  color: '$readerFont',
-                  fontWeight: '400',
-                  fontSize: '16px',
-                }}
-              >
-                Labels
-              </StyledText>
-            </HStack>
-          </Button>
+            }
+            onClick={() => props.handleButtonClick('setHighlightLabels')}
+          />
         </>
       )}
       <Separator />
-      <Button
-        style="plainIcon"
+      <BarButton
+        text="Note"
         title="Add Note to Highlight"
-        onClick={() => props.handleButtonClick('comment')}
-        css={{ color: '$readerFont', height: '100%', m: 0, p: 0 }}
-      >
-        <HStack css={{ height: '100%', alignItems: 'center' }}>
+        iconElement={
           <Note size={24} color={theme.colors.readerFont.toString()} />
-          <StyledText
-            style="body"
-            css={{
-              pl: '12px',
-              m: '0px',
-              color: '$readerFont',
-              fontWeight: '400',
-              fontSize: '16px',
-            }}
-          >
-            Note
-          </StyledText>
-        </HStack>
-      </Button>
+        }
+        onClick={() => props.handleButtonClick('comment')}
+      />
       <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' }}>
+      <BarButton
+        text="Copy"
+        title="Copy Text to Clipboard"
+        iconElement={
           <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"
-        title="Share Highlight"
-        onClick={() => props.handleButtonClick('share')}
-        css={{ color: '$readerFont', height: '100%', m: 0, p: 0, pt: '6px' }}
-      >
-        <ShareIcon size={28} strokeColor={theme.colors.readerFont.toString()} isCompleted={false} />
-      </Button> */}
+        }
+        onClick={() => props.handleButtonClick('copy')}
+      />
     </HStack>
   )
 }

From cc27a8e3735a63e78807ad933cd9faaabfa2e49a Mon Sep 17 00:00:00 2001
From: Rahul Tripathi <rahul@bitfort.in>
Date: Thu, 22 Jun 2023 19:24:27 +0530
Subject: [PATCH 3/4] Add success and error toasts on copy

---
 .../templates/article/HighlightsLayer.tsx         | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/templates/article/HighlightsLayer.tsx b/packages/web/components/templates/article/HighlightsLayer.tsx
index adc40c786..12f4a7fc1 100644
--- a/packages/web/components/templates/article/HighlightsLayer.tsx
+++ b/packages/web/components/templates/article/HighlightsLayer.tsx
@@ -20,7 +20,7 @@ import { removeHighlights } from '../../../lib/highlights/deleteHighlight'
 import { createHighlight } from '../../../lib/highlights/createHighlight'
 import { HighlightNoteModal } from './HighlightNoteModal'
 import { NotebookModal } from './NotebookModal'
-import { showErrorToast } from '../../../lib/toastHelpers'
+import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
 import { ArticleMutations } from '../../../lib/articleActions'
 import { isTouchScreenDevice } from '../../../lib/deviceType'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
@@ -473,7 +473,18 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
             textToCopy = userSelectionText
           }
 
-          if (textToCopy) await navigator.clipboard.writeText(textToCopy)
+          if (textToCopy) {
+            try {
+              await navigator.clipboard.writeText(textToCopy)
+              showSuccessToast('Highlight copied', {
+                position: 'bottom-right',
+              })
+            } catch (error) {
+              showErrorToast('Error copying highlight, permission denied.', {
+                position: 'bottom-right',
+              })
+            }
+          }
 
           selection.empty()
           setSelectionData(null)

From 09abc46102ae8429d3ce76a85a11265663969ac2 Mon Sep 17 00:00:00 2001
From: Rahul Tripathi <rahul@bitfort.in>
Date: Fri, 23 Jun 2023 03:23:01 +0530
Subject: [PATCH 4/4] Correct highlight bar css object conditional.

---
 .../web/components/patterns/HighlightBar.tsx  | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/web/components/patterns/HighlightBar.tsx b/packages/web/components/patterns/HighlightBar.tsx
index ad1aff3f3..98a92a39a 100644
--- a/packages/web/components/patterns/HighlightBar.tsx
+++ b/packages/web/components/patterns/HighlightBar.tsx
@@ -43,19 +43,19 @@ export function HighlightBar(props: HighlightBarProps): JSX.Element {
         borderRadius: '4px',
         border: '1px solid $grayBorder',
         boxShadow: theme.shadows.cardBoxShadow.toString(),
-        bottom: props.displayAtBottom
-          ? 'calc(38px + env(safe-area-inset-bottom, 40px))'
-          : undefined,
-        '@smDown': props.displayAtBottom
-          ? {
-              maxWidth: '85%',
-              bottom: `calc(28px + ${
-                isAndroid() ? 30 : 0
-              }px + env(safe-area-inset-bottom, 40px))`,
-            }
-          : undefined,
-        left: props.displayAtBottom ? undefined : props.anchorCoordinates.pageX,
-        top: props.displayAtBottom ? undefined : props.anchorCoordinates.pageY,
+        ...(props.displayAtBottom && {
+          bottom: 'calc(38px + env(safe-area-inset-bottom, 40px))',
+        }),
+        ...(props.displayAtBottom && {
+          '@smDown': {
+            maxWidth: '85%',
+            bottom: `calc(28px + ${
+              isAndroid() ? 30 : 0
+            }px + env(safe-area-inset-bottom, 40px))`,
+          },
+        }),
+        ...(!props.displayAtBottom && { left: props.anchorCoordinates.pageX }),
+        ...(!props.displayAtBottom && { top: props.anchorCoordinates.pageY }),
       }}
     >
       <BarContent {...props} />