feat: new text message (1) (#15005)

* feat: new text message

src/status_im2/contexts/chat/messages/content/text/style.cljs

@@ -1 +1,19 @@
-(ns status-im2.contexts.chat.messages.content.text.style)
+(ns status-im2.contexts.chat.messages.content.text.style
+  (:require
+    [quo2.foundations.colors :as colors]))
+
+(def block
+  {:border-radius      6
+   :padding-horizontal 3
+   :transform          [{:translateY 4}]})
+
+(def quote
+  {:border-left-width 1
+   :padding-left      10
+   :border-left-color colors/neutral-40})
+
+(defn code
+  []
+  {:background-color (colors/theme-colors colors/neutral-5 colors/white-opa-5)
+   :border-width     1
+   :border-color     (colors/theme-colors colors/neutral-20 colors/white-opa-20)})

src/status_im2/contexts/chat/messages/content/text/view.cljs

@@ -1,11 +1,85 @@
 (ns status-im2.contexts.chat.messages.content.text.view
   (:require
+    [quo2.core :as quo]
+    [quo2.foundations.colors :as colors]
     [react-native.core :as rn]
-    [status-im.ui2.screens.chat.messages.message :as old-message]
-    [status-im2.contexts.chat.messages.link-preview.view :as link-preview]))
+    [status-im2.contexts.chat.messages.content.text.style :as style]
+    [status-im2.contexts.chat.messages.link-preview.view :as link-preview]
+    [utils.re-frame :as rf]))
+
+
+(defn render-inline
+  [units {:keys [type literal destination]}]
+  (case (keyword type)
+    :code
+    (conj units [rn/view {:style (merge style/block (style/code))} [quo/text {:weight :code} literal]])
+
+    :emph
+    (conj units [quo/text {:style {:font-style :italic}} literal])
+
+    :strong
+    (conj units [quo/text {:weight :bold} literal])
+
+    :strong-emph
+    (conj units
+          [quo/text
+           {:weight :bold
+            :style  {:font-style :italic}} literal])
+
+    :del
+    (conj units [quo/text {:style {:text-decoration-line :line-through}} literal])
+
+    :link
+    (conj units
+          [quo/text
+           {:style    {:color (colors/theme-colors colors/primary-50 colors/primary-60)}
+            :on-press #(rf/dispatch [:browser.ui/message-link-pressed destination])}
+           destination])
+
+    :mention
+    (conj
+     units
+     [rn/touchable-opacity
+      {:active-opacity 1
+       :on-press       #(rf/dispatch [:chat.ui/show-profile literal])
+       :style          (merge style/block {:background-color colors/primary-50-opa-10})}
+      [quo/text
+       {:weight :medium
+        :style  {:color (colors/theme-colors colors/primary-50 colors/primary-60)}}
+       (rf/sub [:contacts/contact-name-by-identity literal])]])
+
+    (conj units literal)))
+
+
+(defn render-block
+  [blocks {:keys [type ^js literal children]}]
+  (case (keyword type)
+    :paragraph
+    (conj blocks
+          (reduce
+           render-inline
+           [quo/text]
+           children))
+
+    :blockquote
+    (conj blocks
+          [rn/view {:style style/quote}
+           [quo/text literal]])
+
+    :codeblock
+    (conj blocks
+          [rn/view {:style (merge style/block (style/code))}
+           [quo/text (subs literal 0 (dec (count literal)))]])
+    blocks))
+
+(defn render-parsed-text
+  [{:keys [content]}]
+  (reduce render-block
+          [:<>]
+          (:parsed-text content)))
 
 (defn text-content
   [message-data context]
   [rn/view
-   [old-message/render-parsed-text message-data]
+   [render-parsed-text message-data]
    [link-preview/link-preview message-data context]])

src/status_im2/contexts/chat/messages/content/view.cljs

@@ -133,8 +133,7 @@
              [author message-data]
              (case content-type
 
-               constants/content-type-text
-               [not-implemented/not-implemented [content.text/text-content message-data context]]
+               constants/content-type-text [content.text/text-content message-data context]
 
                constants/content-type-emoji
                [not-implemented/not-implemented [old-message/emoji message-data]]