feat: implement drawer and simple editor

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

@@ -0,0 +1,148 @@
+import 'dart:convert';
+
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:example/pages/simple_editor.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+class HomePage extends StatefulWidget {
+  const HomePage({Key? key}) : super(key: key);
+
+  @override
+  State<HomePage> createState() => _HomePageState();
+}
+
+class _HomePageState extends State<HomePage> {
+  final _scaffoldKey = GlobalKey<ScaffoldState>();
+  late WidgetBuilder _widgetBuilder;
+  late EditorState _editorState;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _widgetBuilder = (context) {
+      _editorState = EditorState.empty();
+      return AppFlowyEditor(editorState: EditorState.empty());
+    };
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      key: _scaffoldKey,
+      extendBodyBehindAppBar: true,
+      drawer: _buildDrawer(context),
+      body: _buildBody(context),
+      floatingActionButton: _buildFloatingActionButton(context),
+    );
+  }
+
+  Widget _buildDrawer(BuildContext context) {
+    return Drawer(
+      child: ListView(
+        padding: EdgeInsets.zero,
+        children: [
+          DrawerHeader(
+            padding: EdgeInsets.zero,
+            margin: EdgeInsets.zero,
+            child: Image.asset(
+              'assets/images/icon.png',
+              fit: BoxFit.fill,
+            ),
+          ),
+
+          // AppFlowy Editor Demo
+          _buildSeparator(context, 'AppFlowy Editor Demo'),
+          _buildListTile(context, 'With Example.json', () {
+            final jsonString = rootBundle.loadString('assets/example.json');
+            _loadJsonEditor(context, jsonString);
+          }),
+          _buildListTile(context, 'With Empty Document', () {
+            final jsonString = Future<String>.value(
+              json.encode(EditorState.empty().document.toJson()).toString(),
+            );
+            _loadJsonEditor(context, jsonString);
+          }),
+
+          // Encoder Demo
+          _buildSeparator(context, 'Encoder Demo'),
+          _buildListTile(context, 'Export To JSON', () {}),
+          _buildListTile(context, 'Export to Markdown', () {}),
+
+          // Decoder Demo
+          _buildSeparator(context, 'Decoder Demo'),
+          _buildListTile(context, 'Import From JSON', () {}),
+          _buildListTile(context, 'Import From Markdown', () {}),
+
+          // Theme Demo
+          _buildSeparator(context, 'Theme Demo'),
+          _buildListTile(context, 'Bulit In Dark Mode', () {}),
+          _buildListTile(context, 'Custom Theme', () {}),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildBody(BuildContext context) {
+    return _widgetBuilder(context);
+  }
+
+  Widget _buildListTile(
+    BuildContext context,
+    String text,
+    VoidCallback? onTap,
+  ) {
+    return ListTile(
+      dense: true,
+      contentPadding: const EdgeInsets.only(left: 16),
+      title: Text(
+        text,
+        style: const TextStyle(
+          color: Colors.blue,
+          fontSize: 14,
+        ),
+      ),
+      onTap: () {
+        Navigator.pop(context);
+        onTap?.call();
+      },
+    );
+  }
+
+  Widget _buildSeparator(BuildContext context, String text) {
+    return Padding(
+      padding: const EdgeInsets.only(left: 16, top: 16, bottom: 4),
+      child: Text(
+        text,
+        style: const TextStyle(
+          color: Colors.grey,
+          fontSize: 12,
+          fontWeight: FontWeight.bold,
+        ),
+      ),
+    );
+  }
+
+  Widget _buildFloatingActionButton(BuildContext context) {
+    return FloatingActionButton(
+      onPressed: () {
+        _scaffoldKey.currentState?.openDrawer();
+      },
+      child: const Icon(Icons.menu),
+    );
+  }
+
+  void _loadJsonEditor(BuildContext context, Future<String> jsonString) {
+    setState(
+      () {
+        _widgetBuilder = (context) => SimpleEditor(
+              jsonString: jsonString,
+              onEditorStateChange: (editorState) {
+                _editorState = editorState;
+              },
+            );
+      },
+    );
+  }
+}

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

@@ -1,6 +1,7 @@
 import 'dart:convert';
 import 'dart:io';
 
+import 'package:example/home_page.dart';
 import 'package:example/plugin/editor_theme.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
@@ -59,11 +60,7 @@ class _MyHomePageState extends State<MyHomePage> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return const HomePage();
-      extendBodyBehindAppBar: true,
-      body: _buildEditor(context),
-      floatingActionButton: _buildExpandableFab(),
-    );
   }
 
   Widget _buildEditor(BuildContext context) {
@@ -145,7 +142,10 @@ class _MyHomePageState extends State<MyHomePage> {
     );
   }
 
-  Widget _buildExpandableFab() {
+  Widget _buildExpandableFab(BuildContext context) {
+    return FloatingActionButton(onPressed: () {
+      Scaffold.of(context).openDrawer();
+    });
     return ExpandableFab(
       distance: 112.0,
       children: [

frontend/app_flowy/packages/appflowy_editor/example/lib/pages/simple_editor.dart

@@ -0,0 +1,43 @@
+import 'dart:convert';
+
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter/material.dart';
+
+class SimpleEditor extends StatelessWidget {
+  const SimpleEditor({
+    super.key,
+    required this.jsonString,
+    required this.onEditorStateChange,
+  });
+
+  final Future<String> jsonString;
+  final void Function(EditorState editorState) onEditorStateChange;
+
+  @override
+  Widget build(BuildContext context) {
+    return FutureBuilder<String>(
+      future: jsonString,
+      builder: (context, snapshot) {
+        if (snapshot.hasData &&
+            snapshot.connectionState == ConnectionState.done) {
+          final editorState = EditorState(
+            document: Document.fromJson(
+              Map<String, Object>.from(
+                json.decode(snapshot.data!),
+              ),
+            ),
+          );
+          onEditorStateChange(editorState);
+          return AppFlowyEditor(
+            editorState: editorState,
+            autoFocus: editorState.document.isEmpty,
+          );
+        } else {
+          return const Center(
+            child: CircularProgressIndicator(),
+          );
+        }
+      },
+    );
+  }
+}

frontend/app_flowy/packages/appflowy_editor/example/pubspec.yaml

@@ -70,8 +70,7 @@ flutter:
   # To add assets to your application, add an assets section, like this:
   assets:
     - example.json
-    - big_document.json
+    - assets/images/icon.png
-  #   - images/a_dot_ham.jpeg
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware