mirror of
https://github.com/flutter/samples.git
synced 2026-04-23 15:31:29 +00:00
Add simplistic editor to samples to showcase TextEditingDeltas (#1217)
* Add simplistic editor to samples * Toggle styles fix * update name * Add to CI and dependabot * update minimum dart sdk * fix pubspec * update README * Update README * Add shift + arrow key selection and copy/paste keyboard actions * Update README.md * copy edits to readme includes a sentence in each layer description whose accuracy I still need to verify * update pubspec * update pubspec.lock * Fix bug with disabling expansion of replacement when cursor is at edge of replacement Co-authored-by: Renzo Olivares <roliv@google.com> Co-authored-by: Craig Labenz <craig.labenz@gmail.com>
This commit is contained in:
Renzo Olivares
GitHub
420
simplistic_editor/lib/main.dart
Normal file
420
simplistic_editor/lib/main.dart
Normal file
@@ -0,0 +1,420 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
|
||||
import 'basic_text_field.dart';
|
||||
import 'replacements.dart';
|
||||
import 'text_editing_delta_history_manager.dart';
|
||||
import 'toggle_button_state_manager.dart';
|
||||
|
||||
void main() {
|
||||
runApp(const MyApp());
|
||||
}
|
||||
|
||||
class MyApp extends StatelessWidget {
|
||||
const MyApp({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
debugShowCheckedModeBanner: false,
|
||||
title: 'Simplistic Editor',
|
||||
theme: ThemeData(
|
||||
primarySwatch: Colors.blue,
|
||||
useMaterial3: true,
|
||||
),
|
||||
home: const MyHomePage(title: 'Simplistic Editor'),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class MyHomePage extends StatefulWidget {
|
||||
const MyHomePage({Key? key, required this.title}) : super(key: key);
|
||||
|
||||
final String title;
|
||||
|
||||
@override
|
||||
State<MyHomePage> createState() => _MyHomePageState();
|
||||
}
|
||||
|
||||
class _MyHomePageState extends State<MyHomePage> {
|
||||
final ReplacementTextEditingController _replacementTextEditingController =
|
||||
ReplacementTextEditingController(
|
||||
text: 'The quick brown fox jumps over the lazy dog.',
|
||||
);
|
||||
final FocusNode _focusNode = FocusNode();
|
||||
final List<bool> _isSelected = [false, false, false];
|
||||
final List<TextEditingDelta> _textEditingDeltaHistory = [];
|
||||
|
||||
void _updateTextEditingDeltaHistory(List<TextEditingDelta> textEditingDeltas) {
|
||||
for (final TextEditingDelta delta in textEditingDeltas) {
|
||||
_textEditingDeltaHistory.add(delta);
|
||||
}
|
||||
|
||||
setState(() {});
|
||||
}
|
||||
|
||||
List<Widget> _buildTextEditingDeltaHistoryViews(List<TextEditingDelta> textEditingDeltas) {
|
||||
List<Widget> textEditingDeltaViews = [];
|
||||
|
||||
for (final TextEditingDelta delta in textEditingDeltas) {
|
||||
final TextEditingDeltaView deltaView;
|
||||
|
||||
if (delta is TextEditingDeltaInsertion) {
|
||||
deltaView = TextEditingDeltaView(
|
||||
deltaType: delta.runtimeType.toString().replaceAll('TextEditingDelta', ''),
|
||||
deltaText: delta.textInserted,
|
||||
deltaRange: TextRange.collapsed(delta.insertionOffset),
|
||||
newSelection: delta.selection,
|
||||
newComposing: delta.composing,
|
||||
);
|
||||
} else if (delta is TextEditingDeltaDeletion) {
|
||||
deltaView = TextEditingDeltaView(
|
||||
deltaType: delta.runtimeType.toString().replaceAll('TextEditingDelta', ''),
|
||||
deltaText: delta.textDeleted,
|
||||
deltaRange: delta.deletedRange,
|
||||
newSelection: delta.selection,
|
||||
newComposing: delta.composing,
|
||||
);
|
||||
} else if (delta is TextEditingDeltaReplacement) {
|
||||
deltaView = TextEditingDeltaView(
|
||||
deltaType: delta.runtimeType.toString().replaceAll('TextEditingDelta', ''),
|
||||
deltaText: delta.replacementText,
|
||||
deltaRange: delta.replacedRange,
|
||||
newSelection: delta.selection,
|
||||
newComposing: delta.composing,
|
||||
);
|
||||
} else if (delta is TextEditingDeltaNonTextUpdate) {
|
||||
deltaView = TextEditingDeltaView(
|
||||
deltaType: delta.runtimeType.toString().replaceAll('TextEditingDelta', ''),
|
||||
deltaText: '',
|
||||
deltaRange: TextRange.empty,
|
||||
newSelection: delta.selection,
|
||||
newComposing: delta.composing,
|
||||
);
|
||||
} else {
|
||||
deltaView = const TextEditingDeltaView(
|
||||
deltaType: 'Error',
|
||||
deltaText: 'Error',
|
||||
deltaRange: TextRange.empty,
|
||||
newSelection: TextRange.empty,
|
||||
newComposing: TextRange.empty,
|
||||
);
|
||||
}
|
||||
|
||||
textEditingDeltaViews.add(deltaView);
|
||||
}
|
||||
|
||||
return textEditingDeltaViews.reversed.toList();
|
||||
}
|
||||
|
||||
void _updateToggleButtonsStateOnSelectionChanged(TextSelection selection) {
|
||||
// When the selection changes we want to check the replacements at the new
|
||||
// selection. Enable/disable toggle buttons based on the replacements found
|
||||
// at the new selection.
|
||||
final List<TextStyle> replacementStyles = _replacementTextEditingController.getReplacementsAtSelection(selection);
|
||||
final List<bool> hasChanged = [false, false, false];
|
||||
|
||||
if (replacementStyles.isEmpty) {
|
||||
_isSelected.fillRange(0, _isSelected.length, false);
|
||||
}
|
||||
|
||||
for (final TextStyle style in replacementStyles) {
|
||||
if (style.fontWeight != null && !hasChanged[0]) {
|
||||
_isSelected[0] = true;
|
||||
hasChanged[0] = true;
|
||||
}
|
||||
|
||||
if (style.fontStyle != null && !hasChanged[1]) {
|
||||
_isSelected[1] = true;
|
||||
hasChanged[1] = true;
|
||||
}
|
||||
|
||||
if (style.decoration != null && !hasChanged[2]) {
|
||||
_isSelected[2] = true;
|
||||
hasChanged[2] = true;
|
||||
}
|
||||
}
|
||||
|
||||
for (final TextStyle style in replacementStyles) {
|
||||
if (style.fontWeight == null && !hasChanged[0]) {
|
||||
_isSelected[0] = false;
|
||||
hasChanged[0] = true;
|
||||
}
|
||||
|
||||
if (style.fontStyle == null && !hasChanged[1]) {
|
||||
_isSelected[1] = false;
|
||||
hasChanged[1] = true;
|
||||
}
|
||||
|
||||
if (style.decoration == null && !hasChanged[2]) {
|
||||
_isSelected[2] = false;
|
||||
hasChanged[2] = true;
|
||||
}
|
||||
}
|
||||
|
||||
setState(() {});
|
||||
}
|
||||
|
||||
void _updateToggleButtonsStateOnButtonPressed(int index) {
|
||||
Map<int, TextStyle> attributeMap = const <int, TextStyle>{
|
||||
0 : TextStyle(fontWeight: FontWeight.bold),
|
||||
1 : TextStyle(fontStyle: FontStyle.italic),
|
||||
2 : TextStyle(decoration: TextDecoration.underline),
|
||||
};
|
||||
|
||||
final TextRange replacementRange = TextRange(
|
||||
start: _replacementTextEditingController.selection.start,
|
||||
end: _replacementTextEditingController.selection.end,
|
||||
);
|
||||
|
||||
_isSelected[index] = !_isSelected[index];
|
||||
if (_isSelected[index]) {
|
||||
_replacementTextEditingController.applyReplacement(
|
||||
TextEditingInlineSpanReplacement(
|
||||
replacementRange,
|
||||
(string, range) => TextSpan(text: string, style: attributeMap[index]),
|
||||
true,
|
||||
),
|
||||
);
|
||||
setState(() {});
|
||||
} else {
|
||||
_replacementTextEditingController.disableExpand(attributeMap[index]!);
|
||||
_replacementTextEditingController.removeReplacementsAtRange(replacementRange, attributeMap[index]);
|
||||
setState(() {});
|
||||
}
|
||||
}
|
||||
|
||||
Widget _buildTextEditingDeltaViewHeading(String text) {
|
||||
return Text(
|
||||
text,
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.w600,
|
||||
decoration: TextDecoration.underline,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTextEditingDeltaViewHeader() {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 35.0, vertical: 10.0),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Tooltip(
|
||||
message: 'The type of text input that is occurring.'
|
||||
' Check out the documentation for TextEditingDelta for more information.',
|
||||
child: _buildTextEditingDeltaViewHeading('Delta Type'),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Tooltip(
|
||||
message: 'The text that is being inserted or deleted',
|
||||
child: _buildTextEditingDeltaViewHeading('Delta Text'),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Tooltip(
|
||||
message: 'The offset in the text where the text input is occurring.',
|
||||
child: _buildTextEditingDeltaViewHeading('Delta Offset'),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Tooltip(
|
||||
message: 'The new text selection range after the text input has occurred.',
|
||||
child: _buildTextEditingDeltaViewHeading('New Selection'),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Tooltip(
|
||||
message: 'The new composing range after the text input has occurred.',
|
||||
child: _buildTextEditingDeltaViewHeading('New Composing'),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
static Route<Object?> _aboutDialogBuilder(
|
||||
BuildContext context, Object? arguments) {
|
||||
const String aboutContent =
|
||||
'TextEditingDeltas are a new feature in the latest Flutter stable release that give the user'
|
||||
' finer grain control over the changes that occur during text input. There are four types of'
|
||||
' deltas: Insertion, Deletion, Replacement, and NonTextUpdate. To gain access to these TextEditingDeltas'
|
||||
' you must implement DeltaTextInputClient, and set enableDeltaModel to true in the TextInputConfiguration.'
|
||||
' Before Flutter only provided the TextInputClient, which does not provide a delta between the current'
|
||||
' and previous text editing states. DeltaTextInputClient does provide these deltas, allowing the user to build'
|
||||
' more powerful rich text editing applications such as this small example. This feature is supported on all platforms.';
|
||||
return DialogRoute<void>(
|
||||
context: context,
|
||||
builder: (context) =>
|
||||
const AlertDialog(
|
||||
title: Center(child: Text('About')),
|
||||
content: Text(aboutContent),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text(widget.title),
|
||||
actions: [
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
Navigator.of(context).restorablePush(_aboutDialogBuilder);
|
||||
},
|
||||
icon: const Icon(Icons.info_outline),
|
||||
),
|
||||
],
|
||||
),
|
||||
body: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Center(
|
||||
child: ToggleButtonsStateManager(
|
||||
isToggleButtonsSelected: _isSelected,
|
||||
updateToggleButtonsStateOnButtonPressed: _updateToggleButtonsStateOnButtonPressed,
|
||||
updateToggleButtonStateOnSelectionChanged: _updateToggleButtonsStateOnSelectionChanged,
|
||||
child: Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 8.0),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
ToggleButtonsStateManager(
|
||||
isToggleButtonsSelected: _isSelected,
|
||||
updateToggleButtonsStateOnButtonPressed: _updateToggleButtonsStateOnButtonPressed,
|
||||
updateToggleButtonStateOnSelectionChanged: _updateToggleButtonsStateOnSelectionChanged,
|
||||
child: Builder(
|
||||
builder: (innerContext) {
|
||||
final ToggleButtonsStateManager manager = ToggleButtonsStateManager.of(innerContext);
|
||||
|
||||
return ToggleButtons(
|
||||
borderRadius: const BorderRadius.all(Radius.circular(4.0)),
|
||||
isSelected: manager.toggleButtonsState,
|
||||
onPressed: (index) => manager.updateToggleButtonsOnButtonPressed(index),
|
||||
children: const [
|
||||
Icon(Icons.format_bold),
|
||||
Icon(Icons.format_italic),
|
||||
Icon(Icons.format_underline),
|
||||
],
|
||||
);
|
||||
}
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 35.0),
|
||||
child: ToggleButtonsStateManager(
|
||||
isToggleButtonsSelected: _isSelected,
|
||||
updateToggleButtonsStateOnButtonPressed: _updateToggleButtonsStateOnButtonPressed,
|
||||
updateToggleButtonStateOnSelectionChanged: _updateToggleButtonsStateOnSelectionChanged,
|
||||
child: TextEditingDeltaHistoryManager(
|
||||
history: _textEditingDeltaHistory,
|
||||
updateHistoryOnInput: _updateTextEditingDeltaHistory,
|
||||
child: BasicTextField(
|
||||
controller: _replacementTextEditingController,
|
||||
style: const TextStyle(fontSize: 18.0, color: Colors.black),
|
||||
focusNode: _focusNode,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Column(
|
||||
children: [
|
||||
_buildTextEditingDeltaViewHeader(),
|
||||
Expanded(
|
||||
child: TextEditingDeltaHistoryManager(
|
||||
history: _textEditingDeltaHistory,
|
||||
updateHistoryOnInput: _updateTextEditingDeltaHistory,
|
||||
child: Builder(
|
||||
builder: (innerContext) {
|
||||
final TextEditingDeltaHistoryManager manager = TextEditingDeltaHistoryManager.of(innerContext);
|
||||
return ListView.separated(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 35.0),
|
||||
itemBuilder: (context, index) {
|
||||
return _buildTextEditingDeltaHistoryViews(manager.textEditingDeltaHistory)[index];
|
||||
},
|
||||
itemCount: manager.textEditingDeltaHistory.length,
|
||||
separatorBuilder: (context, index) {
|
||||
return const SizedBox(height: 2.0);
|
||||
},
|
||||
);
|
||||
}
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class TextEditingDeltaView extends StatelessWidget {
|
||||
const TextEditingDeltaView({
|
||||
Key? key,
|
||||
required this.deltaType,
|
||||
required this.deltaText,
|
||||
required this.deltaRange,
|
||||
required this.newSelection,
|
||||
required this.newComposing
|
||||
}) : super(key: key);
|
||||
|
||||
final String deltaType;
|
||||
final String deltaText;
|
||||
final TextRange deltaRange;
|
||||
final TextRange newSelection;
|
||||
final TextRange newComposing;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
late final Color rowColor;
|
||||
|
||||
switch (deltaType) {
|
||||
case 'Insertion':
|
||||
rowColor = Colors.greenAccent.shade100;
|
||||
break;
|
||||
case 'Deletion':
|
||||
rowColor = Colors.redAccent.shade100;
|
||||
break;
|
||||
case 'Replacement':
|
||||
rowColor = Colors.yellowAccent.shade100;
|
||||
break;
|
||||
case 'NonTextUpdate':
|
||||
rowColor = Colors.blueAccent.shade100;
|
||||
break;
|
||||
default:
|
||||
rowColor = Colors.white;
|
||||
}
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: const BorderRadius.all(Radius.circular(4.0)),
|
||||
color: rowColor,
|
||||
),
|
||||
padding: const EdgeInsets.only(top: 4.0, bottom: 4.0, left: 8.0),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(child: Text(deltaType)),
|
||||
Expanded(child: Text(deltaText)),
|
||||
Expanded(child: Text('(${deltaRange.start}, ${deltaRange.end})')),
|
||||
Expanded(child: Text('(${newSelection.start}, ${newSelection.end})')),
|
||||
Expanded(child: Text('(${newComposing.start}, ${newComposing.end})')),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user