Merge pull request #621 from LucasXu0/feat/flowy_editor

feat: rebuild the widget when node changed.
2024-08-30 18:12:39 +00:00 · 2022-07-18 16:49:47 +08:00 · 2022-07-18 16:49:47 +08:00 · 39fe3437e7
commit 39fe3437e7
parent 29aafbaac4 de06188c5e
7 changed files with 133 additions and 97 deletions
--- a/frontend/app_flowy/packages/flowy_editor/example/assets/document.json
+++ b/frontend/app_flowy/packages/flowy_editor/example/assets/document.json
@ -1,9 +1,7 @@
 {
    "document": {
-      "type": "text",
-      "attributes": {
-        "content": "TITLE"
-      },
+      "type": "editor",
+      "attributes": {},
      "children": [
        {
          "type": "text",
--- a/frontend/app_flowy/packages/flowy_editor/example/lib/main.dart
+++ b/frontend/app_flowy/packages/flowy_editor/example/lib/main.dart
@ -1,5 +1,6 @@
 import 'dart:convert';

+import 'package:example/plugin/document_node_widget.dart';
 import 'package:example/plugin/image_node_widget.dart';
 import 'package:example/plugin/text_node_widget.dart';
 import 'package:example/plugin/text_with_check_box_node_widget.dart';
@ -56,23 +57,16 @@ class MyHomePage extends StatefulWidget {

 class _MyHomePageState extends State<MyHomePage> {
  final RenderPlugins renderPlugins = RenderPlugins();
+  late EditorState _editorState;
  @override
  void initState() {
    super.initState();

    renderPlugins
-      ..register(
-        'text',
-        TextNodeBuilder.create,
-      )
-      ..register(
-        'image',
-        ImageNodeBuilder.create,
-      )
-      ..register(
-        'text/with-checkbox',
-        TextWithCheckBoxNodeBuilder.create,
-      );
+      ..register('editor', EditorNodeWidgetBuilder.create)
+      ..register('text', TextNodeBuilder.create)
+      ..register('image', ImageNodeBuilder.create)
+      ..register('text/with-checkbox', TextWithCheckBoxNodeBuilder.create);
  }

  @override
@ -83,37 +77,23 @@ class _MyHomePageState extends State<MyHomePage> {
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
-      body: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          FutureBuilder<String>(
-            future: rootBundle.loadString('assets/document.json'),
-            builder: (context, snapshot) {
-              if (!snapshot.hasData) {
-                return const Center(
-                  child: CircularProgressIndicator(),
-                );
-              } else {
-                final data =
-                    Map<String, Object>.from(json.decode(snapshot.data!));
-                final document = StateTree.fromJson(data);
-                print(document.root.toString());
-                final editorState = EditorState(
-                  document: document,
-                  renderPlugins: renderPlugins,
-                );
-                return editorState.build(context);
-              }
-            },
-          ),
-          SizedBox(
-            height: 50,
-            width: MediaQuery.of(context).size.width,
-            child: Container(
-              color: Colors.red,
-            ),
-          )
-        ],
+      body: FutureBuilder<String>(
+        future: rootBundle.loadString('assets/document.json'),
+        builder: (context, snapshot) {
+          if (!snapshot.hasData) {
+            return const Center(
+              child: CircularProgressIndicator(),
+            );
+          } else {
+            final data = Map<String, Object>.from(json.decode(snapshot.data!));
+            final document = StateTree.fromJson(data);
+            _editorState = EditorState(
+              document: document,
+              renderPlugins: renderPlugins,
+            );
+            return _editorState.build(context);
+          }
+        },
      ),
    );
  }
--- a/frontend/app_flowy/packages/flowy_editor/example/lib/plugin/document_node_widget.dart
+++ b/frontend/app_flowy/packages/flowy_editor/example/lib/plugin/document_node_widget.dart
@ -0,0 +1,50 @@
+import 'package:flowy_editor/flowy_editor.dart';
+import 'package:flutter/material.dart';
+
+class EditorNodeWidgetBuilder extends NodeWidgetBuilder {
+  EditorNodeWidgetBuilder.create({
+    required super.editorState,
+    required super.node,
+  }) : super.create();
+
+  @override
+  Widget build(BuildContext buildContext) {
+    return SingleChildScrollView(
+      child: _EditorNodeWidget(
+        node: node,
+        editorState: editorState,
+      ),
+    );
+  }
+}
+
+class _EditorNodeWidget extends StatelessWidget {
+  final Node node;
+  final EditorState editorState;
+
+  const _EditorNodeWidget({
+    Key? key,
+    required this.node,
+    required this.editorState,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: node.children
+            .map(
+              (e) => editorState.renderPlugins.buildWidget(
+                context: NodeWidgetContext(
+                  buildContext: context,
+                  node: e,
+                  editorState: editorState,
+                ),
+              ),
+            )
+            .toList(),
+      ),
+    );
+  }
+}
--- a/frontend/app_flowy/packages/flowy_editor/example/lib/plugin/image_node_widget.dart
+++ b/frontend/app_flowy/packages/flowy_editor/example/lib/plugin/image_node_widget.dart
@ -1,7 +1,5 @@
 import 'package:flowy_editor/flowy_editor.dart';
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
-import 'package:flowy_editor/document/attributes.dart';

 class ImageNodeBuilder extends NodeWidgetBuilder {
  ImageNodeBuilder.create({
@ -33,12 +31,7 @@ class _ImageNodeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
-      child: ChangeNotifierProvider.value(
-        value: node,
-        builder: (_, __) => Consumer<Node>(
-          builder: ((context, value, child) => _build(context)),
-        ),
-      ),
+      child: _build(context),
      onTap: () {
        editorState.update(node, {
          'image_src':
--- a/frontend/app_flowy/packages/flowy_editor/example/lib/plugin/text_node_widget.dart
+++ b/frontend/app_flowy/packages/flowy_editor/example/lib/plugin/text_node_widget.dart
@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flowy_editor/flowy_editor.dart';
 import 'package:flutter/services.dart';
-import 'package:provider/provider.dart';
 import 'package:flowy_editor/document/attributes.dart';

 class TextNodeBuilder extends NodeWidgetBuilder {
@ -56,47 +55,40 @@ class __TextNodeWidgetState extends State<_TextNodeWidget>

  @override
  Widget build(BuildContext context) {
-    return ChangeNotifierProvider.value(
-      value: node,
-      builder: (_, __) => Consumer<Node>(
-        builder: ((context, value, child) {
-          return Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              SelectableText.rich(
-                TextSpan(
-                  text: content,
-                  style: node.attributes.toTextStyle(),
-                ),
-                onTap: () {
-                  _textInputConnection?.close();
-                  _textInputConnection = TextInput.attach(
-                    this,
-                    const TextInputConfiguration(
-                      enableDeltaModel: false,
-                      inputType: TextInputType.multiline,
-                      textCapitalization: TextCapitalization.sentences,
-                    ),
-                  );
-                  _textInputConnection
-                    ?..show()
-                    ..setEditingState(textEditingValue);
-                },
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        SelectableText.rich(
+          TextSpan(
+            text: content,
+            style: node.attributes.toTextStyle(),
+          ),
+          onTap: () {
+            _textInputConnection?.close();
+            _textInputConnection = TextInput.attach(
+              this,
+              const TextInputConfiguration(
+                enableDeltaModel: false,
+                inputType: TextInputType.multiline,
+                textCapitalization: TextCapitalization.sentences,
              ),
-              if (node.children.isNotEmpty)
-                ...node.children.map(
-                  (e) => editorState.renderPlugins.buildWidget(
-                    context: NodeWidgetContext(
-                      buildContext: context,
-                      node: e,
-                      editorState: editorState,
-                    ),
-                  ),
-                )
-            ],
-          );
-        }),
-      ),
+            );
+            _textInputConnection
+              ?..show()
+              ..setEditingState(textEditingValue);
+          },
+        ),
+        if (node.children.isNotEmpty)
+          ...node.children.map(
+            (e) => editorState.renderPlugins.buildWidget(
+              context: NodeWidgetContext(
+                buildContext: context,
+                node: e,
+                editorState: editorState,
+              ),
+            ),
+          )
+      ],
    );
  }

--- a/frontend/app_flowy/packages/flowy_editor/lib/render/node_widget_builder.dart
+++ b/frontend/app_flowy/packages/flowy_editor/lib/render/node_widget_builder.dart
@ -2,12 +2,15 @@ import 'package:flowy_editor/editor_state.dart';
 import 'package:flowy_editor/document/node.dart';
 import 'package:flowy_editor/render/render_plugins.dart';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';

 typedef NodeValidator<T extends Node> = bool Function(T node);

 class NodeWidgetBuilder<T extends Node> {
  final EditorState editorState;
  final T node;
+
+  bool rebuildOnNodeChanged;
  NodeValidator<T>? nodeValidator;

  RenderPlugins get renderPlugins => editorState.renderPlugins;
@ -15,6 +18,7 @@ class NodeWidgetBuilder<T extends Node> {
  NodeWidgetBuilder.create({
    required this.editorState,
    required this.node,
+    this.rebuildOnNodeChanged = true,
  });

  /// Render the current [Node]
@ -29,6 +33,23 @@ class NodeWidgetBuilder<T extends Node> {
      throw Exception(
          'Node validate failure, node = { type: ${node.type}, attributes: ${node.attributes} }');
    }
-    return build(buildContext);
+
+    if (rebuildOnNodeChanged) {
+      return _buildNodeChangeNotifier(buildContext);
+    } else {
+      return build(buildContext);
+    }
+  }
+
+  Widget _buildNodeChangeNotifier(BuildContext buildContext) {
+    return ChangeNotifierProvider.value(
+      value: node,
+      builder: (_, __) => Consumer<T>(
+        builder: ((context, value, child) {
+          debugPrint('Node changed, and rebuilding...');
+          return build(context);
+        }),
+      ),
+    );
  }
 }
--- a/frontend/app_flowy/packages/flowy_editor/pubspec.yaml
+++ b/frontend/app_flowy/packages/flowy_editor/pubspec.yaml
@ -11,6 +11,8 @@ dependencies:
  flutter:
    sdk: flutter

+  provider: ^6.0.3
+
 dev_dependencies:
  flutter_test:
    sdk: flutter