feat: make find and replace feature more customziable

This commit is contained in:
Lucas.Xu 2023-10-01 23:43:13 +08:00
commit 73919285f3
7 changed files with 45 additions and 25 deletions

View file

@ -9,6 +9,7 @@ export 'src/editor/block_component/rich_text/appflowy_rich_text_keys.dart';
export 'src/editor/block_component/rich_text/default_selectable_mixin.dart'; export 'src/editor/block_component/rich_text/default_selectable_mixin.dart';
// editor part, including editor component, block component, etc. // editor part, including editor component, block component, etc.
export 'src/editor/editor.dart'; export 'src/editor/editor.dart';
export 'src/editor/find_replace_menu/find_and_replace.dart';
export 'src/editor/selection_menu/selection_menu.dart'; export 'src/editor/selection_menu/selection_menu.dart';
// editor state // editor state
export 'src/editor_state.dart'; export 'src/editor_state.dart';

View file

@ -24,12 +24,23 @@ class FindReplaceStyle {
FindReplaceStyle({ FindReplaceStyle({
this.selectedHighlightColor = const Color(0xFFFFB931), this.selectedHighlightColor = const Color(0xFFFFB931),
this.unselectedHighlightColor = const Color(0x60ECBC5F), this.unselectedHighlightColor = const Color(0x60ECBC5F),
this.findMenuBuilder,
}); });
//selected highlight color is used as background color on the selected found pattern. //selected highlight color is used as background color on the selected found pattern.
final Color selectedHighlightColor; final Color selectedHighlightColor;
//unselected highlight color is used on every other found pattern which can be selected. //unselected highlight color is used on every other found pattern which can be selected.
final Color unselectedHighlightColor; final Color unselectedHighlightColor;
// find menu builder
Widget Function(
BuildContext context,
EditorState editorState,
FindReplaceLocalizations? localizations,
FindReplaceStyle style,
bool showReplaceMenu,
VoidCallback onDismiss,
)? findMenuBuilder;
} }
class FindReplaceLocalizations { class FindReplaceLocalizations {

View file

@ -0,0 +1 @@
export 'search_service_v2.dart';

View file

@ -68,29 +68,37 @@ class FindReplaceMenu implements FindReplaceService {
return Positioned( return Positioned(
top: topOffset, top: topOffset,
right: rightOffset, right: rightOffset,
child: Material( child: style.findMenuBuilder?.call(
borderRadius: BorderRadius.circular(8.0), context,
child: DecoratedBox( editorState,
decoration: BoxDecoration( localizations,
color: editorState.editorStyle.selectionColor, style,
boxShadow: [ showReplaceMenu,
BoxShadow( dismiss,
blurRadius: 5, ) ??
spreadRadius: 1, Material(
color: Colors.black.withOpacity(0.1), borderRadius: BorderRadius.circular(8.0),
child: DecoratedBox(
decoration: BoxDecoration(
color: editorState.editorStyle.selectionColor,
boxShadow: [
BoxShadow(
blurRadius: 5,
spreadRadius: 1,
color: Colors.black.withOpacity(0.1),
),
],
borderRadius: BorderRadius.circular(6.0),
), ),
], child: FindAndReplaceMenuWidget(
borderRadius: BorderRadius.circular(6.0), onDismiss: dismiss,
editorState: editorState,
showReplaceMenu: showReplaceMenu,
localizations: localizations,
style: style,
),
),
), ),
child: FindAndReplaceMenuWidget(
onDismiss: dismiss,
editorState: editorState,
showReplaceMenu: showReplaceMenu,
localizations: localizations,
style: style,
),
),
),
); );
}, },
); );

View file

@ -1,6 +1,5 @@
import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:appflowy_editor/src/editor/find_replace_menu/find_replace_menu_icon_button.dart'; import 'package:appflowy_editor/src/editor/find_replace_menu/find_replace_menu_icon_button.dart';
import 'package:appflowy_editor/src/editor/find_replace_menu/search_service_v2.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
const double _iconButtonSize = 30; const double _iconButtonSize = 30;

View file

@ -111,8 +111,9 @@ class SearchServiceV2 {
// we can't scroll to the index without animation. // we can't scroll to the index without animation.
// so we just scroll the position if the index is the first or the last. // so we just scroll the position if the index is the first or the last.
final length = matchedPositions.value.length - 1; final length = matchedPositions.value.length - 1;
if ((_prevSelectedIndex == length && selectedIndex == 0) || if (_prevSelectedIndex != selectedIndex &&
(_prevSelectedIndex == 0 && selectedIndex == length)) { ((_prevSelectedIndex == length && selectedIndex == 0) ||
(_prevSelectedIndex == 0 && selectedIndex == length))) {
editorState.scrollService?.jumpTo(start.path.first); editorState.scrollService?.jumpTo(start.path.first);
} }

View file

@ -1,7 +1,6 @@
import 'dart:math'; import 'dart:math';
import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:appflowy_editor/src/editor/find_replace_menu/search_service_v2.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
class FloatingToolbarStyle { class FloatingToolbarStyle {