add insert inline image function

This commit is contained in:
ManhNTX
2022-07-26 13:56:19 +07:00
committed by Dat H. Pham
parent 0db2787082
commit b27d281876
3 changed files with 147 additions and 74 deletions
@@ -139,7 +139,7 @@ class ComposerController extends BaseController {
log('ComposerController::_getEmailBodyText():WEB: newContentHtml: $newContentHtml'); log('ComposerController::_getEmailBodyText():WEB: newContentHtml: $newContentHtml');
return newContentHtml; return newContentHtml;
} else { } else {
final contentHtml = await htmlEditorApi?.getText() ?? ''; final contentHtml = (await htmlEditorApi?.getText() ?? '').replaceAll('"', '"');
log('ComposerController::_getEmailBodyText():MOBILE: $contentHtml'); log('ComposerController::_getEmailBodyText():MOBILE: $contentHtml');
final newContentHtml = contentHtml.removeEditorStartTag(); final newContentHtml = contentHtml.removeEditorStartTag();
if (changedEmail) { if (changedEmail) {
@@ -247,13 +247,23 @@ class ComposerController extends BaseController {
selectIdentity(listIdentities.first); selectIdentity(listIdentities.first);
} }
} else if (success is DownloadImageAsBase64Success) { } else if (success is DownloadImageAsBase64Success) {
richTextWebController.insertImage( if(kIsWeb) {
InlineImage( richTextWebController.insertImage(
ImageSource.local, InlineImage(
fileInfo: success.fileInfo, ImageSource.local,
cid: success.cid, fileInfo: success.fileInfo,
base64: success.imageAsBase64), cid: success.cid,
maxWithEditor: maxWithEditor); base64: success.imageAsBase64),
maxWithEditor: maxWithEditor);
} else {
richTextMobileTabletController.insertImage(
InlineImage(
ImageSource.local,
fileInfo: success.fileInfo,
cid: success.cid,
base64: success.imageAsBase64),
maxWithEditor: maxWithEditor);
}
maxWithEditor = null; maxWithEditor = null;
} }
}); });
@@ -1111,16 +1121,41 @@ class ComposerController extends BaseController {
} }
void insertImage(BuildContext context, {double? maxWithEditor}) async { void insertImage(BuildContext context, {double? maxWithEditor}) async {
await InsertImageDialogBuilder( if(kIsWeb) {
context, await InsertImageDialogBuilder(
insertActionCallback: (inlineImage) { context,
log('ComposerController::insertImage(): ${inlineImage.source}|$maxWithEditor'); insertActionCallback: (inlineImage) {
if (BuildUtils.isWeb) { log('ComposerController::insertImage(): ${inlineImage.source}|$maxWithEditor');
this.maxWithEditor = maxWithEditor; if (BuildUtils.isWeb) {
_insertImageOnWeb(inlineImage); this.maxWithEditor = maxWithEditor;
_insertImageOnWeb(inlineImage);
}
} }
} ).show();
).show(); } else {
final inlineImage = await _selectFromFile();
if(inlineImage != null) {
this.maxWithEditor = maxWithEditor;
_insertImageOnMobileAndTablet(inlineImage);
}
}
}
Future<InlineImage?> _selectFromFile() async {
final filePickerResult = await FilePicker.platform.pickFiles(
type: FileType.image,
withReadStream: true);
final platformFile = filePickerResult?.files.single;
if (platformFile != null) {
final fileSelected = FileInfo(
platformFile.name,
BuildUtils.isWeb ? '' : platformFile.path ?? '',
platformFile.size,
readStream: platformFile.readStream);
return InlineImage(ImageSource.local, fileInfo: fileSelected);
}
return null;
} }
void _insertImageOnWeb(InlineImage inlineImage) { void _insertImageOnWeb(InlineImage inlineImage) {
@@ -1131,6 +1166,14 @@ class ComposerController extends BaseController {
} }
} }
void _insertImageOnMobileAndTablet(InlineImage inlineImage) {
if (inlineImage.source == ImageSource.local) {
_uploadInlineAttachmentsAction(inlineImage.fileInfo!);
} else {
richTextMobileTabletController.insertImage(inlineImage);
}
}
void _uploadInlineAttachmentsAction(FileInfo pickedFile) async { void _uploadInlineAttachmentsAction(FileInfo pickedFile) async {
if (uploadController.hasEnoughMaxAttachmentSize(listFiles: [pickedFile])) { if (uploadController.hasEnoughMaxAttachmentSize(listFiles: [pickedFile])) {
final session = mailboxDashBoardController.sessionCurrent; final session = mailboxDashBoardController.sessionCurrent;
@@ -5,6 +5,7 @@ import 'package:file_picker/file_picker.dart';
import 'package:filesize/filesize.dart'; import 'package:filesize/filesize.dart';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:jmap_dart_client/jmap/identities/identity.dart'; import 'package:jmap_dart_client/jmap/identities/identity.dart';
@@ -372,8 +373,8 @@ class ComposerView extends GetWidget<ComposerController> with AppLoaderMixin, Ri
); );
} }
Widget _buildListButton(BuildContext context) { Widget _buildListButton(BuildContext context, BoxConstraints constraints) {
return Transform( return Transform(
transform: Matrix4.translationValues(-10.0, 0.0, 0.0), transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric(vertical: 5), padding: const EdgeInsets.symmetric(vertical: 5),
@@ -382,6 +383,16 @@ class ComposerView extends GetWidget<ComposerController> with AppLoaderMixin, Ri
icon: SvgPicture.asset(imagePaths.icAttachmentsComposer, color: AppColor.colorTextButton, fit: BoxFit.fill), icon: SvgPicture.asset(imagePaths.icAttachmentsComposer, color: AppColor.colorTextButton, fit: BoxFit.fill),
tooltip: AppLocalizations.of(context).attach_file, tooltip: AppLocalizations.of(context).attach_file,
onTap: () => controller.openPickAttachmentMenu(context, _pickAttachmentsActionTiles(context))), onTap: () => controller.openPickAttachmentMenu(context, _pickAttachmentsActionTiles(context))),
buildIconWeb(
minSize: 40,
iconPadding: EdgeInsets.zero,
icon: SvgPicture.asset(imagePaths.icInsertImage,
color: AppColor.colorTextButton,
fit: BoxFit.fill),
tooltip: AppLocalizations.of(context).insertImage,
onTap: () => controller.insertImage(
context,
maxWithEditor: constraints.maxWidth - 120))
]) ])
) )
); );
@@ -390,67 +401,72 @@ class ComposerView extends GetWidget<ComposerController> with AppLoaderMixin, Ri
Widget _buildBodyMobile(BuildContext context) { Widget _buildBodyMobile(BuildContext context) {
return SingleChildScrollView( return SingleChildScrollView(
physics: const ClampingScrollPhysics(), physics: const ClampingScrollPhysics(),
child: Column(children: [ child: LayoutBuilder(
Obx(() => controller.identitySelected.value != null builder: (context, constraints) => Column(children: [
? _buildFromEmailAddress(context) Obx(() => controller.identitySelected.value != null
: const SizedBox.shrink()), ? _buildFromEmailAddress(context)
Obx(() => controller.identitySelected.value != null : const SizedBox.shrink()),
? const Divider(color: AppColor.colorDividerComposer, height: 1) Obx(() => controller.identitySelected.value != null
: const SizedBox.shrink()), ? const Divider(color: AppColor.colorDividerComposer, height: 1)
_buildEmailAddress(context), : const SizedBox.shrink()),
const Divider(color: AppColor.colorDividerComposer, height: 1), _buildEmailAddress(context),
Padding(padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), child: _buildSubjectEmail(context)), const Divider(color: AppColor.colorDividerComposer, height: 1),
const Divider(color: AppColor.colorDividerComposer, height: 1), Padding(padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), child: _buildSubjectEmail(context)),
Padding(padding: const EdgeInsets.symmetric(horizontal: 16), child: _buildListButton(context)), const Divider(color: AppColor.colorDividerComposer, height: 1),
const Divider(color: AppColor.colorDividerComposer, height: 1), Padding(padding: const EdgeInsets.symmetric(horizontal: 16), child: _buildListButton(context, constraints)),
_buildAttachmentsWidget(context), const Divider(color: AppColor.colorDividerComposer, height: 1),
_buildComposerEditor(context), _buildAttachmentsWidget(context),
]) _buildInlineLoadingView(),
_buildComposerEditor(context),
]),
)
); );
} }
Widget _buildBodyTablet(BuildContext context) { Widget _buildBodyTablet(BuildContext context) {
return SingleChildScrollView( return SingleChildScrollView(
physics: const ClampingScrollPhysics(), physics: const ClampingScrollPhysics(),
child: Column(children: [ child: LayoutBuilder(
Padding( builder: (context, constraints) => Column(children: [
padding: const EdgeInsets.only(left: 16), Padding(
child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [ padding: const EdgeInsets.only(left: 16),
Padding(padding: const EdgeInsets.only(top: 20), child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
child: (AvatarBuilder() Padding(padding: const EdgeInsets.only(top: 20),
..text(controller.mailboxDashBoardController.userProfile.value?.getAvatarText() ?? '') child: (AvatarBuilder()
..size(56) ..text(controller.mailboxDashBoardController.userProfile.value?.getAvatarText() ?? '')
..addTextStyle(const TextStyle(fontWeight: FontWeight.w600, fontSize: 28, color: Colors.white)) ..size(56)
..backgroundColor(AppColor.colorAvatar)) ..addTextStyle(const TextStyle(fontWeight: FontWeight.w600, fontSize: 28, color: Colors.white))
.build()), ..backgroundColor(AppColor.colorAvatar))
Expanded(child: Padding( .build()),
padding: const EdgeInsets.only(left: 16), Expanded(child: Padding(
child: Column(children: [ padding: const EdgeInsets.only(left: 16),
Obx(() => controller.identitySelected.value != null child: Column(children: [
? _buildFromEmailAddress(context) Obx(() => controller.identitySelected.value != null
: const SizedBox.shrink()), ? _buildFromEmailAddress(context)
Obx(() => controller.identitySelected.value != null : const SizedBox.shrink()),
? const Divider(color: AppColor.colorDividerComposer, height: 1) Obx(() => controller.identitySelected.value != null
: const SizedBox.shrink()), ? const Divider(color: AppColor.colorDividerComposer, height: 1)
_buildEmailAddress(context), : const SizedBox.shrink()),
const Divider(color: AppColor.colorDividerComposer, height: 1), _buildEmailAddress(context),
Padding(padding: const EdgeInsets.only(right: 16), child: _buildSubjectEmail(context)), const Divider(color: AppColor.colorDividerComposer, height: 1),
const Divider(color: AppColor.colorDividerComposer, height: 1), Padding(padding: const EdgeInsets.only(right: 16), child: _buildSubjectEmail(context)),
_buildListButton(context), const Divider(color: AppColor.colorDividerComposer, height: 1),
]), _buildListButton(context, constraints),
)) ]),
])), ))
const Divider(color: AppColor.colorDividerComposer, height: 1), ])),
Padding( const Divider(color: AppColor.colorDividerComposer, height: 1),
padding: const EdgeInsets.only(left: 60, right: 25), Padding(
child: Column(children: [ padding: const EdgeInsets.only(left: 60, right: 25),
_buildToolbarRichTextWidget(context), child: Column(children: [
_buildAttachmentsWidget(context), _buildToolbarRichTextWidget(context),
_buildInlineLoadingView(), _buildAttachmentsWidget(context),
_buildComposerEditor(context), _buildInlineLoadingView(),
]) _buildComposerEditor(context),
) ])
]) )
]),
)
); );
} }
@@ -1,8 +1,11 @@
import 'package:core/core.dart';
import 'package:enough_html_editor/enough_html_editor.dart'; import 'package:enough_html_editor/enough_html_editor.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:tmail_ui_user/features/composer/presentation/controller/base_rich_text_controller.dart'; import 'package:tmail_ui_user/features/composer/presentation/controller/base_rich_text_controller.dart';
import 'package:tmail_ui_user/features/composer/presentation/model/dropdown_menu_font_status.dart'; import 'package:tmail_ui_user/features/composer/presentation/model/dropdown_menu_font_status.dart';
import 'package:tmail_ui_user/features/composer/presentation/model/image_source.dart';
import 'package:tmail_ui_user/features/composer/presentation/model/inline_image.dart';
import 'package:tmail_ui_user/features/composer/presentation/model/rich_text_style_type.dart'; import 'package:tmail_ui_user/features/composer/presentation/model/rich_text_style_type.dart';
import 'package:tmail_ui_user/main/routes/route_navigation.dart'; import 'package:tmail_ui_user/main/routes/route_navigation.dart';
@@ -109,4 +112,15 @@ class RichTextMobileTabletController extends BaseRichTextController {
void closeDropdownMenuFont() { void closeDropdownMenuFont() {
popBack(); popBack();
} }
void insertImage(InlineImage image, {double? maxWithEditor}) async {
log('RichTextMobileTabletController::insertImage(): $image | maxWithEditor: $maxWithEditor');
if (image.source == ImageSource.network) {
htmlEditorApi?.insertImageLink(image.link!);
} else {
final htmlContent = await image.generateImgTagHtml(maxWithEditor: maxWithEditor);
log('RichTextMobileTabletController::insertImage(): $htmlContent');
htmlEditorApi?.insertHtml(htmlContent);
}
}
} }