@@ -96,18 +96,70 @@ TypeSet('Regular text with *bigger<24>* words');
96
96
TypeSet('Use the ¦* symbol to show *asterisks*');
97
97
` ` `
98
98
99
+ # # 💬 Interactive Text Editing
100
+
99
101
# ## TypeSetEditingController
100
102
101
- New in v2.3.0! Add WhatsApp-like styling to your text input fields :
103
+ New in v2.3.0! Add WhatsApp-like styling to your text input fields with real-time formatting preview :
102
104
103
105
` ` ` dart
104
- final controller = TypeSetEditingController();
106
+ import 'package:typeset/typeset.dart';
107
+ import 'package:flutter/material.dart';
108
+
109
+ // Create a controller with optional styling parameters
110
+ final controller = TypeSetEditingController(
111
+ // Initial text with formatting
112
+ text: 'This is *bold* and _italic_',
113
+ // Style for the formatting markers
114
+ markerColor: Colors.grey.shade400,
115
+ // Style for links
116
+ linkStyle: const TextStyle(color: Colors.blue),
117
+ // Style for bold text
118
+ boldStyle: const TextStyle(fontWeight: FontWeight.bold),
119
+ // Style for monospace text
120
+ monospaceStyle: const TextStyle(fontFamily: 'Courier'),
121
+ );
105
122
123
+ // Use it with a TextField
106
124
TextField(
107
125
controller: controller,
108
- // Your other TextField properties
126
+ maxLines: 3,
127
+ decoration: const InputDecoration(
128
+ border: OutlineInputBorder(),
129
+ hintText: 'Type formatted text here...',
130
+ ),
109
131
);
110
132
` ` `
133
+
134
+ # ## Context Menu Integration
135
+
136
+ Add formatting options to the text selection context menu with `getTypesetContextMenus()` :
137
+
138
+ ` ` ` dart
139
+ import 'package:typeset/typeset.dart';
140
+ import 'package:flutter/material.dart';
141
+
142
+ TextField(
143
+ controller: TypeSetEditingController(),
144
+ contextMenuBuilder: (context, editableTextState) {
145
+ return AdaptiveTextSelectionToolbar.buttonItems(
146
+ anchors: editableTextState.contextMenuAnchors,
147
+ buttonItems: [
148
+ // Add TypeSet formatting options to the context menu
149
+ ...getTypesetContextMenus(
150
+ editableTextState: editableTextState,
151
+ // Optional: specify which formatting options to include
152
+ // styleTypes: [StyleTypeEnum.bold, StyleTypeEnum.italic],
153
+ ),
154
+ // Keep the default context menu items
155
+ ...editableTextState.contextMenuButtonItems,
156
+ ],
157
+ );
158
+ },
159
+ );
160
+ ` ` `
161
+
162
+ This adds formatting buttons (Bold, Italic, Strikethrough, etc.) to the text selection menu, allowing users to easily format selected text.
111
163
# # ✨ Key Features
112
164
113
165
- **WhatsApp-like Formatting** - Familiar syntax that users already understand
0 commit comments