Skip to content

Commit

Permalink
fix: background color issues (AppFlowy-IO#530)
Browse files Browse the repository at this point in the history
  • Loading branch information
@LucasXu0
LucasXu0 authored Oct 11, 2023
1 parent b5f8bd1 commit 31403c9
Show file tree
Hide file tree
Showing 20 changed files with 157 additions and 91 deletions.
2 changes: 1 addition & 1 deletion example/lib/pages/mobile_editor.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ class _MobileEditorState extends State<MobileEditor> {
fontWeight: FontWeight.w600,
),
);
map[ParagraphBlockKeys.type] = TextBlockComponentBuilder(
map[ParagraphBlockKeys.type] = ParagraphBlockComponentBuilder(
configuration: BlockComponentConfiguration(
placeholderText: (node) => 'Type something...',
),
Expand Down
18 changes: 17 additions & 1 deletion lib/src/editor/block_component/base_component/selection/block_selection_container.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,16 +50,32 @@ class BlockSelectionContainer extends StatelessWidget {
? AlignmentDirectional.topStart
: AlignmentDirectional.topEnd,
children: [
// block selection or selection area
BlockSelectionArea(
node: node,
delegate: delegate,
listenable: listenable,
cursorColor: cursorColor,
selectionColor: selectionColor,
blockColor: blockColor,
supportTypes: supportTypes,
supportTypes: supportTypes
.where(
(element) => element != BlockSelectionType.cursor,
)
.toList(),
),
child,
// cursor
if (supportTypes.contains(BlockSelectionType.cursor))
BlockSelectionArea(
node: node,
delegate: delegate,
listenable: listenable,
cursorColor: cursorColor,
selectionColor: selectionColor,
blockColor: blockColor,
supportTypes: const [BlockSelectionType.cursor],
),
],
);
}
Expand Down
2 changes: 1 addition & 1 deletion lib/src/editor/block_component/block_component.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export 'image_block_component/resizable_image.dart';
// numbered list
export 'numbered_list_block_component/numbered_list_block_component.dart';
export 'numbered_list_block_component/numbered_list_character_shortcut.dart';
export 'paragraph_block_component/paragraph_block_component.dart';
// quote
export 'quote_block_component/quote_block_component.dart';
export 'quote_block_component/quote_character_shortcut.dart';
Expand All @@ -47,7 +48,6 @@ export 'table_block_component/table_action.dart';
export 'table_block_component/table_block_component.dart';
export 'table_block_component/table_cell_block_component.dart';
export 'table_block_component/table_commands.dart';
export 'text_block_component/text_block_component.dart';
// to-do list
export 'todo_list_block_component/todo_list_block_component.dart';
export 'todo_list_block_component/todo_list_character_shortcut.dart';
Expand Down
31 changes: 15 additions & 16 deletions ...c/editor/block_component/bulleted_list_block_component/bulleted_list_block_component.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,6 @@ class _BulletedListBlockComponentWidgetState
);

Widget child = Container(
color: withBackgroundColor ? backgroundColor : null,
width: double.infinity,
alignment: alignment,
child: Row(
Expand Down Expand Up @@ -155,10 +154,13 @@ class _BulletedListBlockComponentWidgetState
),
);

