feat: support customizing editor edges

frontend/app_flowy/packages/appflowy_editor/example/lib/main.dart

@@ -46,13 +46,7 @@ class _MyHomePageState extends State<MyHomePage> {
   Widget build(BuildContext context) {
     return Scaffold(
       extendBodyBehindAppBar: true,
-      body: Center(
+      body: _buildEditor(context),
-        child: Container(
-          width: 780,
-          alignment: Alignment.topCenter,
-          child: _buildEditor(context),
-        ),
-      ),
       floatingActionButton: _buildExpandableFab(),
     );
   }
@@ -100,6 +94,7 @@ class _MyHomePageState extends State<MyHomePage> {
             width: MediaQuery.of(context).size.width,
             child: AppFlowyEditor(
               editorState: _editorState,
+              editorStyle: const EditorStyle.defaultStyle(),
             ),
           );
         } else {

frontend/app_flowy/packages/appflowy_editor/lib/appflowy_editor.dart

@@ -2,6 +2,7 @@
 library appflowy_editor;
 
 export 'src/infra/log.dart';
+export 'src/render/style/editor_style.dart';
 export 'src/document/node.dart';
 export 'src/document/path.dart';
 export 'src/document/position.dart';

frontend/app_flowy/packages/appflowy_editor/lib/src/editor_state.dart

@@ -1,6 +1,7 @@
 import 'dart:async';
 import 'package:appflowy_editor/src/infra/log.dart';
 import 'package:appflowy_editor/src/render/selection_menu/selection_menu_widget.dart';
+import 'package:appflowy_editor/src/render/style/editor_style.dart';
 import 'package:appflowy_editor/src/service/service.dart';
 import 'package:flutter/material.dart';
 
@@ -58,6 +59,9 @@ class EditorState {
   /// Stores the selection menu items.
   List<SelectionMenuItem> selectionMenuItems = [];
 
+  /// Stores the editor style.
+  EditorStyle editorStyle = const EditorStyle.defaultStyle();
+
   final UndoManager undoManager = UndoManager();
   Selection? _cursorSelection;
 

frontend/app_flowy/packages/appflowy_editor/lib/src/render/image/image_node_widget.dart

@@ -1,10 +1,8 @@
-import 'dart:math';
+import 'package:appflowy_editor/src/extensions/object_extensions.dart';
-
 import 'package:appflowy_editor/src/document/node.dart';
 import 'package:appflowy_editor/src/document/position.dart';
 import 'package:appflowy_editor/src/document/selection.dart';
 import 'package:appflowy_editor/src/infra/flowy_svg.dart';
-import 'package:appflowy_editor/src/render/rich_text/rich_text_style.dart';
 import 'package:appflowy_editor/src/render/selection/selectable.dart';
 import 'package:flutter/material.dart';
 
@@ -35,6 +33,8 @@ class ImageNodeWidget extends StatefulWidget {
 }
 
 class _ImageNodeWidgetState extends State<ImageNodeWidget> with Selectable {
+  final _imageKey = GlobalKey();
+
   double? _imageWidth;
   double _initial = 0;
   double _distance = 0;
@@ -50,8 +50,11 @@ class _ImageNodeWidgetState extends State<ImageNodeWidget> with Selectable {
     _imageWidth = widget.width;
     _imageStreamListener = ImageStreamListener(
       (image, _) {
-        _imageWidth =
+        _imageWidth = _imageKey.currentContext
-            min(defaultMaxTextNodeWidth, image.image.width.toDouble());
+            ?.findRenderObject()
+            ?.unwrapOrNull<RenderBox>()
+            ?.size
+            .width;
       },
     );
   }
@@ -65,9 +68,8 @@ class _ImageNodeWidgetState extends State<ImageNodeWidget> with Selectable {
   @override
   Widget build(BuildContext context) {
     // only support network image.
-
     return Container(
-      width: defaultMaxTextNodeWidth,
+      key: _imageKey,
       padding: const EdgeInsets.only(top: 8, bottom: 8),
       child: _buildNetworkImage(context),
     );
@@ -137,7 +139,7 @@ class _ImageNodeWidgetState extends State<ImageNodeWidget> with Selectable {
       loadingBuilder: (context, child, loadingProgress) =>
           loadingProgress == null ? child : _buildLoading(context),
       errorBuilder: (context, error, stackTrace) {
-        _imageWidth ??= defaultMaxTextNodeWidth;
+        // _imageWidth ??= defaultMaxTextNodeWidth;
         return _buildError(context);
       },
     );

frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/bulleted_list_text.dart

@@ -56,9 +56,7 @@ class _BulletedListTextNodeWidgetState extends State<BulletedListTextNodeWidget>
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return Padding(
-      constraints: BoxConstraints(maxWidth: defaultMaxTextNodeWidth),
-      child: Padding(
       padding: EdgeInsets.only(bottom: defaultLinePadding),
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
@@ -80,7 +78,6 @@ class _BulletedListTextNodeWidgetState extends State<BulletedListTextNodeWidget>
           )
         ],
       ),
-      ),
     );
   }
 }

frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/checkbox_text.dart

@@ -63,9 +63,7 @@ class _CheckboxNodeWidgetState extends State<CheckboxNodeWidget>
 
   Widget _buildWithSingle(BuildContext context) {
     final check = widget.textNode.attributes.check;
-    return SizedBox(
+    return Padding(
-      width: defaultMaxTextNodeWidth,
-      child: Padding(
       padding: EdgeInsets.only(bottom: defaultLinePadding),
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
@@ -98,7 +96,6 @@ class _CheckboxNodeWidgetState extends State<CheckboxNodeWidget>
           ),
         ],
       ),
-      ),
     );
   }
 

frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/heading_text.dart

@@ -63,8 +63,6 @@ class _HeadingTextNodeWidgetState extends State<HeadingTextNodeWidget>
         top: _topPadding,
         bottom: defaultLinePadding,
       ),
-      child: Container(
-        constraints: BoxConstraints(maxWidth: defaultMaxTextNodeWidth),
       child: FlowyRichText(
         key: _richTextKey,
         placeholderText: 'Heading',
@@ -73,7 +71,6 @@ class _HeadingTextNodeWidgetState extends State<HeadingTextNodeWidget>
         textNode: widget.textNode,
         editorState: widget.editorState,
       ),
-      ),
     );
   }
 

frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/number_list_text.dart

@@ -58,8 +58,6 @@ class _NumberListTextNodeWidgetState extends State<NumberListTextNodeWidget>
   Widget build(BuildContext context) {
     return Padding(
         padding: EdgeInsets.only(bottom: defaultLinePadding),
-        child: SizedBox(
-          width: defaultMaxTextNodeWidth,
         child: Row(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
@@ -79,7 +77,6 @@ class _NumberListTextNodeWidgetState extends State<NumberListTextNodeWidget>
               ),
             ),
           ],
-          ),
         ));
   }
 }

frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/quoted_text.dart

@@ -55,9 +55,7 @@ class _QuotedTextNodeWidgetState extends State<QuotedTextNodeWidget>
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
+    return Padding(
-      width: defaultMaxTextNodeWidth,
-      child: Padding(
       padding: EdgeInsets.only(bottom: defaultLinePadding),
       child: IntrinsicHeight(
         child: Row(
@@ -80,7 +78,6 @@ class _QuotedTextNodeWidgetState extends State<QuotedTextNodeWidget>
           ],
         ),
       ),
-      ),
     );
   }
 }

frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/rich_text.dart

@@ -52,16 +52,13 @@ class _RichTextNodeWidgetState extends State<RichTextNodeWidget>
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return Padding(
-      constraints: BoxConstraints(maxWidth: defaultMaxTextNodeWidth),
-      child: Padding(
       padding: EdgeInsets.only(bottom: defaultLinePadding),
       child: FlowyRichText(
         key: _richTextKey,
         textNode: widget.textNode,
         editorState: widget.editorState,
       ),
-      ),
     );
   }
 }

frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/rich_text_style.dart

@@ -61,7 +61,6 @@ class StyleKey {
 }
 
 // TODO: customize
-double defaultMaxTextNodeWidth = 780.0;
 double defaultLinePadding = 8.0;
 double baseFontSize = 16.0;
 String defaultHighlightColor = '0x6000BCF0';

frontend/app_flowy/packages/appflowy_editor/lib/src/render/style/editor_style.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+
+/// Editor style configuration
+class EditorStyle {
+  const EditorStyle({
+    required this.padding,
+  });
+
+  const EditorStyle.defaultStyle()
+      : padding = const EdgeInsets.fromLTRB(200.0, 0.0, 200.0, 0.0);
+
+  /// The margin of the document context from the editor.
+  final EdgeInsets padding;
+
+  EditorStyle copyWith({EdgeInsets? padding}) {
+    return EditorStyle(
+      padding: padding ?? this.padding,
+    );
+  }
+}

frontend/app_flowy/packages/appflowy_editor/lib/src/service/editor_service.dart

@@ -1,5 +1,6 @@
 import 'package:appflowy_editor/src/render/image/image_node_builder.dart';
 import 'package:appflowy_editor/src/render/selection_menu/selection_menu_widget.dart';
+import 'package:appflowy_editor/src/render/style/editor_style.dart';
 import 'package:appflowy_editor/src/service/internal_key_event_handlers/default_key_event_handlers.dart';
 import 'package:flutter/material.dart';
 
@@ -36,6 +37,7 @@ class AppFlowyEditor extends StatefulWidget {
     this.customBuilders = const {},
     this.keyEventHandlers = const [],
     this.selectionMenuItems = const [],
+    this.editorStyle = const EditorStyle.defaultStyle(),
   }) : super(key: key);
 
   final EditorState editorState;
@@ -48,6 +50,8 @@ class AppFlowyEditor extends StatefulWidget {
 
   final List<SelectionMenuItem> selectionMenuItems;
 
+  final EditorStyle editorStyle;
+
   @override
   State<AppFlowyEditor> createState() => _AppFlowyEditorState();
 }
@@ -60,6 +64,7 @@ class _AppFlowyEditorState extends State<AppFlowyEditor> {
     super.initState();
 
     editorState.selectionMenuItems = widget.selectionMenuItems;
+    editorState.editorStyle = widget.editorStyle;
     editorState.service.renderPluginService = _createRenderPlugin();
   }
 
@@ -68,6 +73,8 @@ class _AppFlowyEditorState extends State<AppFlowyEditor> {
     super.didUpdateWidget(oldWidget);
 
     if (editorState.service != oldWidget.editorState.service) {
+      editorState.selectionMenuItems = widget.selectionMenuItems;
+      editorState.editorStyle = widget.editorStyle;
       editorState.service.renderPluginService = _createRenderPlugin();
     }
   }
@@ -76,6 +83,8 @@ class _AppFlowyEditorState extends State<AppFlowyEditor> {
   Widget build(BuildContext context) {
     return AppFlowyScroll(
       key: editorState.service.scrollServiceKey,
+      child: Padding(
+        padding: widget.editorStyle.padding,
         child: AppFlowySelection(
           key: editorState.service.selectionServiceKey,
           editorState: editorState,
@@ -92,7 +101,8 @@ class _AppFlowyEditorState extends State<AppFlowyEditor> {
               child: FlowyToolbar(
                 key: editorState.service.toolbarServiceKey,
                 editorState: editorState,
-              child: editorState.service.renderPluginService.buildPluginWidget(
+                child:
+                    editorState.service.renderPluginService.buildPluginWidget(
                   NodeWidgetContext(
                     context: context,
                     node: editorState.document.root,
@@ -103,6 +113,7 @@ class _AppFlowyEditorState extends State<AppFlowyEditor> {
             ),
           ),
         ),
+      ),
     );
   }
 

frontend/app_flowy/packages/appflowy_editor/test/render/image/image_node_builder_test.dart

@@ -49,9 +49,10 @@ void main() async {
         final editorRect = tester.getRect(editorFinder);
 
         final leftImageRect = tester.getRect(imageFinder.at(0));
-        expect(leftImageRect.left, editorRect.left);
+        expect(leftImageRect.left, editor.editorState.editorStyle.padding.left);
         final rightImageRect = tester.getRect(imageFinder.at(2));
-        expect(rightImageRect.right, editorRect.right);
+        expect(rightImageRect.right,
+            editorRect.right - editor.editorState.editorStyle.padding.right);
         final centerImageRect = tester.getRect(imageFinder.at(1));
         expect(centerImageRect.left,
             (leftImageRect.left + rightImageRect.left) / 2.0);
@@ -73,8 +74,8 @@ void main() async {
         leftImage.onAlign(Alignment.centerRight);
         await tester.pump(const Duration(milliseconds: 100));
         expect(
-          tester.getRect(imageFinder.at(0)).left,
+          tester.getRect(imageFinder.at(0)).right,
-          rightImageRect.left,
+          rightImageRect.right,
         );
       });
     });