[flutter]: cutom editor styles

app_flowy/lib/workspace/presentation/stack_page/doc/doc_page.dart

@@ -1,4 +1,3 @@
-import 'dart:io';
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/workspace/application/doc/doc_bloc.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_scroll_bar.dart';
@@ -10,7 +9,7 @@ import 'package:flowy_sdk/protobuf/flowy-workspace/view_create.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:styled_widget/styled_widget.dart';
-
+import 'styles.dart';
 import 'widget/toolbar/tool_bar.dart';
 
 class DocPage extends StatefulWidget {
@@ -84,6 +83,7 @@ class _DocPageState extends State<DocPage> {
       readOnly: false,
       scrollBottomInset: 0,
       scrollController: scrollController,
+      customStyles: customStyles(context),
     );
 
     return Expanded(
@@ -102,81 +102,3 @@ class _DocPageState extends State<DocPage> {
     );
   }
 }
-
-// import 'package:flowy_editor/flowy_editor.dart';
-
-// ignore: must_be_immutable
-// class DocPage extends StatefulWidget {
-//   late EditorController controller;
-//   late DocEditBloc editBloc;
-//   final FlowyDoc doc;
-
-//   DocPage({Key? key, required this.doc}) : super(key: key) {
-//     editBloc = getIt<DocEditBloc>(param1: doc.id);
-//     controller = EditorController(
-//       document: doc.document,
-//       selection: const TextSelection.collapsed(offset: 0),
-//     );
-//   }
-
-//   @override
-//   State<DocPage> createState() => _DocPageState();
-// }
-
-// class _DocPageState extends State<DocPage> {
-//   final FocusNode _focusNode = FocusNode();
-
-//   @override
-//   Widget build(BuildContext context) {
-//     return BlocProvider.value(
-//       value: widget.editBloc,
-//       child: BlocBuilder<DocEditBloc, DocEditState>(
-//         builder: (ctx, state) {
-//           return Column(
-//             mainAxisAlignment: MainAxisAlignment.spaceBetween,
-//             children: [
-//               _renderEditor(widget.controller),
-//               _renderToolbar(widget.controller),
-//             ],
-//           );
-//         },
-//       ),
-//     );
-//   }
-
-//   @override
-//   Future<void> dispose() async {
-//     widget.editBloc.add(const DocEditEvent.close());
-//     widget.editBloc.close();
-//     super.dispose();
-//     await widget.doc.close();
-//   }
-
-//   Widget _renderEditor(EditorController controller) {
-//     final editor = FlowyEditor(
-//       controller: controller,
-//       focusNode: _focusNode,
-//       scrollable: true,
-//       autoFocus: false,
-//       expands: false,
-//       padding: const EdgeInsets.symmetric(horizontal: 8.0),
-//       readOnly: false,
-//       scrollBottomInset: 0,
-//       scrollController: ScrollController(),
-//     );
-//     return Expanded(
-//       child: Padding(padding: const EdgeInsets.all(10), child: editor),
-//     );
-//   }
-
-//   Widget _renderToolbar(EditorController controller) {
-//     return FlowyToolbar.basic(
-//       controller: controller,
-//       onImageSelectCallback: _onImageSelection,
-//     );
-//   }
-
-//   Future<String> _onImageSelection(File file) {
-//     throw UnimplementedError();
-//   }
-// }

app_flowy/lib/workspace/presentation/stack_page/doc/styles.dart

