AtlasAutocode
8 months ago
committed by
GitHub
parent
80ee3f4e30
commit
40e18b2706
11 changed files with 388 additions and 55 deletions
@ -0,0 +1,68 @@ |
||||
# Search |
||||
|
||||
You can search the text of your document using the search toolbar button. |
||||
Enter the text and use the up/down buttons to move to the previous/next selection. |
||||
Use the 3 vertical dots icon to turn on case-sensitivity or whole word constraints. |
||||
|
||||
## Search configuration options |
||||
|
||||
By default, the content of Embed objects are not searched. |
||||
You can enable search by setting the [searchEmbedMode] in searchConfigurations: |
||||
|
||||
```dart |
||||
MyQuillEditor( |
||||
controller: _controller, |
||||
configurations: QuillEditorConfigurations( |
||||
searchConfigurations: const QuillSearchConfigurations( |
||||
searchEmbedMode: SearchEmbedMode.plainText, |
||||
), |
||||
), |
||||
... |
||||
), |
||||
``` |
||||
|
||||
### SearchEmbedMode.none (default option) |
||||
|
||||
Embed objects will not be included in searches. |
||||
|
||||
### SearchEmbedMode.rawData |
||||
|
||||
This is the simplest search option when your Embed objects use simple text that is also displayed to the user. |
||||
This option allows searching within custom Embed objects using the node's raw data [Embeddable.data]. |
||||
|
||||
### SearchEmbedMode.plainText |
||||
|
||||
This option is best for complex Embeds where the raw data contains text that is not visible to the user and/or contains textual data that is not suitable for searching. |
||||
For example, searching for '2024' would not be meaningful if the raw data is the full path of an image object (such as /user/temp/20240125/myimage.png). |
||||
In this case the image would be shown as a search hit but the user would not know why. |
||||
|
||||
This option allows searching within custom Embed objects using an override to the [toPlainText] method. |
||||
|
||||
```dart |
||||
class MyEmbedBuilder extends EmbedBuilder { |
||||
|
||||
@override |
||||
String toPlainText(Embed node) { |
||||
/// Convert [node] to the text that can be searched. |
||||
/// For example: convert to MyEmbeddable and use the |
||||
/// properties to return the searchable text. |
||||
final m = MyEmbeddable(node.value.data); |
||||
return '${m.property1}\t${m.property2}'; |
||||
} |
||||
... |
||||
``` |
||||
If [toPlainText] is not overridden, the base class implementation returns [Embed.kObjectReplacementCharacter] which is not searchable. |
||||
|
||||
### Strategy for mixed complex and simple Embed objects |
||||
|
||||
Select option [SearchEmbedMode.plainText] and override [toPlainText] to provide the searchable text. For your simple Embed objects provide the following override: |
||||
|
||||
```dart |
||||
class MySimpleEmbedBuilder extends EmbedBuilder { |
||||
|
||||
@override |
||||
String toPlainText(Embed node) { |
||||
return node.value.data; |
||||
} |
||||
... |
||||
``` |
||||
@ -0,0 +1,39 @@ |
||||
import 'package:flutter/foundation.dart' show immutable; |
||||
|
||||
enum SearchEmbedMode { |
||||
/// No search within Embed nodes. |
||||
none, |
||||
// Searches within Embed nodes using the nodes raw data [Embeddable.data.toString()] |
||||
rawData, |
||||
|
||||
/// Searches within Embed nodes using override to [EmbedBuilder.toPlainText] |
||||
plainText, |
||||
} |
||||
|
||||
/// The configurations for the quill editor widget of flutter quill |
||||
@immutable |
||||
class QuillSearchConfigurations { |
||||
const QuillSearchConfigurations({ |
||||
this.searchEmbedMode = SearchEmbedMode.none, |
||||
}); |
||||
|
||||
/// Search options for embed objects |
||||
/// |
||||
/// [SearchEmbedMode.none] disables searching within embed objects. |
||||
/// [SearchEmbedMode.rawData] searches the Embed node using the raw data. |
||||
/// [SearchEmbedMode.plainText] searches the Embed node using the [EmbedBuilder.toPlainText] override. |
||||
final SearchEmbedMode searchEmbedMode; |
||||
|
||||
/// Future search options |
||||
/// |
||||
/// [rememberLastSearch] - would recall the last search text used. |
||||
/// [enableSearchHistory] - would allow selection of previous searches. |
||||
|
||||
QuillSearchConfigurations copyWith({ |
||||
SearchEmbedMode? searchEmbedMode, |
||||
}) { |
||||
return QuillSearchConfigurations( |
||||
searchEmbedMode: searchEmbedMode ?? this.searchEmbedMode, |
||||
); |
||||
} |
||||
} |
||||
@ -1,5 +1,6 @@ |
||||
export '../controller/quill_controller_configurations.dart'; |
||||
export '../editor/config/editor_configurations.dart'; |
||||
export '../editor/config/search_configurations.dart'; |
||||
export '../editor_toolbar_shared/config/quill_shared_configurations.dart'; |
||||
export '../toolbar/config/simple_toolbar_configurations.dart'; |
||||
export '../toolbar/config/toolbar_configurations.dart'; |
||||
|
||||
@ -0,0 +1,146 @@ |
||||
import 'package:flutter/widgets.dart'; |
||||
import 'package:flutter_quill/flutter_quill.dart'; |
||||
import 'package:flutter_quill/quill_delta.dart'; |
||||
import 'package:test/test.dart'; |
||||
|
||||
class TestTimeStampEmbed extends Embeddable { |
||||
const TestTimeStampEmbed( |
||||
String value, |
||||
) : super(timeStampType, value); |
||||
|
||||
static const String timeStampType = 'timeStamp'; |
||||
} |
||||
|
||||
class TestTimeStampEmbedBuilderWidget extends EmbedBuilder { |
||||
const TestTimeStampEmbedBuilderWidget(); |
||||
|
||||
@override |
||||
String get key => 'timeStamp'; |
||||
|
||||
@override |
||||
String toPlainText(Embed node) { |
||||
return node.value.data.split(' ')[0]; // return date component |
||||
} |
||||
|
||||
@override |
||||
Widget build( |
||||
BuildContext context, |
||||
QuillController controller, |
||||
Embed node, |
||||
bool readOnly, |
||||
bool inline, |
||||
TextStyle textStyle, |
||||
) { |
||||
return Text(node.value.data); |
||||
} |
||||
} |
||||
|
||||
class TestUnknownEmbedBuilder extends EmbedBuilder { |
||||
const TestUnknownEmbedBuilder(); |
||||
|
||||
@override |
||||
String get key => 'unknown'; |
||||
|
||||
@override |
||||
String toPlainText(Embed node) { |
||||
return node.value.data.toString().substring(0, 5); |
||||
} |
||||
|
||||
@override |
||||
Widget build( |
||||
BuildContext context, |
||||
QuillController controller, |
||||
Embed node, |
||||
bool readOnly, |
||||
bool inline, |
||||
TextStyle textStyle, |
||||
) { |
||||
return Text(node.value.data); |
||||
} |
||||
} |
||||
|
||||
void main() { |
||||
group('search plain', () { |
||||
test('search plain', () { |
||||
final delta = Delta() |
||||
..insert('Abc de\nfGhi') |
||||
..insert('kl', {'bold': true}) |
||||
..insert('demnoDe\n match whole word who\n'); |
||||
final document = Document.fromDelta(delta); |
||||
|
||||
expect(document.search('de'), [4, 13, 18]); |
||||
expect(document.search('lde'), [12]); |
||||
expect(document.search('a'), [0, 23]); |
||||
|
||||
expect(document.search('de', caseSensitive: true), [4, 13]); |
||||
expect(document.search('De', caseSensitive: true), [18]); |
||||
|
||||
expect(document.search('who'), [28, 39]); |
||||
expect(document.search('whole', wholeWord: true), [28]); |
||||
expect(document.search('who', wholeWord: true), [39]); |
||||
}); |
||||
|
||||
test('search embed', () { |
||||
final delta = Delta() |
||||
..insert('Test ') |
||||
..insert({ |
||||
'image': 'https://unknown08.com/7900d52.png' |
||||
}, { |
||||
'width': '230', |
||||
'style': {'display': 'block', 'margin': 'auto'} |
||||
}) |
||||
..insert('\n') |
||||
..insert({'timeStamp': '2024-08-03 18:03:37.790068'}) |
||||
..insert('\n'); |
||||
final document = Document.fromDelta(delta); |
||||
|
||||
/// Default does not search embeds |
||||
expect(document.search('2024'), [], reason: 'Does not search embeds'); |
||||
|
||||
/// Test rawData mode |
||||
document.editorConfigurations = const QuillEditorConfigurations( |
||||
searchConfigurations: QuillSearchConfigurations( |
||||
searchEmbedMode: SearchEmbedMode.rawData)); |
||||
expect(document.search('18'), [7], reason: 'raw data finds timeStamp'); |
||||
expect(document.search('d52'), [5], reason: 'raw data finds image'); |
||||
expect(document.search('08'), [5, 7], |
||||
reason: 'raw data finds both embeds'); |
||||
// |
||||
document.editorConfigurations = const QuillEditorConfigurations( |
||||
searchConfigurations: QuillSearchConfigurations( |
||||
searchEmbedMode: SearchEmbedMode.plainText)); |
||||
expect(document.search('2024'), [], reason: 'No embed builders'); |
||||
|
||||
/// Test plainText mode |
||||
document.editorConfigurations = const QuillEditorConfigurations( |
||||
searchConfigurations: QuillSearchConfigurations( |
||||
searchEmbedMode: SearchEmbedMode.plainText), |
||||
embedBuilders: [ |
||||
TestTimeStampEmbedBuilderWidget(), |
||||
], |
||||
); |
||||
expect(document.search('2024'), [7], |
||||
reason: 'timeStamp embed builder overrides toPlainText'); |
||||
expect(document.search('18'), [], |
||||
reason: 'timeStamp overrides toPlainText returns date not time'); |
||||
expect(document.search('08'), [7], |
||||
reason: 'image does not override toPlainText'); |
||||
|
||||
/// Test unknownEmbedBuilder |
||||
document.editorConfigurations = const QuillEditorConfigurations( |
||||
searchConfigurations: QuillSearchConfigurations( |
||||
searchEmbedMode: SearchEmbedMode.plainText), |
||||
embedBuilders: [ |
||||
TestTimeStampEmbedBuilderWidget(), |
||||
], |
||||
unknownEmbedBuilder: TestUnknownEmbedBuilder()); |
||||
expect(document.search('7900'), [], |
||||
reason: |
||||
'image not found because unknown returns first 5 chars of rawData'); |
||||
expect(document.search('https'), [5], |
||||
reason: |
||||
'image found because unknown returns first 5 chars of rawData'); |
||||
expect(document.search('http'), [5]); |
||||
}); |
||||
}); |
||||
} |
||||
Loading…
Reference in new issue