Skip to content

Commit 6c20644

Browse files
authored
Update README.md: controller, menu actions
1 parent 3c41b09 commit 6c20644

File tree

1 file changed

+55
-3
lines changed

1 file changed

+55
-3
lines changed

README.md

Lines changed: 55 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,18 +96,70 @@ TypeSet('Regular text with *bigger<24>* words');
9696
TypeSet('Use the ¦* symbol to show *asterisks*');
9797
```
9898

99+
## 💬 Interactive Text Editing
100+
99101
### TypeSetEditingController
100102

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:
102104

103105
```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+
);
105122
123+
// Use it with a TextField
106124
TextField(
107125
controller: controller,
108-
// Your other TextField properties
126+
maxLines: 3,
127+
decoration: const InputDecoration(
128+
border: OutlineInputBorder(),
129+
hintText: 'Type formatted text here...',
130+
),
109131
);
110132
```
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.
111163
## ✨ Key Features
112164

113165
- **WhatsApp-like Formatting** - Familiar syntax that users already understand

0 commit comments

Comments
 (0)