diff --git a/core/lib/utils/html/html_utils.dart b/core/lib/utils/html/html_utils.dart index 3c2eb21be..7a60023a0 100644 --- a/core/lib/utils/html/html_utils.dart +++ b/core/lib/utils/html/html_utils.dart @@ -46,6 +46,15 @@ class HtmlUtils { editor.parentNode.replaceChild(newEditor, editor);''', name: 'unregisterDropListener'); + static recalculateEditorHeight({double? maxHeight}) => ( + script: ''' + const editable = document.querySelector('.note-editable'); + if (editable) { + editable.style.height = $maxHeight + 'px'; + } + ''', + name: 'recalculateEditorHeight'); + static String customInlineBodyCssStyleHtmlEditor({ TextDirection direction = TextDirection.ltr, double? horizontalPadding, diff --git a/lib/features/composer/presentation/composer_view_web.dart b/lib/features/composer/presentation/composer_view_web.dart index e40e01d11..d9351d4d1 100644 --- a/lib/features/composer/presentation/composer_view_web.dart +++ b/lib/features/composer/presentation/composer_view_web.dart @@ -65,7 +65,7 @@ class ComposerView extends GetWidget { return ResponsiveWidget( responsiveUtils: controller.responsiveUtils, mobile: MobileResponsiveContainerView( - childBuilder: (context, constraints) { + childBuilder: (_, constraints) { return GestureDetector( onTap: () => controller.clickOutsideComposer(context), child: Column( @@ -239,14 +239,14 @@ class ComposerView extends GetWidget { margin: ComposerStyle.mobileSubjectMargin, ), Expanded( - child: LayoutBuilder( - builder: (_, constraintsEditor) { - return Stack( + child: Stack( + children: [ + Column( children: [ - Column( - children: [ - Expanded( - child: Obx(() => WebEditorView( + Expanded( + child: LayoutBuilder( + builder: (_, constraintsEditor) { + return Obx(() => WebEditorView( key: controller.responsiveContainerKey, editorController: controller.richTextWebController!.editorController, arguments: controller.composerArguments.value, @@ -258,7 +258,7 @@ class ComposerView extends GetWidget { onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, onEditorSettings: controller.richTextWebController!.onEditorSettingsChange, onEditorTextSizeChanged: controller.richTextWebController!.onEditorTextSizeChanged, - height: constraints.maxHeight, + height: constraintsEditor.maxHeight, horizontalPadding: ComposerStyle.mobileEditorHorizontalPadding, onDragEnter: controller.handleOnDragEnterHtmlEditorWeb, onDragOver: controller.handleOnDragOverHtmlEditorWeb, @@ -275,87 +275,83 @@ class ComposerView extends GetWidget { uploadError: uploadError ), onInitialContentLoadComplete: controller.onInitialContentLoadCompleteWeb, - )), - ), - Obx(() { - if (controller.uploadController.listUploadAttachments.isNotEmpty) { - return AttachmentComposerWidget( - listFileUploaded: controller.uploadController.listUploadAttachments, - isCollapsed: controller.isAttachmentCollapsed, - onDeleteAttachmentAction: controller.deleteAttachmentUploaded, - onToggleExpandAttachmentAction: (isCollapsed) => controller.isAttachmentCollapsed = isCollapsed, - ); - } else { - return const SizedBox.shrink(); - } - }), - Obx(() { - if (controller.richTextWebController!.isFormattingOptionsEnabled) { - return ToolbarRichTextWidget( - richTextController: controller.richTextWebController!, - imagePaths: controller.imagePaths, - padding: ComposerStyle.richToolbarPadding, - decoration: const BoxDecoration( - color: ComposerStyle.richToolbarColor, - boxShadow: ComposerStyle.richToolbarShadow, - ), - isMobile: controller.responsiveUtils.isMobile(context), - ); - } else { - return const SizedBox.shrink(); - } - }) - ], + )); + } + ), ), - Align( - alignment: AlignmentDirectional.topCenter, - child: Obx(() => InsertImageLoadingBarWidget( - uploadInlineViewState: controller.uploadController.uploadInlineViewState.value, - viewState: controller.viewState.value, - margin: ComposerStyle.insertImageLoadingBarMargin, - )), - ), - iframeOverlay, Obx(() { - if (controller.mailboxDashBoardController.isAttachmentDraggableAppActive) { - return Positioned.fill( - child: PointerInterceptor( - child: AttachmentDropZoneWidget( - imagePaths: controller.imagePaths, - width: constraintsEditor.maxWidth, - height: constraintsEditor.maxHeight, - onAttachmentDropZoneListener: controller.onAttachmentDropZoneListener, - ) - ), + if (controller.uploadController.listUploadAttachments.isNotEmpty) { + return AttachmentComposerWidget( + listFileUploaded: controller.uploadController.listUploadAttachments, + isCollapsed: controller.isAttachmentCollapsed, + onDeleteAttachmentAction: controller.deleteAttachmentUploaded, + onToggleExpandAttachmentAction: (isCollapsed) => controller.isAttachmentCollapsed = isCollapsed, ); } else { return const SizedBox.shrink(); } }), Obx(() { - if (controller.mailboxDashBoardController.isLocalFileDraggableAppActive) { - return Positioned.fill( - child: PointerInterceptor( - child: LocalFileDropZoneWidget( - imagePaths: controller.imagePaths, - width: constraintsEditor.maxWidth, - height: constraintsEditor.maxHeight, - onLocalFileDropZoneListener: (details) => - controller.onLocalFileDropZoneListener( - context: context, - details: details, - maxWidth: constraintsEditor.maxWidth, - ), - ) + if (controller.richTextWebController!.isFormattingOptionsEnabled) { + return ToolbarRichTextWidget( + richTextController: controller.richTextWebController!, + imagePaths: controller.imagePaths, + padding: ComposerStyle.richToolbarPadding, + decoration: const BoxDecoration( + color: ComposerStyle.richToolbarColor, + boxShadow: ComposerStyle.richToolbarShadow, ), + isMobile: controller.responsiveUtils.isMobile(context), ); } else { return const SizedBox.shrink(); } - }), + }) ], - ); - } + ), + Align( + alignment: AlignmentDirectional.topCenter, + child: Obx(() => InsertImageLoadingBarWidget( + uploadInlineViewState: controller.uploadController.uploadInlineViewState.value, + viewState: controller.viewState.value, + margin: ComposerStyle.insertImageLoadingBarMargin, + )), + ), + iframeOverlay, + Obx(() { + if (controller.mailboxDashBoardController.isAttachmentDraggableAppActive) { + return Positioned.fill( + child: PointerInterceptor( + child: AttachmentDropZoneWidget( + imagePaths: controller.imagePaths, + onAttachmentDropZoneListener: controller.onAttachmentDropZoneListener, + ) + ), + ); + } else { + return const SizedBox.shrink(); + } + }), + Obx(() { + if (controller.mailboxDashBoardController.isLocalFileDraggableAppActive) { + return Positioned.fill( + child: PointerInterceptor( + child: LocalFileDropZoneWidget( + imagePaths: controller.imagePaths, + onLocalFileDropZoneListener: (details) => + controller.onLocalFileDropZoneListener( + context: context, + details: details, + maxWidth: constraints.maxWidth, + ), + ) + ), + ); + } else { + return const SizedBox.shrink(); + } + }), + ], ), ), ] @@ -519,27 +515,27 @@ class ComposerView extends GetWidget { margin: ComposerStyle.desktopSubjectMargin, ), Expanded( - child: LayoutBuilder( - builder: (_, constraintsEditor) { - return Stack( + child: Stack( + children: [ + Column( children: [ - Column( - children: [ - Expanded( - child: Container( - decoration: const BoxDecoration( - border: Border( - bottom: BorderSide( - color: ComposerStyle.borderColor, - width: 1 - ) - ), - color: ComposerStyle.backgroundEditorColor - ), - child: Column( - children: [ - Expanded( - child: Obx(() { + Expanded( + child: Container( + decoration: const BoxDecoration( + border: Border( + bottom: BorderSide( + color: ComposerStyle.borderColor, + width: 1 + ) + ), + color: ComposerStyle.backgroundEditorColor + ), + child: Column( + children: [ + Expanded( + child: LayoutBuilder( + builder: (_, constraintsEditor) { + return Obx(() { return WebEditorView( key: controller.responsiveContainerKey, editorController: controller.richTextWebController!.editorController, @@ -552,7 +548,7 @@ class ComposerView extends GetWidget { onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, onEditorSettings: controller.richTextWebController?.onEditorSettingsChange, onEditorTextSizeChanged: controller.richTextWebController?.onEditorTextSizeChanged, - height: constraints.maxHeight, + height: constraintsEditor.maxHeight, horizontalPadding: ComposerStyle.desktopEditorHorizontalPadding, onDragEnter: controller.handleOnDragEnterHtmlEditorWeb, onDragOver: controller.handleOnDragOverHtmlEditorWeb, @@ -570,112 +566,109 @@ class ComposerView extends GetWidget { ), onInitialContentLoadComplete: controller.onInitialContentLoadCompleteWeb, ); - }), - ), - Obx(() { - if (controller.uploadController.listUploadAttachments.isNotEmpty) { - return AttachmentComposerWidget( - listFileUploaded: controller.uploadController.listUploadAttachments, - isCollapsed: controller.isAttachmentCollapsed, - onDeleteAttachmentAction: controller.deleteAttachmentUploaded, - onToggleExpandAttachmentAction: (isCollapsed) => controller.isAttachmentCollapsed = isCollapsed, - ); - } else { - return const SizedBox.shrink(); - } - }), - Obx(() { - if (controller.richTextWebController!.isFormattingOptionsEnabled) { - return ToolbarRichTextWidget( - richTextController: controller.richTextWebController!, - imagePaths: controller.imagePaths, - padding: ComposerStyle.richToolbarPadding, - decoration: const BoxDecoration( - color: ComposerStyle.richToolbarColor, - boxShadow: ComposerStyle.richToolbarShadow, - ), - isMobile: controller.responsiveUtils.isMobile(context), - ); - } else { - return const SizedBox.shrink(); - } - }) - ], + }); + } + ), ), - ), + Obx(() { + if (controller.uploadController.listUploadAttachments.isNotEmpty) { + return AttachmentComposerWidget( + listFileUploaded: controller.uploadController.listUploadAttachments, + isCollapsed: controller.isAttachmentCollapsed, + onDeleteAttachmentAction: controller.deleteAttachmentUploaded, + onToggleExpandAttachmentAction: (isCollapsed) => controller.isAttachmentCollapsed = isCollapsed, + ); + } else { + return const SizedBox.shrink(); + } + }), + Obx(() { + if (controller.richTextWebController!.isFormattingOptionsEnabled) { + return ToolbarRichTextWidget( + richTextController: controller.richTextWebController!, + imagePaths: controller.imagePaths, + padding: ComposerStyle.richToolbarPadding, + decoration: const BoxDecoration( + color: ComposerStyle.richToolbarColor, + boxShadow: ComposerStyle.richToolbarShadow, + ), + isMobile: controller.responsiveUtils.isMobile(context), + ); + } else { + return const SizedBox.shrink(); + } + }) + ], ), - Obx(() => BottomBarComposerWidget( - imagePaths: controller.imagePaths, - isCodeViewEnabled: controller.richTextWebController!.codeViewEnabled, - isFormattingOptionsEnabled: controller.richTextWebController!.isFormattingOptionsEnabled, - hasReadReceipt: controller.hasRequestReadReceipt.value, - isMarkAsImportant: controller.isMarkAsImportant.value, - openRichToolbarAction: controller.richTextWebController!.toggleFormattingOptions, - attachFileAction: () => controller.openFilePickerByType(context, FileType.any), - insertImageAction: () => controller.insertImage(context, constraints.maxWidth), - deleteComposerAction: () => controller.handleClickDeleteComposer(context), - saveToDraftAction: () => controller.handleClickSaveAsDraftsButton(context), - sendMessageAction: () => controller.handleClickSendButton(context), - isEmailChanged: controller.isEmailChanged.isTrue, - toggleCodeViewAction: controller.richTextWebController!.toggleCodeView, - menuMoreOptionController: controller.menuMoreOptionController!, - onPopupMenuChanged: controller.onPopupMenuChanged, - printDraftAction: () => controller.printDraft(context), - toggleRequestReadReceiptAction: () => controller.toggleRequestReadReceipt(context), - toggleMarkAsImportantAction: () => controller.toggleMarkAsImportant(context), - saveAsTemplateAction: () => controller.handleClickSaveAsTemplateButton(context), - )), - ], + ), ), - Align( - alignment: AlignmentDirectional.topCenter, - child: Obx(() => InsertImageLoadingBarWidget( - uploadInlineViewState: controller.uploadController.uploadInlineViewState.value, - viewState: controller.viewState.value, - margin: ComposerStyle.insertImageLoadingBarMargin, - )), - ), - iframeOverlay, - Obx(() { - if (controller.mailboxDashBoardController.isAttachmentDraggableAppActive) { - return Positioned.fill( - child: PointerInterceptor( - child: AttachmentDropZoneWidget( - imagePaths: controller.imagePaths, - width: constraintsEditor.maxWidth, - height: constraintsEditor.maxHeight, - onAttachmentDropZoneListener: controller.onAttachmentDropZoneListener, - ) - ), - ); - } else { - return const SizedBox.shrink(); - } - }), - Obx(() { - if (controller.mailboxDashBoardController.isLocalFileDraggableAppActive) { - return Positioned.fill( - child: PointerInterceptor( - child: LocalFileDropZoneWidget( - imagePaths: controller.imagePaths, - width: constraintsEditor.maxWidth, - height: constraintsEditor.maxHeight, - onLocalFileDropZoneListener: (details) => - controller.onLocalFileDropZoneListener( - context: context, - details: details, - maxWidth: constraintsEditor.maxWidth, - ), - ) - ), - ); - } else { - return const SizedBox.shrink(); - } - }), + Obx(() => BottomBarComposerWidget( + imagePaths: controller.imagePaths, + isCodeViewEnabled: controller.richTextWebController!.codeViewEnabled, + isFormattingOptionsEnabled: controller.richTextWebController!.isFormattingOptionsEnabled, + hasReadReceipt: controller.hasRequestReadReceipt.value, + isMarkAsImportant: controller.isMarkAsImportant.value, + openRichToolbarAction: controller.richTextWebController!.toggleFormattingOptions, + attachFileAction: () => controller.openFilePickerByType(context, FileType.any), + insertImageAction: () => controller.insertImage(context, constraints.maxWidth), + deleteComposerAction: () => controller.handleClickDeleteComposer(context), + saveToDraftAction: () => controller.handleClickSaveAsDraftsButton(context), + sendMessageAction: () => controller.handleClickSendButton(context), + isEmailChanged: controller.isEmailChanged.isTrue, + toggleCodeViewAction: controller.richTextWebController!.toggleCodeView, + menuMoreOptionController: controller.menuMoreOptionController!, + onPopupMenuChanged: controller.onPopupMenuChanged, + printDraftAction: () => controller.printDraft(context), + toggleRequestReadReceiptAction: () => controller.toggleRequestReadReceipt(context), + toggleMarkAsImportantAction: () => controller.toggleMarkAsImportant(context), + saveAsTemplateAction: () => controller.handleClickSaveAsTemplateButton(context), + )), ], - ); - } + ), + Align( + alignment: AlignmentDirectional.topCenter, + child: Obx(() => InsertImageLoadingBarWidget( + uploadInlineViewState: controller.uploadController.uploadInlineViewState.value, + viewState: controller.viewState.value, + margin: ComposerStyle.insertImageLoadingBarMargin, + )), + ), + iframeOverlay, + Obx(() { + if (controller.mailboxDashBoardController.isAttachmentDraggableAppActive) { + return Positioned.fill( + child: PointerInterceptor( + child: AttachmentDropZoneWidget( + imagePaths: controller.imagePaths, + onAttachmentDropZoneListener: + controller.onAttachmentDropZoneListener, + ) + ), + ); + } else { + return const SizedBox.shrink(); + } + }), + Obx(() { + if (controller.mailboxDashBoardController.isLocalFileDraggableAppActive) { + return Positioned.fill( + child: PointerInterceptor( + child: LocalFileDropZoneWidget( + imagePaths: controller.imagePaths, + onLocalFileDropZoneListener: (details) => + controller.onLocalFileDropZoneListener( + context: context, + details: details, + maxWidth: constraints.maxWidth, + ), + ) + ), + ); + } else { + return const SizedBox.shrink(); + } + }), + ], ), ), ]), @@ -843,27 +836,27 @@ class ComposerView extends GetWidget { margin: ComposerStyle.tabletSubjectMargin, ), Expanded( - child: LayoutBuilder( - builder: (_, constraintsBody) { - return Stack( + child: Stack( + children: [ + Column( children: [ - Column( - children: [ - Expanded( - child: Container( - decoration: const BoxDecoration( - border: Border( - bottom: BorderSide( - color: ComposerStyle.borderColor, - width: 1 - ) - ), - color: ComposerStyle.backgroundEditorColor - ), - child: Column( - children: [ - Expanded( - child: Obx(() => WebEditorView( + Expanded( + child: Container( + decoration: const BoxDecoration( + border: Border( + bottom: BorderSide( + color: ComposerStyle.borderColor, + width: 1 + ) + ), + color: ComposerStyle.backgroundEditorColor + ), + child: Column( + children: [ + Expanded( + child: LayoutBuilder( + builder: (_, constraintsBody) { + return Obx(() => WebEditorView( key: controller.responsiveContainerKey, editorController: controller.richTextWebController!.editorController, arguments: controller.composerArguments.value, @@ -875,7 +868,7 @@ class ComposerView extends GetWidget { onMouseDown: controller.handleOnMouseDownHtmlEditorWeb, onEditorSettings: controller.richTextWebController!.onEditorSettingsChange, onEditorTextSizeChanged: controller.richTextWebController!.onEditorTextSizeChanged, - height: constraints.maxHeight, + height: constraintsBody.maxHeight, horizontalPadding: ComposerStyle.desktopEditorHorizontalPadding, onDragEnter: controller.handleOnDragEnterHtmlEditorWeb, onDragOver: controller.handleOnDragOverHtmlEditorWeb, @@ -892,112 +885,108 @@ class ComposerView extends GetWidget { uploadError: uploadError ), onInitialContentLoadComplete: controller.onInitialContentLoadCompleteWeb, - )), - ), - Obx(() { - if (controller.uploadController.listUploadAttachments.isNotEmpty) { - return AttachmentComposerWidget( - listFileUploaded: controller.uploadController.listUploadAttachments, - isCollapsed: controller.isAttachmentCollapsed, - onDeleteAttachmentAction: controller.deleteAttachmentUploaded, - onToggleExpandAttachmentAction: (isCollapsed) => controller.isAttachmentCollapsed = isCollapsed, - ); - } else { - return const SizedBox.shrink(); - } - }), - Obx(() { - if (controller.richTextWebController!.isFormattingOptionsEnabled) { - return ToolbarRichTextWidget( - richTextController: controller.richTextWebController!, - imagePaths: controller.imagePaths, - padding: ComposerStyle.richToolbarPadding, - decoration: const BoxDecoration( - color: ComposerStyle.richToolbarColor, - boxShadow: ComposerStyle.richToolbarShadow, - ), - isMobile: controller.responsiveUtils.isMobile(context), - ); - } else { - return const SizedBox.shrink(); - } - }) - ], + )); + } + ), ), - ), + Obx(() { + if (controller.uploadController.listUploadAttachments.isNotEmpty) { + return AttachmentComposerWidget( + listFileUploaded: controller.uploadController.listUploadAttachments, + isCollapsed: controller.isAttachmentCollapsed, + onDeleteAttachmentAction: controller.deleteAttachmentUploaded, + onToggleExpandAttachmentAction: (isCollapsed) => controller.isAttachmentCollapsed = isCollapsed, + ); + } else { + return const SizedBox.shrink(); + } + }), + Obx(() { + if (controller.richTextWebController!.isFormattingOptionsEnabled) { + return ToolbarRichTextWidget( + richTextController: controller.richTextWebController!, + imagePaths: controller.imagePaths, + padding: ComposerStyle.richToolbarPadding, + decoration: const BoxDecoration( + color: ComposerStyle.richToolbarColor, + boxShadow: ComposerStyle.richToolbarShadow, + ), + isMobile: controller.responsiveUtils.isMobile(context), + ); + } else { + return const SizedBox.shrink(); + } + }) + ], ), - Obx(() => BottomBarComposerWidget( - imagePaths: controller.imagePaths, - isCodeViewEnabled: controller.richTextWebController!.codeViewEnabled, - isFormattingOptionsEnabled: controller.richTextWebController!.isFormattingOptionsEnabled, - hasReadReceipt: controller.hasRequestReadReceipt.value, - isMarkAsImportant: controller.isMarkAsImportant.value, - openRichToolbarAction: controller.richTextWebController!.toggleFormattingOptions, - attachFileAction: () => controller.openFilePickerByType(context, FileType.any), - insertImageAction: () => controller.insertImage(context, constraints.maxWidth), - deleteComposerAction: () => controller.handleClickDeleteComposer(context), - saveToDraftAction: () => controller.handleClickSaveAsDraftsButton(context), - sendMessageAction: () => controller.handleClickSendButton(context), - isEmailChanged: controller.isEmailChanged.isTrue, - toggleCodeViewAction: controller.richTextWebController!.toggleCodeView, - menuMoreOptionController: controller.menuMoreOptionController!, - onPopupMenuChanged: controller.onPopupMenuChanged, - printDraftAction: () => controller.printDraft(context), - toggleRequestReadReceiptAction: () => controller.toggleRequestReadReceipt(context), - toggleMarkAsImportantAction: () => controller.toggleMarkAsImportant(context), - saveAsTemplateAction: () => controller.handleClickSaveAsTemplateButton(context), - )), - ], + ), ), - Align( - alignment: AlignmentDirectional.topCenter, - child: Obx(() => InsertImageLoadingBarWidget( - uploadInlineViewState: controller.uploadController.uploadInlineViewState.value, - viewState: controller.viewState.value, - margin: ComposerStyle.insertImageLoadingBarMargin, - )), - ), - iframeOverlay, - Obx(() { - if (controller.mailboxDashBoardController.isAttachmentDraggableAppActive) { - return Positioned.fill( - child: PointerInterceptor( - child: AttachmentDropZoneWidget( - imagePaths: controller.imagePaths, - width: constraintsBody.maxWidth, - height: constraintsBody.maxHeight, - onAttachmentDropZoneListener: controller.onAttachmentDropZoneListener, - ) - ), - ); - } else { - return const SizedBox.shrink(); - } - }), - Obx(() { - if (controller.mailboxDashBoardController.isLocalFileDraggableAppActive) { - return Positioned.fill( - child: PointerInterceptor( - child: LocalFileDropZoneWidget( - imagePaths: controller.imagePaths, - width: constraintsBody.maxWidth, - height: constraintsBody.maxHeight, - onLocalFileDropZoneListener: (details) => - controller.onLocalFileDropZoneListener( - context: context, - details: details, - maxWidth: constraintsBody.maxWidth, - ), - ) - ), - ); - } else { - return const SizedBox.shrink(); - } - }), + Obx(() => BottomBarComposerWidget( + imagePaths: controller.imagePaths, + isCodeViewEnabled: controller.richTextWebController!.codeViewEnabled, + isFormattingOptionsEnabled: controller.richTextWebController!.isFormattingOptionsEnabled, + hasReadReceipt: controller.hasRequestReadReceipt.value, + isMarkAsImportant: controller.isMarkAsImportant.value, + openRichToolbarAction: controller.richTextWebController!.toggleFormattingOptions, + attachFileAction: () => controller.openFilePickerByType(context, FileType.any), + insertImageAction: () => controller.insertImage(context, constraints.maxWidth), + deleteComposerAction: () => controller.handleClickDeleteComposer(context), + saveToDraftAction: () => controller.handleClickSaveAsDraftsButton(context), + sendMessageAction: () => controller.handleClickSendButton(context), + isEmailChanged: controller.isEmailChanged.isTrue, + toggleCodeViewAction: controller.richTextWebController!.toggleCodeView, + menuMoreOptionController: controller.menuMoreOptionController!, + onPopupMenuChanged: controller.onPopupMenuChanged, + printDraftAction: () => controller.printDraft(context), + toggleRequestReadReceiptAction: () => controller.toggleRequestReadReceipt(context), + toggleMarkAsImportantAction: () => controller.toggleMarkAsImportant(context), + saveAsTemplateAction: () => controller.handleClickSaveAsTemplateButton(context), + )), ], - ); - }, + ), + Align( + alignment: AlignmentDirectional.topCenter, + child: Obx(() => InsertImageLoadingBarWidget( + uploadInlineViewState: controller.uploadController.uploadInlineViewState.value, + viewState: controller.viewState.value, + margin: ComposerStyle.insertImageLoadingBarMargin, + )), + ), + iframeOverlay, + Obx(() { + if (controller.mailboxDashBoardController.isAttachmentDraggableAppActive) { + return Positioned.fill( + child: PointerInterceptor( + child: AttachmentDropZoneWidget( + imagePaths: controller.imagePaths, + onAttachmentDropZoneListener: controller.onAttachmentDropZoneListener, + ) + ), + ); + } else { + return const SizedBox.shrink(); + } + }), + Obx(() { + if (controller.mailboxDashBoardController.isLocalFileDraggableAppActive) { + return Positioned.fill( + child: PointerInterceptor( + child: LocalFileDropZoneWidget( + imagePaths: controller.imagePaths, + onLocalFileDropZoneListener: (details) => + controller.onLocalFileDropZoneListener( + context: context, + details: details, + maxWidth: constraints.maxWidth, + ), + ) + ), + ); + } else { + return const SizedBox.shrink(); + } + }), + ], ), ) ]), diff --git a/lib/features/composer/presentation/controller/rich_text_web_controller.dart b/lib/features/composer/presentation/controller/rich_text_web_controller.dart index 01a327717..0f1e8325b 100644 --- a/lib/features/composer/presentation/controller/rich_text_web_controller.dart +++ b/lib/features/composer/presentation/controller/rich_text_web_controller.dart @@ -246,6 +246,10 @@ class RichTextWebController extends GetxController { if (codeViewEnabled) { formattingOptionsState.value = FormattingOptionsState.disabled; + } else { + editorController.evaluateJavascriptWeb( + HtmlUtils.recalculateEditorHeight().name, + ); } } diff --git a/lib/features/composer/presentation/widgets/web/attachment_drop_zone_widget.dart b/lib/features/composer/presentation/widgets/web/attachment_drop_zone_widget.dart index 57b0a7e5a..3553f25cb 100644 --- a/lib/features/composer/presentation/widgets/web/attachment_drop_zone_widget.dart +++ b/lib/features/composer/presentation/widgets/web/attachment_drop_zone_widget.dart @@ -28,28 +28,25 @@ class AttachmentDropZoneWidget extends StatelessWidget { Widget build(BuildContext context) { return DragTarget( builder: (context, _, __) { - return SizedBox( - width: width, - height: height, - child: Padding( - padding: DropZoneWidgetStyle.margin, - child: DottedBorder( - borderType: BorderType.RRect, - radius: const Radius.circular(DropZoneWidgetStyle.radius), - color: DropZoneWidgetStyle.borderColor, - strokeWidth: DropZoneWidgetStyle.borderWidth, - dashPattern: DropZoneWidgetStyle.dashSize, - child: Container( - clipBehavior: Clip.antiAlias, - decoration: ShapeDecoration( - color: DropZoneWidgetStyle.backgroundColor, - shape: const RoundedRectangleBorder( - borderRadius: BorderRadius.all(Radius.circular(DropZoneWidgetStyle.radius)), - ), + final childWidget = Padding( + padding: DropZoneWidgetStyle.margin, + child: DottedBorder( + borderType: BorderType.RRect, + radius: const Radius.circular(DropZoneWidgetStyle.radius), + color: DropZoneWidgetStyle.borderColor, + strokeWidth: DropZoneWidgetStyle.borderWidth, + dashPattern: DropZoneWidgetStyle.dashSize, + child: Container( + clipBehavior: Clip.antiAlias, + decoration: ShapeDecoration( + color: DropZoneWidgetStyle.backgroundColor, + shape: const RoundedRectangleBorder( + borderRadius: BorderRadius.all(Radius.circular(DropZoneWidgetStyle.radius)), ), - padding: DropZoneWidgetStyle.padding, - alignment: AlignmentDirectional.center, - child: Column( + ), + padding: DropZoneWidgetStyle.padding, + alignment: AlignmentDirectional.center, + child: Column( mainAxisSize: MainAxisSize.min, children: [ SvgPicture.asset(imagePaths.icDropZoneIcon), @@ -59,11 +56,20 @@ class AttachmentDropZoneWidget extends StatelessWidget { style: DropZoneWidgetStyle.labelTextStyle, ) ] - ), ), ), ), ); + + if (width == null && height == null) { + return SizedBox.expand(child: childWidget); + } + + return SizedBox( + width: width, + height: height, + child: childWidget, + ); }, onAcceptWithDetails: (details) => onAttachmentDropZoneListener?.call(details.data), ); diff --git a/lib/features/composer/presentation/widgets/web/local_file_drop_zone_widget.dart b/lib/features/composer/presentation/widgets/web/local_file_drop_zone_widget.dart index dc5111a19..90ff81180 100644 --- a/lib/features/composer/presentation/widgets/web/local_file_drop_zone_widget.dart +++ b/lib/features/composer/presentation/widgets/web/local_file_drop_zone_widget.dart @@ -28,44 +28,52 @@ class LocalFileDropZoneWidget extends StatelessWidget { @override Widget build(BuildContext context) { - return DropTarget( - onDragDone: onLocalFileDropZoneListener, - child: SizedBox( - width: width, - height: height, - child: Padding( - padding: margin, - child: DottedBorder( - borderType: BorderType.RRect, - radius: const Radius.circular(DropZoneWidgetStyle.radius), - color: DropZoneWidgetStyle.borderColor, - strokeWidth: DropZoneWidgetStyle.borderWidth, - dashPattern: DropZoneWidgetStyle.dashSize, - child: Container( - clipBehavior: Clip.antiAlias, - decoration: ShapeDecoration( - color: DropZoneWidgetStyle.backgroundColor, - shape: const RoundedRectangleBorder( - borderRadius: BorderRadius.all(Radius.circular(DropZoneWidgetStyle.radius)), - ), - ), - padding: DropZoneWidgetStyle.padding, - alignment: AlignmentDirectional.center, - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Flexible(child: SvgPicture.asset(imagePaths.icDropZoneIcon)), - const SizedBox(height: DropZoneWidgetStyle.space), - Text( - AppLocalizations.of(context).dropFileHereToAttachThem, - style: DropZoneWidgetStyle.labelTextStyle, - ) - ] + Widget childWidget = Padding( + padding: margin, + child: DottedBorder( + borderType: BorderType.RRect, + radius: const Radius.circular(DropZoneWidgetStyle.radius), + color: DropZoneWidgetStyle.borderColor, + strokeWidth: DropZoneWidgetStyle.borderWidth, + dashPattern: DropZoneWidgetStyle.dashSize, + child: Container( + clipBehavior: Clip.antiAlias, + decoration: ShapeDecoration( + color: DropZoneWidgetStyle.backgroundColor, + shape: const RoundedRectangleBorder( + borderRadius: BorderRadius.all( + Radius.circular(DropZoneWidgetStyle.radius), ), ), ), + padding: DropZoneWidgetStyle.padding, + alignment: AlignmentDirectional.center, + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Flexible(child: SvgPicture.asset(imagePaths.icDropZoneIcon)), + const SizedBox(height: DropZoneWidgetStyle.space), + Text( + AppLocalizations + .of(context) + .dropFileHereToAttachThem, + style: DropZoneWidgetStyle.labelTextStyle, + ), + ], + ), ), ), ); + + if (width == null && height == null) { + childWidget = SizedBox.expand(child: childWidget); + } else { + childWidget = SizedBox(width: width, height: height, child: childWidget); + } + + return DropTarget( + onDragDone: onLocalFileDropZoneListener, + child: childWidget, + ); } } diff --git a/lib/features/composer/presentation/widgets/web/web_editor_widget.dart b/lib/features/composer/presentation/widgets/web/web_editor_widget.dart index 43ecf7f72..d9cc03c6c 100644 --- a/lib/features/composer/presentation/widgets/web/web_editor_widget.dart +++ b/lib/features/composer/presentation/widgets/web/web_editor_widget.dart @@ -121,6 +121,7 @@ class _WebEditorState extends State { @override Widget build(BuildContext context) { + final maxHeight = widget.height ?? _defaultHtmlEditorHeight; return HtmlEditor( controller: _editorController, htmlEditorOptions: HtmlEditorOptions( @@ -153,16 +154,18 @@ class _WebEditorState extends State { WebScript( name: HtmlUtils.unregisterDropListener.name, script: HtmlUtils.unregisterDropListener.script, - ) + ), + WebScript( + name: HtmlUtils.recalculateEditorHeight(maxHeight: maxHeight).name, + script: HtmlUtils.recalculateEditorHeight(maxHeight: maxHeight).script, + ), ]) ), htmlToolbarOptions: const HtmlToolbarOptions( toolbarType: ToolbarType.hide, defaultToolbarButtons: [], ), - otherOptions: OtherOptions( - height: widget.height ?? _defaultHtmlEditorHeight, - ), + otherOptions: OtherOptions(height: maxHeight), callbacks: Callbacks( onBeforeCommand: widget.onChangeContent, onChangeContent: widget.onChangeContent,