diff --git a/frontend/app_flowy/lib/plugins/document/document_page.dart b/frontend/app_flowy/lib/plugins/document/document_page.dart
index 57dbcd1367..0120f06e8a 100644
--- a/frontend/app_flowy/lib/plugins/document/document_page.dart
+++ b/frontend/app_flowy/lib/plugins/document/document_page.dart
@@ -1,8 +1,8 @@
 import 'package:app_flowy/plugins/document/editor_styles.dart';
-import 'package:app_flowy/plugins/document/presentation/plugins/horizontal_rule_node_widget.dart';
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/plugins/document/presentation/banner.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_editor_plugins/appflowy_editor_plugins.dart';
 import 'package:flowy_infra_ui/widget/error_page.dart';
 import 'package:flowy_sdk/protobuf/flowy-folder/view.pb.dart';
 import 'package:flutter/material.dart';
@@ -101,10 +101,28 @@ class _DocumentPageState extends State<DocumentPage> {
       editorState: editorState,
       autoFocus: editorState.document.isEmpty,
       customBuilders: {
-        'horizontal_rule': HorizontalRuleWidgetBuilder(),
+        // Divider
+        kDividerType: DividerWidgetBuilder(),
+        // Math Equation
+        kMathEquationType: MathEquationNodeWidgetBuidler(),
+        // Code Block
+        kCodeBlockType: CodeBlockNodeWidgetBuilder(),
       },
       shortcutEvents: [
-        insertHorizontalRule,
+        // Divider
+        insertDividerEvent,
+        // Code Block
+        enterInCodeBlock,
+        ignoreKeysInCodeBlock,
+        pasteInCodeBlock,
+      ],
+      selectionMenuItems: [
+        // Divider
+        dividerMenuItem,
+        // Math Equation
+        mathEquationMenuItem,
+        // Code Block
+        codeBlockMenuItem,
       ],
       themeData: theme.copyWith(extensions: [
         ...theme.extensions.values,
diff --git a/frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/code_block/code_block_node_widget.dart b/frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/code_block/code_block_node_widget.dart
index 3c1774b87f..75a0fd48ee 100644
--- a/frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/code_block/code_block_node_widget.dart
+++ b/frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/code_block/code_block_node_widget.dart
@@ -43,6 +43,7 @@ class __CodeBlockNodeWidgeState extends State<_CodeBlockNodeWidge>
     with SelectableMixin, DefaultSelectable {
   final _richTextKey = GlobalKey(debugLabel: kCodeBlockType);
   final _padding = const EdgeInsets.only(left: 20, top: 30, bottom: 30);
+  bool _isHover = false;
   String? get _language =>
       widget.textNode.attributes[kCodeBlockAttrLanguage] as String?;
   String? _detectLanguage;
@@ -59,17 +60,24 @@ class __CodeBlockNodeWidgeState extends State<_CodeBlockNodeWidge>
 
   @override
   Widget build(BuildContext context) {
-    return Stack(
-      children: [
-        _buildCodeBlock(context),
-        _buildSwitchCodeButton(context),
-        _buildDeleteButton(context),
-      ],
+    return InkWell(
+      onHover: (value) {
+        setState(() {
+          _isHover = value;
+        });
+      },
+      onTap: () {},
+      child: Stack(
+        children: [
+          _buildCodeBlock(context),
+          _buildSwitchCodeButton(context),
+          if (_isHover) _buildDeleteButton(context),
+        ],
+      ),
     );
   }
 
   Widget _buildCodeBlock(BuildContext context) {
-    final plainText = widget.textNode.toPlainText();
     final result = highlight.highlight.parse(
       widget.textNode.toPlainText(),
       language: _language,
diff --git a/frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/math_ equation/math_equation_node_widget.dart b/frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/math_ equation/math_equation_node_widget.dart
index 0baffbba47..76121a1ca9 100644
--- a/frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/math_ equation/math_equation_node_widget.dart	
+++ b/frontend/app_flowy/packages/appflowy_editor_plugins/lib/src/math_ equation/math_equation_node_widget.dart	
@@ -168,9 +168,9 @@ class _MathEquationNodeWidgetState extends State<_MathEquationNodeWidget> {
               if (key is! RawKeyDownEvent) return;
               if (key.logicalKey == LogicalKeyboardKey.enter &&
                   !key.isShiftPressed) {
-                _updateMathEquation(controller.text);
+                _updateMathEquation(controller.text, context);
               } else if (key.logicalKey == LogicalKeyboardKey.escape) {
-                _dismiss();
+                _dismiss(context);
               }
             },
             child: TextField(
@@ -185,11 +185,11 @@ class _MathEquationNodeWidgetState extends State<_MathEquationNodeWidget> {
           ),
           actions: [
             TextButton(
-              onPressed: () => _dismiss(),
+              onPressed: () => _dismiss(context),
               child: const Text('Cancel'),
             ),
             TextButton(
-              onPressed: () => _updateMathEquation(controller.text),
+              onPressed: () => _updateMathEquation(controller.text, context),
               child: const Text('Done'),
             ),
           ],
@@ -198,9 +198,9 @@ class _MathEquationNodeWidgetState extends State<_MathEquationNodeWidget> {
     );
   }
 
-  void _updateMathEquation(String mathEquation) {
-    _dismiss();
+  void _updateMathEquation(String mathEquation, BuildContext context) {
     if (mathEquation == _mathEquation) {
+      _dismiss(context);
       return;
     }
     final transaction = widget.editorState.transaction;
@@ -211,9 +211,10 @@ class _MathEquationNodeWidgetState extends State<_MathEquationNodeWidget> {
       },
     );
     widget.editorState.apply(transaction);
+    _dismiss(context);
   }
 
-  void _dismiss() {
+  void _dismiss(BuildContext context) {
     Navigator.of(context).pop();
   }
 }
diff --git a/frontend/app_flowy/pubspec.lock b/frontend/app_flowy/pubspec.lock
index 9ccd2d3076..13218b2051 100644
--- a/frontend/app_flowy/pubspec.lock
+++ b/frontend/app_flowy/pubspec.lock
@@ -36,6 +36,13 @@ packages:
       relative: true
     source: path
     version: "0.0.7"
+  appflowy_editor_plugins:
+    dependency: "direct main"
+    description:
+      path: "packages/appflowy_editor_plugins"
+      relative: true
+    source: path
+    version: "0.0.1"
   appflowy_popover:
     dependency: "direct main"
     description:
@@ -471,6 +478,13 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_math_fork:
+    dependency: transitive
+    description:
+      name: flutter_math_fork
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.6.3+1"
   flutter_plugin_android_lifecycle:
     dependency: transitive
     description:
@@ -556,6 +570,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.1.0"
+  highlight:
+    dependency: transitive
+    description:
+      name: highlight
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.7.0"
   hotkey_manager:
     dependency: "direct main"
     description:
@@ -1402,5 +1423,5 @@ packages:
     source: hosted
     version: "3.1.1"
 sdks:
-  dart: ">=2.17.0 <3.0.0"
+  dart: ">=2.17.6 <3.0.0"
   flutter: ">=3.0.0"
diff --git a/frontend/app_flowy/pubspec.yaml b/frontend/app_flowy/pubspec.yaml
index 2cdf5ca3f0..608e7cf823 100644
--- a/frontend/app_flowy/pubspec.yaml
+++ b/frontend/app_flowy/pubspec.yaml
@@ -91,6 +91,8 @@ dependencies:
   google_fonts: ^3.0.1
   file_picker: <=5.0.0
   percent_indicator: ^4.0.1
+  appflowy_editor_plugins:
+    path: packages/appflowy_editor_plugins
 
 dev_dependencies:
   flutter_lints: ^2.0.1