feat: Enhance edit message functionality with updated callback and integration examples

Author: japanshah-simform

README.md

@@ -39,6 +39,7 @@ Flutter applications with [Flexible Backend Integration][chatViewConnect].
 - Custom message types
 - Typing indicators
 - Reply suggestions
+- Edit Message
 - Message status indicators (sent, delivered, read)
 - Highly customizable UI components
 - Plug-and-play backend support using [chatview_connect][chatViewConnect]

doc/documentation.md

@@ -846,14 +846,14 @@ ChatView(
 ChatView(
   // ...
   featureActiveConfig: FeatureActiveConfig(
-    enableSwipeToReply: true,
-    enableSwipeToSeeTime: false,
-    enablePagination: true,
-    enableOtherUserName: false,
-    lastSeenAgoBuilderVisibility: false,
-    receiptsBuilderVisibility: false,
-    enableTextSelection: true,
-    enableEditMessage: true, // Enable the Edit Message feature (default: true)
+    enableSwipeToReply: true,         // Enable swipe to reply (default: true)
+    enableSwipeToSeeTime: false,      // Enable swipe to see message time (default: true)
+    enablePagination: true,           // Enable pagination (default: false)
+    enableOtherUserName: false,       // Show other user's name above bubble (default: true)
+    lastSeenAgoBuilderVisibility: false, // Show last seen ago label (default: true)
+    receiptsBuilderVisibility: false, // Show message receipts (default: true)
+    enableTextSelection: true,        // Enable text selection in bubbles (default: false)
+    enableMessageEditing: true,       // Enable the edit message feature (default: false)
   ),
   // ...
 )
@@ -869,92 +869,19 @@ ChatView supports editing previously sent text messages, similar to WhatsApp and
 2. Tap **Edit** in the reply pop-up.
 3. The original text is pre-filled into the input field with an *Editing* indicator above it.
 4. Modify the text and press Send.
-5. Your `onEditTap` callback is called with the **original `Message`** and the **new text**.
-6. Messages that have been edited display a subtle *Edited* label below the bubble.
+5. Your `onEditTap` callback is called with the **original `Message`** (`oldMessage`) and the **updated `Message`** (`newMessage`).
+6. Messages that have been edited display a subtle _Edited_ label below the bubble.
 
 ### Basic Integration
 
 ```dart
 ChatView(
   // ...
-  onEditTap: (Message originalMessage, String newText) {
-    // Update the message in your data source / backend.
-    // Set `updateAt` on the message to trigger the "Edited" label in the UI.
-    final updatedMessage = Message(
-      id: originalMessage.id,
-      message: newText,
-      createdAt: originalMessage.createdAt,
-      sentBy: originalMessage.sentBy,
-      updateAt: DateTime.now(), // marks the message as edited
-      replyMessage: originalMessage.replyMessage,
-      messageType: originalMessage.messageType,
-    );
-
-    chatController.updateMessage(updatedMessage); // depends on your controller API
-  },
-  replyPopupConfig: ReplyPopupConfiguration(
-    // Optional: react to the edit tap in the popup before the editing UI opens.
-    onEditTap: (message) => debugPrint('Editing: ${message.id}'),
-  ),
-  // ...
-)
-```
-
-### Disabling the Feature
-
-```dart
-ChatView(
-  featureActiveConfig: const FeatureActiveConfig(
-    enableEditMessage: false, // hides the Edit button entirely
-  ),
-)
-```
-
-### Localization
-
-The edit-related strings can be customized via `ChatViewLocale`:
-
-```dart
-PackageStrings.addLocaleObject(
-  'es',
-  const ChatViewLocale(
-    // ... all other required fields ...
-    edit: 'Editar',
-    edited: 'Editado',
-    editing: 'Editando',
-  ),
-);
-PackageStrings.setLocale('es');
-```
-
-### Static Helper
-
-Use `ChatView.getEditingMessage(context)` to read the message currently being edited
-from a widget that is a descendant of `ChatView`:
-
-```dart
-final editingMsg = ChatView.getEditingMessage(context);
-if (editingMsg != null) {
-  // User is in edit mode for editingMsg.
-}
-```
-
-### Customizing the Edit Indicator Label
-
-When a user enters edit mode, an indicator bar is displayed above the text field showing a label
-(default: locale-resolved `"Editing"`). You can override this label via `SendMessageConfiguration`:
-
-```dart
-ChatView(
-  // ...
-  sendMessageConfig: SendMessageConfiguration(
-    /// The label shown in the editing indicator bar above the text field
-    /// when the user is editing an existing message.
-    ///
-    /// If omitted, falls back to the locale-resolved value of
-    /// `PackageStrings.currentLocale.editing` (e.g. `"Editing"`).
-    editLabel: 'Editing message',
-  ),
+  // updatedMessage is a copy of oldMessage with the new text already applied.
+  // You have access to both objects so you can do further transformations —
+  // for example, update the timestamp, change the message type, or sync with a backend.
+  onEditTap: (message, updatedMessage) => 
+    _chatController.updateMessage(messageId: message.id, newMessage: updatedMessage),
   // ...
 )
 ```

example/lib/main.dart

@@ -426,6 +426,8 @@ class _ExampleOneChatScreenState extends State<ExampleOneChatScreen> {
     return Scaffold(
       body: SafeArea(
         child: ChatView(
+          onEditTap: (message, updatedMessage) => _chatController.updateMessage(
+              messageId: message.id, newMessage: updatedMessage),
           chatController: _chatController,
           onSendTap: _onSendTap,
           isLastPage: () => _isTopPaginationCalled && _isBottomPaginationCalled,
@@ -495,6 +497,7 @@ class _ExampleOneChatScreenState extends State<ExampleOneChatScreen> {
             enableScrollToBottomButton: true,
             enableOtherUserProfileAvatar: true,
             enablePagination: true,
+            enableMessageEditing: true,
           ),
           scrollToBottomButtonConfig: const ScrollToBottomButtonConfig(
             padding: EdgeInsets.only(bottom: 8, right: 12),

lib/src/models/config_models/feature_active_config.dart

@@ -37,7 +37,7 @@ class FeatureActiveConfig {
     this.enableOtherUserName = true,
     this.enableScrollToBottomButton = false,
     this.enableTextSelection = false,
-    this.enableMessageEditing = true,
+    this.enableMessageEditing = false,
   });
 
   /// Used for enable/disable swipe to reply.
@@ -93,6 +93,6 @@ class FeatureActiveConfig {
   /// messages sent by the current user, allowing them to modify the
   /// message text in-place.
   ///
-  /// Defaults to `true`.
+  /// Defaults to `false`.
   final bool enableMessageEditing;
 }

lib/src/values/typedefs.dart

@@ -98,11 +98,11 @@ typedef ChatBubbleLongPressCallback = void Function(
 );
 
 /// Callback invoked when the user confirms an edit.
-/// [message] is the original message being edited.
-/// [updatedMessage] is the updated text content.
+/// [message] is the original message before editing.
+/// [updatedMessage] is the updated message object with new content.
 typedef EditMessageCallback = void Function(
   Message message,
-  String updatedMessage,
+  Message updatedMessage,
 );
 typedef ChatTextFieldViewBuilderCallback<T> = Widget Function(
   BuildContext context,

lib/src/widgets/chat_bubble_widget.dart

@@ -274,7 +274,7 @@ class _ChatBubbleWidgetState extends State<ChatBubbleWidget> {
                   onTap: () => widget.onReplyTap
                       ?.call(widget.message.replyMessage.messageId),
                 ),
-        if (widget.message.updateAt != null)
+        if (widget.message.updatedAt != null)
           Padding(
             padding: EdgeInsets.only(
               left: isMessageBySender ? 0 : 8,

lib/src/widgets/chat_view.dart

@@ -179,21 +179,6 @@ class ChatView extends StatefulWidget {
     return state?._sendMessageKey.currentState?.replyMessage;
   }
 
-  /// Returns the [Message] currently being edited, or `null` if not in edit
-  /// mode. Useful when you manage the chat state outside of [ChatView].
-  static Message? getEditingMessage(BuildContext context) {
-    final state = context.findAncestorStateOfType<_ChatViewState>();
-
-    assert(
-      state != null,
-      'ChatViewState not found. Make sure to use correct context that contains the ChatViewState',
-    );
-
-    return state?._sendMessageKey.currentState?.isEditMode == true
-        ? state?._sendMessageKey.currentState?.editMessage
-        : null;
-  }
-
   @override
   State<ChatView> createState() => _ChatViewState();
 }
@@ -323,10 +308,12 @@ class _ChatViewState extends State<ChatView>
                                   // sendMessageBuilder is provided, the caller is
                                   // responsible for handling edit via
                                   // ReplyPopupConfiguration.onEditTap instead.
-                                  assignEditMessage: widget.sendMessageBuilder == null
-                                      ? (message) => _sendMessageKey.currentState
-                                          ?.assignEditMessage(message)
-                                      : null,
+                                  assignEditMessage:
+                                      widget.sendMessageBuilder == null
+                                          ? (message) => _sendMessageKey
+                                              .currentState
+                                              ?.assignEditMessage(message)
+                                          : null,
                                   textFieldConfig:
                                       widget.sendMessageConfig.textFieldConfig,
                                 ),

lib/src/widgets/send_message_widget.dart

@@ -54,7 +54,7 @@ class SendMessageWidget extends StatefulWidget {
   final SendMessageConfiguration sendMessageConfig;
 
   /// Callback invoked when the user confirms an edit.
-  /// Receives the original [Message] and the updated text.
+  /// Receives the original [Message] and the updated [Message] with new content.
   final EditMessageCallback? onEditTap;
 
   /// Allow user to set custom text field.
@@ -85,13 +85,13 @@ class SendMessageWidgetState extends State<SendMessageWidget> {
   ReplyMessage _replyMessage = const ReplyMessage();
 
   /// The message currently being edited, or `null` if not in edit mode.
-  Message? _editMessage;
+  Message? _currentlyEditingMessage;
 
   /// Whether the text field is currently in edit mode.
-  bool get isEditMode => _editMessage != null;
+  bool get isEditMode => _currentlyEditingMessage != null;
 
   /// Public read-only access to the message currently being edited.
-  Message? get editMessage => _editMessage;
+  Message? get currentlyEditingMessage => _currentlyEditingMessage;
 
   ReplyMessage get replyMessage => _replyMessage;
 
@@ -188,10 +188,11 @@ class SendMessageWidgetState extends State<SendMessageWidget> {
                                 onChange: (value) {
                                   // When the user cancels via the X button
                                   // on EditMessageView, clear the text field.
-                                  if (value == null && _editMessage != null) {
+                                  if (value == null &&
+                                      _currentlyEditingMessage != null) {
                                     _textEditingController.clear();
                                   }
-                                  _editMessage = value;
+                                  _currentlyEditingMessage = value;
                                 },
                               ),
                               if (widget
@@ -270,7 +271,13 @@ class SendMessageWidgetState extends State<SendMessageWidget> {
       // Only confirm the edit if a handler is registered; otherwise keep edit
       // mode active so the user's text is not silently discarded.
       if (widget.onEditTap == null) return;
-      widget.onEditTap!.call(_editMessage!, messageText);
+      widget.onEditTap!.call(
+        _currentlyEditingMessage!,
+        _currentlyEditingMessage!.copyWith(
+          message: messageText,
+          updatedAt: DateTime.now(),
+        ),
+      );
       _closeEditMode();
       return;
     }
@@ -301,7 +308,7 @@ class SendMessageWidgetState extends State<SendMessageWidget> {
           const ReplyMessage();
     }
 
-    _editMessage = message;
+    _currentlyEditingMessage = message;
     _textEditingController.text = message.message;
     // Place cursor at end.
     _textEditingController.selection = TextSelection.fromPosition(
@@ -317,12 +324,12 @@ class SendMessageWidgetState extends State<SendMessageWidget> {
   }
 
   void _closeEditMode() {
-    if (_editMessage == null) return; // Nothing to close.
+    if (_currentlyEditingMessage == null) return; // Nothing to close.
     // Clear the text field when cancelling an edit.
     _textEditingController.clear();
     if (_editMessageViewKey.currentState == null) {
       setState(() {
-        _editMessage = null;
+        _currentlyEditingMessage = null;
       });
     } else {
       _editMessageViewKey.currentState?.onClose();