Use ReactText for links

Add custom rn-desktop repo path

Fix url in package-lock.json

Fix regex

Add comments

Fix errors

More

Remove package-lock change

Signed-off-by: Vitaliy Vlasov <siphiuel@gmail.com>

desktop_files/package-lock.json

@@ -1,3 +1,4 @@
+
 {
   "name": "StatusIm",
   "version": "0.0.1",
@@ -14666,3 +14667,4 @@
     }
   }
 }
+

desktop_files/package.json

@@ -55,7 +55,7 @@
     "querystring-es3": "0.2.1",
     "react": "16.4.1",
     "react-dom": "16.4.2",
-    "react-native": "git+https://github.com/status-im/react-native-desktop.git#master",
+    "react-native": "git+https://github.com/status-im/react-native-desktop.git#fix/nested-onpress-for-text",
     "react-native-background-timer": "2.0.0",
     "react-native-camera": "0.10.0",
     "react-native-config": "git+https://github.com/status-im/react-native-config.git",

src/status_im/ui/screens/desktop/main/chat/styles.cljs

@@ -119,6 +119,11 @@
   {:color (if outgoing colors/white colors/black)
    :font-size 14})
 
+(defn message-link [outgoing]
+  (assoc (message-text outgoing)
+         :color (if outgoing colors/white colors/blue)
+         :text-decoration-line :underline))
+
 (def message-container
   {:flex-direction :column
    :margin-right   16})

src/status_im/ui/screens/desktop/main/chat/views.cljs

@@ -112,30 +112,25 @@
                   :number-of-lines 5}
       text]]))
 
-(def regx-url #"(?i)(?:[a-z][\w-]+:(?:/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9\-]+[.][a-z]{1,4}/?)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:\'\".,<>?«»“”‘’]){0,}")
+;; Include both URLs and channel links in regexp
+(def regx-url #"(?i)((?:[a-z][\w-]+:(?:/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9\-]+[.][a-z]{1,4}/?)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:\'\".,<>?«»“”‘’]){0,}|#[a-z0-9\-]+)")
 
-(def regx-tag #"#[a-z0-9\-]+")
+(defn link-elem [link]
+  [react/text {:style    (styles/message-link false)
+               :on-press #(if (string/starts-with? link "#")
+                            (re-frame/dispatch [:chat.ui/start-public-chat (subs link 1)])
+                            (.openURL react/linking (http/normalize-url link)))}
+   link])
 
-(defn put-links-in-vector [text]
-  (map #(map (fn [token]
-               (cond
-                 (re-matches regx-tag token) [:tag token]
-                 (re-matches regx-url token)  [:link token]
-                 :default (str token " ")))
-             (string/split % #" "))
-       (string/split text #"\n")))
-
-(defn link-button [[link-tag link] outgoing]
-  [react/touchable-highlight {:style {}
-                              :on-press #(case link-tag
-                                           :link (.openURL react/linking (http/normalize-url link))
-                                           :tag (re-frame/dispatch [:chat.ui/start-public-chat (subs link 1) {:navigation-reset? true}]))}
-   [react/text {:style {:font-size 14
-                        :text-decoration-line :underline
-                        :color (if outgoing colors/white colors/blue)
-                        :padding-bottom 1
-                        :margin-right 5}}
-    link]])
+(defn process-message-links [text]
+  ;; JS and hence CLJS string/split will include delimiters 
+  ;; (urls and channel links in our case)
+  ;; in the result array if they are inside a group
+  (->> (string/split text regx-url)
+       (remove nil?)
+       (map #(if (re-matches regx-url %1)
+               (link-elem %1)
+               %1))))
 
 (defn- message-sent? [user-statuses current-public-key]
   (not= (get-in user-statuses [current-public-key :status]) :not-sent))
@@ -151,20 +146,10 @@
     [react/view {:style styles/message-container}
      (when (:response-to content)
        [quoted-message (:response-to content) false current-public-key])
-     [react/view {:flex-direction :column}
-      (doall
-       (for [[index-sentence sentence] (map-indexed vector (put-links-in-vector text))]
-         ^{:key (str message-id index-sentence)}
-         [react/view {:style {:flex-direction :row
-                              :flex-wrap      :wrap}}
-          (doall
-           (for [[index word] (map-indexed vector sentence)]
-             (if (vector? word)
-               ^{:key (str message-id index-sentence index)}
-               [link-button word false]
-               ^{:key (str message-id index-sentence index)}
-               [react/text {:style (styles/message-text false)}
-                word])))]))]]]])
+     (into [react/text {:style           (styles/message-text false)
+                        :selectable      true
+                        :selection-color colors/blue-light}]
+           (process-message-links text))]]])
 
 (views/defview photo-placeholder []
   [react/view {:style {:width             40