Apply new style for create identity view on desktop

Signed-off-by: dab246 <tdvu@linagora.com>
2025-07-11 19:36:14 +07:00
parent 4fd0931c9e
commit 58d22cbc0b
21 changed files with 1368 additions and 1066 deletions
@@ -0,0 +1,132 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/views/checkbox/custom_icon_labeled_checkbox.dart';
+import 'package:core/presentation/views/dialog/confirm_dialog_button.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/identity_creator/presentation/identity_creator_controller.dart';
+import 'package:tmail_ui_user/features/manage_account/domain/state/get_all_identities_state.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class IdentityCreatorFormBottomView extends StatelessWidget {
+  final IdentityCreatorController controller;
+
+  const IdentityCreatorFormBottomView({
+    Key? key,
+    required this.controller,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final appLocalizations = AppLocalizations.of(context);
+
+    final isMobile = controller.responsiveUtils.isMobile(context);
+
+    final checkboxWidget = Obx(() {
+      if (controller.isDefaultIdentitySupported.isTrue) {
+        return Expanded(
+          child: Obx(() {
+            return CustomIconLabeledCheckbox(
+              label: appLocalizations.setDefaultIdentity,
+              svgIconPath: controller.imagePaths.icCheckboxUnselected,
+              selectedSvgIconPath: controller.imagePaths.icCheckboxSelected,
+              value: controller.isDefaultIdentity.value,
+              semanticsLabel: 'Set default identity checkbox',
+              onChanged: (_) => controller.onCheckboxChanged(),
+            );
+          }),
+        );
+      } else {
+        return const SizedBox.shrink();
+      }
+    });
+
+    final cancelButtonWidget = Container(
+      constraints: isMobile ? null : const BoxConstraints(minWidth: 67),
+      height: 48,
+      child: ConfirmDialogButton(
+        label: appLocalizations.cancel,
+        onTapAction: () => controller.closeView(context),
+      ),
+    );
+
+    final saveButtonWidget = Container(
+      constraints: isMobile ? null : const BoxConstraints(minWidth: 110),
+      height: 48,
+      child: Obx(() {
+        final viewState = controller.viewState.value;
+        final actionType = controller.actionType.value;
+        final isLoading = viewState.fold(
+          (failure) => false,
+          (success) => success is GetAllIdentitiesLoading,
+        );
+
+        if (isLoading) {
+          return const Center(
+            child: SizedBox(
+              width: 24,
+              height: 24,
+              child: CircularProgressIndicator(
+                color: AppColor.primaryColor,
+                strokeWidth: 2.0,
+              ),
+            ),
+          );
+        } else {
+          return ConfirmDialogButton(
+            label: actionType.getPositiveButtonTitle(appLocalizations),
+            backgroundColor: AppColor.primaryMain,
+            textColor: Colors.white,
+            onTapAction: () => controller.createNewIdentity(context),
+          );
+        }
+      }),
+    );
+
+    if (isMobile) {
+      return Padding(
+        padding: const EdgeInsetsDirectional.symmetric(horizontal: 17),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            checkboxWidget,
+            Padding(
+              padding: const EdgeInsets.symmetric(vertical: 44),
+              child: Row(
+                children: [
+                  Expanded(child: cancelButtonWidget),
+                  const SizedBox(width: 8),
+                  Expanded(child: saveButtonWidget),
+                ],
+              ),
+            ),
+          ],
+        ),
+      );
+    } else {
+      return Padding(
+        padding: const EdgeInsetsDirectional.only(
+          start: 32,
+          end: 37,
+          top: 12,
+          bottom: 24,
+        ),
+        child: Row(
+          children: [
+            checkboxWidget,
+            Expanded(
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.end,
+                children: [
+                  Flexible(child: cancelButtonWidget),
+                  const SizedBox(width: 8),
+                  Flexible(child: saveButtonWidget),
+                ],
+              ),
+            ),
+          ],
+        ),
+      );
+    }
+  }
+}
@@ -0,0 +1,77 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/base/widget/default_field/default_close_button_widget.dart';
+import 'package:tmail_ui_user/features/identity_creator/presentation/identity_creator_controller.dart';
+import 'package:tmail_ui_user/features/identity_creator/presentation/widgets/identity_creator_form_bottom_view.dart';
+import 'package:tmail_ui_user/features/identity_creator/presentation/widgets/identity_creator_form_title_widget.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class IdentityCreatorFormDesktopBuilder extends StatelessWidget {
+  final IdentityCreatorController controller;
+  final Widget formView;
+
+  const IdentityCreatorFormDesktopBuilder({
+    super.key,
+    required this.controller,
+    required this.formView,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final appLocalizations = AppLocalizations.of(context);
+
+    return Scaffold(
+      backgroundColor: Colors.black.withOpacity(0.2),
+      body: GestureDetector(
+        onTap: () => controller.clearFocusEditor(context),
+        child: Center(
+          child: Container(
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: const BorderRadius.all(Radius.circular(16)),
+              boxShadow: [
+                BoxShadow(
+                  color: Colors.black.withOpacity(0.08),
+                  blurRadius: 24,
+                  offset: const Offset(0, 2),
+                ),
+                BoxShadow(
+                  color: Colors.black.withOpacity(0.08),
+                  blurRadius: 2,
+                ),
+              ],
+            ),
+            width: min(
+              controller.responsiveUtils.getSizeScreenWidth(context) - 48,
+              784,
+            ),
+            child: Stack(
+              children: [
+                Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Obx(() {
+                      final actionType = controller.actionType.value;
+                      return IdentityCreatorFormTitleWidget(
+                        title: actionType.getTitle(appLocalizations),
+                      );
+                    }),
+                    Flexible(child: formView),
+                    const SizedBox(height: 24),
+                    IdentityCreatorFormBottomView(controller: controller),
+                  ],
+                ),
+                DefaultCloseButtonWidget(
+                  iconClose: controller.imagePaths.icCloseDialog,
+                  onTapActionCallback: () => controller.closeView(context),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/base/widget/default_field/default_app_bar_widget.dart';
+import 'package:tmail_ui_user/features/identity_creator/presentation/identity_creator_controller.dart';
+import 'package:tmail_ui_user/features/identity_creator/presentation/widgets/identity_creator_form_bottom_view.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class IdentityCreatorFormMobileBuilder extends StatelessWidget {
+  final IdentityCreatorController controller;
+  final Widget formView;
+
+  const IdentityCreatorFormMobileBuilder({
+    super.key,
+    required this.controller,
+    required this.formView,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final appLocalizations = AppLocalizations.of(context);
+
+    return Scaffold(
+      backgroundColor: Colors.white,
+      body: GestureDetector(
+        onTap: () => controller.clearFocusEditor(context),
+        child: SafeArea(
+          child: ColoredBox(
+            color: Colors.white,
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Obx(() {
+                  final actionType = controller.actionType.value;
+                  return DefaultAppBarWidget(
+                    title: actionType.getTitle(appLocalizations),
+                    imagePaths: controller.imagePaths,
+                    responsiveUtils: controller.responsiveUtils,
+                    onBackAction: () => controller.closeView(context),
+                  );
+                }),
+                Expanded(
+                  child: SingleChildScrollView(
+                    controller: controller.scrollController,
+                    physics: const ClampingScrollPhysics(),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        Flexible(child: formView),
+                        IdentityCreatorFormBottomView(controller: controller),
+                      ],
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
@@ -0,0 +1,29 @@
+import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:flutter/material.dart';
+
+class IdentityCreatorFormTitleWidget extends StatelessWidget {
+  final String title;
+
+  const IdentityCreatorFormTitleWidget({super.key, required this.title});
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Padding(
+        padding: const EdgeInsetsDirectional.only(
+          start: 32,
+          end: 32,
+          top: 24,
+          bottom: 12,
+        ),
+        child: Text(
+          title,
+          maxLines: 1,
+          textAlign: TextAlign.center,
+          overflow: TextOverflow.ellipsis,
+          style: ThemeUtils.textStyleM3HeadlineSmall,
+        ),
+      ),
+    );
+  }
+}
@@ -1,103 +0,0 @@
-
-import 'package:core/presentation/extensions/color_extension.dart';
-import 'package:core/presentation/resources/image_paths.dart';
-import 'package:core/presentation/utils/style_utils.dart';
-import 'package:core/presentation/utils/theme_utils.dart';
-import 'package:dropdown_button2/dropdown_button2.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
-import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
-import 'package:model/extensions/email_address_extension.dart';
-
-typedef OnSelectEmailAddressDropListAction = Function(EmailAddress? emailAddress);
-
-class IdentityDropListFieldBuilder extends StatelessWidget {
-
-  final ImagePaths _imagePaths;
-  final String _label;
-  final EmailAddress? _emailAddressSelected;
-  final List<EmailAddress> _listEmailAddress;
-  final OnSelectEmailAddressDropListAction? onSelectItemDropList;
-
-  const IdentityDropListFieldBuilder(
-    this._imagePaths,
-    this._label,
-    this._emailAddressSelected,
-    this._listEmailAddress, {
-    super.key,
-    this.onSelectItemDropList
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-      Text(
-        _label,
-        style: ThemeUtils.defaultTextStyleInterFont.copyWith(
-          fontSize: 14,
-          fontWeight: FontWeight.normal,
-          color: AppColor.colorContentEmail)),
-      const SizedBox(height: 8),
-      DropdownButtonHideUnderline(
-        child: DropdownButton2<EmailAddress>(
-          isExpanded: true,
-          hint: Row(
-            children: [
-              Expanded(child: Text(
-                '',
-                style: ThemeUtils.defaultTextStyleInterFont.copyWith(
-                  fontSize: 16,
-                  fontWeight: FontWeight.normal,
-                  color: Colors.black,
-                ),
-                maxLines: 1,
-                overflow: CommonTextStyle.defaultTextOverFlow,
-                softWrap: CommonTextStyle.defaultSoftWrap,
-              )),
-            ],
-          ),
-          items: _listEmailAddress.map((item) => DropdownMenuItem<EmailAddress>(
-            value: item,
-            child: Text(
-              item.emailAddress,
-              style: ThemeUtils.defaultTextStyleInterFont.copyWith(fontSize: 16, fontWeight: FontWeight.normal, color: Colors.black),
-              maxLines: 1,
-              overflow: CommonTextStyle.defaultTextOverFlow,
-              softWrap: CommonTextStyle.defaultSoftWrap,
-            ),
-          )).toList(),
-          value: _emailAddressSelected,
-          onChanged: onSelectItemDropList,
-          buttonStyleData: ButtonStyleData(
-            height: 44,
-            padding: const EdgeInsetsDirectional.only(end: 8),
-            decoration: BoxDecoration(
-              borderRadius: BorderRadius.circular(10),
-              border: Border.all(color: AppColor.colorInputBorderCreateMailbox, width: 0.5),
-              color: AppColor.colorInputBackgroundCreateMailbox),
-          ),
-          dropdownStyleData: DropdownStyleData(
-            maxHeight: 200,
-            decoration: BoxDecoration(
-              borderRadius: BorderRadius.circular(10),
-              color: Colors.white),
-            elevation: 4,
-            scrollbarTheme: ScrollbarThemeData(
-              radius: const Radius.circular(40),
-              thickness: WidgetStateProperty.all<double>(6),
-              thumbVisibility: WidgetStateProperty.all<bool>(true),
-            ),
-          ),
-          iconStyleData: IconStyleData(
-            icon: SvgPicture.asset(_imagePaths.icDropDown),
-            iconSize: 14,
-          ),
-          menuItemStyleData: const MenuItemStyleData(
-            height: 44,
-            padding: EdgeInsets.symmetric(horizontal: 12),
-          ),
-        ),
-      )
-    ]);
-  }
-}
@@ -1,51 +0,0 @@
-
-import 'package:core/presentation/extensions/color_extension.dart';
-import 'package:core/presentation/utils/style_utils.dart';
-import 'package:core/presentation/utils/theme_utils.dart';
-import 'package:flutter/material.dart';
-import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
-
-class IdentityFieldNoEditableBuilder extends StatelessWidget {
-
-  final String _label;
-  final EmailAddress? _emailAddressSelected;
-
-  const IdentityFieldNoEditableBuilder(
-    this._label,
-    this._emailAddressSelected,
-    {super.key}
-  );
-
-  @override
-  Widget build(BuildContext context) {
-    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-      Text(
-        _label,
-        style: ThemeUtils.defaultTextStyleInterFont.copyWith(
-          fontSize: 14,
-          fontWeight: FontWeight.normal,
-          color: AppColor.colorContentEmail)),
-      const SizedBox(height: 8),
-      Container(
-        height: 44,
-        alignment: Alignment.centerLeft,
-        width: double.infinity,
-        padding: const EdgeInsets.symmetric(horizontal: 12),
-        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(10),
-          border: Border.all(color: AppColor.colorInputBorderCreateMailbox, width: 0.5),
-          color: AppColor.colorInputBackgroundCreateMailbox),
-        child: Text(
-          _emailAddressSelected?.email ?? '',
-          style: ThemeUtils.defaultTextStyleInterFont.copyWith(
-            fontSize: 16,
-            fontWeight: FontWeight.normal,
-            color: AppColor.colorInputBorderCreateMailbox),
-          maxLines: 1,
-          overflow: CommonTextStyle.defaultTextOverFlow,
-          softWrap: CommonTextStyle.defaultSoftWrap
-        )
-      ),
-    ]);
-  }
-}
@@ -32,6 +32,7 @@ class IdentityInputDecorationBuilder extends InputDecorationBuilder {
      filled: true,
      fillColor: errorText?.isNotEmpty == true
          ? AppColor.colorInputBackgroundErrorVerifyName
-          : AppColor.colorInputBackgroundCreateMailbox);
+          : Colors.white,
+    );
  }
 }
@@ -1,66 +0,0 @@
-
-import 'package:core/presentation/extensions/color_extension.dart';
-import 'package:core/presentation/utils/theme_utils.dart';
-import 'package:core/presentation/views/text/text_field_builder.dart';
-import 'package:core/utils/direction_utils.dart';
-import 'package:core/utils/platform_info.dart';
-import 'package:flutter/material.dart';
-import 'package:tmail_ui_user/features/identity_creator/presentation/widgets/identity_input_decoration_builder.dart';
-
-typedef OnChangeInputNameAction = Function(String? value);
-
-class IdentityInputFieldBuilder extends StatelessWidget {
-
-  final String _label;
-  final String? _error;
-  final String? requiredIndicator;
-  final TextEditingController? editingController;
-  final FocusNode? focusNode;
-  final TextInputType? inputType;
-  final bool isMandatory;
-  final OnChangeInputNameAction? onChangeInputNameAction;
-
-  const IdentityInputFieldBuilder(
-    this._label,
-    this._error,
-    this.requiredIndicator, {
-    super.key,
-    this.isMandatory = false,
-    this.editingController,
-    this.focusNode,
-    this.inputType,
-    this.onChangeInputNameAction
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-      Text(
-        isMandatory 
-          ? '$_label ($requiredIndicator)' 
-          : _label, style: ThemeUtils.defaultTextStyleInterFont.copyWith(
-            fontSize: 14,
-            fontWeight: FontWeight.w500,
-            color: AppColor.colorContentEmail)),
-      const SizedBox(height: 8),
-      TextFieldBuilder(
-        onTextChange: onChangeInputNameAction,
-        textInputAction: TextInputAction.next,
-        autoFocus: true,
-        maxLines: 1,
-        textDirection: DirectionUtils.getDirectionByLanguage(context),
-        controller: editingController,
-        focusNode: focusNode,
-        textStyle: ThemeUtils.defaultTextStyleInterFont.copyWith(color: Colors.black, fontSize: 16),
-        keyboardType: inputType ?? TextInputType.text,
-        semanticLabel: 'Identity input field',
-        decoration: (IdentityInputDecorationBuilder()
-          ..setContentPadding(EdgeInsets.symmetric(
-              vertical: PlatformInfo.isWeb ? 16 : 12,
-              horizontal: 12))
-          ..setErrorText(_error))
-        .build(),
-      )
-    ]);
-  }
-}
@@ -1,88 +0,0 @@
-
-import 'package:core/presentation/extensions/color_extension.dart';
-import 'package:core/presentation/utils/theme_utils.dart';
-import 'package:core/presentation/views/text/type_ahead_form_field_builder.dart';
-import 'package:core/utils/platform_info.dart';
-import 'package:flutter/material.dart';
-import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
-import 'package:tmail_ui_user/features/identity_creator/presentation/widgets/identity_input_decoration_builder.dart';
-
-typedef OnSelectedSuggestionAction = Function(EmailAddress? emailAddress);
-typedef OnSuggestionCallbackAction = Function(String? pattern);
-typedef OnChangeInputSuggestionAction = Function(String? pattern);
-
-class IdentityInputWithDropListFieldBuilder extends StatelessWidget {
-
-  final String _label;
-  final String? _error;
-  final TextEditingController? editingController;
-  final FocusNode? focusNode;
-  final OnSelectedSuggestionAction? onSelectedSuggestionAction;
-  final OnSuggestionCallbackAction? onSuggestionCallbackAction;
-  final OnChangeInputSuggestionAction? onChangeInputSuggestionAction;
-
-  const IdentityInputWithDropListFieldBuilder(
-    this._label,
-    this._error,
-    this.editingController, {
-    super.key,
-    this.focusNode,
-    this.onSelectedSuggestionAction,
-    this.onSuggestionCallbackAction,
-    this.onChangeInputSuggestionAction,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-      Text(
-        _label,
-        style: ThemeUtils.defaultTextStyleInterFont.copyWith(
-          fontSize: 14,
-          fontWeight: FontWeight.normal,
-          color: AppColor.colorContentEmail)),
-      const SizedBox(height: 8),
-      TypeAheadFormFieldBuilder<EmailAddress>(
-        focusNode: focusNode,
-        controller: editingController,
-        textInputAction: TextInputAction.done,
-        decoration: (IdentityInputDecorationBuilder()
-          ..setContentPadding(EdgeInsets.symmetric(
-              vertical: PlatformInfo.isWeb ? 16 : 12,
-              horizontal: 12))
-          ..setErrorText(_error))
-        .build(),
-        debounceDuration: const Duration(milliseconds: 500),
-        suggestionsCallback: (pattern) async {
-          if (onChangeInputSuggestionAction != null) {
-            onChangeInputSuggestionAction!(pattern);
-          }
-          if (onSuggestionCallbackAction != null) {
-            return onSuggestionCallbackAction!(pattern);
-          } else {
-            return [];
-          }
-        },
-        itemBuilder: (BuildContext context, emailAddress) {
-          return Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
-            child: Text(
-              emailAddress.email ?? '',
-              style: ThemeUtils.defaultTextStyleInterFont.copyWith(
-                fontSize: 14,
-                fontWeight: FontWeight.normal,
-                color: Colors.black)));
-        },
-        onSuggestionSelected: (emailSelected) {
-          if (onSelectedSuggestionAction != null) {
-            onSelectedSuggestionAction!(emailSelected);
-          }
-        },
-        noItemsFoundBuilder: (context) => const SizedBox(),
-        hideOnEmpty: true,
-        hideOnError: true,
-        hideOnLoading: true,
-      )
-    ]);
-  }
-}
@@ -0,0 +1,212 @@
+import 'package:core/presentation/constants/constants_ui.dart';
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/utils/html/html_utils.dart';
+import 'package:core/utils/platform_info.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:pointer_interceptor/pointer_interceptor.dart';
+import 'package:rich_text_composer/rich_text_composer.dart';
+import 'package:html_editor_enhanced/html_editor.dart' as html_editor_browser;
+import 'package:tmail_ui_user/features/composer/presentation/mixin/rich_text_button_mixin.dart';
+import 'package:tmail_ui_user/features/composer/presentation/widgets/web/local_file_drop_zone_widget.dart';
+import 'package:tmail_ui_user/features/composer/presentation/widgets/web/toolbar_rich_text_builder.dart';
+import 'package:tmail_ui_user/features/identity_creator/presentation/identity_creator_controller.dart';
+import 'package:tmail_ui_user/features/identity_creator/presentation/widgets/insert_image_loading_indicator.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/draggable_app_state.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+import 'package:tmail_ui_user/main/utils/app_utils.dart';
+
+class IdentitySignatureInputFieldWidget extends StatelessWidget
+    with RichTextButtonMixin {
+  final IdentityCreatorController controller;
+
+  IdentitySignatureInputFieldWidget({
+    super.key,
+    required this.controller,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (_, constraints) {
+        return Stack(
+          children: [
+            Container(
+              decoration: BoxDecoration(
+                borderRadius: const BorderRadius.all(Radius.circular(10)),
+                border: Border.all(color: AppColor.m3Neutral90),
+              ),
+              padding: const EdgeInsetsDirectional.only(
+                start: 8,
+                end: 8,
+                top: 4,
+                bottom: 8,
+              ),
+              child: _buildSignatureHtmlTemplate(
+                context,
+                constraints.maxWidth,
+              ),
+            ),
+            Obx(() {
+              final draggableAppState = controller.draggableAppState.value;
+              if (draggableAppState == DraggableAppState.inActive) {
+                return const SizedBox.shrink();
+              }
+              return Positioned.fill(
+                child: PointerInterceptor(
+                  child: LocalFileDropZoneWidget(
+                    imagePaths: controller.imagePaths,
+                    width: constraints.maxWidth,
+                    height: constraints.maxHeight,
+                    margin: EdgeInsets.zero,
+                    onLocalFileDropZoneListener: (details) =>
+                        controller.onLocalFileDropZoneListener(
+                      context: context,
+                      details: details,
+                      maxWidth: constraints.maxWidth,
+                    ),
+                  ),
+                ),
+              );
+            }),
+            Obx(() {
+              final isUploading =
+                  controller.publicAssetController?.isUploading.isTrue ?? false;
+              final isCompressingInlineImage =
+                  controller.isCompressingInlineImage.isTrue;
+
+              return InsertImageLoadingIndicator(
+                isInserting: isUploading || isCompressingInlineImage,
+              );
+            }),
+          ],
+        );
+      },
+    );
+  }
+
+  Widget _buildSignatureHtmlTemplate(BuildContext context, double maxWidth) {
+    if (PlatformInfo.isWeb) {
+      return Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          ToolbarRichTextWebBuilder(
+            richTextWebController: controller.richTextWebController!,
+            padding: const EdgeInsets.only(bottom: 12),
+            extendedOption: [
+              Padding(
+                padding: const EdgeInsetsDirectional.only(end: 4.0),
+                child: buildWrapIconStyleText(
+                  icon: buildIconWithTooltip(
+                    path: controller.imagePaths.icAddPicture,
+                    tooltip: AppLocalizations.of(context).insertImage,
+                  ),
+                  hasDropdown: false,
+                  onTap: () => controller.pickImage(context),
+                ),
+              ),
+            ],
+          ),
+          SizedBox(
+            height: 189,
+            child: _buildHtmlEditorWeb(
+              context,
+              controller.contentHtmlEditor,
+              maxWidth,
+            ),
+          ),
+        ],
+      );
+    } else {
+      return _buildHtmlEditor(
+        context,
+        initialContent: controller.contentHtmlEditor,
+      );
+    }
+  }
+
+  Widget _buildHtmlEditorWeb(
+    BuildContext context,
+    String initContent,
+    double maxWidth,
+  ) {
+    final richTextWebController = controller.richTextWebController!;
+
+    return html_editor_browser.HtmlEditor(
+      key: const Key('identity_create_editor_web'),
+      controller: richTextWebController.editorController,
+      htmlEditorOptions: html_editor_browser.HtmlEditorOptions(
+        shouldEnsureVisible: true,
+        hint: '',
+        darkMode: false,
+        cacheHTMLAssetOffline: true,
+        initialText: initContent.isEmpty ? null : initContent,
+        disableDragAndDrop: true,
+        spellCheck: true,
+        customBodyCssStyle: HtmlUtils.customCssStyleHtmlEditor(
+          direction: AppUtils.getCurrentDirection(context),
+        ),
+      ),
+      htmlToolbarOptions: const html_editor_browser.HtmlToolbarOptions(
+        toolbarType: html_editor_browser.ToolbarType.hide,
+        defaultToolbarButtons: [],
+      ),
+      otherOptions: const html_editor_browser.OtherOptions(height: 200),
+      callbacks: html_editor_browser.Callbacks(
+        onBeforeCommand: controller.updateContentHtmlEditor,
+        onChangeContent: (content) {
+          controller.updateContentHtmlEditor(content);
+          if (!controller.isLoadSignatureCompleted) {
+            controller.onLoadSignatureCompleted(content);
+          }
+        },
+        onInit: () {
+          richTextWebController.editorController.setOnDragDropEvent();
+          richTextWebController.editorController.setFullScreen();
+          controller.updateContentHtmlEditor(initContent);
+        },
+        onFocus: () {
+          FocusManager.instance.primaryFocus?.unfocus();
+          Future.delayed(const Duration(milliseconds: 500), () {
+            richTextWebController.editorController.setFocus();
+          });
+          richTextWebController.closeAllMenuPopup();
+        },
+        onChangeSelection: richTextWebController.onEditorSettingsChange,
+        onChangeCodeview: controller.updateContentHtmlEditor,
+        onDragEnter: controller.handleOnDragEnterSignatureEditorWeb,
+        onDragLeave: (_) {},
+        onImageUpload: (listFileUpload) => controller.onPasteImageSuccess(
+          context,
+          listFileUpload,
+          maxWidth: maxWidth,
+        ),
+        onImageUploadError: (listFileUpload, base64, uploadError) =>
+            controller.onPasteImageFailure(
+          context,
+          listFileUpload,
+          base64: base64,
+          uploadError: uploadError,
+        ),
+      ),
+    );
+  }
+
+  Widget _buildHtmlEditor(BuildContext context, {String? initialContent}) {
+    return HtmlEditor(
+      key: controller.htmlKey,
+      minHeight: ConstantsUI.htmlContentMinHeight.toInt(),
+      maxHeight:
+          PlatformInfo.isIOS ? ConstantsUI.composerHtmlContentMaxHeight : null,
+      addDefaultSelectionMenuItems: false,
+      initialContent: initialContent ?? '',
+      customStyleCss: HtmlUtils.customCssStyleHtmlEditor(
+        direction: AppUtils.getCurrentDirection(context),
+      ),
+      onCreated: (editorApi) => controller.initRichTextForMobile(
+        context,
+        editorApi,
+      ),
+    );
+  }
+}