Update webreader view when titles are updated

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

@@ -3,7 +3,7 @@ import Services
 import SwiftUI
 import Views
 
-@MainActor final class LinkedItemTitleEditViewModel: ObservableObject {
+@MainActor final class LinkedItemMetadataEditViewModel: ObservableObject {
   @Published var title = ""
   @Published var description = ""
   @Published var author = ""
@@ -28,9 +28,15 @@ import Views
 struct LinkedItemMetadataEditView: View {
   @EnvironmentObject var dataService: DataService
   @Environment(\.presentationMode) private var presentationMode
-  @StateObject var viewModel = LinkedItemTitleEditViewModel()
+  @StateObject var viewModel = LinkedItemMetadataEditViewModel()
 
   let item: LinkedItem
+  let onSave: ((String, String) -> Void)?
+
+  init(item: LinkedItem, onSave: ((String, String) -> Void)? = nil) {
+    self.item = item
+    self.onSave = onSave
+  }
 
   var editForm: some View {
     ScrollView(showsIndicators: false) {
@@ -96,6 +102,9 @@ struct LinkedItemMetadataEditView: View {
               Button(
                 action: {
                   viewModel.submit(dataService: dataService, item: item)
+                  if let onSave = self.onSave {
+                    onSave(viewModel.title, viewModel.description)
+                  }
                   presentationMode.wrappedValue.dismiss()
                 },
                 label: { Text(LocalText.genericSave).foregroundColor(.appGrayTextContrast) }

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

@@ -101,6 +101,7 @@ struct WebReader: PlatformViewRepresentable {
       (webView as? OmnivoreWebView)?.updateMaxWidthPercentage()
       (webView as? OmnivoreWebView)?.updateLineHeight()
       (webView as? OmnivoreWebView)?.updateLabels(labelsJSON: item.labelsJSONString)
+      (webView as? OmnivoreWebView)?.updateTitle(title: item.title ?? "")
     }
 
     if showNavBarActionID != context.coordinator.previousShowNavBarActionID {

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

@@ -309,7 +309,11 @@ struct WebReaderContainerView: View {
       })
     }
     .sheet(isPresented: $showTitleEdit) {
-      LinkedItemMetadataEditView(item: item)
+      LinkedItemMetadataEditView(item: item, onSave: { title, _ in
+        item.title = title
+        // We dont need to update description because its never rendered in this view
+        readerSettingsChangedTransactionID = UUID()
+      })
     }
     .sheet(isPresented: $showHighlightsView, onDismiss: onHighlightListViewDismissal) {
       HighlightsListView(

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

@@ -105,6 +105,14 @@ public final class OmnivoreWebView: WKWebView {
     }
   }
 
+  public func updateTitle(title: String) {
+    do {
+      try dispatchEvent(.updateTitle(title: title))
+    } catch {
+      showErrorInSnackbar("Error updating title")
+    }
+  }
+
   public func updateLabels(labelsJSON: String) {
     do {
       try dispatchEvent(.updateLabels(labels: labelsJSON))
@@ -388,6 +396,7 @@ public enum WebViewDispatchEvent {
   case dismissHighlight
   case speakingSection(anchorIdx: String)
   case updateLabels(labels: String)
+  case updateTitle(title: String)
 
   var script: String {
     get throws {
@@ -432,6 +441,8 @@ public enum WebViewDispatchEvent {
       return "speakingSection"
     case .updateLabels:
       return "updateLabels"
+    case .updateTitle:
+      return "updateTitle"
     }
   }
 
@@ -454,6 +465,14 @@ public enum WebViewDispatchEvent {
         return "event.fontFamily = '\(family)';"
       case let .updateLabels(labels):
         return "event.labels = \(labels);"
+      case let .updateTitle(title):
+        let encoder = JSONEncoder()
+        if let encoded = try? encoder.encode(title) {
+          let str = String(decoding: encoded, as: UTF8.self)
+          return "event.title = \(str);"
+        } else {
+          throw BasicError.message(messageText: "Unable to serialize title.")
+        }
       case let .saveAnnotation(annotation: annotation):
         let encoder = JSONEncoder()
         if let encoded = try? encoder.encode(annotation) {

packages/appreader/src/index.jsx

@@ -50,12 +50,29 @@ const mutation = async (name, input) => {
 }
 
 const App = () => {
-  const [labels, setLabels] = React.useState(window.omnivoreArticle.labels)
   applyStoredTheme(false)
 
+  const useForceUpdate = () => {
+    const [, setState] = React.useState();
+    return () => setState({});
+  }
+  
+  const forceUpdate = useForceUpdate();
+  
   document.addEventListener('updateLabels', (event) => {
     console.log("updating labels: ", event.labels)
-    setLabels(event.labels)
+    const updated = window.omnivoreArticle
+    updated.labels = event.labels
+    window.omnivoreArticle = updated
+    forceUpdate();
+  })
+
+  document.addEventListener('updateTitle', (event) => {
+    console.log("updating title: ", event.title)
+    const updated = window.omnivoreArticle
+    updated.title = event.title
+    window.omnivoreArticle = updated
+    forceUpdate();
   })
 
   return (
@@ -74,7 +91,7 @@ const App = () => {
         >
           <ArticleContainer
             article={window.omnivoreArticle}
-            labels={labels}
+            labels={window.omnivoreArticle.labels}
             isAppleAppEmbed={true}
             highlightBarDisabled={!window.enableHighlightBar}
             highlightsBaseURL="https://example.com"

packages/web/package.json

@@ -38,6 +38,7 @@
     "downshift": "^6.1.9",
     "graphql-request": "^3.6.1",
     "kbar": "^0.1.0-beta.35",
+    "markdown-escape": "^2.0.0",
     "nanoid": "^3.1.29",
     "next": "^12.1.0",
     "phosphor-react": "^1.4.0",
@@ -74,6 +75,7 @@
     "@types/diff-match-patch": "^1.0.32",
     "@types/jest": "^27.0.2",
     "@types/lodash.debounce": "^4.0.6",
+    "@types/markdown-escape": "^1.1.0",
     "@types/react": "17.0.2",
     "@types/react-dom": "^17.0.2",
     "@types/segment-analytics": "^0.0.34",

yarn.lock

@@ -8371,6 +8371,11 @@
   resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.0.1.tgz#2b1657096473e24b049bdedf3710f99645f3a17f"
   integrity sha512-/LAvk1cMOJt0ghzMFrZEvByUhsiEfeeT2IF53Le+Ki3A538yEL9pRZ7a6MuCxdrYK+YNqNIDmrKU/r2nnw04zQ==
 
+"@types/markdown-escape@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@types/markdown-escape/-/markdown-escape-1.1.0.tgz#8bd940d6701880eb7229467542c029bc05a7b22f"
+  integrity sha512-bJZh73L6fSt8MmTON/btR8hiKRipoIoPfLO41lxr6l65QXdG1rwUjR8Hu5xU7XYHBwKHiJZ+sTQ8L2TKkQrBpw==
+
 "@types/markdown-it@^12.2.3":
   version "12.2.3"
   resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-12.2.3.tgz#0d6f6e5e413f8daaa26522904597be3d6cd93b51"
@@ -19235,6 +19240,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+markdown-escape@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-escape/-/markdown-escape-2.0.0.tgz#44484d30d7845b91575c77fd8898f23a0a6f890c"
+  integrity sha512-Trz4v0+XWlwy68LJIyw3bLbsJiC8XAbRCKF9DbEtZjyndKOGVx6n+wNB0VfoRmY2LKboQLeniap3xrb6LGSJ8A==
+
 markdown-escapes@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"