Fix cannot scroll editor when disable code view in composer

This commit is contained in:
dab246
2025-09-19 13:41:55 +07:00
committed by Dat H. Pham
parent 69c9476379
commit 64f4096340
6 changed files with 400 additions and 381 deletions
+9
View File
@@ -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,
@@ -65,7 +65,7 @@ class ComposerView extends GetWidget<ComposerController> {
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<ComposerController> {
margin: ComposerStyle.mobileSubjectMargin,
),
Expanded(
child: LayoutBuilder(
builder: (_, constraintsEditor) {
return Stack(
child: Stack(
children: [
Column(
children: [
Expanded(
child: Obx(() => WebEditorView(
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<ComposerController> {
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,7 +275,9 @@ class ComposerView extends GetWidget<ComposerController> {
uploadError: uploadError
),
onInitialContentLoadComplete: controller.onInitialContentLoadCompleteWeb,
)),
));
}
),
),
Obx(() {
if (controller.uploadController.listUploadAttachments.isNotEmpty) {
@@ -322,8 +324,6 @@ class ComposerView extends GetWidget<ComposerController> {
child: PointerInterceptor(
child: AttachmentDropZoneWidget(
imagePaths: controller.imagePaths,
width: constraintsEditor.maxWidth,
height: constraintsEditor.maxHeight,
onAttachmentDropZoneListener: controller.onAttachmentDropZoneListener,
)
),
@@ -338,13 +338,11 @@ class ComposerView extends GetWidget<ComposerController> {
child: PointerInterceptor(
child: LocalFileDropZoneWidget(
imagePaths: controller.imagePaths,
width: constraintsEditor.maxWidth,
height: constraintsEditor.maxHeight,
onLocalFileDropZoneListener: (details) =>
controller.onLocalFileDropZoneListener(
context: context,
details: details,
maxWidth: constraintsEditor.maxWidth,
maxWidth: constraints.maxWidth,
),
)
),
@@ -354,8 +352,6 @@ class ComposerView extends GetWidget<ComposerController> {
}
}),
],
);
}
),
),
]
@@ -519,9 +515,7 @@ class ComposerView extends GetWidget<ComposerController> {
margin: ComposerStyle.desktopSubjectMargin,
),
Expanded(
child: LayoutBuilder(
builder: (_, constraintsEditor) {
return Stack(
child: Stack(
children: [
Column(
children: [
@@ -539,7 +533,9 @@ class ComposerView extends GetWidget<ComposerController> {
child: Column(
children: [
Expanded(
child: Obx(() {
child: LayoutBuilder(
builder: (_, constraintsEditor) {
return Obx(() {
return WebEditorView(
key: controller.responsiveContainerKey,
editorController: controller.richTextWebController!.editorController,
@@ -552,7 +548,7 @@ class ComposerView extends GetWidget<ComposerController> {
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,7 +566,9 @@ class ComposerView extends GetWidget<ComposerController> {
),
onInitialContentLoadComplete: controller.onInitialContentLoadCompleteWeb,
);
}),
});
}
),
),
Obx(() {
if (controller.uploadController.listUploadAttachments.isNotEmpty) {
@@ -642,9 +640,8 @@ class ComposerView extends GetWidget<ComposerController> {
child: PointerInterceptor(
child: AttachmentDropZoneWidget(
imagePaths: controller.imagePaths,
width: constraintsEditor.maxWidth,
height: constraintsEditor.maxHeight,
onAttachmentDropZoneListener: controller.onAttachmentDropZoneListener,
onAttachmentDropZoneListener:
controller.onAttachmentDropZoneListener,
)
),
);
@@ -658,13 +655,11 @@ class ComposerView extends GetWidget<ComposerController> {
child: PointerInterceptor(
child: LocalFileDropZoneWidget(
imagePaths: controller.imagePaths,
width: constraintsEditor.maxWidth,
height: constraintsEditor.maxHeight,
onLocalFileDropZoneListener: (details) =>
controller.onLocalFileDropZoneListener(
context: context,
details: details,
maxWidth: constraintsEditor.maxWidth,
maxWidth: constraints.maxWidth,
),
)
),
@@ -674,8 +669,6 @@ class ComposerView extends GetWidget<ComposerController> {
}
}),
],
);
}
),
),
]),
@@ -843,9 +836,7 @@ class ComposerView extends GetWidget<ComposerController> {
margin: ComposerStyle.tabletSubjectMargin,
),
Expanded(
child: LayoutBuilder(
builder: (_, constraintsBody) {
return Stack(
child: Stack(
children: [
Column(
children: [
@@ -863,7 +854,9 @@ class ComposerView extends GetWidget<ComposerController> {
child: Column(
children: [
Expanded(
child: Obx(() => WebEditorView(
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<ComposerController> {
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,7 +885,9 @@ class ComposerView extends GetWidget<ComposerController> {
uploadError: uploadError
),
onInitialContentLoadComplete: controller.onInitialContentLoadCompleteWeb,
)),
));
}
),
),
Obx(() {
if (controller.uploadController.listUploadAttachments.isNotEmpty) {
@@ -964,8 +959,6 @@ class ComposerView extends GetWidget<ComposerController> {
child: PointerInterceptor(
child: AttachmentDropZoneWidget(
imagePaths: controller.imagePaths,
width: constraintsBody.maxWidth,
height: constraintsBody.maxHeight,
onAttachmentDropZoneListener: controller.onAttachmentDropZoneListener,
)
),
@@ -980,13 +973,11 @@ class ComposerView extends GetWidget<ComposerController> {
child: PointerInterceptor(
child: LocalFileDropZoneWidget(
imagePaths: controller.imagePaths,
width: constraintsBody.maxWidth,
height: constraintsBody.maxHeight,
onLocalFileDropZoneListener: (details) =>
controller.onLocalFileDropZoneListener(
context: context,
details: details,
maxWidth: constraintsBody.maxWidth,
maxWidth: constraints.maxWidth,
),
)
),
@@ -996,8 +987,6 @@ class ComposerView extends GetWidget<ComposerController> {
}
}),
],
);
},
),
)
]),
@@ -246,6 +246,10 @@ class RichTextWebController extends GetxController {
if (codeViewEnabled) {
formattingOptionsState.value = FormattingOptionsState.disabled;
} else {
editorController.evaluateJavascriptWeb(
HtmlUtils.recalculateEditorHeight().name,
);
}
}
@@ -28,10 +28,7 @@ class AttachmentDropZoneWidget extends StatelessWidget {
Widget build(BuildContext context) {
return DragTarget<Attachment>(
builder: (context, _, __) {
return SizedBox(
width: width,
height: height,
child: Padding(
final childWidget = Padding(
padding: DropZoneWidgetStyle.margin,
child: DottedBorder(
borderType: BorderType.RRect,
@@ -62,7 +59,16 @@ class AttachmentDropZoneWidget extends StatelessWidget {
),
),
),
),
);
if (width == null && height == null) {
return SizedBox.expand(child: childWidget);
}
return SizedBox(
width: width,
height: height,
child: childWidget,
);
},
onAcceptWithDetails: (details) => onAttachmentDropZoneListener?.call(details.data),
@@ -28,12 +28,7 @@ class LocalFileDropZoneWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DropTarget(
onDragDone: onLocalFileDropZoneListener,
child: SizedBox(
width: width,
height: height,
child: Padding(
Widget childWidget = Padding(
padding: margin,
child: DottedBorder(
borderType: BorderType.RRect,
@@ -46,7 +41,9 @@ class LocalFileDropZoneWidget extends StatelessWidget {
decoration: ShapeDecoration(
color: DropZoneWidgetStyle.backgroundColor,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(DropZoneWidgetStyle.radius)),
borderRadius: BorderRadius.all(
Radius.circular(DropZoneWidgetStyle.radius),
),
),
),
padding: DropZoneWidgetStyle.padding,
@@ -57,15 +54,26 @@ class LocalFileDropZoneWidget extends StatelessWidget {
Flexible(child: SvgPicture.asset(imagePaths.icDropZoneIcon)),
const SizedBox(height: DropZoneWidgetStyle.space),
Text(
AppLocalizations.of(context).dropFileHereToAttachThem,
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,
);
}
}
@@ -121,6 +121,7 @@ class _WebEditorState extends State<WebEditorWidget> {
@override
Widget build(BuildContext context) {
final maxHeight = widget.height ?? _defaultHtmlEditorHeight;
return HtmlEditor(
controller: _editorController,
htmlEditorOptions: HtmlEditorOptions(
@@ -153,16 +154,18 @@ class _WebEditorState extends State<WebEditorWidget> {
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,