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

Rich Text Editor: Inline Code feature

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)
-    let active: Bool
-    /// Whether it is disabled or enabled
-    let disabled: Bool
+    /// The state of the item
+    let state: ActionState
 }
 
 /// 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,
-                disabled: wysiwygViewModel.actionStates[type.composerAction] == .disabled
+                state: 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: [
-            FormatItem(type: .bold, active: true, disabled: false),
-            FormatItem(type: .italic, active: false, disabled: false),
-            FormatItem(type: .strikethrough, active: true, disabled: false),
-            FormatItem(type: .underline, active: false, disabled: true)
-        ], formatAction: { _ in })
+        FormattingToolbar(
+            formatItems: FormatType.allCases.map { FormatItem(type: $0, state: .enabled) }
+        , formatAction: { _ in })
     }
 }