fix: convert markdown symbol to styled text fails (#1090)

* fix: convert markdown symbol to styled text fails

* docs: update customzing.md

* chore: disable macOS titlebar

* chore: specify the built-in language as en_US

* docs: update documentation

* docs: update documentation

Author: LucasXu0

frontend/app_flowy/packages/appflowy_editor/README.md

@@ -27,7 +27,7 @@ and the Flutter guide for
 </p>
 
 <div align="center">
-    <img src="https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/documentation/images/appflowy-editor-example.gif?raw=true" width = "700" style = "padding: 100"/>
+    <img src="https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/documentation/images/appflowy_editor_example.mp4?raw=true" width = "700" style = "padding: 100"/>
 </div>
 
 ## Key Features
@@ -58,8 +58,6 @@ final editorStyle = EditorStyle.defaultStyle();
 final editorState = EditorState.empty(); // an empty state
 final editor = AppFlowyEditor(
     editorState: editorState,
-    shortcutEvents: const [],
-    customBuilders: const {},
     editorStyle: editorStyle,
 );
 ```
@@ -72,8 +70,6 @@ final editorStyle = EditorStyle.defaultStyle();
 final editorState = EditorState(StateTree.fromJson(data));
 final editor = AppFlowyEditor(
     editorState: editorState,
-    shortcutEvents: const [],
-    customBuilders: const {},
     editorStyle: editorStyle,
 );
 ```
@@ -113,7 +109,7 @@ Please refer to our documentation on customizing AppFlowy for a detailed discuss
 
 Below are some examples of shortcut event customizations:
 
- * [BIUS](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/lib/src/service/internal_key_event_handlers/update_text_style_by_command_x_handler.dart) demonstrates how to make text bold/italic/underline/strikethrough through shortcut keys
+ * [BIUS](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/lib/src/service/internal_key_event_handlers/format_style_handler.dart) demonstrates how to make text bold/italic/underline/strikethrough through shortcut keys
  * [Paste HTML](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/lib/src/service/internal_key_event_handlers/copy_paste_handler.dart) gives you an idea on how to handle pasted styles through shortcut keys
  * Need more examples? Check out [Internal key event handlers](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/lib/src/service/internal_key_event_handlers)
 

frontend/app_flowy/packages/appflowy_editor/documentation/customizing.md

@@ -27,7 +27,7 @@ Widget build(BuildContext context) {
 
 At this point, nothing magic will happen after typing `_xxx_`.
 
-![Before](./images/customizing_a_shortcut_event_before.gif)
+![Before](./images/customize_a_shortcut_event_before.gif)
 
 To implement our shortcut event we will create a `ShortcutEvent` instance to handle an underscore input.
 
@@ -39,11 +39,10 @@ We need to define `key` and `command` in a ShortCutEvent object to customize hot
 ```dart
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 
 ShortcutEvent underscoreToItalicEvent = ShortcutEvent(
   key: 'Underscore to italic',
-  command: 'underscore',
+  command: 'shift+underscore',
   handler: _underscoreToItalicHandler,
 );
 
@@ -82,25 +81,33 @@ ShortcutEventHandler _underscoreToItalicHandler = (editorState, event) {
 
   final textNode = textNodes.first;
   final text = textNode.toRawString();
-  // Determine if an 'underscore' already exists in the text node
-  final previousUnderscore = text.indexOf('_');
-  if (previousUnderscore == -1) {
+  // Determine if an 'underscore' already exists in the text node and only once.
+  final firstUnderscore = text.indexOf('_');
+  final lastUnderscore = text.lastIndexOf('_');
+  if (firstUnderscore == -1 ||
+      firstUnderscore != lastUnderscore ||
+      firstUnderscore == selection.start.offset - 1) {
     return KeyEventResult.ignored;
   }
 
   // Delete the previous 'underscore',
   // update the style of the text surrounded by the two underscores to 'italic',
   // and update the cursor position.
   TransactionBuilder(editorState)
-    ..deleteText(textNode, previousUnderscore, 1)
+    ..deleteText(textNode, firstUnderscore, 1)
     ..formatText(
       textNode,
-      previousUnderscore,
-      selection.end.offset - previousUnderscore - 1,
-      {'italic': true},
+      firstUnderscore,
+      selection.end.offset - firstUnderscore - 1,
+      {
+        BuiltInAttributeKey.italic: true,
+      },
     )
     ..afterSelection = Selection.collapsed(
-      Position(path: textNode.path, offset: selection.end.offset - 1),
+      Position(
+        path: textNode.path,
+        offset: selection.end.offset - 1,
+      ),
     )
     ..commit();
 
@@ -121,17 +128,17 @@ Widget build(BuildContext context) {
         editorStyle: EditorStyle.defaultStyle(),
         customBuilders: const {},
         shortcutEvents: [
-            _underscoreToItalicHandler,
+          underscoreToItalic,
         ],
       ),
     ),
   );
 }
 ```
 
-![After](./images/customizing_a_shortcut_event_after.gif)
+![After](./images/customize_a_shortcut_event_after.gif)
 
-Check out the [complete code](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/example/lib/plugin/underscore_to_italic_key_event_handler.dart) file of this example.
+Check out the [complete code](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/example/lib/plugin/underscore_to_italic.dart) file of this example.
 
 
 ## Customizing a Component
@@ -297,7 +304,7 @@ return AppFlowyEditor(
 );
 ```
 
-![Whew!](./images/customizing_a_component.gif)
+![Whew!](./images/customize_a_component.gif)
 
 Check out the [complete code](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/example/lib/plugin/network_image_node_widget.dart) file of this example.