fix: mobile UI regression (#4754)

* fix: aa menu item selected status

* feat: support selecting word on iOS throught long pressing

* chore: update editor version

* feat: update add block menu colors

* feat: add scrollbar in bottom sheet

* fix: aa menu should not dimiss after changing block type

* fix: add link menu ui issues

* feat: sync bius status

* Update frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar_item.dart

Co-authored-by: Mathias Mogensen <42929161+Xazin@users.noreply.github.com>

* chore: update editor version

* fix: flutter analyze

---------

Co-authored-by: Mathias Mogensen <42929161+Xazin@users.noreply.github.com>
This commit is contained in:
Lucas.Xu 2024-02-28 12:32:24 +07:00 committed by GitHub
parent 26f8397624
commit 980bebf86a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 277 additions and 169 deletions

View File

@ -127,11 +127,13 @@ Future<T?> showMobileBottomSheet<T>(
children: [
...children,
Expanded(
child: Scrollbar(
child: SingleChildScrollView(
controller: scrollController,
child: child,
),
),
),
],
);
},

View File

@ -1,10 +1,9 @@
import 'package:flutter/material.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_date_block.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_page_block.dart';
import 'package:appflowy/workspace/presentation/widgets/date_picker/widgets/reminder_selector.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:collection/collection.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
enum MentionType {

View File

@ -141,7 +141,7 @@ class EditorMigration {
}
const backgroundColor = 'backgroundColor';
if (attributes.containsKey(backgroundColor)) {
attributes[AppFlowyRichTextKeys.highlightColor] =
attributes[AppFlowyRichTextKeys.backgroundColor] =
attributes[backgroundColor];
attributes.remove(backgroundColor);
}

View File

@ -11,6 +11,9 @@ Future<T?> showEditLinkBottomSheet<T>(
return showMobileBottomSheet(
context,
showHeader: false,
showCloseButton: false,
showDragHandle: true,
padding: const EdgeInsets.symmetric(horizontal: 16),
builder: (context) {
return MobileBottomSheetEditLinkWidget(
text: text,

View File

@ -71,7 +71,8 @@ class BIUSItems extends StatelessWidget {
setState(() {});
},
icon: icon,
isSelected: editorState.isTextDecorationSelected(richTextKey),
isSelected: editorState.isTextDecorationSelected(richTextKey) &&
editorState.toggledStyle[richTextKey] != true,
iconPadding: const EdgeInsets.symmetric(
vertical: 14.0,
),

View File

@ -68,7 +68,7 @@ class BlockItems extends StatelessWidget {
enableTopRightRadius: false,
enableBottomRightRadius: false,
onTap: () async {
await editorState.convertBlockType(blockType);
await _convert(blockType);
},
backgroundColor: theme.toolbarMenuItemBackgroundColor,
icon: icon,
@ -196,4 +196,23 @@ class BlockItems extends StatelessWidget {
);
editorState.service.keyboardService?.closeKeyboard();
}
Future<void> _convert(String blockType) async {
await editorState.convertBlockType(
blockType,
selectionExtraInfo: {
selectionExtraInfoDoNotAttachTextService: true,
selectionExtraInfoDisableFloatingToolbar: true,
},
);
unawaited(
editorState.updateSelectionWithReason(
editorState.selection,
extraInfo: {
selectionExtraInfoDisableFloatingToolbar: true,
selectionExtraInfoDoNotAttachTextService: true,
},
),
);
}
}

View File

@ -70,7 +70,7 @@ class _TextColorAndBackgroundColorState
);
final String? selectedBackgroundColor =
widget.editorState.getDeltaAttributeValueInSelection(
AppFlowyRichTextKeys.highlightColor,
AppFlowyRichTextKeys.backgroundColor,
widget.selection,
);
return Column(
@ -122,7 +122,7 @@ class _TextColorAndBackgroundColorState
await widget.editorState.formatDelta(
widget.selection,
{
AppFlowyRichTextKeys.highlightColor: hex,
AppFlowyRichTextKeys.backgroundColor: hex,
},
selectionExtraInfo: {
selectionExtraInfoDisableFloatingToolbar: true,

View File

@ -15,6 +15,7 @@ final aaToolbarItem = AppFlowyMobileToolbarItem(
pilotAtExpandedSelection: true,
itemBuilder: (context, editorState, service, onMenu, _) {
return AppFlowyMobileToolbarIconItem(
editorState: editorState,
isSelected: () => service.showMenuNotifier.value,
keepSelectedStatus: true,
icon: FlowySvgs.m_toolbar_aa_s,

View File

@ -18,6 +18,7 @@ import 'package:go_router/go_router.dart';
final addBlockToolbarItem = AppFlowyMobileToolbarItem(
itemBuilder: (context, editorState, service, __, onAction) {
return AppFlowyMobileToolbarIconItem(
editorState: editorState,
icon: FlowySvgs.m_toolbar_add_s,
onTap: () {
final selection = editorState.selection;
@ -83,7 +84,7 @@ Future<bool?> showAddBlockMenu(
}
class _AddBlockMenu extends StatelessWidget {
_AddBlockMenu({
const _AddBlockMenu({
required this.selection,
required this.editorState,
});
@ -91,25 +92,47 @@ class _AddBlockMenu extends StatelessWidget {
final Selection selection;
final EditorState editorState;
late final List<TypeOptionMenuItemValue<String>> typeOptionMenuItemValue = [
@override
Widget build(BuildContext context) {
return TypeOptionMenu<String>(
values: buildTypeOptionMenuItemValues(context),
scaleFactor: context.scale,
);
}
Future<void> _insertBlock(Node node) async {
AppGlobals.rootNavKey.currentContext?.pop(true);
Future.delayed(const Duration(milliseconds: 100), () {
editorState.insertBlockAfterCurrentSelection(
selection,
node,
);
});
}
List<TypeOptionMenuItemValue<String>> buildTypeOptionMenuItemValues(
BuildContext context,
) {
final colorMap = _colorMap(context);
return [
// heading 1 - 3
TypeOptionMenuItemValue(
value: HeadingBlockKeys.type,
backgroundColor: const Color(0xFFBAC9FF),
backgroundColor: colorMap[HeadingBlockKeys.type]!,
text: LocaleKeys.editor_heading1.tr(),
icon: FlowySvgs.m_add_block_h1_s,
onTap: (_, __) => _insertBlock(headingNode(level: 1)),
),
TypeOptionMenuItemValue(
value: HeadingBlockKeys.type,
backgroundColor: const Color(0xFFBAC9FF),
backgroundColor: colorMap[HeadingBlockKeys.type]!,
text: LocaleKeys.editor_heading2.tr(),
icon: FlowySvgs.m_add_block_h2_s,
onTap: (_, __) => _insertBlock(headingNode(level: 2)),
),
TypeOptionMenuItemValue(
value: HeadingBlockKeys.type,
backgroundColor: const Color(0xFFBAC9FF),
backgroundColor: colorMap[HeadingBlockKeys.type]!,
text: LocaleKeys.editor_heading3.tr(),
icon: FlowySvgs.m_add_block_h3_s,
onTap: (_, __) => _insertBlock(headingNode(level: 3)),
@ -118,7 +141,7 @@ class _AddBlockMenu extends StatelessWidget {
// paragraph
TypeOptionMenuItemValue(
value: ParagraphBlockKeys.type,
backgroundColor: const Color(0xFFBAC9FF),
backgroundColor: colorMap[ParagraphBlockKeys.type]!,
text: LocaleKeys.editor_text.tr(),
icon: FlowySvgs.m_add_block_paragraph_s,
onTap: (_, __) => _insertBlock(paragraphNode()),
@ -127,7 +150,7 @@ class _AddBlockMenu extends StatelessWidget {
// checkbox
TypeOptionMenuItemValue(
value: TodoListBlockKeys.type,
backgroundColor: const Color(0xFF98F4CD),
backgroundColor: colorMap[TodoListBlockKeys.type]!,
text: LocaleKeys.editor_checkbox.tr(),
icon: FlowySvgs.m_add_block_checkbox_s,
onTap: (_, __) => _insertBlock(todoListNode(checked: false)),
@ -136,7 +159,7 @@ class _AddBlockMenu extends StatelessWidget {
// quote
TypeOptionMenuItemValue(
value: QuoteBlockKeys.type,
backgroundColor: const Color(0xFFFDEDA7),
backgroundColor: colorMap[QuoteBlockKeys.type]!,
text: LocaleKeys.editor_quote.tr(),
icon: FlowySvgs.m_add_block_quote_s,
onTap: (_, __) => _insertBlock(quoteNode()),
@ -145,21 +168,21 @@ class _AddBlockMenu extends StatelessWidget {
// bulleted list, numbered list, toggle list
TypeOptionMenuItemValue(
value: BulletedListBlockKeys.type,
backgroundColor: const Color(0xFFFFB9EF),
backgroundColor: colorMap[BulletedListBlockKeys.type]!,
text: LocaleKeys.editor_bulletedListShortForm.tr(),
icon: FlowySvgs.m_add_block_bulleted_list_s,
onTap: (_, __) => _insertBlock(bulletedListNode()),
),
TypeOptionMenuItemValue(
value: NumberedListBlockKeys.type,
backgroundColor: const Color(0xFFFFB9EF),
backgroundColor: colorMap[NumberedListBlockKeys.type]!,
text: LocaleKeys.editor_numberedListShortForm.tr(),
icon: FlowySvgs.m_add_block_numbered_list_s,
onTap: (_, __) => _insertBlock(numberedListNode()),
),
TypeOptionMenuItemValue(
value: ToggleListBlockKeys.type,
backgroundColor: const Color(0xFFFFB9EF),
backgroundColor: colorMap[ToggleListBlockKeys.type]!,
text: LocaleKeys.editor_toggleListShortForm.tr(),
icon: FlowySvgs.m_add_block_toggle_s,
onTap: (_, __) => _insertBlock(toggleListBlockNode()),
@ -167,8 +190,8 @@ class _AddBlockMenu extends StatelessWidget {
// image
TypeOptionMenuItemValue(
value: DividerBlockKeys.type,
backgroundColor: const Color(0xFF98F4CD),
value: ImageBlockKeys.type,
backgroundColor: colorMap[ImageBlockKeys.type]!,
text: LocaleKeys.editor_image.tr(),
icon: FlowySvgs.m_add_block_image_s,
onTap: (_, __) async {
@ -183,7 +206,7 @@ class _AddBlockMenu extends StatelessWidget {
// date
TypeOptionMenuItemValue(
value: ParagraphBlockKeys.type,
backgroundColor: const Color(0xFF91EAF5),
backgroundColor: colorMap['date']!,
text: LocaleKeys.editor_date.tr(),
icon: FlowySvgs.m_add_block_date_s,
onTap: (_, __) => _insertBlock(dateMentionNode()),
@ -192,7 +215,7 @@ class _AddBlockMenu extends StatelessWidget {
// divider
TypeOptionMenuItemValue(
value: DividerBlockKeys.type,
backgroundColor: const Color(0xFF98F4CD),
backgroundColor: colorMap[DividerBlockKeys.type]!,
text: LocaleKeys.editor_divider.tr(),
icon: FlowySvgs.m_add_block_divider_s,
onTap: (_, __) {
@ -206,21 +229,21 @@ class _AddBlockMenu extends StatelessWidget {
// callout, code, math equation
TypeOptionMenuItemValue(
value: CalloutBlockKeys.type,
backgroundColor: const Color(0xFFCABDFF),
backgroundColor: colorMap[CalloutBlockKeys.type]!,
text: LocaleKeys.document_plugins_callout.tr(),
icon: FlowySvgs.m_add_block_callout_s,
onTap: (_, __) => _insertBlock(calloutNode()),
),
TypeOptionMenuItemValue(
value: CodeBlockKeys.type,
backgroundColor: const Color(0xFFCABDFF),
backgroundColor: colorMap[CodeBlockKeys.type]!,
text: LocaleKeys.editor_codeBlockShortForm.tr(),
icon: FlowySvgs.m_add_block_code_s,
onTap: (_, __) => _insertBlock(codeBlockNode()),
),
TypeOptionMenuItemValue(
value: MathEquationBlockKeys.type,
backgroundColor: const Color(0xFFCABDFF),
backgroundColor: colorMap[MathEquationBlockKeys.type]!,
text: LocaleKeys.editor_mathEquationShortForm.tr(),
icon: FlowySvgs.m_add_block_formula_s,
onTap: (_, __) {
@ -231,23 +254,42 @@ class _AddBlockMenu extends StatelessWidget {
},
),
];
@override
Widget build(BuildContext context) {
return TypeOptionMenu<String>(
values: typeOptionMenuItemValue,
scaleFactor: context.scale,
);
}
Future<void> _insertBlock(Node node) async {
AppGlobals.rootNavKey.currentContext?.pop(true);
Future.delayed(const Duration(milliseconds: 100), () {
editorState.insertBlockAfterCurrentSelection(
selection,
node,
);
});
Map<String, Color> _colorMap(BuildContext context) {
final isDarkMode = Theme.of(context).brightness == Brightness.dark;
if (isDarkMode) {
return {
HeadingBlockKeys.type: const Color(0xFF5465A1),
ParagraphBlockKeys.type: const Color(0xFF5465A1),
TodoListBlockKeys.type: const Color(0xFF4BB299),
QuoteBlockKeys.type: const Color(0xFFBAAC74),
BulletedListBlockKeys.type: const Color(0xFFA35F94),
NumberedListBlockKeys.type: const Color(0xFFA35F94),
ToggleListBlockKeys.type: const Color(0xFFA35F94),
ImageBlockKeys.type: const Color(0xFFBAAC74),
'date': const Color(0xFF40AAB8),
DividerBlockKeys.type: const Color(0xFF4BB299),
CalloutBlockKeys.type: const Color(0xFF66599B),
CodeBlockKeys.type: const Color(0xFF66599B),
MathEquationBlockKeys.type: const Color(0xFF66599B),
};
}
return {
HeadingBlockKeys.type: const Color(0xFFBECCFF),
ParagraphBlockKeys.type: const Color(0xFFBECCFF),
TodoListBlockKeys.type: const Color(0xFF98F4CD),
QuoteBlockKeys.type: const Color(0xFFFDEDA7),
BulletedListBlockKeys.type: const Color(0xFFFFB9EF),
NumberedListBlockKeys.type: const Color(0xFFFFB9EF),
ToggleListBlockKeys.type: const Color(0xFFFFB9EF),
ImageBlockKeys.type: const Color(0xFFFDEDA7),
'date': const Color(0xFF91EAF5),
DividerBlockKeys.type: const Color(0xFF98F4CD),
CalloutBlockKeys.type: const Color(0xFFCABDFF),
CodeBlockKeys.type: const Color(0xFFCABDFF),
MathEquationBlockKeys.type: const Color(0xFFCABDFF),
};
}
}

View File

@ -270,6 +270,11 @@ class _MobileToolbarState extends State<_MobileToolbar>
widget.editorState.selection = null;
}
// if the menu is shown and the height is not 0, we need to close the menu
if (showMenuNotifier.value && height != 0) {
closeItemMenu();
}
if (canUpdateCachedKeyboardHeight) {
cachedKeyboardHeight.value = height;
}

View File

@ -1,3 +1,5 @@
import 'dart:async';
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar.dart';
@ -42,7 +44,9 @@ class AppFlowyMobileToolbarIconItem extends StatefulWidget {
this.keepSelectedStatus = false,
this.iconBuilder,
this.isSelected,
this.shouldListenToToggledStyle = false,
required this.onTap,
required this.editorState,
});
final FlowySvgData? icon;
@ -50,6 +54,8 @@ class AppFlowyMobileToolbarIconItem extends StatefulWidget {
final VoidCallback onTap;
final WidgetBuilder? iconBuilder;
final bool Function()? isSelected;
final bool shouldListenToToggledStyle;
final EditorState editorState;
@override
State<AppFlowyMobileToolbarIconItem> createState() =>
@ -59,12 +65,28 @@ class AppFlowyMobileToolbarIconItem extends StatefulWidget {
class _AppFlowyMobileToolbarIconItemState
extends State<AppFlowyMobileToolbarIconItem> {
bool isSelected = false;
StreamSubscription? _subscription;
@override
void initState() {
super.initState();
isSelected = widget.isSelected?.call() ?? false;
if (widget.shouldListenToToggledStyle) {
widget.editorState.toggledStyleNotifier.addListener(_rebuild);
_subscription = widget.editorState.transactionStream.listen((_) {
_rebuild();
});
}
}
@override
void dispose() {
if (widget.shouldListenToToggledStyle) {
widget.editorState.toggledStyleNotifier.removeListener(_rebuild);
_subscription?.cancel();
}
super.dispose();
}
@override
@ -85,15 +107,7 @@ class _AppFlowyMobileToolbarIconItemState
behavior: HitTestBehavior.opaque,
onTap: () {
widget.onTap();
if (widget.keepSelectedStatus && widget.isSelected == null) {
setState(() {
isSelected = !isSelected;
});
} else {
setState(() {
isSelected = widget.isSelected?.call() ?? false;
});
}
_rebuild();
},
child: Container(
width: 48,
@ -111,4 +125,12 @@ class _AppFlowyMobileToolbarIconItemState
),
);
}
void _rebuild() {
setState(() {
isSelected = (widget.keepSelectedStatus && widget.isSelected == null)
? !isSelected
: widget.isSelected?.call() ?? false;
});
}
}

View File

@ -6,9 +6,13 @@ import 'package:appflowy_editor/appflowy_editor.dart';
final boldToolbarItem = AppFlowyMobileToolbarItem(
itemBuilder: (context, editorState, _, __, onAction) {
return AppFlowyMobileToolbarIconItem(
isSelected: () => editorState.isTextDecorationSelected(
editorState: editorState,
shouldListenToToggledStyle: true,
isSelected: () =>
editorState.isTextDecorationSelected(
AppFlowyRichTextKeys.bold,
),
) &&
editorState.toggledStyle[AppFlowyRichTextKeys.bold] != false,
icon: FlowySvgs.m_toolbar_bold_s,
onTap: () async => editorState.toggleAttribute(
AppFlowyRichTextKeys.bold,
@ -23,7 +27,8 @@ final boldToolbarItem = AppFlowyMobileToolbarItem(
final italicToolbarItem = AppFlowyMobileToolbarItem(
itemBuilder: (context, editorState, _, __, onAction) {
return AppFlowyMobileToolbarIconItem(
// keepSelectedStatus: true,
editorState: editorState,
shouldListenToToggledStyle: true,
isSelected: () => editorState.isTextDecorationSelected(
AppFlowyRichTextKeys.italic,
),
@ -41,6 +46,8 @@ final italicToolbarItem = AppFlowyMobileToolbarItem(
final underlineToolbarItem = AppFlowyMobileToolbarItem(
itemBuilder: (context, editorState, _, __, onAction) {
return AppFlowyMobileToolbarIconItem(
editorState: editorState,
shouldListenToToggledStyle: true,
isSelected: () => editorState.isTextDecorationSelected(
AppFlowyRichTextKeys.underline,
),
@ -58,6 +65,8 @@ final underlineToolbarItem = AppFlowyMobileToolbarItem(
final colorToolbarItem = AppFlowyMobileToolbarItem(
itemBuilder: (context, editorState, service, __, onAction) {
return AppFlowyMobileToolbarIconItem(
editorState: editorState,
shouldListenToToggledStyle: true,
icon: FlowySvgs.m_toolbar_color_s,
onTap: () {
service.closeKeyboard();

View File

@ -6,6 +6,8 @@ final todoListToolbarItem = AppFlowyMobileToolbarItem(
itemBuilder: (context, editorState, _, __, onAction) {
final isSelected = editorState.isBlockTypeSelected(TodoListBlockKeys.type);
return AppFlowyMobileToolbarIconItem(
editorState: editorState,
shouldListenToToggledStyle: true,
keepSelectedStatus: true,
isSelected: () => isSelected,
icon: FlowySvgs.m_toolbar_checkbox_s,

View File

@ -4,6 +4,7 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.da
final moreToolbarItem = AppFlowyMobileToolbarItem(
itemBuilder: (context, editorState, _, __, onAction) {
return AppFlowyMobileToolbarIconItem(
editorState: editorState,
icon: FlowySvgs.m_toolbar_more_s,
onTap: () {},
);

View File

@ -8,6 +8,7 @@ final undoToolbarItem = AppFlowyMobileToolbarItem(
itemBuilder: (context, editorState, _, __, onAction) {
final theme = ToolbarColorExtension.of(context);
return AppFlowyMobileToolbarIconItem(
editorState: editorState,
iconBuilder: (context) {
final canUndo = editorState.undoManager.undoStack.isNonEmpty;
return FlowySvg(
@ -26,6 +27,7 @@ final redoToolbarItem = AppFlowyMobileToolbarItem(
itemBuilder: (context, editorState, _, __, onAction) {
final theme = ToolbarColorExtension.of(context);
return AppFlowyMobileToolbarIconItem(
editorState: editorState,
iconBuilder: (context) {
final canRedo = editorState.undoManager.redoStack.isNonEmpty;
return FlowySvg(

View File

@ -53,8 +53,8 @@ packages:
dependency: "direct main"
description:
path: "."
ref: "9d90053"
resolved-ref: "9d9005366ba8383e93029c4f2f006f9ff8d1cb08"
ref: d4d35c0
resolved-ref: d4d35c0d103a5d1bddf68181fcfaf9f75b0fccb5
url: "https://github.com/AppFlowy-IO/appflowy-editor.git"
source: git
version: "2.3.2"

View File

@ -167,7 +167,7 @@ dependency_overrides:
appflowy_editor:
git:
url: https://github.com/AppFlowy-IO/appflowy-editor.git
ref: "9d90053"
ref: "d4d35c0"
sheet:
git: