Add handler for justify text, fix dependency issue with auto highlights

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

@@ -110,6 +110,7 @@ struct WebReader: PlatformViewRepresentable {
       (webView as? OmnivoreWebView)?.updateLineHeight()
       (webView as? OmnivoreWebView)?.updateLabels(labelsJSON: item.labelsJSONString)
       (webView as? OmnivoreWebView)?.updateTitle(title: item.title ?? "")
+      (webView as? OmnivoreWebView)?.updateJustifyText()
       webView.scrollView.indicatorStyle = ThemeManager.currentTheme.isDark ?
         UIScrollView.IndicatorStyle.white :
         UIScrollView.IndicatorStyle.black

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

@@ -122,6 +122,16 @@ public final class OmnivoreWebView: WKWebView {
     }
   }
 
+  public func updateJustifyText() {
+    do {
+      if let justify = UserDefaults.standard.value(forKey: UserDefaultKey.justifyText.rawValue) as? Bool {
+        try dispatchEvent(.updateJustifyText(justify: justify))
+      }
+    } catch {
+      showErrorInSnackbar("Error updating justify-text")
+    }
+  }
+
   public func updateTitle(title: String) {
     do {
       try dispatchEvent(.updateTitle(title: title))
@@ -419,6 +429,7 @@ public enum WebViewDispatchEvent {
   case updateColorMode(isDark: Bool)
   case updateFontFamily(family: String)
   case updateTheme(themeName: String)
+  case updateJustifyText(justify: Bool)
   case saveAnnotation(annotation: String)
   case annotate
   case highlight
@@ -456,6 +467,8 @@ public enum WebViewDispatchEvent {
       return "updateFontFamily"
     case .updateTheme:
       return "updateTheme"
+    case .updateJustifyText:
+      return "updateJustifyText"
     case .saveAnnotation:
       return "saveAnnotation"
     case .annotate:
@@ -499,6 +512,8 @@ public enum WebViewDispatchEvent {
         return "event.themeName = '\(themeName)';"
       case let .updateFontSize(size: size):
         return "event.fontSize = '\(size)';"
+      case let .updateJustifyText(justify: justify):
+        return "event.justifyText = \(justify);"
       case let .updateColorMode(isDark: isDark):
         return "event.isDark = '\(isDark)';"
       case let .updateFontFamily(family: family):

packages/appreader/src/index.jsx

@@ -81,6 +81,7 @@ const App = () => {
             lineHeight={window.lineHeight}
             highlightOnRelease={window.highlightOnRelease}
             highContrastText={window.prefersHighContrastFont ?? true}
+            justifyText={window.justifyText}
             articleMutations={{
               createHighlightMutation: (input) =>
                 mutation('createHighlight', input),

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

@@ -127,6 +127,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
   const [highContrastText, setHighContrastText] = useState(
     props.highContrastText ?? false
   )
+  const [justifyText, setJustifyText] = useState(props.justifyText ?? false)
   const highlightHref = useRef(
     window.location.hash ? window.location.hash.split('#')[1] : null
   )
@@ -163,6 +164,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
 
     const updateHighlightMode = (event: UpdateHighlightModeEvent) => {
       const isEnabled = event.enableHighlightOnRelease === 'on'
+      console.log('setting highlight on release: ', isEnabled)
       setHighlightOnRelease(isEnabled)
     }
 
@@ -228,6 +230,15 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
       updateThemeLocally(isDark === 'true' ? ThemeId.Dark : ThemeId.Light)
     }
 
+    interface UpdateJustifyText extends Event {
+      justifyText?: boolean
+    }
+
+    const updateJustifyText = (event: UpdateJustifyText) => {
+      console.log('justify', event.justifyText)
+      setJustifyText(event.justifyText ?? false)
+    }
+
     interface UpdateLabelsEvent extends Event {
       labels?: Label[]
     }
@@ -274,6 +285,8 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
       'handleFontContrastChange',
       handleFontContrastChange
     )
+    document.addEventListener('updateJustifyText', updateJustifyText)
+
     document.addEventListener('updateTitle', handleUpdateTitle)
     document.addEventListener('updateLabels', handleUpdateLabels)
 
@@ -297,6 +310,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
         'handleFontContrastChange',
         handleFontContrastChange
       )
+      document.removeEventListener('updateJustifyText', updateJustifyText)
       document.removeEventListener('updateTitle', handleUpdateTitle)
       document.removeEventListener('updateLabels', handleUpdateLabels)
       document.removeEventListener('share', share)
@@ -340,7 +354,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
           maxWidth: `${styles.maxWidthPercentage ?? 100}%`,
           background: theme.colors.readerBg.toString(),
           '.article-inner-css': {
-            textAlign: props.justifyText ? 'justify' : 'start',
+            textAlign: justifyText ? 'justify' : 'start',
           },
           '--text-font-family': styles.fontFamily,
           '--text-font-size': `${styles.fontSize}px`,

packages/web/lib/highlights/useSelection.tsx

@@ -61,13 +61,6 @@ export function useSelection(
       let shouldCancelSelection = false
       const overlapHighlights: HighlightLocation[] = []
 
-      console.log(
-        'checking highlight locations for ',
-        selectionStart,
-        selectionEnd
-      )
-      console.log(' highlight locations: ', highlightLocations)
-
       highlightLocations
         .sort((a, b) => {
           if (a.start < b.start) {
@@ -156,7 +149,7 @@ export function useSelection(
         overlapHighlights: overlapHighlights.map(({ id }) => id),
       })
     },
-    [highlightLocations]
+    [touchStartPos, selectionAttributes, highlightLocations]
   )
 
   const copyTextSelection = useCallback(async () => {