child = Padding(
key: blockComponentKey,
padding: padding,
child: child,
child = Container(
color: withBackgroundColor ? backgroundColor : null,
child: Padding(
key: blockComponentKey,
padding: padding,
child: child,
),
);

child = BlockSelectionContainer(
Expand Down Expand Up @@ -215,17 +217,14 @@ class _BulletedListIcon extends StatelessWidget {

@override
Widget build(BuildContext context) {
return SizedBox(
width: 22,
height: 22,
child: Padding(
padding: const EdgeInsets.only(right: 5.0),
child: Center(
child: Text(
icon,
style: textStyle,
textScaleFactor: 0.5,
),
return Container(
constraints: const BoxConstraints(minWidth: 26, minHeight: 22),
padding: const EdgeInsets.only(right: 4.0),
child: Center(
child: Text(
icon,
style: textStyle,
textScaleFactor: 0.5,
),
),
);
Expand Down
12 changes: 7 additions & 5 deletions lib/src/editor/block_component/heading_block_component/heading_block_component.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,6 @@ class _HeadingBlockComponentWidgetState
);

Widget child = Container(
color: backgroundColor,
width: double.infinity,
alignment: alignment,
// Related issue: https://github.com/AppFlowy-IO/AppFlowy/issues/3175
Expand Down Expand Up @@ -170,10 +169,13 @@ class _HeadingBlockComponentWidgetState
),
);

child = Padding(
key: blockComponentKey,
padding: padding,
child: child,
child = Container(
color: backgroundColor,
child: Padding(
key: blockComponentKey,
padding: padding,
child: child,
),
);

child = BlockSelectionContainer(
Expand Down
6 changes: 3 additions & 3 deletions lib/src/editor/block_component/image_block_component/image_upload_widget.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,16 +38,16 @@ void showImageMenu(
}
menuService.dismiss();
imageMenuEntry.remove();
keepEditorFocusNotifier.value -= 1;
keepEditorFocusNotifier.decrease();
}

keepEditorFocusNotifier.value += 1;
keepEditorFocusNotifier.increase();
imageMenuEntry = FullScreenOverlayEntry(
left: left,
right: right,
top: top,
bottom: bottom,
dismissCallback: () => keepEditorFocusNotifier.value -= 1,
dismissCallback: () => keepEditorFocusNotifier.decrease(),
builder: (context) => UploadImageMenu(
backgroundColor: menuService.style.selectionMenuBackgroundColor,
headerColor: menuService.style.selectionMenuItemTextColor,
Expand Down
31 changes: 18 additions & 13 deletions ...c/editor/block_component/numbered_list_block_component/numbered_list_block_component.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,6 @@ class _NumberedListBlockComponentWidgetState
);

Widget child = Container(
color: withBackgroundColor ? backgroundColor : null,
width: double.infinity,
alignment: alignment,
child: Row(
Expand Down Expand Up @@ -161,10 +160,13 @@ class _NumberedListBlockComponentWidgetState
),
);

child = Padding(
key: blockComponentKey,
padding: padding,
child: child,
child = Container(
color: withBackgroundColor ? backgroundColor : null,
child: Padding(
key: blockComponentKey,
padding: padding,
child: child,
),
);

child = BlockSelectionContainer(
Expand Down Expand Up @@ -206,15 +208,18 @@ class _NumberedListIcon extends StatelessWidget {
final editorState = context.read<EditorState>();
final text = editorState.editorStyle.textStyleConfiguration.text;
final level = _NumberedListIconBuilder(node: node).level;
return Padding(
padding: const EdgeInsets.only(right: 5.0),
child: Text.rich(
textHeightBehavior: const TextHeightBehavior(
applyHeightToFirstAscent: false,
applyHeightToLastDescent: false,
return Container(
constraints: const BoxConstraints(minWidth: 26, minHeight: 22),
padding: const EdgeInsets.only(right: 4.0),
child: Center(
child: Text.rich(
textHeightBehavior: const TextHeightBehavior(
applyHeightToFirstAscent: false,
applyHeightToLastDescent: false,
),
TextSpan(text: '$level.', style: text.combine(textStyle)),
textDirection: direction,
),
TextSpan(text: '$level.', style: text.combine(textStyle)),
textDirection: direction,
),
);
}
Expand Down
29 changes: 16 additions & 13 deletions ...block_component/text_block_component.dart → ..._component/paragraph_block_component.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,15 @@ Node paragraphNode({
);
}

class TextBlockComponentBuilder extends BlockComponentBuilder {
TextBlockComponentBuilder({
class ParagraphBlockComponentBuilder extends BlockComponentBuilder {
ParagraphBlockComponentBuilder({
super.configuration,
});

@override
BlockComponentWidget build(BlockComponentContext blockComponentContext) {
final node = blockComponentContext.node;
return TextBlockComponentWidget(
return ParagraphBlockComponentWidget(
node: node,
key: node.key,
configuration: configuration,
Expand All @@ -59,8 +59,8 @@ class TextBlockComponentBuilder extends BlockComponentBuilder {
}
}

class TextBlockComponentWidget extends BlockComponentStatefulWidget {
const TextBlockComponentWidget({
class ParagraphBlockComponentWidget extends BlockComponentStatefulWidget {
const ParagraphBlockComponentWidget({
super.key,
required super.node,
super.showActions,
Expand All @@ -69,11 +69,12 @@ class TextBlockComponentWidget extends BlockComponentStatefulWidget {
});

@override
State<TextBlockComponentWidget> createState() =>
_TextBlockComponentWidgetState();
State<ParagraphBlockComponentWidget> createState() =>
_ParagraphBlockComponentWidgetState();
}

class _TextBlockComponentWidgetState extends State<TextBlockComponentWidget>
class _ParagraphBlockComponentWidgetState
extends State<ParagraphBlockComponentWidget>
with
SelectableMixin,
DefaultSelectableMixin,
Expand Down Expand Up @@ -133,7 +134,6 @@ class _TextBlockComponentWidgetState extends State<TextBlockComponentWidget>
);

Widget child = Container(
color: withBackgroundColor ? backgroundColor : null,
width: double.infinity,
alignment: alignment,
child: Column(
Expand Down Expand Up @@ -161,10 +161,13 @@ class _TextBlockComponentWidgetState extends State<TextBlockComponentWidget>
),
);

child = Padding(
key: blockComponentKey,
padding: padding,
child: child,
child = Container(
color: withBackgroundColor ? backgroundColor : null,
child: Padding(
key: blockComponentKey,
padding: padding,
child: child,
),
);

child = BlockSelectionContainer(
Expand Down
28 changes: 18 additions & 10 deletions lib/src/editor/block_component/quote_block_component/quote_block_component.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,6 @@ class _QuoteBlockComponentWidgetState extends State<QuoteBlockComponentWidget>
);

Widget child = Container(
color: backgroundColor,
width: double.infinity,
alignment: alignment,
child: IntrinsicHeight(
Expand Down Expand Up @@ -150,10 +149,13 @@ class _QuoteBlockComponentWidgetState extends State<QuoteBlockComponentWidget>
),
);

child = Padding(
key: blockComponentKey,
padding: padding,
child: child,
child = Container(
color: backgroundColor,
child: Padding(
key: blockComponentKey,
padding: padding,
child: child,
),
);

child = BlockSelectionContainer(
Expand Down Expand Up @@ -184,11 +186,17 @@ class _QuoteIcon extends StatelessWidget {

@override
Widget build(BuildContext context) {
return const EditorSvg(
width: 20,
height: 20,
padding: EdgeInsets.only(right: 5.0),
name: 'quote',
return Container(
constraints: const BoxConstraints(minWidth: 26, minHeight: 22),
padding: const EdgeInsets.only(right: 4.0),
child: const Center(
child: EditorSvg(
width: 20,
height: 20,
padding: EdgeInsets.only(right: 4.0),
name: 'quote',
),
),
);
}
}
2 changes: 1 addition & 1 deletion lib/src/editor/block_component/standard_block_components.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const standardBlockComponentConfiguration = BlockComponentConfiguration();

final Map<String, BlockComponentBuilder> standardBlockComponentBuilderMap = {
PageBlockKeys.type: PageBlockComponentBuilder(),
ParagraphBlockKeys.type: TextBlockComponentBuilder(
ParagraphBlockKeys.type: ParagraphBlockComponentBuilder(
configuration: standardBlockComponentConfiguration.copyWith(
placeholderText: (_) => PlatformExtension.isDesktopOrWeb
? AppFlowyEditorLocalizations.current.slashPlaceHolder
Expand Down
25 changes: 15 additions & 10 deletions lib/src/editor/block_component/todo_list_block_component/todo_list_block_component.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,6 @@ class _TodoListBlockComponentWidgetState
);

Widget child = Container(
color: withBackgroundColor ? backgroundColor : null,
width: double.infinity,
alignment: alignment,
child: Row(
Expand Down Expand Up @@ -173,10 +172,13 @@ class _TodoListBlockComponentWidgetState
),
);

child = Padding(
key: blockComponentKey,
padding: padding,
child: child,
child = Container(
color: withBackgroundColor ? backgroundColor : null,
child: Padding(
key: blockComponentKey,
padding: padding,
child: child,
),
);

child = BlockSelectionContainer(
Expand Down Expand Up @@ -236,11 +238,14 @@ class _TodoListIcon extends StatelessWidget {
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: onTap,
child: EditorSvg(
width: 22,
height: 22,
padding: const EdgeInsets.only(right: 5.0),
name: checked ? 'check' : 'uncheck',
child: Container(
constraints: const BoxConstraints(minWidth: 26, minHeight: 22),
padding: const EdgeInsets.only(right: 4.0),
child: EditorSvg(
width: 22,
height: 22,
name: checked ? 'check' : 'uncheck',
),
),
),
);
Expand Down
Loading

0 comments on commit 31403c9

Please sign in to comment.