Better MD support in iOS, merge fixes

apple/Omnivore.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -12,7 +12,7 @@
     {
       "identity" : "analytics-swift",
       "kind" : "remoteSourceControl",
-      "location" : "git@github.com:segmentio/analytics-swift.git",
+      "location" : "https://github.com/segmentio/analytics-swift.git",
       "state" : {
         "revision" : "92cc824211160ab98c28c7d40c1e6d27645c2bf1",
         "version" : "1.2.3"
@@ -153,6 +153,15 @@
         "version" : "2.1.0"
       }
     },
+    {
+      "identity" : "pspdfkit-sp",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/PSPDFKit/PSPDFKit-SP",
+      "state" : {
+        "revision" : "f4ba9790488b8f11c29cff35943e430efcdb8003",
+        "version" : "12.0.1"
+      }
+    },
     {
       "identity" : "sovran-swift",
       "kind" : "remoteSourceControl",
@@ -180,6 +189,15 @@
         "version" : "2.3.1"
       }
     },
+    {
+      "identity" : "swift-markdown-ui",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/gonzalezreal/swift-markdown-ui",
+      "state" : {
+        "revision" : "4392c3cefd08db10f13ffb019d7c7a4a622824f5",
+        "version" : "2.0.2"
+      }
+    },
     {
       "identity" : "swift-protobuf",
       "kind" : "remoteSourceControl",

apple/OmnivoreKit/Package.swift

@@ -24,7 +24,8 @@ let package = Package(
       name: "Views",
       dependencies: [
         "Models",
-        .product(name: "Introspect", package: "SwiftUI-Introspect")
+        .product(name: "Introspect", package: "SwiftUI-Introspect"),
+        .product(name: "MarkdownUI", package: "swift-markdown-ui")
       ],
       resources: [.process("Resources")]
     ),
@@ -56,7 +57,7 @@ let package = Package(
 var appPackageDependencies: [Target.Dependency] {
   var deps: [Target.Dependency] = ["Views", "Services", "Models", "Utils"]
   // Comment out following line for macOS build
-//  deps.append(.product(name: "PSPDFKit", package: "PSPDFKit-SP"))
+  deps.append(.product(name: "PSPDFKit", package: "PSPDFKit-SP"))
   return deps
 }
 
@@ -66,9 +67,10 @@ var dependencies: [Package.Dependency] {
     .package(url: "https://github.com/maticzav/swift-graphql", from: "2.3.1"),
     .package(url: "https://github.com/siteline/SwiftUI-Introspect.git", from: "0.1.4"),
     .package(url: "https://github.com/segmentio/analytics-swift.git", .upToNextMajor(from: "1.0.0")),
-    .package(url: "https://github.com/google/GoogleSignIn-iOS", from: "6.2.2")
+    .package(url: "https://github.com/google/GoogleSignIn-iOS", from: "6.2.2"),
+    .package(url: "https://github.com/gonzalezreal/swift-markdown-ui", from: "2.0.0")
   ]
   // Comment out following line for macOS build
-//  deps.append(.package(url: "https://github.com/PSPDFKit/PSPDFKit-SP", from: "12.0.1"))
+  deps.append(.package(url: "https://github.com/PSPDFKit/PSPDFKit-SP", from: "12.0.1"))
   return deps
 }

apple/OmnivoreKit/Sources/App/Views/Highlights/HighlightsListCard.swift

@@ -1,4 +1,5 @@
 #if os(iOS)
+  import MarkdownUI
   import Models
   import SwiftUI
   import Views
@@ -59,15 +60,27 @@
         let isEmpty = highlightParams.annotation.isEmpty
         Spacer(minLength: 6)
 
-        Text(isEmpty ? "Add Notes..." : highlightParams.annotation)
-          .lineSpacing(6)
-          .accentColor(.appGraySolid)
-          .foregroundColor(isEmpty ? .appGrayText : .appGrayTextContrast)
-          .font(.appSubheadline)
-          .padding(12)
-          .frame(maxWidth: .infinity, alignment: .leading)
-          .background(Color.appButtonBackground)
-          .cornerRadius(8)
+        if isEmpty {
+          Text("Add Notes...")
+            .lineSpacing(6)
+            .accentColor(.appGraySolid)
+            .foregroundColor(isEmpty ? .appGrayText : .appGrayTextContrast)
+            .font(.appSubheadline)
+            .padding(12)
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .background(Color.appButtonBackground)
+            .cornerRadius(8)
+        } else {
+          Markdown(highlightParams.annotation)
+            .lineSpacing(6)
+            .accentColor(.appGraySolid)
+            .foregroundColor(isEmpty ? .appGrayText : .appGrayTextContrast)
+            .font(.appSubheadline)
+            .padding(12)
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .background(Color.appButtonBackground)
+            .cornerRadius(8)
+        }
       }
       .onTapGesture {
         annotation = highlightParams.annotation
@@ -98,6 +111,10 @@
       }
     }
 
