chore: update editor version (#5918)

* chore: update editor version

* fix: new property field width on Mobile

* feat: support enter to insert a new line on mobile

* feat: optimzie callout style

* feat: add hover effect on share button

* chore: fix

---------

Co-authored-by: Nathan.fooo <86001920+appflowy@users.noreply.github.com>
Co-authored-by: nathan <nathan@appflowy.io>

frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/message/ai_markdown_text.dart

@@ -124,6 +124,7 @@ class _AppFlowyEditorMarkdownState extends State<_AppFlowyEditorMarkdown> {
         editorScrollController: scrollController,
         blockComponentBuilders: blockBuilders,
         commandShortcutEvents: [customCopyCommand],
+        disableAutoScroll: true,
         editorState: editorState,
       ),
     );

frontend/appflowy_flutter/lib/plugins/database/grid/presentation/layout/sizes.dart

@@ -15,6 +15,7 @@ class GridSize {
   static double get popoverItemHeight => 26 * scale;
   static double get typeOptionSeparatorHeight => 4 * scale;
   static double get newPropertyButtonWidth => 140 * scale;
+  static double get mobileNewPropertyButtonWidth => 200 * scale;
 
   static EdgeInsets get cellContentInsets => EdgeInsets.symmetric(
         horizontal: GridSize.cellHPadding,

frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/header/mobile_grid_header.dart

@@ -197,7 +197,7 @@ class _CreateFieldButtonState extends State<CreateFieldButton> {
   Widget build(BuildContext context) {
     return Container(
       constraints: BoxConstraints(
-        maxWidth: GridSize.newPropertyButtonWidth,
+        maxWidth: GridSize.mobileNewPropertyButtonWidth,
         minHeight: GridSize.headerHeight,
       ),
       decoration: _getDecoration(context),

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_configuration.dart

@@ -189,7 +189,10 @@ Map<String, BlockComponentBuilder> getEditorBuilderMap({
       ),
     ),
     CalloutBlockKeys.type: CalloutBlockComponentBuilder(
-      configuration: configuration.copyWith(),
+      configuration: configuration.copyWith(
+        padding: (node) => const EdgeInsets.symmetric(vertical: 10),
+      ),
+      inlinePadding: const EdgeInsets.symmetric(vertical: 8.0),
       defaultColor: calloutBGColor,
     ),
     DividerBlockKeys.type: DividerBlockComponentBuilder(

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart

@@ -154,6 +154,9 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
         // callout block
         insertNewLineInCalloutBlock,
 
+        // quote block
+        insertNewLineInQuoteBlock,
+
         // toggle list
         formatGreaterToToggleList,
         insertChildNodeInsideToggleList,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/emoji_picker_button.dart

@@ -20,6 +20,7 @@ class EmojiPickerButton extends StatelessWidget {
     this.title,
     this.showBorder = true,
     this.enable = true,
+    this.margin,
   });
 
   final String emoji;
@@ -33,6 +34,7 @@ class EmojiPickerButton extends StatelessWidget {
   final String? title;
   final bool showBorder;
   final bool enable;
+  final EdgeInsets? margin;
 
   @override
   Widget build(BuildContext context) {
@@ -44,6 +46,7 @@ class EmojiPickerButton extends StatelessWidget {
           height: emojiPickerSize.height,
         ),
         offset: offset,
+        margin: EdgeInsets.zero,
         direction: direction ?? PopoverDirection.rightWithTopAligned,
         popupBuilder: (_) => Container(
           width: emojiPickerSize.width,
@@ -79,15 +82,16 @@ class EmojiPickerButton extends StatelessWidget {
       );
     }
 
-    return FlowyTextButton(
+    return FlowyButton(
+      useIntrinsicWidth: true,
+      margin:
+          margin ?? const EdgeInsets.symmetric(horizontal: 8.0, vertical: 6.0),
+      text: FlowyText.emoji(
         emoji,
-      overflow: TextOverflow.visible,
         fontSize: emojiSize,
-      padding: EdgeInsets.zero,
+        optimizeEmojiAlign: true,
-      constraints: const BoxConstraints.tightFor(width: 36.0),
+      ),
-      fillColor: Colors.transparent,
+      onTap: enable
-      mainAxisAlignment: MainAxisAlignment.center,
-      onPressed: enable
           ? () async {
               final result = await context.push<EmojiPickerResult>(
                 Uri(

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart

@@ -68,9 +68,11 @@ class CalloutBlockComponentBuilder extends BlockComponentBuilder {
   CalloutBlockComponentBuilder({
     super.configuration,
     required this.defaultColor,
+    required this.inlinePadding,
   });
 
   final Color defaultColor;
+  final EdgeInsets inlinePadding;
 
   @override
   BlockComponentWidget build(BlockComponentContext blockComponentContext) {
@@ -79,6 +81,7 @@ class CalloutBlockComponentBuilder extends BlockComponentBuilder {
       key: node.key,
       node: node,
       defaultColor: defaultColor,
+      inlinePadding: inlinePadding,
       configuration: configuration,
       showActions: showActions(node),
       actionBuilder: (context, state) => actionBuilder(
@@ -105,9 +108,11 @@ class CalloutBlockComponentWidget extends BlockComponentStatefulWidget {
     super.actionBuilder,
     super.configuration = const BlockComponentConfiguration(),
     required this.defaultColor,
+    required this.inlinePadding,
   });
 
   final Color defaultColor;
+  final EdgeInsets inlinePadding;
 
   @override
   State<CalloutBlockComponentWidget> createState() =>
@@ -176,6 +181,7 @@ class _CalloutBlockComponentWidgetState
         borderRadius: const BorderRadius.all(Radius.circular(8.0)),
         color: backgroundColor,
       ),
+      padding: widget.inlinePadding,
       width: double.infinity,
       alignment: alignment,
       child: Row(
@@ -183,27 +189,22 @@ class _CalloutBlockComponentWidgetState
         mainAxisSize: MainAxisSize.min,
         textDirection: textDirection,
         children: [
+          if (PlatformExtension.isDesktopOrWeb) const HSpace(4.0),
           // the emoji picker button for the note
-          Padding(
+          EmojiPickerButton(
-            padding: const EdgeInsets.only(
-              top: 6.0,
-              left: 4.0,
-              right: 4.0,
-            ),
-            child: EmojiPickerButton(
             key: ValueKey(
               emoji.toString(),
             ), // force to refresh the popover state
             enable: editorState.editable,
             title: '',
             emoji: emoji,
-              emojiSize: 16.0,
+            emojiSize: 15.0,
             onSubmitted: (emoji, controller) {
               setEmoji(emoji);
               controller?.close();
             },
           ),
-          ),
+          if (PlatformExtension.isDesktopOrWeb) const HSpace(4.0),
           Flexible(
             child: Padding(
               padding: const EdgeInsets.symmetric(vertical: 4.0),
@@ -248,9 +249,7 @@ class _CalloutBlockComponentWidgetState
     BuildContext context,
     TextDirection textDirection,
   ) {
-    return Padding(
+    return AppFlowyRichText(
-      padding: padding,
-      child: AppFlowyRichText(
       key: forwardKey,
       delegate: this,
       node: widget.node,
@@ -265,7 +264,6 @@ class _CalloutBlockComponentWidgetState
       textDirection: textDirection,
       cursorColor: editorState.editorStyle.cursorColor,
       selectionColor: editorState.editorStyle.selectionColor,
-      ),
     );
   }
 

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/copy_and_paste/custom_cut_command.dart

@@ -1,6 +1,6 @@
 import 'package:appflowy/plugins/document/presentation/editor_plugins/copy_and_paste/editor_state_paste_node_extension.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
-import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_editor/appflowy_editor.dart' hide EditorCopyPaste;
 import 'package:flutter/material.dart';
 
 /// cut.

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/copy_and_paste/custom_paste_command.dart

@@ -7,7 +7,7 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/copy_and_p
 import 'package:appflowy/plugins/document/presentation/editor_plugins/copy_and_paste/paste_from_plain_text.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy_backend/log.dart';
-import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
+import 'package:appflowy_editor/appflowy_editor.dart' hide Log, EditorCopyPaste;
 import 'package:appflowy_editor_plugins/appflowy_editor_plugins.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/copy_and_paste/paste_from_html.dart

@@ -1,5 +1,5 @@
 import 'package:appflowy/plugins/document/presentation/editor_plugins/copy_and_paste/editor_state_paste_node_extension.dart';
-import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_editor/appflowy_editor.dart' hide EditorCopyPaste;
 
 extension PasteFromHtml on EditorState {
   Future<bool> pasteHtml(String html) async {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/copy_and_paste/paste_from_in_app_json.dart

@@ -2,7 +2,7 @@ import 'dart:convert';
 
 import 'package:appflowy/plugins/document/presentation/editor_plugins/copy_and_paste/editor_state_paste_node_extension.dart';
 import 'package:appflowy_backend/log.dart';
-import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
+import 'package:appflowy_editor/appflowy_editor.dart' hide Log, EditorCopyPaste;
 
 extension PasteFromInAppJson on EditorState {
   Future<bool> pasteInAppJson(String inAppJson) async {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/copy_and_paste/paste_from_plain_text.dart

@@ -1,6 +1,6 @@
 import 'package:appflowy/plugins/document/presentation/editor_plugins/copy_and_paste/editor_state_paste_node_extension.dart';
 import 'package:appflowy/shared/patterns/common_patterns.dart';
-import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_editor/appflowy_editor.dart' hide EditorCopyPaste;
 
 extension PasteFromPlainText on EditorState {
   Future<void> pastePlainText(String plainText) async {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/plugins.dart

@@ -51,6 +51,7 @@ export 'openai/widgets/smart_edit_node_widget.dart';
 export 'openai/widgets/smart_edit_toolbar_item.dart';
 export 'outline/outline_block_component.dart';
 export 'parsers/markdown_parsers.dart';
+export 'quote/quote_block_shortcuts.dart';
 export 'slash_menu/slash_menu_items.dart';
 export 'table/table_menu.dart';
 export 'table/table_option_action.dart';

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/quote/quote_block_shortcuts.dart

@@ -0,0 +1,39 @@
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter/services.dart';
+
+/// Pressing Enter in a quote block will insert a newline (\n) within the quote,
+/// while pressing Shift+Enter in a quote will insert a new paragraph next to the quote.
+///
+/// - support
+///   - desktop
+///   - mobile
+///   - web
+///
+final CharacterShortcutEvent insertNewLineInQuoteBlock = CharacterShortcutEvent(
+  key: 'insert a new line in quote block',
+  character: '\n',
+  handler: _insertNewLineHandler,
+);
+
+CharacterShortcutEventHandler _insertNewLineHandler = (editorState) async {
+  final selection = editorState.selection?.normalized;
+  if (selection == null) {
+    return false;
+  }
+
+  final node = editorState.getNodeAtPath(selection.start.path);
+  if (node == null || node.type != QuoteBlockKeys.type) {
+    return false;
+  }
+
+  // delete the selection
+  await editorState.deleteSelection(selection);
+
+  if (HardwareKeyboard.instance.isShiftPressed) {
+    await editorState.insertNewLine();
+  } else {
+    await editorState.insertTextAtCurrentSelection('\n');
+  }
+
+  return true;
+};

frontend/appflowy_flutter/lib/plugins/shared/share/_shared.dart

@@ -1,5 +1,3 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database/application/tab_bar_bloc.dart';
 import 'package:appflowy/plugins/shared/share/share_bloc.dart';
@@ -7,7 +5,7 @@ import 'package:appflowy/plugins/shared/share/share_menu.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flowy_infra_ui/widget/rounded_button.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 class ShareMenuButton extends StatelessWidget {
@@ -55,18 +53,17 @@ class _ShareButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return RoundedTextButton(
+    return FlowyButton(
-      title: LocaleKeys.shareAction_buttonText.tr(),
+      text: FlowyText(
-      padding: const EdgeInsets.symmetric(horizontal: 14.0),
+        LocaleKeys.shareAction_buttonText.tr(),
         fontSize: 14.0,
         fontWeight: FontWeight.w500,
-      borderRadius: const BorderRadius.all(
+        color: Theme.of(context).colorScheme.onPrimary,
-        Radius.circular(10.0),
       ),
-      textColor: Theme.of(context).colorScheme.onPrimary,
+      margin: const EdgeInsets.symmetric(horizontal: 14.0),
-      onPressed: () {
+      backgroundColor: Theme.of(context).colorScheme.primary,
-        // Do nothing, but it needs to provide an empty action in order to show cursorß
+      hoverColor: Theme.of(context).colorScheme.primary.withOpacity(0.9),
-      },
+      radius: BorderRadius.circular(10.0),
     );
   }
 }

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/button.dart

@@ -159,6 +159,7 @@ class FlowyButton extends StatelessWidget {
   final double iconPadding;
   final bool expand;
   final Color? borderColor;
+  final Color? backgroundColor;
 
   const FlowyButton({
     super.key,
@@ -183,6 +184,7 @@ class FlowyButton extends StatelessWidget {
     this.iconPadding = 6,
     this.expand = false,
     this.borderColor,
+    this.backgroundColor,
   });
 
   @override
@@ -211,6 +213,7 @@ class FlowyButton extends StatelessWidget {
           borderRadius: radius ?? Corners.s6Border,
           hoverColor: color,
           borderColor: borderColor ?? Colors.transparent,
+          backgroundColor: backgroundColor ?? Colors.transparent,
         ),
         onHover: disable ? null : onHover,
         isSelected: () => isSelected,

frontend/appflowy_flutter/pubspec.lock

@@ -53,8 +53,8 @@ packages:
     dependency: "direct main"
     description:
       path: "."
-      ref: "0317779"
+      ref: "3d6aff0"
-      resolved-ref: "031777941ce53fe1aaa9a23177f6045b142e6e73"
+      resolved-ref: "3d6aff0d21de96411675417ab952f315cc949c7a"
       url: "https://github.com/AppFlowy-IO/appflowy-editor.git"
     source: git
     version: "3.1.0"
@@ -1198,10 +1198,10 @@ packages:
     dependency: "direct main"
     description:
       name: keyboard_height_plugin
-      sha256: bbb32804bf93601249c17c33125cd2e654f5ef650fc6acf1b031d69b478b35ce
+      sha256: "3a51c8ebb43465ebe0b3bad17f3b6d945421e58011f3f5a08134afe69a3d775f"
       url: "https://pub.dev"
     source: hosted
-    version: "0.0.5"
+    version: "0.1.5"
   leak_tracker:
     dependency: "direct main"
     description:

frontend/appflowy_flutter/pubspec.yaml

@@ -124,7 +124,7 @@ dependencies:
   image_gallery_saver: ^2.0.3
   cached_network_image: ^3.3.0
   leak_tracker: ^10.0.0
-  keyboard_height_plugin: ^0.0.5
+  keyboard_height_plugin: ^0.1.5
   scrollable_positioned_list: ^0.3.8
   flutter_cache_manager: ^3.3.1
   share_plus: ^7.2.1
@@ -199,7 +199,7 @@ dependency_overrides:
   appflowy_editor:
     git:
       url: https://github.com/AppFlowy-IO/appflowy-editor.git
-      ref: "0317779"
+      ref: "3d6aff0"
 
   appflowy_editor_plugins:
     git: