feat: make the text node widget align center.

frontend/app_flowy/packages/flowy_editor/lib/render/editor/editor_entry.dart

@@ -33,7 +33,7 @@ class EditorNodeWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
+      crossAxisAlignment: CrossAxisAlignment.center,
       children: node.children
           .map(
             (child) =>

frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/bulleted_list_text.dart

@@ -3,6 +3,7 @@ import 'package:flowy_editor/editor_state.dart';
 import 'package:flowy_editor/infra/flowy_svg.dart';
 import 'package:flowy_editor/render/rich_text/default_selectable.dart';
 import 'package:flowy_editor/render/rich_text/flowy_rich_text.dart';
+import 'package:flowy_editor/render/rich_text/rich_text_style.dart';
 import 'package:flowy_editor/render/selection/selectable.dart';
 import 'package:flowy_editor/service/render_plugin_service.dart';
 import 'package:flutter/material.dart';
@@ -56,21 +57,22 @@ class _BulletedListTextNodeWidgetState extends State<BulletedListTextNodeWidget>
 
   @override
   Widget build(BuildContext context) {
-    return Row(
-      children: [
-        FlowySvg(
-          size: Size.square(leftPadding),
-          name: 'point',
-        ),
-        Expanded(
-          child: FlowyRichText(
+    return SizedBox(
+      width: maxTextNodeWidth,
+      child: Row(
+        children: [
+          FlowySvg(
+            size: Size.square(leftPadding),
+            name: 'point',
+          ),
+          FlowyRichText(
             key: _richTextKey,
             placeholderText: 'List',
             textNode: widget.textNode,
             editorState: widget.editorState,
           ),
-        ),
-      ],
+        ],
+      ),
     );
   }
 }

frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/checkbox_text.dart

@@ -65,33 +65,34 @@ class _CheckboxNodeWidgetState extends State<CheckboxNodeWidget>
 
   Widget _buildWithSingle(BuildContext context) {
     final check = widget.textNode.attributes.check;
-    return Row(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        GestureDetector(
-          child: FlowySvg(
-            size: Size.square(leftPadding),
-            name: check ? 'check' : 'uncheck',
+    return SizedBox(
+      width: maxTextNodeWidth,
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          GestureDetector(
+            child: FlowySvg(
+              size: Size.square(leftPadding),
+              name: check ? 'check' : 'uncheck',
+            ),
+            onTap: () {
+              debugPrint('[Checkbox] onTap...');
+              TransactionBuilder(widget.editorState)
+                ..updateNode(widget.textNode, {
+                  StyleKey.checkbox: !check,
+                })
+                ..commit();
+            },
           ),
-          onTap: () {
-            debugPrint('[Checkbox] onTap...');
-            TransactionBuilder(widget.editorState)
-              ..updateNode(widget.textNode, {
-                StyleKey.checkbox: !check,
-              })
-              ..commit();
-          },
-        ),
-        Expanded(
-          child: FlowyRichText(
+          FlowyRichText(
             key: _richTextKey,
             placeholderText: 'To-do',
             textNode: widget.textNode,
             textSpanDecorator: _textSpanDecorator,
             editorState: widget.editorState,
           ),
-        ),
-      ],
+        ],
+      ),
     );
   }
 

frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/flowy_rich_text.dart

@@ -11,22 +11,6 @@ import 'package:flowy_editor/render/rich_text/rich_text_style.dart';
 import 'package:flowy_editor/render/selection/selectable.dart';
 import 'package:flowy_editor/service/render_plugin_service.dart';
 
-class RichTextNodeWidgetBuilder extends NodeWidgetBuilder<TextNode> {
-  @override
-  Widget build(NodeWidgetContext<TextNode> context) {
-    return FlowyRichText(
-      key: context.node.key,
-      textNode: context.node,
-      editorState: context.editorState,
-    );
-  }
-
-  @override
-  NodeValidator<Node> get nodeValidator => ((node) {
-        return true;
-      });
-}
-
 typedef FlowyTextSpanDecorator = TextSpan Function(TextSpan textSpan);
 
 class FlowyRichText extends StatefulWidget {

frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/heading_text.dart

@@ -56,25 +56,22 @@ class _HeadingTextNodeWidgetState extends State<HeadingTextNodeWidget>
 
   @override
   Widget build(BuildContext context) {
-    return Column(
-      children: [
-        Padding(
-          padding: EdgeInsets.only(
-            top: topPadding,
-            bottom: bottomPadding,
-          ),
-          child: Expanded(
-            child: FlowyRichText(
-              key: _richTextKey,
-              placeholderText: 'Heading',
-              placeholderTextSpanDecorator: _placeholderTextSpanDecorator,
-              textSpanDecorator: _textSpanDecorator,
-              textNode: widget.textNode,
-              editorState: widget.editorState,
-            ),
-          ),
-        )
-      ],
+    return SizedBox(
+      width: maxTextNodeWidth,
+      child: Padding(
+        padding: EdgeInsets.only(
+          top: topPadding,
+          bottom: bottomPadding,
+        ),
+        child: FlowyRichText(
+          key: _richTextKey,
+          placeholderText: 'Heading',
+          placeholderTextSpanDecorator: _placeholderTextSpanDecorator,
+          textSpanDecorator: _textSpanDecorator,
+          textNode: widget.textNode,
+          editorState: widget.editorState,
+        ),
+      ),
     );
   }
 

frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/number_list_text.dart

@@ -57,21 +57,22 @@ class _NumberListTextNodeWidgetState extends State<NumberListTextNodeWidget>
 
   @override
   Widget build(BuildContext context) {
-    return Row(
-      children: [
-        FlowySvg(
-          size: Size.square(leftPadding),
-          number: widget.textNode.attributes.number,
-        ),
-        Expanded(
-          child: FlowyRichText(
+    return SizedBox(
+      width: maxTextNodeWidth,
+      child: Row(
+        children: [
+          FlowySvg(
+            size: Size.square(leftPadding),
+            number: widget.textNode.attributes.number,
+          ),
+          FlowyRichText(
             key: _richTextKey,
             placeholderText: 'List',
             textNode: widget.textNode,
             editorState: widget.editorState,
           ),
-        ),
-      ],
+        ],
+      ),
     );
   }
 }

frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/quoted_text.dart

@@ -56,24 +56,25 @@ class _QuotedTextNodeWidgetState extends State<QuotedTextNodeWidget>
 
   @override
   Widget build(BuildContext context) {
-    return Row(
-      children: [
-        FlowySvg(
-          size: Size(
-            leftPadding,
-            _quoteHeight,
+    return SizedBox(
+      width: maxTextNodeWidth,
+      child: Row(
+        children: [
+          FlowySvg(
+            size: Size(
+              leftPadding,
+              _quoteHeight,
+            ),
+            name: 'quote',
           ),
-          name: 'quote',
-        ),
-        Expanded(
-          child: FlowyRichText(
+          FlowyRichText(
             key: _richTextKey,
             placeholderText: 'Quote',
             textNode: widget.textNode,
             editorState: widget.editorState,
           ),
-        ),
-      ],
+        ],
+      ),
     );
   }
 

frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/rich_text.dart

@@ -0,0 +1,68 @@
+import 'package:flowy_editor/document/node.dart';
+import 'package:flowy_editor/editor_state.dart';
+import 'package:flowy_editor/infra/flowy_svg.dart';
+import 'package:flowy_editor/render/rich_text/default_selectable.dart';
+import 'package:flowy_editor/render/rich_text/flowy_rich_text.dart';
+import 'package:flowy_editor/render/rich_text/rich_text_style.dart';
+import 'package:flowy_editor/render/selection/selectable.dart';
+import 'package:flowy_editor/service/render_plugin_service.dart';
+import 'package:flutter/material.dart';
+
+class RichTextNodeWidgetBuilder extends NodeWidgetBuilder<TextNode> {
+  @override
+  Widget build(NodeWidgetContext<TextNode> context) {
+    return RichTextNodeWidget(
+      key: context.node.key,
+      textNode: context.node,
+      editorState: context.editorState,
+    );
+  }
+
+  @override
+  NodeValidator<Node> get nodeValidator => ((node) {
+        return true;
+      });
+}
+
+class RichTextNodeWidget extends StatefulWidget {
+  const RichTextNodeWidget({
+    Key? key,
+    required this.textNode,
+    required this.editorState,
+  }) : super(key: key);
+
+  final TextNode textNode;
+  final EditorState editorState;
+
+  @override
+  State<RichTextNodeWidget> createState() => _RichTextNodeWidgetState();
+}
+
+// customize
+
+class _RichTextNodeWidgetState extends State<RichTextNodeWidget>
+    with Selectable, DefaultSelectable {
+  final _richTextKey = GlobalKey(debugLabel: 'rich_text');
+  final leftPadding = 20.0;
+
+  @override
+  Selectable<StatefulWidget> get forward =>
+      _richTextKey.currentState as Selectable;
+
+  @override
+  Offset get baseOffset {
+    return Offset.zero;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: maxTextNodeWidth,
+      child: FlowyRichText(
+        key: _richTextKey,
+        textNode: widget.textNode,
+        editorState: widget.editorState,
+      ),
+    );
+  }
+}

frontend/app_flowy/packages/flowy_editor/lib/render/rich_text/rich_text_style.dart

@@ -59,6 +59,8 @@ class StyleKey {
   ];
 }
 
+// TODO: customize
+double maxTextNodeWidth = 780.0;
 double baseFontSize = 16.0;
 // TODO: customize.
 Map<String, double> headingToFontSize = {

frontend/app_flowy/packages/flowy_editor/lib/service/editor_service.dart

@@ -1,10 +1,10 @@
+import 'package:flowy_editor/render/rich_text/rich_text.dart';
 import 'package:flutter/material.dart';
 
 import 'package:flowy_editor/editor_state.dart';
 import 'package:flowy_editor/render/editor/editor_entry.dart';
 import 'package:flowy_editor/render/rich_text/bulleted_list_text.dart';
 import 'package:flowy_editor/render/rich_text/checkbox_text.dart';
-import 'package:flowy_editor/render/rich_text/flowy_rich_text.dart';
 import 'package:flowy_editor/render/rich_text/heading_text.dart';
 import 'package:flowy_editor/render/rich_text/number_list_text.dart';
 import 'package:flowy_editor/render/rich_text/quoted_text.dart';