+    func markdownText(str: String) -> some View {
+      Markdown(str)
+    }
+
     var body: some View {
       VStack(alignment: .leading) {
         HStack {
@@ -154,7 +171,7 @@
             .padding(.trailing, 6)
 
           VStack(alignment: .leading, spacing: 16) {
-            Text(highlightParams.quote)
+            Markdown(highlightParams.quote)
             labelsView
           }
         }

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

@@ -8,6 +8,7 @@ struct WebReaderContent {
   let lineHeight: Int
   let maxWidthPercentage: Int
   let item: LinkedItem
+  let isDark: Bool
   let themeKey: String
   let fontFamily: WebFont
   let articleContent: ArticleContent
@@ -29,7 +30,8 @@ struct WebReaderContent {
     self.lineHeight = lineHeight
     self.maxWidthPercentage = maxWidthPercentage
     self.item = item
-    self.themeKey = isDark ? "Gray" : "LightGray"
+    self.isDark = isDark
+    self.themeKey = isDark ? "Dark" : "Light"
     self.fontFamily = fontFamily
     self.articleContent = articleContent
     self.prefersHighContrastText = prefersHighContrastText
@@ -49,7 +51,7 @@ struct WebReaderContent {
         <meta charset="utf-8" />
         <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no' />
           <style>
-            @import url("highlight\(themeKey == "Gray" ? "-dark" : "").css");
+            @import url("highlight\(isDark ? "-dark" : "").css");
           </style>
       </head>
       <body>
@@ -84,11 +86,11 @@ struct WebReaderContent {
             recommendations: \(item.recommendationsJSONString),
           }
 
+          window.themeKey = "\(themeKey)"
           window.fontSize = \(textFontSize)
           window.fontFamily = "\(fontFamily.rawValue)"
           window.maxWidthPercentage = \(maxWidthPercentage)
           window.lineHeight = \(lineHeight)
-          window.localStorage.setItem("theme", "\(themeKey)")
           window.prefersHighContrastFont = \(prefersHighContrastText)
           window.enableHighlightBar = \(isMacApp)
           window.highlightOnRelease = \(enableHighlightOnRelease)
@@ -103,7 +105,7 @@ struct WebReaderContent {
 
   // swiftlint:disable line_length function_body_length
   static func emptyContent(isDark: Bool) -> String {
-    let themeKey = isDark ? "Gray" : "LightGray"
+    let themeKey = isDark ? "Dark" : "Light"
 //    let savedAt = "new Date(\(item.unwrappedSavedAt.timeIntervalSince1970 * 1000)).toISOString()"
     //   let createdAt = "new Date(\(item.unwrappedCreatedAt.timeIntervalSince1970 * 1000)).toISOString()"
     //   let publishedAt = item.publishDate != nil ? "new Date(\(item.publishDate!.timeIntervalSince1970 * 1000)).toISOString()" : "undefined"
@@ -115,7 +117,7 @@ struct WebReaderContent {
         <meta charset="utf-8" />
         <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no' />
           <style>
-            @import url("highlight\(themeKey == "Gray" ? "-dark" : "").css");
+            @import url("highlight\(isDark ? "-dark" : "").css");
           </style>
       </head>
       <body>
@@ -154,7 +156,7 @@ struct WebReaderContent {
           window.fontFamily = "Inter"
           window.maxWidthPercentage = 0
           window.lineHeight = 1.25
-          window.localStorage.setItem("theme", "\(themeKey)")
+          window.themeKey = "\(themeKey)"
           window.prefersHighContrastFont = true
           window.enableHighlightBar = false
           window.highlightOnRelease = false

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

@@ -12,7 +12,11 @@ import { Button } from '../../elements/Button'
 import { useEffect, useState, useRef, useMemo, useCallback } from 'react'
 import { ReportIssuesModal } from './ReportIssuesModal'
 import { reportIssueMutation } from '../../../lib/networking/mutations/reportIssueMutation'
-import { updateTheme, updateThemeLocally } from '../../../lib/themeUpdater'
+import {
+  currentTheme,
+  updateTheme,
+  updateThemeLocally,
+} from '../../../lib/themeUpdater'
 import { ArticleMutations } from '../../../lib/articleActions'
 import { LabelChip } from '../../elements/LabelChip'
 import { Label } from '../../../lib/networking/fragments/labelFragment'
@@ -316,6 +320,13 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
     readerTableHeaderColor: theme.colors.readerTableHeader.toString(),
     readerHeadersColor: theme.colors.readerFont.toString(),
   }
+  console.log(
+    'currentTheme from iOS: ',
+    highContrastText,
+    currentTheme(),
+    'readerFontColor',
+    styles.readerFontColor
+  )
 
   const recommendationsWithNotes = useMemo(() => {
     return (
@@ -331,7 +342,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
         id="article-container"
         css={{
           padding: '30px',
-          paddingTop: '80px',
+          paddingTop: '30px',
           minHeight: '100vh',
           maxWidth: `${styles.maxWidthPercentage ?? 100}%`,
           background: props.isAppleAppEmbed
@@ -363,7 +374,6 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
           },
           '@mdDown': {
             padding: '15px',
-            paddingTop: '80px',
           },
         }}
       >

packages/web/pages/[username]/[slug]/index.tsx

@@ -358,6 +358,7 @@ export default function Home(): JSX.Element {
             height: '100%',
             background: '$readerMargin',
             overflow: 'scroll',
+            paddingTop: '80px',
           }}
         >
           {article && viewerData?.me ? (

packages/web/pages/app/[username]/[slug]/index.tsx

@@ -84,6 +84,7 @@ function AppArticleEmbedContent(
           alignment="center"
           distribution="center"
           className="disable-webkit-callout"
+          css={{ paddingTop: '80px' }}
         >
           <ArticleContainer
             viewer={viewerData.me}