@@ -0,0 +1,120 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_quill/flutter_quill.dart';
+import 'package:tuple/tuple.dart';
+import 'package:flowy_infra/theme.dart';
+
+DefaultStyles customStyles(BuildContext context) {
+  const baseSpacing = Tuple2<double, double>(6, 0);
+  final defaultTextStyle = DefaultTextStyle.of(context);
+  final baseStyle = defaultTextStyle.style.copyWith(
+    fontSize: 16,
+    height: 1.3,
+  );
+  final theme = context.watch<AppTheme>();
+  final themeData = theme.themeData;
+  final fontFamily = makeFontFamily(themeData);
+
+  return DefaultStyles(
+      h1: DefaultTextBlockStyle(
+          defaultTextStyle.style.copyWith(
+            fontSize: 34,
+            color: defaultTextStyle.style.color!.withOpacity(0.70),
+            height: 1.15,
+            fontWeight: FontWeight.w300,
+          ),
+          const Tuple2(16, 0),
+          const Tuple2(0, 0),
+          null),
+      h2: DefaultTextBlockStyle(
+          defaultTextStyle.style.copyWith(
+            fontSize: 24,
+            color: defaultTextStyle.style.color!.withOpacity(0.70),
+            height: 1.15,
+            fontWeight: FontWeight.normal,
+          ),
+          const Tuple2(8, 0),
+          const Tuple2(0, 0),
+          null),
+      h3: DefaultTextBlockStyle(
+          defaultTextStyle.style.copyWith(
+            fontSize: 20,
+            color: defaultTextStyle.style.color!.withOpacity(0.70),
+            height: 1.25,
+            fontWeight: FontWeight.w500,
+          ),
+          const Tuple2(8, 0),
+          const Tuple2(0, 0),
+          null),
+      paragraph: DefaultTextBlockStyle(baseStyle, const Tuple2(10, 0), const Tuple2(0, 0), null),
+      bold: const TextStyle(fontWeight: FontWeight.bold),
+      italic: const TextStyle(fontStyle: FontStyle.italic),
+      small: const TextStyle(fontSize: 12, color: Colors.black45),
+      underline: const TextStyle(decoration: TextDecoration.underline),
+      strikeThrough: const TextStyle(decoration: TextDecoration.lineThrough),
+      inlineCode: TextStyle(
+        color: Colors.blue.shade900.withOpacity(0.9),
+        fontFamily: fontFamily,
+        fontSize: 13,
+      ),
+      link: TextStyle(
+        color: themeData.colorScheme.secondary,
+        decoration: TextDecoration.underline,
+      ),
+      placeHolder: DefaultTextBlockStyle(
+          defaultTextStyle.style.copyWith(
+            fontSize: 20,
+            height: 1.5,
+            color: Colors.grey.withOpacity(0.6),
+          ),
+          const Tuple2(0, 0),
+          const Tuple2(0, 0),
+          null),
+      lists: DefaultTextBlockStyle(baseStyle, baseSpacing, const Tuple2(0, 6), null),
+      quote: DefaultTextBlockStyle(
+          TextStyle(color: baseStyle.color!.withOpacity(0.6)),
+          baseSpacing,
+          const Tuple2(6, 2),
+          BoxDecoration(
+            border: Border(
+              left: BorderSide(width: 4, color: Colors.grey.shade300),
+            ),
+          )),
+      code: DefaultTextBlockStyle(
+          TextStyle(
+            color: Colors.blue.shade900.withOpacity(0.9),
+            fontFamily: fontFamily,
+            fontSize: 13,
+            height: 1.15,
+          ),
+          baseSpacing,
+          const Tuple2(0, 0),
+          BoxDecoration(
+            color: Colors.grey.shade50,
+            borderRadius: BorderRadius.circular(2),
+          )),
+      indent: DefaultTextBlockStyle(baseStyle, baseSpacing, const Tuple2(0, 6), null),
+      align: DefaultTextBlockStyle(baseStyle, const Tuple2(0, 0), const Tuple2(0, 0), null),
+      leading: DefaultTextBlockStyle(baseStyle, const Tuple2(0, 0), const Tuple2(0, 0), null),
+      sizeSmall: const TextStyle(fontSize: 10),
+      sizeLarge: const TextStyle(fontSize: 18),
+      sizeHuge: const TextStyle(fontSize: 22));
+}
+
+String makeFontFamily(ThemeData themeData) {
+  String fontFamily;
+  switch (themeData.platform) {
+    case TargetPlatform.iOS:
+    case TargetPlatform.macOS:
+      fontFamily = 'Menlo';
+      break;
+    case TargetPlatform.android:
+    case TargetPlatform.fuchsia:
+    case TargetPlatform.windows:
+    case TargetPlatform.linux:
+      fontFamily = 'Roboto Mono';
+      break;
+    default:
+      throw UnimplementedError();
+  }
+  return fontFamily;
+}