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

Rich Text Editor: Inline Code feature
This commit is contained in:
Velin92 2022-12-16 18:37:04 +01:00 committed by GitHub
commit 7428273eec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 46 additions and 18 deletions

View file

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

View file

@ -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";

View file

@ -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")

View file

@ -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() {

View file

@ -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
}
}
}

View file

@ -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
)
}
}

View file

@ -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 })
}
}

1
changelog.d/7177.feature Normal file
View file

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

View file

@ -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