Merge pull request #3156 from acterglobal/anisha/improve-editing-screen

Make HTML Description dialog editable and improve UI styling of title and description dialog.

Author: anisha-e10

.changes/3156-title-description-dialog-changes.md

@@ -0,0 +1 @@
+- [Fix] : Fixed description editing, enhanced dialog UI, and require users to press Save or Cancel (dialog no longer draggable).

app/lib/common/themes/components/button_theme.dart

@@ -6,7 +6,10 @@ import 'package:flutter/material.dart';
 
 ElevatedButtonThemeData elevatedButtonTheme() => ElevatedButtonThemeData(
   style: ElevatedButton.styleFrom(
-    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+    padding: EdgeInsets.symmetric(
+      horizontal: 16,
+      vertical: Platform.isAndroid || Platform.isIOS ? 12 : 16,
+    ),
     elevation: 0,
     textStyle: textTheme.titleMedium?.copyWith(
       color: colorScheme.primary,
@@ -48,7 +51,7 @@ OutlinedButtonThemeData outlinedButtonTheme() => OutlinedButtonThemeData(
     shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
     padding: EdgeInsets.symmetric(
       horizontal: 12,
-      vertical: Platform.isAndroid || Platform.isIOS ? 6 : 12,
+      vertical: Platform.isAndroid || Platform.isIOS ? 6 : 16,
     ),
     textStyle: textTheme.titleMedium?.copyWith(fontSize: 15),
     minimumSize: Size.zero,

app/lib/common/utils/utils.dart

@@ -230,20 +230,31 @@ extension ColorUtils on Color {
   }
 }
 
+/// Comprehensive regex for detecting empty HTML tags and structures
+final RegExp emptyHtmlTagsRegex = RegExp(
+  r'<br\s*/?>\s*|<p\s*>(\s|&nbsp;|&#160;|<br\s*/?>)*</p>\s*|<div\s*>(\s|&nbsp;|&#160;)*</div>\s*|<span\s*>(\s|&nbsp;|&#160;)*</span>\s*|<h[1-6]\s*>(\s|&nbsp;|&#160;)*</h[1-6]>\s*|<(strong|b|em|i)\s*>(\s|&nbsp;|&#160;)*</(strong|b|em|i)>\s*|<(ul|ol|li)\s*>(\s|&nbsp;|&#160;)*</(ul|ol|li)>\s*',
+  multiLine: true,
+  caseSensitive: false,
+);
+
+/// Check if HTML content contains only empty tags or whitespace
+bool isEmptyHtmlContent(String html) {
+  if (html.trim().isEmpty) return true;
+  
+  // Remove all empty tags and structures
+  String cleanedHtml = html
+      .replaceAll(emptyHtmlTagsRegex, '')
+      .replaceAll(RegExp(r'\s+'), ' ') // Normalize whitespace
+      .trim();
+  
+  return cleanedHtml.isEmpty;
+}
+
 /// html requires to have some kind of structure even when document is empty, so check for that
 bool hasValidEditorContent({required String plainText, required String html}) {
-  if (plainText.trim().isEmpty) return false;
-  if (html.isEmpty) return false;
-
-  final hasOnlyStructure =
-      html
-          .replaceAll(RegExp(r'<br\s*/?>|<p\s*></p>|<p\s*>\s*</p>'), '')
-          .replaceAll(RegExp(r'<[^>]*>'), '')
-          .replaceAll('&nbsp;', ' ')
-          .trim()
-          .isEmpty;
-
-  return !hasOnlyStructure;
+  final hasPlainTextContent = plainText.trim().isNotEmpty;
+  final hasHtmlTextContent = !isEmptyHtmlContent(html);
+  return hasPlainTextContent || hasHtmlTextContent;
 }
 
 String formatChatDayDividerDateString(BuildContext context, String dateString) {

app/lib/common/widgets/edit_html_description_sheet.dart

@@ -1,6 +1,7 @@
 import 'package:acter/common/themes/colors/color_scheme.dart';
 import 'package:acter/common/toolkit/buttons/primary_action_button.dart';
 import 'package:acter/common/toolkit/html_editor/html_editor.dart';
+import 'package:acter/common/utils/utils.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/material.dart';
 import 'package:acter/l10n/generated/l10n.dart';
@@ -14,11 +15,20 @@ void showEditHtmlDescriptionBottomSheet({
   required Function(WidgetRef, String, String) onSave,
 }) {
   showModalBottomSheet(
-    showDragHandle: true,
+    showDragHandle: false,
+    isDismissible: false,
+    enableDrag: false,
     useSafeArea: true,
     context: context,
-    isDismissible: true,
     isScrollControlled: true,
+    shape: const RoundedRectangleBorder(
+      borderRadius: BorderRadius.only(
+        topLeft: Radius.circular(16),
+        topRight: Radius.circular(16),
+        bottomLeft: Radius.circular(0),
+        bottomRight: Radius.circular(0),
+      ),
+    ),
     builder: (context) {
       return EditHtmlDescriptionSheet(
         bottomSheetTitle: bottomSheetTitle,
@@ -56,29 +66,48 @@ class _EditHtmlDescriptionSheetState
   @override
   void initState() {
     super.initState();
-    textEditorState = ActerEditorStateHelpers.fromContent(
-      widget.descriptionMarkdownValue ?? '',
-      widget.descriptionHtmlValue,
-    );
+
+    final hasValidContent = hasValidEditorContent(
+        plainText: widget.descriptionMarkdownValue ?? '',
+        html: widget.descriptionHtmlValue ?? '');
+
+    if (hasValidContent) {
+      // Use existing content
+      textEditorState = ActerEditorStateHelpers.fromContent(
+        widget.descriptionMarkdownValue ?? '',
+        widget.descriptionHtmlValue,
+      );
+    } else {
+      // Use blank editor with initial text for empty state
+      textEditorState = EditorState.blank(withInitialText: true);
+    }
   }
 
   @override
   Widget build(BuildContext context) {
     final lang = L10n.of(context);
     return Padding(
-      padding: MediaQuery.of(context).viewInsets,
+      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
       child: Column(
         mainAxisSize: MainAxisSize.min,
         children: [
-          Text(widget.bottomSheetTitle ?? lang.editDescription),
-          const SizedBox(height: 20),
+          Text(
+            widget.bottomSheetTitle ?? lang.editDescription,
+            style: Theme.of(context).textTheme.titleMedium,
+          ),
+          const SizedBox(height: 10),
           Container(
+            padding: const EdgeInsets.all(20),
             height: 200,
             decoration: BoxDecoration(
               border: Border.all(color: brandColor),
               borderRadius: BorderRadius.circular(10.0),
             ),
-            child: HtmlEditor(editorState: textEditorState, editable: true),
+            child: HtmlEditor(
+                editorState: textEditorState,
+                editable: true,
+                hintText: lang.addDescription,
+              ),
           ),
           const SizedBox(height: 20),
           Row(
@@ -106,7 +135,7 @@ class _EditHtmlDescriptionSheetState
               ),
             ],
           ),
-          const SizedBox(height: 100),
+          const SizedBox(height: 20),
         ],
       ),
     );

app/lib/common/widgets/edit_plain_description_sheet.dart

@@ -8,10 +8,20 @@ void showEditPlainDescriptionBottomSheet({
   required Function(String) onSave,
 }) {
   showModalBottomSheet(
-    showDragHandle: true,
+    showDragHandle: false,
+    isDismissible: false,
+    enableDrag: false,
     useSafeArea: true,
     context: context,
-    isDismissible: true,
+    isScrollControlled: true,
+    shape: const RoundedRectangleBorder(
+      borderRadius: BorderRadius.only(
+        topLeft: Radius.circular(16),
+        topRight: Radius.circular(16),
+        bottomLeft: Radius.circular(0),
+        bottomRight: Radius.circular(0),
+      ),
+    ),
     builder: (context) {
       return EditPlainDescriptionSheet(
         descriptionValue: descriptionValue,
@@ -50,10 +60,10 @@ class _EditPlainDescriptionSheetState extends State<EditPlainDescriptionSheet> {
     final lang = L10n.of(context);
     return SingleChildScrollView(
       child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 20.0),
+        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
         child: Column(
           children: [
-            Text(lang.editDescription),
+            Text(lang.editDescription,style: Theme.of(context).textTheme.titleMedium,),
             const SizedBox(height: 20),
             TextFormField(
               keyboardType: TextInputType.multiline,
@@ -62,7 +72,7 @@ class _EditPlainDescriptionSheetState extends State<EditPlainDescriptionSheet> {
               minLines: 4,
               autofocus: true,
               maxLines: 4,
-              decoration: InputDecoration(hintText: lang.description),
+              decoration: InputDecoration(hintText: lang.addDescription),
             ),
             const SizedBox(height: 20),
             Row(

app/lib/common/widgets/edit_title_sheet.dart

@@ -10,10 +10,20 @@ void showEditTitleBottomSheet({
   required Function(WidgetRef, String) onSave,
 }) {
   showModalBottomSheet(
-    showDragHandle: true,
+    showDragHandle: false,
+    isDismissible: false,
+    enableDrag: false,
     useSafeArea: true,
     context: context,
     isScrollControlled: true,
+    shape: const RoundedRectangleBorder(
+      borderRadius: BorderRadius.only(
+        topLeft: Radius.circular(16),
+        topRight: Radius.circular(16),
+        bottomLeft: Radius.circular(0),
+        bottomRight: Radius.circular(0),
+      ),
+    ),
     builder: (context) {
       return EditTitleSheet(
         bottomSheetTitle: bottomSheetTitle,
@@ -53,7 +63,7 @@ class _EditTitleSheetState extends ConsumerState<EditTitleSheet> {
   Widget build(BuildContext context) {
     final lang = L10n.of(context);
     return Container(
-      padding: MediaQuery.of(context).viewInsets,
+      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
       child: Column(
         mainAxisSize: MainAxisSize.min,
         children: [
@@ -62,7 +72,7 @@ class _EditTitleSheetState extends ConsumerState<EditTitleSheet> {
             textAlign: TextAlign.center,
             style: Theme.of(context).textTheme.titleMedium,
           ),
-          const SizedBox(height: 40),
+          const SizedBox(height: 20),
           TextFormField(
             keyboardType: TextInputType.text,
             textInputAction: TextInputAction.done,
@@ -97,6 +107,7 @@ class _EditTitleSheetState extends ConsumerState<EditTitleSheet> {
               ),
             ],
           ),
+          const SizedBox(height: 20),
         ],
       ),
     );

app/lib/l10n/app_en.arb

@@ -2420,6 +2420,8 @@
   "@editName": {},
   "editDescription": "Edit Description",
   "@editDescription": {},
+  "addDescription": "Add description here",
+  "@addDescription": {},
   "updateNameFailed": "Updating name failed: {error}",
   "@updateNameFailed": {},
   "updateDescriptionFailed": "Updating description failed: {error}",