Merge pull request #7169 from vector-im/mauroromito/inline_code

Rich Text Editor: Inline Code feature

Riot.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -23,7 +23,7 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/matrix-org/matrix-wysiwyg-composer-swift",
       "state" : {
-        "revision" : "55266ea8f338e9c1d5c4db375713b3f902317b00"
+        "revision" : "534ee5bae5e8de69ed398937b5edb7b5f21551d2"
       }
     },
     {

Riot/Assets/en.lproj/Vector.strings

@@ -2550,6 +2550,7 @@ To enable access, tap Settings> Location and select Always";
 "wysiwyg_composer_format_action_underline" = "Apply strikethrough format";
 "wysiwyg_composer_format_action_strikethrough" = "Apply underline format";
 "wysiwyg_composer_format_action_link" = "Apply link format";
+"wysiwyg_composer_format_action_inline_code" = "Apply inline code format";
 
 // Links
 "wysiwyg_composer_link_action_text" = "Text";

Riot/Generated/Strings.swift

@@ -9311,6 +9311,10 @@ public class VectorL10n: NSObject {
   public static var wysiwygComposerFormatActionBold: String { 
     return VectorL10n.tr("Vector", "wysiwyg_composer_format_action_bold") 
   }
+  /// Apply inline code format
+  public static var wysiwygComposerFormatActionInlineCode: String { 
+    return VectorL10n.tr("Vector", "wysiwyg_composer_format_action_inline_code") 
+  }
   /// Apply italic format
   public static var wysiwygComposerFormatActionItalic: String { 
     return VectorL10n.tr("Vector", "wysiwyg_composer_format_action_italic") 

Riot/Modules/Room/Views/WYSIWYGInputToolbar/WysiwygInputToolbarView.swift

@@ -44,7 +44,8 @@ class WysiwygInputToolbarView: MXKRoomInputToolbarView, NibLoadable, HtmlRoomInp
     private var hostingViewController: VectorHostingController!
     private var wysiwygViewModel = WysiwygComposerViewModel(
         textColor: ThemeService.shared().theme.colors.primaryContent,
-        linkColor: ThemeService.shared().theme.colors.accent
+        linkColor: ThemeService.shared().theme.colors.accent,
+        codeBackgroundColor: ThemeService.shared().theme.selectedBackgroundColor
     )
     private var viewModel: ComposerViewModelProtocol!
     
@@ -299,6 +300,7 @@ class WysiwygInputToolbarView: MXKRoomInputToolbarView, NibLoadable, HtmlRoomInp
         hostingViewController.view.backgroundColor = theme.colors.background
         wysiwygViewModel.textColor = theme.colors.primaryContent
         wysiwygViewModel.linkColor = theme.colors.accent
+        wysiwygViewModel.codeBackgroundColor = theme.selectedBackgroundColor
     }
     
     private func updateTextViewHeight() {

RiotSwiftUI/Modules/Room/Composer/Model/ComposerModels.swift

@@ -24,10 +24,8 @@ import WysiwygComposer
 struct FormatItem {
     /// The type of the item
     let type: FormatType
-    /// Whether it is active(highlighted)
+    /// The state of the item
-    let active: Bool
+    let state: ActionState
-    /// Whether it is disabled or enabled
-    let disabled: Bool
 }
 
 /// The types of formatting actions
@@ -36,6 +34,7 @@ enum FormatType {
     case italic
     case underline
     case strikethrough
+    case inlineCode
     case link
 }
 
@@ -61,6 +60,8 @@ extension FormatItem {
             return Asset.Images.underlined.name
         case .link:
             return Asset.Images.link.name
+        case .inlineCode:
+            return Asset.Images.code.name
         }
     }
     
@@ -76,6 +77,8 @@ extension FormatItem {
             return "underlineButton"
         case .link:
             return "linkButton"
+        case .inlineCode:
+            return "inlineCodeButton"
         }
     }
     
@@ -91,6 +94,8 @@ extension FormatItem {
             return VectorL10n.wysiwygComposerFormatActionUnderline
         case .link:
             return VectorL10n.wysiwygComposerFormatActionLink
+        case .inlineCode:
+            return VectorL10n.wysiwygComposerFormatActionInlineCode
         }
     }
 }
@@ -109,6 +114,8 @@ extension FormatType {
             return .underline
         case .link:
             return .link
+        case .inlineCode:
+            return .inlineCode
         }
     }
     
@@ -126,6 +133,8 @@ extension FormatType {
             return .underline
         case .link:
             return .link
+        case .inlineCode:
+            return .inlineCode
         }
     }
 }

RiotSwiftUI/Modules/Room/Composer/View/Composer.swift

@@ -74,8 +74,7 @@ struct Composer: View {
         FormatType.allCases.map { type in
             FormatItem(
                 type: type,
-                active: wysiwygViewModel.actionStates[type.composerAction] == .reversed,
+                state: wysiwygViewModel.actionStates[type.composerAction] ?? .disabled
-                disabled: wysiwygViewModel.actionStates[type.composerAction] == .disabled
             )
         }
     }

RiotSwiftUI/Modules/Room/Composer/View/FormattingToolbar.swift

@@ -39,28 +39,40 @@ struct FormattingToolbar: View {
                 } label: {
                     Image(item.icon)
                         .renderingMode(.template)
-                        .foregroundColor(item.active ? theme.colors.accent : theme.colors.tertiaryContent)
+                        .foregroundColor(getForegroundColor(for: item))
                 }
-                .disabled(item.disabled)
+                .disabled(item.state == .disabled)
                 .frame(width: 44, height: 44)
-                .background(item.active ? theme.colors.accent.opacity(0.1) : theme.colors.background)
+                .background(getBackgroundColor(for: item))
                 .cornerRadius(8)
                 .accessibilityIdentifier(item.accessibilityIdentifier)
                 .accessibilityLabel(item.accessibilityLabel)
             }
         }
     }
+    
+    private func getForegroundColor(for item: FormatItem) -> Color {
+        switch item.state {
+        case .reversed: return theme.colors.accent
+        case .enabled: return theme.colors.tertiaryContent
+        case .disabled: return theme.colors.tertiaryContent.opacity(0.3)
+        }
+    }
+    
+    private func getBackgroundColor(for item: FormatItem) -> Color {
+        switch item.state {
+        case .reversed: return theme.colors.accent.opacity(0.1)
+        default: return theme.colors.background
+        }
+    }
 }
 
 // MARK: - Previews
 
 struct FormattingToolbar_Previews: PreviewProvider {
     static var previews: some View {
-        FormattingToolbar(formatItems: [
+        FormattingToolbar(
-            FormatItem(type: .bold, active: true, disabled: false),
+            formatItems: FormatType.allCases.map { FormatItem(type: $0, state: .enabled) }
-            FormatItem(type: .italic, active: false, disabled: false),
+        , formatAction: { _ in })
-            FormatItem(type: .strikethrough, active: true, disabled: false),
-            FormatItem(type: .underline, active: false, disabled: true)
-        ], formatAction: { _ in })
     }
 }

changelog.d/7177.feature

@@ -0,0 +1 @@
+Rich Text Composer: added inline code formatting feature.

project.yml

@@ -53,7 +53,7 @@ packages:
     branch: main
   WysiwygComposer:
     url: https://github.com/matrix-org/matrix-wysiwyg-composer-swift
-    revision: 55266ea8f338e9c1d5c4db375713b3f902317b00
+    revision: 534ee5bae5e8de69ed398937b5edb7b5f21551d2
   DeviceKit:
     url: https://github.com/devicekit/DeviceKit
     majorVersion: 4.7.0