Merge pull request #627 from omnivore-app/feature/webview-share

Webview share option

apple/OmnivoreKit/Sources/App/Views/WebReader/WebReader.swift

@@ -17,6 +17,7 @@ import WebKit
     @Binding var decreaseFontActionID: UUID?
     @Binding var annotationSaveTransactionID: UUID?
     @Binding var showNavBarActionID: UUID?
+    @Binding var shareActionID: UUID?
     @Binding var annotation: String
 
     func makeCoordinator() -> WebReaderCoordinator {
@@ -81,6 +82,11 @@ import WebKit
         context.coordinator.showNavBar()
       }
 
+      if shareActionID != context.coordinator.previousShareActionID {
+        context.coordinator.previousShareActionID = shareActionID
+        (webView as? WebView)?.shareOriginalItem()
+      }
+
       // If the webview had been terminated `needsReload` will have been set to true
       if context.coordinator.needsReload {
         loadContent(webView: webView)

apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderContainer.swift

@@ -19,6 +19,7 @@ import WebKit
     @State var decreaseFontActionID: UUID?
     @State var annotationSaveTransactionID: UUID?
     @State var showNavBarActionID: UUID?
+    @State var shareActionID: UUID?
     @State var annotation = String()
 
     @EnvironmentObject var dataService: DataService
@@ -104,6 +105,10 @@ import WebKit
                   )
                 }
               )
+              Button(
+                action: { shareActionID = UUID() },
+                label: { Label("Share Original", systemImage: "square.and.arrow.up") }
+              )
               Button(
                 action: { showDeleteConfirmation = true },
                 label: { Label("Delete", systemImage: "trash") }
@@ -156,6 +161,7 @@ import WebKit
             decreaseFontActionID: $decreaseFontActionID,
             annotationSaveTransactionID: $annotationSaveTransactionID,
             showNavBarActionID: $showNavBarActionID,
+            shareActionID: $shareActionID,
             annotation: $annotation
           )
           .onTapGesture {

apple/OmnivoreKit/Sources/App/Views/WebReader/WebReaderCoordinator.swift

@@ -18,6 +18,7 @@ final class WebReaderCoordinator: NSObject {
   var previousIncreaseFontActionID: UUID?
   var previousDecreaseFontActionID: UUID?
   var previousShowNavBarActionID: UUID?
+  var previousShareActionID: UUID?
   var updateNavBarVisibilityRatio: (Double) -> Void = { _ in }
   private var yOffsetAtStartOfDrag: Double?
   private var lastYOffset: Double = 0

apple/OmnivoreKit/Sources/Views/Article/WebView.swift

@@ -34,6 +34,10 @@ public final class WebView: WKWebView {
     dispatchEvent("decreaseFontSize")
   }
 
+  public func shareOriginalItem() {
+    dispatchEvent("share")
+  }
+
   func dispatchEvent(_ name: String) {
     let dispatch = "document.dispatchEvent(new Event('\(name)'));"
     evaluateJavaScript(dispatch) { obj, err in

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

@@ -15,7 +15,10 @@ import { updateThemeLocally } from '../../../lib/themeUpdater'
 import { ArticleMutations } from '../../../lib/articleActions'
 import { LabelChip } from '../../elements/LabelChip'
 import { Label } from '../../../lib/networking/fragments/labelFragment'
-import { HighlightLocation, makeHighlightStartEndOffset } from '../../../lib/highlights/highlightGenerator'
+import {
+  HighlightLocation,
+  makeHighlightStartEndOffset,
+} from '../../../lib/highlights/highlightGenerator'
 
 type ArticleContainerProps = {
   article: ArticleAttributes
@@ -37,7 +40,9 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
   const [showShareModal, setShowShareModal] = useState(false)
   const [showReportIssuesModal, setShowReportIssuesModal] = useState(false)
   const [fontSize, setFontSize] = useState(props.fontSize ?? 20)
-  const highlightHref = useRef(window.location.hash ? window.location.hash.split('#')[1] : null)
+  const highlightHref = useRef(
+    window.location.hash ? window.location.hash.split('#')[1] : null
+  )
   const [highlightReady, setHighlightReady] = useState(false)
   const [highlightLocations, setHighlightLocations] = useState<
     HighlightLocation[]
@@ -87,16 +92,27 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
       updateThemeLocally(ThemeId.Light)
     }
 
+    const share = () => {
+      if (navigator.share) {
+        navigator.share({
+          title: props.article.title,
+          url: props.article.originalArticleUrl,
+        })
+      }
+    }
+
     document.addEventListener('increaseFontSize', increaseFontSize)
     document.addEventListener('decreaseFontSize', decreaseFontSize)
     document.addEventListener('switchToDarkMode', switchToDarkMode)
     document.addEventListener('switchToLightMode', switchToLightMode)
+    document.addEventListener('share', share)
 
     return () => {
       document.removeEventListener('increaseFontSize', increaseFontSize)
       document.removeEventListener('decreaseFontSize', decreaseFontSize)
       document.removeEventListener('switchToDarkMode', switchToDarkMode)
       document.removeEventListener('switchToLightMode', switchToLightMode)
+      document.removeEventListener('share', share)
     }
   })
 
@@ -118,7 +134,9 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
         css={{
           padding: '16px',
           maxWidth: '100%',
-          background: props.isAppleAppEmbed ? 'unset' : theme.colors.grayBg.toString(),
+          background: props.isAppleAppEmbed
+            ? 'unset'
+            : theme.colors.grayBg.toString(),
           '--text-font-family': styles.fontFamily,
           '--text-font-size': `${styles.fontSize}px`,
           '--line-height': `${styles.lineHeight}%`,
@@ -138,12 +156,12 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
             margin: `30px 0px`,
           },
           '@md': {
-            maxWidth: 1024 - (styles.margin),
+            maxWidth: 1024 - styles.margin,
           },
           '@lg': {
             margin: `30px 0`,
             width: 'auto',
-            maxWidth: 1024 - (styles.margin),
+            maxWidth: 1024 - styles.margin,
           },
         }}
       >
@@ -163,10 +181,20 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
             href={props.article.url}
           />
           {props.labels ? (
-            <SpanBox css={{ pb: '16px', width: '100%', '&:empty': { display: 'none' } }}>
-              {props.labels?.map((label) =>
-                <LabelChip key={label.id} text={label.name} color={label.color} />
-              )}
+            <SpanBox
+              css={{
+                pb: '16px',
+                width: '100%',
+                '&:empty': { display: 'none' },
+              }}
+            >
+              {props.labels?.map((label) => (
+                <LabelChip
+                  key={label.id}
+                  text={label.name}
+                  color={label.color}
+                />
+              ))}
             </SpanBox>
           ) : null}
           {props.isAppleAppEmbed && (