fix: #1732 the actions of an image look different than the ones of a code block

Author: LucasXu0

frontend/app_flowy/packages/appflowy_editor_plugins/assets/images/delete.svg

@@ -1,4 +1,5 @@
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_editor_plugins/src/infra/svg.dart';
 import 'package:flutter/material.dart';
 import 'package:highlight/highlight.dart' as highlight;
 import 'package:highlight/languages/all.dart';
@@ -141,10 +142,11 @@ class __CodeBlockNodeWidgeState extends State<_CodeBlockNodeWidge>
       top: -5,
       right: -5,
       child: IconButton(
-        icon: Icon(
-          Icons.delete_forever_outlined,
+        icon: Svg(
+          name: 'delete',
           color: widget.editorState.editorStyle.selectionMenuItemIconColor,
-          size: 16,
+          width: 16,
+          height: 16,
         ),
         onPressed: () {
           final transaction = widget.editorState.transaction

frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/code_block/code_block_node_widget.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+
+class Svg extends StatelessWidget {
+  const Svg({
+    Key? key,
+    this.name,
+    this.width,
+    this.height,
+    this.color,
+    this.number,
+    this.padding,
+  }) : super(key: key);
+
+  final String? name;
+  final double? width;
+  final double? height;
+  final Color? color;
+  final int? number;
+  final EdgeInsets? padding;
+
+  final _defaultWidth = 20.0;
+  final _defaultHeight = 20.0;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: padding ?? const EdgeInsets.all(0),
+      child: _buildSvg(),
+    );
+  }
+
+  Widget _buildSvg() {
+    if (name != null) {
+      return SvgPicture.asset(
+        'assets/images/$name.svg',
+        color: color,
+        fit: BoxFit.fill,
+        height: height,
+        width: width,
+        package: 'appflowy_editor_plugins',
+      );
+    } else if (number != null) {
+      final numberText =
+          '<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,
+        height: height ?? _defaultHeight,
+      );
+    }
+    return Container();
+  }
+}

frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/infra/svg.dart

@@ -1,4 +1,5 @@
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_editor_plugins/src/infra/svg.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_math_fork/flutter_math.dart';
@@ -141,10 +142,11 @@ class _MathEquationNodeWidgetState extends State<_MathEquationNodeWidget> {
       top: -5,
       right: -5,
       child: IconButton(
-        icon: Icon(
-          Icons.delete_forever_outlined,
+        icon: Svg(
+          name: 'delete',
           color: widget.editorState.editorStyle.selectionMenuItemIconColor,
-          size: 16,
+          width: 16,
+          height: 16,
         ),
         onPressed: () {
           final transaction = widget.editorState.transaction

frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/math_ equation/math_equation_node_widget.dart

@@ -12,13 +12,14 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
-  appflowy_editor: 
+  appflowy_editor:
     path: ../appflowy_editor
-  flowy_infra_ui: 
+  flowy_infra_ui:
     path: ../flowy_infra_ui
   flutter_math_fork: ^0.6.3+1
   highlight: ^0.7.0
   shared_preferences: ^2.0.15
+  flutter_svg: ^1.1.1+1
 
 dev_dependencies:
   flutter_test:
@@ -32,8 +33,8 @@ dev_dependencies:
 flutter:
 
   # To add assets to your package, add an assets section, like this:
-  # assets:
-  #   - images/a_dot_burr.jpeg
+  assets:
+    - assets/images/
   #   - images/a_dot_ham.jpeg
   #
   # For details regarding assets in packages, see