feat: support scaling the svg (#722)

* feat: support scaling the svg

* fix: flutter test

example/devtools_options.yaml

@@ -0,0 +1 @@
+extensions:

example/lib/home_page.dart

@@ -3,20 +3,18 @@ import 'dart:convert';
 import 'dart:io';
 import 'dart:math';
 
-import 'package:flutter/foundation.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-
 import 'package:example/pages/customize_theme_for_editor.dart';
 import 'package:example/pages/editor.dart';
 import 'package:example/pages/editor_list.dart';
 import 'package:example/pages/focus_example_for_editor.dart';
 import 'package:file_picker/file_picker.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:universal_html/html.dart' as html;
 
-import 'package:appflowy_editor/appflowy_editor.dart';
-
 enum ExportFileType {
   documentJson,
   markdown,

example/lib/pages/mobile_editor.dart

@@ -111,6 +111,7 @@ class _MobileEditorState extends State<MobileEditor> {
   // showcase 1: customize the editor style.
   EditorStyle _buildMobileEditorStyle() {
     return EditorStyle.mobile(
+      textScaleFactor: 1.0,
       cursorColor: const Color.fromARGB(255, 134, 46, 247),
       dragHandleColor: const Color.fromARGB(255, 134, 46, 247),
       selectionColor: const Color.fromARGB(50, 134, 46, 247),

lib/src/editor/block_component/bulleted_list_block_component/bulleted_list_block_component.dart

@@ -1,6 +1,7 @@
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_editor/src/editor/block_component/base_component/block_icon_builder.dart';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 
 class BulletedListBlockKeys {
   const BulletedListBlockKeys._();
@@ -218,14 +219,17 @@ class _BulletedListIcon extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final textScaleFactor =
+        context.read<EditorState>().editorStyle.textScaleFactor;
     return Container(
-      constraints: const BoxConstraints(minWidth: 26, minHeight: 22),
+      constraints:
+          const BoxConstraints(minWidth: 26, minHeight: 22) * textScaleFactor,
       padding: const EdgeInsets.only(right: 4.0),
       child: Center(
         child: Text(
           icon,
           style: textStyle,
-          textScaler: const TextScaler.linear(0.5),
+          textScaler: TextScaler.linear(0.5 * textScaleFactor),
         ),
       ),
     );

lib/src/editor/block_component/numbered_list_block_component/numbered_list_block_component.dart

@@ -209,11 +209,14 @@ class _NumberedListIcon extends StatelessWidget {
   Widget build(BuildContext context) {
     final editorState = context.read<EditorState>();
     final text = editorState.editorStyle.textStyleConfiguration.text;
+    final textScaleFactor = editorState.editorStyle.textScaleFactor;
     return Container(
-      constraints: const BoxConstraints(minWidth: 26, minHeight: 22),
+      constraints:
+          const BoxConstraints(minWidth: 26, minHeight: 22) * textScaleFactor,
       padding: const EdgeInsets.only(right: 4.0),
       child: Center(
         child: Text.rich(
+          textScaler: TextScaler.linear(textScaleFactor),
           textHeightBehavior: const TextHeightBehavior(
             applyHeightToFirstAscent: false,
             applyHeightToLastDescent: false,

lib/src/editor/block_component/quote_block_component/quote_block_component.dart

@@ -187,12 +187,15 @@ class _QuoteIcon extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final textScaleFactor =
+        context.read<EditorState>().editorStyle.textScaleFactor;
     return Container(
       alignment: Alignment.center,
-      constraints: const BoxConstraints(minWidth: 26, minHeight: 22),
+      constraints:
+          const BoxConstraints(minWidth: 26, minHeight: 22) * textScaleFactor,
       padding: const EdgeInsets.only(right: 4.0),
       child: Container(
-        width: 4,
+        width: 4 * textScaleFactor,
         color: '#00BCF0'.tryToColor(),
       ),
     );

lib/src/editor/block_component/rich_text/appflowy_rich_text.dart

@@ -285,6 +285,8 @@ class _AppFlowyRichTextState extends State<AppFlowyRichText>
           ? widget.placeholderTextSpanDecorator!(textSpan)
           : textSpan,
       textDirection: textDirection(),
+      textScaler:
+          TextScaler.linear(widget.editorState.editorStyle.textScaleFactor),
     );
   }
 
@@ -301,6 +303,8 @@ class _AppFlowyRichTextState extends State<AppFlowyRichText>
           ? widget.textSpanDecorator!(textSpan)
           : textSpan,
       textDirection: textDirection(),
+      textScaler:
+          TextScaler.linear(widget.editorState.editorStyle.textScaleFactor),
     );
   }
 

lib/src/editor/block_component/todo_list_block_component/todo_list_block_component.dart

@@ -2,6 +2,7 @@ import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_editor/src/editor/block_component/base_component/block_icon_builder.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:provider/provider.dart';
 
 class TodoListBlockKeys {
   const TodoListBlockKeys._();
@@ -269,13 +270,16 @@ class _TodoListIcon extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final textScaleFactor =
+        context.read<EditorState>().editorStyle.textScaleFactor;
     return MouseRegion(
       cursor: SystemMouseCursors.click,
       child: GestureDetector(
         behavior: HitTestBehavior.opaque,
         onTap: onTap,
         child: Container(
-          constraints: const BoxConstraints(minWidth: 26, minHeight: 22),
+          constraints: const BoxConstraints(minWidth: 26, minHeight: 22) *
+              textScaleFactor,
           padding: const EdgeInsets.only(right: 4.0),
           child: EditorSvg(
             width: 22,

lib/src/editor/editor_component/style/editor_style.dart

@@ -20,6 +20,7 @@ class EditorStyle {
     this.cursorWidth = 2.0,
     this.defaultTextDirection,
     this.enableHapticFeedbackOnAndroid = true,
+    this.textScaleFactor = 1.0,
   });
 
   // The padding of the editor.
@@ -70,6 +71,8 @@ class EditorStyle {
   // enable haptic feedback when updating selection by dragging the drag handler
   final bool enableHapticFeedbackOnAndroid;
 
+  final double textScaleFactor;
+
   const EditorStyle.desktop({
     EdgeInsets? padding,
     Color? cursorColor,
@@ -78,6 +81,7 @@ class EditorStyle {
     TextSpanDecoratorForAttribute? textSpanDecorator,
     this.defaultTextDirection,
     this.cursorWidth = 2.0,
+    this.textScaleFactor = 1.0,
   })  : padding = padding ?? const EdgeInsets.symmetric(horizontal: 100),
         cursorColor = cursorColor ?? const Color(0xFF00BCF0),
         selectionColor =
@@ -107,6 +111,7 @@ class EditorStyle {
     this.mobileDragHandleWidth = 2.0,
     this.cursorWidth = 2.0,
     this.enableHapticFeedbackOnAndroid = true,
+    this.textScaleFactor = 1.0,
   })  : padding = padding ?? const EdgeInsets.symmetric(horizontal: 20),
         cursorColor = cursorColor ?? const Color(0xFF00BCF0),
         dragHandleColor = dragHandleColor ?? const Color(0xFF00BCF0),
@@ -132,6 +137,7 @@ class EditorStyle {
     double? mobileDragHandleWidth,
     bool? enableHapticFeedbackOnAndroid,
     double? cursorWidth,
+    double? textScaleFactor,
   }) {
     return EditorStyle(
       padding: padding ?? this.padding,
@@ -150,6 +156,7 @@ class EditorStyle {
       enableHapticFeedbackOnAndroid:
           enableHapticFeedbackOnAndroid ?? this.enableHapticFeedbackOnAndroid,
       cursorWidth: cursorWidth ?? this.cursorWidth,
+      textScaleFactor: textScaleFactor ?? this.textScaleFactor,
     );
   }
 }

lib/src/infra/flowy_svg.dart

@@ -1,5 +1,7 @@
+import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
+import 'package:provider/provider.dart';
 
 class EditorSvg extends StatelessWidget {
   const EditorSvg({
@@ -24,13 +26,23 @@ class EditorSvg extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final scaleFactor =
+        context.read<EditorState?>()?.editorStyle.textScaleFactor ?? 1.0;
+    final height = (this.height ?? _defaultHeight) * scaleFactor;
+    final width = (this.width ?? _defaultWidth) * scaleFactor;
     return Padding(
       padding: padding ?? const EdgeInsets.all(0),
-      child: _buildSvg(),
+      child: _buildSvg(
+        height,
+        width,
+      ),
     );
   }
 
-  Widget _buildSvg() {
+  Widget _buildSvg(
+    double height,
+    double width,
+  ) {
     if (name != null) {
       return SvgPicture.asset(
         'assets/images/$name.svg',
@@ -46,8 +58,8 @@ class EditorSvg extends StatelessWidget {
           '<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><text x="30" y="150" fill="black" font-size="160">$number.</text></svg>';
       return SvgPicture.string(
         numberText,
-        width: width ?? _defaultWidth,
+        width: width,
-        height: height ?? _defaultHeight,
+        height: height,
       );
     }
     return Container();