feat: support toggling the markdown style by shortcuts (#3674)

2024-08-30 18:12:39 +00:00 · 2023-10-11 23:12:23 +08:00 · 2023-10-11 23:12:23 +08:00 · 8e10cba8e5
commit 8e10cba8e5
parent 7a24f6b6f0
18 changed files with 48 additions and 76 deletions
--- a/frontend/appflowy_flutter/integration_test/database_row_page_test.dart
+++ b/frontend/appflowy_flutter/integration_test/database_row_page_test.dart
@ -245,7 +245,7 @@ void main() {
      await tester.wait(500);

      // Focus on the editor
-      final textBlock = find.byType(TextBlockComponentWidget);
+      final textBlock = find.byType(ParagraphBlockComponentWidget);
      await tester.tapAt(tester.getCenter(textBlock));
      await tester.pumpAndSettle();

--- a/frontend/appflowy_flutter/integration_test/document/document_create_and_delete_test.dart
+++ b/frontend/appflowy_flutter/integration_test/document/document_create_and_delete_test.dart
@ -24,7 +24,7 @@ void main() {
        LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
      );
      // and with one paragraph block
-      expect(find.byType(TextBlockComponentWidget), findsOneWidget);
+      expect(find.byType(ParagraphBlockComponentWidget), findsOneWidget);
    });

    testWidgets('delete the readme page and restore it', (tester) async {
--- a/frontend/appflowy_flutter/integration_test/sidebar/sidebar_test.dart
+++ b/frontend/appflowy_flutter/integration_test/sidebar/sidebar_test.dart
@ -30,7 +30,7 @@ void main() {
        LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
      );
      // and with one paragraph block
-      expect(find.byType(TextBlockComponentWidget), findsOneWidget);
+      expect(find.byType(ParagraphBlockComponentWidget), findsOneWidget);
    });

    testWidgets('create a new document, grid, board and calendar',
@ -55,7 +55,7 @@ void main() {
        switch (layout) {
          case ViewLayoutPB.Document:
            // and with one paragraph block
-            expect(find.byType(TextBlockComponentWidget), findsOneWidget);
+            expect(find.byType(ParagraphBlockComponentWidget), findsOneWidget);
            break;
          case ViewLayoutPB.Grid:
            expect(find.byType(GridPage), findsOneWidget);
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
@ -240,7 +240,7 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {

    final customBlockComponentBuilderMap = {
      PageBlockKeys.type: PageBlockComponentBuilder(),
-      ParagraphBlockKeys.type: TextBlockComponentBuilder(
+      ParagraphBlockKeys.type: ParagraphBlockComponentBuilder(
        configuration: configuration,
      ),
      TodoListBlockKeys.type: TodoListBlockComponentBuilder(
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/block_action_option_button.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/block_action_option_button.dart
@ -47,7 +47,7 @@ class BlockOptionButton extends StatelessWidget {
              : PopoverDirection.leftWithCenterAligned,
      actions: popoverActions,
      onPopupBuilder: () {
-        keepEditorFocusNotifier.value += 1;
+        keepEditorFocusNotifier.increase();
        blockComponentState.alwaysShowActions = true;
      },
      onClosed: () {
@ -55,7 +55,7 @@ class BlockOptionButton extends StatelessWidget {
          editorState.selectionType = null;
          editorState.selection = null;
          blockComponentState.alwaysShowActions = false;
-          keepEditorFocusNotifier.value -= 1;
+          keepEditorFocusNotifier.decrease();
        });
      },
      onSelected: (action, controller) {
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/editor_action_wrapper.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/editor_action_wrapper.dart
@ -1 +0,0 @@
-
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/option_action_button.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/option_action_button.dart
@ -3,7 +3,6 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/op
 import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
-
 import 'package:flowy_infra_ui/widget/ignore_parent_gesture.dart';
 import 'package:flutter/material.dart';

@ -112,32 +111,6 @@ class OptionActionList extends StatelessWidget {
  }
 }

-class BlockComponentActionButton extends StatelessWidget {
-  const BlockComponentActionButton({
-    super.key,
-    required this.icon,
-    required this.onTap,
-  });
-
-  final bool isHovering = false;
-  final Widget icon;
-  final VoidCallback onTap;
-
-  @override
-  Widget build(BuildContext context) {
-    return MouseRegion(
-      cursor: SystemMouseCursors.grab,
-      child: GestureDetector(
-        behavior: HitTestBehavior.opaque,
-        onTap: onTap,
-        onTapDown: (details) {},
-        onTapUp: (details) {},
-        child: icon,
-      ),
-    );
-  }
-}
-
 class OptionActionButton extends StatelessWidget {
  const OptionActionButton({
    super.key,
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/align_toolbar_item/align_toolbar_item.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/align_toolbar_item/align_toolbar_item.dart
@ -11,7 +11,7 @@ final alignToolbarItem = ToolbarItem(
  id: 'editor.align',
  group: 4,
  isActive: onlyShowInTextType,
-  builder: (context, editorState, highlightColor) {
+  builder: (context, editorState, highlightColor, _) {
    final selection = editorState.selection!;
    final nodes = editorState.getNodesInSelection(selection);

@ -89,11 +89,11 @@ class _AlignmentButtonsState extends State<_AlignmentButtons> {
        borderRadius: const BorderRadius.all(Radius.circular(4)),
      ),
      popupBuilder: (_) {
-        keepEditorFocusNotifier.value += 1;
+        keepEditorFocusNotifier.increase();
        return _AlignButtons(onAlignChanged: widget.onAlignChanged);
      },
      onClose: () {
-        keepEditorFocusNotifier.value -= 1;
+        keepEditorFocusNotifier.decrease();
      },
      child: widget.child,
    );
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/link_to_page_widget.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/link_to_page_widget.dart
@ -1,4 +1,5 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/insert_page_command.dart';
 import 'package:appflowy/workspace/application/view/view_ext.dart';
 import 'package:appflowy/workspace/application/view/view_service.dart';
@ -6,13 +7,12 @@ import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/error_page.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
-import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:easy_localization/easy_localization.dart';

 void showLinkToPageMenu(
  OverlayState container,
@ -27,13 +27,13 @@ void showLinkToPageMenu(
  final top = alignment == Alignment.bottomLeft ? offset.dy : null;
  final bottom = alignment == Alignment.topLeft ? offset.dy : null;

-  keepEditorFocusNotifier.value += 1;
+  keepEditorFocusNotifier.increase();
  late OverlayEntry linkToPageMenuEntry;
  linkToPageMenuEntry = FullScreenOverlayEntry(
    top: top,
    bottom: bottom,
    left: offset.dx,
-    dismissCallback: () => keepEditorFocusNotifier.value -= 1,
+    dismissCallback: () => keepEditorFocusNotifier.decrease(),
    builder: (context) => Material(
      color: Colors.transparent,
      child: LinkToPageMenu(
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/find_and_replace/find_and_replace_menu.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/find_and_replace/find_and_replace_menu.dart
@ -24,7 +24,7 @@ class FindAndReplaceMenuWidget extends StatefulWidget {
 class _FindAndReplaceMenuWidgetState extends State<FindAndReplaceMenuWidget> {
  bool showReplaceMenu = false;

-  late SearchServiceV2 searchService = SearchServiceV2(
+  late SearchServiceV3 searchService = SearchServiceV3(
    editorState: widget.editorState,
  );

@ -72,7 +72,7 @@ class FindMenu extends StatefulWidget {

  final EditorState editorState;
  final VoidCallback onDismiss;
-  final SearchServiceV2 searchService;
+  final SearchServiceV3 searchService;
  final void Function(bool value) onShowReplace;

  @override
@ -93,7 +93,7 @@ class _FindMenuState extends State<FindMenu> {
  void initState() {
    super.initState();

-    widget.searchService.matchedPositions.addListener(_setState);
+    widget.searchService.matchWrappers.addListener(_setState);
    widget.searchService.currentSelectedIndex.addListener(_setState);

    findTextEditingController.addListener(_searchPattern);
@ -105,7 +105,7 @@ class _FindMenuState extends State<FindMenu> {

  @override
  void dispose() {
-    widget.searchService.matchedPositions.removeListener(_setState);
+    widget.searchService.matchWrappers.removeListener(_setState);
    widget.searchService.currentSelectedIndex.removeListener(_setState);
    widget.searchService.dispose();
    findTextEditingController.removeListener(_searchPattern);
@ -117,7 +117,7 @@ class _FindMenuState extends State<FindMenu> {
  Widget build(BuildContext context) {
    // the selectedIndex from searchService is 0-based
    final selectedIndex = widget.searchService.selectedIndex + 1;
-    final matches = widget.searchService.matchedPositions.value;
+    final matches = widget.searchService.matchWrappers.value;
    return Row(
      children: [
        const HSpace(4.0),
@ -232,7 +232,7 @@ class ReplaceMenu extends StatefulWidget {
  /// The localizations of the find and replace menu
  final FindReplaceLocalizations? localizations;

-  final SearchServiceV2 searchService;
+  final SearchServiceV3 searchService;

  @override
  State<ReplaceMenu> createState() => _ReplaceMenuState();
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/font/customize_font_toolbar_item.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/font/customize_font_toolbar_item.dart
@ -9,7 +9,7 @@ final customizeFontToolbarItem = ToolbarItem(
  id: 'editor.font',
  group: 4,
  isActive: onlyShowInTextType,
-  builder: (context, editorState, highlightColor) {
+  builder: (context, editorState, highlightColor, _) {
    final selection = editorState.selection!;
    final popoverController = PopoverController();
    return MouseRegion(
@ -18,8 +18,8 @@ final customizeFontToolbarItem = ToolbarItem(
        currentFontFamily: '',
        offset: const Offset(0, 12),
        popoverController: popoverController,
-        onOpen: () => keepEditorFocusNotifier.value += 1,
-        onClose: () => keepEditorFocusNotifier.value -= 1,
+        onOpen: () => keepEditorFocusNotifier.increase(),
+        onClose: () => keepEditorFocusNotifier.decrease(),
        showResetButton: true,
        onFontFamilyChanged: (fontFamily) async {
          popoverController.close();
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/inline_math_equation/inline_math_equation_toolbar_item.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/inline_math_equation/inline_math_equation_toolbar_item.dart
@ -3,14 +3,13 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
-
 import 'package:flutter/material.dart';

 final ToolbarItem inlineMathEquationItem = ToolbarItem(
  id: 'editor.inline_math_equation',
  group: 2,
  isActive: onlyShowInSingleSelectionAndTextType,
-  builder: (context, editorState, highlightColor) {
+  builder: (context, editorState, highlightColor, _) {
    final selection = editorState.selection!;
    final nodes = editorState.getNodesInSelection(selection);
    final isHighlight = nodes.allSatisfyInSelection(selection, (delta) {
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/openai/widgets/smart_edit_toolbar_item.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/openai/widgets/smart_edit_toolbar_item.dart
@ -14,7 +14,7 @@ final ToolbarItem smartEditItem = ToolbarItem(
  id: 'appflowy.editor.smart_edit',
  group: 0,
  isActive: onlyShowInSingleSelectionAndTextType,
-  builder: (context, editorState, _) => SmartEditActionList(
+  builder: (context, editorState, _, __) => SmartEditActionList(
    editorState: editorState,
  ),
 );
@ -55,9 +55,9 @@ class _SmartEditActionListState extends State<SmartEditActionList> {
      actions: SmartEditAction.values
          .map((action) => SmartEditActionWrapper(action))
          .toList(),
-      onClosed: () => keepEditorFocusNotifier.value -= 1,
+      onClosed: () => keepEditorFocusNotifier.decrease(),
      buildChild: (controller) {
-        keepEditorFocusNotifier.value += 1;
+        keepEditorFocusNotifier.increase();
        return FlowyIconButton(
          hoverColor: Colors.transparent,
          tooltipText: isOpenAIEnabled
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toggle/toggle_block_component.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toggle/toggle_block_component.dart
@ -163,16 +163,19 @@ class _ToggleListBlockComponentWidgetState
        textDirection: textDirection,
        children: [
          // the emoji picker button for the note
-          FlowyIconButton(
-            width: 24.0,
-            icon: Icon(
-              collapsed ? Icons.arrow_right : Icons.arrow_drop_down,
+          Container(
+            constraints: const BoxConstraints(minWidth: 26, minHeight: 22),
+            padding: const EdgeInsets.only(right: 4.0),
+            child: FlowyIconButton(
+              width: 18.0,
+              icon: Icon(
+                collapsed ? Icons.arrow_right : Icons.arrow_drop_down,
+                size: 18.0,
+              ),
+              onPressed: onCollapsed,
            ),
-            onPressed: onCollapsed,
-          ),
-          const SizedBox(
-            width: 4.0,
          ),
+
          Flexible(
            child: AppFlowyRichText(
              key: forwardKey,
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart
@ -1,11 +1,8 @@
 import 'package:appflowy/plugins/document/presentation/editor_plugins/inline_math_equation/inline_math_equation.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_block.dart';
 import 'package:appflowy/plugins/document/presentation/more/cubit/document_appearance_cubit.dart';
-
 import 'package:appflowy/plugins/inline_actions/inline_actions_menu.dart';
-
 import 'package:appflowy/util/google_font_family_extension.dart';
-
 import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
@ -63,12 +60,13 @@ class EditorStyleCustomizer {
          color: theme.colorScheme.primary,
          decoration: TextDecoration.underline,
        ),
-        code: GoogleFonts.robotoMono(
+        code: GoogleFonts.arefRuqaaInk(
          textStyle: baseTextStyle(fontFamily).copyWith(
            fontSize: fontSize,
            fontWeight: FontWeight.normal,
+            fontStyle: FontStyle.italic,
            color: Colors.red,
-            backgroundColor: theme.colorScheme.inverseSurface,
+            backgroundColor: theme.colorScheme.inverseSurface.withOpacity(0.8),
          ),
        ),
      ),
@ -102,7 +100,7 @@ class EditorStyleCustomizer {
          color: theme.colorScheme.primary,
          decoration: TextDecoration.underline,
        ),
-        code: GoogleFonts.robotoMono(
+        code: GoogleFonts.arefRuqaaInk(
          textStyle: baseTextStyle(fontFamily).copyWith(
            fontSize: fontSize,
            fontWeight: FontWeight.normal,
--- a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/emoji_menu_item.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/emoji_menu_item.dart
@ -36,12 +36,12 @@ void showEmojiPickerMenu(
  final top = alignment == Alignment.topLeft ? offset.dy : null;
  final bottom = alignment == Alignment.bottomLeft ? offset.dy : null;

-  keepEditorFocusNotifier.value += 1;
+  keepEditorFocusNotifier.increase();
  final emojiPickerMenuEntry = FullScreenOverlayEntry(
    top: top,
    bottom: bottom,
    left: offset.dx,
-    dismissCallback: () => keepEditorFocusNotifier.value -= 1,
+    dismissCallback: () => keepEditorFocusNotifier.decrease(),
    builder: (context) => Material(
      type: MaterialType.transparency,
      child: Container(
--- a/frontend/appflowy_flutter/pubspec.lock
+++ b/frontend/appflowy_flutter/pubspec.lock
@ -54,11 +54,11 @@ packages:
    dependency: "direct main"
    description:
      path: "."
-      ref: adb05d4
-      resolved-ref: adb05d4c49fe2f518e5554cc7d6c2fbe3b01670d
+      ref: "194fe2f"
+      resolved-ref: "194fe2fec9ce00baa2d5f2afbbfe0a45b3a7b158"
      url: "https://github.com/AppFlowy-IO/appflowy-editor.git"
    source: git
-    version: "1.4.3"
+    version: "1.4.4"
  appflowy_popover:
    dependency: "direct main"
    description:
--- a/frontend/appflowy_flutter/pubspec.yaml
+++ b/frontend/appflowy_flutter/pubspec.yaml
@ -47,7 +47,7 @@ dependencies:
  appflowy_editor:
    git:
      url: https://github.com/AppFlowy-IO/appflowy-editor.git
-      ref: "adb05d4"
+      ref: "194fe2f"
  appflowy_popover:
    path: packages/appflowy_popover