fix: openAI image expiration (#3660)

* feat: save the openAI image to local storage

* feat: support rendering error block

* fix: enter on Toggle list moves heading down without contents

.githooks/commit-msg

@@ -44,7 +44,7 @@ test "" = "$(grep '^Signed-off-by: ' "$1" |
 if [ $? -ne 0 ]
 then
     printError "Please fix your commit message to match AppFlowy coding standards"
-    printError "https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/software-contributions/submitting-code/code-submission-guidelines#commit-message-guidelines"
+    printError "https://docs.appflowy.io/docs/documentation/software-contributions/conventions/git-conventions"
     exit 1
 fi
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -21,7 +21,7 @@ Before you mark this PR ready for review, run through this checklist!
 
 #### PR Checklist
 
-- [ ] My code adheres to the [AppFlowy Style Guide](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/software-contributions/submitting-code/style-guides)
+- [ ] My code adheres to [AppFlowy's Conventions](https://docs.appflowy.io/docs/documentation/software-contributions/conventions)
 - [ ] I've listed at least one issue that this PR fixes in the description above.
 - [ ] I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes.
 - [ ] All existing tests are passing.

.github/workflows/flutter_ci.yaml

@@ -88,7 +88,7 @@ jobs:
             sudo wget -qO /etc/apt/sources.list.d/dart_stable.list https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list
             sudo apt-get update
             sudo apt-get install -y dart curl build-essential libssl-dev clang cmake ninja-build pkg-config libgtk-3-dev
-            sudo apt-get install keybinder-3.0
+            sudo apt-get install keybinder-3.0 libnotify-dev
           elif [ "$RUNNER_OS" == "Windows" ]; then
             vcpkg integrate install
           elif [ "$RUNNER_OS" == "macOS" ]; then

.github/workflows/integration_test.yml

@@ -85,7 +85,7 @@ jobs:
             sudo wget -qO /etc/apt/sources.list.d/dart_stable.list https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list
             sudo apt-get update
             sudo apt-get install -y dart curl build-essential libssl-dev clang cmake ninja-build pkg-config libgtk-3-dev
-            sudo apt-get install keybinder-3.0
+            sudo apt-get install keybinder-3.0 libnotify-dev
           elif [ "$RUNNER_OS" == "Windows" ]; then
             vcpkg integrate install
           elif [ "$RUNNER_OS" == "macOS" ]; then

.github/workflows/release.yml

@@ -388,7 +388,7 @@ jobs:
           sudo wget -qO /etc/apt/trusted.gpg.d/dart_linux_signing_key.asc https://dl-ssl.google.com/linux/linux_signing_key.pub
           sudo apt-get update
           sudo apt-get install -y build-essential libsqlite3-dev libssl-dev clang cmake ninja-build pkg-config libgtk-3-dev
-          sudo apt-get install keybinder-3.0
+          sudo apt-get install keybinder-3.0 libnotify-dev
           sudo apt-get -y install alien
           source $HOME/.cargo/env
           cargo install --force cargo-make

CHANGELOG.md

@@ -1,5 +1,30 @@
 # Release Notes
 
+## Version 0.3.5 - 10/09/2023
+
+### New Features
+- Added support for browsing and inserting images from Unsplash.
+- Revamp and unify the emoji picker throughout AppFlowy.
+
+### Bug fixes
+- Improve layout of the settings page.
+- Improve design of the restore page banner.
+- Improve UX of the reminders.
+- Other UI fixes.
+
+## Version 0.3.4 - 10/02/2023
+
+### New Features
+- Added support for creating a reminder.
+- Added support for finding and replacing in the document page.
+- Added support for showing the hidden fields in row detail page.
+- Adjust the toolbar style in RTL mode.
+
+### Bug fixes
+- Improve snackbar UI design.
+- Improve dandelion theme.
+- Improve id-ID and pl-PL language translations.
+
 ## Version 0.3.3 - 09/24/2023
 
 ### New Features

README.md

@@ -47,7 +47,7 @@ You are in charge of your data and customizations.
 
 ## Getting Started with development
 
-Please view the [documentation](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy) for OS specific development instructions
+Please view the [documentation](https://docs.appflowy.io/docs/documentation/appflowy/from-source) for OS specific development instructions
 
 ## Roadmap
 
@@ -73,7 +73,7 @@ Proudly wear your T-shirt and show it to us by tagging [@appflowy](https://twitt
 
 [![translation badge](https://inlang.com/badge?url=github.com/AppFlowy-IO/AppFlowy)](https://inlang.com/editor/github.com/AppFlowy-IO/AppFlowy?ref=badge)
 
-To add translations, you can manually edit the JSON translation files in `/frontend/appflowy_flutter/assets/translations`, use the [inlang online editor](https://inlang.com/editor/github.com/AppFlowy-IO/AppFlowy), or run `npx inlang machine translate` to add missing translations.
+To add translations, you can manually edit the JSON translation files in `/frontend/resources/translations`, use the [inlang online editor](https://inlang.com/editor/github.com/AppFlowy-IO/AppFlowy), or run `npx inlang machine translate` to add missing translations.
 
 
 ## Join the community to build AppFlowy together

frontend/.vscode/tasks.json

@@ -285,6 +285,14 @@
       "options": {
         "cwd": "${workspaceFolder}/appflowy_flutter"
       }
+    },
+    {
+      "label": "AF: Generate AppFlowyEnv",
+      "type": "shell",
+      "command": "dart run build_runner build --delete-conflicting-outputs",
+      "options": {
+        "cwd": "${workspaceFolder}/appflowy_flutter/packages/appflowy_backend"
+      }
     }
   ]
 }

frontend/Makefile.toml

@@ -25,7 +25,7 @@ CARGO_MAKE_EXTEND_WORKSPACE_MAKEFILE = true
 CARGO_MAKE_CRATE_FS_NAME = "dart_ffi"
 CARGO_MAKE_CRATE_NAME = "dart-ffi"
 LIB_NAME = "dart_ffi"
-CURRENT_APP_VERSION = "0.3.3"
+CURRENT_APP_VERSION = "0.3.5"
 FLUTTER_DESKTOP_FEATURES = "dart,rev-sqlite"
 PRODUCT_NAME = "AppFlowy"
 # CRATE_TYPE: https://doc.rust-lang.org/reference/linkage.html

frontend/appflowy_flutter/.gitignore

@@ -69,8 +69,8 @@ windows/flutter/dart_ffi/
 **/.sandbox
 **/.vscode/
 
-*.env
-*.env.*
+.env
+.env.*
 
 coverage/
 

frontend/appflowy_flutter/README.md

@@ -13,11 +13,13 @@ This Repository contains the codebase for the frontend of the application, curre
 - Linux
 - macOS
 - Windows
-  > We later expect to extend support to Android and iOS devices using Flutter.
+  > We are actively working on support for Android & iOS!
+
+_Additionally, we are working on a Web version built with Tauri!_
 
 ### Am I Eligible to Contribute?
 
-Yes! You are eligible to contribute, check out the ways in which you can [contribute to AppFlowy](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/contributing-to-appflowy). Some of the ways in which you can contribute are:
+Yes! You are eligible to contribute, check out the ways in which you can [contribute to AppFlowy](https://docs.appflowy.io/docs/documentation/software-contributions/contributing-to-appflowy). Some of the ways in which you can contribute are:
 
 - Non-Coding Contributions
   - Documentation
@@ -26,27 +28,23 @@ Yes! You are eligible to contribute, check out the ways in which you can [contri
   - Improve Translations
 - Coding Contributions
 
-To contribute to `AppFlowy_Flutter` codebase specifically (coding contribution) we suggest you to have basic knowledge of Flutter. In case you are new to Flutter, we may suggest you to learn the basics and then try to contribute, get started with Flutter [here](https://flutter.dev/docs/get-started/codelab).
+To contribute to `AppFlowy_Flutter` codebase specifically (coding contribution) we suggest you to have basic knowledge of Flutter. In case you are new to Flutter, we suggest you learn the basics, and then contribute afterwards. To get started with Flutter read [here](https://flutter.dev/docs/get-started/codelab).
 
-### What OS Should I Use for Development?
+### What OS should I use for development?
 
-We support all OS for Development i.e Linux, macOS and Windows. However, most of us promote macOS and Linux over Windows. We have detailed [docs](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/software-contributions/environment-setup) on How to Setup `AppFlowy_Flutter` in your local system in each OS.
+We support all OS for Development i.e. Linux, MacOS and Windows. However, most of us promote macOS and Linux over Windows. We have detailed [docs](https://docs.appflowy.io/docs/documentation/appflowy/from-source/environment-setup) on how to setup `AppFlowy_Flutter` on your local system respectively per operating system.
 
 ### Getting Started ❇
 
-We have a detailed documentation, on how to [get started](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/contributing-to-appflowy) with the project, and make your first contribution. However, we do have some specific picks for you.
+We have detailed documentation on how to [get started](https://docs.appflowy.io/docs/documentation/software-contributions/contributing-to-appflowy) with the project, and make your first contribution. However, we do have some specific picks for you:
 
 - [Code Architecture](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/architecture/frontend/frontend/codemap)
-- [Making Your First PR](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/software-contributions/submitting-code/submitting-your-first-pull-request)
-- [The Style Guide](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/software-contributions/submitting-code/style-guides)
-- [How to run/debug the application](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/software-contributions/launcher-and-tasks)
+- [Styleguide & Conventions](https://docs.appflowy.io/docs/documentation/software-contributions/conventions/naming-conventions)
+- [Making Your First PR](https://docs.appflowy.io/docs/documentation/software-contributions/submitting-code/submitting-your-first-pull-request)
+- [All AppFlowy Documentation](https://docs.appflowy.io/docs/documentation/appflowy) - Contribution guide, build and run, debugging, testing, localization, etc.
 
 ### Need Help?
 
-- New to GitHub? Follow [these](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/software-contributions/submitting-code/setting-up-your-repositories) steps to get started
-- Stuck Somewhere? Join the [Discord](https://discord.gg/9Q2xaN37tV) Group and we are there to help you!
-
-<!--
-## release check
-1. [entitlements](https://flutter.dev/desktop#setting-up-entitlements)
-2. [symbols stripped](https://flutter.dev/docs/development/platform-integration/c-interop) -->
+- New to GitHub? Follow [these](https://docs.appflowy.io/docs/documentation/software-contributions/submitting-code/setting-up-your-repositories) steps to get started
+- Stuck Somewhere? Join our [Discord](https://discord.gg/9Q2xaN37tV), we're there to help you!
+- Find out more about the [community initiatives](https://docs.appflowy.io/docs/appflowy/community).

frontend/appflowy_flutter/dev.env

@@ -0,0 +1,23 @@
+# Initial Setup
+# 1. Copy the dev.env file to .env:
+# cp dev.env .env 
+# 2. Alternatively, you can generate the .env file using the "Generate Env File" task in VSCode.
+
+# Configuring Cloud Type
+# This configuration file is used to specify the cloud type and the necessary configurations for each cloud type. The available options are:
+# Local: 0
+# Supabase: 1
+# AppFlowy Cloud: 2
+
+CLOUD_TYPE=0
+
+# Supabase Configuration
+# If you're using Supabase (CLOUD_TYPE=1), you need to provide the following configurations:
+SUPABASE_URL=replace-with-your-supabase-url
+SUPABASE_ANON_KEY=replace-with-your-supabase-key
+
+# AppFlowy Cloud Configuration
+# If you're using AppFlowy Cloud (CLOUD_TYPE=2), you need to provide the following configurations:
+APPFLOWY_CLOUD_BASE_URL=replace-with-your-appflowy-cloud-url
+APPFLOWY_CLOUD_WS_BASE_URL=replace-with-your-appflowy-cloud-ws-url
+APPFLOWY_CLOUD_GOTRUE_URL=replace-with-your-appflowy-cloud-gotrue-url

frontend/appflowy_flutter/integration_test/database_row_page_test.dart

@@ -146,7 +146,7 @@ void main() {
       await tester.openFirstRowDetailPage();
 
       // Assert that the first field in the row details page is the select
-      // option tyoe
+      // option type
       tester.assertFirstFieldInRowDetailByType(FieldType.SingleSelect);
 
       // Reorder first field in list
@@ -168,6 +168,54 @@ void main() {
       tester.assertFirstFieldInRowDetailByType(FieldType.SingleSelect);
     });
 
+    testWidgets('hide and show hidden fields', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // Create a new grid
+      await tester.createNewPageWithName(layout: ViewLayoutPB.Grid);
+
+      // Hover first row and then open the row page
+      await tester.openFirstRowDetailPage();
+
+      // Assert that the show hidden fields button isn't visible
+      tester.assertToggleShowHiddenFieldsVisibility(false);
+
+      // Hide the first field in the field list
+      await tester.tapGridFieldWithNameInRowDetailPage("Type");
+      await tester.tapHidePropertyButtonInFieldEditor();
+
+      // Assert that the field is now hidden
+      tester.noFieldWithName("Type");
+
+      // Assert that the show hidden fields button appears
+      tester.assertToggleShowHiddenFieldsVisibility(true);
+
+      // Click on the show hidden fields button
+      await tester.toggleShowHiddenFields();
+
+      // Assert that the hidden field is shown again and that the show
+      // hidden fields button is still present
+      tester.findFieldWithName("Type");
+      tester.assertToggleShowHiddenFieldsVisibility(true);
+
+      // Click hide hidden fields
+      await tester.toggleShowHiddenFields();
+
+      // Assert that the hidden field has vanished
+      tester.noFieldWithName("Type");
+
+      // Click show hidden fields
+      await tester.toggleShowHiddenFields();
+
+      // delete the hidden field
+      await tester.tapGridFieldWithNameInRowDetailPage("Type");
+      await tester.tapDeletePropertyInFieldEditor();
+
+      // Assert that the that the show hidden fields button is gone
+      tester.assertToggleShowHiddenFieldsVisibility(false);
+    });
+
     testWidgets('check document exists in row detail page', (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();

frontend/appflowy_flutter/integration_test/document/document_test_runner.dart

@@ -9,6 +9,7 @@ import 'document_option_action_test.dart' as document_option_action_test;
 import 'document_text_direction_test.dart' as document_text_direction_test;
 import 'document_with_cover_image_test.dart' as document_with_cover_image_test;
 import 'document_with_database_test.dart' as document_with_database_test;
+import 'document_with_image_block_test.dart' as document_with_image_block_test;
 import 'document_with_inline_math_equation_test.dart'
     as document_with_inline_math_equation_test;
 import 'document_with_inline_page_test.dart' as document_with_inline_page_test;
@@ -33,4 +34,5 @@ void startTesting() {
   document_alignment_test.main();
   document_text_direction_test.main();
   document_option_action_test.main();
+  document_with_image_block_test.main();
 }

frontend/appflowy_flutter/integration_test/document/document_with_image_block_test.dart

@@ -0,0 +1,147 @@
+import 'dart:io';
+
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/custom_image_block_component.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/embed_image_url_widget.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/image_placeholder.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/unsplash_image_widget.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/upload_image_menu.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder2/protobuf.dart';
+import 'package:appflowy_editor/appflowy_editor.dart' hide UploadImageMenu;
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+import 'package:path/path.dart' as p;
+import 'package:path_provider/path_provider.dart';
+import 'package:run_with_network_images/run_with_network_images.dart';
+
+import '../util/mock/mock_file_picker.dart';
+import '../util/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+  TestWidgetsFlutterBinding.ensureInitialized();
+
+  group('image block in document', () {
+    testWidgets('insert an image from local file', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // create a new document
+      await tester.createNewPageWithName(
+        name: LocaleKeys.document_plugins_image_addAnImage.tr(),
+        layout: ViewLayoutPB.Document,
+      );
+
+      // tap the first line of the document
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.editor.showSlashMenu();
+      await tester.editor.tapSlashMenuItemWithName('Image');
+      expect(find.byType(CustomImageBlockComponent), findsOneWidget);
+      expect(find.byType(ImagePlaceholder), findsOneWidget);
+
+      await tester.tapButton(find.byType(ImagePlaceholder));
+      expect(find.byType(UploadImageMenu), findsOneWidget);
+
+      final image = await rootBundle.load('assets/test/images/sample.jpeg');
+      final tempDirectory = await getTemporaryDirectory();
+      final imagePath = p.join(tempDirectory.path, 'sample.jpeg');
+      final file = File(imagePath)
+        ..writeAsBytesSync(image.buffer.asUint8List());
+
+      mockPickFilePaths(
+        paths: [imagePath],
+      );
+
+      await tester.tapButtonWithName(
+        LocaleKeys.document_imageBlock_upload_placeholder.tr(),
+      );
+      await tester.pumpAndSettle();
+      expect(find.byType(ResizableImage), findsOneWidget);
+      final node = tester.editor.getCurrentEditorState().getNodeAtPath([0])!;
+      expect(node.type, ImageBlockKeys.type);
+      expect(node.attributes[ImageBlockKeys.url], isNotEmpty);
+
+      // remove the temp file
+      file.deleteSync();
+    });
+
+    testWidgets('insert an image from network', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // create a new document
+      await tester.createNewPageWithName(
+        name: LocaleKeys.document_plugins_image_addAnImage.tr(),
+        layout: ViewLayoutPB.Document,
+      );
+
+      // tap the first line of the document
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.editor.showSlashMenu();
+      await tester.editor.tapSlashMenuItemWithName('Image');
+      expect(find.byType(CustomImageBlockComponent), findsOneWidget);
+      expect(find.byType(ImagePlaceholder), findsOneWidget);
+
+      await tester.tapButton(find.byType(ImagePlaceholder));
+      expect(find.byType(UploadImageMenu), findsOneWidget);
+
+      await tester.tapButtonWithName(
+        LocaleKeys.document_imageBlock_embedLink_label.tr(),
+      );
+      const url =
+          'https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&dl=david-marcu-78A265wPiO4-unsplash.jpg&w=640';
+      await tester.enterText(
+        find.descendant(
+          of: find.byType(EmbedImageUrlWidget),
+          matching: find.byType(TextField),
+        ),
+        url,
+      );
+      await tester.tapButton(
+        find.descendant(
+          of: find.byType(EmbedImageUrlWidget),
+          matching: find.text(
+            LocaleKeys.document_imageBlock_embedLink_label.tr(),
+            findRichText: true,
+          ),
+        ),
+      );
+      await tester.pumpAndSettle();
+      expect(find.byType(ResizableImage), findsOneWidget);
+      final node = tester.editor.getCurrentEditorState().getNodeAtPath([0])!;
+      expect(node.type, ImageBlockKeys.type);
+      expect(node.attributes[ImageBlockKeys.url], url);
+    });
+
+    testWidgets('insert an image from unsplash', (tester) async {
+      await runWithNetworkImages(() async {
+        await tester.initializeAppFlowy();
+        await tester.tapGoButton();
+
+        // create a new document
+        await tester.createNewPageWithName(
+          name: LocaleKeys.document_plugins_image_addAnImage.tr(),
+          layout: ViewLayoutPB.Document,
+        );
+
+        // tap the first line of the document
+        await tester.editor.tapLineOfEditorAt(0);
+        await tester.editor.showSlashMenu();
+        await tester.editor.tapSlashMenuItemWithName('Image');
+        expect(find.byType(CustomImageBlockComponent), findsOneWidget);
+        expect(find.byType(ImagePlaceholder), findsOneWidget);
+
+        await tester.tapButton(find.byType(ImagePlaceholder));
+        expect(find.byType(UploadImageMenu), findsOneWidget);
+
+        await tester.tapButtonWithName(
+          'Unsplash',
+        );
+        expect(find.byType(UnsplashImageWidget), findsOneWidget);
+      });
+    });
+  });
+}

frontend/appflowy_flutter/integration_test/reminder/document_reminder_test.dart

@@ -0,0 +1,118 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_block.dart';
+import 'package:appflowy/user/application/user_settings_service.dart';
+import 'package:appflowy/workspace/application/settings/date_time/date_format_ext.dart';
+import 'package:appflowy/workspace/presentation/widgets/toggle/toggle.dart';
+import 'package:appflowy_backend/protobuf/flowy-user/date_time.pbenum.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:calendar_view/calendar_view.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/style_widget/text_field.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../util/base.dart';
+import '../util/common_operations.dart';
+import '../util/editor_test_operations.dart';
+import '../util/keyboard.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('Reminder in Document', () {
+    testWidgets('Add reminder for tomorrow, and include time', (tester) async {
+      const time = "23:59";
+
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      final dateTimeSettings =
+          await UserSettingsBackendService().getDateTimeSettings();
+
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.editor.getCurrentEditorState().insertNewLine();
+
+      await tester.pumpAndSettle();
+
+      // Trigger iline action menu and type 'remind tomorrow'
+      final tomorrow = await _insertReminderTomorrow(tester);
+
+      Node node = tester.editor.getCurrentEditorState().getNodeAtPath([1])!;
+      Map<String, dynamic> mentionAttr =
+          node.delta!.first.attributes![MentionBlockKeys.mention];
+
+      expect(node.type, 'paragraph');
+      expect(mentionAttr['type'], MentionType.reminder.name);
+      expect(mentionAttr['date'], tomorrow.toIso8601String());
+
+      await tester.tap(
+        find.text(dateTimeSettings.dateFormat.formatDate(tomorrow, false)),
+      );
+      await tester.pumpAndSettle();
+
+      await tester.tap(find.byType(Toggle));
+      await tester.pumpAndSettle();
+
+      await tester.enterText(find.byType(FlowyTextField), time);
+
+      // Leave text field to submit
+      await tester.tap(find.text(LocaleKeys.grid_field_includeTime.tr()));
+      await tester.pumpAndSettle();
+
+      node = tester.editor.getCurrentEditorState().getNodeAtPath([1])!;
+      mentionAttr = node.delta!.first.attributes![MentionBlockKeys.mention];
+
+      final tomorrowWithTime =
+          _dateWithTime(dateTimeSettings.timeFormat, tomorrow, time);
+
+      expect(node.type, 'paragraph');
+      expect(mentionAttr['type'], MentionType.reminder.name);
+      expect(mentionAttr['date'], tomorrowWithTime.toIso8601String());
+    });
+  });
+}
+
+Future<DateTime> _insertReminderTomorrow(WidgetTester tester) async {
+  await tester.editor.showAtMenu();
+
+  await FlowyTestKeyboard.simulateKeyDownEvent(
+    [
+      LogicalKeyboardKey.keyR,
+      LogicalKeyboardKey.keyE,
+      LogicalKeyboardKey.keyM,
+      LogicalKeyboardKey.keyI,
+      LogicalKeyboardKey.keyN,
+      LogicalKeyboardKey.keyD,
+      LogicalKeyboardKey.space,
+      LogicalKeyboardKey.keyT,
+      LogicalKeyboardKey.keyO,
+      LogicalKeyboardKey.keyM,
+      LogicalKeyboardKey.keyO,
+      LogicalKeyboardKey.keyR,
+      LogicalKeyboardKey.keyR,
+      LogicalKeyboardKey.keyO,
+      LogicalKeyboardKey.keyW,
+    ],
+    tester: tester,
+  );
+
+  await FlowyTestKeyboard.simulateKeyDownEvent(
+    [LogicalKeyboardKey.enter],
+    tester: tester,
+  );
+
+  return DateTime.now().add(const Duration(days: 1)).withoutTime;
+}
+
+DateTime _dateWithTime(UserTimeFormatPB format, DateTime date, String time) {
+  final t = format == UserTimeFormatPB.TwelveHour
+      ? DateFormat.jm().parse(time)
+      : DateFormat.Hm().parse(time);
+
+  return DateTime.parse(
+    '${date.year}${_padZeroLeft(date.month)}${_padZeroLeft(date.day)} ${_padZeroLeft(t.hour)}:${_padZeroLeft(t.minute)}',
+  );
+}
+
+String _padZeroLeft(int a) => a.toString().padLeft(2, '0');

frontend/appflowy_flutter/integration_test/runner.dart

@@ -22,6 +22,8 @@ import 'tabs_test.dart' as tabs_test;
 import 'hotkeys_test.dart' as hotkeys_test;
 import 'appearance_settings_test.dart' as appearance_test_runner;
 import 'auth/auth_test.dart' as auth_test_runner;
+import 'settings/user_icon_test.dart' as user_icon_test;
+import 'settings/user_language_test.dart' as user_language_test;
 
 /// The main task runner for all integration tests in AppFlowy.
 ///
@@ -67,7 +69,11 @@ void main() {
   // Appearance integration test
   appearance_test_runner.main();
 
-  if (isSupabaseEnabled) {
+  // User settings
+  user_icon_test.main();
+  user_language_test.main();
+
+  if (isCloudEnabled) {
     auth_test_runner.main();
   }
 

frontend/appflowy_flutter/integration_test/settings/user_language_test.dart

@@ -0,0 +1,69 @@
+import 'dart:ui';
+
+import 'package:appflowy/workspace/presentation/settings/widgets/settings_language_view.dart';
+import 'package:integration_test/integration_test.dart';
+import 'package:flutter_test/flutter_test.dart';
+import '../util/util.dart';
+import 'package:appflowy/workspace/application/settings/prelude.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('Settings: user language tests', () {
+    testWidgets('select language, language changed', (tester) async {
+      await tester.initializeAppFlowy();
+
+      await tester.tapGoButton();
+      tester.expectToSeeHomePage();
+      await tester.openSettings();
+
+      await tester.openSettingsPage(SettingsPage.language);
+
+      final userLanguageFinder = find.descendant(
+        of: find.byType(SettingsLanguageView),
+        matching: find.byType(LanguageSelector),
+      );
+
+      // Grab current locale
+      LanguageSelector userLanguage =
+          tester.widget<LanguageSelector>(userLanguageFinder);
+      Locale currentLocale = userLanguage.currentLocale;
+
+      // Open language selector
+      await tester.tap(userLanguageFinder);
+      await tester.pumpAndSettle();
+
+      // Select first option that isn't default
+      await tester.tap(find.byType(LanguageItem).at(1));
+      await tester.pumpAndSettle();
+
+      // Make sure the new locale is not the same as previous one
+      userLanguage = tester.widget<LanguageSelector>(userLanguageFinder);
+      expect(
+        userLanguage.currentLocale,
+        isNot(equals(currentLocale)),
+        reason: "new language shouldn't equal the previous selected language",
+      );
+
+      // Update the current locale to a new one
+      currentLocale = userLanguage.currentLocale;
+
+      // Tried the same flow for the second time
+      // Open language selector
+      await tester.tap(userLanguageFinder);
+      await tester.pumpAndSettle();
+
+      // Select second option that isn't default
+      await tester.tap(find.byType(LanguageItem).at(2));
+      await tester.pumpAndSettle();
+
+      // Make sure the new locale is not the same as previous one
+      userLanguage = tester.widget<LanguageSelector>(userLanguageFinder);
+      expect(
+        userLanguage.currentLocale,
+        isNot(equals(currentLocale)),
+        reason: "new language shouldn't equal the previous selected language",
+      );
+    });
+  });
+}

frontend/appflowy_flutter/integration_test/util/database_test_op.dart

@@ -54,7 +54,8 @@ import 'package:appflowy/plugins/database_view/widgets/row/row_document.dart';
 import 'package:appflowy/plugins/database_view/widgets/row/row_property.dart';
 import 'package:appflowy/plugins/database_view/widgets/setting/database_setting.dart';
 import 'package:appflowy/plugins/database_view/widgets/setting/setting_button.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/emoji_picker/emoji_menu_item.dart';
+import 'package:appflowy/workspace/presentation/settings/widgets/emoji_picker/emoji_menu_item.dart';
+import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
 import 'package:appflowy/workspace/presentation/widgets/toggle/toggle.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart';
@@ -673,6 +674,31 @@ extension AppFlowyDatabaseTest on WidgetTester {
     await pumpAndSettle();
   }
 
+  void assertToggleShowHiddenFieldsVisibility(bool shown) {
+    final button = find.byType(ToggleHiddenFieldsVisibilityButton);
+    if (shown) {
+      expect(button, findsOneWidget);
+    } else {
+      expect(button, findsNothing);
+    }
+  }
+
+  Future<void> toggleShowHiddenFields() async {
+    final button = find.byType(ToggleHiddenFieldsVisibilityButton);
+    await tapButton(button);
+  }
+
+  Future<void> tapDeletePropertyInFieldEditor() async {
+    final deleteButton = find.byType(DeleteFieldButton);
+    await tapButton(deleteButton);
+
+    final confirmButton = find.descendant(
+      of: find.byType(NavigatorAlertDialog),
+      matching: find.byType(PrimaryTextButton),
+    );
+    await tapButton(confirmButton);
+  }
+
   Future<void> scrollGridByOffset(Offset offset) async {
     await drag(find.byType(GridPage), offset);
     await pumpAndSettle();
@@ -746,7 +772,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
   }
 
   Future<void> tapHidePropertyButtonInFieldEditor() async {
-    final button = find.byType(HideFieldButton);
+    final button = find.byType(FieldVisibilityToggleButton);
     await tapButton(button);
   }
 
@@ -899,7 +925,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
   }
 
   Future<void> assertRowCountInGridPage(int num) async {
-    final text = find.text('${rowCountString()} $num',findRichText: true);
+    final text = find.text('${rowCountString()} $num', findRichText: true);
     expect(text, findsOneWidget);
   }
 

frontend/appflowy_flutter/integration_test/util/editor_test_operations.dart

@@ -7,6 +7,7 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/header/cus
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_popover.dart';
+import 'package:appflowy/plugins/inline_actions/widgets/inline_actions_handler.dart';
 import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
@@ -160,7 +161,7 @@ class EditorOperations {
   /// Must call [showAtMenu] first.
   Future<void> tapAtMenuItemWithName(String name) async {
     final atMenuItem = find.descendant(
-      of: find.byType(SelectionMenuWidget),
+      of: find.byType(InlineActionsHandler),
       matching: find.text(name, findRichText: true),
     );
     await tester.tapButton(atMenuItem);

frontend/appflowy_flutter/lib/date/date_service.dart

@@ -0,0 +1,19 @@
+import 'package:appflowy_backend/dispatch/dispatch.dart';
+import 'package:appflowy_backend/protobuf/flowy-date/entities.pb.dart';
+import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
+import 'package:dartz/dartz.dart';
+
+class DateService {
+  static Future<Either<FlowyError, DateTime>> queryDate(String search) async {
+    final query = DateQueryPB.create()..query = search;
+    final result = (await DateEventQueryDate(query).send()).swap();
+    return result.fold((l) => left(l), (r) {
+      final date = DateTime.tryParse(r.date);
+      if (date != null) {
+        return right(date);
+      }
+
+      return left(FlowyError(msg: 'Could not parse Date (NLP) from String'));
+    });
+  }
+}

frontend/appflowy_flutter/lib/env/env.dart

@@ -1,5 +1,6 @@
 // lib/env/env.dart
 import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy_backend/log.dart';
 import 'package:envied/envied.dart';
 
 part 'env.g.dart';
@@ -17,6 +18,36 @@ part 'env.g.dart';
 ///
 @Envied(path: '.env')
 abstract class Env {
+  @EnviedField(
+    obfuscate: true,
+    varName: 'CLOUD_TYPE',
+    defaultValue: '0',
+  )
+  static final int cloudType = _Env.cloudType;
+
+  /// AppFlowy Cloud Configuration
+  @EnviedField(
+    obfuscate: true,
+    varName: 'APPFLOWY_CLOUD_BASE_URL',
+    defaultValue: '',
+  )
+  static final String afCloudBaseUrl = _Env.afCloudBaseUrl;
+
+  @EnviedField(
+    obfuscate: true,
+    varName: 'APPFLOWY_CLOUD_WS_BASE_URL',
+    defaultValue: '',
+  )
+  static final String afCloudWSBaseUrl = _Env.afCloudWSBaseUrl;
+
+  @EnviedField(
+    obfuscate: true,
+    varName: 'APPFLOWY_CLOUD_GOTRUE_URL',
+    defaultValue: '',
+  )
+  static final String afCloudGoTrueUrl = _Env.afCloudGoTrueUrl;
+
+  // Supabase Configuration:
   @EnviedField(
     obfuscate: true,
     varName: 'SUPABASE_URL',
@@ -31,11 +62,60 @@ abstract class Env {
   static final String supabaseAnonKey = _Env.supabaseAnonKey;
 }
 
-bool get isSupabaseEnabled {
+bool get isCloudEnabled {
   // Only enable supabase in release and develop mode.
   if (integrationMode().isRelease || integrationMode().isDevelop) {
-    return Env.supabaseUrl.isNotEmpty && Env.supabaseAnonKey.isNotEmpty;
+    return currentCloudType().isEnabled;
   } else {
     return false;
   }
 }
+
+bool get isSupabaseEnabled {
+  // Only enable supabase in release and develop mode.
+  if (integrationMode().isRelease || integrationMode().isDevelop) {
+    return currentCloudType() == CloudType.supabase;
+  } else {
+    return false;
+  }
+}
+
+bool get isAppFlowyCloudEnabled {
+  // Only enable appflowy cloud in release and develop mode.
+  if (integrationMode().isRelease || integrationMode().isDevelop) {
+    return currentCloudType() == CloudType.appflowyCloud;
+  } else {
+    return false;
+  }
+}
+
+enum CloudType {
+  unknown,
+  supabase,
+  appflowyCloud;
+
+  bool get isEnabled => this != CloudType.unknown;
+}
+
+CloudType currentCloudType() {
+  final value = Env.cloudType;
+  if (value == 1) {
+    if (Env.supabaseUrl.isEmpty || Env.supabaseAnonKey.isEmpty) {
+      Log.error("Supabase is not configured");
+      return CloudType.unknown;
+    } else {
+      return CloudType.supabase;
+    }
+  }
+
+  if (value == 2) {
+    if (Env.afCloudBaseUrl.isEmpty || Env.afCloudWSBaseUrl.isEmpty) {
+      Log.error("AppFlowy cloud is not configured");
+      return CloudType.unknown;
+    } else {
+      return CloudType.appflowyCloud;
+    }
+  }
+
+  return CloudType.unknown;
+}

frontend/appflowy_flutter/lib/mobile/application/mobile_theme_data.dart

@@ -23,7 +23,20 @@ ThemeData getMobileThemeData() {
     primaryColor: mobileColorTheme.primary, //primary 100
     primaryColorLight: const Color(0xFF57B5F8), //primary 80
     dividerColor: mobileColorTheme.outline, //caption
-    scaffoldBackgroundColor: Colors.white,
+    scaffoldBackgroundColor: mobileColorTheme.background,
+    appBarTheme: AppBarTheme(
+      foregroundColor: mobileColorTheme.onBackground,
+      backgroundColor: mobileColorTheme.background,
+      elevation: 0,
+      centerTitle: false,
+      titleTextStyle: TextStyle(
+        fontFamily: 'Poppins',
+        color: mobileColorTheme.onBackground,
+        fontSize: 18,
+        fontWeight: FontWeight.w600,
+        letterSpacing: 0.05,
+      ),
+    ),
     // button
     elevatedButtonTheme: ElevatedButtonThemeData(
       style: ButtonStyle(
@@ -72,7 +85,6 @@ ThemeData getMobileThemeData() {
       displayLarge: TextStyle(
         color: Color(0xFF57B5F8),
         fontSize: 32,
-        fontFamily: 'Poppins',
         fontWeight: FontWeight.w700,
         height: 1.20,
         letterSpacing: 0.16,

frontend/appflowy_flutter/lib/mobile/presentation/details_placeholder_page.dart

@@ -0,0 +1,99 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+// TODO(yijing): delete this after implementing the real screen inside bottom navigation bar.
+/// For demonstration purposes
+class DetailsPlaceholderScreen extends StatefulWidget {
+  /// Constructs a [DetailsScreen].
+  const DetailsPlaceholderScreen({
+    required this.label,
+    this.param,
+    this.extra,
+    this.withScaffold = true,
+    super.key,
+  });
+
+  /// The label to display in the center of the screen.
+  final String label;
+
+  /// Optional param
+  final String? param;
+
+  /// Optional extra object
+  final Object? extra;
+
+  /// Wrap in scaffold
+  final bool withScaffold;
+
+  @override
+  State<StatefulWidget> createState() => DetailsPlaceholderScreenState();
+}
+
+/// The state for DetailsScreen
+class DetailsPlaceholderScreenState extends State<DetailsPlaceholderScreen> {
+  int _counter = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    if (widget.withScaffold) {
+      return Scaffold(
+        appBar: AppBar(
+          title: Text('Details Screen - ${widget.label}'),
+        ),
+        body: _build(context),
+      );
+    } else {
+      return Container(
+        color: Theme.of(context).scaffoldBackgroundColor,
+        child: _build(context),
+      );
+    }
+  }
+
+  Widget _build(BuildContext context) {
+    return Center(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[
+          Text(
+            'Details for ${widget.label} - Counter: $_counter',
+            style: Theme.of(context).textTheme.titleLarge,
+          ),
+          const Padding(padding: EdgeInsets.all(4)),
+          TextButton(
+            onPressed: () {
+              setState(() {
+                _counter++;
+              });
+            },
+            child: const Text('Increment counter'),
+          ),
+          const Padding(padding: EdgeInsets.all(8)),
+          if (widget.param != null)
+            Text(
+              'Parameter: ${widget.param!}',
+              style: Theme.of(context).textTheme.titleMedium,
+            ),
+          const Padding(padding: EdgeInsets.all(8)),
+          if (widget.extra != null)
+            Text(
+              'Extra: ${widget.extra!}',
+              style: Theme.of(context).textTheme.titleMedium,
+            ),
+          if (!widget.withScaffold) ...<Widget>[
+            const Padding(padding: EdgeInsets.all(16)),
+            TextButton(
+              onPressed: () {
+                GoRouter.of(context).pop();
+              },
+              child: const Text(
+                '< Back',
+                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
+              ),
+            ),
+          ]
+        ],
+      ),
+    );
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/home/home.dart

@@ -0,0 +1 @@
+export 'mobile_home_page.dart';

frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_page.dart

@@ -0,0 +1,80 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy/user/application/auth/auth_service.dart';
+import 'package:appflowy_backend/dispatch/dispatch.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder2/workspace.pb.dart';
+import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
+import 'package:flutter/material.dart';
+
+// TODO(yijing): This is just a placeholder for now.
+class MobileHomeScreen extends StatelessWidget {
+  const MobileHomeScreen({super.key});
+
+  static const routeName = "/MobileHomeScreen";
+
+  @override
+  Widget build(BuildContext context) {
+    return FutureBuilder(
+      future: Future.wait([
+        FolderEventGetCurrentWorkspace().send(),
+        getIt<AuthService>().getUser(),
+      ]),
+      builder: (context, snapshots) {
+        if (!snapshots.hasData) {
+          return const Center(child: CircularProgressIndicator.adaptive());
+        }
+
+        final workspaceSetting = snapshots.data?[0].fold(
+          (workspaceSettingPB) {
+            return workspaceSettingPB as WorkspaceSettingPB?;
+          },
+          (error) => null,
+        );
+        final userProfile =
+            snapshots.data?[1].fold((error) => null, (userProfilePB) {
+          return userProfilePB as UserProfilePB?;
+        });
+        // TODO(yijing): implement home page later
+        return Scaffold(
+          key: ValueKey(userProfile?.id),
+          // TODO(yijing):Need to change to workspace when it is ready
+          appBar: AppBar(
+            title: Text(
+              userProfile?.email.toString() ?? 'No email found',
+            ),
+            actions: [
+              IconButton(
+                onPressed: () {
+                  // TODO(yijing): Navigate to setting page
+                },
+                icon: const FlowySvg(
+                  FlowySvgs.m_setting_m,
+                ),
+              )
+            ],
+          ),
+          body: Center(
+            child: Column(
+              children: [
+                const Text(
+                  'User',
+                ),
+                Text(
+                  userProfile.toString(),
+                ),
+                Text('Workspace name: ${workspaceSetting?.workspace.name}'),
+                ElevatedButton(
+                  onPressed: () async {
+                    await getIt<AuthService>().signOut();
+                    runAppFlowy();
+                  },
+                  child: const Text('Logout'),
+                )
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/mobile_bottom_navigation_bar.dart

@@ -0,0 +1,94 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+/// Builds the "shell" for the app by building a Scaffold with a
+/// BottomNavigationBar, where [child] is placed in the body of the Scaffold.
+class MobileBottomNavigationBar extends StatelessWidget {
+  /// Constructs an [MobileBottomNavigationBar].
+  const MobileBottomNavigationBar({
+    required this.navigationShell,
+    super.key,
+  });
+
+  /// The navigation shell and container for the branch Navigators.
+  final StatefulNavigationShell navigationShell;
+
+  @override
+  Widget build(BuildContext context) {
+    final style = Theme.of(context);
+
+    return Scaffold(
+      body: navigationShell,
+      bottomNavigationBar: BottomNavigationBar(
+        showSelectedLabels: false,
+        showUnselectedLabels: false,
+        // Here, the items of BottomNavigationBar are hard coded. In a real
+        // world scenario, the items would most likely be generated from the
+        // branches of the shell route, which can be fetched using
+        // `navigationShell.route.branches`.
+        type: BottomNavigationBarType.fixed,
+        items: <BottomNavigationBarItem>[
+          BottomNavigationBarItem(
+            // There is no text shown on the bottom navigation bar, but Exception will be thrown if label is null here.
+            label: 'home',
+            icon: const FlowySvg(FlowySvgs.m_home_unselected_lg),
+            activeIcon: FlowySvg(
+              FlowySvgs.m_home_selected_lg,
+              color: style.colorScheme.primary,
+            ),
+          ),
+          const BottomNavigationBarItem(
+            label: 'favorite',
+            icon: FlowySvg(FlowySvgs.m_favorite_unselected_lg),
+            activeIcon: FlowySvg(
+              FlowySvgs.m_favorite_selected_lg,
+              blendMode: null,
+            ),
+          ),
+          const BottomNavigationBarItem(
+            label: 'add',
+            icon: FlowySvg(
+              FlowySvgs.m_add_circle_xl,
+              blendMode: null,
+            ),
+          ),
+          BottomNavigationBarItem(
+            label: 'search',
+            icon: const FlowySvg(FlowySvgs.m_search_lg),
+            activeIcon: FlowySvg(
+              FlowySvgs.m_search_lg,
+              color: style.colorScheme.primary,
+            ),
+          ),
+          BottomNavigationBarItem(
+            label: 'notification',
+            icon: const FlowySvg(FlowySvgs.m_notification_unselected_lg),
+            activeIcon: FlowySvg(
+              FlowySvgs.m_notification_selected_lg,
+              color: style.colorScheme.primary,
+            ),
+          ),
+        ],
+        currentIndex: navigationShell.currentIndex,
+        onTap: (int bottomBarIndex) => _onTap(context, bottomBarIndex),
+      ),
+    );
+  }
+
+  /// Navigate to the current location of the branch at the provided index when
+  /// tapping an item in the BottomNavigationBar.
+  void _onTap(BuildContext context, int bottomBarIndex) {
+    // When navigating to a new branch, it's recommended to use the goBranch
+    // method, as doing so makes sure the last navigation state of the
+    // Navigator for the branch is restored.
+    navigationShell.goBranch(
+      bottomBarIndex,
+      // A common pattern when using bottom navigation bars is to support
+      // navigating to the initial location when tapping the item that is
+      // already active. This example demonstrates how to support this behavior,
+      // using the initialLocation parameter of goBranch.
+      initialLocation: bottomBarIndex == navigationShell.currentIndex,
+    );
+  }
+}

frontend/appflowy_flutter/lib/mobile/presentation/mobile_home_page.dart

@@ -1,47 +0,0 @@
-import 'package:appflowy/startup/startup.dart';
-import 'package:appflowy/user/application/auth/auth_service.dart';
-import 'package:appflowy_backend/protobuf/flowy-folder2/workspace.pb.dart';
-import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
-import 'package:flutter/material.dart';
-
-class MobileHomeScreen extends StatelessWidget {
-  const MobileHomeScreen({
-    super.key,
-    required this.userProfile,
-    required this.workspaceSetting,
-  });
-
-  static const routeName = "/MobileHomeScreen";
-  final UserProfilePB userProfile;
-  final WorkspaceSettingPB workspaceSetting;
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: const Text("MobileHomeScreen"),
-      ),
-      // TODO(yijing): implement home page later
-      body: Center(
-        child: Column(
-          children: [
-            const Text(
-              'User',
-            ),
-            Text(
-              userProfile.toString(),
-            ),
-            Text('Workspace name: ${workspaceSetting.workspace.name}'),
-            ElevatedButton(
-              onPressed: () async {
-                await getIt<AuthService>().signOut();
-                runAppFlowy();
-              },
-              child: const Text('Logout'),
-            )
-          ],
-        ),
-      ),
-    );
-  }
-}

frontend/appflowy_flutter/lib/mobile/presentation/presentation.dart

@@ -0,0 +1,4 @@
+export 'home/home.dart';
+export 'root_placeholder_page.dart';
+export 'details_placeholder_page.dart';
+export 'mobile_bottom_navigation_bar.dart';

frontend/appflowy_flutter/lib/mobile/presentation/root_placeholder_page.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+/// Widget for the root/initial pages in the bottom navigation bar.
+class RootPlaceholderScreen extends StatelessWidget {
+  /// Creates a RootScreen
+  const RootPlaceholderScreen({
+    required this.label,
+    required this.detailsPath,
+    this.secondDetailsPath,
+    super.key,
+  });
+
+  /// The label
+  final String label;
+
+  /// The path to the detail page
+  final String detailsPath;
+
+  /// The path to another detail page
+  final String? secondDetailsPath;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('Root of section $label'),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: <Widget>[
+            Text('$label Page', style: Theme.of(context).textTheme.titleLarge),
+            const Padding(padding: EdgeInsets.all(4)),
+            TextButton(
+              onPressed: () {
+                context.go(detailsPath, extra: '$label-XYZ');
+              },
+              child: const Text('View details'),
+            ),
+            const Padding(padding: EdgeInsets.all(4)),
+            if (secondDetailsPath != null)
+              TextButton(
+                onPressed: () {
+                  context.go(secondDetailsPath!);
+                },
+                child: const Text('View more details'),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}

frontend/appflowy_flutter/lib/plugins/database_view/application/cell/cell_service.dart

@@ -2,6 +2,7 @@ import 'dart:async';
 import 'dart:collection';
 import 'package:appflowy_backend/protobuf/flowy-database2/checklist_entities.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/date_entities.pb.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/field_settings_entities.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/row_entities.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/select_option.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/timestamp_entities.pb.dart';
@@ -73,4 +74,13 @@ class DatabaseCellContext with _$DatabaseCellContext {
 
   /// Only the primary field can have an emoji.
   String? get emoji => fieldInfo.field.isPrimary ? rowMeta.icon : null;
+
+  /// Determines whether a database cell context should be visible.
+  /// It will be visible when the field is not hidden or when hidden fields
+  /// should be shown.
+  bool isVisible({bool showHiddenFields = false}) {
+    return fieldInfo.visibility != null &&
+        (showHiddenFields ||
+            fieldInfo.visibility != FieldVisibility.AlwaysHidden);
+  }
 }

frontend/appflowy_flutter/lib/plugins/database_view/application/field/field_action_sheet_bloc.dart

@@ -15,16 +15,16 @@ class FieldActionSheetBloc
   final FieldSettingsBackendService fieldSettingsService;
 
   FieldActionSheetBloc({required FieldContext fieldCellContext})
-      : fieldId = fieldCellContext.field.id,
+      : fieldId = fieldCellContext.fieldInfo.id,
         fieldService = FieldBackendService(
           viewId: fieldCellContext.viewId,
-          fieldId: fieldCellContext.field.id,
+          fieldId: fieldCellContext.fieldInfo.id,
         ),
         fieldSettingsService =
             FieldSettingsBackendService(viewId: fieldCellContext.viewId),
         super(
           FieldActionSheetState.initial(
-            TypeOptionPB.create()..field_2 = fieldCellContext.field,
+            TypeOptionPB.create()..field_2 = fieldCellContext.fieldInfo.field,
           ),
         ) {
     on<FieldActionSheetEvent>(

frontend/appflowy_flutter/lib/plugins/database_view/application/field/field_cell_bloc.dart

@@ -15,13 +15,14 @@ class FieldCellBloc extends Bloc<FieldCellEvent, FieldCellState> {
   final FieldBackendService _fieldBackendSvc;
 
   FieldCellBloc({
-    required FieldContext cellContext,
-  })  : _fieldListener = SingleFieldListener(fieldId: cellContext.field.id),
+    required FieldContext fieldContext,
+  })  : _fieldListener =
+            SingleFieldListener(fieldId: fieldContext.fieldInfo.id),
         _fieldBackendSvc = FieldBackendService(
-          viewId: cellContext.viewId,
-          fieldId: cellContext.field.id,
+          viewId: fieldContext.viewId,
+          fieldId: fieldContext.fieldInfo.id,
         ),
-        super(FieldCellState.initial(cellContext)) {
+        super(FieldCellState.initial(fieldContext)) {
     on<FieldCellEvent>(
       (event, emit) async {
         event.when(
@@ -29,7 +30,7 @@ class FieldCellBloc extends Bloc<FieldCellEvent, FieldCellState> {
             _startListening();
           },
           didReceiveFieldUpdate: (field) {
-            emit(state.copyWith(field: cellContext.field));
+            emit(state.copyWith(field: fieldContext.fieldInfo.field));
           },
           onResizeStart: () {
             emit(state.copyWith(resizeStart: state.width));
@@ -88,8 +89,8 @@ class FieldCellState with _$FieldCellState {
 
   factory FieldCellState.initial(FieldContext cellContext) => FieldCellState(
         viewId: cellContext.viewId,
-        field: cellContext.field,
-        width: cellContext.field.width.toDouble(),
+        field: cellContext.fieldInfo.field,
+        width: cellContext.fieldInfo.field.width.toDouble(),
         resizeStart: 0,
       );
 }

frontend/appflowy_flutter/lib/plugins/database_view/application/field/field_controller.dart

@@ -367,28 +367,13 @@ class FieldController {
 
   /// Listen for field changes in the backend.
   void _listenOnFieldChanges() {
-    void deleteFields(List<FieldIdPB> deletedFields) {
-      if (deletedFields.isEmpty) {
-        return;
-      }
-      final List<FieldInfo> newFields = fieldInfos;
-      final Map<String, FieldIdPB> deletedFieldMap = {
-        for (var fieldOrder in deletedFields) fieldOrder.fieldId: fieldOrder
-      };
-
-      newFields.retainWhere((field) => (deletedFieldMap[field.id] == null));
-      _fieldNotifier.fieldInfos = newFields;
-    }
-
     Future<FieldInfo> attachFieldSettings(FieldInfo fieldInfo) async {
       return _fieldSettingsBackendSvc
           .getFieldSettings(fieldInfo.id)
           .then((result) {
         final fieldSettings = result.fold(
           (fieldSettings) => fieldSettings,
-          (err) {
-            return null;
-          },
+          (err) => null,
         );
         if (fieldSettings == null) {
           return fieldInfo;
@@ -400,9 +385,25 @@ class FieldController {
       });
     }
 
-    Future<void> insertFields(List<IndexFieldPB> insertedFields) async {
+    List<FieldInfo> deleteFields(List<FieldIdPB> deletedFields) {
+      if (deletedFields.isEmpty) {
+        return fieldInfos;
+      }
+      final List<FieldInfo> newFields = fieldInfos;
+      final Map<String, FieldIdPB> deletedFieldMap = {
+        for (final fieldOrder in deletedFields) fieldOrder.fieldId: fieldOrder
+      };
+
+      newFields.retainWhere((field) => (deletedFieldMap[field.id] == null));
+      return newFields;
+    }
+
+    Future<List<FieldInfo>> insertFields(
+      List<IndexFieldPB> insertedFields,
+      List<FieldInfo> fieldInfos,
+    ) async {
       if (insertedFields.isEmpty) {
-        return;
+        return fieldInfos;
       }
       final List<FieldInfo> newFieldInfos = fieldInfos;
       for (final indexField in insertedFields) {
@@ -414,32 +415,32 @@ class FieldController {
           newFieldInfos.add(fieldInfo);
         }
       }
-      _fieldNotifier.fieldInfos = newFieldInfos;
+      return newFieldInfos;
     }
 
-    Future<List<FieldInfo>> updateFields(List<FieldPB> updatedFieldPBs) async {
+    Future<(List<FieldInfo>, List<FieldInfo>)> updateFields(
+      List<FieldPB> updatedFieldPBs,
+      List<FieldInfo> fieldInfos,
+    ) async {
       if (updatedFieldPBs.isEmpty) {
-        return [];
+        return (<FieldInfo>[], fieldInfos);
       }
 
-      final List<FieldInfo> newFields = fieldInfos;
+      final List<FieldInfo> newFieldInfo = fieldInfos;
       final List<FieldInfo> updatedFields = [];
       for (final updatedFieldPB in updatedFieldPBs) {
         final index =
-            newFields.indexWhere((field) => field.id == updatedFieldPB.id);
+            newFieldInfo.indexWhere((field) => field.id == updatedFieldPB.id);
         if (index != -1) {
-          newFields.removeAt(index);
+          newFieldInfo.removeAt(index);
           final initial = FieldInfo.initial(updatedFieldPB);
           final fieldInfo = await attachFieldSettings(initial);
-          newFields.insert(index, fieldInfo);
+          newFieldInfo.insert(index, fieldInfo);
           updatedFields.add(fieldInfo);
         }
       }
 
-      if (updatedFields.isNotEmpty) {
-        _fieldNotifier.fieldInfos = newFields;
-      }
-      return updatedFields;
+      return (updatedFields, newFieldInfo);
     }
 
     // Listen on field's changes
@@ -450,10 +451,14 @@ class FieldController {
             if (_isDisposed) {
               return;
             }
-            deleteFields(changeset.deletedFields);
-            insertFields(changeset.insertedFields);
+            List<FieldInfo> updatedFields;
+            List<FieldInfo> fieldInfos = deleteFields(changeset.deletedFields);
+            fieldInfos =
+                await insertFields(changeset.insertedFields, fieldInfos);
+            (updatedFields, fieldInfos) =
+                await updateFields(changeset.updatedFields, fieldInfos);
 
-            final updatedFields = await updateFields(changeset.updatedFields);
+            _fieldNotifier.fieldInfos = fieldInfos;
             for (final listener in _updatedFieldCallbacks.values) {
               listener(updatedFields);
             }

frontend/appflowy_flutter/lib/plugins/database_view/application/field/field_service.dart

@@ -1,3 +1,4 @@
+import 'package:appflowy/plugins/database_view/application/field/field_info.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/database_entities.pb.dart';
 import 'package:dartz/dartz.dart';
 import 'package:appflowy_backend/dispatch/dispatch.dart';
@@ -108,6 +109,6 @@ class FieldBackendService {
 class FieldContext with _$FieldContext {
   const factory FieldContext({
     required String viewId,
-    required FieldPB field,
+    required FieldInfo fieldInfo,
   }) = _FieldCellContext;
 }

frontend/appflowy_flutter/lib/plugins/database_view/application/field_settings/field_settings_service.dart

@@ -20,7 +20,14 @@ class FieldSettingsBackendService {
 
     return DatabaseEventGetFieldSettings(payload).send().then((result) {
       return result.fold(
-        (fieldSettings) => left(fieldSettings.items.first),
+        (repeatedFieldSettings) {
+          final fieldSetting = repeatedFieldSettings.items.first;
+          if (!fieldSetting.hasVisibility()) {
+            fieldSetting.visibility = FieldVisibility.AlwaysShown;
+          }
+
+          return left(fieldSetting);
+        },
         (r) => right(r),
       );
     });
@@ -31,7 +38,18 @@ class FieldSettingsBackendService {
 
     return DatabaseEventGetAllFieldSettings(payload).send().then((result) {
       return result.fold(
-        (fieldSettings) => left(fieldSettings.items),
+        (repeatedFieldSettings) {
+          final fieldSettings = <FieldSettingsPB>[];
+
+          for (final fieldSetting in repeatedFieldSettings.items) {
+            if (!fieldSetting.hasVisibility()) {
+              fieldSetting.visibility = FieldVisibility.AlwaysShown;
+            }
+            fieldSettings.add(fieldSetting);
+          }
+
+          return left(fieldSettings);
+        },
         (r) => right(r),
       );
     });

frontend/appflowy_flutter/lib/plugins/database_view/application/row/row_cache.dart

@@ -246,14 +246,11 @@ class RowCache {
     // ignore: prefer_collection_literals
     final cellContextMap = CellContextByFieldId();
     for (final fieldInfo in _fieldDelegate.fieldInfos) {
-      if (fieldInfo.visibility != null &&
-          fieldInfo.visibility != FieldVisibility.AlwaysHidden) {
-        cellContextMap[fieldInfo.id] = DatabaseCellContext(
-          rowMeta: rowMeta,
-          viewId: viewId,
-          fieldInfo: fieldInfo,
-        );
-      }
+      cellContextMap[fieldInfo.id] = DatabaseCellContext(
+        rowMeta: rowMeta,
+        viewId: viewId,
+        fieldInfo: fieldInfo,
+      );
     }
     return cellContextMap;
   }

frontend/appflowy_flutter/lib/plugins/database_view/calendar/application/calendar_event_editor_bloc.dart

@@ -23,12 +23,14 @@ class CalendarEventEditorBloc
       await event.when(
         initial: () {
           _startListening();
-          final cells = rowController.loadData();
+          final cells = rowController
+              .loadData()
+              .values
+              .where((cellContext) => cellContext.isVisible())
+              .toList();
           if (!isClosed) {
             add(
-              CalendarEventEditorEvent.didReceiveCellDatas(
-                cells.values.toList(),
-              ),
+              CalendarEventEditorEvent.didReceiveCellDatas(cells),
             );
           }
         },
@@ -47,8 +49,11 @@ class CalendarEventEditorBloc
     rowController.addListener(
       onRowChanged: (cells, reason) {
         if (!isClosed) {
+          final cellData = cells.values
+              .where((cellContext) => cellContext.isVisible())
+              .toList();
           add(
-            CalendarEventEditorEvent.didReceiveCellDatas(cells.values.toList()),
+            CalendarEventEditorEvent.didReceiveCellDatas(cellData),
           );
         }
       },

frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_event_editor.dart

@@ -249,8 +249,9 @@ class _PropertyCellState extends State<PropertyCell> {
           cellPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 5),
         );
       case FieldType.Checklist:
-        return SelectOptionCellStyle(
+        return ChecklistCellStyle(
           placeholder: LocaleKeys.grid_row_textPlaceholder.tr(),
+          cellPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 5),
         );
       case FieldType.Number:
         return GridNumberCellStyle(
@@ -265,7 +266,6 @@ class _PropertyCellState extends State<PropertyCell> {
           placeholder: LocaleKeys.grid_row_textPlaceholder.tr(),
           cellPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 5),
         );
-
       case FieldType.URL:
         return GridURLCellStyle(
           placeholder: LocaleKeys.grid_row_textPlaceholder.tr(),

frontend/appflowy_flutter/lib/plugins/database_view/grid/application/row/row_bloc.dart

@@ -39,6 +39,8 @@ class RowBloc extends Bloc<RowEvent, RowState> {
             _rowBackendSvc.createRowAfterRow(rowId);
           },
           didReceiveCells: (cellByFieldId, reason) async {
+            cellByFieldId
+                .removeWhere((_, cellContext) => !cellContext.isVisible());
             final cells = cellByFieldId.values
                 .map((e) => GridCellEquatable(e.fieldInfo))
                 .toList();
@@ -106,16 +108,18 @@ class RowState with _$RowState {
 
   factory RowState.initial(
     CellContextByFieldId cellByFieldId,
-  ) =>
-      RowState(
-        cellByFieldId: cellByFieldId,
-        cells: UnmodifiableListView(
-          cellByFieldId.values
-              .map((e) => GridCellEquatable(e.fieldInfo))
-              .toList(),
-        ),
-        rowSource: const RowSourece.disk(),
-      );
+  ) {
+    cellByFieldId.removeWhere((_, cellContext) => !cellContext.isVisible());
+    return RowState(
+      cellByFieldId: cellByFieldId,
+      cells: UnmodifiableListView(
+        cellByFieldId.values
+            .map((e) => GridCellEquatable(e.fieldInfo))
+            .toList(),
+      ),
+      rowSource: const RowSourece.disk(),
+    );
+  }
 }
 
 class GridCellEquatable extends Equatable {

frontend/appflowy_flutter/lib/plugins/database_view/grid/application/row/row_detail_bloc.dart

@@ -14,49 +14,73 @@ class RowDetailBloc extends Bloc<RowDetailEvent, RowDetailState> {
 
   RowDetailBloc({
     required this.rowController,
-  }) : super(RowDetailState.initial()) {
+  }) : super(RowDetailState.initial(rowController.loadData())) {
     on<RowDetailEvent>(
       (event, emit) async {
         await event.when(
           initial: () async {
             await _startListening();
-            final cells = rowController.loadData();
-            if (!isClosed) {
-              add(RowDetailEvent.didReceiveCellDatas(cells.values.toList()));
-            }
           },
-          didReceiveCellDatas: (cells) {
-            emit(state.copyWith(cells: cells));
+          didReceiveCellDatas: (visibleCells, allCells, numHiddenFields) {
+            emit(
+              state.copyWith(
+                visibleCells: visibleCells,
+                allCells: allCells,
+                numHiddenFields: numHiddenFields,
+              ),
+            );
           },
           deleteField: (fieldId) {
-            _fieldBackendService(fieldId).deleteField();
+            final fieldService = FieldBackendService(
+              viewId: rowController.viewId,
+              fieldId: fieldId,
+            );
+            fieldService.deleteField();
           },
-          showField: (fieldId) async {
+          toggleFieldVisibility: (fieldId) async {
+            final fieldInfo = state.allCells
+                .where((cellContext) => cellContext.fieldId == fieldId)
+                .first
+                .fieldInfo;
+            final fieldVisibility =
+                fieldInfo.visibility == FieldVisibility.AlwaysShown
+                    ? FieldVisibility.AlwaysHidden
+                    : FieldVisibility.AlwaysShown;
             final result =
                 await FieldSettingsBackendService(viewId: rowController.viewId)
                     .updateFieldSettings(
               fieldId: fieldId,
-              fieldVisibility: FieldVisibility.AlwaysShown,
+              fieldVisibility: fieldVisibility,
             );
             result.fold(
               (l) {},
               (err) => Log.error(err),
             );
           },
-          hideField: (fieldId) async {
-            final result =
-                await FieldSettingsBackendService(viewId: rowController.viewId)
-                    .updateFieldSettings(
-              fieldId: fieldId,
-              fieldVisibility: FieldVisibility.AlwaysHidden,
-            );
-            result.fold(
-              (l) {},
-              (err) => Log.error(err),
+          reorderField:
+              (reorderedFieldId, targetFieldId, fromIndex, toIndex) async {
+            await _reorderField(
+              reorderedFieldId,
+              targetFieldId,
+              fromIndex,
+              toIndex,
+              emit,
             );
           },
-          reorderField: (fieldId, fromIndex, toIndex) async {
-            await _reorderField(fieldId, fromIndex, toIndex, emit);
+          toggleHiddenFieldVisibility: () {
+            final showHiddenFields = !state.showHiddenFields;
+            final visibleCells = List<DatabaseCellContext>.from(state.allCells);
+            visibleCells.retainWhere(
+              (cellContext) =>
+                  !cellContext.fieldInfo.isPrimary &&
+                  cellContext.isVisible(showHiddenFields: showHiddenFields),
+            );
+            emit(
+              state.copyWith(
+                showHiddenFields: showHiddenFields,
+                visibleCells: visibleCells,
+              ),
+            );
           },
         );
       },
@@ -71,36 +95,60 @@ class RowDetailBloc extends Bloc<RowDetailEvent, RowDetailState> {
 
   Future<void> _startListening() async {
     rowController.addListener(
-      onRowChanged: (cells, reason) {
-        if (!isClosed) {
-          add(RowDetailEvent.didReceiveCellDatas(cells.values.toList()));
+      onRowChanged: (cellMap, reason) {
+        if (isClosed) {
+          return;
         }
+        final allCells = cellMap.values.toList();
+        int numHiddenFields = 0;
+        final visibleCells = <DatabaseCellContext>[];
+        for (final cell in allCells) {
+          final isPrimary = cell.fieldInfo.isPrimary;
+
+          if (cell.isVisible(showHiddenFields: state.showHiddenFields) &&
+              !isPrimary) {
+            visibleCells.add(cell);
+          }
+
+          if (!cell.isVisible() && !isPrimary) {
+            numHiddenFields++;
+          }
+        }
+
+        add(
+          RowDetailEvent.didReceiveCellDatas(
+            visibleCells,
+            allCells,
+            numHiddenFields,
+          ),
+        );
       },
     );
   }
 
-  FieldBackendService _fieldBackendService(String fieldId) {
-    return FieldBackendService(
-      viewId: rowController.viewId,
-      fieldId: fieldId,
-    );
-  }
-
   Future<void> _reorderField(
-    String fieldId,
+    String reorderedFieldId,
+    String targetFieldId,
     int fromIndex,
     int toIndex,
     Emitter<RowDetailState> emit,
   ) async {
-    final cells = List<DatabaseCellContext>.from(state.cells);
+    final cells = List<DatabaseCellContext>.from(state.visibleCells);
     cells.insert(toIndex, cells.removeAt(fromIndex));
-    emit(state.copyWith(cells: cells));
+    emit(state.copyWith(visibleCells: cells));
 
-    final fieldService =
-        FieldBackendService(viewId: rowController.viewId, fieldId: fieldId);
+    final fromIndexInAllFields =
+        state.allCells.indexWhere((cell) => cell.fieldId == reorderedFieldId);
+    final toIndexInAllFields =
+        state.allCells.indexWhere((cell) => cell.fieldId == targetFieldId);
+
+    final fieldService = FieldBackendService(
+      viewId: rowController.viewId,
+      fieldId: reorderedFieldId,
+    );
     final result = await fieldService.moveField(
-      fromIndex,
-      toIndex,
+      fromIndexInAllFields,
+      toIndexInAllFields,
     );
     result.fold((l) {}, (err) => Log.error(err));
   }
@@ -110,25 +158,54 @@ class RowDetailBloc extends Bloc<RowDetailEvent, RowDetailState> {
 class RowDetailEvent with _$RowDetailEvent {
   const factory RowDetailEvent.initial() = _Initial;
   const factory RowDetailEvent.deleteField(String fieldId) = _DeleteField;
-  const factory RowDetailEvent.showField(String fieldId) = _ShowField;
-  const factory RowDetailEvent.hideField(String fieldId) = _HideField;
+  const factory RowDetailEvent.toggleFieldVisibility(String fieldId) =
+      _ToggleFieldVisibility;
   const factory RowDetailEvent.reorderField(
-    String fieldId,
+    String reorderFieldID,
+    String targetFieldID,
     int fromIndex,
     int toIndex,
   ) = _ReorderField;
+  const factory RowDetailEvent.toggleHiddenFieldVisibility() =
+      _ToggleHiddenFieldVisibility;
   const factory RowDetailEvent.didReceiveCellDatas(
-    List<DatabaseCellContext> gridCells,
+    List<DatabaseCellContext> visibleCells,
+    List<DatabaseCellContext> allCells,
+    int numHiddenFields,
   ) = _DidReceiveCellDatas;
 }
 
 @freezed
 class RowDetailState with _$RowDetailState {
   const factory RowDetailState({
-    required List<DatabaseCellContext> cells,
+    required List<DatabaseCellContext> visibleCells,
+    required List<DatabaseCellContext> allCells,
+    required bool showHiddenFields,
+    required int numHiddenFields,
   }) = _RowDetailState;
 
-  factory RowDetailState.initial() => RowDetailState(
-        cells: List.empty(),
-      );
+  factory RowDetailState.initial(CellContextByFieldId cellByFieldId) {
+    final allCells = cellByFieldId.values.toList();
+    int numHiddenFields = 0;
+    final visibleCells = <DatabaseCellContext>[];
+    for (final cell in allCells) {
+      final isVisible = cell.isVisible();
+      final isPrimary = cell.fieldInfo.isPrimary;
+
+      if (isVisible && !isPrimary) {
+        visibleCells.add(cell);
+      }
+
+      if (!isVisible && !isPrimary) {
+        numHiddenFields++;
+      }
+    }
+
+    return RowDetailState(
+      visibleCells: visibleCells,
+      allCells: allCells,
+      showHiddenFields: false,
+      numHiddenFields: numHiddenFields,
+    );
+  }
 }

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/footer/grid_footer.dart

@@ -40,7 +40,7 @@ class GridRowBottomBar extends StatelessWidget {
     return Container(
       padding: GridSize.footerContentInsets,
       height: GridSize.footerHeight,
-      margin: const EdgeInsets.only(bottom: 200),
+      margin: const EdgeInsets.only(bottom: 200, top: 8),
       child: const GridAddRowButton(),
     );
   }

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_cell.dart

@@ -38,7 +38,7 @@ class _GridFieldCellState extends State<GridFieldCell> {
   Widget build(BuildContext context) {
     return BlocProvider(
       create: (context) {
-        return FieldCellBloc(cellContext: widget.cellContext);
+        return FieldCellBloc(fieldContext: widget.cellContext);
       },
       child: BlocBuilder<FieldCellBloc, FieldCellState>(
         builder: (context, state) {
@@ -54,7 +54,7 @@ class _GridFieldCellState extends State<GridFieldCell> {
               );
             },
             child: FieldCellButton(
-              field: widget.cellContext.field,
+              field: widget.cellContext.fieldInfo.field,
               onTap: () => popoverController.show(),
             ),
           );

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_cell_action_sheet.dart

@@ -34,14 +34,14 @@ class _GridFieldCellActionSheetState extends State<GridFieldCellActionSheet> {
   @override
   Widget build(BuildContext context) {
     if (_showFieldEditor) {
-      final field = widget.cellContext.field;
       return SizedBox(
         width: 400,
         child: FieldEditor(
           viewId: widget.cellContext.viewId,
+          fieldInfo: widget.cellContext.fieldInfo,
           typeOptionLoader: FieldTypeOptionLoader(
             viewId: widget.cellContext.viewId,
-            field: field,
+            field: widget.cellContext.fieldInfo.field,
           ),
         ),
       );
@@ -96,8 +96,8 @@ class _EditFieldButton extends StatelessWidget {
 }
 
 class _FieldOperationList extends StatelessWidget {
-  final FieldContext fieldInfo;
-  const _FieldOperationList(this.fieldInfo, {Key? key}) : super(key: key);
+  final FieldContext fieldContext;
+  const _FieldOperationList(this.fieldContext, {Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -128,7 +128,7 @@ class _FieldOperationList extends StatelessWidget {
     bool enable = true;
 
     // If the field is primary, delete and duplicate are disabled.
-    if (fieldInfo.field.isPrimary) {
+    if (fieldContext.fieldInfo.isPrimary) {
       switch (action) {
         case FieldAction.hide:
           break;
@@ -145,7 +145,7 @@ class _FieldOperationList extends StatelessWidget {
       child: SizedBox(
         height: GridSize.popoverItemHeight,
         child: FieldActionCell(
-          fieldInfo: fieldInfo,
+          fieldInfo: fieldContext,
           action: action,
           enable: enable,
         ),
@@ -217,7 +217,7 @@ extension _FieldActionExtension on FieldAction {
     }
   }
 
-  void run(BuildContext context, FieldContext fieldInfo) {
+  void run(BuildContext context, FieldContext fieldContext) {
     switch (this) {
       case FieldAction.hide:
         context
@@ -228,8 +228,8 @@ extension _FieldActionExtension on FieldAction {
         PopoverContainer.of(context).close();
 
         FieldBackendService(
-          viewId: fieldInfo.viewId,
-          fieldId: fieldInfo.field.id,
+          viewId: fieldContext.viewId,
+          fieldId: fieldContext.fieldInfo.id,
         ).duplicateField();
 
         break;
@@ -240,8 +240,8 @@ extension _FieldActionExtension on FieldAction {
           title: LocaleKeys.grid_field_deleteFieldPromptMessage.tr(),
           confirm: () {
             FieldBackendService(
-              viewId: fieldInfo.viewId,
-              fieldId: fieldInfo.field.id,
+              viewId: fieldContext.viewId,
+              fieldId: fieldContext.fieldInfo.field.id,
             ).deleteField();
           },
         ).show(context);

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_editor.dart

@@ -1,6 +1,8 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/plugins/database_view/application/field/field_editor_bloc.dart';
+import 'package:appflowy/plugins/database_view/application/field/field_info.dart';
 import 'package:appflowy/plugins/database_view/application/field/type_option/type_option_context.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/field_settings_entities.pb.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 
@@ -19,17 +21,19 @@ class FieldEditor extends StatefulWidget {
   final String viewId;
   final bool isGroupingField;
   final Function(String)? onDeleted;
-  final Function(String)? onHidden;
+  final Function(String)? onToggleVisibility;
   final FieldTypeOptionLoader typeOptionLoader;
+  final FieldInfo? fieldInfo;
 
   const FieldEditor({
     required this.viewId,
     required this.typeOptionLoader,
+    this.fieldInfo,
     this.isGroupingField = false,
     this.onDeleted,
-    this.onHidden,
-    Key? key,
-  }) : super(key: key);
+    this.onToggleVisibility,
+    super.key,
+  });
 
   @override
   State<StatefulWidget> createState() => _FieldEditorState();
@@ -53,14 +57,14 @@ class _FieldEditorState extends State<FieldEditor> {
   @override
   Widget build(BuildContext context) {
     final bool requireSpace = widget.onDeleted != null ||
-        widget.onHidden != null ||
+        widget.onToggleVisibility != null ||
         !widget.typeOptionLoader.field.isPrimary;
 
     final List<Widget> children = [
       FieldNameTextField(popoverMutex: popoverMutex),
       if (requireSpace) const VSpace(4),
       if (widget.onDeleted != null) _addDeleteFieldButton(),
-      if (widget.onHidden != null) _addHideFieldButton(),
+      if (widget.onToggleVisibility != null) _addHideFieldButton(),
       if (!widget.typeOptionLoader.field.isPrimary)
         FieldTypeOptionCell(popoverMutex: popoverMutex),
     ];
@@ -88,7 +92,7 @@ class _FieldEditorState extends State<FieldEditor> {
       builder: (context, state) {
         return Padding(
           padding: const EdgeInsets.symmetric(horizontal: 12.0),
-          child: _DeleteFieldButton(
+          child: DeleteFieldButton(
             popoverMutex: popoverMutex,
             onDeleted: () {
               state.field.fold(
@@ -107,12 +111,14 @@ class _FieldEditorState extends State<FieldEditor> {
       builder: (context, state) {
         return Padding(
           padding: const EdgeInsets.symmetric(horizontal: 12.0),
-          child: HideFieldButton(
+          child: FieldVisibilityToggleButton(
+            isFieldHidden:
+                widget.fieldInfo!.visibility == FieldVisibility.AlwaysHidden,
             popoverMutex: popoverMutex,
-            onHidden: () {
+            onTap: () {
               state.field.fold(
                 () => Log.error('Can not hidden the field'),
-                (field) => widget.onHidden?.call(field.id),
+                (field) => widget.onToggleVisibility?.call(field.id),
               );
             },
           ),
@@ -218,15 +224,16 @@ class _FieldNameTextFieldState extends State<FieldNameTextField> {
   }
 }
 
-class _DeleteFieldButton extends StatelessWidget {
+@visibleForTesting
+class DeleteFieldButton extends StatelessWidget {
   final PopoverMutex popoverMutex;
   final VoidCallback? onDeleted;
 
-  const _DeleteFieldButton({
+  const DeleteFieldButton({
     required this.popoverMutex,
     required this.onDeleted,
-    Key? key,
-  }) : super(key: key);
+    super.key,
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -253,15 +260,17 @@ class _DeleteFieldButton extends StatelessWidget {
 }
 
 @visibleForTesting
-class HideFieldButton extends StatelessWidget {
+class FieldVisibilityToggleButton extends StatelessWidget {
+  final bool isFieldHidden;
   final PopoverMutex popoverMutex;
-  final VoidCallback? onHidden;
+  final VoidCallback? onTap;
 
-  const HideFieldButton({
+  const FieldVisibilityToggleButton({
+    required this.isFieldHidden,
     required this.popoverMutex,
-    required this.onHidden,
-    Key? key,
-  }) : super(key: key);
+    required this.onTap,
+    super.key,
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -270,10 +279,13 @@ class HideFieldButton extends StatelessWidget {
       builder: (context, state) {
         final Widget button = FlowyButton(
           text: FlowyText.medium(
-            LocaleKeys.grid_field_hide.tr(),
+            isFieldHidden
+                ? LocaleKeys.grid_field_show.tr()
+                : LocaleKeys.grid_field_hide.tr(),
           ),
-          leftIcon: const FlowySvg(FlowySvgs.hide_s),
-          onTap: () => onHidden?.call(),
+          leftIcon:
+              FlowySvg(isFieldHidden ? FlowySvgs.show_m : FlowySvgs.hide_m),
+          onTap: onTap,
           onHover: (_) => popoverMutex.close(),
         );
         return SizedBox(height: GridSize.popoverItemHeight, child: button);

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/grid_header.dart

@@ -98,12 +98,12 @@ class _GridHeaderState extends State<_GridHeader> {
             .map(
               (field) => FieldContext(
                 viewId: widget.viewId,
-                field: field.field,
+                fieldInfo: field,
               ),
             )
             .map(
               (ctx) => GridFieldCell(
-                key: _getKeyById(ctx.field.id),
+                key: _getKeyById(ctx.fieldInfo.id),
                 cellContext: ctx,
               ),
             )
@@ -136,7 +136,7 @@ class _GridHeaderState extends State<_GridHeader> {
     int newIndex,
   ) {
     if (cells.length > oldIndex) {
-      final field = cells[oldIndex].cellContext.field;
+      final field = cells[oldIndex].cellContext.fieldInfo.field;
       context
           .read<GridHeaderBloc>()
           .add(GridHeaderEvent.moveField(field, oldIndex, newIndex));

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/number.dart

@@ -73,6 +73,7 @@ class NumberTypeOptionWidget extends TypeOptionWidget {
             height: GridSize.popoverItemHeight,
             alignment: Alignment.centerLeft,
             child: FlowyText.medium(
+              color: Theme.of(context).colorScheme.outline,
               LocaleKeys.grid_field_numberFormat.tr(),
             ),
           );

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option_editor.dart

@@ -224,7 +224,7 @@ class _SelectOptionColorCell extends StatelessWidget {
 
     final colorIcon = SizedBox.square(
       dimension: 16,
-      child: Container(
+      child: DecoratedBox(
         decoration: BoxDecoration(
           color: color.toColor(context),
           shape: BoxShape.circle,

frontend/appflowy_flutter/lib/plugins/database_view/widgets/card/card_bloc.dart

@@ -93,6 +93,8 @@ List<DatabaseCellContext> _makeCells(
   CellContextByFieldId originalCellMap,
 ) {
   final List<DatabaseCellContext> cells = [];
+  originalCellMap
+      .removeWhere((fieldId, cellContext) => !cellContext.isVisible());
   for (final entry in originalCellMap.entries) {
     // Filter out the cell if it's fieldId equal to the groupFieldId
     if (groupFieldId != null) {

frontend/appflowy_flutter/lib/plugins/database_view/widgets/field/grid_property.dart

@@ -151,6 +151,7 @@ class _GridPropertyCellState extends State<GridPropertyCell> {
       popupBuilder: (BuildContext context) {
         return FieldEditor(
           viewId: widget.viewId,
+          fieldInfo: widget.fieldInfo,
           typeOptionLoader: FieldTypeOptionLoader(
             viewId: widget.viewId,
             field: widget.fieldInfo.field,

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/accessory/cell_accessory.dart

@@ -3,6 +3,7 @@ import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/theme_extension.dart';
 
 import 'package:flowy_infra_ui/style_widget/hover.dart';
+import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
 import 'package:flutter/material.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
@@ -66,7 +67,7 @@ class _PrimaryCellAccessoryState extends State<PrimaryCellAccessory>
     with GridCellAccessoryState {
   @override
   Widget build(BuildContext context) {
-    return Tooltip(
+    return FlowyTooltip.delayed(
       message: LocaleKeys.tooltip_openAsPage.tr(),
       child: SizedBox(
         width: 26,

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/date_cell/date_cal_bloc.dart

@@ -86,15 +86,15 @@ class DateCellCalendarBloc
                   : (start, state.startDay!);
               emit(state.copyWith(startDay: null, endDay: null));
               await _updateDateData(
-                date: newStart.toLocal().date,
-                endDate: newEnd.toLocal().date,
+                date: newStart.date,
+                endDate: newEnd.date,
               );
             } else if (end == null) {
               emit(state.copyWith(startDay: start, endDay: null));
             } else {
               await _updateDateData(
-                date: start!.toLocal().date,
-                endDate: end.toLocal().date,
+                date: start!.date,
+                endDate: end.date,
               );
             }
           },

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/date_cell/date_editor.dart

@@ -3,17 +3,16 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database_view/application/cell/cell_controller_builder.dart';
 import 'package:appflowy/plugins/database_view/application/field/type_option/type_option_context.dart';
 import 'package:appflowy/plugins/database_view/grid/presentation/widgets/header/type_option/timestamp.dart';
+import 'package:appflowy/workspace/presentation/widgets/date_picker/appflowy_calendar.dart';
 import 'package:appflowy/workspace/presentation/widgets/toggle/toggle.dart';
 import 'package:appflowy/workspace/presentation/widgets/toggle/toggle_style.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/date_entities.pb.dart';
-import 'package:appflowy_backend/protobuf/flowy-error/errors.pbserver.dart';
+import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:dartz/dartz.dart' show Either;
 import 'package:easy_localization/easy_localization.dart';
-
 import 'package:flowy_infra/theme_extension.dart';
-import 'package:flowy_infra/time/duration.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -24,9 +23,6 @@ import '../../../../grid/presentation/widgets/common/type_option_separator.dart'
 import '../../../../grid/presentation/widgets/header/type_option/date.dart';
 import 'date_cal_bloc.dart';
 
-final kFirstDay = DateTime.utc(1970, 1, 1);
-final kLastDay = DateTime.utc(2100, 1, 1);
-
 class DateCellEditor extends StatefulWidget {
   final VoidCallback onDismissed;
   final DateCellController cellController;
@@ -51,9 +47,9 @@ class _DateCellEditor extends State<DateCellEditor> {
       builder: (BuildContext context, snapshot) {
         if (snapshot.hasData) {
           return _buildWidget(snapshot);
-        } else {
-          return const SizedBox.shrink();
         }
+
+        return const SizedBox.shrink();
       },
     );
   }
@@ -81,22 +77,14 @@ class _CellCalendarWidget extends StatefulWidget {
   const _CellCalendarWidget({
     required this.cellContext,
     required this.dateTypeOptionPB,
-    Key? key,
-  }) : super(key: key);
+  });
 
   @override
   State<_CellCalendarWidget> createState() => _CellCalendarWidgetState();
 }
 
 class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
-  late PopoverMutex popoverMutex;
-
-  @override
-  void initState() {
-    popoverMutex = PopoverMutex();
-
-    super.initState();
-  }
+  final PopoverMutex popoverMutex = PopoverMutex();
 
   @override
   Widget build(BuildContext context) {
@@ -293,7 +281,7 @@ class _DatePickerState extends State<DatePicker> {
                 state.isRange ? false : isSameDay(state.dateTime, day),
             onDaySelected: (selectedDay, focusedDay) {
               context.read<DateCellCalendarBloc>().add(
-                    DateCellCalendarEvent.selectDay(selectedDay.toLocal().date),
+                    DateCellCalendarEvent.selectDay(selectedDay),
                   );
             },
             onRangeSelected: (start, end, focusedDay) {
@@ -387,8 +375,7 @@ class _TimeTextField extends StatefulWidget {
     required this.timeStr,
     required this.popoverMutex,
     required this.isEndTime,
-    Key? key,
-  }) : super(key: key);
+  });
 
   @override
   State<_TimeTextField> createState() => _TimeTextFieldState();

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/text_cell/text_cell.dart

@@ -24,7 +24,7 @@ class GridTextCellStyle extends GridCellStyle {
     this.autofocus = false,
     this.showEmoji = true,
     this.emojiFontSize = 16,
-    this.emojiHPadding = 0,
+    this.emojiHPadding = 4,
     this.useRoundedBorder = false,
   });
 }

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/url_cell/url_cell.dart

@@ -144,8 +144,10 @@ class _GridURLCellState extends GridEditableTextCell<GridURLCell> {
           _controller.text = state.content;
         },
         builder: (context, state) {
+          final style = widget.cellStyle?.textStyle ??
+              Theme.of(context).textTheme.bodyMedium!;
           widget._cellDataNotifier.value = state.content;
-          final urlEditor = Padding(
+          return Padding(
             padding: EdgeInsets.only(
               left: GridSize.cellContentInsets.left,
               right: GridSize.cellContentInsets.right,
@@ -154,9 +156,7 @@ class _GridURLCellState extends GridEditableTextCell<GridURLCell> {
               controller: _controller,
               focusNode: focusNode,
               maxLines: null,
-              style: (widget.cellStyle?.textStyle ??
-                      Theme.of(context).textTheme.bodyMedium)
-                  ?.copyWith(
+              style: style.copyWith(
                 color: Theme.of(context).colorScheme.primary,
                 decoration: TextDecoration.underline,
               ),
@@ -168,11 +168,11 @@ class _GridURLCellState extends GridEditableTextCell<GridURLCell> {
                 ),
                 border: InputBorder.none,
                 hintText: widget.cellStyle?.placeholder,
+                hintStyle: style.copyWith(color: Theme.of(context).hintColor),
                 isDense: true,
               ),
             ),
           );
-          return urlEditor;
         },
       ),
     );

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_banner.dart

@@ -5,8 +5,7 @@ import 'package:appflowy/plugins/database_view/application/field/field_info.dart
 import 'package:appflowy/plugins/database_view/application/row/row_banner_bloc.dart';
 import 'package:appflowy/plugins/database_view/application/row/row_controller.dart';
 import 'package:appflowy/plugins/database_view/widgets/row/row_action.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/emoji_picker/emoji_picker.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
+import 'package:appflowy/workspace/presentation/settings/widgets/emoji_picker/emoji_picker.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_property.dart

@@ -1,3 +1,5 @@
+import 'dart:io';
+
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database_view/application/cell/cell_service.dart';
@@ -35,9 +37,8 @@ class RowPropertyList extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return BlocBuilder<RowDetailBloc, RowDetailState>(
-      buildWhen: (previous, current) => previous.cells != current.cells,
       builder: (context, state) {
-        final children = state.cells
+        final children = state.visibleCells
             .where((element) => !element.fieldInfo.field.isPrimary)
             .mapIndexed(
               (index, cell) => _PropertyCell(
@@ -48,18 +49,26 @@ class RowPropertyList extends StatelessWidget {
               ),
             )
             .toList();
+
         return ReorderableListView(
           shrinkWrap: true,
           physics: const NeverScrollableScrollPhysics(),
           onReorder: (oldIndex, newIndex) {
-            final reorderedField = children[oldIndex].cellContext.fieldId;
-            _reorderField(
-              context,
-              state.cells,
-              reorderedField,
-              oldIndex,
-              newIndex,
-            );
+            // when reorderiing downwards, need to update index
+            if (oldIndex < newIndex) {
+              newIndex--;
+            }
+            final reorderedFieldId = children[oldIndex].cellContext.fieldId;
+            final targetFieldId = children[newIndex].cellContext.fieldId;
+
+            context.read<RowDetailBloc>().add(
+                  RowDetailEvent.reorderField(
+                    reorderedFieldId,
+                    targetFieldId,
+                    oldIndex,
+                    newIndex,
+                  ),
+                );
           },
           buildDefaultDragHandles: false,
           proxyDecorator: (child, index, animation) => Material(
@@ -67,47 +76,37 @@ class RowPropertyList extends StatelessWidget {
             child: Stack(
               children: [
                 child,
-                const MouseRegion(cursor: SystemMouseCursors.grabbing),
+                MouseRegion(
+                  cursor: Platform.isWindows
+                      ? SystemMouseCursors.click
+                      : SystemMouseCursors.grabbing,
+                  child: const SizedBox(
+                    width: 16,
+                    height: 30,
+                    child: FlowySvg(FlowySvgs.drag_element_s),
+                  ),
+                ),
               ],
             ),
           ),
           footer: Padding(
             padding: const EdgeInsets.only(left: 20),
-            child: CreateRowFieldButton(viewId: viewId),
+            child: Column(
+              children: [
+                if (context.read<RowDetailBloc>().state.numHiddenFields != 0)
+                  const Padding(
+                    padding: EdgeInsets.only(bottom: 4.0),
+                    child: ToggleHiddenFieldsVisibilityButton(),
+                  ),
+                CreateRowFieldButton(viewId: viewId),
+              ],
+            ),
           ),
           children: children,
         );
       },
     );
   }
-
-  void _reorderField(
-    BuildContext context,
-    List<DatabaseCellContext> cells,
-    String reorderedFieldId,
-    int oldIndex,
-    int newIndex,
-  ) {
-    // when reorderiing downwards, need to update index
-    if (oldIndex < newIndex) {
-      newIndex--;
-    }
-
-    // also update index when the index is after the index of the primary field
-    // in the original list of DatabaseCellContext's
-    final primaryFieldIndex =
-        cells.indexWhere((element) => element.fieldInfo.isPrimary);
-    if (oldIndex >= primaryFieldIndex) {
-      oldIndex++;
-    }
-    if (newIndex >= primaryFieldIndex) {
-      newIndex++;
-    }
-
-    context.read<RowDetailBloc>().add(
-          RowDetailEvent.reorderField(reorderedFieldId, oldIndex, newIndex),
-        );
-  }
 }
 
 class _PropertyCell extends StatefulWidget {
@@ -135,7 +134,9 @@ class _PropertyCellState extends State<_PropertyCell> {
     final cell = widget.cellBuilder.build(widget.cellContext, style: style);
 
     final dragThumb = MouseRegion(
-      cursor: SystemMouseCursors.grab,
+      cursor: Platform.isWindows
+          ? SystemMouseCursors.click
+          : SystemMouseCursors.grab,
       child: SizedBox(
         width: 16,
         height: 30,
@@ -195,14 +196,17 @@ class _PropertyCellState extends State<_PropertyCell> {
   Widget buildFieldEditor() {
     return FieldEditor(
       viewId: widget.cellContext.viewId,
+      fieldInfo: widget.cellContext.fieldInfo,
       isGroupingField: widget.cellContext.fieldInfo.isGroupField,
       typeOptionLoader: FieldTypeOptionLoader(
         viewId: widget.cellContext.viewId,
         field: widget.cellContext.fieldInfo.field,
       ),
-      onHidden: (fieldId) {
+      onToggleVisibility: (fieldId) {
         _popoverController.close();
-        context.read<RowDetailBloc>().add(RowDetailEvent.hideField(fieldId));
+        context
+            .read<RowDetailBloc>()
+            .add(RowDetailEvent.toggleFieldVisibility(fieldId));
       },
       onDeleted: (fieldId) {
         _popoverController.close();
@@ -275,6 +279,43 @@ GridCellStyle? _customCellStyle(FieldType fieldType) {
   throw UnimplementedError;
 }
 
+class ToggleHiddenFieldsVisibilityButton extends StatelessWidget {
+  const ToggleHiddenFieldsVisibilityButton({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<RowDetailBloc, RowDetailState>(
+      builder: (context, state) {
+        final text = switch (state.showHiddenFields) {
+          false => LocaleKeys.grid_rowPage_showHiddenFields
+              .plural(state.numHiddenFields),
+          true => LocaleKeys.grid_rowPage_hideHiddenFields
+              .plural(state.numHiddenFields),
+        };
+
+        return SizedBox(
+          height: 30,
+          child: FlowyButton(
+            text: FlowyText.medium(text, color: Theme.of(context).hintColor),
+            hoverColor: AFThemeExtension.of(context).lightGreyHover,
+            leftIcon: RotatedBox(
+              quarterTurns: state.showHiddenFields ? 1 : 3,
+              child: FlowySvg(
+                FlowySvgs.arrow_left_s,
+                color: Theme.of(context).hintColor,
+              ),
+            ),
+            margin: const EdgeInsets.symmetric(horizontal: 4, vertical: 6),
+            onTap: () => context.read<RowDetailBloc>().add(
+                  const RowDetailEvent.toggleHiddenFieldVisibility(),
+                ),
+          ),
+        );
+      },
+    );
+  }
+}
+
 class CreateRowFieldButton extends StatefulWidget {
   final String viewId;
 

frontend/appflowy_flutter/lib/plugins/document/document_page.dart

@@ -10,6 +10,7 @@ import 'package:appflowy/plugins/document/presentation/editor_style.dart';
 import 'package:appflowy/plugins/document/presentation/export_page_widget.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/util/base64_string.dart';
+import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-document2/protobuf.dart'
     hide DocumentEvent;
@@ -17,7 +18,6 @@ import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
 import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/file_picker/file_picker_service.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/widget/error_page.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -145,18 +145,8 @@ class _DocumentPageState extends State<DocumentPage> {
     const encoder = JsonEncoder.withIndent('  ');
     final json = encoder.convert(data.toProto3Json());
     await File(path).writeAsString(json.base64.base64);
-
-    _showMessage('Export success to $path');
-  }
-
-  void _showMessage(String message) {
-    if (!mounted) {
-      return;
+    if (mounted) {
+      showSnackBarMessage(context, 'Export success to $path');
     }
-    ScaffoldMessenger.of(context).showSnackBar(
-      SnackBar(
-        content: FlowyText(message),
-      ),
-    );
   }
 }

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

@@ -22,7 +22,7 @@ class DocumentBanner extends StatelessWidget {
       constraints: const BoxConstraints(minHeight: 60),
       child: Container(
         width: double.infinity,
-        color: colorScheme.error,
+        color: colorScheme.surfaceVariant,
         child: FittedBox(
           alignment: Alignment.center,
           fit: BoxFit.scaleDown,
@@ -30,7 +30,7 @@ class DocumentBanner extends StatelessWidget {
             children: [
               FlowyText.medium(
                 LocaleKeys.deletePagePrompt_text.tr(),
-                color: colorScheme.onError,
+                color: colorScheme.tertiary,
                 fontSize: 14,
               ),
               const HSpace(20),
@@ -39,13 +39,13 @@ class DocumentBanner extends StatelessWidget {
                 minHeight: 40,
                 contentPadding: EdgeInsets.zero,
                 bgColor: Colors.transparent,
-                highlightColor: Theme.of(context).colorScheme.primaryContainer,
-                outlineColor: colorScheme.onError,
+                highlightColor: Theme.of(context).colorScheme.onErrorContainer,
+                outlineColor: colorScheme.tertiaryContainer,
                 borderRadius: Corners.s8Border,
                 onPressed: onRestore,
                 child: FlowyText.medium(
                   LocaleKeys.deletePagePrompt_restore.tr(),
-                  color: colorScheme.onError,
+                  color: colorScheme.tertiary,
                   fontSize: 13,
                 ),
               ),
@@ -55,13 +55,13 @@ class DocumentBanner extends StatelessWidget {
                 minHeight: 40,
                 contentPadding: EdgeInsets.zero,
                 bgColor: Colors.transparent,
-                highlightColor: Theme.of(context).colorScheme.primary,
-                outlineColor: colorScheme.onError,
+                highlightColor: Theme.of(context).colorScheme.error,
+                outlineColor: colorScheme.tertiaryContainer,
                 borderRadius: Corners.s8Border,
                 onPressed: onDelete,
                 child: FlowyText.medium(
                   LocaleKeys.deletePagePrompt_deletePermanent.tr(),
-                  color: colorScheme.onError,
+                  color: colorScheme.tertiary,
                   fontSize: 13,
                 ),
               ),

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

@@ -1,9 +1,15 @@
 import 'package:appflowy/plugins/document/application/doc_bloc.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/inline_page/inline_page_reference.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/custom_image_block_component.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy/plugins/document/presentation/editor_style.dart';
+import 'package:appflowy/plugins/inline_actions/handlers/date_reference.dart';
+import 'package:appflowy/plugins/inline_actions/handlers/inline_page_reference.dart';
+import 'package:appflowy/plugins/inline_actions/handlers/reminder_reference.dart';
+import 'package:appflowy/plugins/inline_actions/inline_actions_command.dart';
+import 'package:appflowy/plugins/inline_actions/inline_actions_service.dart';
 import 'package:appflowy/workspace/application/appearance.dart';
 import 'package:appflowy/workspace/application/settings/shortcuts/settings_shortcuts_service.dart';
+import 'package:appflowy/workspace/presentation/settings/widgets/emoji_picker/emoji_picker.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:collection/collection.dart';
 import 'package:flowy_infra/theme_extension.dart';
@@ -11,6 +17,19 @@ import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
+final List<CommandShortcutEvent> commandShortcutEvents = [
+  toggleToggleListCommand,
+  ...codeBlockCommands,
+  customCopyCommand,
+  customPasteCommand,
+  customCutCommand,
+  ...standardCommandShortcutEvents,
+];
+
+final List<CommandShortcutEvent> defaultCommandShortcutEvents = [
+  ...commandShortcutEvents.map((e) => e.copyWith()).toList(),
+];
+
 /// Wrapper for the appflowy editor.
 class AppFlowyEditorPage extends StatefulWidget {
   const AppFlowyEditorPage({
@@ -34,27 +53,28 @@ class AppFlowyEditorPage extends StatefulWidget {
   State<AppFlowyEditorPage> createState() => _AppFlowyEditorPageState();
 }
 
-final List<CommandShortcutEvent> commandShortcutEvents = [
-  ...codeBlockCommands,
-  ...standardCommandShortcutEvents,
-];
-
-final List<CommandShortcutEvent> defaultCommandShortcutEvents = [
-  ...commandShortcutEvents.map((e) => e.copyWith()).toList(),
-];
-
 class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
   late final ScrollController effectiveScrollController;
 
-  final inlinePageReferenceService = InlinePageReferenceService();
+  late final InlineActionsService inlineActionsService = InlineActionsService(
+    context: context,
+    handlers: [
+      InlinePageReferenceService(
+        currentViewId: documentBloc.view.id,
+      ).inlinePageReferenceDelegate,
+      DateReferenceService(context).dateReferenceDelegate,
+      ReminderReferenceService(context).reminderReferenceDelegate,
+    ],
+  );
 
-  final List<CommandShortcutEvent> commandShortcutEvents = [
+  late final List<CommandShortcutEvent> commandShortcutEvents = [
     toggleToggleListCommand,
     ...codeBlockCommands,
     customCopyCommand,
     customPasteCommand,
     customCutCommand,
     ...standardCommandShortcutEvents,
+    ..._buildFindAndReplaceCommands(),
   ];
 
   final List<ToolbarItem> toolbarItems = [
@@ -84,9 +104,6 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
       _customAppFlowyBlockComponentBuilders();
 
   List<CharacterShortcutEvent> get characterShortcutEvents => [
-        // inline page reference list
-        ...inlinePageReferenceShortcuts,
-
         // code block
         ...codeBlockCharacterEvents,
 
@@ -104,19 +121,15 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
           ..removeWhere(
             (element) => element == slashCommand,
           ), // remove the default slash command.
-      ];
 
-  late final inlinePageReferenceShortcuts = [
-    inlinePageReferenceService.customPageLinkMenu(
-      character: '@',
-      style: styleCustomizer.selectionMenuStyleBuilder(),
-    ),
-    // uncomment this to enable the inline page reference list
-    // inlinePageReferenceService.customPageLinkMenu(
-    //   character: '+',
-    //   style: styleCustomizer.selectionMenuStyleBuilder(),
-    // ),
-  ];
+        /// Inline Actions
+        /// - Reminder
+        /// - Inline-page reference
+        inlineActionsCommand(
+          inlineActionsService,
+          style: styleCustomizer.inlineActionsMenuStyleBuilder(),
+        ),
+      ];
 
   late final showSlashMenu = customSlashCommand(
     slashMenuItems,
@@ -138,6 +151,9 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
     effectiveScrollController = widget.scrollController ?? ScrollController();
 
     // keep the previous font style when typing new text.
+    supportSlashMenuNodeWhiteList.addAll([
+      ToggleListBlockKeys.type,
+    ]);
     AppFlowyRichTextKeys.supportSliced.add(AppFlowyRichTextKeys.fontFamily);
   }
 
@@ -146,6 +162,9 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
     if (widget.scrollController == null) {
       effectiveScrollController.dispose();
     }
+    inlineActionsService.dispose();
+
+    widget.editorState.dispose();
 
     super.dispose();
   }
@@ -158,7 +177,7 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
     final isRTL =
         context.read<AppearanceSettingsCubit>().state.layoutDirection ==
             LayoutDirection.rtlLayout;
-    final layoutDirection = isRTL ? TextDirection.rtl : TextDirection.ltr;
+    final textDirection = isRTL ? TextDirection.rtl : TextDirection.ltr;
 
     _setRTLToolbarItems(isRTL);
 
@@ -195,8 +214,9 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
         items: toolbarItems,
         editorState: widget.editorState,
         editorScrollController: editorScrollController,
+        textDirection: textDirection,
         child: Directionality(
-          textDirection: layoutDirection,
+          textDirection: textDirection,
           child: editor,
         ),
       ),
@@ -217,6 +237,7 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
     final configuration = BlockComponentConfiguration(
       padding: (_) => const EdgeInsets.symmetric(vertical: 5.0),
     );
+
     final customBlockComponentBuilderMap = {
       PageBlockKeys.type: PageBlockComponentBuilder(),
       ParagraphBlockKeys.type: TextBlockComponentBuilder(
@@ -250,10 +271,11 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
         ),
         textStyleBuilder: (level) => styleCustomizer.headingStyleBuilder(level),
       ),
-      ImageBlockKeys.type: ImageBlockComponentBuilder(
+      ImageBlockKeys.type: CustomImageBlockComponentBuilder(
         configuration: configuration,
         showMenu: true,
-        menuBuilder: (node, state) => Positioned(
+        menuBuilder: (Node node, CustomImageBlockComponentState state) =>
+            Positioned(
           top: 0,
           right: 10,
           child: ImageMenu(
@@ -334,6 +356,11 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
               styleCustomizer.outlineBlockPlaceholderStyleBuilder(),
         ),
       ),
+      errorBlockComponentBuilderKey: ErrorBlockComponentBuilder(
+        configuration: configuration.copyWith(
+          padding: (_) => const EdgeInsets.symmetric(vertical: 10),
+        ),
+      ),
     };
 
     final builders = {
@@ -458,13 +485,13 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
   }
 
   Future<void> _initializeShortcuts() async {
-    //TODO(Xazin): Refactor lazy initialization
+    // TODO(Xazin): Refactor lazy initialization
     defaultCommandShortcutEvents;
     final settingsShortcutService = SettingsShortcutService();
     final customizeShortcuts =
         await settingsShortcutService.getCustomizeShortcuts();
     await settingsShortcutService.updateCommandShortcuts(
-      standardCommandShortcutEvents,
+      commandShortcutEvents,
       customizeShortcuts,
     );
   }
@@ -480,4 +507,33 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
       toolbarItems.addAll(textDirectionItems);
     }
   }
+
+  List<CommandShortcutEvent> _buildFindAndReplaceCommands() {
+    return findAndReplaceCommands(
+      context: context,
+      style: FindReplaceStyle(
+        findMenuBuilder: (
+          context,
+          editorState,
+          localizations,
+          style,
+          showReplaceMenu,
+          onDismiss,
+        ) {
+          return Material(
+            child: DecoratedBox(
+              decoration: BoxDecoration(
+                color: Theme.of(context).colorScheme.surfaceVariant,
+                borderRadius: BorderRadius.circular(4),
+              ),
+              child: FindAndReplaceMenuWidget(
+                editorState: editorState,
+                onDismiss: onDismiss,
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
 }

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

@@ -1,6 +1,7 @@
 import 'dart:io';
 
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
 import 'package:flowy_infra_ui/widget/ignore_parent_gesture.dart';
 import 'package:flutter/material.dart';
 
@@ -20,7 +21,7 @@ class BlockActionButton extends StatelessWidget {
   Widget build(BuildContext context) {
     return Align(
       alignment: Alignment.center,
-      child: Tooltip(
+      child: FlowyTooltip.delayed(
         preferBelow: false,
         richMessage: richMessage,
         child: MouseRegion(

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

@@ -4,6 +4,7 @@ import 'package:appflowy_editor/appflowy_editor.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/flowy_tooltip.dart';
 import 'package:flutter/material.dart';
 
 final alignToolbarItem = ToolbarItem(
@@ -155,7 +156,7 @@ class _AlignButton extends StatelessWidget {
       cursor: SystemMouseCursors.click,
       child: GestureDetector(
         onTap: onTap,
-        child: Tooltip(
+        child: FlowyTooltip.delayed(
           message: tooltips,
           child: FlowySvg(
             icon,

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

@@ -1,5 +1,4 @@
-import 'package:appflowy/plugins/document/presentation/editor_plugins/emoji_picker/emoji_picker.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
+import 'package:appflowy/workspace/presentation/settings/widgets/emoji_picker/emoji_picker.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';

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

@@ -1,4 +0,0 @@
-export 'src/config.dart';
-export 'src/emoji_picker.dart';
-export 'src/emoji_picker_builder.dart';
-export 'src/models/emoji_model.dart';

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/emoji_picker/src/config.dart

@@ -1,165 +0,0 @@
-import 'dart:math';
-
-import 'package:flutter/material.dart';
-
-import 'models/category_models.dart';
-import 'emoji_picker.dart';
-
-/// Config for customizations
-class Config {
-  /// Constructor
-  const Config({
-    this.columns = 7,
-    this.emojiSizeMax = 32.0,
-    this.verticalSpacing = 0,
-    this.horizontalSpacing = 0,
-    this.initCategory = Category.RECENT,
-    this.bgColor = const Color(0xFFEBEFF2),
-    this.indicatorColor = Colors.blue,
-    this.iconColor = Colors.grey,
-    this.iconColorSelected = Colors.blue,
-    this.progressIndicatorColor = Colors.blue,
-    this.backspaceColor = Colors.blue,
-    this.showRecentsTab = true,
-    this.recentsLimit = 28,
-    this.noRecentsText = 'No Recents',
-    this.noRecentsStyle = const TextStyle(fontSize: 20, color: Colors.black26),
-    this.tabIndicatorAnimDuration = kTabScrollDuration,
-    this.categoryIcons = const CategoryIcons(),
-    this.buttonMode = ButtonMode.MATERIAL,
-  });
-
-  /// Number of emojis per row
-  final int columns;
-
-  /// Width and height the emoji will be maximal displayed
-  /// Can be smaller due to screen size and amount of columns
-  final double emojiSizeMax;
-
-  /// Vertical spacing between emojis
-  final double verticalSpacing;
-
-  /// Horizontal spacing between emojis
-  final double horizontalSpacing;
-
-  /// The initial [Category] that will be selected
-  /// This [Category] will have its button in the bottombar darkened
-  final Category initCategory;
-
-  /// The background color of the Widget
-  final Color bgColor;
-
-  /// The color of the category indicator
-  final Color indicatorColor;
-
-  /// The color of the category icons
-  final Color iconColor;
-
-  /// The color of the category icon when selected
-  final Color iconColorSelected;
-
-  /// The color of the loading indicator during initialization
-  final Color progressIndicatorColor;
-
-  /// The color of the backspace icon button
-  final Color backspaceColor;
-
-  /// Show extra tab with recently used emoji
-  final bool showRecentsTab;
-
-  /// Limit of recently used emoji that will be saved
-  final int recentsLimit;
-
-  /// The text to be displayed if no recent emojis to display
-  final String noRecentsText;
-
-  /// The text style for [noRecentsText]
-  final TextStyle noRecentsStyle;
-
-  /// Duration of tab indicator to animate to next category
-  final Duration tabIndicatorAnimDuration;
-
-  /// Determines the icon to display for each [Category]
-  final CategoryIcons categoryIcons;
-
-  /// Change between Material and Cupertino button style
-  final ButtonMode buttonMode;
-
-  /// Get Emoji size based on properties and screen width
-  double getEmojiSize(double width) {
-    final maxSize = width / columns;
-    return min(maxSize, emojiSizeMax);
-  }
-
-  /// Returns the icon for the category
-  IconData getIconForCategory(Category category) {
-    switch (category) {
-      case Category.RECENT:
-        return categoryIcons.recentIcon;
-      case Category.SMILEYS:
-        return categoryIcons.smileyIcon;
-      case Category.ANIMALS:
-        return categoryIcons.animalIcon;
-      case Category.FOODS:
-        return categoryIcons.foodIcon;
-      case Category.TRAVEL:
-        return categoryIcons.travelIcon;
-      case Category.ACTIVITIES:
-        return categoryIcons.activityIcon;
-      case Category.OBJECTS:
-        return categoryIcons.objectIcon;
-      case Category.SYMBOLS:
-        return categoryIcons.symbolIcon;
-      case Category.FLAGS:
-        return categoryIcons.flagIcon;
-      case Category.SEARCH:
-        return categoryIcons.searchIcon;
-      default:
-        throw Exception('Unsupported Category');
-    }
-  }
-
-  @override
-  bool operator ==(other) {
-    return (other is Config) &&
-        other.columns == columns &&
-        other.emojiSizeMax == emojiSizeMax &&
-        other.verticalSpacing == verticalSpacing &&
-        other.horizontalSpacing == horizontalSpacing &&
-        other.initCategory == initCategory &&
-        other.bgColor == bgColor &&
-        other.indicatorColor == indicatorColor &&
-        other.iconColor == iconColor &&
-        other.iconColorSelected == iconColorSelected &&
-        other.progressIndicatorColor == progressIndicatorColor &&
-        other.backspaceColor == backspaceColor &&
-        other.showRecentsTab == showRecentsTab &&
-        other.recentsLimit == recentsLimit &&
-        other.noRecentsText == noRecentsText &&
-        other.noRecentsStyle == noRecentsStyle &&
-        other.tabIndicatorAnimDuration == tabIndicatorAnimDuration &&
-        other.categoryIcons == categoryIcons &&
-        other.buttonMode == buttonMode;
-  }
-
-  @override
-  int get hashCode =>
-      columns.hashCode ^
-      emojiSizeMax.hashCode ^
-      verticalSpacing.hashCode ^
-      horizontalSpacing.hashCode ^
-      initCategory.hashCode ^
-      bgColor.hashCode ^
-      indicatorColor.hashCode ^
-      iconColor.hashCode ^
-      iconColorSelected.hashCode ^
-      progressIndicatorColor.hashCode ^
-      backspaceColor.hashCode ^
-      showRecentsTab.hashCode ^
-      recentsLimit.hashCode ^
-      noRecentsText.hashCode ^
-      noRecentsStyle.hashCode ^
-      tabIndicatorAnimDuration.hashCode ^
-      categoryIcons.hashCode ^
-      buttonMode.hashCode;
-}

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

@@ -0,0 +1,100 @@
+import 'dart:convert';
+
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/copy_and_paste/clipboard_service.dart';
+import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy/workspace/presentation/home/toast.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+
+class ErrorBlockComponentBuilder extends BlockComponentBuilder {
+  ErrorBlockComponentBuilder({
+    super.configuration,
+  });
+
+  @override
+  BlockComponentWidget build(BlockComponentContext blockComponentContext) {
+    final node = blockComponentContext.node;
+    return ErrorBlockComponentWidget(
+      key: node.key,
+      node: node,
+      configuration: configuration,
+      showActions: showActions(node),
+      actionBuilder: (context, state) => actionBuilder(
+        blockComponentContext,
+        state,
+      ),
+    );
+  }
+
+  @override
+  bool validate(Node node) => true;
+}
+
+class ErrorBlockComponentWidget extends BlockComponentStatefulWidget {
+  const ErrorBlockComponentWidget({
+    super.key,
+    required super.node,
+    super.showActions,
+    super.actionBuilder,
+    super.configuration = const BlockComponentConfiguration(),
+  });
+
+  @override
+  State<ErrorBlockComponentWidget> createState() =>
+      _DividerBlockComponentWidgetState();
+}
+
+class _DividerBlockComponentWidgetState extends State<ErrorBlockComponentWidget>
+    with BlockComponentConfigurable {
+  @override
+  BlockComponentConfiguration get configuration => widget.configuration;
+
+  @override
+  Node get node => widget.node;
+
+  @override
+  Widget build(BuildContext context) {
+    Widget child = DecoratedBox(
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.surfaceVariant,
+        borderRadius: BorderRadius.circular(4),
+      ),
+      child: FlowyButton(
+        onTap: () async {
+          showSnackBarMessage(
+            context,
+            LocaleKeys.document_errorBlock_blockContentHasBeenCopied.tr(),
+          );
+          await getIt<ClipboardService>().setData(
+            ClipboardServiceData(plainText: jsonEncode(node.toJson())),
+          );
+        },
+        text: Container(
+          height: 48,
+          alignment: Alignment.center,
+          child: FlowyText(
+            LocaleKeys.document_errorBlock_theBlockIsNotSupported.tr(),
+          ),
+        ),
+      ),
+    );
+
+    child = Padding(
+      padding: padding,
+      child: child,
+    );
+
+    if (widget.showActions && widget.actionBuilder != null) {
+      child = BlockComponentActionWrapper(
+        node: node,
+        actionBuilder: widget.actionBuilder!,
+        child: child,
+      );
+    }
+
+    return child;
+  }
+}

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

@@ -0,0 +1,331 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart' hide WidgetBuilder;
+import 'package:flowy_infra_ui/style_widget/text_input.dart';
+import 'package:flutter/material.dart';
+
+class FindAndReplaceMenuWidget extends StatefulWidget {
+  const FindAndReplaceMenuWidget({
+    super.key,
+    required this.onDismiss,
+    required this.editorState,
+  });
+
+  final EditorState editorState;
+  final VoidCallback onDismiss;
+
+  @override
+  State<FindAndReplaceMenuWidget> createState() =>
+      _FindAndReplaceMenuWidgetState();
+}
+
+class _FindAndReplaceMenuWidgetState extends State<FindAndReplaceMenuWidget> {
+  bool showReplaceMenu = false;
+
+  late SearchServiceV2 searchService = SearchServiceV2(
+    editorState: widget.editorState,
+  );
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.start,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Padding(
+          padding: const EdgeInsets.symmetric(vertical: 8.0),
+          child: FindMenu(
+            onDismiss: widget.onDismiss,
+            editorState: widget.editorState,
+            searchService: searchService,
+            onShowReplace: (value) => setState(
+              () => showReplaceMenu = value,
+            ),
+          ),
+        ),
+        showReplaceMenu
+            ? Padding(
+                padding: const EdgeInsets.only(
+                  bottom: 8.0,
+                ),
+                child: ReplaceMenu(
+                  editorState: widget.editorState,
+                  searchService: searchService,
+                ),
+              )
+            : const SizedBox.shrink(),
+      ],
+    );
+  }
+}
+
+class FindMenu extends StatefulWidget {
+  const FindMenu({
+    super.key,
+    required this.onDismiss,
+    required this.editorState,
+    required this.searchService,
+    required this.onShowReplace,
+  });
+
+  final EditorState editorState;
+  final VoidCallback onDismiss;
+  final SearchServiceV2 searchService;
+  final void Function(bool value) onShowReplace;
+
+  @override
+  State<FindMenu> createState() => _FindMenuState();
+}
+
+class _FindMenuState extends State<FindMenu> {
+  late final FocusNode findTextFieldFocusNode;
+
+  final findTextEditingController = TextEditingController();
+
+  String queriedPattern = '';
+
+  bool showReplaceMenu = false;
+  bool caseSensitive = false;
+
+  @override
+  void initState() {
+    super.initState();
+
+    widget.searchService.matchedPositions.addListener(_setState);
+    widget.searchService.currentSelectedIndex.addListener(_setState);
+
+    findTextEditingController.addListener(_searchPattern);
+
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      findTextFieldFocusNode.requestFocus();
+    });
+  }
+
+  @override
+  void dispose() {
+    widget.searchService.matchedPositions.removeListener(_setState);
+    widget.searchService.currentSelectedIndex.removeListener(_setState);
+    widget.searchService.dispose();
+    findTextEditingController.removeListener(_searchPattern);
+
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // the selectedIndex from searchService is 0-based
+    final selectedIndex = widget.searchService.selectedIndex + 1;
+    final matches = widget.searchService.matchedPositions.value;
+    return Row(
+      children: [
+        const HSpace(4.0),
+        // expand/collapse button
+        _FindAndReplaceIcon(
+          icon: showReplaceMenu
+              ? FlowySvgs.drop_menu_show_s
+              : FlowySvgs.drop_menu_hide_s,
+          tooltipText: '',
+          onPressed: () {
+            widget.onShowReplace(!showReplaceMenu);
+            setState(
+              () => showReplaceMenu = !showReplaceMenu,
+            );
+          },
+        ),
+        const HSpace(4.0),
+        // find text input
+        SizedBox(
+          width: 150,
+          height: 30,
+          child: FlowyFormTextInput(
+            onFocusCreated: (focusNode) {
+              findTextFieldFocusNode = focusNode;
+            },
+            onEditingComplete: () {
+              widget.searchService.navigateToMatch();
+              // after update selection or navigate to match, the editor
+              //  will request focus, here's a workaround to request the
+              //  focus back to the findTextField
+              Future.delayed(const Duration(milliseconds: 50), () {
+                FocusScope.of(context).requestFocus(
+                  findTextFieldFocusNode,
+                );
+              });
+            },
+            controller: findTextEditingController,
+            hintText: LocaleKeys.findAndReplace_find.tr(),
+            textAlign: TextAlign.left,
+          ),
+        ),
+        // the count of matches
+        Container(
+          constraints: const BoxConstraints(minWidth: 80),
+          padding: const EdgeInsets.symmetric(horizontal: 8.0),
+          alignment: Alignment.centerLeft,
+          child: FlowyText(
+            matches.isEmpty
+                ? LocaleKeys.findAndReplace_noResult.tr()
+                : '$selectedIndex of ${matches.length}',
+          ),
+        ),
+        const HSpace(4.0),
+        // case sensitive button
+        _FindAndReplaceIcon(
+          icon: FlowySvgs.text_s,
+          tooltipText: LocaleKeys.findAndReplace_caseSensitive.tr(),
+          onPressed: () => setState(() {
+            caseSensitive = !caseSensitive;
+            widget.searchService.caseSensitive = caseSensitive;
+          }),
+          isSelected: caseSensitive,
+        ),
+        const HSpace(4.0),
+        // previous match button
+        _FindAndReplaceIcon(
+          onPressed: () => widget.searchService.navigateToMatch(moveUp: true),
+          icon: FlowySvgs.arrow_up_s,
+          tooltipText: LocaleKeys.findAndReplace_previousMatch.tr(),
+        ),
+        const HSpace(4.0),
+        // next match button
+        _FindAndReplaceIcon(
+          onPressed: () => widget.searchService.navigateToMatch(),
+          icon: FlowySvgs.arrow_down_s,
+          tooltipText: LocaleKeys.findAndReplace_nextMatch.tr(),
+        ),
+        const HSpace(4.0),
+        _FindAndReplaceIcon(
+          onPressed: widget.onDismiss,
+          icon: FlowySvgs.close_s,
+          tooltipText: LocaleKeys.findAndReplace_close.tr(),
+        ),
+        const HSpace(4.0),
+      ],
+    );
+  }
+
+  void _searchPattern() {
+    if (findTextEditingController.text.isEmpty) {
+      return;
+    }
+    widget.searchService.findAndHighlight(findTextEditingController.text);
+    setState(() => queriedPattern = findTextEditingController.text);
+  }
+
+  void _setState() {
+    setState(() {});
+  }
+}
+
+class ReplaceMenu extends StatefulWidget {
+  const ReplaceMenu({
+    super.key,
+    required this.editorState,
+    required this.searchService,
+    this.localizations,
+  });
+
+  final EditorState editorState;
+
+  /// The localizations of the find and replace menu
+  final FindReplaceLocalizations? localizations;
+
+  final SearchServiceV2 searchService;
+
+  @override
+  State<ReplaceMenu> createState() => _ReplaceMenuState();
+}
+
+class _ReplaceMenuState extends State<ReplaceMenu> {
+  late final FocusNode replaceTextFieldFocusNode;
+  final replaceTextEditingController = TextEditingController();
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        // placeholder for aligning the replace menu
+        const HSpace(30),
+        SizedBox(
+          width: 150,
+          height: 30,
+          child: FlowyFormTextInput(
+            onFocusCreated: (focusNode) {
+              replaceTextFieldFocusNode = focusNode;
+            },
+            onEditingComplete: () {
+              widget.searchService.navigateToMatch();
+              // after update selection or navigate to match, the editor
+              //  will request focus, here's a workaround to request the
+              //  focus back to the findTextField
+              Future.delayed(const Duration(milliseconds: 50), () {
+                FocusScope.of(context).requestFocus(
+                  replaceTextFieldFocusNode,
+                );
+              });
+            },
+            controller: replaceTextEditingController,
+            hintText: LocaleKeys.findAndReplace_replace.tr(),
+            textAlign: TextAlign.left,
+          ),
+        ),
+        const HSpace(4.0),
+        _FindAndReplaceIcon(
+          onPressed: _replaceSelectedWord,
+          iconBuilder: (_) => const Icon(
+            Icons.find_replace_outlined,
+            size: 16,
+          ),
+          tooltipText: LocaleKeys.findAndReplace_replace.tr(),
+        ),
+        const HSpace(4.0),
+        _FindAndReplaceIcon(
+          iconBuilder: (_) => const Icon(
+            Icons.change_circle_outlined,
+            size: 16,
+          ),
+          tooltipText: LocaleKeys.findAndReplace_replaceAll.tr(),
+          onPressed: () => widget.searchService.replaceAllMatches(
+            replaceTextEditingController.text,
+          ),
+        ),
+      ],
+    );
+  }
+
+  void _replaceSelectedWord() {
+    widget.searchService.replaceSelectedWord(replaceTextEditingController.text);
+  }
+}
+
+class _FindAndReplaceIcon extends StatelessWidget {
+  const _FindAndReplaceIcon({
+    required this.onPressed,
+    required this.tooltipText,
+    this.icon,
+    this.iconBuilder,
+    this.isSelected,
+  });
+
+  final VoidCallback onPressed;
+  final FlowySvgData? icon;
+  final WidgetBuilder? iconBuilder;
+  final String tooltipText;
+  final bool? isSelected;
+
+  @override
+  Widget build(BuildContext context) {
+    return FlowyIconButton(
+      width: 24,
+      height: 24,
+      onPressed: onPressed,
+      icon: iconBuilder?.call(context) ??
+          (icon != null ? FlowySvg(icon!) : const Placeholder()),
+      tooltipText: tooltipText,
+      isSelected: isSelected,
+      iconColorOnHover: Theme.of(context).colorScheme.onSecondary,
+    );
+  }
+}

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

@@ -22,7 +22,7 @@ final customizeFontToolbarItem = ToolbarItem(
         onClose: () => keepEditorFocusNotifier.value -= 1,
         showResetButton: true,
         onFontFamilyChanged: (fontFamily) async {
-          await popoverController.close();
+          popoverController.close();
           try {
             await editorState.formatDelta(selection, {
               AppFlowyRichTextKeys.fontFamily: fontFamily,

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

@@ -180,7 +180,7 @@ class _ChangeCoverPopoverState extends State<ChangeCoverPopover> {
               builtInAssetImages[index],
             );
           },
-          child: Container(
+          child: DecoratedBox(
             decoration: BoxDecoration(
               image: DecorationImage(
                 image: AssetImage(builtInAssetImages[index]),
@@ -299,7 +299,7 @@ class NewCustomCoverButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return DecoratedBox(
       decoration: BoxDecoration(
         border: Border.all(
           color: Theme.of(context).colorScheme.primary,
@@ -484,14 +484,9 @@ class _ImageGridItemState extends State<ImageGridItem> {
         children: [
           InkWell(
             onTap: widget.onImageSelect,
-            child: Container(
-              decoration: BoxDecoration(
-                image: DecorationImage(
-                  image: FileImage(File(widget.imagePath)),
-                  fit: BoxFit.cover,
-                ),
-                borderRadius: Corners.s8Border,
-              ),
+            child: ClipRRect(
+              borderRadius: Corners.s8Border,
+              child: Image.file(File(widget.imagePath), fit: BoxFit.cover),
             ),
           ),
           if (showDeleteButton)
@@ -544,7 +539,7 @@ class ColorItem extends StatelessWidget {
         padding: const EdgeInsets.only(right: 10.0),
         child: SizedBox.square(
           dimension: 25,
-          child: Container(
+          child: DecoratedBox(
             decoration: BoxDecoration(
               color: option.colorHex.tryToColor(),
               shape: BoxShape.circle,

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

@@ -201,7 +201,7 @@ class CoverImagePreviewWidget extends StatefulWidget {
 
 class _CoverImagePreviewWidgetState extends State<CoverImagePreviewWidget> {
   _buildFilePickerWidget(BuildContext ctx) {
-    return Container(
+    return DecoratedBox(
       decoration: BoxDecoration(
         color: Theme.of(context).cardColor,
         borderRadius: Corners.s6Border,
@@ -263,7 +263,7 @@ class _CoverImagePreviewWidgetState extends State<CoverImagePreviewWidget> {
         onTap: () {
           ctx.read<CoverImagePickerBloc>().add(const DeleteImage());
         },
-        child: Container(
+        child: DecoratedBox(
           decoration: BoxDecoration(
             shape: BoxShape.circle,
             color: Theme.of(context).colorScheme.onPrimary,

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

@@ -2,7 +2,7 @@ import 'dart:io';
 
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/workspace/presentation/widgets/emoji_picker/emoji_picker.dart';
+import 'package:appflowy/workspace/presentation/settings/widgets/emoji_picker/emoji_picker.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -257,7 +257,7 @@ class _DocumentHeaderToolbarState extends State<DocumentHeaderToolbar> {
           controller: _popoverController,
           offset: const Offset(0, 8),
           direction: PopoverDirection.bottomWithCenterAligned,
-          constraints: BoxConstraints.loose(const Size(320, 380)),
+          constraints: BoxConstraints.loose(const Size(300, 250)),
           child: FlowyButton(
             leftIconSize: const Size.square(18),
             useIntrinsicWidth: true,
@@ -324,6 +324,7 @@ class DocumentCover extends StatefulWidget {
 class DocumentCoverState extends State<DocumentCover> {
   bool isOverlayButtonsHidden = true;
   bool isPopoverOpen = false;
+  final PopoverController popoverController = PopoverController();
 
   @override
   Widget build(BuildContext context) {
@@ -382,12 +383,15 @@ class DocumentCoverState extends State<DocumentCover> {
         mainAxisSize: MainAxisSize.min,
         children: [
           AppFlowyPopover(
+            controller: popoverController,
+            triggerActions: PopoverTriggerFlags.none,
             offset: const Offset(0, 8),
             direction: PopoverDirection.bottomWithCenterAligned,
             constraints: BoxConstraints.loose(const Size(380, 450)),
             margin: EdgeInsets.zero,
             onClose: () => isPopoverOpen = false,
             child: RoundedTextButton(
+              onPressed: () => popoverController.show(),
               hoverColor: Theme.of(context).colorScheme.surface,
               textColor: Theme.of(context).colorScheme.tertiary,
               fillColor: Theme.of(context).colorScheme.surface.withOpacity(0.5),

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

@@ -1,6 +1,6 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/workspace/presentation/widgets/emoji_picker/emoji_picker.dart';
+import 'package:appflowy/workspace/presentation/settings/widgets/emoji_picker/emoji_picker.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
@@ -8,6 +8,7 @@ import 'package:flowy_infra_ui/style_widget/text.dart';
 
 import 'package:flutter/material.dart';
 
+/// Add icon menu in Header
 class EmojiPopover extends StatefulWidget {
   final EditorState editorState;
   final Node node;
@@ -46,17 +47,7 @@ class _EmojiPopoverState extends State<EmojiPopover> {
             onEmojiSelected: (category, emoji) {
               widget.onEmojiChanged(emoji);
             },
-            config: Config(
-              columns: 8,
-              emojiSizeMax: 28,
-              bgColor: Colors.transparent,
-              iconColor: Theme.of(context).iconTheme.color!,
-              iconColorSelected: Theme.of(context).colorScheme.onSurface,
-              selectedHoverColor: Theme.of(context).colorScheme.secondary,
-              progressIndicatorColor: Theme.of(context).iconTheme.color!,
-              buttonMode: ButtonMode.CUPERTINO,
-              initCategory: Category.RECENT,
-            ),
+            config: buildFlowyEmojiPickerConfig(context),
           ),
         ),
       ],

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

@@ -0,0 +1,245 @@
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/image_placeholder.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+typedef CustomImageBlockComponentMenuBuilder = Widget Function(
+  Node node,
+  CustomImageBlockComponentState state,
+);
+
+class CustomImageBlockComponentBuilder extends BlockComponentBuilder {
+  CustomImageBlockComponentBuilder({
+    super.configuration,
+    this.showMenu = false,
+    this.menuBuilder,
+  });
+
+  /// Whether to show the menu of this block component.
+  final bool showMenu;
+
+  ///
+  final CustomImageBlockComponentMenuBuilder? menuBuilder;
+
+  @override
+  BlockComponentWidget build(BlockComponentContext blockComponentContext) {
+    final node = blockComponentContext.node;
+    return CustomImageBlockComponent(
+      key: node.key,
+      node: node,
+      showActions: showActions(node),
+      configuration: configuration,
+      actionBuilder: (context, state) => actionBuilder(
+        blockComponentContext,
+        state,
+      ),
+      showMenu: showMenu,
+      menuBuilder: menuBuilder,
+    );
+  }
+
+  @override
+  bool validate(Node node) => node.delta == null && node.children.isEmpty;
+}
+
+class CustomImageBlockComponent extends BlockComponentStatefulWidget {
+  const CustomImageBlockComponent({
+    super.key,
+    required super.node,
+    super.showActions,
+    super.actionBuilder,
+    super.configuration = const BlockComponentConfiguration(),
+    this.showMenu = false,
+    this.menuBuilder,
+  });
+
+  /// Whether to show the menu of this block component.
+  final bool showMenu;
+
+  final CustomImageBlockComponentMenuBuilder? menuBuilder;
+
+  @override
+  State<CustomImageBlockComponent> createState() =>
+      CustomImageBlockComponentState();
+}
+
+class CustomImageBlockComponentState extends State<CustomImageBlockComponent>
+    with SelectableMixin, BlockComponentConfigurable {
+  @override
+  BlockComponentConfiguration get configuration => widget.configuration;
+
+  @override
+  Node get node => widget.node;
+
+  final imageKey = GlobalKey();
+  RenderBox? get _renderBox => context.findRenderObject() as RenderBox?;
+
+  late final editorState = Provider.of<EditorState>(context, listen: false);
+
+  final showActionsNotifier = ValueNotifier<bool>(false);
+
+  bool alwaysShowMenu = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final node = widget.node;
+    final attributes = node.attributes;
+    final src = attributes[ImageBlockKeys.url];
+
+    final alignment = AlignmentExtension.fromString(
+      attributes[ImageBlockKeys.align] ?? 'center',
+    );
+    final width = attributes[ImageBlockKeys.width]?.toDouble() ??
+        MediaQuery.of(context).size.width;
+    final height = attributes[ImageBlockKeys.height]?.toDouble();
+
+    Widget child = src.isEmpty
+        ? ImagePlaceholder(
+            node: node,
+          )
+        : ResizableImage(
+            src: src,
+            width: width,
+            height: height,
+            editable: editorState.editable,
+            alignment: alignment,
+            onResize: (width) {
+              final transaction = editorState.transaction
+                ..updateNode(node, {
+                  ImageBlockKeys.width: width,
+                });
+              editorState.apply(transaction);
+            },
+          );
+
+    child = BlockSelectionContainer(
+      node: node,
+      delegate: this,
+      listenable: editorState.selectionNotifier,
+      blockColor: editorState.editorStyle.selectionColor,
+      supportTypes: const [
+        BlockSelectionType.block,
+      ],
+      child: Padding(
+        key: imageKey,
+        padding: padding,
+        child: child,
+      ),
+    );
+
+    if (widget.showActions && widget.actionBuilder != null) {
+      child = BlockComponentActionWrapper(
+        node: node,
+        actionBuilder: widget.actionBuilder!,
+        child: child,
+      );
+    }
+
+    if (widget.showMenu && widget.menuBuilder != null) {
+      child = MouseRegion(
+        onEnter: (_) => showActionsNotifier.value = true,
+        onExit: (_) {
+          if (!alwaysShowMenu) {
+            showActionsNotifier.value = false;
+          }
+        },
+        hitTestBehavior: HitTestBehavior.opaque,
+        opaque: false,
+        child: ValueListenableBuilder<bool>(
+          valueListenable: showActionsNotifier,
+          builder: (context, value, child) {
+            final url = node.attributes[ImageBlockKeys.url];
+            return Stack(
+              children: [
+                BlockSelectionContainer(
+                  node: node,
+                  delegate: this,
+                  listenable: editorState.selectionNotifier,
+                  cursorColor: editorState.editorStyle.cursorColor,
+                  selectionColor: editorState.editorStyle.selectionColor,
+                  child: child!,
+                ),
+                if (value && url.isNotEmpty == true)
+                  widget.menuBuilder!(
+                    widget.node,
+                    this,
+                  ),
+              ],
+            );
+          },
+          child: child,
+        ),
+      );
+    }
+
+    return child;
+  }
+
+  @override
+  Position start() => Position(path: widget.node.path, offset: 0);
+
+  @override
+  Position end() => Position(path: widget.node.path, offset: 1);
+
+  @override
+  Position getPositionInOffset(Offset start) => end();
+
+  @override
+  bool get shouldCursorBlink => false;
+
+  @override
+  CursorStyle get cursorStyle => CursorStyle.cover;
+
+  @override
+  Rect getBlockRect({
+    bool shiftWithBaseOffset = false,
+  }) {
+    final imageBox = imageKey.currentContext?.findRenderObject();
+    if (imageBox is RenderBox) {
+      return Offset.zero & imageBox.size;
+    }
+    return Rect.zero;
+  }
+
+  @override
+  Rect? getCursorRectInPosition(
+    Position position, {
+    bool shiftWithBaseOffset = false,
+  }) {
+    final rects = getRectsInSelection(Selection.collapsed(position));
+    return rects.firstOrNull;
+  }
+
+  @override
+  List<Rect> getRectsInSelection(
+    Selection selection, {
+    bool shiftWithBaseOffset = false,
+  }) {
+    if (_renderBox == null) {
+      return [];
+    }
+    final parentBox = context.findRenderObject();
+    final imageBox = imageKey.currentContext?.findRenderObject();
+    if (parentBox is RenderBox && imageBox is RenderBox) {
+      return [
+        imageBox.localToGlobal(Offset.zero, ancestor: parentBox) &
+            imageBox.size,
+      ];
+    }
+    return [Offset.zero & _renderBox!.size];
+  }
+
+  @override
+  Selection getSelectionInRange(Offset start, Offset end) => Selection.single(
+        path: widget.node.path,
+        startOffset: 0,
+        endOffset: 1,
+      );
+
+  @override
+  Offset localToGlobal(
+    Offset offset, {
+    bool shiftWithBaseOffset = false,
+  }) =>
+      _renderBox!.localToGlobal(offset);
+}

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

@@ -0,0 +1,46 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+
+class EmbedImageUrlWidget extends StatefulWidget {
+  const EmbedImageUrlWidget({
+    super.key,
+    required this.onSubmit,
+  });
+
+  final void Function(String url) onSubmit;
+
+  @override
+  State<EmbedImageUrlWidget> createState() => _EmbedImageUrlWidgetState();
+}
+
+class _EmbedImageUrlWidgetState extends State<EmbedImageUrlWidget> {
+  String inputText = '';
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        FlowyTextField(
+          autoFocus: true,
+          hintText: LocaleKeys.document_imageBlock_embedLink_placeholder.tr(),
+          onChanged: (value) => inputText = value,
+          onEditingComplete: () => widget.onSubmit(inputText),
+        ),
+        const VSpace(5),
+        SizedBox(
+          width: 160,
+          child: FlowyButton(
+            margin: const EdgeInsets.all(8.0),
+            text: FlowyText(
+              LocaleKeys.document_imageBlock_embedLink_label.tr(),
+              textAlign: TextAlign.center,
+            ),
+            onTap: () => widget.onSubmit(inputText),
+          ),
+        ),
+      ],
+    );
+  }
+}

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

@@ -1,5 +1,7 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/custom_image_block_component.dart';
+import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -17,7 +19,7 @@ class ImageMenu extends StatefulWidget {
   });
 
   final Node node;
-  final ImageBlockComponentWidgetState state;
+  final CustomImageBlockComponentState state;
 
   @override
   State<ImageMenu> createState() => _ImageMenuState();
@@ -65,12 +67,9 @@ class _ImageMenuState extends State<ImageMenu> {
     final url = widget.node.attributes[ImageBlockKeys.url];
     if (url != null) {
       Clipboard.setData(ClipboardData(text: url));
-      ScaffoldMessenger.of(context).showSnackBar(
-        SnackBar(
-          content: FlowyText(
-            LocaleKeys.document_plugins_image_copiedToPasteBoard.tr(),
-          ),
-        ),
+      showSnackBarMessage(
+        context,
+        LocaleKeys.document_plugins_image_copiedToPasteBoard.tr(),
       );
     }
   }
@@ -111,7 +110,7 @@ class _ImageAlignButton extends StatefulWidget {
   });
 
   final Node node;
-  final ImageBlockComponentWidgetState state;
+  final CustomImageBlockComponentState state;
 
   @override
   State<_ImageAlignButton> createState() => _ImageAlignButtonState();

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

@@ -0,0 +1,191 @@
+import 'dart:io';
+
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/upload_image_menu.dart';
+import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy/workspace/application/settings/application_data_storage.dart';
+import 'package:appflowy/workspace/presentation/home/toast.dart';
+import 'package:appflowy_backend/log.dart';
+import 'package:appflowy_editor/appflowy_editor.dart' hide Log, UploadImageMenu;
+import 'package:appflowy_popover/appflowy_popover.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/uuid.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flowy_infra_ui/style_widget/hover.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:http/http.dart';
+import 'package:path/path.dart' as p;
+import 'package:string_validator/string_validator.dart';
+
+class ImagePlaceholder extends StatefulWidget {
+  const ImagePlaceholder({
+    super.key,
+    required this.node,
+  });
+
+  final Node node;
+
+  @override
+  State<ImagePlaceholder> createState() => _ImagePlaceholderState();
+}
+
+class _ImagePlaceholderState extends State<ImagePlaceholder> {
+  final controller = PopoverController();
+  late final editorState = context.read<EditorState>();
+
+  @override
+  Widget build(BuildContext context) {
+    return AppFlowyPopover(
+      controller: controller,
+      direction: PopoverDirection.bottomWithCenterAligned,
+      constraints: const BoxConstraints(
+        maxWidth: 540,
+        maxHeight: 360,
+        minHeight: 80,
+      ),
+      clickHandler: PopoverClickHandler.gestureDetector,
+      popupBuilder: (context) {
+        return UploadImageMenu(
+          onSelectedLocalImage: (path) {
+            controller.close();
+            WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
+              await insertLocalImage(path);
+            });
+          },
+          onSelectedAIImage: (url) {
+            controller.close();
+            WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
+              await insertAIImage(url);
+            });
+          },
+          onSelectedNetworkImage: (url) {
+            controller.close();
+            WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
+              await insertNetworkImage(url);
+            });
+          },
+        );
+      },
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          color: Theme.of(context).colorScheme.surfaceVariant,
+          borderRadius: BorderRadius.circular(4),
+        ),
+        child: FlowyHover(
+          style: HoverStyle(
+            borderRadius: BorderRadius.circular(4),
+          ),
+          child: SizedBox(
+            height: 48,
+            child: Row(
+              children: [
+                const HSpace(10),
+                const FlowySvg(
+                  FlowySvgs.image_placeholder_s,
+                  size: Size.square(24),
+                ),
+                const HSpace(10),
+                FlowyText(
+                  LocaleKeys.document_plugins_image_addAnImage.tr(),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  Future<void> insertLocalImage(String? url) async {
+    if (url == null || url.isEmpty) {
+      controller.close();
+      return;
+    }
+    final path = await getIt<ApplicationDataStorage>().getPath();
+    final imagePath = p.join(
+      path,
+      'images',
+    );
+    try {
+      // create the directory if not exists
+      final directory = Directory(imagePath);
+      if (!directory.existsSync()) {
+        await directory.create(recursive: true);
+      }
+      final copyToPath = p.join(
+        imagePath,
+        '${uuid()}${p.extension(url)}',
+      );
+      await File(url).copy(
+        copyToPath,
+      );
+
+      final transaction = editorState.transaction;
+      transaction.updateNode(widget.node, {
+        ImageBlockKeys.url: copyToPath,
+      });
+      await editorState.apply(transaction);
+    } catch (e) {
+      Log.error('cannot copy image file', e);
+    }
+  }
+
+  Future<void> insertAIImage(String url) async {
+    if (url.isEmpty || !isURL(url)) {
+      // show error
+      showSnackBarMessage(
+        context,
+        LocaleKeys.document_imageBlock_error_invalidImage.tr(),
+      );
+      return;
+    }
+
+    final path = await getIt<ApplicationDataStorage>().getPath();
+    final imagePath = p.join(
+      path,
+      'images',
+    );
+    try {
+      // create the directory if not exists
+      final directory = Directory(imagePath);
+      if (!directory.existsSync()) {
+        await directory.create(recursive: true);
+      }
+      final uri = Uri.parse(url);
+      final copyToPath = p.join(
+        imagePath,
+        '${uuid()}${p.extension(uri.path)}',
+      );
+
+      final response = await get(uri);
+      await File(copyToPath).writeAsBytes(response.bodyBytes);
+
+      final transaction = editorState.transaction;
+      transaction.updateNode(widget.node, {
+        ImageBlockKeys.url: copyToPath,
+      });
+      await editorState.apply(transaction);
+    } catch (e) {
+      Log.error('cannot save image file', e);
+    }
+  }
+
+  Future<void> insertNetworkImage(String url) async {
+    if (url.isEmpty || !isURL(url)) {
+      // show error
+      showSnackBarMessage(
+        context,
+        LocaleKeys.document_imageBlock_error_invalidImage.tr(),
+      );
+      return;
+    }
+
+    final transaction = editorState.transaction;
+    transaction.updateNode(widget.node, {
+      ImageBlockKeys.url: url,
+    });
+    await editorState.apply(transaction);
+  }
+}

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

@@ -1,12 +1,4 @@
-import 'dart:io';
-
-import 'package:appflowy/startup/startup.dart';
-import 'package:appflowy/workspace/application/settings/application_data_storage.dart';
-import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
-import 'package:flowy_infra/uuid.dart';
-import 'package:flutter/material.dart';
-import 'package:path/path.dart' as p;
 
 final customImageMenuItem = SelectionMenuItem(
   name: AppFlowyEditorLocalizations.current.image,
@@ -16,44 +8,7 @@ final customImageMenuItem = SelectionMenuItem(
     style: style,
   ),
   keywords: ['image', 'picture', 'img', 'photo'],
-  handler: (editorState, menuService, context) {
-    final container = Overlay.of(context);
-    showImageMenu(
-      container,
-      editorState,
-      menuService,
-      onInsertImage: (url) async {
-        // if the url is http, we can insert it directly
-        // otherwise, if it's a file url, we need to copy the file to the app's document directory
-
-        final regex = RegExp('^(http|https)://');
-        if (regex.hasMatch(url)) {
-          await editorState.insertImageNode(url);
-        } else {
-          final path = await getIt<ApplicationDataStorage>().getPath();
-          final imagePath = p.join(
-            path,
-            'images',
-          );
-          try {
-            // create the directory if not exists
-            final directory = Directory(imagePath);
-            if (!directory.existsSync()) {
-              await directory.create(recursive: true);
-            }
-            final copyToPath = p.join(
-              imagePath,
-              '${uuid()}${p.extension(url)}',
-            );
-            await File(url).copy(
-              copyToPath,
-            );
-            await editorState.insertImageNode(copyToPath);
-          } catch (e) {
-            Log.error('cannot copy image file', e);
-          }
-        }
-      },
-    );
+  handler: (editorState, menuService, context) async {
+    return await editorState.insertImageNode('');
   },
 );

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

@@ -0,0 +1,105 @@
+import 'dart:async';
+
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/service/error.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/service/openai_client.dart';
+import 'package:appflowy/startup/startup.dart';
+import 'package:dartz/dartz.dart' hide State;
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+
+class OpenAIImageWidget extends StatefulWidget {
+  const OpenAIImageWidget({
+    super.key,
+    required this.onSelectNetworkImage,
+  });
+
+  final void Function(String url) onSelectNetworkImage;
+
+  @override
+  State<OpenAIImageWidget> createState() => _OpenAIImageWidgetState();
+}
+
+class _OpenAIImageWidgetState extends State<OpenAIImageWidget> {
+  Future<Either<OpenAIError, List<String>>>? future;
+  String query = '';
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Expanded(
+              child: FlowyTextField(
+                autoFocus: true,
+                hintText: LocaleKeys.document_imageBlock_ai_placeholder.tr(),
+                onChanged: (value) => query = value,
+                onEditingComplete: _search,
+              ),
+            ),
+            const HSpace(4.0),
+            FlowyButton(
+              useIntrinsicWidth: true,
+              text: FlowyText(
+                LocaleKeys.search_label.tr(),
+              ),
+              onTap: _search,
+            ),
+          ],
+        ),
+        const VSpace(12.0),
+        if (future != null)
+          Expanded(
+            child: FutureBuilder(
+              future: future,
+              builder: (context, value) {
+                final data = value.data;
+                if (!value.hasData ||
+                    value.connectionState != ConnectionState.done ||
+                    data == null) {
+                  return const CircularProgressIndicator.adaptive();
+                }
+                return data.fold(
+                  (l) => Center(
+                    child: FlowyText(
+                      l.message,
+                      maxLines: 3,
+                      textAlign: TextAlign.center,
+                    ),
+                  ),
+                  (r) => GridView.count(
+                    crossAxisCount: 3,
+                    mainAxisSpacing: 16.0,
+                    crossAxisSpacing: 10.0,
+                    childAspectRatio: 4 / 3,
+                    children: r
+                        .map(
+                          (e) => GestureDetector(
+                            onTap: () => widget.onSelectNetworkImage(e),
+                            child: Image.network(e),
+                          ),
+                        )
+                        .toList(),
+                  ),
+                );
+              },
+            ),
+          )
+      ],
+    );
+  }
+
+  void _search() async {
+    final openAI = await getIt.getAsync<OpenAIRepository>();
+    setState(() {
+      future = openAI.generateImage(
+        prompt: query,
+        n: 6,
+      );
+    });
+  }
+}

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

@@ -0,0 +1,121 @@
+import 'dart:async';
+import 'dart:convert';
+import 'dart:io';
+
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/stability_ai/stability_ai_client.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/stability_ai/stability_ai_error.dart';
+import 'package:appflowy/startup/startup.dart';
+import 'package:dartz/dartz.dart' hide State;
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/uuid.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+import 'package:path/path.dart' as p;
+import 'package:path_provider/path_provider.dart';
+
+class StabilityAIImageWidget extends StatefulWidget {
+  const StabilityAIImageWidget({
+    super.key,
+    required this.onSelectImage,
+  });
+
+  final void Function(String url) onSelectImage;
+
+  @override
+  State<StabilityAIImageWidget> createState() => _StabilityAIImageWidgetState();
+}
+
+class _StabilityAIImageWidgetState extends State<StabilityAIImageWidget> {
+  Future<Either<StabilityAIRequestError, List<String>>>? future;
+  String query = '';
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Expanded(
+              child: FlowyTextField(
+                autoFocus: true,
+                hintText: LocaleKeys
+                    .document_imageBlock_stability_ai_placeholder
+                    .tr(),
+                onChanged: (value) => query = value,
+                onEditingComplete: _search,
+              ),
+            ),
+            const HSpace(4.0),
+            FlowyButton(
+              useIntrinsicWidth: true,
+              text: FlowyText(
+                LocaleKeys.search_label.tr(),
+              ),
+              onTap: _search,
+            ),
+          ],
+        ),
+        const VSpace(12.0),
+        if (future != null)
+          Expanded(
+            child: FutureBuilder(
+              future: future,
+              builder: (context, value) {
+                final data = value.data;
+                if (!value.hasData ||
+                    value.connectionState != ConnectionState.done ||
+                    data == null) {
+                  return const CircularProgressIndicator.adaptive();
+                }
+                return data.fold(
+                  (l) => Center(
+                    child: FlowyText(
+                      l.message,
+                      maxLines: 3,
+                      textAlign: TextAlign.center,
+                    ),
+                  ),
+                  (r) => GridView.count(
+                    crossAxisCount: 3,
+                    mainAxisSpacing: 16.0,
+                    crossAxisSpacing: 10.0,
+                    childAspectRatio: 4 / 3,
+                    children: r.map(
+                      (e) {
+                        final base64Image = base64Decode(e);
+                        return GestureDetector(
+                          onTap: () async {
+                            final tempDirectory = await getTemporaryDirectory();
+                            final path = p.join(
+                              tempDirectory.path,
+                              '${uuid()}.png',
+                            );
+                            File(path).writeAsBytesSync(base64Image);
+                            widget.onSelectImage(path);
+                          },
+                          child: Image.memory(base64Image),
+                        );
+                      },
+                    ).toList(),
+                  ),
+                );
+              },
+            ),
+          )
+      ],
+    );
+  }
+
+  void _search() async {
+    final stabilityAI = await getIt.getAsync<StabilityAIRepository>();
+    setState(() {
+      future = stabilityAI.generateImage(
+        prompt: query,
+        n: 6,
+      );
+    });
+  }
+}

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

@@ -0,0 +1,173 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+import 'package:unsplash_client/unsplash_client.dart';
+
+class UnsplashImageWidget extends StatefulWidget {
+  const UnsplashImageWidget({
+    super.key,
+    required this.onSelectUnsplashImage,
+  });
+
+  final void Function(String url) onSelectUnsplashImage;
+
+  @override
+  State<UnsplashImageWidget> createState() => _UnsplashImageWidgetState();
+}
+
+class _UnsplashImageWidgetState extends State<UnsplashImageWidget> {
+  final client = UnsplashClient(
+    settings: const ClientSettings(
+      credentials: AppCredentials(
+        // TODO: there're the demo keys, we should replace them with the production keys when releasing and inject them with env file.
+        accessKey: 'YyD-LbW5bVolHWZBq5fWRM_3ezkG2XchRFjhNTnK9TE',
+        secretKey: '5z4EnxaXjWjWMnuBhc0Ku0uYW2bsYCZlO-REZaqmV6A',
+      ),
+    ),
+  );
+
+  late Future<List<Photo>> randomPhotos;
+
+  String query = '';
+
+  @override
+  void initState() {
+    super.initState();
+
+    randomPhotos = client.photos
+        .random(count: 18, orientation: PhotoOrientation.landscape)
+        .goAndGet();
+  }
+
+  @override
+  void dispose() {
+    client.close();
+
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Expanded(
+              child: FlowyTextField(
+                autoFocus: true,
+                hintText: LocaleKeys.document_imageBlock_searchForAnImage.tr(),
+                onChanged: (value) => query = value,
+                onEditingComplete: _search,
+              ),
+            ),
+            const HSpace(4.0),
+            FlowyButton(
+              useIntrinsicWidth: true,
+              text: FlowyText(
+                LocaleKeys.search_label.tr(),
+              ),
+              onTap: _search,
+            ),
+          ],
+        ),
+        const VSpace(12.0),
+        Expanded(
+          child: FutureBuilder(
+            future: randomPhotos,
+            builder: (context, value) {
+              final data = value.data;
+              if (!value.hasData ||
+                  value.connectionState != ConnectionState.done ||
+                  data == null ||
+                  data.isEmpty) {
+                return const CircularProgressIndicator.adaptive();
+              }
+              return GridView.count(
+                crossAxisCount: 3,
+                mainAxisSpacing: 16.0,
+                crossAxisSpacing: 10.0,
+                childAspectRatio: 4 / 3,
+                children: data
+                    .map(
+                      (photo) => _UnsplashImage(
+                        photo: photo,
+                        onTap: () => widget.onSelectUnsplashImage(
+                          photo.urls.regular.toString(),
+                        ),
+                      ),
+                    )
+                    .toList(),
+              );
+            },
+          ),
+        ),
+      ],
+    );
+  }
+
+  void _search() {
+    setState(() {
+      randomPhotos = client.photos
+          .random(
+            count: 18,
+            orientation: PhotoOrientation.landscape,
+            query: query,
+          )
+          .goAndGet();
+    });
+  }
+}
+
+class _UnsplashImage extends StatelessWidget {
+  const _UnsplashImage({
+    required this.photo,
+    required this.onTap,
+  });
+
+  final Photo photo;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          Expanded(
+            child: Image.network(
+              photo.urls.thumb.toString(),
+              fit: BoxFit.cover,
+            ),
+          ),
+          const HSpace(2.0),
+          FlowyText(
+            'by ${photo.name}',
+            fontSize: 10.0,
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+extension on Photo {
+  String get name {
+    if (user.username.isNotEmpty) {
+      return user.username;
+    }
+
+    if (user.name.isNotEmpty) {
+      return user.name;
+    }
+
+    if (user.email?.isNotEmpty == true) {
+      return user.email!;
+    }
+
+    return user.id;
+  }
+}

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

@@ -0,0 +1,49 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/startup/startup.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/file_picker/file_picker_service.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flowy_infra_ui/style_widget/hover.dart';
+import 'package:flutter/material.dart';
+
+class UploadImageFileWidget extends StatelessWidget {
+  const UploadImageFileWidget({
+    super.key,
+    required this.onPickFile,
+    this.allowedExtensions = const ['jpg', 'png', 'jpeg'],
+  });
+
+  final void Function(String? path) onPickFile;
+  final List<String> allowedExtensions;
+
+  @override
+  Widget build(BuildContext context) {
+    return FlowyHover(
+      child: GestureDetector(
+        behavior: HitTestBehavior.translucent,
+        onTapDown: (_) async {
+          final result = await getIt<FilePickerService>().pickFiles(
+            dialogTitle: '',
+            allowMultiple: false,
+            type: FileType.image,
+            allowedExtensions: allowedExtensions,
+          );
+          onPickFile(result?.files.firstOrNull?.path);
+        },
+        child: Container(
+          alignment: Alignment.center,
+          padding: const EdgeInsets.symmetric(vertical: 8.0),
+          decoration: BoxDecoration(
+            border: Border.all(
+              color: Theme.of(context).colorScheme.surfaceVariant,
+              width: 1.0,
+            ),
+          ),
+          child: FlowyText(
+            LocaleKeys.document_imageBlock_upload_placeholder.tr(),
+          ),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,186 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/embed_image_url_widget.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/open_ai_image_widget.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/stability_ai_image_widget.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/unsplash_image_widget.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/image/upload_image_file_widget.dart';
+import 'package:appflowy/user/application/user_service.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flowy_infra_ui/style_widget/hover.dart';
+import 'package:flutter/material.dart';
+
+enum UploadImageType {
+  local,
+  url,
+  unsplash,
+  stabilityAI,
+  openAI;
+
+  String get description {
+    switch (this) {
+      case UploadImageType.local:
+        return LocaleKeys.document_imageBlock_upload_label.tr();
+      case UploadImageType.url:
+        return LocaleKeys.document_imageBlock_embedLink_label.tr();
+      case UploadImageType.unsplash:
+        return 'Unsplash';
+      case UploadImageType.openAI:
+        return LocaleKeys.document_imageBlock_ai_label.tr();
+      case UploadImageType.stabilityAI:
+        return LocaleKeys.document_imageBlock_stability_ai_label.tr();
+    }
+  }
+}
+
+class UploadImageMenu extends StatefulWidget {
+  const UploadImageMenu({
+    super.key,
+    required this.onSelectedLocalImage,
+    required this.onSelectedAIImage,
+    required this.onSelectedNetworkImage,
+  });
+
+  final void Function(String? path) onSelectedLocalImage;
+  final void Function(String url) onSelectedAIImage;
+  final void Function(String url) onSelectedNetworkImage;
+
+  @override
+  State<UploadImageMenu> createState() => _UploadImageMenuState();
+}
+
+class _UploadImageMenuState extends State<UploadImageMenu> {
+  int currentTabIndex = 0;
+  List<UploadImageType> values = UploadImageType.values;
+  bool supportOpenAI = false;
+  bool supportStabilityAI = false;
+
+  @override
+  void initState() {
+    super.initState();
+
+    UserBackendService.getCurrentUserProfile().then(
+      (value) {
+        final supportOpenAI = value.fold(
+          (l) => false,
+          (r) => r.openaiKey.isNotEmpty,
+        );
+        final supportStabilityAI = value.fold(
+          (l) => false,
+          (r) => r.stabilityAiKey.isNotEmpty,
+        );
+        if (supportOpenAI != this.supportOpenAI ||
+            supportStabilityAI != this.supportStabilityAI) {
+          setState(() {
+            this.supportOpenAI = supportOpenAI;
+            this.supportStabilityAI = supportStabilityAI;
+          });
+        }
+      },
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return DefaultTabController(
+      length: values.length,
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          TabBar(
+            onTap: (value) => setState(() {
+              currentTabIndex = value;
+            }),
+            indicatorSize: TabBarIndicatorSize.label,
+            isScrollable: true,
+            overlayColor: MaterialStatePropertyAll(
+              Theme.of(context).colorScheme.secondary,
+            ),
+            padding: EdgeInsets.zero,
+            // splashBorderRadius: BorderRadius.circular(4),
+            tabs: values
+                .map(
+                  (e) => FlowyHover(
+                    style: const HoverStyle(borderRadius: BorderRadius.zero),
+                    child: Padding(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 12.0,
+                        vertical: 8.0,
+                      ),
+                      child: FlowyText(e.description),
+                    ),
+                  ),
+                )
+                .toList(),
+          ),
+          const Divider(
+            height: 2,
+          ),
+          _buildTab(),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildTab() {
+    final type = UploadImageType.values[currentTabIndex];
+    switch (type) {
+      case UploadImageType.local:
+        return Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: UploadImageFileWidget(
+            onPickFile: widget.onSelectedLocalImage,
+          ),
+        );
+      case UploadImageType.url:
+        return Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: EmbedImageUrlWidget(
+            onSubmit: widget.onSelectedNetworkImage,
+          ),
+        );
+      case UploadImageType.unsplash:
+        return Expanded(
+          child: Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: UnsplashImageWidget(
+              onSelectUnsplashImage: widget.onSelectedNetworkImage,
+            ),
+          ),
+        );
+      case UploadImageType.openAI:
+        return supportOpenAI
+            ? Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.all(8.0),
+                  child: OpenAIImageWidget(
+                    onSelectNetworkImage: widget.onSelectedAIImage,
+                  ),
+                ),
+              )
+            : Padding(
+                padding: const EdgeInsets.all(8.0),
+                child: FlowyText(
+                  LocaleKeys.document_imageBlock_pleaseInputYourOpenAIKey.tr(),
+                ),
+              );
+      case UploadImageType.stabilityAI:
+        return supportStabilityAI
+            ? Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.all(8.0),
+                  child: StabilityAIImageWidget(
+                    onSelectImage: widget.onSelectedLocalImage,
+                  ),
+                ),
+              )
+            : Padding(
+                padding: const EdgeInsets.all(8.0),
+                child: FlowyText(
+                  LocaleKeys.document_imageBlock_pleaseInputYourStabilityAIKey
+                      .tr(),
+                ),
+              );
+    }
+  }
+}

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

@@ -1,155 +0,0 @@
-import 'package:appflowy/plugins/document/presentation/editor_plugins/base/selectable_svg_widget.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_page_block.dart';
-import 'package:appflowy/workspace/application/view/view_ext.dart';
-import 'package:appflowy/workspace/application/view/view_service.dart';
-import 'package:appflowy_editor/appflowy_editor.dart';
-
-enum MentionType {
-  page;
-
-  static MentionType fromString(String value) {
-    switch (value) {
-      case 'page':
-        return page;
-      default:
-        throw UnimplementedError();
-    }
-  }
-}
-
-class MentionBlockKeys {
-  const MentionBlockKeys._();
-
-  static const mention = 'mention';
-  static const type = 'type'; // MentionType, String
-  static const pageId = 'page_id';
-}
-
-class InlinePageReferenceService {
-  customPageLinkMenu({
-    bool shouldInsertKeyword = false,
-    SelectionMenuStyle style = SelectionMenuStyle.light,
-    String character = '@',
-  }) {
-    return CharacterShortcutEvent(
-      key: 'show page link menu',
-      character: character,
-      handler: (editorState) async {
-        final items = await generatePageItems(character);
-        return _showPageSelectionMenu(
-          editorState,
-          items,
-          shouldInsertKeyword: shouldInsertKeyword,
-          style: style,
-          character: character,
-        );
-      },
-    );
-  }
-
-  SelectionMenuService? _selectionMenuService;
-  Future<bool> _showPageSelectionMenu(
-    EditorState editorState,
-    List<SelectionMenuItem> items, {
-    bool shouldInsertKeyword = true,
-    SelectionMenuStyle style = SelectionMenuStyle.light,
-    String character = '@',
-  }) async {
-    if (PlatformExtension.isMobile) {
-      return false;
-    }
-
-    final selection = editorState.selection;
-    if (selection == null) {
-      return false;
-    }
-
-    // delete the selection
-    await editorState.deleteSelection(selection);
-
-    final afterSelection = editorState.selection;
-    if (afterSelection == null || !afterSelection.isCollapsed) {
-      assert(false, 'the selection should be collapsed');
-      return true;
-    }
-    await editorState.insertTextAtPosition(
-      character,
-      position: selection.start,
-    );
-
-    () {
-      final context = editorState.getNodeAtPath(selection.start.path)?.context;
-      if (context != null) {
-        _selectionMenuService = SelectionMenu(
-          context: context,
-          editorState: editorState,
-          selectionMenuItems: items,
-          deleteSlashByDefault: false,
-          style: style,
-          itemCountFilter: 5,
-        );
-        _selectionMenuService?.show();
-      }
-    }();
-
-    return true;
-  }
-
-  Future<List<SelectionMenuItem>> generatePageItems(String character) async {
-    final service = ViewBackendService();
-    final views = await service.fetchViews();
-    if (views.isEmpty) {
-      return [];
-    }
-    final List<SelectionMenuItem> pages = [];
-    views.sort(((a, b) => b.createTime.compareTo(a.createTime)));
-
-    for (final view in views) {
-      final SelectionMenuItem pageSelectionMenuItem = SelectionMenuItem(
-        icon: (editorState, isSelected, style) => SelectableSvgWidget(
-          data: view.iconData,
-          isSelected: isSelected,
-          style: style,
-        ),
-        keywords: [
-          view.name.toLowerCase(),
-        ],
-        name: view.name,
-        handler: (editorState, menuService, context) async {
-          final selection = editorState.selection;
-          if (selection == null || !selection.isCollapsed) {
-            return;
-          }
-          final node = editorState.getNodeAtPath(selection.end.path);
-          final delta = node?.delta;
-          if (node == null || delta == null) {
-            return;
-          }
-          final index = selection.endIndex;
-          final lastKeywordIndex =
-              delta.toPlainText().substring(0, index).lastIndexOf(character);
-          // @page name -> $
-          // preload the page infos
-          pageMemorizer[view.id] = view;
-          final transaction = editorState.transaction
-            ..replaceText(
-              node,
-              lastKeywordIndex,
-              index - lastKeywordIndex,
-              '\$',
-              attributes: {
-                MentionBlockKeys.mention: {
-                  MentionBlockKeys.type: MentionType.page.name,
-                  MentionBlockKeys.pageId: view.id,
-                }
-              },
-            );
-          await editorState.apply(transaction);
-        },
-      );
-      pages.add(pageSelectionMenuItem);
-    }
-
-    return pages;
-  }
-}

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

@@ -1,22 +1,83 @@
-import 'package:appflowy/plugins/document/presentation/editor_plugins/inline_page/inline_page_reference.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_date_block.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_page_block.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+enum MentionType {
+  page,
+  date,
+  reminder;
+
+  static MentionType fromString(String value) {
+    switch (value) {
+      case 'page':
+        return page;
+      case 'date':
+        return date;
+      case 'reminder':
+        return reminder;
+      default:
+        throw UnimplementedError();
+    }
+  }
+}
+
+class MentionBlockKeys {
+  const MentionBlockKeys._();
+
+  static const uid = 'uid'; // UniqueID
+  static const mention = 'mention';
+  static const type = 'type'; // MentionType, String
+  static const pageId = 'page_id';
+
+  // Related to Reminder and Date blocks
+  static const date = 'date';
+  static const includeTime = 'include_time';
+}
 
 class MentionBlock extends StatelessWidget {
   const MentionBlock({
     super.key,
     required this.mention,
+    required this.node,
+    required this.index,
   });
 
-  final Map mention;
+  final Map<String, dynamic> mention;
+  final Node node;
+  final int index;
 
   @override
   Widget build(BuildContext context) {
     final type = MentionType.fromString(mention[MentionBlockKeys.type]);
-    if (type == MentionType.page) {
-      final pageId = mention[MentionBlockKeys.pageId];
-      return MentionPageBlock(key: ValueKey(pageId), pageId: pageId);
+
+    switch (type) {
+      case MentionType.page:
+        final String pageId = mention[MentionBlockKeys.pageId];
+        return MentionPageBlock(
+          key: ValueKey(pageId),
+          pageId: pageId,
+        );
+      case MentionType.reminder:
+      case MentionType.date:
+        final String date = mention[MentionBlockKeys.date];
+        final BuildContext editorContext =
+            context.read<EditorState>().document.root.context!;
+        return MentionDateBlock(
+          key: ValueKey(date),
+          editorContext: editorContext,
+          date: date,
+          node: node,
+          index: index,
+          isReminder: type == MentionType.reminder,
+          reminderId: type == MentionType.reminder
+              ? mention[MentionBlockKeys.uid]
+              : null,
+          includeTime: mention[MentionBlockKeys.includeTime] ?? false,
+        );
+      default:
+        return const SizedBox.shrink();
     }
-    throw UnimplementedError();
   }
 }

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

@@ -0,0 +1,181 @@
+import 'package:appflowy/generated/flowy_svgs.g.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/user/application/reminder/reminder_bloc.dart';
+import 'package:appflowy/workspace/application/appearance.dart';
+import 'package:appflowy/workspace/application/settings/date_time/date_format_ext.dart';
+import 'package:appflowy/workspace/presentation/widgets/date_picker/widgets/date_picker_dialog.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:calendar_view/calendar_view.dart';
+import 'package:collection/collection.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+class MentionDateBlock extends StatelessWidget {
+  const MentionDateBlock({
+    super.key,
+    required this.editorContext,
+    required this.date,
+    required this.index,
+    required this.node,
+    this.isReminder = false,
+    this.reminderId,
+    this.includeTime = false,
+  });
+
+  final BuildContext editorContext;
+  final String date;
+  final int index;
+  final Node node;
+
+  final bool isReminder;
+
+  /// If [isReminder] is true, then this must not be
+  /// null or empty
+  final String? reminderId;
+
+  final bool includeTime;
+
+  @override
+  Widget build(BuildContext context) {
+    DateTime? parsedDate = DateTime.tryParse(date);
+    if (parsedDate == null) {
+      return const SizedBox.shrink();
+    }
+
+    final fontSize = context.read<DocumentAppearanceCubit>().state.fontSize;
+
+    return MultiBlocProvider(
+      providers: [
+        BlocProvider<ReminderBloc>.value(value: context.read<ReminderBloc>()),
+        BlocProvider<AppearanceSettingsCubit>.value(
+          value: context.read<AppearanceSettingsCubit>(),
+        ),
+      ],
+      child: BlocBuilder<AppearanceSettingsCubit, AppearanceSettingsState>(
+        buildWhen: (previous, current) =>
+            previous.dateFormat != current.dateFormat ||
+            previous.timeFormat != current.timeFormat,
+        builder: (context, appearance) =>
+            BlocBuilder<ReminderBloc, ReminderState>(
+          builder: (context, state) {
+            final reminder =
+                state.reminders.firstWhereOrNull((r) => r.id == reminderId);
+            final noReminder = reminder == null && isReminder;
+
+            final formattedDate = appearance.dateFormat
+                .formatDate(parsedDate!, includeTime, appearance.timeFormat);
+
+            final options = DatePickerOptions(
+              selectedDay: parsedDate,
+              focusedDay: parsedDate,
+              firstDay: isReminder
+                  ? noReminder
+                      ? parsedDate
+                      : DateTime.now()
+                  : null,
+              lastDay: noReminder ? parsedDate : null,
+              includeTime: includeTime,
+              timeFormat: appearance.timeFormat,
+              onIncludeTimeChanged: (includeTime) {
+                _updateBlock(parsedDate!.withoutTime, includeTime);
+
+                // We can remove time from the date/reminder
+                //  block when toggled off.
+                if (!includeTime && isReminder) {
+                  _updateScheduledAt(
+                    reminderId: reminderId!,
+                    selectedDay: parsedDate!.withoutTime,
+                  );
+                }
+              },
+              onDaySelected: (selectedDay, focusedDay, includeTime) {
+                parsedDate = selectedDay;
+
+                _updateBlock(selectedDay, includeTime);
+
+                if (isReminder && date != selectedDay.toIso8601String()) {
+                  _updateScheduledAt(
+                    reminderId: reminderId!,
+                    selectedDay: selectedDay,
+                  );
+                }
+              },
+            );
+
+            return GestureDetector(
+              onTapDown: (details) => DatePickerMenu(
+                context: context,
+                editorState: context.read<EditorState>(),
+              ).show(details.globalPosition, options: options),
+              child: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 4),
+                child: MouseRegion(
+                  cursor: SystemMouseCursors.click,
+                  child: Row(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      FlowySvg(
+                        isReminder ? FlowySvgs.clock_alarm_s : FlowySvgs.date_s,
+                        size: const Size.square(18.0),
+                        color: isReminder && reminder?.isAck == true
+                            ? Theme.of(context).colorScheme.error
+                            : null,
+                      ),
+                      const HSpace(2),
+                      FlowyText(
+                        formattedDate,
+                        fontSize: fontSize,
+                        color: isReminder && reminder?.isAck == true
+                            ? Theme.of(context).colorScheme.error
+                            : null,
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            );
+          },
+        ),
+      ),
+    );
+  }
+
+  void _updateBlock(
+    DateTime date, [
+    bool includeTime = false,
+  ]) {
+    final editorState = editorContext.read<EditorState>();
+    final transaction = editorState.transaction
+      ..formatText(node, index, 1, {
+        MentionBlockKeys.mention: {
+          MentionBlockKeys.type:
+              isReminder ? MentionType.reminder.name : MentionType.date.name,
+          MentionBlockKeys.date: date.toIso8601String(),
+          MentionBlockKeys.uid: reminderId,
+          MentionBlockKeys.includeTime: includeTime,
+        },
+      });
+
+    editorState.apply(transaction, withUpdateSelection: false);
+
+    // Length of rendered block changes, this synchronizes
+    //  the cursor with the new block render
+    editorState.updateSelectionWithReason(
+      editorState.selection,
+      reason: SelectionUpdateReason.transaction,
+    );
+  }
+
+  void _updateScheduledAt({
+    required String reminderId,
+    required DateTime selectedDay,
+  }) {
+    editorContext.read<ReminderBloc>().add(
+          ReminderEvent.update(
+            ReminderUpdate(id: reminderId, scheduledAt: selectedDay),
+          ),
+        );
+  }
+}

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/openai/service/openai_client.dart

@@ -1,20 +1,20 @@
+import 'dart:async';
 import 'dart:convert';
 
 import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/service/text_edit.dart';
-
-import 'text_completion.dart';
 import 'package:dartz/dartz.dart';
-import 'dart:async';
+import 'package:http/http.dart' as http;
 
 import 'error.dart';
-import 'package:http/http.dart' as http;
+import 'text_completion.dart';
 
 // Please fill in your own API key
 const apiKey = '';
 
 enum OpenAIRequestType {
   textCompletion,
-  textEdit;
+  textEdit,
+  imageGenerations;
 
   Uri get uri {
     switch (this) {
@@ -22,6 +22,8 @@ enum OpenAIRequestType {
         return Uri.parse('https://api.openai.com/v1/completions');
       case OpenAIRequestType.textEdit:
         return Uri.parse('https://api.openai.com/v1/edits');
+      case OpenAIRequestType.imageGenerations:
+        return Uri.parse('https://api.openai.com/v1/images/generations');
     }
   }
 }
@@ -64,6 +66,17 @@ abstract class OpenAIRepository {
     required String instruction,
     double temperature = 0.3,
   });
+
+  /// Generate image from GPT-3
+  ///
+  /// [prompt] is the prompt text
+  /// [n] is the number of images to generate
+  ///
+  /// the result is a list of urls
+  Future<Either<OpenAIError, List<String>>> generateImage({
+    required String prompt,
+    int n = 1,
+  });
 }
 
 class HttpOpenAIRepository implements OpenAIRepository {
@@ -228,4 +241,40 @@ class HttpOpenAIRepository implements OpenAIRepository {
       return Left(OpenAIError.fromJson(json.decode(response.body)['error']));
     }
   }
+
+  @override
+  Future<Either<OpenAIError, List<String>>> generateImage({
+    required String prompt,
+    int n = 1,
+  }) async {
+    final parameters = {
+      'prompt': prompt,
+      'n': n,
+      'size': '512x512',
+    };
+
+    try {
+      final response = await client.post(
+        OpenAIRequestType.imageGenerations.uri,
+        headers: headers,
+        body: json.encode(parameters),
+      );
+
+      if (response.statusCode == 200) {
+        final data = json.decode(
+          utf8.decode(response.bodyBytes),
+        )['data'] as List;
+        final urls = data
+            .map((e) => e.values)
+            .expand((e) => e)
+            .map((e) => e.toString())
+            .toList();
+        return Right(urls);
+      } else {
+        return Left(OpenAIError.fromJson(json.decode(response.body)['error']));
+      }
+    } catch (error) {
+      return Left(OpenAIError(message: error.toString()));
+    }
+  }
 }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/openai/widgets/auto_completion_node_widget.dart

@@ -5,6 +5,7 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/uti
 import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/widgets/discard_dialog.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/widgets/loading.dart';
 import 'package:appflowy/user/application/user_service.dart';
+import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
@@ -196,9 +197,13 @@ class _AutoCompletionBlockComponentState
         .then((value) => value.toOption().toNullable());
     if (userProfile == null) {
       loading.stop();
-      await _showError(
-        LocaleKeys.document_plugins_autoGeneratorCantGetOpenAIKey.tr(),
-      );
+      if (mounted) {
+        showSnackBarMessage(
+          context,
+          LocaleKeys.document_plugins_autoGeneratorCantGetOpenAIKey.tr(),
+          showCancel: true,
+        );
+      }
       return;
     }
 
@@ -231,7 +236,11 @@ class _AutoCompletionBlockComponentState
       },
       onError: (error) async {
         loading.stop();
-        await _showError(error.message);
+        showSnackBarMessage(
+          context,
+          error.message,
+          showCancel: true,
+        );
       },
     );
     await _updateGenerationCount();
@@ -282,9 +291,13 @@ class _AutoCompletionBlockComponentState
         .then((value) => value.toOption().toNullable());
     if (userProfile == null) {
       loading.stop();
-      await _showError(
-        LocaleKeys.document_plugins_autoGeneratorCantGetOpenAIKey.tr(),
-      );
+      if (mounted) {
+        showSnackBarMessage(
+          context,
+          LocaleKeys.document_plugins_autoGeneratorCantGetOpenAIKey.tr(),
+          showCancel: true,
+        );
+      }
       return;
     }
     final textRobot = TextRobot(editorState: editorState);
@@ -311,7 +324,11 @@ class _AutoCompletionBlockComponentState
       onEnd: () async {},
       onError: (error) async {
         loading.stop();
-        await _showError(error.message);
+        showSnackBarMessage(
+          context,
+          error.message,
+          showCancel: true,
+        );
       },
     );
     await _updateGenerationCount();
@@ -399,20 +416,6 @@ class _AutoCompletionBlockComponentState
     await editorState.apply(transaction);
   }
 
-  Future<void> _showError(String message) async {
-    ScaffoldMessenger.of(context).showSnackBar(
-      SnackBar(
-        action: SnackBarAction(
-          label: LocaleKeys.button_Cancel.tr(),
-          onPressed: () {
-            ScaffoldMessenger.of(context).hideCurrentSnackBar();
-          },
-        ),
-        content: FlowyText(message),
-      ),
-    );
-  }
-
   void _subscribeSelectionGesture() {
     interceptor = SelectionGestureInterceptor(
       key: AutoCompletionBlockKeys.type,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/openai/widgets/smart_edit_node_widget.dart

@@ -5,6 +5,7 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/uti
 import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/widgets/discard_dialog.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/widgets/smart_edit_action.dart';
 import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -454,24 +455,14 @@ class _SmartEditInputWidgetState extends State<SmartEditInputWidget> {
           });
         },
         onError: (error) async {
-          await _showError(error.message);
+          showSnackBarMessage(
+            context,
+            error.message,
+            showCancel: true,
+          );
           await _onExit();
         },
       );
     }
   }
-
-  Future<void> _showError(String message) async {
-    ScaffoldMessenger.of(context).showSnackBar(
-      SnackBar(
-        action: SnackBarAction(
-          label: LocaleKeys.button_Cancel.tr(),
-          onPressed: () {
-            ScaffoldMessenger.of(context).hideCurrentSnackBar();
-          },
-        ),
-        content: FlowyText(message),
-      ),
-    );
-  }
 }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/openai/widgets/smart_edit_toolbar_item.dart

@@ -2,12 +2,12 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/widgets/smart_edit_action.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy/user/application/user_service.dart';
+import 'package:appflowy/workspace/presentation/home/toast.dart';
 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:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
-import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 
 final ToolbarItem smartEditItem = ToolbarItem(
@@ -55,7 +55,9 @@ class _SmartEditActionListState extends State<SmartEditActionList> {
       actions: SmartEditAction.values
           .map((action) => SmartEditActionWrapper(action))
           .toList(),
+      onClosed: () => keepEditorFocusNotifier.value -= 1,
       buildChild: (controller) {
+        keepEditorFocusNotifier.value += 1;
         return FlowyIconButton(
           hoverColor: Colors.transparent,
           tooltipText: isOpenAIEnabled
@@ -71,7 +73,11 @@ class _SmartEditActionListState extends State<SmartEditActionList> {
             if (isOpenAIEnabled) {
               controller.show();
             } else {
-              _showError(LocaleKeys.document_plugins_smartEditDisabled.tr());
+              showSnackBarMessage(
+                context,
+                LocaleKeys.document_plugins_smartEditDisabled.tr(),
+                showCancel: true,
+              );
             }
           },
         );
@@ -111,18 +117,4 @@ class _SmartEditActionListState extends State<SmartEditActionList> {
       withUpdateSelection: false,
     );
   }
-
-  Future<void> _showError(String message) async {
-    ScaffoldMessenger.of(context).showSnackBar(
-      SnackBar(
-        action: SnackBarAction(
-          label: LocaleKeys.button_Cancel.tr(),
-          onPressed: () {
-            ScaffoldMessenger.of(context).hideCurrentSnackBar();
-          },
-        ),
-        content: FlowyText(message),
-      ),
-    );
-  }
 }

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

@@ -135,7 +135,7 @@ class _OutlineBlockWidgetState extends State<OutlineBlockWidget>
         ),
       );
     }
-    return Container(
+    return DecoratedBox(
       decoration: BoxDecoration(
         borderRadius: const BorderRadius.all(Radius.circular(8.0)),
         color: backgroundColor,

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

@@ -12,8 +12,9 @@ export 'copy_and_paste/custom_paste_command.dart';
 export 'database/database_view_block_component.dart';
 export 'database/inline_database_menu_item.dart';
 export 'database/referenced_database_menu_item.dart';
-export 'emoji_picker/emoji_menu_item.dart';
+export 'error/error_block_component_builder.dart';
 export 'extensions/flowy_tint_extension.dart';
+export 'find_and_replace/find_and_replace_menu.dart';
 export 'font/customize_font_toolbar_item.dart';
 export 'header/cover_editor_bloc.dart';
 export 'header/custom_cover_picker.dart';

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

@@ -0,0 +1,95 @@
+import 'dart:async';
+import 'dart:convert';
+
+import 'package:appflowy/plugins/document/presentation/editor_plugins/stability_ai/stability_ai_error.dart';
+import 'package:dartz/dartz.dart';
+import 'package:http/http.dart' as http;
+
+enum StabilityAIRequestType {
+  imageGenerations;
+
+  Uri get uri {
+    switch (this) {
+      case StabilityAIRequestType.imageGenerations:
+        return Uri.parse(
+          'https://api.stability.ai/v1/generation/stable-diffusion-xl-1024-v1-0/text-to-image',
+        );
+    }
+  }
+}
+
+abstract class StabilityAIRepository {
+  /// Generate image from Stability AI
+  ///
+  /// [prompt] is the prompt text
+  /// [n] is the number of images to generate
+  ///
+  /// the return value is a list of base64 encoded images
+  Future<Either<StabilityAIRequestError, List<String>>> generateImage({
+    required String prompt,
+    int n = 1,
+  });
+}
+
+class HttpStabilityAIRepository implements StabilityAIRepository {
+  const HttpStabilityAIRepository({
+    required this.client,
+    required this.apiKey,
+  });
+
+  final http.Client client;
+  final String apiKey;
+
+  Map<String, String> get headers => {
+        'Authorization': 'Bearer $apiKey',
+        'Content-Type': 'application/json',
+      };
+
+  @override
+  Future<Either<StabilityAIRequestError, List<String>>> generateImage({
+    required String prompt,
+    int n = 1,
+  }) async {
+    final parameters = {
+      'text_prompts': [
+        {
+          'text': prompt,
+        }
+      ],
+      'samples': n,
+    };
+
+    try {
+      final response = await client.post(
+        StabilityAIRequestType.imageGenerations.uri,
+        headers: headers,
+        body: json.encode(parameters),
+      );
+
+      final data = json.decode(
+        utf8.decode(response.bodyBytes),
+      );
+      if (response.statusCode == 200) {
+        final artifacts = data['artifacts'] as List;
+        final base64Images = artifacts
+            .map(
+              (e) => e['base64'].toString(),
+            )
+            .toList();
+        return Right(base64Images);
+      } else {
+        return Left(
+          StabilityAIRequestError(
+            data['message'].toString(),
+          ),
+        );
+      }
+    } catch (error) {
+      return Left(
+        StabilityAIRequestError(
+          error.toString(),
+        ),
+      );
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+class StabilityAIRequestError {
+  final String message;
+
+  StabilityAIRequestError(this.message);
+
+  @override
+  String toString() {
+    return 'StabilityAIRequestError{message: $message}';
+  }
+}

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

@@ -60,6 +60,12 @@ CharacterShortcutEvent insertChildNodeInsideToggleList = CharacterShortcutEvent(
           ..afterSelection = Selection.collapsed(
             Position(path: selection.start.path, offset: 0),
           );
+      } else if (selection.startIndex == 0) {
+        // insert a paragraph block above the current toggle list block
+        transaction.insertNode(selection.start.path, paragraphNode());
+        transaction.afterSelection = Selection.collapsed(
+          Position(path: selection.start.path.next, offset: 0),
+        );
       } else {
         // insert a toggle list block below the current toggle list block
         transaction

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

@@ -1,8 +1,11 @@
 import 'package:appflowy/plugins/document/presentation/editor_plugins/inline_math_equation/inline_math_equation.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/inline_page/inline_page_reference.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';
@@ -161,6 +164,17 @@ class EditorStyleCustomizer {
     );
   }
 
+  InlineActionsMenuStyle inlineActionsMenuStyleBuilder() {
+    final theme = Theme.of(context);
+    return InlineActionsMenuStyle(
+      backgroundColor: theme.cardColor,
+      groupTextColor: theme.colorScheme.onBackground.withOpacity(.8),
+      menuItemTextColor: theme.colorScheme.onBackground,
+      menuItemSelectedColor: theme.hoverColor,
+      menuItemSelectedTextColor: theme.colorScheme.onSurface,
+    );
+  }
+
   FloatingToolbarStyle floatingToolbarStyleBuilder() {
     final theme = Theme.of(context);
     return FloatingToolbarStyle(
@@ -203,19 +217,28 @@ class EditorStyleCustomizer {
       }
     }
 
-    // customize the inline mention block, like inline page
-    final mention = attributes[MentionBlockKeys.mention] as Map?;
+    // Inline Mentions (Page Reference, Date, Reminder, etc.)
+    final mention =
+        attributes[MentionBlockKeys.mention] as Map<String, dynamic>?;
     if (mention != null) {
       final type = mention[MentionBlockKeys.type];
-      if (type == MentionType.page.name) {
-        return WidgetSpan(
-          alignment: PlaceholderAlignment.middle,
-          child: MentionBlock(
-            key: ValueKey(mention[MentionBlockKeys.pageId]),
-            mention: mention,
+      return WidgetSpan(
+        alignment: PlaceholderAlignment.middle,
+        child: MentionBlock(
+          key: ValueKey(
+            switch (type) {
+              MentionType.page => mention[MentionBlockKeys.pageId],
+              MentionType.date ||
+              MentionType.reminder =>
+                mention[MentionBlockKeys.date],
+              _ => MentionBlockKeys.mention,
+            },
           ),
-        );
-      }
+          node: node,
+          index: index,
+          mention: mention,
+        ),
+      );
     }
 
     // customize the inline math equation block

frontend/appflowy_flutter/lib/plugins/document/presentation/more/more_button.dart

@@ -3,6 +3,7 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/more/cubit/document_appearance_cubit.dart';
 import 'package:appflowy/plugins/document/presentation/more/font_size_switcher.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
@@ -16,7 +17,6 @@ class DocumentMoreButton extends StatelessWidget {
     return PopupMenuButton<int>(
       color: Theme.of(context).colorScheme.surfaceVariant,
       offset: const Offset(0, 30),
-      tooltip: LocaleKeys.moreAction_moreOptions.tr(),
       itemBuilder: (context) {
         return [
           PopupMenuItem(
@@ -29,10 +29,13 @@ class DocumentMoreButton extends StatelessWidget {
           ),
         ];
       },
-      child: FlowySvg(
-        FlowySvgs.details_s,
-        size: const Size(18, 18),
-        color: Theme.of(context).iconTheme.color,
+      child: FlowyTooltip.delayed(
+        message: LocaleKeys.moreAction_moreOptions.tr(),
+        child: FlowySvg(
+          FlowySvgs.details_s,
+          size: const Size(18, 18),
+          color: Theme.of(context).iconTheme.color,
+        ),
       ),
     );
   }

frontend/appflowy_flutter/lib/plugins/inline_actions/handlers/date_reference.dart

@@ -0,0 +1,188 @@
+import 'package:appflowy/date/date_service.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/base/string_extension.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_block.dart';
+import 'package:appflowy/plugins/inline_actions/inline_actions_result.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+
+final _keywords = [
+  LocaleKeys.inlineActions_date.tr().toLowerCase(),
+];
+
+class DateReferenceService {
+  DateReferenceService(this.context) {
+    // Initialize locale
+    _locale = context.locale.toLanguageTag();
+
+    // Initializes options
+    _setOptions();
+  }
+
+  final BuildContext context;
+
+  late String _locale;
+  late List<InlineActionsMenuItem> _allOptions;
+
+  List<InlineActionsMenuItem> options = [];
+
+  Future<InlineActionsResult> dateReferenceDelegate([
+    String? search,
+  ]) async {
+    // Checks if Locale has changed since last
+    _setLocale();
+
+    // Filters static options
+    _filterOptions(search);
+
+    // Searches for date by pattern
+    _searchDate(search);
+
+    // Searches for date by natural language prompt
+    await _searchDateNLP(search);
+
+    return InlineActionsResult(
+      title: LocaleKeys.inlineActions_date.tr(),
+      results: options,
+    );
+  }
+
+  void _filterOptions(String? search) {
+    if (search == null || search.isEmpty) {
+      options = _allOptions;
+      return;
+    }
+
+    options = _allOptions
+        .where(
+          (option) =>
+              option.keywords != null &&
+              option.keywords!.isNotEmpty &&
+              option.keywords!.any(
+                (keyword) => keyword.contains(search.toLowerCase()),
+              ),
+        )
+        .toList();
+
+    if (options.isEmpty && _keywords.any((k) => search.startsWith(k))) {
+      _setOptions();
+      options = _allOptions;
+    }
+  }
+
+  void _searchDate(String? search) {
+    if (search == null || search.isEmpty) {
+      return;
+    }
+
+    try {
+      final date = DateFormat.yMd(_locale).parse(search);
+      options.insert(0, _itemFromDate(date));
+    } catch (_) {
+      return;
+    }
+  }
+
+  Future<void> _searchDateNLP(String? search) async {
+    if (search == null || search.isEmpty) {
+      return;
+    }
+
+    final result = await DateService.queryDate(search);
+
+    result.fold(
+      (l) {},
+      (date) => options.insert(0, _itemFromDate(date)),
+    );
+  }
+
+  Future<void> _insertDateReference(
+    EditorState editorState,
+    DateTime date,
+    int start,
+    int end,
+  ) async {
+    final selection = editorState.selection;
+    if (selection == null || !selection.isCollapsed) {
+      return;
+    }
+
+    final node = editorState.getNodeAtPath(selection.end.path);
+    final delta = node?.delta;
+    if (node == null || delta == null) {
+      return;
+    }
+
+    final transaction = editorState.transaction
+      ..replaceText(
+        node,
+        start,
+        end,
+        '\$',
+        attributes: {
+          MentionBlockKeys.mention: {
+            MentionBlockKeys.type: MentionType.date.name,
+            MentionBlockKeys.date: date.toIso8601String(),
+          }
+        },
+      );
+
+    await editorState.apply(transaction);
+  }
+
+  void _setOptions() {
+    final today = DateTime.now();
+    final tomorrow = today.add(const Duration(days: 1));
+    final yesterday = today.subtract(const Duration(days: 1));
+
+    _allOptions = [
+      _itemFromDate(
+        today,
+        LocaleKeys.relativeDates_today.tr(),
+        [DateFormat.yMd(_locale).format(today)],
+      ),
+      _itemFromDate(
+        tomorrow,
+        LocaleKeys.relativeDates_tomorrow.tr(),
+        [DateFormat.yMd(_locale).format(tomorrow)],
+      ),
+      _itemFromDate(
+        yesterday,
+        LocaleKeys.relativeDates_yesterday.tr(),
+        [DateFormat.yMd(_locale).format(yesterday)],
+      ),
+    ];
+  }
+
+  /// Sets Locale on each search to make sure
+  /// keywords are localized
+  void _setLocale() {
+    final locale = context.locale.toLanguageTag();
+
+    if (locale != _locale) {
+      _locale = locale;
+      _setOptions();
+    }
+  }
+
+  InlineActionsMenuItem _itemFromDate(
+    DateTime date, [
+    String? label,
+    List<String>? keywords,
+  ]) {
+    final labelStr = label ?? DateFormat.yMd(_locale).format(date);
+
+    return InlineActionsMenuItem(
+      label: labelStr.capitalize(),
+      keywords: [labelStr.toLowerCase(), ...?keywords],
+      onSelected: (context, editorState, menuService, replace) =>
+          _insertDateReference(
+        editorState,
+        date,
+        replace.$1,
+        replace.$2,
+      ),
+    );
+  }
+}

frontend/appflowy_flutter/lib/plugins/inline_actions/handlers/inline_page_reference.dart

@@ -0,0 +1,120 @@
+import 'dart:async';
+
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_block.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_page_block.dart';
+import 'package:appflowy/plugins/inline_actions/inline_actions_result.dart';
+import 'package:appflowy/workspace/application/view/view_service.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:easy_localization/easy_localization.dart';
+
+class InlinePageReferenceService {
+  InlinePageReferenceService({required this.currentViewId}) {
+    init();
+  }
+
+  final Completer _initCompleter = Completer<void>();
+  final String currentViewId;
+
+  late final ViewBackendService service;
+  List<InlineActionsMenuItem> _items = [];
+  List<InlineActionsMenuItem> _filtered = [];
+
+  Future<void> init() async {
+    service = ViewBackendService();
+
+    _generatePageItems(currentViewId).then((value) {
+      _items = value;
+      _filtered = value;
+      _initCompleter.complete();
+    });
+  }
+
+  Future<List<InlineActionsMenuItem>> _filterItems(String? search) async {
+    await _initCompleter.future;
+
+    if (search == null || search.isEmpty) {
+      return _items;
+    }
+
+    return _items
+        .where(
+          (item) =>
+              item.keywords != null &&
+              item.keywords!.isNotEmpty &&
+              item.keywords!.any(
+                (keyword) => keyword.contains(search.toLowerCase()),
+              ),
+        )
+        .toList();
+  }
+
+  Future<InlineActionsResult> inlinePageReferenceDelegate([
+    String? search,
+  ]) async {
+    _filtered = await _filterItems(search);
+
+    return InlineActionsResult(
+      title: LocaleKeys.inlineActions_pageReference.tr(),
+      results: _filtered,
+    );
+  }
+
+  Future<List<InlineActionsMenuItem>> _generatePageItems(
+    String currentViewId,
+  ) async {
+    final views = await service.fetchViews();
+    if (views.isEmpty) {
+      return [];
+    }
+
+    final List<InlineActionsMenuItem> pages = [];
+    views.sort(((a, b) => b.createTime.compareTo(a.createTime)));
+
+    for (final view in views) {
+      if (view.id == currentViewId) {
+        continue;
+      }
+
+      final pageSelectionMenuItem = InlineActionsMenuItem(
+        keywords: [view.name.toLowerCase()],
+        label: view.name,
+        onSelected: (context, editorState, menuService, replace) async {
+          final selection = editorState.selection;
+          if (selection == null || !selection.isCollapsed) {
+            return;
+          }
+
+          final node = editorState.getNodeAtPath(selection.end.path);
+          final delta = node?.delta;
+          if (node == null || delta == null) {
+            return;
+          }
+
+          // @page name -> $
+          // preload the page infos
+          pageMemorizer[view.id] = view;
+          final transaction = editorState.transaction
+            ..replaceText(
+              node,
+              replace.$1,
+              replace.$2,
+              '\$',
+              attributes: {
+                MentionBlockKeys.mention: {
+                  MentionBlockKeys.type: MentionType.page.name,
+                  MentionBlockKeys.pageId: view.id,
+                }
+              },
+            );
+
+          await editorState.apply(transaction);
+        },
+      );
+
+      pages.add(pageSelectionMenuItem);
+    }
+
+    return pages;
+  }
+}

frontend/appflowy_flutter/lib/plugins/inline_actions/handlers/reminder_reference.dart

@@ -0,0 +1,217 @@
+import 'package:appflowy/date/date_service.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/application/doc_bloc.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/base/string_extension.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_block.dart';
+import 'package:appflowy/plugins/inline_actions/inline_actions_result.dart';
+import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
+import 'package:appflowy_backend/protobuf/flowy-user/reminder.pb.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:fixnum/fixnum.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:nanoid/nanoid.dart';
+
+final _keywords = [
+  LocaleKeys.inlineActions_reminder_groupTitle.tr().toLowerCase(),
+  LocaleKeys.inlineActions_reminder_shortKeyword.tr().toLowerCase(),
+];
+
+class ReminderReferenceService {
+  ReminderReferenceService(this.context) {
+    // Initialize locale
+    _locale = context.locale.toLanguageTag();
+
+    // Initializes options
+    _setOptions();
+  }
+
+  final BuildContext context;
+
+  late String _locale;
+  late List<InlineActionsMenuItem> _allOptions;
+
+  List<InlineActionsMenuItem> options = [];
+
+  Future<InlineActionsResult> reminderReferenceDelegate([
+    String? search,
+  ]) async {
+    // Checks if Locale has changed since last
+    _setLocale();
+
+    // Filters static options
+    _filterOptions(search);
+
+    // Searches for date by pattern
+    _searchDate(search);
+
+    // Searches for date by natural language prompt
+    await _searchDateNLP(search);
+
+    return _groupFromResults(options);
+  }
+
+  InlineActionsResult _groupFromResults([
+    List<InlineActionsMenuItem>? options,
+  ]) =>
+      InlineActionsResult(
+        title: LocaleKeys.inlineActions_reminder_groupTitle.tr(),
+        results: options ?? [],
+        startsWithKeywords: [
+          LocaleKeys.inlineActions_reminder_groupTitle.tr().toLowerCase(),
+          LocaleKeys.inlineActions_reminder_shortKeyword.tr().toLowerCase(),
+        ],
+      );
+
+  void _filterOptions(String? search) {
+    if (search == null || search.isEmpty) {
+      options = _allOptions;
+      return;
+    }
+
+    options = _allOptions
+        .where(
+          (option) =>
+              option.keywords != null &&
+              option.keywords!.isNotEmpty &&
+              option.keywords!.any(
+                (keyword) => keyword.contains(search.toLowerCase()),
+              ),
+        )
+        .toList();
+
+    if (options.isEmpty && _keywords.any((k) => search.startsWith(k))) {
+      _setOptions();
+      options = _allOptions;
+    }
+  }
+
+  void _searchDate(String? search) {
+    if (search == null || search.isEmpty) {
+      return;
+    }
+
+    try {
+      final date = DateFormat.yMd(_locale).parse(search);
+      options.insert(0, _itemFromDate(date));
+    } catch (_) {
+      return;
+    }
+  }
+
+  Future<void> _searchDateNLP(String? search) async {
+    if (search == null || search.isEmpty) {
+      return;
+    }
+
+    final result = await DateService.queryDate(search);
+
+    result.fold(
+      (l) {},
+      (date) {
+        // Only insert dates in the future
+        if (DateTime.now().isBefore(date)) {
+          options.insert(0, _itemFromDate(date));
+        }
+      },
+    );
+  }
+
+  Future<void> _insertReminderReference(
+    EditorState editorState,
+    DateTime date,
+    int start,
+    int end,
+  ) async {
+    final selection = editorState.selection;
+    if (selection == null || !selection.isCollapsed) {
+      return;
+    }
+
+    final node = editorState.getNodeAtPath(selection.end.path);
+    final delta = node?.delta;
+    if (node == null || delta == null) {
+      return;
+    }
+
+    final viewId = context.read<DocumentBloc>().view.id;
+    final reminder = _reminderFromDate(date, viewId);
+
+    context.read<ReminderBloc>().add(ReminderEvent.add(reminder: reminder));
+
+    final transaction = editorState.transaction
+      ..replaceText(
+        node,
+        start,
+        end,
+        '\$',
+        attributes: {
+          MentionBlockKeys.mention: {
+            MentionBlockKeys.type: MentionType.reminder.name,
+            MentionBlockKeys.date: date.toIso8601String(),
+            MentionBlockKeys.uid: reminder.id,
+          }
+        },
+      );
+
+    await editorState.apply(transaction);
+  }
+
+  void _setOptions() {
+    final today = DateTime.now();
+    final tomorrow = today.add(const Duration(days: 1));
+    final oneWeek = today.add(const Duration(days: 7));
+
+    _allOptions = [
+      _itemFromDate(
+        tomorrow,
+        LocaleKeys.relativeDates_tomorrow.tr(),
+        [DateFormat.yMd(_locale).format(tomorrow)],
+      ),
+      _itemFromDate(
+        oneWeek,
+        LocaleKeys.relativeDates_oneWeek.tr(),
+        [DateFormat.yMd(_locale).format(oneWeek)],
+      ),
+    ];
+  }
+
+  /// Sets Locale on each search to make sure
+  /// keywords are localized
+  void _setLocale() {
+    final locale = context.locale.toLanguageTag();
+
+    if (locale != _locale) {
+      _locale = locale;
+      _setOptions();
+    }
+  }
+
+  InlineActionsMenuItem _itemFromDate(
+    DateTime date, [
+    String? label,
+    List<String>? keywords,
+  ]) {
+    final labelStr = label ?? DateFormat.yMd(_locale).format(date);
+
+    return InlineActionsMenuItem(
+      label: labelStr.capitalize(),
+      keywords: [labelStr.toLowerCase(), ...?keywords],
+      onSelected: (context, editorState, menuService, replace) =>
+          _insertReminderReference(editorState, date, replace.$1, replace.$2),
+    );
+  }
+
+  ReminderPB _reminderFromDate(DateTime date, String viewId) {
+    return ReminderPB(
+      id: nanoid(),
+      objectId: viewId,
+      title: LocaleKeys.reminderNotification_title.tr(),
+      message: LocaleKeys.reminderNotification_message.tr(),
+      meta: {"document_id": viewId},
+      scheduledAt: Int64(date.millisecondsSinceEpoch ~/ 1000),
+      isAck: date.isBefore(DateTime.now()),
+    );
+  }
+}

frontend/appflowy_flutter/lib/plugins/inline_actions/inline_actions_command.dart

@@ -0,0 +1,64 @@
+import 'package:appflowy/plugins/inline_actions/inline_actions_menu.dart';
+import 'package:appflowy/plugins/inline_actions/inline_actions_result.dart';
+import 'package:appflowy/plugins/inline_actions/inline_actions_service.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+
+const inlineActionCharacter = '@';
+
+CharacterShortcutEvent inlineActionsCommand(
+  InlineActionsService inlineActionsService, {
+  InlineActionsMenuStyle style = const InlineActionsMenuStyle.light(),
+}) =>
+    CharacterShortcutEvent(
+      key: 'Opens Inline Actions Menu',
+      character: inlineActionCharacter,
+      handler: (editorState) => inlineActionsCommandHandler(
+        editorState,
+        inlineActionsService,
+        style,
+      ),
+    );
+
+InlineActionsMenuService? selectionMenuService;
+Future<bool> inlineActionsCommandHandler(
+  EditorState editorState,
+  InlineActionsService service,
+  InlineActionsMenuStyle style,
+) async {
+  final selection = editorState.selection;
+  if (PlatformExtension.isMobile || selection == null) {
+    return false;
+  }
+
+  if (!selection.isCollapsed) {
+    await editorState.deleteSelection(selection);
+  }
+
+  await editorState.insertTextAtPosition(
+    inlineActionCharacter,
+    position: selection.start,
+  );
+
+  final List<InlineActionsResult> initialResults = [];
+  for (final handler in service.handlers) {
+    final group = await handler();
+
+    if (group.results.isNotEmpty) {
+      initialResults.add(group);
+    }
+  }
+
+  if (service.context != null) {
+    selectionMenuService = InlineActionsMenu(
+      context: service.context!,
+      editorState: editorState,
+      service: service,
+      initialResults: initialResults,
+      style: style,
+    );
+
+    selectionMenuService?.show();
+  }
+
+  return true;
+}