Labs: Rich-text editor - Fix text formatting switch losing the current content of the composer

This commit is contained in:
aringenbach
2022-11-09 11:41:42 +01:00
parent 6b82ea8fd3
commit 09a2fd11dd
2 changed files with 57 additions and 45 deletions
@@ -83,60 +83,72 @@ struct Composer: View {
var body: some View {
VStack(spacing: 8) {
if viewModel.viewState.textFormattingEnabled {
composerContainer
}
HStack(alignment: .bottom, spacing: 0) {
Button {
showSendMediaActions()
} label: {
Image(Asset.Images.startComposeModule.name)
.resizable()
.foregroundColor(theme.colors.tertiaryContent)
.frame(width: 14, height: 14)
if !viewModel.viewState.textFormattingEnabled {
sendMediaButton
}
.frame(width: 36, height: 36)
.background(Circle().fill(theme.colors.system))
.padding(.trailing, 8)
.accessibilityLabel(VectorL10n.create)
if viewModel.viewState.textFormattingEnabled {
composerContainer
if !viewModel.viewState.textFormattingEnabled {
sendButton
}
}
if viewModel.viewState.textFormattingEnabled {
HStack(alignment: .center, spacing: 0) {
sendMediaButton
FormattingToolbar(formatItems: formatItems) { type in
wysiwygViewModel.apply(type.action)
}
.frame(height: 44)
Spacer()
} else {
composerContainer
}
Button {
if wysiwygViewModel.plainTextMode {
sendMessageAction(wysiwygViewModel.plainTextModeContent)
} else {
sendMessageAction(wysiwygViewModel.content)
}
wysiwygViewModel.clearContent()
} label: {
if viewModel.viewState.sendMode == .edit {
Image(Asset.Images.saveIcon.name)
} else {
Image(Asset.Images.sendIcon.name)
}
}
.frame(width: 36, height: 36)
.padding(.leading, 8)
.isHidden(!isActionButtonShowing)
.accessibilityIdentifier(actionButtonAccessibilityIdentifier)
.accessibilityLabel(VectorL10n.send)
.onChange(of: wysiwygViewModel.isContentEmpty) { isEmpty in
viewModel.send(viewAction: .contentDidChange(isEmpty: isEmpty))
withAnimation(.easeInOut(duration: 0.15)) {
isActionButtonShowing = !isEmpty
}
sendButton
}
}
.padding(.horizontal, 12)
.padding(.bottom, 4)
}
.padding(.horizontal, horizontalPadding)
.padding(.bottom, 4)
}
private var sendButton: some View {
return Button {
if wysiwygViewModel.plainTextMode {
sendMessageAction(wysiwygViewModel.plainTextModeContent)
} else {
sendMessageAction(wysiwygViewModel.content)
}
wysiwygViewModel.clearContent()
} label: {
if viewModel.viewState.sendMode == .edit {
Image(Asset.Images.saveIcon.name)
} else {
Image(Asset.Images.sendIcon.name)
}
}
.frame(width: 36, height: 36)
.padding(.leading, 8)
.isHidden(!isActionButtonShowing)
.accessibilityIdentifier(actionButtonAccessibilityIdentifier)
.accessibilityLabel(VectorL10n.send)
.onChange(of: wysiwygViewModel.isContentEmpty) { isEmpty in
viewModel.send(viewAction: .contentDidChange(isEmpty: isEmpty))
withAnimation(.easeInOut(duration: 0.15)) {
isActionButtonShowing = !isEmpty
}
}
}
private var sendMediaButton: some View {
return Button {
showSendMediaActions()
} label: {
Image(Asset.Images.startComposeModule.name)
.resizable()
.foregroundColor(theme.colors.tertiaryContent)
.frame(width: 14, height: 14)
}
.frame(width: 36, height: 36)
.background(Circle().fill(theme.colors.system))
.padding(.trailing, 8)
.accessibilityLabel(VectorL10n.create)
}
private var composerContainer: some View {
@@ -200,7 +212,6 @@ struct Composer: View {
.clipShape(rect)
.overlay(rect.stroke(borderColor, lineWidth: 1))
.animation(.easeInOut(duration: resizeAnimationDuration), value: wysiwygViewModel.idealHeight)
.padding(.horizontal, horizontalPadding)
.padding(.top, 8)
.onTapGesture {
if viewModel.focused {