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';
// editor part, including editor component, block component, etc.
export 'src/editor/editor.dart';
export 'src/editor/find_replace_menu/find_and_replace.dart';
export 'src/editor/selection_menu/selection_menu.dart';
// editor state
export 'src/editor_state.dart';

View file

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

View file

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

View file

@ -68,29 +68,37 @@ class FindReplaceMenu implements FindReplaceService {
return Positioned(
top: topOffset,
right: rightOffset,
child: Material(
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),
child: style.findMenuBuilder?.call(
context,
editorState,
localizations,
style,
showReplaceMenu,
dismiss,
) ??
Material(
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),
),
],
borderRadius: BorderRadius.circular(6.0),
child: FindAndReplaceMenuWidget(
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/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';
const double _iconButtonSize = 30;

View file

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

View file

@ -1,7 +1,6 @@
import 'dart:math';
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';
class FloatingToolbarStyle {