Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #621 from LucasXu0/feat/flowy_editor

Browse Source 
feat: rebuild the widget when node changed.
This commit is contained in:
Nathan.fooo 2022-07-18 16:49:47 +08:00 committed by GitHub
commit 39fe3437e7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 133 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/app_flowy/packages/flowy_editor/example/assets/document.json
View File

@ -1,9 +1,7 @@
{
"document": {
"type": "text",
"attributes": {
"content": "TITLE"
},
"type": "editor",
"attributes": {},
"children": [
{
"type": "text",

40
frontend/app_flowy/packages/flowy_editor/example/lib/main.dart
View File

@ -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,10 +77,7 @@ 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>(
body: FutureBuilder<String>(
future: rootBundle.loadString('assets/document.json'),
builder: (context, snapshot) {
if (!snapshot.hasData) {
@ -94,27 +85,16 @@ class _MyHomePageState extends State<MyHomePage> {
child: CircularProgressIndicator(),
);
} else {
final data =
Map<String, Object>.from(json.decode(snapshot.data!));
final data = Map<String, Object>.from(json.decode(snapshot.data!));
final document = StateTree.fromJson(data);
print(document.root.toString());
final editorState = EditorState(
_editorState = EditorState(
document: document,
renderPlugins: renderPlugins,
);
return editorState.build(context);
return _editorState.build(context);
}
},
),
SizedBox(
height: 50,
width: MediaQuery.of(context).size.width,
child: Container(
color: Colors.red,
),
)
],
),
);
}
}

50
frontend/app_flowy/packages/flowy_editor/example/lib/plugin/document_node_widget.dart Normal file
View File

@ -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(),
),
);
}
}

9
frontend/app_flowy/packages/flowy_editor/example/lib/plugin/image_node_widget.dart
View File

@ -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':

8
frontend/app_flowy/packages/flowy_editor/example/lib/plugin/text_node_widget.dart
View File

@ -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,10 +55,6 @@ 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: [
@ -95,9 +90,6 @@ class __TextNodeWidgetState extends State<_TextNodeWidget>
)
],
);
}),
),
);
}
@override

21
frontend/app_flowy/packages/flowy_editor/lib/render/node_widget_builder.dart
View File

@ -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} }');
}
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);
}),
),
);
}
}

2
frontend/app_flowy/packages/flowy_editor/pubspec.yaml
View File

@ -11,6 +11,8 @@ dependencies:
flutter:
sdk: flutter
provider: ^6.0.3
dev_dependencies:
flutter_test:
sdk: flutter