eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

TF-1885 Support RTL mode for HTML composer

Browse Source 
(cherry picked from commit 8a4569ef3a749e0f3abc0a385aa915d749b16a9a)
This commit is contained in:
dab246
2023-06-13 17:26:50 +07:00
committed by Dat H. Pham
parent 2fb2ab18e8
commit 0cc2a2f0cc
9 changed files with 156 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/lib/presentation/utils/html_transformer/html_template.dart
+1 -27
View File
@@ -61,30 +61,4 @@ String generateHtml(String content, {
</body>
</html>
''';
}
const bodyCssStyleForEditor = '''
<style>
blockquote {
margin-left: 8px;
margin-right: 8px;
padding-left: 12px;
padding-right: 12px;
border-left: 5px solid #eee;
}
pre {
display: block;
padding: 10px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.5;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
overflow: auto;
}
</style>
''';
}
core/lib/presentation/utils/html_transformer/html_utils.dart
+45
View File
@@ -1,5 +1,7 @@
import 'package:core/presentation/utils/html_transformer/html_event_action.dart';
import 'package:core/utils/platform_info.dart';
import 'package:flutter/material.dart';
class HtmlUtils {
@@ -65,4 +67,47 @@ class HtmlUtils {
yDown = null;
}
''';
static String customCssStyleHtmlEditor({TextDirection direction = TextDirection.ltr}) {
if (PlatformInfo.isWeb) {
return '''
<style>
.note-editable {
direction: ${direction.name};
}
blockquote {
margin-left: 8px;
margin-right: 8px;
padding-left: 12px;
padding-right: 12px;
border-left: 5px solid #eee;
}
pre {
display: block;
padding: 10px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.5;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
overflow: auto;
}
</style>
''';
} else if (PlatformInfo.isMobile) {
return '''
#editor {
direction: ${direction.name};
}
''';
} else {
return '';
}
}
}
lib/features/composer/presentation/composer_view.dart
+2
View File
@@ -3,6 +3,7 @@ import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/extensions/html_extension.dart';
import 'package:core/presentation/extensions/string_extension.dart';
import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/utils/html_transformer/html_utils.dart';
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/utils/style_utils.dart';
import 'package:core/presentation/views/button/icon_button_web.dart';
@@ -690,6 +691,7 @@ class ComposerView extends GetWidget<ComposerController>
minHeight: 550,
addDefaultSelectionMenuItems: false,
initialContent: initialContent ?? '',
customStyleCss: HtmlUtils.customCssStyleHtmlEditor(direction: AppUtils.getCurrentDirection(context)),
onCreated: (editorApi) => controller.initRichTextForMobile(context, editorApi, initialContent)
),
),
lib/features/composer/presentation/composer_view_web.dart
+13 -35
View File
@@ -4,7 +4,6 @@ import 'package:core/presentation/extensions/html_extension.dart';
import 'package:core/presentation/extensions/string_extension.dart';
import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/utils/app_toast.dart';
import 'package:core/presentation/utils/html_transformer/html_template.dart';
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/utils/style_utils.dart';
import 'package:core/presentation/views/button/icon_button_web.dart';
@@ -18,7 +17,6 @@ import 'package:filesize/filesize.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:html_editor_enhanced/html_editor.dart';
import 'package:jmap_dart_client/jmap/identities/identity.dart';
import 'package:model/email/email_action_type.dart';
import 'package:model/email/prefix_email_address.dart';
@@ -32,6 +30,7 @@ import 'package:tmail_ui_user/features/composer/presentation/mixin/rich_text_but
import 'package:tmail_ui_user/features/composer/presentation/model/screen_display_mode.dart';
import 'package:tmail_ui_user/features/composer/presentation/widgets/attachment_file_composer_builder.dart';
import 'package:tmail_ui_user/features/composer/presentation/widgets/email_address_input_builder.dart';
import 'package:tmail_ui_user/features/composer/presentation/widgets/email_editor_widget.dart';
import 'package:tmail_ui_user/features/composer/presentation/widgets/toolbar_rich_text_builder.dart';
import 'package:tmail_ui_user/features/upload/presentation/extensions/list_upload_file_state_extension.dart';
import 'package:tmail_ui_user/features/upload/presentation/model/upload_file_state.dart';
@@ -80,7 +79,10 @@ class ComposerView extends GetWidget<ComposerController>
_buildAttachmentsWidget(context),
ToolbarRichTextWebBuilder(richTextWebController: controller.richTextWebController),
buildInlineLoadingView(controller),
_buildEditorForm(context)
Expanded(child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: _buildEditorForm(context)
))
]
)),
]
@@ -442,7 +444,10 @@ class ComposerView extends GetWidget<ComposerController>
_buildAttachmentsWidget(context),
ToolbarRichTextWebBuilder(richTextWebController: controller.richTextWebController),
buildInlineLoadingView(controller),
_buildEditorForm(context)
Expanded(child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: _buildEditorForm(context)
))
]
))),
const Divider(color: AppColor.colorDividerComposer, height: 1),
@@ -815,37 +820,10 @@ class ComposerView extends GetWidget<ComposerController>
}
Widget _buildHtmlEditor(BuildContext context, String initContent) {
log('ComposerView::_buildHtmlEditor(): initContent: $initContent');
return Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: HtmlEditor(
key: const Key('composer_editor_web'),
controller: controller.richTextWebController.editorController,
htmlEditorOptions: const HtmlEditorOptions(
shouldEnsureVisible: true,
hint: '',
darkMode: false,
customBodyCssStyle: bodyCssStyleForEditor
),
blockQuotedContent: initContent,
htmlToolbarOptions: const HtmlToolbarOptions(
toolbarType: ToolbarType.hide,
defaultToolbarButtons: []
),
otherOptions: const OtherOptions(height: 550),
callbacks: Callbacks(
onBeforeCommand: controller.onChangeTextEditorWeb,
onChangeContent: controller.onChangeTextEditorWeb,
onInit: () => controller.handleInitHtmlEditorWeb(initContent),
onFocus: controller.handleOnFocusHtmlEditorWeb,
onBlur: controller.handleOnUnFocusHtmlEditorWeb,
onMouseDown: () => controller.handleOnMouseDownHtmlEditorWeb(context),
onChangeSelection: controller.richTextWebController.onEditorSettingsChange,
onChangeCodeview: controller.onChangeTextEditorWeb
),
)
)
return EmailEditorWidget(
controller: controller,
content: initContent,
direction: AppUtils.getCurrentDirection(context),
);
}
lib/features/composer/presentation/widgets/email_editor_widget.dart
+75
View File
@@ -0,0 +1,75 @@
import 'package:core/presentation/utils/html_transformer/html_utils.dart';
import 'package:core/utils/app_logger.dart';
import 'package:flutter/material.dart';
import 'package:html_editor_enhanced/html_editor.dart';
import 'package:tmail_ui_user/features/composer/presentation/composer_controller.dart';
class EmailEditorWidget extends StatefulWidget {
final ComposerController controller;
final String content;
final TextDirection direction;
const EmailEditorWidget({
super.key,
required this.controller,
required this.content,
required this.direction,
});
@override
State<EmailEditorWidget> createState() => _EmailEditorState();
}
class _EmailEditorState extends State<EmailEditorWidget> {
late ComposerController _controller;
late HtmlEditorController _editorController;
@override
void initState() {
_controller = widget.controller;
_editorController = _controller.richTextWebController.editorController;
super.initState();
}
@override
void didUpdateWidget(covariant EmailEditorWidget oldWidget) {
log('_EmailEditorState::didUpdateWidget():Old: ${oldWidget.direction} | current: ${widget.direction}');
if (oldWidget.direction != widget.direction) {
_editorController.updateBodyDirection(widget.direction.name);
}
super.didUpdateWidget(oldWidget);
}
@override
Widget build(BuildContext context) {
return HtmlEditor(
key: const Key('composer_editor_web'),
controller: _editorController,
htmlEditorOptions: HtmlEditorOptions(
shouldEnsureVisible: true,
hint: '',
darkMode: false,
customBodyCssStyle: HtmlUtils.customCssStyleHtmlEditor(direction: widget.direction),
),
blockQuotedContent: widget.content,
htmlToolbarOptions: const HtmlToolbarOptions(
toolbarType: ToolbarType.hide,
defaultToolbarButtons: []
),
otherOptions: const OtherOptions(height: 550),
callbacks: Callbacks(
onBeforeCommand: _controller.onChangeTextEditorWeb,
onChangeContent: _controller.onChangeTextEditorWeb,
onInit: () => _controller.handleInitHtmlEditorWeb(widget.content),
onFocus: _controller.handleOnFocusHtmlEditorWeb,
onBlur: _controller.handleOnUnFocusHtmlEditorWeb,
onMouseDown: () => _controller.handleOnMouseDownHtmlEditorWeb(context),
onChangeSelection: _controller.richTextWebController.onEditorSettingsChange,
onChangeCodeview: _controller.onChangeTextEditorWeb
),
);
}
}
lib/features/identity_creator/presentation/identity_creator_view.dart
+5 -3
View File
@@ -3,7 +3,7 @@ import 'dart:math' as math;
import 'package:core/presentation/extensions/capitalize_extension.dart';
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/utils/html_transformer/html_template.dart';
import 'package:core/presentation/utils/html_transformer/html_utils.dart';
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/utils/style_utils.dart';
import 'package:core/presentation/views/button/icon_button_web.dart';
@@ -365,10 +365,11 @@ class IdentityCreatorView extends GetWidget<IdentityCreatorController> {
child: html_editor_browser.HtmlEditor(
key: const Key('identity_create_editor_web'),
controller: controller.richTextWebController.editorController,
htmlEditorOptions: const html_editor_browser.HtmlEditorOptions(
htmlEditorOptions: html_editor_browser.HtmlEditorOptions(
hint: '',
darkMode: false,
customBodyCssStyle: bodyCssStyleForEditor),
customBodyCssStyle: HtmlUtils.customCssStyleHtmlEditor(direction: AppUtils.getCurrentDirection(context)),
),
blockQuotedContent: initContent,
htmlToolbarOptions: const html_editor_browser.HtmlToolbarOptions(
toolbarType: html_editor_browser.ToolbarType.hide,
@@ -409,6 +410,7 @@ class IdentityCreatorView extends GetWidget<IdentityCreatorController> {
minHeight: controller.htmlEditorMinHeight,
addDefaultSelectionMenuItems: false,
initialContent: initialContent ?? '',
customStyleCss: HtmlUtils.customCssStyleHtmlEditor(direction: AppUtils.getCurrentDirection(context)),
onCreated: (editorApi) => controller.initRichTextForMobile(context, editorApi),
),
);
lib/features/manage_account/presentation/vacation/vacation_view.dart
+8 -4
View File
@@ -1,5 +1,6 @@
import 'package:core/core.dart';
import 'package:core/presentation/utils/html_transformer/html_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
@@ -19,6 +20,7 @@ import 'package:tmail_ui_user/features/manage_account/presentation/vacation/util
import 'package:tmail_ui_user/features/manage_account/presentation/vacation/vacation_controller.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
import 'package:html_editor_enhanced/html_editor.dart' as html_editor_browser;
import 'package:tmail_ui_user/main/utils/app_utils.dart';
class VacationView extends GetWidget<VacationController> with RichTextButtonMixin {
@@ -430,10 +432,11 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
return html_editor_browser.HtmlEditor(
key: const Key('vacation_message_html_text_editor_web'),
controller: controller.richTextControllerForWeb.editorController,
htmlEditorOptions: const html_editor_browser.HtmlEditorOptions(
hint: '',
darkMode: false,
customBodyCssStyle: bodyCssStyleForEditor),
htmlEditorOptions: html_editor_browser.HtmlEditorOptions(
hint: '',
darkMode: false,
customBodyCssStyle: HtmlUtils.customCssStyleHtmlEditor(direction: AppUtils.getCurrentDirection(context))
),
blockQuotedContent: controller.vacationMessageHtmlText ?? '',
htmlToolbarOptions: const html_editor_browser.HtmlToolbarOptions(
toolbarType: html_editor_browser.ToolbarType.hide,
@@ -459,6 +462,7 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
minHeight: controller.htmlEditorMinHeight,
addDefaultSelectionMenuItems: false,
initialContent: controller.vacationMessageHtmlText ?? '',
customStyleCss: HtmlUtils.customCssStyleHtmlEditor(direction: AppUtils.getCurrentDirection(context)),
onCreated: (htmlApi) {
controller.richTextControllerForMobile.onCreateHTMLEditor(
htmlApi,
pubspec.lock
+2 -2
View File
@@ -865,8 +865,8 @@ packages:
dependency: "direct main"
description:
path: "."
ref: email_supported
resolved-ref: e056608ac04b471ed2da801794cbae7ee50cf643
ref: support_rtl
resolved-ref: "4f4896ce1dc23011ad0b0c8d94a680c3fed6b750"
url: "https://github.com/linagora/html-editor-enhanced.git"
source: git
version: "2.5.1"
pubspec.yaml
+5
View File
@@ -223,6 +223,11 @@ dependency_overrides:
flutter_keyboard_visibility: 5.4.1
html_editor_enhanced:
git:
url: https://github.com/linagora/html-editor-enhanced.git
ref: support_rtl
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec