ios: fix layout for messages in right-to-left languages, #1032 (#1117)

* ios: fix layout for messages in right-to-left languages, #1032

* text alignment in compose message view

* more right-to-left alignment

apps/ios/Shared/Views/Chat/ChatItem/FramedItemView.swift

@@ -159,13 +159,16 @@ struct FramedItemView: View {
     }
 
     @ViewBuilder private func ciMsgContentView(_ ci: ChatItem, _ showMember: Bool = false) -> some View {
+        let rtl = isRightToLeft(chatItem.text)
         let v = MsgContentView(
             text: ci.text,
             formattedText: ci.formattedText,
             sender: showMember ? ci.memberDisplayName : nil,
             metaText: ci.timestampText,
-            edited: ci.meta.itemEdited
+            edited: ci.meta.itemEdited,
+            rightToLeft: rtl
         )
+        .multilineTextAlignment(rtl ? .trailing : .leading)
         .padding(.vertical, 6)
         .padding(.horizontal, 12)
         .overlay(DetermineWidth())
@@ -180,6 +183,13 @@ struct FramedItemView: View {
     }
 }
 
+func isRightToLeft(_ s: String) -> Bool {
+    if let lang = CFStringTokenizerCopyBestStringLanguage(s as CFString, CFRange(location: 0, length: min(s.count, 80))) {
+        return NSLocale.characterDirection(forLanguage: lang as String) == .rightToLeft
+    }
+    return false
+}
+
 private struct MetaColorPreferenceKey: PreferenceKey {
     static var defaultValue = Color.secondary
     static func reduce(value: inout Color, nextValue: () -> Color) {

apps/ios/Shared/Views/Chat/ChatItem/MsgContentView.swift

@@ -18,6 +18,7 @@ struct MsgContentView: View {
     var sender: String? = nil
     var metaText: Text? = nil
     var edited = false
+    var rightToLeft = false
 
     var body: some View {
         let v = messageText(text, formattedText, sender)
@@ -29,7 +30,7 @@ struct MsgContentView: View {
     }
     
     private func reserveSpaceForMeta(_ meta: Text, _ edited: Bool) -> Text {
-        let reserve = edited ? "          " : "      "
+        let reserve = rightToLeft ? "\n" : edited ? "          " : "      "
         return (Text(reserve) + meta)
             .font(.caption)
             .foregroundColor(.clear)
@@ -40,10 +41,10 @@ func messageText(_ text: String, _ formattedText: [FormattedText]?, _ sender: St
     let s = text
     var res: Text
     if let ft = formattedText, ft.count > 0 {
-        res = formattText(ft[0], preview)
+        res = formatText(ft[0], preview)
         var i = 1
         while i < ft.count {
-            res = res + formattText(ft[i], preview)
+            res = res + formatText(ft[i], preview)
             i = i + 1
         }
     } else {
@@ -58,7 +59,7 @@ func messageText(_ text: String, _ formattedText: [FormattedText]?, _ sender: St
     }
 }
 
-private func formattText(_ ft: FormattedText, _ preview: Bool) -> Text {
+private func formatText(_ ft: FormattedText, _ preview: Bool) -> Text {
     let t = ft.text
     if let f = ft.format {
         switch (f) {

apps/ios/Shared/Views/Chat/ComposeMessage/ContextItemView.swift

@@ -27,6 +27,7 @@ struct ContextItemView: View {
                 formattedText: contextItem.formattedText,
                 sender: contextItem.memberDisplayName
             )
+            .multilineTextAlignment(isRightToLeft(contextItem.text) ? .trailing : .leading)
             .lineLimit(3)
             Spacer()
             Button {

apps/ios/Shared/Views/Chat/ComposeMessage/SendMessageView.swift

@@ -23,9 +23,11 @@ struct SendMessageView: View {
         ZStack {
             HStack(alignment: .bottom) {
                 ZStack(alignment: .leading) {
+                    let alignment: TextAlignment = isRightToLeft(composeState.message) ? .trailing : .leading
                     Text(composeState.message)
                         .lineLimit(10)
                         .font(teFont)
+                        .multilineTextAlignment(alignment)
                         .foregroundColor(.clear)
                         .padding(.horizontal, 10)
                         .padding(.vertical, 8)
@@ -35,6 +37,7 @@ struct SendMessageView: View {
                         .focused($keyboardVisible)
                         .font(teFont)
                         .textInputAutocapitalization(.sentences)
+                        .multilineTextAlignment(alignment)
                         .padding(.horizontal, 5)
                         .allowsTightening(false)
                         .frame(height: teHeight)