mirror of
https://github.com/vector-im/element-ios.git
synced 2024-09-28 23:32:41 +00:00
Merge pull request #7169 from vector-im/mauroromito/inline_code
Rich Text Editor: Inline Code feature
This commit is contained in:
commit
7428273eec
9 changed files with 46 additions and 18 deletions
|
@ -23,7 +23,7 @@
|
|||
"kind" : "remoteSourceControl",
|
||||
"location" : "https://github.com/matrix-org/matrix-wysiwyg-composer-swift",
|
||||
"state" : {
|
||||
"revision" : "55266ea8f338e9c1d5c4db375713b3f902317b00"
|
||||
"revision" : "534ee5bae5e8de69ed398937b5edb7b5f21551d2"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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")
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
1
changelog.d/7177.feature
Normal file
|
@ -0,0 +1 @@
|
|||
Rich Text Composer: added inline code formatting feature.
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue