mirror of https://github.com/flutter/samples.git
Refactor Simplistic_Editor (#1375)
* refactor out FormattingToolbar and TextEditingDeltaHistoryView from main` * replace togglebuttonstatemanager and texteditingdeltahistorymanager with appstatemanager * fix up tests * clean up * Add ReplacementTextEditingController to AppState * formatting * `dart format` Co-authored-by: Renzo Olivares <roliv@google.com> Co-authored-by: Brett Morgan <brettmorgan@google.com>pull/1379/head
Renzo Olivares
2 years ago
committed by
GitHub
parent
e84e396a1f
commit
c00e838c51
@ -0,0 +1,201 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
|
||||
import 'app_state_manager.dart';
|
||||
import 'formatting_toolbar.dart' show ToggleButtonsState;
|
||||
import 'replacements.dart';
|
||||
|
||||
class AppState {
|
||||
const AppState({
|
||||
required this.replacementsController,
|
||||
required this.textEditingDeltaHistory,
|
||||
required this.toggleButtonsState,
|
||||
});
|
||||
|
||||
final ReplacementTextEditingController replacementsController;
|
||||
final List<TextEditingDelta> textEditingDeltaHistory;
|
||||
final Set<ToggleButtonsState> toggleButtonsState;
|
||||
|
||||
AppState copyWith({
|
||||
ReplacementTextEditingController? replacementsController,
|
||||
List<TextEditingDelta>? textEditingDeltaHistory,
|
||||
Set<ToggleButtonsState>? toggleButtonsState,
|
||||
}) {
|
||||
return AppState(
|
||||
replacementsController:
|
||||
replacementsController ?? this.replacementsController,
|
||||
textEditingDeltaHistory:
|
||||
textEditingDeltaHistory ?? this.textEditingDeltaHistory,
|
||||
toggleButtonsState: toggleButtonsState ?? this.toggleButtonsState,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class AppStateWidget extends StatefulWidget {
|
||||
const AppStateWidget({super.key, required this.child});
|
||||
|
||||
final Widget child;
|
||||
|
||||
static AppStateWidgetState of(BuildContext context) {
|
||||
return context.findAncestorStateOfType<AppStateWidgetState>()!;
|
||||
}
|
||||
|
||||
@override
|
||||
State<AppStateWidget> createState() => AppStateWidgetState();
|
||||
}
|
||||
|
||||
class AppStateWidgetState extends State<AppStateWidget> {
|
||||
AppState _data = AppState(
|
||||
replacementsController: ReplacementTextEditingController(
|
||||
text: 'The quick brown fox jumps over the lazy dog.'),
|
||||
textEditingDeltaHistory: <TextEditingDelta>[],
|
||||
toggleButtonsState: <ToggleButtonsState>{},
|
||||
);
|
||||
|
||||
void updateTextEditingDeltaHistory(List<TextEditingDelta> textEditingDeltas) {
|
||||
_data = _data.copyWith(textEditingDeltaHistory: <TextEditingDelta>[
|
||||
..._data.textEditingDeltaHistory,
|
||||
...textEditingDeltas
|
||||
]);
|
||||
setState(() {});
|
||||
}
|
||||
|
||||
void updateToggleButtonsStateOnSelectionChanged(
|
||||
TextSelection selection, ReplacementTextEditingController controller) {
|
||||
// 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 =
|
||||
controller.getReplacementsAtSelection(selection);
|
||||
final Set<ToggleButtonsState> hasChanged = {};
|
||||
|
||||
if (replacementStyles.isEmpty) {
|
||||
_data = _data.copyWith(
|
||||
toggleButtonsState: Set.from(_data.toggleButtonsState)
|
||||
..removeAll({
|
||||
ToggleButtonsState.bold,
|
||||
ToggleButtonsState.italic,
|
||||
ToggleButtonsState.underline,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
for (final TextStyle style in replacementStyles) {
|
||||
// See [_updateToggleButtonsStateOnButtonPressed] for how
|
||||
// Bold, Italic and Underline are encoded into [style]
|
||||
if (style.fontWeight != null &&
|
||||
!hasChanged.contains(ToggleButtonsState.bold)) {
|
||||
_data = _data.copyWith(
|
||||
toggleButtonsState: Set.from(_data.toggleButtonsState)
|
||||
..add(ToggleButtonsState.bold),
|
||||
);
|
||||
hasChanged.add(ToggleButtonsState.bold);
|
||||
}
|
||||
|
||||
if (style.fontStyle != null &&
|
||||
!hasChanged.contains(ToggleButtonsState.italic)) {
|
||||
_data = _data.copyWith(
|
||||
toggleButtonsState: Set.from(_data.toggleButtonsState)
|
||||
..add(ToggleButtonsState.italic),
|
||||
);
|
||||
hasChanged.add(ToggleButtonsState.italic);
|
||||
}
|
||||
|
||||
if (style.decoration != null &&
|
||||
!hasChanged.contains(ToggleButtonsState.underline)) {
|
||||
_data = _data.copyWith(
|
||||
toggleButtonsState: Set.from(_data.toggleButtonsState)
|
||||
..add(ToggleButtonsState.underline),
|
||||
);
|
||||
hasChanged.add(ToggleButtonsState.underline);
|
||||
}
|
||||
}
|
||||
|
||||
for (final TextStyle style in replacementStyles) {
|
||||
if (style.fontWeight == null &&
|
||||
!hasChanged.contains(ToggleButtonsState.bold)) {
|
||||
_data = _data.copyWith(
|
||||
toggleButtonsState: Set.from(_data.toggleButtonsState)
|
||||
..remove(ToggleButtonsState.bold),
|
||||
);
|
||||
hasChanged.add(ToggleButtonsState.bold);
|
||||
}
|
||||
|
||||
if (style.fontStyle == null &&
|
||||
!hasChanged.contains(ToggleButtonsState.italic)) {
|
||||
_data = _data.copyWith(
|
||||
toggleButtonsState: Set.from(_data.toggleButtonsState)
|
||||
..remove(ToggleButtonsState.italic),
|
||||
);
|
||||
hasChanged.add(ToggleButtonsState.italic);
|
||||
}
|
||||
|
||||
if (style.decoration == null &&
|
||||
!hasChanged.contains(ToggleButtonsState.underline)) {
|
||||
_data = _data.copyWith(
|
||||
toggleButtonsState: Set.from(_data.toggleButtonsState)
|
||||
..remove(ToggleButtonsState.underline),
|
||||
);
|
||||
hasChanged.add(ToggleButtonsState.underline);
|
||||
}
|
||||
}
|
||||
|
||||
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 ReplacementTextEditingController controller =
|
||||
_data.replacementsController;
|
||||
|
||||
final TextRange replacementRange = TextRange(
|
||||
start: controller.selection.start,
|
||||
end: controller.selection.end,
|
||||
);
|
||||
|
||||
final targetToggleButtonState = ToggleButtonsState.values[index];
|
||||
|
||||
if (_data.toggleButtonsState.contains(targetToggleButtonState)) {
|
||||
_data = _data.copyWith(
|
||||
toggleButtonsState: Set.from(_data.toggleButtonsState)
|
||||
..remove(targetToggleButtonState),
|
||||
);
|
||||
} else {
|
||||
_data = _data.copyWith(
|
||||
toggleButtonsState: Set.from(_data.toggleButtonsState)
|
||||
..add(targetToggleButtonState),
|
||||
);
|
||||
}
|
||||
|
||||
if (_data.toggleButtonsState.contains(targetToggleButtonState)) {
|
||||
controller.applyReplacement(
|
||||
TextEditingInlineSpanReplacement(
|
||||
replacementRange,
|
||||
(string, range) => TextSpan(text: string, style: attributeMap[index]),
|
||||
true,
|
||||
),
|
||||
);
|
||||
_data = _data.copyWith(replacementsController: controller);
|
||||
setState(() {});
|
||||
} else {
|
||||
controller.disableExpand(attributeMap[index]!);
|
||||
controller.removeReplacementsAtRange(
|
||||
replacementRange, attributeMap[index]);
|
||||
_data = _data.copyWith(replacementsController: controller);
|
||||
setState(() {});
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return AppStateManager(
|
||||
state: _data,
|
||||
child: widget.child,
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import 'package:flutter/widgets.dart';
|
||||
|
||||
import 'app_state.dart';
|
||||
|
||||
class AppStateManager extends InheritedWidget {
|
||||
const AppStateManager({
|
||||
super.key,
|
||||
required super.child,
|
||||
required AppState state,
|
||||
}) : _appState = state;
|
||||
|
||||
static AppStateManager of(BuildContext context) {
|
||||
final AppStateManager? result =
|
||||
context.dependOnInheritedWidgetOfExactType<AppStateManager>();
|
||||
assert(result != null, 'No AppStateManager found in context');
|
||||
return result!;
|
||||
}
|
||||
|
||||
final AppState _appState;
|
||||
|
||||
AppState get appState => _appState;
|
||||
|
||||
@override
|
||||
bool updateShouldNotify(AppStateManager oldWidget) {
|
||||
return appState != oldWidget.appState;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'app_state.dart';
|
||||
import 'app_state_manager.dart';
|
||||
|
||||
/// The toggle buttons that can be selected.
|
||||
enum ToggleButtonsState {
|
||||
bold,
|
||||
italic,
|
||||
underline,
|
||||
}
|
||||
|
||||
class FormattingToolbar extends StatelessWidget {
|
||||
const FormattingToolbar({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final AppStateManager manager = AppStateManager.of(context);
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 8.0),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
ToggleButtons(
|
||||
borderRadius: const BorderRadius.all(Radius.circular(4.0)),
|
||||
isSelected: [
|
||||
manager.appState.toggleButtonsState
|
||||
.contains(ToggleButtonsState.bold),
|
||||
manager.appState.toggleButtonsState
|
||||
.contains(ToggleButtonsState.italic),
|
||||
manager.appState.toggleButtonsState
|
||||
.contains(ToggleButtonsState.underline),
|
||||
],
|
||||
onPressed: (index) => AppStateWidget.of(context)
|
||||
.updateToggleButtonsStateOnButtonPressed(index),
|
||||
children: const [
|
||||
Icon(Icons.format_bold),
|
||||
Icon(Icons.format_italic),
|
||||
Icon(Icons.format_underline),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
import 'package:flutter/services.dart' show TextEditingDelta;
|
||||
import 'package:flutter/widgets.dart';
|
||||
|
||||
/// Signature for the callback that updates text editing delta history when a new delta
|
||||
/// is received.
|
||||
typedef TextEditingDeltaHistoryUpdateCallback = void Function(
|
||||
List<TextEditingDelta> textEditingDeltas);
|
||||
|
||||
class TextEditingDeltaHistoryManager extends InheritedWidget {
|
||||
const TextEditingDeltaHistoryManager({
|
||||
super.key,
|
||||
required super.child,
|
||||
required List<TextEditingDelta> history,
|
||||
required TextEditingDeltaHistoryUpdateCallback updateHistoryOnInput,
|
||||
}) : _textEditingDeltaHistory = history,
|
||||
_updateTextEditingDeltaHistoryOnInput = updateHistoryOnInput;
|
||||
|
||||
static TextEditingDeltaHistoryManager of(BuildContext context) {
|
||||
final TextEditingDeltaHistoryManager? result = context
|
||||
.dependOnInheritedWidgetOfExactType<TextEditingDeltaHistoryManager>();
|
||||
assert(
|
||||
result != null, 'No TextEditingDeltaHistoryManager found in context');
|
||||
return result!;
|
||||
}
|
||||
|
||||
final List<TextEditingDelta> _textEditingDeltaHistory;
|
||||
final TextEditingDeltaHistoryUpdateCallback
|
||||
_updateTextEditingDeltaHistoryOnInput;
|
||||
|
||||
List<TextEditingDelta> get textEditingDeltaHistory =>
|
||||
_textEditingDeltaHistory;
|
||||
TextEditingDeltaHistoryUpdateCallback
|
||||
get updateTextEditingDeltaHistoryOnInput =>
|
||||
_updateTextEditingDeltaHistoryOnInput;
|
||||
|
||||
@override
|
||||
bool updateShouldNotify(TextEditingDeltaHistoryManager oldWidget) {
|
||||
return textEditingDeltaHistory != oldWidget.textEditingDeltaHistory;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,197 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
|
||||
import 'app_state_manager.dart';
|
||||
|
||||
class TextEditingDeltaHistoryView extends StatelessWidget {
|
||||
const TextEditingDeltaHistoryView({super.key});
|
||||
|
||||
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: 'Insertion',
|
||||
deltaText: delta.textInserted,
|
||||
deltaRange: TextRange.collapsed(delta.insertionOffset),
|
||||
newSelection: delta.selection,
|
||||
newComposing: delta.composing,
|
||||
);
|
||||
} else if (delta is TextEditingDeltaDeletion) {
|
||||
deltaView = TextEditingDeltaView(
|
||||
deltaType: 'Deletion',
|
||||
deltaText: delta.textDeleted,
|
||||
deltaRange: delta.deletedRange,
|
||||
newSelection: delta.selection,
|
||||
newComposing: delta.composing,
|
||||
);
|
||||
} else if (delta is TextEditingDeltaReplacement) {
|
||||
deltaView = TextEditingDeltaView(
|
||||
deltaType: 'Replacement',
|
||||
deltaText: delta.replacementText,
|
||||
deltaRange: delta.replacedRange,
|
||||
newSelection: delta.selection,
|
||||
newComposing: delta.composing,
|
||||
);
|
||||
} else if (delta is TextEditingDeltaNonTextUpdate) {
|
||||
deltaView = TextEditingDeltaView(
|
||||
deltaType: 'NonTextUpdate',
|
||||
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();
|
||||
}
|
||||
|
||||
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'),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTextEditingDeltaViewHeading(String text) {
|
||||
return Text(
|
||||
text,
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.w600,
|
||||
decoration: TextDecoration.underline,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final AppStateManager manager = AppStateManager.of(context);
|
||||
|
||||
return Column(
|
||||
children: [
|
||||
_buildTextEditingDeltaViewHeader(),
|
||||
Expanded(
|
||||
child: ListView.separated(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 35.0),
|
||||
itemBuilder: (context, index) {
|
||||
return _buildTextEditingDeltaHistoryViews(
|
||||
manager.appState.textEditingDeltaHistory)[index];
|
||||
},
|
||||
itemCount: manager.appState.textEditingDeltaHistory.length,
|
||||
separatorBuilder: (context, index) {
|
||||
return const SizedBox(height: 2.0);
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class TextEditingDeltaView extends StatelessWidget {
|
||||
const TextEditingDeltaView({
|
||||
super.key,
|
||||
required this.deltaType,
|
||||
required this.deltaText,
|
||||
required this.deltaRange,
|
||||
required this.newSelection,
|
||||
required this.newComposing,
|
||||
});
|
||||
|
||||
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})')),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,59 +0,0 @@
|
||||
import 'package:flutter/widgets.dart';
|
||||
|
||||
/// Signature for the callback that updates toggle button state when the user changes the selection
|
||||
/// (including the cursor location).
|
||||
typedef UpdateToggleButtonsStateOnSelectionChangedCallback = void Function(
|
||||
TextSelection selection);
|
||||
|
||||
/// Signature for the callback that updates toggle button state when the user
|
||||
/// presses the toggle button.
|
||||
typedef UpdateToggleButtonsStateOnButtonPressedCallback = void Function(
|
||||
int index);
|
||||
|
||||
/// The toggle buttons that can be selected.
|
||||
enum ToggleButtonsState {
|
||||
bold,
|
||||
italic,
|
||||
underline,
|
||||
}
|
||||
|
||||
class ToggleButtonsStateManager extends InheritedWidget {
|
||||
const ToggleButtonsStateManager({
|
||||
super.key,
|
||||
required super.child,
|
||||
required Set<ToggleButtonsState> isToggleButtonsSelected,
|
||||
required UpdateToggleButtonsStateOnButtonPressedCallback
|
||||
updateToggleButtonsStateOnButtonPressed,
|
||||
required UpdateToggleButtonsStateOnSelectionChangedCallback
|
||||
updateToggleButtonStateOnSelectionChanged,
|
||||
}) : _isToggleButtonsSelected = isToggleButtonsSelected,
|
||||
_updateToggleButtonsStateOnButtonPressed =
|
||||
updateToggleButtonsStateOnButtonPressed,
|
||||
_updateToggleButtonStateOnSelectionChanged =
|
||||
updateToggleButtonStateOnSelectionChanged;
|
||||
|
||||
static ToggleButtonsStateManager of(BuildContext context) {
|
||||
final ToggleButtonsStateManager? result =
|
||||
context.dependOnInheritedWidgetOfExactType<ToggleButtonsStateManager>();
|
||||
assert(result != null, 'No ToggleButtonsStateManager found in context');
|
||||
return result!;
|
||||
}
|
||||
|
||||
final Set<ToggleButtonsState> _isToggleButtonsSelected;
|
||||
final UpdateToggleButtonsStateOnButtonPressedCallback
|
||||
_updateToggleButtonsStateOnButtonPressed;
|
||||
final UpdateToggleButtonsStateOnSelectionChangedCallback
|
||||
_updateToggleButtonStateOnSelectionChanged;
|
||||
|
||||
Set<ToggleButtonsState> get toggleButtonsState => _isToggleButtonsSelected;
|
||||
UpdateToggleButtonsStateOnButtonPressedCallback
|
||||
get updateToggleButtonsOnButtonPressed =>
|
||||
_updateToggleButtonsStateOnButtonPressed;
|
||||
UpdateToggleButtonsStateOnSelectionChangedCallback
|
||||
get updateToggleButtonsOnSelection =>
|
||||
_updateToggleButtonStateOnSelectionChanged;
|
||||
|
||||
@override
|
||||
bool updateShouldNotify(ToggleButtonsStateManager oldWidget) =>
|
||||
toggleButtonsState != oldWidget.toggleButtonsState;
|
||||
}
|
||||
Loading…
Reference in new issue