chore: bump version 0.2.6 (#2963 )

fix: unable to cancel the inline math equation format (#2974 )
* fix: unable to cancel the inline math equation format * fix: bold font style used in the document is not suitable * chore: add flutter clean before executing the release task * fix: integration test
2023-07-11 19:49:48 +08:00 · 2023-07-11 19:49:29 +08:00 · 2023-07-10 21:37:22 +08:00 · 2023-07-09 11:03:22 +08:00 · 2023-07-07 21:58:15 +08:00 · 2023-07-06 16:40:20 +08:00
513 changed files with 16124 additions and 4246 deletions
@@ -134,6 +134,6 @@ jobs:
            fail_ci_if_error: true
            verbose: true
            os: ${{ matrix.os }}
-          attempt_limit: 5
+          attempt_limit: 20
          attempt_delay: 10000

@@ -29,25 +29,31 @@ concurrency:
  cancel-in-progress: true

 jobs:
-  tests:
+  build:
    if: github.event.pull_request.draft != true
    strategy:
+      fail-fast: false
      matrix:
-        os: [ubuntu-latest]
-
+        os: [ubuntu-latest, windows-latest]
+        include:
+          - os: ubuntu-latest
+            flutter_profile: development-linux-x86_64
+            target: x86_64-unknown-linux-gnu
+          - os: windows-latest
+            flutter_profile: development-windows-x86
+            target: x86_64-pc-windows-msvc
    runs-on: ${{ matrix.os }}

    steps:
-      - uses: actions/checkout@v2
-      - uses: actions-rs/toolchain@v1
-        with:
-          toolchain: "stable-2022-04-07"
+      - name: Checkout source code
+        uses: actions/checkout@v2

      - name: Install Rust toolchain
        id: rust_toolchain
        uses: actions-rs/toolchain@v1
        with:
          toolchain: ${{ env.RUST_TOOLCHAIN }}
+          target: ${{ matrix.target }}
          override: true
          profile: minimal

@@ -64,6 +70,7 @@ jobs:
          prefix-key: ${{ matrix.os }}
          workspaces: |
            frontend/rust-lib
+          cache-all-crates: true

      - uses: davidB/rust-cargo-make@v1
        with:
@@ -87,30 +94,24 @@ jobs:
          cargo make appflowy-flutter-deps-tools
        shell: bash

-      - name: Config Flutter
+      - name: Enable Flutter Desktop
        run: |
          if [ "$RUNNER_OS" == "Linux" ]; then
            flutter config --enable-linux-desktop
          elif [ "$RUNNER_OS" == "macOS" ]; then
            flutter config --enable-macos-desktop
          elif [ "$RUNNER_OS" == "Windows" ]; then
+            git config --system core.longpaths true
            flutter config --enable-windows-desktop
          fi
        shell: bash

-      - name: Build Test lib
+      - name: Build AppFlowy
        working-directory: frontend
        run: |
-          if [ "$RUNNER_OS" == "Linux" ]; then
-            cargo make --profile development-linux-x86_64 appflowy-dev
-          elif [ "$RUNNER_OS" == "macOS" ]; then
-            cargo make --profile development-mac-x86_64 appflowy-dev
-          elif [ "$RUNNER_OS" == "Windows" ]; then
-            cargo make --profile development-windows-x86 appflowy-dev
-          fi
-        shell: bash
+          cargo make --profile ${{ matrix.flutter_profile }} appflowy-dev

-      - name: Run AppFlowy tests
+      - name: Run Flutter integration tests
        working-directory: frontend/appflowy_flutter
        run: |
          if [ "$RUNNER_OS" == "Linux" ]; then
@@ -135,5 +136,5 @@ jobs:
            fail_ci_if_error: true
            verbose: true
            os: ${{ matrix.os }}
-          attempt_limit: 5
+          attempt_limit: 20
          attempt_delay: 10000
@@ -1,5 +1,26 @@
 # Release Notes

+## Version 0.2.6 - 07/11/2023
+
+### New Features
+
+- Dynamic load themes
+- Inline math equation
+
+
+## Version 0.2.5 - 07/02/2023
+
+### New Features
+
+- Insert local images
+- Mention a page
+- Outlines (Table of contents)
+- Added support for aligning the image by image menu
+
+### Bug fixes
+
+- Some UI issues
+
 ## Version 0.2.4 - 06/23/2023

 ### Bug fixes:
@@ -118,15 +118,11 @@
    {
      "label": "AF: Generate Freezed Files",
      "type": "shell",
-      "command": "dart run build_runner build -d",
+      "command": "sh ./scripts/code_generation/freezed/generate_freezed.sh",
      "options": {
-        "cwd": "${workspaceFolder}/appflowy_flutter"
-      }
-    },
-    {
-      "label": "AF: Generate Language Files",
-      "type": "shell",
-      "command": "sh ./scripts/generate_language_files.sh",
+        "cwd": "${workspaceFolder}"
+      },
+      "group": "build",
      "windows": {
        "options": {
          "shell": {
@@ -134,7 +130,24 @@
            "args": [
              "/d",
              "/c",
-              ".\\scripts\\generate_language_files.cmd"
+              ".\\scripts\\code_generation\\freezed\\generate_freezed.cmd"
+            ]
+          }
+        }
+      },
+    },
+    {
+      "label": "AF: Generate Language Files",
+      "type": "shell",
+      "command": "sh ./scripts/code_generation/language_files/generate_language_files.sh",
+      "windows": {
+        "options": {
+          "shell": {
+            "executable": "cmd.exe",
+            "args": [
+              "/d",
+              "/c",
+              ".\\scripts\\code_generation\\language_files\\generate_language_files.cmd"
            ]
          }
        }
@@ -221,5 +234,13 @@
        "cwd": "${workspaceFolder}/appflowy_tauri"
      }
    },
+    {
+      "label": "AF: Generate Env",
+      "type": "shell",
+      "command": "dart run build_runner clean && dart run build_runner build --delete-conflicting-outputs ",
+      "options": {
+        "cwd": "${workspaceFolder}/appflowy_flutter"
+      }
+    },
  ]
-}
+}
@@ -23,7 +23,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.2.4"
+CURRENT_APP_VERSION = "0.2.6"
 FLUTTER_DESKTOP_FEATURES = "dart,rev-sqlite"
 PRODUCT_NAME = "AppFlowy"
 # CRATE_TYPE: https://doc.rust-lang.org/reference/linkage.html
@@ -70,6 +70,7 @@ windows/flutter/dart_ffi/
 **/.vscode/

 *.env
+*.env.*

 coverage/

@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" style="width: 16px; height: 16px; display: block; fill: inherit; flex-shrink: 0; backface-visibility: hidden;" width="30"  height="30" ><path d="M6.04883 27.3232C7.24219 27.3232 7.86426 26.4854 8.20703 25.3936L13.9834 6.79492H27.5039C28.2275 6.79492 28.7227 6.35059 28.7227 5.65234C28.7227 4.97949 28.2275 4.53516 27.5039 4.53516H13.958C12.6631 4.53516 12.0791 5.01758 11.7363 6.13477L6.18848 24.3525H5.97266L3.58594 15.9355C3.38281 15.2373 3.00195 14.9072 2.40527 14.9072C1.73242 14.9072 1.2373 15.3896 1.2373 16.0117C1.2373 16.2656 1.30078 16.4941 1.35156 16.6846L4.04297 25.5332C4.36035 26.5615 4.93164 27.3232 6.04883 27.3232ZM16.3955 24.7334C16.8652 24.7334 17.1064 24.5684 17.4619 24.0732L20.4707 19.8203H20.5215L23.5049 24.0732C23.873 24.5684 24.1143 24.7334 24.5713 24.7334C25.2061 24.7334 25.6758 24.3018 25.6758 23.7051C25.6758 23.4258 25.6123 23.1973 25.4219 22.9561L21.9307 18.208L25.4473 13.4346C25.6377 13.168 25.7139 12.9395 25.7139 12.6855C25.7139 12.127 25.2568 11.6953 24.6475 11.6953C24.2031 11.6953 23.9365 11.8477 23.6064 12.3174L20.7246 16.5957H20.6611L17.6904 12.3047C17.373 11.8477 17.0938 11.6953 16.624 11.6953C16.0146 11.6953 15.5068 12.165 15.5068 12.7363C15.5068 13.0537 15.583 13.2568 15.8115 13.5488L19.1504 18.1445L15.6084 23.0322C15.418 23.2861 15.3672 23.4639 15.3672 23.7559C15.3672 24.3018 15.8115 24.7334 16.3955 24.7334Z"  fill="#2F3030"></path></svg>
@@ -419,4 +419,4 @@
            "layoutDateField": "تقويم التخطيط بواسطة"
        }
    }
-}
+}
@@ -149,5 +149,6 @@
  "sideBar": {
    "openSidebar": "Open sidebar",
    "closeSidebar": "Close sidebar"
-  }
+  },
+  "moreAction.small": "petit"
 }
@@ -90,7 +90,8 @@
      "name": "Debug Info",
      "success": "Copied debug info to clipboard!",
      "fail": "Unable to copy debug info to clipboard"
-    }
+    },
+    "feedback": "Feedback"
  },
  "menuAppHeader": {
    "addPageTooltip": "Quickly add a page inside",
@@ -185,13 +186,29 @@
      "open": "Open Settings"
    },
    "appearance": {
+      "fontFamily": {
+        "label": "Font Family",
+        "search": "Search"
+      },
      "themeMode": {
        "label": "Theme Mode",
        "light": "Light Mode",
        "dark": "Dark Mode",
        "system": "Adapt to System"
      },
-      "theme": "Theme"
+      "themeUpload": {
+        "button": "Upload",
+        "description": "Upload your own AppFlowy theme using the button below.",
+        "failure": "The theme that was uploaded had an invalid format.",
+        "loading": "Please wait while we validate and upload your theme...",
+        "uploadSuccess": "Your theme was uploaded successfully",
+        "deletionFailure": "Failed to delete the theme. Try to delete it manually.",
+        "filePickerDialogTitle": "Choose a .flowy_plugin file",
+        "urlUploadFailure": "Failed to open url: {}"
+      },
+      "theme": "Theme",
+      "builtInsLabel": "Built-in Themes",
+      "pluginsLabel": "Plugins"
    },
    "files": {
      "copy": "Copy",
@@ -384,6 +401,9 @@
        "createANewCalendar": "Create a new Calendar"
      }
    },
+    "selectionMenu": {
+      "outline": "Outline"
+    },
    "plugins": {
      "referencedBoard": "Referenced Board",
      "referencedGrid": "Referenced Grid",
@@ -406,6 +426,7 @@
      "smartEditCouldNotFetchKey": "Could not fetch OpenAI key",
      "smartEditDisabled": "Connect OpenAI in Settings",
      "discardResponse": "Do you want to discard the AI responses?",
+      "createInlineMathEquation": "Create equation",
      "cover": {
        "changeCover": "Change Cover",
        "colors": "Colors",
@@ -448,6 +469,12 @@
        "center": "Center",
        "right": "Right",
        "defaultColor": "Default"
+      },
+      "image": {
+        "copiedToPasteBoard": "The image link has been copied to the clipboard"
+      },
+      "outline": {
+        "addHeadingToCreateOutline": "Add headings to create a table of contents."
      }
    }
  },
@@ -227,5 +227,6 @@
    "column": {
      "create_new_card": "Nuevo"
    }
-  }
+  },
+  "moreAction.small": "pequeño"
 }
@@ -149,5 +149,6 @@
  "sideBar": {
    "openSidebar": "Open sidebar",
    "closeSidebar": "Close sidebar"
-  }
+  },
+  "moreAction.small": "petit"
 }
@@ -235,5 +235,6 @@
    "column": {
      "create_new_card": "Nouveau"
    }
-  }
+  },
+  "moreAction.small": "petit"
 }
@@ -120,14 +120,14 @@
  "oAuth": {
    "err": {
      "failedTitle": "Sikertelen bejelentkezés.",
-      "failedMsg": "Kérjük győződj meg róla, hogy elvégezted a bejelentkezési folyamatot a böngésződben"
+      "failedMsg": "Kérjük győződj meg róla, hogy elvégezted a bejelentkezési folyamatot a böngésződben!"
    },
    "google": {
-      "title": "Bejelentkezés Google-al",
+      "title": "Bejelentkezés Google-lal",
      "instruction1": "Ahhoz, hogy hozzáférj a Google Kontaktjaidhoz, kérjük hatalmazd fel ezt az alkalmazást a böngésződben.",
      "instruction2": "Másold ezt a kódot a vágólapra az ikonra kattintással vagy a szöveg kijelölésével:",
-      "instruction3": "Nyisd meg ezt a linket a böngésződben, és írjd be a fenti kódot:",
-      "instruction4": "Nyomd meg az alábbi gombot, ha elvégezted a registrációt:"
+      "instruction3": "Nyisd meg ezt a linket a böngésződben, és írd be a fenti kódot:",
+      "instruction4": "Nyomd meg az alábbi gombot, ha elvégezted a regisztrációt:"
    }
  },
  "settings": {
@@ -139,15 +139,17 @@
    },
    "appearance": {
      "themeMode": {
-        "label": "Theme Mode",
+        "label": "Téma",
        "light": "Világos mód",
        "dark": "Éjjeli mód",
-        "system": "Adapt to System"
+        "system": "Rendszerbeállítás követése"
      }
    }
  },
  "sideBar": {
    "openSidebar": "Open sidebar",
    "closeSidebar": "Close sidebar"
-  }
-}
+  },
+  "moreAction.small": "kicsi"
+}
+
@@ -222,5 +222,6 @@
  "sideBar": {
    "openSidebar": "Open sidebar",
    "closeSidebar": "Close sidebar"
-  }
+  },
+  "moreAction.small": "kecil"
 }
@@ -155,5 +155,6 @@
  "sideBar": {
    "openSidebar": "Open sidebar",
    "closeSidebar": "Close sidebar"
-  }
+  },
+  "moreAction.small": "piccolo"
 }
@@ -203,5 +203,6 @@
  "sideBar": {
    "openSidebar": "Open sidebar",
    "closeSidebar": "Close sidebar"
-  }
+  },
+  "moreAction.small": "小さい"
 }
@@ -231,5 +231,6 @@
    "column": {
      "create_new_card": "추가"
    }
-  }
+  },
+  "moreAction.small": "작은"
 }
@@ -149,5 +149,6 @@
  "sideBar": {
    "openSidebar": "Open sidebar",
    "closeSidebar": "Close sidebar"
-  }
+  },
+  "moreAction.small": "mały"
 }
@@ -145,5 +145,6 @@
  "sideBar": {
    "openSidebar": "Open sidebar",
    "closeSidebar": "Close sidebar"
-  }
+  },
+  "moreAction.small": "pequeno"
 }
@@ -235,5 +235,6 @@
    "column": {
      "create_new_card": "Nytt"
    }
-  }
+  },
+  "moreAction.small": "små"
 }
@@ -149,5 +149,6 @@
  "sideBar": {
    "openSidebar": "Open sidebar",
    "closeSidebar": "Close sidebar"
-  }
+  },
+  "moreAction.small": "küçük"
 }
@@ -6,6 +6,8 @@
  "subscribeNewsletterText": "消息订阅",
  "letsGoButtonText": "开始",
  "title": "标题",
+  "youCanAlso": "您还可以",
+  "and": "以及",
  "signUp": {
    "buttonText": "注册",
    "title": "注册 @:appName 账户",
@@ -21,6 +23,7 @@
  "signIn": {
    "loginTitle": "登录 @:appName",
    "loginButtonText": "登录",
+    "loginAsGuestButtonText": "开始使用",
    "buttonText": "登录",
    "forgotPassword": "忘记密码?",
    "emailHint": "邮箱",
@@ -40,6 +43,21 @@
    "markdown": "Markdown",
    "copyLink": "复制链接"
  },
+  "moreAction": {
+    "small": "小",
+    "medium": "中",
+    "large": "大",
+    "fontSize": "字号",
+    "import": "导入",
+    "moreOptions": "更多选项"
+  },
+  "importPanel": {
+    "textAndMarkdown": "文本 & Markdown",
+    "documentFromV010": "来自 v0.1.0 的文档",
+    "databaseFromV010": "来自 v0.1.0 的数据库",
+    "csv": "CSV",
+    "database": "数据库"
+  },
  "disclosureAction": {
    "rename": "重命名",
    "delete": "删除",
@@ -54,7 +72,7 @@
    "pageHeader": {
      "fileName": "文件名",
      "lastModified": "最近修改",
-      "created": "创建"
+      "created": "创建时间"
    }
  },
  "deletePagePrompt": {
@@ -64,8 +82,10 @@
  },
  "dialogCreatePageNameHint": "页面名称",
  "questionBubble": {
+    "shortcuts": "快捷键",
    "whatsNew": "新功能?",
    "help": "帮助 & 支持",
+    "markdown": "Markdown",
    "debug": {
      "name": "调试信息",
      "success": "将调试信息复制到剪贴板！",
@@ -90,14 +110,18 @@
    "inlineCode": "内联代码",
    "quote": "块引用",
    "header": "标题",
-    "highlight": "高亮"
+    "highlight": "高亮",
+    "color": "颜色"
  },
  "tooltip": {
    "lightMode": "切换到亮色模式",
    "darkMode": "切换到暗色模式",
    "openAsPage": "作为页面打开",
-    "addNewRow": "增加一行",
-    "openMenu": "点击打开菜单"
+    "addNewRow": "添加一行",
+    "openMenu": "点击打开菜单",
+    "dragRow": "拖动来调整行",
+    "viewDataBase": "查看数据库",
+    "referencePage": "这个 {name} 正在被引用"
  },
  "sideBar": {
    "openSidebar": "打开侧边栏",
@@ -117,11 +141,19 @@
  },
  "button": {
    "OK": "确认",
+    "Done": "完成",
    "Cancel": "取消",
    "signIn": "登录",
    "signOut": "登出",
    "complete": "完成",
-    "save": "保存"
+    "save": "保存",
+    "generate": "生成",
+    "esc": "ESC",
+    "keep": "保留",
+    "tryAgain": "重试",
+    "discard": "放弃",
+    "replace": "替换",
+    "insertBelow": "下方插入"
  },
  "label": {
    "welcome": "欢迎!",
@@ -149,37 +181,133 @@
      "appearance": "外观",
      "language": "语言",
      "user": "用户",
+      "files": "文件",
      "open": "打开设置"
    },
    "appearance": {
      "themeMode": {
-        "label": "Theme Mode",
+        "label": "主题模式",
        "light": "日间模式",
        "dark": "夜间模式",
-        "system": "Adapt to System"
-      }
+        "system": "系统自适应"
+      },
+      "theme": "主题"
+    },
+    "files": {
+      "copy": "复制",
+      "defaultLocation": "读取文件和数据存储位置",
+      "exportData": "导出您的数据",
+      "doubleTapToCopy": "双击复制路径",
+      "restoreLocation": "恢复为 AppFlowy  默认路径",
+      "customizeLocation": "打开另一个文件夹",
+      "restartApp": "请重启 app 使设置生效",
+      "exportDatabase": "导出数据库",
+      "selectFiles": "选择需要导出的文件",
+      "selectAll": "全选",
+      "deselectAll": "取消全选",
+      "createNewFolder": "新建文件夹",
+      "createNewFolderDesc": "告诉我们您要将数据存储在何处",
+      "defineWhereYourDataIsStored": "定义数据存储位置",
+      "open": "打开",
+      "openFolder": "打开现有文件夹",
+      "openFolderDesc": "读取并将其写入您现有的 AppFlowy 文件夹",
+      "folderHintText": "文件夹名",
+      "location": "正在新建文件夹",
+      "locationDesc": "为您的 AppFlowy 数据文件夹选择一个名称",
+      "browser": "浏览",
+      "create": "新建",
+      "set": "设置",
+      "folderPath": "保存文件夹的路径",
+      "locationCannotBeEmpty": "路径不能为空",
+      "pathCopiedSnackbar": "文件存储路径已被复制到剪贴板!",
+      "changeLocationTooltips": "更改数据目录",
+      "change": "更改",
+      "openLocationTooltips": "打开另一个数据目录",
+      "openCurrentDataFolder": "打开当前数据目录",
+      "recoverLocationTooltips": "恢复为 AppFlowy 默认数据目录",
+      "exportFileSuccess": "导出文件成功!",
+      "exportFileFail": "导出文件失败!",
+      "export": "导出"
+    },
+    "user": {
+      "name": "名字",
+      "icon": "图标",
+      "selectAnIcon": "选择一个图标",
+      "pleaseInputYourOpenAIKey": "请输入您的 OpenAI 密钥"
    }
  },
  "grid": {
+    "deleteView": "您确定要删除这个视窗吗?",
+    "createView": "新建",
    "settings": {
-      "filter": "过滤器",
+      "filter": "筛选",
+      "sort": "以……排序",
      "sortBy": "排序",
      "Properties": "属性",
-      "group": "组"
+      "group": "组",
+	"addFilter": "添加筛选",
+      "deleteFilter": "删除筛选",
+      "filterBy": "以……筛选",
+      "typeAValue": "请输入一个值",
+      "layout": "布局",
+      "databaseLayout": "布局"
+},
+    "textFilter": {
+      "contains": "包含",
+      "doesNotContain": "不包含",
+      "endsWith": "以……结束",
+      "startWith": "以……开始",
+      "is": "等于",
+      "isNot": "不等于",
+      "isEmpty": "为空",
+      "isNotEmpty": "不为空",
+      "choicechipPrefix": {
+        "isNot": "不等于",
+        "startWith": "以……开始",
+        "endWith": "以……结束",
+        "isEmpty": "为空",
+        "isNotEmpty": "不为空"
+      }
+    },
+    "checkboxFilter": {
+      "isChecked": "已勾选",
+      "isUnchecked": "未勾选",
+      "choicechipPrefix": {
+        "is": "is"
+      }
+    },
+    "checklistFilter": {
+      "isComplete": "已完成",
+      "isIncomplted": "未完成"
+    },
+    "singleSelectOptionFilter": {
+      "is": "等于",
+      "isNot": "不等于",
+      "isEmpty": "为空",
+      "isNotEmpty": "不为空"
+    },
+    "multiSelectOptionFilter": {
+      "contains": "包含",
+      "doesNotContain": "不包含",
+      "isEmpty": "为空",
+      "isNotEmpty": "不为空"
    },
    "field": {
      "hide": "隐藏",
      "insertLeft": "左侧插入",
      "insertRight": "右侧插入",
-      "duplicate": "拷贝",
+      "duplicate": "复制",
      "delete": "删除",
      "textFieldName": "文本",
      "checkboxFieldName": "勾选框",
      "dateFieldName": "日期",
+      "updatedAtFieldName": "修改时间",
+      "createdAtFieldName": "创建时间",
      "numberFieldName": "数字",
      "singleSelectFieldName": "单项选择器",
      "multiSelectFieldName": "多项选择器",
      "urlFieldName": "链接",
+      "checklistFieldName": "清单",
      "numberFormat": "数字格式",
      "dateFormat": "日期格式",
      "includeTime": "包含时间",
@@ -187,6 +315,7 @@
      "dateFormatISO": "年-月-日",
      "dateFormatLocal": "月/日/年",
      "dateFormatUS": "年/月/日",
+      "dateFormatDayMonthYear": "日/月/年",
      "timeFormat": "时间格式",
      "invalidTimeFormat": "时间格式错误",
      "timeFormatTwelveHour": "12小时制",
@@ -195,16 +324,23 @@
      "optionTitle": "标签",
      "addOption": "添加标签",
      "editProperty": "编辑列属性",
-      "newProperty": "增加一列",
+      "newProperty": "添加一列",
      "deleteFieldPromptMessage": "确定要删除这个属性吗? "
    },
+    "sort": {
+      "ascending": "升序",
+      "descending": "降序",
+      "deleteSort": "删除排序",
+      "addSort": "添加排序"
+    },
    "row": {
      "duplicate": "复制",
      "delete": "删除",
      "textPlaceholder": "空",
      "copyProperty": "复制列",
      "count": "数量",
-      "newRow": "添加一行"
+      "newRow": "添加一行",
+      "action": "执行"
    },
    "selectOption": {
      "create": "新建",
@@ -222,19 +358,132 @@
      "panelTitle": "选择或新建一个标签",
      "searchOption": "搜索标签"
    },
-    "menuName": "网格"
+    "checklist": {
+      "panelTitle": "添加项"
+    },
+    "menuName": "网格",
+    "referencedGridPrefix": "视图"
  },
  "document": {
    "menuName": "文档",
    "date": {
      "timeHintTextInTwelveHour": "01:00 PM",
      "timeHintTextInTwentyFourHour": "13:00"
+    },
+    "slashMenu": {
+      "board": {
+        "selectABoardToLinkTo": "选择要链接到的看板",
+        "createANewBoard": "新建看板"
+      },
+      "grid": {
+        "selectAGridToLinkTo": "选择要链接到的网格",
+        "createANewGrid": "新建网格"
+      },
+      "calendar": {
+        "selectACalendarToLinkTo": "选择要链接到的日历",
+        "createANewCalendar": "新建日历"
+      }
+    },
+    "plugins": {
+      "referencedBoard": "引用的看板",
+      "referencedGrid": "引用的网格",
+      "referencedCalendar": "引用的日历",
+      "autoGeneratorMenuItemName": "OpenAI 创作",
+      "autoGeneratorTitleName": "OpenAI: 让 AI 写些什么...",
+      "autoGeneratorLearnMore": "学习更多",
+      "autoGeneratorGenerate": "生成",
+      "autoGeneratorHintText": "让 OpenAI ...",
+      "autoGeneratorCantGetOpenAIKey": "无法获得 OpenAI 密钥",
+      "autoGeneratorRewrite": "重写",
+      "smartEdit": "AI 助手",
+      "openAI": "OpenAI",
+      "smartEditFixSpelling": "修正拼写",
+      "warning": "⚠️ AI 可能不准确或具有误导性.",
+      "smartEditSummarize": "总结",
+      "smartEditImproveWriting": "提高写作水平",
+      "smartEditMakeLonger": "丰富内容",
+      "smartEditCouldNotFetchResult": "无法从 OpenAI 获取到结果",
+      "smartEditCouldNotFetchKey": "无法获取到 OpenAI 密钥",
+      "smartEditDisabled": "在设置中连接 OpenAI",
+      "discardResponse": "您是否要放弃 AI 继续写作?",
+      "cover": {
+        "changeCover": "修改封面",
+        "colors": "颜色",
+        "images": "图像",
+        "clearAll": "清除所有",
+        "abstract": "摘要",
+        "addCover": "添加封面",
+        "addLocalImage": "添加本地图像",
+        "invalidImageUrl": "无效的图像网址",
+        "failedToAddImageToGallery": "无法将图片添加到库",
+        "enterImageUrl": "输入图像网址",
+        "add": "添加",
+        "back": "返回",
+        "saveToGallery": "保存至库",
+        "removeIcon": "移除图标",
+        "pasteImageUrl": "粘贴图片网址",
+        "or": "或",
+        "pickFromFiles": "从文件中选取",
+        "couldNotFetchImage": "无法获取到图像",
+        "imageSavingFailed": "图像保存失败",
+        "addIcon": "添加图标",
+        "coverRemoveAlert": "删除后将从封面中移除。",
+        "alertDialogConfirmation": "您确定您要继续吗?"
+      },
+      "mathEquation": {
+        "addMathEquation": "添加数学公式",
+        "editMathEquation": "编辑数学公式"
+      },
+      "optionAction": {
+        "click": "点击",
+        "toOpenMenu": " 来打开菜单",
+        "delete": "删除",
+        "duplicate": "复制",
+        "turnInto": "变成",
+        "moveUp": "上移",
+        "moveDown": "下移",
+        "color": "颜色",
+        "align": "对齐",
+        "left": "左",
+        "center": "中心",
+        "right": "又",
+        "defaultColor": "默认"
+      }
    }
  },
  "board": {
    "column": {
      "create_new_card": "新建"
    },
-    "menuName": "看板"
+    "menuName": "看板",
+    "referencedBoardPrefix": "视图"
+  },
+  "moreAction.small": "小的",
+  "calendar": {
+    "menuName": "日历",
+    "defaultNewCalendarTitle": "未命名",
+    "navigation": {
+      "today": "今天",
+      "jumpToday": "跳转到今天",
+      "previousMonth": "上一月",
+      "nextMonth": "下一月"
+    },
+    "settings": {
+      "showWeekNumbers": "显示周数",
+      "showWeekends": "显示周末",
+      "firstDayOfWeek": "一周开始于",
+      "layoutDateField": "以……为日历布局",
+      "noDateTitle": "没有日期",
+      "noDateHint": "计划外事件将显示在此处",
+      "clickToAdd": "单击以添加到日历",
+      "name": "日历布局"
+    },
+    "referencedCalendarPrefix": "视图"
+  },
+  "errorDialog": {
+    "title": "AppFlowy 错误",
+    "howToFixFallback": "对于给您带来的不便, 我们深表歉意! 请在我们的 GitHub 页面上提交 issue 并描述您遇到的错误。",
+    "github": "在 GitHub 查看"
  }
-}
+}
+
@@ -9,22 +9,7 @@ import 'util/util.dart';
 void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

-  group('database', () {
-    const location = 'appflowy';
-
-    setUp(() async {
-      await TestFolder.cleanTestLocation(location);
-      await TestFolder.setTestLocation(location);
-    });
-
-    tearDown(() async {
-      await TestFolder.cleanTestLocation(location);
-    });
-
-    tearDownAll(() async {
-      await TestFolder.cleanTestLocation(null);
-    });
-
+  group('calendar database view', () {
    testWidgets('update calendar layout', (tester) async {
      await tester.initializeAppFlowy();
      await tester.tapGoButton();
@@ -75,7 +60,7 @@ void main() {
      await tester.pumpAndSettle();
    });

-    testWidgets('create new calendar event using new button', (tester) async {
+    testWidgets('creating and editing calendar events', (tester) async {
      await tester.initializeAppFlowy();
      await tester.tapGoButton();

@@ -98,28 +83,8 @@ void main() {
      // Dismiss the row details page
      await tester.dismissRowDetailPage();

-      // Make sure that the event is inserted in the cell
      tester.assertNumberOfEventsInCalendar(1);

-      // Create another event on the same day
-      await tester.hoverOnTodayCalendarCell();
-      await tester.tapAddCalendarEventButton();
-      await tester.dismissRowDetailPage();
-      tester.assertNumberOfEventsInCalendar(2);
-      tester.assertNumberofEventsOnSpecificDay(2, DateTime.now());
-    });
-
-    testWidgets('create new calendar event by double-clicking', (tester) async {
-      await tester.initializeAppFlowy();
-      await tester.tapGoButton();
-
-      // Create the calendar view
-      await tester.tapAddButton();
-      await tester.tapCreateCalendarButton();
-
-      // Scroll until today's date cell is visible
-      await tester.scrollToToday();
-
      // Double click on today's calendar cell to create a new event
      await tester.doubleClickCalendarCell(DateTime.now());

@@ -130,110 +95,42 @@ void main() {
      await tester.dismissRowDetailPage();

      // Make sure that the event is inserted in the cell
-      tester.assertNumberOfEventsInCalendar(1);
-
-      // Create another event on the same day
-      await tester.doubleClickCalendarCell(DateTime.now());
-      await tester.dismissRowDetailPage();
      tester.assertNumberOfEventsInCalendar(2);
-      tester.assertNumberofEventsOnSpecificDay(2, DateTime.now());
-    });

-    testWidgets('duplicate/delete a calendar event', (tester) async {
-      await tester.initializeAppFlowy();
-      await tester.tapGoButton();
+      // Click on the event
+      await tester.openCalendarEvent(index: 0);
+      tester.assertRowDetailPageOpened();

-      // Create the calendar view
-      await tester.tapAddButton();
-      await tester.tapCreateCalendarButton();
+      // Change the title of the event
+      await tester.editTitleInRowDetailPage('hello world');
+      await tester.dismissRowDetailPage();

-      // Create a new event in today's calendar cell
-      await tester.scrollToToday();
-      await tester.doubleClickCalendarCell(DateTime.now());
+      // Make sure that the event is edited
+      tester.assertNumberOfEventsInCalendar(1, title: 'hello world');
+      tester.assertNumberOfEventsOnSpecificDay(2, DateTime.now());
+
+      // Click on the event
+      await tester.openCalendarEvent(index: 1);
+      tester.assertRowDetailPageOpened();

      // Duplicate the event
      await tester.tapRowDetailPageDuplicateRowButton();
      await tester.dismissRowDetailPage();

      // Check that there are 2 events
-      tester.assertNumberOfEventsInCalendar(2);
+      tester.assertNumberOfEventsInCalendar(2, title: 'hello world');
+      tester.assertNumberOfEventsOnSpecificDay(3, DateTime.now());

      // Delete an event
-      await tester.openCalendarEvent(index: 0);
+      await tester.openCalendarEvent(index: 1);
      await tester.tapRowDetailPageDeleteRowButton();

      // Check that there is 1 event
-      tester.assertNumberOfEventsInCalendar(1);
-    });
-
-    testWidgets('edit the title of a calendar date event', (tester) async {
-      await tester.initializeAppFlowy();
-      await tester.tapGoButton();
-
-      // Create the calendar view
-      await tester.tapAddButton();
-      await tester.tapCreateCalendarButton();
-
-      // Create a new event in today's calendar cell
-      await tester.scrollToToday();
-      await tester.doubleClickCalendarCell(DateTime.now());
-      await tester.dismissRowDetailPage();
-
-      // Click on the event
-      await tester.openCalendarEvent(index: 0);
-
-      // Make sure that the row details page is opened
-      tester.assertRowDetailPageOpened();
-
-      // Change the title of the event
-      await tester.editTitleInRowDetailPage('hello world');
-
-      // Dismiss the row details page
-      await tester.dismissRowDetailPage();
-
-      // Make sure that the event is edited
      tester.assertNumberOfEventsInCalendar(1, title: 'hello world');
+      tester.assertNumberOfEventsOnSpecificDay(2, DateTime.now());
    });

-    testWidgets(
-        'edit the date of the date field being used to layout the calendar',
-        (tester) async {
-      await tester.initializeAppFlowy();
-      await tester.tapGoButton();
-
-      // Create the calendar view
-      await tester.tapAddButton();
-      await tester.tapCreateCalendarButton();
-
-      // Create a new event in today's calendar cell
-      await tester.scrollToToday();
-      await tester.doubleClickCalendarCell(DateTime.now());
-      await tester.dismissRowDetailPage();
-
-      // Make sure that the event is today
-      tester.assertNumberofEventsOnSpecificDay(1, DateTime.now());
-
-      // Click on the event
-      await tester.openCalendarEvent(index: 0);
-
-      // Open the date editor of the event
-      await tester.tapDateCellInRowDetailPage();
-      await tester.findDateEditor(findsOneWidget);
-
-      // Edit the event's date
-      final tomorrow = DateTime.now().add(const Duration(days: 1));
-      await tester.selectDay(content: tomorrow.day);
-      await tester.dismissCellEditor();
-
-      // Dismiss the row details page
-      await tester.dismissRowDetailPage();
-
-      // Make sure that the event is edited
-      tester.assertNumberOfEventsInCalendar(1);
-      tester.assertNumberofEventsOnSpecificDay(1, tomorrow);
-    });
-
-    testWidgets('reschedule an event by drag-and-drop', (tester) async {
+    testWidgets('rescheduling events', (tester) async {
      await tester.initializeAppFlowy();
      await tester.tapGoButton();

@@ -251,11 +148,42 @@ void main() {
      await tester.dragDropRescheduleCalendarEvent(firstOfThisMonth);

      // Make sure that the event has been rescheduled to the new date
+      final sameDayNextWeek = firstOfThisMonth.add(const Duration(days: 7));
      tester.assertNumberOfEventsInCalendar(1);
-      tester.assertNumberofEventsOnSpecificDay(
-        1,
-        firstOfThisMonth.add(const Duration(days: 7)),
-      );
+      tester.assertNumberOfEventsOnSpecificDay(1, sameDayNextWeek);
+
+      // Delete the event
+      await tester.openCalendarEvent(index: 0, date: sameDayNextWeek);
+      await tester.tapRowDetailPageDeleteRowButton();
+
+      // Create a new event in today's calendar cell
+      await tester.scrollToToday();
+      await tester.doubleClickCalendarCell(today);
+      await tester.dismissRowDetailPage();
+
+      // Make sure that the event is today
+      tester.assertNumberOfEventsOnSpecificDay(1, today);
+
+      // Click on the event
+      await tester.openCalendarEvent(index: 0);
+
+      // Open the date editor of the event
+      await tester.tapDateCellInRowDetailPage();
+      await tester.findDateEditor(findsOneWidget);
+
+      // Edit the event's date. To avoid selecting a day outside of the current month, the new date will be one day closer to the middle of the month.
+      final newDate = today.day < 15
+          ? today.add(const Duration(days: 1))
+          : today.subtract(const Duration(days: 1));
+      await tester.selectDay(content: newDate.day);
+      await tester.dismissCellEditor();
+
+      // Dismiss the row details page
+      await tester.dismissRowDetailPage();
+
+      // Make sure that the event is edited
+      tester.assertNumberOfEventsInCalendar(1);
+      tester.assertNumberOfEventsOnSpecificDay(1, newDate);
    });
  });
 }
@@ -11,21 +11,6 @@ void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('grid cell', () {
-    const location = 'appflowy';
-
-    setUp(() async {
-      await TestFolder.cleanTestLocation(location);
-      await TestFolder.setTestLocation(location);
-    });
-
-    tearDown(() async {
-      await TestFolder.cleanTestLocation(location);
-    });
-
-    tearDownAll(() async {
-      await TestFolder.cleanTestLocation(null);
-    });
-
    testWidgets('edit text cell', (tester) async {
      await tester.initializeAppFlowy();
      await tester.tapGoButton();
@@ -237,7 +222,7 @@ void main() {
      await tester.assertDateCellInGrid(
        rowIndex: 0,
        fieldType: fieldType,
-        content: DateFormat('MMM d, y').format(today),
+        content: DateFormat('MMM dd, y').format(today),
      );

      await tester.tapCellInGrid(rowIndex: 0, fieldType: fieldType);
@@ -252,7 +237,7 @@ void main() {
      await tester.assertDateCellInGrid(
        rowIndex: 0,
        fieldType: fieldType,
-        content: DateFormat('MMM d, y HH:mm').format(now),
+        content: DateFormat('MMM dd, y HH:mm').format(now),
      );

      await tester.tapCellInGrid(rowIndex: 0, fieldType: fieldType);
@@ -10,21 +10,6 @@ void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('grid page', () {
-    const location = 'appflowy';
-
-    setUp(() async {
-      await TestFolder.cleanTestLocation(location);
-      await TestFolder.setTestLocation(location);
-    });
-
-    tearDown(() async {
-      await TestFolder.cleanTestLocation(location);
-    });
-
-    tearDownAll(() async {
-      await TestFolder.cleanTestLocation(null);
-    });
-
    testWidgets('rename existing field', (tester) async {
      await tester.initializeAppFlowy();
      await tester.tapGoButton();
@@ -5,27 +5,11 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';

 import 'util/database_test_op.dart';
-import 'util/util.dart';

 void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('grid', () {
-    const location = 'import_files';
-
-    setUp(() async {
-      await TestFolder.cleanTestLocation(location);
-      await TestFolder.setTestLocation(location);
-    });
-
-    tearDown(() async {
-      await TestFolder.cleanTestLocation(location);
-    });
-
-    tearDownAll(() async {
-      await TestFolder.cleanTestLocation(null);
-    });
-
    testWidgets('add text filter', (tester) async {
      await tester.openV020database();

@@ -6,6 +6,7 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';

 import 'util/database_test_op.dart';
+import 'util/emoji.dart';
 import 'util/ime.dart';
 import 'util/util.dart';

@@ -13,21 +14,6 @@ void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('grid', () {
-    const location = 'appflowy';
-
-    setUp(() async {
-      await TestFolder.cleanTestLocation(location);
-      await TestFolder.setTestLocation(location);
-    });
-
-    tearDown(() async {
-      await TestFolder.cleanTestLocation(location);
-    });
-
-    tearDownAll(() async {
-      await TestFolder.cleanTestLocation(null);
-    });
-
    testWidgets('row details page opens', (tester) async {
      await tester.initializeAppFlowy();
      await tester.tapGoButton();
@@ -186,9 +172,10 @@ void main() {
      // Focus on the editor
      final textBlock = find.byType(TextBlockComponentWidget);
      await tester.tapAt(tester.getCenter(textBlock));
+      await tester.pumpAndSettle();

      // Input some text
-      const inputText = 'Hello world';
+      const inputText = 'Hello World';
      await tester.ime.insertText(inputText);
      expect(
        find.textContaining(inputText, findRichText: true),
@@ -8,21 +8,6 @@ void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('grid', () {
-    const location = 'appflowy';
-
-    setUp(() async {
-      await TestFolder.cleanTestLocation(location);
-      await TestFolder.setTestLocation(location);
-    });
-
-    tearDown(() async {
-      await TestFolder.cleanTestLocation(location);
-    });
-
-    tearDownAll(() async {
-      await TestFolder.cleanTestLocation(null);
-    });
-
    testWidgets('create row of the grid', (tester) async {
      await tester.initializeAppFlowy();
      await tester.tapGoButton();
@@ -9,21 +9,6 @@ void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('grid', () {
-    const location = 'appflowy';
-
-    setUp(() async {
-      await TestFolder.cleanTestLocation(location);
-      await TestFolder.setTestLocation(location);
-    });
-
-    tearDown(() async {
-      await TestFolder.cleanTestLocation(location);
-    });
-
-    tearDownAll(() async {
-      await TestFolder.cleanTestLocation(null);
-    });
-
    testWidgets('update layout', (tester) async {
      await tester.initializeAppFlowy();
      await tester.tapGoButton();
@@ -1,66 +1,17 @@
-import 'dart:io';
-
 import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';

 import 'util/database_test_op.dart';
-import 'util/mock/mock_file_picker.dart';
-import 'util/util.dart';
-import 'package:path/path.dart' as p;

 void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('database', () {
-    const location = 'import_files';
-    setUp(() async {
-      await TestFolder.cleanTestLocation(location);
-      await TestFolder.setTestLocation(location);
-    });
-
-    tearDown(() async {
-      await TestFolder.cleanTestLocation(location);
-    });
-
-    tearDownAll(() async {
-      await TestFolder.cleanTestLocation(null);
-    });
-
    testWidgets('import v0.2.0 database data', (tester) async {
-      await tester.initializeAppFlowy();
-      await tester.tapGoButton();
-
-      // expect to see a readme page
-      tester.expectToSeePageName(readme);
-
-      await tester.tapAddButton();
-      await tester.tapImportButton();
-
-      final testFileNames = ['v020.afdb'];
-      final fileLocation = await tester.currentFileLocation();
-      for (final fileName in testFileNames) {
-        final str = await rootBundle.loadString(
-          p.join(
-            'assets/test/workspaces/database',
-            fileName,
-          ),
-        );
-        File(p.join(fileLocation, fileName)).writeAsStringSync(str);
-      }
-      // mock get files
-      await mockPickFilePaths(testFileNames, name: location);
-      await tester.tapDatabaseRawDataButton();
-      await tester.openPage('v020');
-
-      // check the import content
-      // await tester.assertCellContent(
-      //   rowIndex: 7,
-      //   fieldType: FieldType.RichText,
-      //   // fieldName: 'Name',
-      //   content: '',
-      // );
+      await tester.openV020database();
+      // wait the database data is loaded
+      await tester.pumpAndSettle(const Duration(microseconds: 500));

      // check the text cell
      final textCells = <String>['A', 'B', 'C', 'D', 'E', '', '', '', '', ''];
@@ -3,27 +3,11 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';

 import 'util/database_test_op.dart';
-import 'util/util.dart';

 void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('grid', () {
-    const location = 'import_files';
-
-    setUp(() async {
-      await TestFolder.cleanTestLocation(location);
-      await TestFolder.setTestLocation(location);
-    });
-
-    tearDown(() async {
-      await TestFolder.cleanTestLocation(location);
-    });
-
-    tearDownAll(() async {
-      await TestFolder.cleanTestLocation(null);
-    });
-
    testWidgets('add text sort', (tester) async {
      await tester.openV020database();
      // create a filter
@@ -11,21 +11,6 @@ void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('database', () {
-    const location = 'appflowy';
-
-    setUp(() async {
-      await TestFolder.cleanTestLocation(location);
-      await TestFolder.setTestLocation(location);
-    });
-
-    tearDown(() async {
-      await TestFolder.cleanTestLocation(location);
-    });
-
-    tearDownAll(() async {
-      await TestFolder.cleanTestLocation(null);
-    });
-
    testWidgets('create linked view', (tester) async {
      await tester.initializeAppFlowy();
      await tester.tapGoButton();
@@ -1,36 +0,0 @@
-import 'package:flutter_test/flutter_test.dart';
-import 'package:integration_test/integration_test.dart';
-
-import '../util/util.dart';
-
-void main() {
-  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
-
-  group('cover image', () {
-    const location = 'cover_image';
-
-    setUp(() async {
-      await TestFolder.cleanTestLocation(location);
-      await TestFolder.setTestLocation(location);
-    });
-
-    tearDown(() async {
-      await TestFolder.cleanTestLocation(location);
-    });
-
-    tearDownAll(() async {
-      await TestFolder.cleanTestLocation(null);
-    });
-
-    testWidgets(
-        'hovering on cover image will display change and delete cover image buttons',
-        (tester) async {
-      await tester.initializeAppFlowy();
-
-      await tester.tapGoButton();
-      await tester.editor.hoverOnCoverPluginAddButton();
-
-      tester.expectToSeePluginAddCoverAndIconButton();
-    });
-  });
-}
@@ -9,22 +9,7 @@ import '../util/util.dart';
 void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

-  group('document', () {
-    const location = 'appflowy';
-
-    setUp(() async {
-      await TestFolder.cleanTestLocation(location);
-      await TestFolder.setTestLocation(location);
-    });
-
-    tearDown(() async {
-      await TestFolder.cleanTestLocation(location);
-    });
-
-    tearDownAll(() async {
-      await TestFolder.cleanTestLocation(null);
-    });
-
+  group('create and delete the document', () {
    testWidgets('create a new document when launching app in first time',
        (tester) async {
      await tester.initializeAppFlowy();
@@ -0,0 +1,22 @@
+import 'package:integration_test/integration_test.dart';
+
+import 'document_create_and_delete_test.dart'
+    as document_create_and_delete_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_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;
+import 'edit_document_test.dart' as document_edit_test;
+
+void startTesting() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  // Document integration tests
+  document_create_and_delete_test.main();
+  document_edit_test.main();
+  document_with_database_test.main();
+  document_with_inline_page_test.main();
+  document_with_inline_math_equation_test.main();
+  document_with_cover_image_test.main();
+}
@@ -0,0 +1,120 @@
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../util/emoji.dart';
+import '../util/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('cover image', () {
+    testWidgets('document cover tests', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      tester.expectToSeeNoDocumentCover();
+
+      // Hover over cover toolbar to show 'Add Cover' and 'Add Icon' buttons
+      await tester.editor.hoverOnCoverToolbar();
+      tester.expectToSeePluginAddCoverAndIconButton();
+
+      // Insert a document cover
+      await tester.editor.tapOnAddCover();
+      tester.expectToSeeDocumentCover(CoverType.asset);
+
+      // Hover over the cover to show the 'Change Cover' and delete buttons
+      await tester.editor.hoverOnCover();
+      tester.expectChangeCoverAndDeleteButton();
+
+      // Change cover to a solid color background
+      await tester.editor.tapOnChangeCover();
+      await tester.editor.switchSolidColorBackground();
+      await tester.editor.dismissCoverPicker();
+      tester.expectToSeeDocumentCover(CoverType.color);
+
+      // Change cover to a network image
+      const imageUrl =
+          "https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy/main/frontend/appflowy_flutter/assets/images/appflowy_launch_splash.jpg";
+      await tester.editor.hoverOnCover();
+      await tester.editor.tapOnChangeCover();
+      await tester.editor.addNetworkImageCover(imageUrl);
+      await tester.editor.switchNetworkImageCover(imageUrl);
+      await tester.editor.dismissCoverPicker();
+      tester.expectToSeeDocumentCover(CoverType.file);
+
+      // Remove the cover
+      await tester.editor.hoverOnCover();
+      await tester.editor.tapOnRemoveCover();
+      tester.expectToSeeNoDocumentCover();
+    });
+
+    testWidgets('document icon tests', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      tester.expectToSeeDocumentIcon(null);
+
+      // Hover over cover toolbar to show the 'Add Cover' and 'Add Icon' buttons
+      await tester.editor.hoverOnCoverToolbar();
+      tester.expectToSeePluginAddCoverAndIconButton();
+
+      // Insert a document icon
+      await tester.editor.tapAddIconButton();
+      await tester.switchToEmojiList();
+      await tester.tapEmoji('😀');
+      tester.expectToSeeDocumentIcon('😀');
+
+      // Remove the document icon from the cover toolbar
+      await tester.editor.hoverOnCoverToolbar();
+      await tester.editor.tapRemoveIconButton();
+      tester.expectToSeeDocumentIcon(null);
+
+      // Add the icon back for further testing
+      await tester.editor.hoverOnCoverToolbar();
+      await tester.editor.tapAddIconButton();
+      await tester.switchToEmojiList();
+      await tester.tapEmoji('😀');
+      tester.expectToSeeDocumentIcon('😀');
+
+      // Change the document icon
+      await tester.editor.tapOnIconWidget();
+      await tester.switchToEmojiList();
+      await tester.tapEmoji('😅');
+      tester.expectToSeeDocumentIcon('😅');
+
+      // Remove the document icon from the icon picker
+      await tester.editor.tapOnIconWidget();
+      await tester.editor.tapRemoveIconButton(isInPicker: true);
+      tester.expectToSeeDocumentIcon(null);
+    });
+
+    testWidgets('icon and cover at the same time', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      tester.expectToSeeDocumentIcon(null);
+      tester.expectToSeeNoDocumentCover();
+
+      // Hover over cover toolbar to show the 'Add Cover' and 'Add Icon' buttons
+      await tester.editor.hoverOnCoverToolbar();
+      tester.expectToSeePluginAddCoverAndIconButton();
+
+      // Insert a document icon
+      await tester.editor.tapAddIconButton();
+      await tester.switchToEmojiList();
+      await tester.tapEmoji('😀');
+
+      // Insert a document cover
+      await tester.editor.tapOnAddCover();
+
+      // Expect to see the icon and cover at the same time
+      tester.expectToSeeDocumentIcon('😀');
+      tester.expectToSeeDocumentCover(CoverType.asset);
+
+      // Hover over the cover toolbar and see that neither icons are shown
+      await tester.editor.hoverOnCoverToolbar();
+      tester.expectToSeeEmptyDocumentHeaderToolbar();
+    });
+  });
+}
@@ -1,4 +1,5 @@
 import 'package:appflowy/plugins/database_view/board/presentation/board_page.dart';
+import 'package:appflowy/plugins/database_view/calendar/presentation/calendar_page.dart';
 import 'package:appflowy/plugins/database_view/grid/presentation/grid_page.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/link_to_page_widget.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/protobuf.dart';
@@ -13,17 +14,6 @@ void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('database view in document', () {
-    const location = 'database_view';
-
-    setUp(() async {
-      await TestFolder.cleanTestLocation(location);
-      await TestFolder.setTestLocation(location);
-    });
-
-    tearDown(() async {
-      await TestFolder.cleanTestLocation(null);
-    });
-
    testWidgets('insert a referenced grid', (tester) async {
      await tester.initializeAppFlowy();
      await tester.tapGoButton();
@@ -56,21 +46,21 @@ void main() {
      );
    });

-    // testWidgets('insert a referenced calendar', (tester) async {
-    //   await tester.initializeAppFlowy();
-    //   await tester.tapGoButton();
+    testWidgets('insert a referenced calendar', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();

-    //   await insertReferenceDatabase(tester, ViewLayoutPB.Calendar);
+      await insertReferenceDatabase(tester, ViewLayoutPB.Calendar);

-    //   // validate the referenced grid is inserted
-    //   expect(
-    //     find.descendant(
-    //       of: find.byType(AppFlowyEditor),
-    //       matching: find.byType(CalendarPage),
-    //     ),
-    //     findsOneWidget,
-    //   );
-    // });
+      // validate the referenced grid is inserted
+      expect(
+        find.descendant(
+          of: find.byType(AppFlowyEditor),
+          matching: find.byType(CalendarPage),
+        ),
+        findsOneWidget,
+      );
+    });
  });
 }

@@ -93,7 +83,7 @@ Future<void> insertReferenceDatabase(
  );
  // tap the first line of the document
  await tester.editor.tapLineOfEditorAt(0);
-  // insert a referenced grid
+  // insert a referenced view
  await tester.editor.showSlashMenu();
  await tester.editor.tapSlashMenuItemWithName(
    layout.referencedMenuName,
@@ -0,0 +1,121 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder2/protobuf.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/style_widget/button.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../util/ime.dart';
+import '../util/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+  TestWidgetsFlutterBinding.ensureInitialized();
+
+  group('inline math equation in document', () {
+    testWidgets('insert an inline math equation', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // create a new document
+      await tester.createNewPageWithName(
+        ViewLayoutPB.Document,
+        LocaleKeys.document_plugins_createInlineMathEquation.tr(),
+      );
+
+      // tap the first line of the document
+      await tester.editor.tapLineOfEditorAt(0);
+      // insert a inline page
+      const formula = 'E = MC ^ 2';
+      await tester.ime.insertText(formula);
+      await tester.editor.updateSelection(
+        Selection.single(path: [0], startOffset: 0, endOffset: formula.length),
+      );
+
+      // tap the inline math equation button
+      final inlineMathEquationButton = find.byTooltip(
+        LocaleKeys.document_plugins_createInlineMathEquation.tr(),
+      );
+      await tester.tapButton(inlineMathEquationButton);
+
+      // expect to see the math equation block
+      final inlineMathEquation = find.byType(InlineMathEquation);
+      expect(inlineMathEquation, findsOneWidget);
+
+      // tap it and update the content
+      await tester.tapButton(inlineMathEquation);
+      final textFormField = find.descendant(
+        of: find.byType(MathInputTextField),
+        matching: find.byType(TextFormField),
+      );
+      const newFormula = 'E = MC ^ 3';
+      await tester.enterText(textFormField, newFormula);
+      await tester.tapButton(
+        find.descendant(
+          of: find.byType(MathInputTextField),
+          matching: find.byType(FlowyButton),
+        ),
+      );
+      await tester.pumpAndSettle();
+    });
+
+    testWidgets('remove the inline math equation format', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // create a new document
+      await tester.createNewPageWithName(
+        ViewLayoutPB.Document,
+        LocaleKeys.document_plugins_createInlineMathEquation.tr(),
+      );
+
+      // tap the first line of the document
+      await tester.editor.tapLineOfEditorAt(0);
+      // insert a inline page
+      const formula = 'E = MC ^ 2';
+      await tester.ime.insertText(formula);
+      await tester.editor.updateSelection(
+        Selection.single(path: [0], startOffset: 0, endOffset: formula.length),
+      );
+
+      // tap the inline math equation button
+      var inlineMathEquationButton = find.byTooltip(
+        LocaleKeys.document_plugins_createInlineMathEquation.tr(),
+      );
+      await tester.tapButton(inlineMathEquationButton);
+
+      // expect to see the math equation block
+      var inlineMathEquation = find.byType(InlineMathEquation);
+      expect(inlineMathEquation, findsOneWidget);
+
+      // highlight the math equation block
+      await tester.editor.updateSelection(
+        Selection.single(path: [0], startOffset: 0, endOffset: 1),
+      );
+
+      // expect to the see the inline math equation button is highlighted
+      inlineMathEquationButton = find.byWidgetPredicate(
+        (widget) =>
+            widget is IconItemWidget &&
+            widget.tooltip ==
+                LocaleKeys.document_plugins_createInlineMathEquation.tr(),
+      );
+      expect(
+        tester.widget<IconItemWidget>(inlineMathEquationButton).isHighlight,
+        isTrue,
+      );
+
+      // cancel the format
+      await tester.tapButton(inlineMathEquationButton);
+
+      // expect to see the math equation block is removed
+      inlineMathEquation = find.byType(InlineMathEquation);
+      expect(inlineMathEquation, findsNothing);
+
+      tester.expectToSeeText(formula);
+    });
+  });
+}
@@ -0,0 +1,118 @@
+import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_page_block.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder2/protobuf.dart';
+import 'package:flowy_infra/uuid.dart';
+import 'package:flowy_infra_ui/widget/error_page.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../util/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('inline page view in document', () {
+    testWidgets('insert a inline page - grid', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await insertingInlinePage(tester, ViewLayoutPB.Grid);
+
+      final mentionBlock = find.byType(MentionPageBlock);
+      expect(mentionBlock, findsOneWidget);
+      await tester.tapButton(mentionBlock);
+    });
+
+    testWidgets('insert a inline page - board', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await insertingInlinePage(tester, ViewLayoutPB.Board);
+
+      final mentionBlock = find.byType(MentionPageBlock);
+      expect(mentionBlock, findsOneWidget);
+      await tester.tapButton(mentionBlock);
+    });
+
+    testWidgets('insert a inline page - calendar', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await insertingInlinePage(tester, ViewLayoutPB.Calendar);
+
+      final mentionBlock = find.byType(MentionPageBlock);
+      expect(mentionBlock, findsOneWidget);
+      await tester.tapButton(mentionBlock);
+    });
+
+    testWidgets('insert a inline page - document', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await insertingInlinePage(tester, ViewLayoutPB.Document);
+
+      final mentionBlock = find.byType(MentionPageBlock);
+      expect(mentionBlock, findsOneWidget);
+      await tester.tapButton(mentionBlock);
+    });
+
+    testWidgets('insert a inline page and rename it', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      final pageName = await insertingInlinePage(tester, ViewLayoutPB.Document);
+
+      // rename
+      await tester.hoverOnPageName(pageName);
+      const newName = 'RenameToNewPageName';
+      await tester.renamePage(newName);
+      final finder = find.descendant(
+        of: find.byType(MentionPageBlock),
+        matching: find.findTextInFlowyText(newName),
+      );
+      expect(finder, findsOneWidget);
+    });
+
+    testWidgets('insert a inline page and delete it', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      final pageName = await insertingInlinePage(tester, ViewLayoutPB.Grid);
+
+      // rename
+      await tester.hoverOnPageName(pageName);
+      await tester.tapDeletePageButton();
+      final finder = find.descendant(
+        of: find.byType(MentionPageBlock),
+        matching: find.findTextInFlowyText(pageName),
+      );
+      expect(finder, findsOneWidget);
+      await tester.tapButton(finder);
+      expect(find.byType(FlowyErrorPage), findsOneWidget);
+    });
+  });
+}
+
+/// Insert a referenced database of [layout] into the document
+Future<String> insertingInlinePage(
+  WidgetTester tester,
+  ViewLayoutPB layout,
+) async {
+  // create a new grid
+  final id = uuid();
+  final name = '${layout.name}_$id';
+  await tester.createNewPageWithName(
+    layout,
+    name,
+  );
+  // create a new document
+  await tester.createNewPageWithName(
+    ViewLayoutPB.Document,
+    'insert_a_inline_page_${layout.name}',
+  );
+  // tap the first line of the document
+  await tester.editor.tapLineOfEditorAt(0);
+  // insert a inline page
+  await tester.editor.showAtMenu();
+  await tester.editor.tapAtMenuItemWithName(name);
+  return name;
+}
@@ -13,17 +13,6 @@ void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('edit document', () {
-    const location = 'appflowy';
-
-    setUp(() async {
-      await TestFolder.cleanTestLocation(location);
-      await TestFolder.setTestLocation(location);
-    });
-
-    tearDown(() async {
-      await TestFolder.cleanTestLocation(null);
-    });
-
    testWidgets('redo & undo', (tester) async {
      await tester.initializeAppFlowy();
      await tester.tapGoButton();
@@ -118,7 +107,7 @@ const _sample = r'''
 ---
 [] Highlight any text, and use the editing menu to _style_ **your** writing `however` you ~~like.~~

-[] Type / followed by /bullet or /num to create a list.
+[] Type followed by bullet or num to create a list.

 [x] Click `+ New Page` button at the bottom of your sidebar to add a new page.

@@ -0,0 +1,95 @@
+import 'dart:io';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/workspace/application/settings/prelude.dart';
+import 'package:appflowy/workspace/presentation/home/menu/menu.dart';
+import 'package:appflowy/workspace/presentation/settings/settings_dialog.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import 'util/keyboard.dart';
+import 'util/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('hotkeys test', () {
+    testWidgets('toggle theme mode', (tester) async {
+      await tester.initializeAppFlowy();
+
+      await tester.tapGoButton();
+      tester.expectToSeeHomePage();
+
+      await tester.openSettings();
+      await tester.openSettingsPage(SettingsPage.appearance);
+      await tester.pumpAndSettle();
+
+      tester.expectToSeeText(
+        LocaleKeys.settings_appearance_themeMode_system.tr(),
+      );
+
+      await tester.tapButton(
+        find.bySemanticsLabel(
+          LocaleKeys.settings_appearance_themeMode_system.tr(),
+        ),
+      );
+
+      await tester.pumpAndSettle();
+
+      await tester.tapButton(
+        find.bySemanticsLabel(
+          LocaleKeys.settings_appearance_themeMode_dark.tr(),
+        ),
+      );
+
+      await tester.pumpAndSettle(const Duration(seconds: 1));
+
+      await tester.tap(find.byType(SettingsDialog));
+
+      await tester.pumpAndSettle();
+
+      await FlowyTestKeyboard.simulateKeyDownEvent(
+        [
+          Platform.isMacOS
+              ? LogicalKeyboardKey.meta
+              : LogicalKeyboardKey.control,
+          LogicalKeyboardKey.shift,
+          LogicalKeyboardKey.keyL,
+        ],
+        tester: tester,
+      );
+
+      await tester.pumpAndSettle();
+
+      tester.expectToSeeText(
+        LocaleKeys.settings_appearance_themeMode_light.tr(),
+      );
+    });
+
+    testWidgets('show or hide home menu', (tester) async {
+      await tester.initializeAppFlowy();
+
+      await tester.tapGoButton();
+      tester.expectToSeeHomePage();
+
+      await tester.pumpAndSettle();
+
+      expect(find.byType(HomeMenu), findsOneWidget);
+
+      await FlowyTestKeyboard.simulateKeyDownEvent(
+        [
+          Platform.isMacOS
+              ? LogicalKeyboardKey.meta
+              : LogicalKeyboardKey.control,
+          LogicalKeyboardKey.backslash,
+        ],
+        tester: tester,
+      );
+
+      await tester.pumpAndSettle();
+
+      expect(find.byType(HomeMenu), findsNothing);
+    });
+  });
+}
@@ -12,23 +12,8 @@ void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('import files', () {
-    const location = 'import_files';
-
-    setUp(() async {
-      await TestFolder.cleanTestLocation(location);
-      await TestFolder.setTestLocation(location);
-    });
-
-    tearDown(() async {
-      await TestFolder.cleanTestLocation(location);
-    });
-
-    tearDownAll(() async {
-      await TestFolder.cleanTestLocation(null);
-    });
-
    testWidgets('import multiple markdown files', (tester) async {
-      await tester.initializeAppFlowy();
+      final context = await tester.initializeAppFlowy();
      await tester.tapGoButton();

      // expect to see a readme page
@@ -38,18 +23,21 @@ void main() {
      await tester.tapImportButton();

      final testFileNames = ['test1.md', 'test2.md'];
-      final fileLocation = await tester.currentFileLocation();
+      final paths = <String>[];
      for (final fileName in testFileNames) {
        final str = await rootBundle.loadString(
-          p.join(
-            'assets/test/workspaces/markdowns',
-            fileName,
-          ),
+          'assets/test/workspaces/markdowns/$fileName',
        );
-        File(p.join(fileLocation, fileName)).writeAsStringSync(str);
+        final path = p.join(context.applicationDataDirectory, fileName);
+        paths.add(path);
+        File(path).writeAsStringSync(str);
      }
      // mock get files
-      await mockPickFilePaths(testFileNames, name: location);
+      await mockPickFilePaths(
+        paths: testFileNames
+            .map((e) => p.join(context.applicationDataDirectory, e))
+            .toList(),
+      );

      await tester.tapTextAndMarkdownButton();

@@ -8,16 +8,6 @@ void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('document', () {
-    const location = 'appflowy';
-
-    setUpAll(() async {
-      await TestFolder.setTestLocation(location);
-    });
-
-    tearDownAll(() async {
-      await TestFolder.cleanTestLocation(null);
-    });
-
    testWidgets(
        'change the language successfully when launching the app for the first time',
        (tester) async {
@@ -17,7 +17,8 @@ void main() {
    setUpAll(() async => await service.setUpAll());
    setUp(() async => await service.setUp());

-    testWidgets('testing selection on open-ai smart menu replace', (tester) async {
+    testWidgets('testing selection on open-ai smart menu replace',
+        (tester) async {
      final appFlowyEditor = await setUpOpenAITesting(tester);
      final editorState = appFlowyEditor.editorState;

@@ -38,7 +39,8 @@ void main() {
      await tester.tap(find.text('Summarize'));
      await tester.pumpAndSettle();

-      await tester.tap(find.byType(FlowyRichTextButton, skipOffstage: false).first);
+      await tester
+          .tap(find.byType(FlowyRichTextButton, skipOffstage: false).first);
      await tester.pumpAndSettle();

      expect(
@@ -49,7 +51,8 @@ void main() {
        ),
      );
    });
-    testWidgets('testing selection on open-ai smart menu insert', (tester) async {
+    testWidgets('testing selection on open-ai smart menu insert',
+        (tester) async {
      final appFlowyEditor = await setUpOpenAITesting(tester);
      final editorState = appFlowyEditor.editorState;

@@ -69,7 +72,8 @@ void main() {
      await tester.tap(find.text('Summarize'));
      await tester.pumpAndSettle();

-      await tester.tap(find.byType(FlowyRichTextButton, skipOffstage: false).at(1));
+      await tester
+          .tap(find.byType(FlowyRichTextButton, skipOffstage: false).at(1));
      await tester.pumpAndSettle();

      expect(
@@ -0,0 +1,103 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/outline/outline_block_component.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder2/protobuf.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../util/ime.dart';
+import '../util/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('outline block test', () {
+    testWidgets('insert an outline block', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.createNewPageWithName(
+        ViewLayoutPB.Document,
+        'outline_test',
+      );
+
+      await tester.editor.tapLineOfEditorAt(0);
+      await insertOutlineInDocument(tester);
+
+      // validate the outline is inserted
+      expect(find.byType(OutlineBlockWidget), findsOneWidget);
+    });
+
+    testWidgets('insert an outline block and check if headings are visible',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.createNewPageWithName(
+        ViewLayoutPB.Document,
+        'outline_test',
+      );
+      await tester.editor.tapLineOfEditorAt(0);
+
+      await tester.ime.insertText('# Heading 1\n');
+      await tester.ime.insertText('## Heading 2\n');
+      await tester.ime.insertText('### Heading 3\n');
+
+      /* Results in:
+      * # Heading 1
+      * ## Heading 2
+      * ### Heading 3
+      */
+
+      await tester.editor.tapLineOfEditorAt(3);
+      await insertOutlineInDocument(tester);
+
+      expect(
+        find.descendant(
+          of: find.byType(OutlineBlockWidget),
+          matching: find.text('Heading 1'),
+        ),
+        findsOneWidget,
+      );
+
+      // Heading 2 is prefixed with a bullet
+      expect(
+        find.descendant(
+          of: find.byType(OutlineBlockWidget),
+          matching: find.text('Heading 2'),
+        ),
+        findsOneWidget,
+      );
+
+      // Heading 3 is prefixed with a dash
+      expect(
+        find.descendant(
+          of: find.byType(OutlineBlockWidget),
+          matching: find.text('Heading 3'),
+        ),
+        findsOneWidget,
+      );
+
+      // update the Heading 1 to Heading 1Hello world
+      await tester.editor.tapLineOfEditorAt(0);
+      await tester.ime.insertText('Hello world');
+      expect(
+        find.descendant(
+          of: find.byType(OutlineBlockWidget),
+          matching: find.text('Heading 1Hello world'),
+        ),
+        findsOneWidget,
+      );
+    });
+  });
+}
+
+/// Inserts an outline block in the document
+Future<void> insertOutlineInDocument(WidgetTester tester) async {
+  // open the actions menu and insert the outline block
+  await tester.editor.showSlashMenu();
+  await tester.editor.tapSlashMenuItemWithName(
+    LocaleKeys.document_selectionMenu_outline.tr(),
+  );
+  await tester.pumpAndSettle();
+}
@@ -1,23 +1,19 @@
 import 'package:integration_test/integration_test.dart';

-import 'switch_folder_test.dart' as switch_folder_test;
-import 'document/document_test.dart' as document_test;
-import 'document/cover_image_test.dart' as cover_image_test;
-import 'share_markdown_test.dart' as share_markdown_test;
-import 'import_files_test.dart' as import_files_test;
-import 'document/document_with_database_test.dart'
-    as document_with_database_test;
-import 'document/edit_document_test.dart' as edit_document_test;
+import 'database_calendar_test.dart' as database_calendar_test;
 import 'database_cell_test.dart' as database_cell_test;
 import 'database_field_test.dart' as database_field_test;
-import 'database_share_test.dart' as database_share_test;
+import 'database_filter_test.dart' as database_filter_test;
 import 'database_row_page_test.dart' as database_row_page_test;
 import 'database_row_test.dart' as database_row_test;
 import 'database_setting_test.dart' as database_setting_test;
-import 'database_filter_test.dart' as database_filter_test;
-import 'database_view_test.dart' as database_view_test;
-import 'database_calendar_test.dart' as database_calendar_test;
+import 'database_share_test.dart' as database_share_test;
 import 'database_sort_test.dart' as database_sort_test;
+import 'database_view_test.dart' as database_view_test;
+import 'document/document_test_runner.dart' as document_test_runner;
+import 'import_files_test.dart' as import_files_test;
+import 'share_markdown_test.dart' as share_markdown_test;
+import 'switch_folder_test.dart' as switch_folder_test;

 /// The main task runner for all integration tests in AppFlowy.
 ///
@@ -33,10 +29,7 @@ void main() {
  import_files_test.main();

  // Document integration tests
-  cover_image_test.main();
-  document_test.main();
-  document_with_database_test.main();
-  edit_document_test.main();
+  document_test_runner.startTesting();

  // Database integration tests
  database_cell_test.main();
@@ -3,7 +3,7 @@ import 'dart:io';
 import 'package:appflowy/plugins/document/presentation/share/share_button.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
-
+import 'package:path/path.dart' as p;
 import 'util/mock/mock_file_picker.dart';
 import 'util/util.dart';

@@ -11,30 +11,17 @@ void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('share markdown in document page', () {
-    const location = 'markdown';
-
-    setUp(() async {
-      await TestFolder.cleanTestLocation(location);
-      await TestFolder.setTestLocation(location);
-    });
-
-    tearDown(() async {
-      await TestFolder.cleanTestLocation(location);
-    });
-
-    tearDownAll(() async {
-      await TestFolder.cleanTestLocation(null);
-    });
-
    testWidgets('click the share button in document page', (tester) async {
-      await tester.initializeAppFlowy();
+      final context = await tester.initializeAppFlowy();
      await tester.tapGoButton();

      // expect to see a readme page
      tester.expectToSeePageName(readme);

      // mock the file picker
-      final path = await mockSaveFilePath(location, 'test.md');
+      final path = await mockSaveFilePath(
+        p.join(context.applicationDataDirectory, 'test.md'),
+      );
      // click the share button and select markdown
      await tester.tapShareButton();
      await tester.tapMarkdownButton();
@@ -52,7 +39,7 @@ void main() {
    testWidgets(
      'share the markdown after renaming the document name',
      (tester) async {
-        await tester.initializeAppFlowy();
+        final context = await tester.initializeAppFlowy();
        await tester.tapGoButton();

        // expect to see a readme page
@@ -65,8 +52,12 @@ void main() {
        final shareButton = find.byType(ShareActionList);
        final shareButtonState =
            tester.state(shareButton) as ShareActionListState;
-        final path =
-            await mockSaveFilePath(location, '${shareButtonState.name}.md');
+        final path = await mockSaveFilePath(
+          p.join(
+            context.applicationDataDirectory,
+            '${shareButtonState.name}.md',
+          ),
+        );

        // click the share button and select markdown
        await tester.tapShareButton();
@@ -1,48 +1,36 @@
+import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy/startup/tasks/prelude.dart';
 import 'package:appflowy/workspace/application/settings/prelude.dart';
-import 'package:appflowy/workspace/application/settings/settings_location_cubit.dart';
-import 'package:flowy_infra/uuid.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
-
+import 'package:path/path.dart' as p;
 import 'util/mock/mock_file_picker.dart';
 import 'util/util.dart';
-import 'package:path/path.dart' as p;

 void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('customize the folder path', () {
-    const location = 'appflowy';
-
-    setUp(() async {
-      await TestFolder.cleanTestLocation(location);
-      await TestFolder.setTestLocation(location);
-    });
-
-    tearDown(() async {
-      await TestFolder.cleanTestLocation(location);
-    });
-
-    tearDownAll(() async {
-      await TestFolder.cleanTestLocation(null);
-    });
-
    testWidgets('switch to B from A, then switch to A again', (tester) async {
-      final userA = uuid();
-      final userB = uuid();
+      const userA = 'UserA';
+      const userB = 'UserB';

-      await TestFolder.cleanTestLocation(userA);
-      await TestFolder.cleanTestLocation(userB);
-      await TestFolder.setTestLocation(p.join(userA, appFlowyDataFolder));
-
-      await tester.initializeAppFlowy();
+      final initialPath = p.join(userA, appFlowyDataFolder);
+      final context = await tester.initializeAppFlowy(
+        pathExtension: initialPath,
+      );
+      // remove the last extension
+      final rootPath = context.applicationDataDirectory.replaceFirst(
+        initialPath,
+        '',
+      );

      await tester.tapGoButton();
      tester.expectToSeeHomePage();

      // switch to user B
      {
-        // set user name to userA
+        // set user name for userA
        await tester.openSettings();
        await tester.openSettingsPage(SettingsPage.user);
        await tester.enterUserName(userA);
@@ -51,12 +39,14 @@ void main() {
        await tester.pumpAndSettle();

        // mock the file_picker result
-        await mockGetDirectoryPath(userB);
+        await mockGetDirectoryPath(
+          p.join(rootPath, userB),
+        );
        await tester.tapCustomLocationButton();
        await tester.pumpAndSettle();
        tester.expectToSeeHomePage();

-        // set user name to userB
+        // set user name for userB
        await tester.openSettings();
        await tester.openSettingsPage(SettingsPage.user);
        await tester.enterUserName(userB);
@@ -68,7 +58,9 @@ void main() {
        await tester.pumpAndSettle();

        // mock the file_picker result
-        await mockGetDirectoryPath(userA);
+        await mockGetDirectoryPath(
+          p.join(rootPath, userA),
+        );
        await tester.tapCustomLocationButton();

        await tester.pumpAndSettle();
@@ -83,16 +75,15 @@ void main() {
        await tester.pumpAndSettle();

        // mock the file_picker result
-        await mockGetDirectoryPath(userB);
+        await mockGetDirectoryPath(
+          p.join(rootPath, userB),
+        );
        await tester.tapCustomLocationButton();

        await tester.pumpAndSettle();
        tester.expectToSeeHomePage();
        tester.expectToSeeUserName(userB);
      }
-
-      await TestFolder.cleanTestLocation(userA);
-      await TestFolder.cleanTestLocation(userB);
    });

    testWidgets('reset to default location', (tester) async {
@@ -109,8 +100,8 @@ void main() {
      await tester.restoreLocation();

      expect(
-        await TestFolder.defaultDevelopmentLocation(),
-        await TestFolder.currentLocation(),
+        await appFlowyApplicationDataDirectory().then((value) => value.path),
+        await getIt<ApplicationDataStorage>().getPath(),
      );
    });
  });
@@ -1,88 +1,88 @@
 import 'dart:io';

-import 'package:appflowy/core/config/kv_keys.dart';
 import 'package:appflowy/startup/entry_point.dart';
 import 'package:appflowy/startup/startup.dart';
-import 'package:appflowy/startup/tasks/prelude.dart';
+import 'package:appflowy/workspace/application/settings/prelude.dart';
+import 'package:flowy_infra/uuid.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:path_provider/path_provider.dart';
-import 'package:shared_preferences/shared_preferences.dart';
+import 'package:path/path.dart' as p;

-class TestFolder {
-  /// Location / Path
+class FlowyTestContext {
+  FlowyTestContext({
+    required this.applicationDataDirectory,
+  });

-  /// Set a given AppFlowy data storage location under test environment.
-  ///
-  /// To pass null means clear the location.
-  ///
-  /// The file_picker is a system component and can't be tapped, so using logic instead of tapping.
-  ///
-  static Future<void> setTestLocation(String? name) async {
-    final location = await testLocation(name);
-    SharedPreferences.setMockInitialValues({
-      KVKeys.pathLocation: location.path,
-    });
-    return;
-  }
-
-  /// Clean the location.
-  static Future<void> cleanTestLocation(String? name) async {
-    final dir = await testLocation(name);
-    await dir.delete(recursive: true);
-    return;
-  }
-
-  /// Get current using location.
-  static Future<String> currentLocation() async {
-    final prefs = await SharedPreferences.getInstance();
-    return prefs.getString(KVKeys.pathLocation)!;
-  }
-
-  /// Get default location under development environment.
-  static Future<String> defaultDevelopmentLocation() async {
-    final dir = await appFlowyApplicationDataDirectory();
-    return dir.path;
-  }
-
-  /// Get default location under test environment.
-  static Future<Directory> testLocation(String? name) async {
-    final dir = await getApplicationDocumentsDirectory();
-    var path = '${dir.path}/flowy_test';
-    if (name != null) {
-      path += '/$name';
-    }
-    return Directory(path).create(recursive: true);
-  }
+  final String applicationDataDirectory;
 }

 extension AppFlowyTestBase on WidgetTester {
-  Future<void> initializeAppFlowy() async {
+  Future<FlowyTestContext> initializeAppFlowy({
+    // use to append after the application data directory
+    String? pathExtension,
+    Size windowsSize = const Size(1600, 1200),
+  }) async {
+    binding.setSurfaceSize(windowsSize);
+
+    mockHotKeyManagerHandlers();
+    final directory = await mockApplicationDataStorage(
+      pathExtension: pathExtension,
+    );
+
+    WidgetsFlutterBinding.ensureInitialized();
+    await FlowyRunner.run(
+      FlowyApp(),
+      IntegrationMode.integrationTest,
+    );
+
+    await wait(3000);
+    await pumpAndSettle(const Duration(seconds: 2));
+    return FlowyTestContext(
+      applicationDataDirectory: directory,
+    );
+  }
+
+  void mockHotKeyManagerHandlers() {
    TestDefaultBinaryMessengerBinding.instance.defaultBinaryMessenger
        .setMockMethodCallHandler(const MethodChannel('hotkey_manager'),
            (MethodCall methodCall) async {
      if (methodCall.method == 'unregisterAll') {
        // do nothing
      }
-
      return;
    });
+  }

-    WidgetsFlutterBinding.ensureInitialized();
-    await FlowyRunner.run(FlowyApp(), IntegrationMode.integrationTest);
+  Future<String> mockApplicationDataStorage({
+    // use to append after the application data directory
+    String? pathExtension,
+  }) async {
+    final dir = await getTemporaryDirectory();

-    await wait(3000);
-    await pumpAndSettle(const Duration(seconds: 2));
+    // Use a random uuid to avoid conflict.
+    String path = p.join(dir.path, 'appflowy_integration_test', uuid());
+    if (pathExtension != null && pathExtension.isNotEmpty) {
+      path = '$path/$pathExtension';
+    }
+    final directory = Directory(path);
+    if (!directory.existsSync()) {
+      await directory.create(recursive: true);
+    }
+
+    MockApplicationDataStorage.initialPath = directory.path;
+
+    return directory.path;
  }

  Future<void> tapButton(
    Finder finder, {
    int? pointer,
    int buttons = kPrimaryButton,
-    bool warnIfMissed = true,
+    bool warnIfMissed = false,
    int milliseconds = 500,
  }) async {
    await tap(
@@ -127,6 +127,18 @@ extension AppFlowyTestBase on WidgetTester {
    return;
  }

+  Future<void> doubleTapAt(
+    Offset location, {
+    int? pointer,
+    int buttons = kPrimaryButton,
+    int milliseconds = 500,
+  }) async {
+    await tapAt(location, pointer: pointer, buttons: buttons);
+    await pump(kDoubleTapMinTime);
+    await tapAt(location, pointer: pointer, buttons: buttons);
+    await pumpAndSettle(Duration(milliseconds: milliseconds));
+  }
+
  Future<void> doubleTapButton(
    Finder finder, {
    int? pointer,
@@ -134,20 +146,22 @@ extension AppFlowyTestBase on WidgetTester {
    bool warnIfMissed = true,
    int milliseconds = 500,
  }) async {
-    await tapButton(
+    await tap(
      finder,
      pointer: pointer,
      buttons: buttons,
      warnIfMissed: warnIfMissed,
-      milliseconds: kDoubleTapMinTime.inMilliseconds,
    );
-    await tapButton(
+
+    await pump(kDoubleTapMinTime);
+
+    await tap(
      finder,
-      pointer: pointer,
      buttons: buttons,
+      pointer: pointer,
      warnIfMissed: warnIfMissed,
-      milliseconds: milliseconds,
    );
+    await pumpAndSettle(Duration(milliseconds: milliseconds));
  }

  Future<void> wait(int milliseconds) async {
@@ -17,11 +17,6 @@ import 'package:flutter_test/flutter_test.dart';
 import 'util.dart';

 extension CommonOperations on WidgetTester {
-  /// Get current file location of AppFlowy.
-  Future<String> currentFileLocation() async {
-    return TestFolder.currentLocation();
-  }
-
  /// Tap the GetStart button on the launch page.
  Future<void> tapGoButton() async {
    final goButton = find.byType(GoButton);
@@ -2,6 +2,7 @@ import 'dart:io';

 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database_view/board/presentation/board_page.dart';
+import 'package:appflowy/plugins/database_view/calendar/application/calendar_bloc.dart';
 import 'package:appflowy/plugins/database_view/calendar/presentation/calendar_day.dart';
 import 'package:appflowy/plugins/database_view/calendar/presentation/calendar_page.dart';
 import 'package:appflowy/plugins/database_view/calendar/presentation/toolbar/calendar_layout_setting.dart';
@@ -40,6 +41,7 @@ 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/setting_entities.pbenum.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
+import 'package:calendar_view/calendar_view.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/text_input.dart';
@@ -71,7 +73,7 @@ import 'mock/mock_file_picker.dart';

 extension AppFlowyDatabaseTest on WidgetTester {
  Future<void> openV020database() async {
-    await initializeAppFlowy();
+    final context = await initializeAppFlowy();
    await tapGoButton();

    // expect to see a readme page
@@ -81,18 +83,25 @@ extension AppFlowyDatabaseTest on WidgetTester {
    await tapImportButton();

    final testFileNames = ['v020.afdb'];
-    final fileLocation = await currentFileLocation();
+    final paths = <String>[];
    for (final fileName in testFileNames) {
-      final str = await rootBundle.loadString(
-        p.join(
-          'assets/test/workspaces/database',
-          fileName,
-        ),
+      // Don't use the p.join to build the path that used in loadString. It
+      // is not working on windows.
+      final str = await rootBundle
+          .loadString("assets/test/workspaces/database/$fileName");
+
+      // Write the content to the file.
+      final path = p.join(
+        context.applicationDataDirectory,
+        fileName,
      );
-      File(p.join(fileLocation, fileName)).writeAsStringSync(str);
+      paths.add(path);
+      File(path).writeAsStringSync(str);
    }
    // mock get files
-    await mockPickFilePaths(testFileNames, name: 'import_files');
+    await mockPickFilePaths(
+      paths: paths,
+    );
    await tapDatabaseRawDataButton();
    await openPage('v020');
  }
@@ -294,7 +303,17 @@ extension AppFlowyDatabaseTest on WidgetTester {
      matching: findDay,
    );

-    await tapButton(finder);
+    // if the day is very near the beginning or the end of the month,
+    // it may overlap with the same day in the next or previous month,
+    // respectively because it was spilling over. This will lead to 2
+    // widgets being found and thus cannot be tapped correctly.
+    if (content < 15) {
+      // e.g., Jan 2 instead of Feb 2
+      await tapButton(finder.first);
+    } else {
+      // e.g. Jun 28 instead of May 28
+      await tapButton(finder.last);
+    }
  }

  Future<void> toggleIncludeTime() async {
@@ -434,8 +453,15 @@ extension AppFlowyDatabaseTest on WidgetTester {
  }

  Future<void> dismissRowDetailPage() async {
-    await sendKeyEvent(LogicalKeyboardKey.escape);
+    // use tap empty area instead of clicking ESC to dismiss the row detail page
+    // sometimes, the ESC key is not working.
+    await simulateKeyEvent(LogicalKeyboardKey.escape);
    await pumpAndSettle();
+    final findRowDetailPage = find.byType(RowDetailPage);
+    if (findRowDetailPage.evaluate().isNotEmpty) {
+      await tapAt(const Offset(0, 0));
+      await pumpAndSettle();
+    }
  }

  Future<void> editTitleInRowDetailPage(String title) async {
@@ -461,17 +487,6 @@ extension AppFlowyDatabaseTest on WidgetTester {
    await tapButton(find.byType(EmojiSelectionMenu));
  }

-  /// Must call [openEmojiPicker] first
-  Future<void> switchToEmojiList() async {
-    final icon = find.byIcon(Icons.tag_faces);
-    await tapButton(icon);
-  }
-
-  Future<void> tapEmoji(String emoji) async {
-    final emojiWidget = find.text(emoji);
-    await tapButton(emojiWidget);
-  }
-
  Future<void> tapDateCellInRowDetailPage() async {
    final findDateCell = find.byType(GridDateCell);
    await tapButton(findDateCell);
@@ -978,9 +993,20 @@ extension AppFlowyDatabaseTest on WidgetTester {
  Future<void> scrollToToday() async {
    final todayCell = find.byWidgetPredicate(
      (widget) => widget is CalendarDayCard && widget.isToday,
-      skipOffstage: false,
    );
-    await ensureVisible(todayCell);
+    final scrollable = find
+        .descendant(
+          of: find.byType(MonthView<CalendarDayEvent>),
+          matching: find.byWidgetPredicate(
+            (widget) => widget is Scrollable && widget.axis == Axis.vertical,
+          ),
+        )
+        .first;
+    await scrollUntilVisible(
+      todayCell,
+      300,
+      scrollable: scrollable,
+    );
    await pumpAndSettle(const Duration(milliseconds: 300));
  }

@@ -1012,7 +1038,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
    expect(findEvents, findsNWidgets(number));
  }

-  void assertNumberofEventsOnSpecificDay(
+  void assertNumberOfEventsOnSpecificDay(
    int number,
    DateTime date, {
    String? title,
@@ -1039,8 +1065,8 @@ extension AppFlowyDatabaseTest on WidgetTester {
    final todayCell = find.byWidgetPredicate(
      (widget) => widget is CalendarDayCard && isSameDay(date, widget.date),
    );
-
-    await doubleTapButton(todayCell);
+    final location = getTopLeft(todayCell).translate(10, 10);
+    await doubleTapAt(location);
  }

  Future<void> openCalendarEvent({required index, DateTime? date}) async {
@@ -1,4 +1,15 @@
+import 'dart:ui';
+
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/cover_editor.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/custom_cover_picker.dart';
+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_editor/appflowy_editor.dart' hide Log;
+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 'ime.dart';
@@ -21,19 +32,109 @@ class EditorOperations {

  /// Tap the line of editor at [index]
  Future<void> tapLineOfEditorAt(int index) async {
-    final textBlocks = find.byType(TextBlockComponentWidget);
+    final textBlocks = find.byType(AppFlowyRichText);
+    index = index.clamp(0, textBlocks.evaluate().length - 1);
    await tester.tapAt(tester.getTopRight(textBlocks.at(index)));
+    await tester.pumpAndSettle();
  }

  /// Hover on cover plugin button above the document
-  Future<void> hoverOnCoverPluginAddButton() async {
-    final editor = find.byWidgetPredicate(
-      (widget) => widget is AppFlowyEditor,
+  Future<void> hoverOnCoverToolbar() async {
+    final coverToolbar = find.byType(DocumentHeaderToolbar);
+    await tester.startGesture(
+      tester.getBottomLeft(coverToolbar).translate(5, -5),
+      kind: PointerDeviceKind.mouse,
    );
-    await tester.hoverOnWidget(
-      editor,
-      offset: tester.getTopLeft(editor).translate(20, 20),
+    await tester.pumpAndSettle();
+  }
+
+  /// Taps on the 'Add Icon' button in the cover toolbar
+  Future<void> tapAddIconButton() async {
+    await tester.tapButtonWithName(
+      LocaleKeys.document_plugins_cover_addIcon.tr(),
    );
+    expect(find.byType(EmojiPopover), findsOneWidget);
+  }
+
+  /// Taps the 'Remove Icon' button in the cover toolbar and the icon popover
+  Future<void> tapRemoveIconButton({bool isInPicker = false}) async {
+    Finder button =
+        find.text(LocaleKeys.document_plugins_cover_removeIcon.tr());
+    if (isInPicker) {
+      button = find.descendant(of: find.byType(EmojiPopover), matching: button);
+    }
+
+    await tester.tapButton(button);
+  }
+
+  /// Requires that the document must already have an icon. This opens the icon
+  /// picker
+  Future<void> tapOnIconWidget() async {
+    final iconWidget = find.byType(EmojiIconWidget);
+    await tester.tapButton(iconWidget);
+  }
+
+  Future<void> tapOnAddCover() async {
+    await tester.tapButtonWithName(
+      LocaleKeys.document_plugins_cover_addCover.tr(),
+    );
+  }
+
+  Future<void> tapOnChangeCover() async {
+    await tester.tapButtonWithName(
+      LocaleKeys.document_plugins_cover_changeCover.tr(),
+    );
+  }
+
+  Future<void> switchSolidColorBackground() async {
+    final findPurpleButton = find.byWidgetPredicate(
+      (widget) => widget is ColorItem && widget.option.colorHex == "ffe8e0ff",
+    );
+    await tester.tapButton(findPurpleButton);
+  }
+
+  Future<void> addNetworkImageCover(String imageUrl) async {
+    final findNewImageButton = find.byType(NewCustomCoverButton);
+    await tester.tapButton(findNewImageButton);
+
+    final imageUrlTextField = find.descendant(
+      of: find.byType(NetworkImageUrlInput),
+      matching: find.byType(TextField),
+    );
+    await tester.enterText(imageUrlTextField, imageUrl);
+    await tester.tapButtonWithName(
+      LocaleKeys.document_plugins_cover_add.tr(),
+    );
+    await tester.tapButtonWithName(
+      LocaleKeys.document_plugins_cover_saveToGallery.tr(),
+    );
+  }
+
+  Future<void> switchNetworkImageCover(String imageUrl) async {
+    final image = find.byWidgetPredicate(
+      (widget) => widget is ImageGridItem,
+    );
+    await tester.tapButton(image);
+  }
+
+  Future<void> tapOnRemoveCover() async {
+    await tester.tapButton(find.byType(DeleteCoverButton));
+  }
+
+  /// A cover must be present in the document to function properly since this
+  /// catches all cover types collectively
+  Future<void> hoverOnCover() async {
+    final cover = find.byType(DocumentCover);
+    await tester.startGesture(
+      tester.getCenter(cover),
+      kind: PointerDeviceKind.mouse,
+    );
+    await tester.pumpAndSettle();
+  }
+
+  Future<void> dismissCoverPicker() async {
+    await tester.sendKeyEvent(LogicalKeyboardKey.escape);
+    await tester.pumpAndSettle();
  }

  /// trigger the slash command (selection menu)
@@ -41,6 +142,11 @@ class EditorOperations {
    await tester.ime.insertCharacter('/');
  }

+  /// trigger the slash command (selection menu)
+  Future<void> showAtMenu() async {
+    await tester.ime.insertCharacter('@');
+  }
+
  /// Tap the slash menu item with [name]
  ///
  /// Must call [showSlashMenu] first.
@@ -48,4 +154,25 @@ class EditorOperations {
    final slashMenuItem = find.text(name, findRichText: true);
    await tester.tapButton(slashMenuItem);
  }
+
+  /// Tap the at menu item with [name]
+  ///
+  /// Must call [showAtMenu] first.
+  Future<void> tapAtMenuItemWithName(String name) async {
+    final atMenuItem = find.descendant(
+      of: find.byType(SelectionMenuWidget),
+      matching: find.text(name, findRichText: true),
+    );
+    await tester.tapButton(atMenuItem);
+  }
+
+  /// Update the editor's selection
+  Future<void> updateSelection(Selection selection) async {
+    final editorState = getCurrentEditorState();
+    editorState.updateSelectionWithReason(
+      selection,
+      reason: SelectionUpdateReason.uiEvent,
+    );
+    await tester.pumpAndSettle(const Duration(milliseconds: 200));
+  }
 }
@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+import 'base.dart';
+
+extension EmojiTestExtension on WidgetTester {
+  /// Must call [openEmojiPicker] first
+  Future<void> switchToEmojiList() async {
+    final icon = find.byIcon(Icons.tag_faces);
+    await tapButton(icon);
+  }
+
+  Future<void> tapEmoji(String emoji) async {
+    final emojiWidget = find.text(emoji);
+    await tapButton(emojiWidget);
+  }
+}
@@ -1,5 +1,7 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/banner.dart';
+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/workspace/presentation/home/home_stack.dart';
 import 'package:appflowy/workspace/presentation/home/menu/app/section/item.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -47,7 +49,7 @@ extension Expectation on WidgetTester {
    expect(exportSuccess, findsOneWidget);
  }

-  /// Expect to see the add button and icon button inside the document.
+  /// Expect to see the add button and icon button in the cover toolbar
  void expectToSeePluginAddCoverAndIconButton() {
    final addCover = find.textContaining(
      LocaleKeys.document_plugins_cover_addCover.tr(),
@@ -59,6 +61,51 @@ extension Expectation on WidgetTester {
    expect(addIcon, findsOneWidget);
  }

+  /// Expect to see the document header toolbar empty
+  void expectToSeeEmptyDocumentHeaderToolbar() {
+    final addCover = find.textContaining(
+      LocaleKeys.document_plugins_cover_addCover.tr(),
+    );
+    final addIcon = find.textContaining(
+      LocaleKeys.document_plugins_cover_addIcon.tr(),
+    );
+    expect(addCover, findsNothing);
+    expect(addIcon, findsNothing);
+  }
+
+  void expectToSeeDocumentIcon(String? emoji) {
+    if (emoji == null) {
+      final iconWidget = find.byType(EmojiIconWidget);
+      expect(iconWidget, findsNothing);
+      return;
+    }
+    final iconWidget = find.byWidgetPredicate(
+      (widget) => widget is EmojiIconWidget && widget.emoji == emoji,
+    );
+    expect(iconWidget, findsOneWidget);
+  }
+
+  void expectToSeeDocumentCover(CoverType type) {
+    final findCover = find.byWidgetPredicate(
+      (widget) => widget is DocumentCover && widget.coverType == type,
+    );
+    expect(findCover, findsOneWidget);
+  }
+
+  void expectToSeeNoDocumentCover() {
+    final findCover = find.byType(DocumentCover);
+    expect(findCover, findsNothing);
+  }
+
+  void expectChangeCoverAndDeleteButton() {
+    final findChangeCover = find.text(
+      LocaleKeys.document_plugins_cover_changeCover.tr(),
+    );
+    final findRemoveIcon = find.byType(DeleteCoverButton);
+    expect(findChangeCover, findsOneWidget);
+    expect(findRemoveIcon, findsOneWidget);
+  }
+
  /// Expect to see the user name on the home page
  void expectToSeeUserName(String name) {
    final userName = find.byWidgetPredicate(
@@ -9,11 +9,11 @@ extension IME on WidgetTester {

 class IMESimulator {
  IMESimulator(this.tester) {
-    client = findDeltaTextInputClient();
+    client = findTextInputClient();
  }

  final WidgetTester tester;
-  late final DeltaTextInputClient client;
+  late final TextInputClient client;

  Future<void> insertText(String text) async {
    for (final c in text.characters) {
@@ -27,28 +27,22 @@ class IMESimulator {
      assert(false);
      return;
    }
-    final deltas = [
-      TextEditingDeltaInsertion(
-        textInserted: character,
-        oldText: value.text.replaceRange(
-          value.selection.start,
-          value.selection.end,
-          '',
-        ),
-        insertionOffset: value.selection.baseOffset,
-        selection: TextSelection.collapsed(
-          offset: value.selection.baseOffset + 1,
-        ),
-        composing: TextRange.empty,
+    final text = value.text
+        .replaceRange(value.selection.start, value.selection.end, character);
+    final textEditingValue = TextEditingValue(
+      text: text,
+      selection: TextSelection.collapsed(
+        offset: value.selection.baseOffset + 1,
      ),
-    ];
-    client.updateEditingValueWithDeltas(deltas);
+      composing: TextRange.empty,
+    );
+    client.updateEditingValue(textEditingValue);
    await tester.pumpAndSettle();
  }

-  DeltaTextInputClient findDeltaTextInputClient() {
+  TextInputClient findTextInputClient() {
    final finder = find.byType(KeyboardServiceWidget);
    final KeyboardServiceWidgetState state = tester.state(finder);
-    return state.textInputService as DeltaTextInputClient;
+    return state.textInputService as TextInputClient;
  }
 }
@@ -1,10 +1,5 @@
-import 'dart:io';
-
 import 'package:appflowy/startup/startup.dart';
-import 'package:appflowy/util/file_picker/file_picker_service.dart';
-import 'package:file_picker/file_picker.dart' as fp;
-import 'package:path/path.dart' as p;
-import '../util.dart';
+import 'package:flowy_infra/file_picker/file_picker_service.dart';

 class MockFilePicker implements FilePickerService {
  MockFilePicker({
@@ -25,7 +20,7 @@ class MockFilePicker implements FilePickerService {
    String? dialogTitle,
    String? fileName,
    String? initialDirectory,
-    fp.FileType type = fp.FileType.any,
+    FileType type = FileType.any,
    List<String>? allowedExtensions,
    bool lockParentWindow = false,
  }) {
@@ -36,18 +31,17 @@ class MockFilePicker implements FilePickerService {
  Future<FilePickerResult?> pickFiles({
    String? dialogTitle,
    String? initialDirectory,
-    fp.FileType type = fp.FileType.any,
+    FileType type = FileType.any,
    List<String>? allowedExtensions,
-    Function(fp.FilePickerStatus p1)? onFileLoading,
+    Function(FilePickerStatus p1)? onFileLoading,
    bool allowCompression = true,
    bool allowMultiple = false,
    bool withData = false,
    bool withReadStream = false,
    bool lockParentWindow = false,
  }) {
-    final platformFiles = mockPaths
-        .map((e) => fp.PlatformFile(path: e, name: '', size: 0))
-        .toList();
+    final platformFiles =
+        mockPaths.map((e) => PlatformFile(path: e, name: '', size: 0)).toList();
    return Future.value(
      FilePickerResult(
        platformFiles,
@@ -56,20 +50,21 @@ class MockFilePicker implements FilePickerService {
  }
 }

-Future<void> mockGetDirectoryPath(String? name) async {
-  final dir = await TestFolder.testLocation(name);
+Future<void> mockGetDirectoryPath(
+  String path,
+) async {
  getIt.unregister<FilePickerService>();
  getIt.registerFactory<FilePickerService>(
    () => MockFilePicker(
-      mockPath: dir.path,
+      mockPath: path,
    ),
  );
  return;
 }

-Future<String> mockSaveFilePath(String? name, String fileName) async {
-  final dir = await TestFolder.testLocation(name);
-  final path = p.join(dir.path, fileName);
+Future<String> mockSaveFilePath(
+  String path,
+) async {
  getIt.unregister<FilePickerService>();
  getIt.registerFactory<FilePickerService>(
    () => MockFilePicker(
@@ -79,18 +74,16 @@ Future<String> mockSaveFilePath(String? name, String fileName) async {
  return path;
 }

-Future<List<String>> mockPickFilePaths(
-  List<String> fileNames, {
-  String? name,
-  String? customPath,
+Future<List<String>> mockPickFilePaths({
+  required List<String> paths,
 }) async {
-  late final Directory dir;
-  if (customPath != null) {
-    dir = Directory(customPath);
-  } else {
-    dir = await TestFolder.testLocation(name);
-  }
-  final paths = fileNames.map((e) => p.join(dir.path, e)).toList();
+  // late final Directory dir;
+  // if (customPath != null) {
+  //   dir = Directory(customPath);
+  // } else {
+  //   dir = await TestFolder.testLocation(applicationDataPath, name);
+  // }
+  // final paths = fileNames.map((e) => p.join(dir.path, e)).toList();
  getIt.unregister<FilePickerService>();
  getIt.registerFactory<FilePickerService>(
    () => MockFilePicker(
@@ -7,32 +7,24 @@ class Config {
    required String anonKey,
    required String key,
    required String secret,
+    required String pgUrl,
+    required String pgUser,
+    required String pgPassword,
+    required String pgPort,
  }) async {
+    final postgresConfig = PostgresConfigurationPB.create()
+      ..url = pgUrl
+      ..userName = pgUser
+      ..password = pgPassword
+      ..port = int.parse(pgPort);
+
    await ConfigEventSetSupabaseConfig(
      SupabaseConfigPB.create()
        ..supabaseUrl = url
        ..key = key
        ..anonKey = anonKey
-        ..jwtSecret = secret,
+        ..jwtSecret = secret
+        ..postgresConfig = postgresConfig,
    ).send();
  }
-
-  static Future<void> setSupabaseCollabPluginConfig({
-    required String url,
-    required String key,
-    required String jwtSecret,
-    required String collabTable,
-  }) async {
-    final payload = CollabPluginConfigPB.create();
-    final collabTableConfig = CollabTableConfigPB.create()
-      ..tableName = collabTable;
-
-    payload.supabaseConfig = SupabaseDBConfigPB.create()
-      ..supabaseUrl = url
-      ..key = key
-      ..jwtSecret = jwtSecret
-      ..collabTableConfig = collabTableConfig;
-
-    await ConfigEventSetCollabPluginConfig(payload).send();
-  }
 }
@@ -18,4 +18,9 @@ class KVKeys {
  /// The value is a json string with the following format:
  ///   {'height': 600.0, 'width': 800.0}
  static const String windowSize = 'windowSize';
+
+  static const String kDocumentAppearanceFontSize =
+      'kDocumentAppearanceFontSize';
+  static const String kDocumentAppearanceFontFamily =
+      'kDocumentAppearanceFontFamily';
 }
@@ -3,6 +3,17 @@ import 'package:envied/envied.dart';

 part 'env.g.dart';

+/// The environment variables are defined in `.env` file that is located in the
+/// appflowy_flutter.
+///   Run `dart run build_runner build --delete-conflicting-outputs`
+///   to generate the keys from the env file.
+///
+///   If you want to regenerate the keys, you need to run `dart run
+///   build_runner clean` before running `dart run build_runner build
+///    --delete-conflicting-outputs`.
+
+/// Follow the guide on https://supabase.com/docs/guides/auth/social-login/auth-google to setup the auth provider.
+///
@Envied(path: '.env')
 abstract class Env {
  @EnviedField(
@@ -32,14 +43,39 @@ abstract class Env {

  @EnviedField(
    obfuscate: true,
-    varName: 'SUPABASE_COLLAB_TABLE',
+    varName: 'SUPABASE_DB',
    defaultValue: '',
  )
-  static final String supabaseCollabTable = _Env.supabaseCollabTable;
+  static final String supabaseDb = _Env.supabaseDb;
+
+  @EnviedField(
+    obfuscate: true,
+    varName: 'SUPABASE_DB_USER',
+    defaultValue: '',
+  )
+  static final String supabaseDbUser = _Env.supabaseDbUser;
+
+  @EnviedField(
+    obfuscate: true,
+    varName: 'SUPABASE_DB_PASSWORD',
+    defaultValue: '',
+  )
+  static final String supabaseDbPassword = _Env.supabaseDbPassword;
+
+  @EnviedField(
+    obfuscate: true,
+    varName: 'SUPABASE_DB_PORT',
+    defaultValue: '5432',
+  )
+  static final String supabaseDbPort = _Env.supabaseDbPort;
 }

 bool get isSupabaseEnable =>
    Env.supabaseUrl.isNotEmpty &&
    Env.supabaseAnonKey.isNotEmpty &&
    Env.supabaseKey.isNotEmpty &&
-    Env.supabaseJwtSecret.isNotEmpty;
+    Env.supabaseJwtSecret.isNotEmpty &&
+    Env.supabaseDb.isNotEmpty &&
+    Env.supabaseDbUser.isNotEmpty &&
+    Env.supabaseDbPassword.isNotEmpty &&
+    Env.supabaseDbPort.isNotEmpty;
@@ -3,7 +3,6 @@ import 'package:appflowy/plugins/database_view/grid/application/row/row_document
 import 'package:appflowy/plugins/document/application/doc_bloc.dart';
 import 'package:appflowy/plugins/document/presentation/editor_page.dart';
 import 'package:appflowy/plugins/document/presentation/editor_style.dart';
-import 'package:appflowy/plugins/document/presentation/more/cubit/document_appearance_cubit.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/widget/error_page.dart';
@@ -86,7 +85,6 @@ class _RowEditorState extends State<RowEditor> {
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
-        BlocProvider(create: (_) => DocumentAppearanceCubit()),
        BlocProvider.value(value: documentBloc),
      ],
      child: BlocBuilder<DocumentBloc, DocumentState>(
@@ -9,7 +9,7 @@ import 'package:appflowy/plugins/document/application/doc_service.dart';
 import 'package:appflowy_backend/protobuf/flowy-document2/protobuf.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/user_profile.pbserver.dart';
 import 'package:appflowy_editor/appflowy_editor.dart'
-    show EditorState, LogLevel, TransactionTime;
+    show EditorState, LogLevel, TransactionTime, Selection, paragraphNode;
 import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
 import 'package:flutter/foundation.dart';
@@ -155,6 +155,9 @@ class DocumentBloc extends Bloc<DocumentEvent, DocumentState> {
        return;
      }
      await _transactionAdapter.apply(event.$2, editorState);
+
+      // check if the document is empty.
+      applyRules();
    });

    // output the log from the editor when debug mode
@@ -166,6 +169,39 @@ class DocumentBloc extends Bloc<DocumentEvent, DocumentState> {
        };
    }
  }
+
+  Future<void> applyRules() async {
+    ensureAtLeastOneParagraphExists();
+    ensureLastNodeIsEditable();
+  }
+
+  Future<void> ensureLastNodeIsEditable() async {
+    final editorState = this.editorState;
+    if (editorState == null) {
+      return;
+    }
+    final document = editorState.document;
+    final lastNode = document.root.children.lastOrNull;
+    if (lastNode == null || lastNode.delta == null) {
+      final transaction = editorState.transaction;
+      transaction.insertNode([document.root.children.length], paragraphNode());
+      await editorState.apply(transaction);
+    }
+  }
+
+  Future<void> ensureAtLeastOneParagraphExists() async {
+    final editorState = this.editorState;
+    if (editorState == null) {
+      return;
+    }
+    final document = editorState.document;
+    if (document.root.children.isEmpty) {
+      final transaction = editorState.transaction;
+      transaction.insertNode([0], paragraphNode());
+      transaction.afterSelection = Selection.collapse([0], 0);
+      await editorState.apply(transaction);
+    }
+  }
 }

@freezed
@@ -39,8 +39,6 @@ class DocumentPluginBuilder extends PluginBuilder {

 class DocumentPlugin extends Plugin<int> {
  late PluginType _pluginType;
-  final DocumentAppearanceCubit _documentAppearanceCubit =
-      DocumentAppearanceCubit();

  @override
  final ViewPluginNotifier notifier;
@@ -52,20 +50,12 @@ class DocumentPlugin extends Plugin<int> {
    Key? key,
  }) : notifier = ViewPluginNotifier(view: view) {
    _pluginType = pluginType;
-    _documentAppearanceCubit.fetch();
-  }
-
-  @override
-  void dispose() {
-    _documentAppearanceCubit.close();
-    super.dispose();
  }

  @override
  PluginWidgetBuilder get widgetBuilder {
    return DocumentPluginWidgetBuilder(
      notifier: notifier,
-      documentAppearanceCubit: _documentAppearanceCubit,
    );
  }

@@ -81,11 +71,9 @@ class DocumentPluginWidgetBuilder extends PluginWidgetBuilder
  final ViewPluginNotifier notifier;
  ViewPB get view => notifier.view;
  int? deletedViewIndex;
-  DocumentAppearanceCubit documentAppearanceCubit;

  DocumentPluginWidgetBuilder({
    required this.notifier,
-    required this.documentAppearanceCubit,
    Key? key,
  });

@@ -102,17 +90,14 @@ class DocumentPluginWidgetBuilder extends PluginWidgetBuilder
      });
    });

-    return BlocProvider.value(
-      value: documentAppearanceCubit,
-      child: BlocBuilder<DocumentAppearanceCubit, DocumentAppearance>(
-        builder: (_, state) {
-          return DocumentPage(
-            view: view,
-            onDeleted: () => context?.onDeleted(view, deletedViewIndex),
-            key: ValueKey(view.id),
-          );
-        },
-      ),
+    return BlocBuilder<DocumentAppearanceCubit, DocumentAppearance>(
+      builder: (_, state) {
+        return DocumentPage(
+          view: view,
+          onDeleted: () => context?.onDeleted(view, deletedViewIndex),
+          key: ValueKey(view.id),
+        );
+      },
    );
  }

@@ -128,10 +113,7 @@ class DocumentPluginWidgetBuilder extends PluginWidgetBuilder
          view: view,
        ),
        const SizedBox(width: 10),
-        BlocProvider.value(
-          value: documentAppearanceCubit,
-          child: const DocumentMoreButton(),
-        ),
+        const DocumentMoreButton(),
      ],
    );
  }
@@ -10,12 +10,12 @@ 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/util/file_picker/file_picker_service.dart';
 import 'package:appflowy_backend/protobuf/flowy-document2/protobuf.dart'
    hide DocumentEvent;
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/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';
@@ -123,7 +123,7 @@ class _DocumentPageState extends State<DocumentPage> {
      return const Placeholder();
    }
    final page = editorState!.document.root;
-    return CoverImageNodeWidget(
+    return DocumentHeaderNodeWidget(
      node: page,
      editorState: editorState!,
    );
@@ -1,10 +1,9 @@
 import 'package:appflowy/plugins/document/application/doc_bloc.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/option_action.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/block_action_list.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/database/referenced_database_menu_tem.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy/plugins/document/presentation/editor_style.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/inline_page/inline_page_reference.dart';
 import 'package:appflowy_editor/appflowy_editor.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';
@@ -35,6 +34,8 @@ class AppFlowyEditorPage extends StatefulWidget {
 class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
  late final ScrollController effectiveScrollController;

+  final inlinePageReferenceService = InlinePageReferenceService();
+
  final List<CommandShortcutEvent> commandShortcutEvents = [
    ...codeBlockCommands,
    ...standardCommandShortcutEvents,
@@ -48,28 +49,21 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
    quoteItem,
    bulletedListItem,
    numberedListItem,
+    inlineMathEquationItem,
    linkItem,
-    textColorItem,
-    highlightColorItem,
+    buildTextColorItem(),
+    buildHighlightColorItem(),
  ];

-  late final slashMenuItems = [
-    inlineGridMenuItem(documentBloc),
-    referencedGridMenuItem,
-    inlineBoardMenuItem(documentBloc),
-    referencedBoardMenuItem,
-    inlineCalendarMenuItem(documentBloc),
-    referencedCalendarMenuItem,
-    calloutItem,
-    mathEquationItem,
-    codeBlockItem,
-    emojiMenuItem,
-    autoGeneratorMenuItem,
-  ];
+  late final List<SelectionMenuItem> slashMenuItems;

  late final Map<String, BlockComponentBuilder> blockComponentBuilders =
      _customAppFlowyBlockComponentBuilders();
+
  List<CharacterShortcutEvent> get characterShortcutEvents => [
+        // inline page reference list
+        ...inlinePageReferenceShortcuts,
+
        // code block
        ...codeBlockCharacterEvents,

@@ -88,6 +82,18 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
          ), // 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(),
+    // ),
+  ];
+
  late final showSlashMenu = customSlashCommand(
    slashMenuItems,
    shouldInsertSlash: false,
@@ -100,6 +106,9 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
  @override
  void initState() {
    super.initState();
+
+    slashMenuItems = _customSlashMenuItems();
+
    effectiveScrollController = widget.scrollController ?? ScrollController();
  }

@@ -117,7 +126,7 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
    final (bool autoFocus, Selection? selection) =
        _computeAutoFocusParameters();

-    final editor = AppFlowyEditor.custom(
+    final editor = AppFlowyEditor(
      editorState: widget.editorState,
      editable: true,
      shrinkWrap: widget.shrinkWrap,
@@ -200,6 +209,15 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
      ),
      ImageBlockKeys.type: ImageBlockComponentBuilder(
        configuration: configuration,
+        showMenu: true,
+        menuBuilder: (node, state) => Positioned(
+          top: 0,
+          right: 10,
+          child: ImageMenu(
+            node: node,
+            state: state,
+          ),
+        ),
      ),
      DatabaseBlockKeys.gridType: DatabaseViewBlockComponentBuilder(
        configuration: configuration,
@@ -235,7 +253,15 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
      ),
      AutoCompletionBlockKeys.type: AutoCompletionBlockComponentBuilder(),
      SmartEditBlockKeys.type: SmartEditBlockComponentBuilder(),
-      ToggleListBlockKeys.type: ToggleListBlockComponentBuilder(),
+      ToggleListBlockKeys.type: ToggleListBlockComponentBuilder(
+        configuration: configuration,
+      ),
+      OutlineBlockKeys.type: OutlineBlockComponentBuilder(
+        configuration: configuration.copyWith(
+          placeholderTextStyle: (_) =>
+              styleCustomizer.outlineBlockPlaceholderStyleBuilder(),
+        ),
+      ),
    };

    final builders = {
@@ -258,7 +284,8 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
        NumberedListBlockKeys.type,
        QuoteBlockKeys.type,
        TodoListBlockKeys.type,
-        CalloutBlockKeys.type
+        CalloutBlockKeys.type,
+        OutlineBlockKeys.type,
      ];

      final supportAlignBuilderType = [
@@ -304,6 +331,34 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
    return builders;
  }

+  List<SelectionMenuItem> _customSlashMenuItems() {
+    final items = [...standardSelectionMenuItems];
+    final imageItem = items.firstWhereOrNull(
+      (element) => element.name == AppFlowyEditorLocalizations.current.image,
+    );
+    if (imageItem != null) {
+      final imageItemIndex = items.indexOf(imageItem);
+      if (imageItemIndex != -1) {
+        items[imageItemIndex] = customImageMenuItem;
+      }
+    }
+    return [
+      ...items,
+      inlineGridMenuItem(documentBloc),
+      referencedGridMenuItem,
+      inlineBoardMenuItem(documentBloc),
+      referencedBoardMenuItem,
+      inlineCalendarMenuItem(documentBloc),
+      referencedCalendarMenuItem,
+      calloutItem,
+      outlineItem,
+      mathEquationItem,
+      codeBlockItem,
+      emojiMenuItem,
+      autoGeneratorMenuItem,
+    ];
+  }
+
  (bool, Selection?) _computeAutoFocusParameters() {
    if (widget.editorState.document.isEmpty) {
      return (true, Selection.collapse([0], 0));
@@ -1,7 +1,7 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
-import 'package:appflowy_editor/appflowy_editor.dart' hide FlowySvg;
+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/image.dart';
@@ -46,7 +46,7 @@ void showLinkToPageMenu(
            linkToPageMenuEntry.remove();
          } on FlowyError catch (e) {
            Dialogs.show(
-              FlowyErrorPage.message(
+              child: FlowyErrorPage.message(
                e.msg,
                howToFix: LocaleKeys.errorDialog_howToFixFallback.tr(),
              ),
@@ -87,7 +87,8 @@ class _LinkToPageMenuState extends State<LinkToPageMenu> {
  final Map<int, (ViewPB, ViewPB)> _items = {};

  Future<List<(ViewPB, List<ViewPB>)>> fetchItems() async {
-    final items = await ViewBackendService().fetchViews(widget.layoutType);
+    final items =
+        await ViewBackendService().fetchViewsWithLayoutType(widget.layoutType);

    int index = 0;
    for (final (app, children) in items) {
@@ -105,7 +105,7 @@ class CalloutBlockComponentWidget extends BlockComponentStatefulWidget {

 class _CalloutBlockComponentWidgetState
    extends State<CalloutBlockComponentWidget>
-    with SelectableMixin, DefaultSelectable, BlockComponentConfigurable {
+    with SelectableMixin, DefaultSelectableMixin, BlockComponentConfigurable {
  // the key used to forward focus to the richtext child
  @override
  final forwardKey = GlobalKey(debugLabel: 'flowy_rich_text');
@@ -192,7 +192,7 @@ class _CalloutBlockComponentWidgetState
  Widget buildCalloutBlockComponent(BuildContext context) {
    return Padding(
      padding: padding,
-      child: FlowyRichText(
+      child: AppFlowyRichText(
        key: forwardKey,
        node: widget.node,
        editorState: editorState,
@@ -96,7 +96,7 @@ class CodeBlockComponentWidget extends BlockComponentStatefulWidget {
 }

 class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>
-    with SelectableMixin, DefaultSelectable, BlockComponentConfigurable {
+    with SelectableMixin, DefaultSelectableMixin, BlockComponentConfigurable {
  // the key used to forward focus to the richtext child
  @override
  final forwardKey = GlobalKey(debugLabel: 'flowy_rich_text');
@@ -216,7 +216,7 @@ class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>
    final codeTextSpans = _convert(codeNodes);
    return Padding(
      padding: widget.padding,
-      child: FlowyRichText(
+      child: AppFlowyRichText(
        key: forwardKey,
        node: widget.node,
        editorState: editorState,
@@ -1,555 +0,0 @@
-import 'dart:io';
-
-import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/cover/change_cover_popover.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/cover/emoji_popover.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/cover/emoji_icon_widget.dart';
-import 'package:appflowy/workspace/presentation/widgets/emoji_picker/emoji_picker.dart';
-import 'package:appflowy_editor/appflowy_editor.dart' hide FlowySvg;
-import 'package:appflowy_popover/appflowy_popover.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra/image.dart';
-import 'package:flowy_infra/size.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flowy_infra_ui/widget/rounded_button.dart';
-import 'package:flutter/material.dart';
-
-class CoverBlockKeys {
-  const CoverBlockKeys._();
-
-  static const String selectionType = 'cover_selection_type';
-  static const String selection = 'cover_selection';
-  static const String iconSelection = 'selected_icon';
-}
-
-enum CoverSelectionType {
-  initial,
-  color,
-  file,
-  asset;
-
-  static CoverSelectionType fromString(String? value) {
-    if (value == null) {
-      return CoverSelectionType.initial;
-    }
-    return CoverSelectionType.values.firstWhere(
-      (e) => e.toString() == value,
-      orElse: () => CoverSelectionType.initial,
-    );
-  }
-}
-
-class CoverNodeWidgetBuilder implements NodeWidgetBuilder {
-  @override
-  Widget build(NodeWidgetContext<Node> context) {
-    return CoverImageNodeWidget(
-      key: context.node.key,
-      node: context.node,
-      editorState: context.editorState,
-    );
-  }
-
-  @override
-  NodeValidator<Node> get nodeValidator => (node) {
-        return true;
-      };
-}
-
-class CoverImageNodeWidget extends StatefulWidget {
-  const CoverImageNodeWidget({
-    Key? key,
-    required this.node,
-    required this.editorState,
-  }) : super(key: key);
-
-  final Node node;
-  final EditorState editorState;
-
-  @override
-  State<CoverImageNodeWidget> createState() => _CoverImageNodeWidgetState();
-}
-
-class _CoverImageNodeWidgetState extends State<CoverImageNodeWidget> {
-  CoverSelectionType get selectionType => CoverSelectionType.fromString(
-        widget.node.attributes[CoverBlockKeys.selectionType],
-      );
-
-  @override
-  void initState() {
-    super.initState();
-
-    widget.node.addListener(_reload);
-  }
-
-  @override
-  void dispose() {
-    widget.node.removeListener(_reload);
-
-    super.dispose();
-  }
-
-  void _reload() {
-    setState(() {});
-  }
-
-  PopoverController iconPopoverController = PopoverController();
-  @override
-  Widget build(BuildContext context) {
-    return _CoverImage(
-      editorState: widget.editorState,
-      node: widget.node,
-      onCoverChanged: (type, value) {
-        _insertCover(type, value);
-      },
-    );
-  }
-
-  Future<void> _insertCover(CoverSelectionType type, dynamic cover) async {
-    final transaction = widget.editorState.transaction;
-    transaction.updateNode(widget.node, {
-      CoverBlockKeys.selectionType: type.toString(),
-      CoverBlockKeys.selection: cover,
-      CoverBlockKeys.iconSelection:
-          widget.node.attributes[CoverBlockKeys.iconSelection]
-    });
-    return widget.editorState.apply(transaction);
-  }
-}
-
-class _AddCoverButton extends StatefulWidget {
-  final Node node;
-  final EditorState editorState;
-  final bool hasIcon;
-  final CoverSelectionType selectionType;
-
-  final PopoverController iconPopoverController;
-  const _AddCoverButton({
-    required this.onTap,
-    required this.node,
-    required this.editorState,
-    required this.hasIcon,
-    required this.selectionType,
-    required this.iconPopoverController,
-  });
-
-  final VoidCallback onTap;
-
-  @override
-  State<_AddCoverButton> createState() => _AddCoverButtonState();
-}
-
-bool isPopoverOpen = false;
-
-class _AddCoverButtonState extends State<_AddCoverButton> {
-  bool isHidden = true;
-  PopoverMutex mutex = PopoverMutex();
-  bool isPopoverOpen = false;
-  @override
-  void initState() {
-    super.initState();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return MouseRegion(
-      onEnter: (event) {
-        setHidden(false);
-      },
-      onExit: (event) {
-        setHidden(isPopoverOpen ? false : true);
-      },
-      opaque: false,
-      child: Container(
-        height: widget.hasIcon ? 180 : 50.0,
-        alignment: Alignment.bottomLeft,
-        width: double.infinity,
-        padding: const EdgeInsets.only(
-          left: 80,
-          top: 20,
-          bottom: 5,
-        ),
-        child: isHidden
-            ? Container()
-            : Row(
-                mainAxisSize: MainAxisSize.min,
-                mainAxisAlignment: MainAxisAlignment.start,
-                children: [
-                  // Add Cover Button.
-                  widget.selectionType != CoverSelectionType.initial
-                      ? Container()
-                      : FlowyButton(
-                          key: UniqueKey(),
-                          leftIconSize: const Size.square(18),
-                          onTap: widget.onTap,
-                          useIntrinsicWidth: true,
-                          leftIcon: const FlowySvg(name: 'editor/image'),
-                          text: FlowyText.regular(
-                            LocaleKeys.document_plugins_cover_addCover.tr(),
-                          ),
-                        ),
-                  // Add Icon Button.
-                  widget.hasIcon
-                      ? FlowyButton(
-                          leftIconSize: const Size.square(18),
-                          onTap: () {
-                            _removeIcon();
-                          },
-                          useIntrinsicWidth: true,
-                          leftIcon: const Icon(
-                            Icons.emoji_emotions_outlined,
-                            size: 18,
-                          ),
-                          text: FlowyText.regular(
-                            LocaleKeys.document_plugins_cover_removeIcon.tr(),
-                          ),
-                        )
-                      : AppFlowyPopover(
-                          mutex: mutex,
-                          asBarrier: true,
-                          onClose: () {
-                            isPopoverOpen = false;
-                            setHidden(true);
-                          },
-                          offset: const Offset(120, 10),
-                          controller: widget.iconPopoverController,
-                          direction: PopoverDirection.bottomWithCenterAligned,
-                          constraints:
-                              BoxConstraints.loose(const Size(320, 380)),
-                          margin: EdgeInsets.zero,
-                          child: FlowyButton(
-                            leftIconSize: const Size.square(18),
-                            useIntrinsicWidth: true,
-                            leftIcon: const Icon(
-                              Icons.emoji_emotions_outlined,
-                              size: 18,
-                            ),
-                            text: FlowyText.regular(
-                              LocaleKeys.document_plugins_cover_addIcon.tr(),
-                            ),
-                          ),
-                          popupBuilder: (BuildContext popoverContext) {
-                            isPopoverOpen = true;
-                            return EmojiPopover(
-                              showRemoveButton: widget.hasIcon,
-                              removeIcon: _removeIcon,
-                              node: widget.node,
-                              editorState: widget.editorState,
-                              onEmojiChanged: (Emoji emoji) {
-                                _insertIcon(emoji);
-                                widget.iconPopoverController.close();
-                              },
-                            );
-                          },
-                        )
-                ],
-              ),
-      ),
-    );
-  }
-
-  Future<void> _insertIcon(Emoji emoji) async {
-    final transaction = widget.editorState.transaction;
-    transaction.updateNode(widget.node, {
-      CoverBlockKeys.selectionType:
-          widget.node.attributes[CoverBlockKeys.selectionType],
-      CoverBlockKeys.selection:
-          widget.node.attributes[CoverBlockKeys.selection],
-      CoverBlockKeys.iconSelection: emoji.emoji,
-    });
-    return widget.editorState.apply(transaction);
-  }
-
-  Future<void> _removeIcon() async {
-    final transaction = widget.editorState.transaction;
-    transaction.updateNode(widget.node, {
-      CoverBlockKeys.iconSelection: "",
-      CoverBlockKeys.selectionType:
-          widget.node.attributes[CoverBlockKeys.selectionType],
-      CoverBlockKeys.selection:
-          widget.node.attributes[CoverBlockKeys.selection],
-    });
-    return widget.editorState.apply(transaction);
-  }
-
-  void setHidden(bool value) {
-    if (isHidden == value) return;
-    setState(() {
-      isHidden = value;
-    });
-  }
-}
-
-class _CoverImage extends StatefulWidget {
-  const _CoverImage({
-    required this.editorState,
-    required this.node,
-    required this.onCoverChanged,
-  });
-
-  final Node node;
-  final EditorState editorState;
-  final Function(
-    CoverSelectionType selectionType,
-    dynamic selection,
-  ) onCoverChanged;
-  @override
-  State<_CoverImage> createState() => _CoverImageState();
-}
-
-class _CoverImageState extends State<_CoverImage> {
-  final popoverController = PopoverController();
-
-  CoverSelectionType get selectionType => CoverSelectionType.fromString(
-        widget.node.attributes[CoverBlockKeys.selectionType],
-      );
-  Color get color {
-    final hex = widget.node.attributes[CoverBlockKeys.selection] as String?;
-    return hex?.toColor() ?? Colors.white;
-  }
-
-  bool get hasIcon =>
-      widget.node.attributes[CoverBlockKeys.iconSelection] == null
-          ? false
-          : widget.node.attributes[CoverBlockKeys.iconSelection].isNotEmpty;
-  bool isOverlayButtonsHidden = true;
-  PopoverController iconPopoverController = PopoverController();
-  bool get hasCover =>
-      selectionType == CoverSelectionType.initial ? false : true;
-
-  @override
-  Widget build(BuildContext context) {
-    return Stack(
-      alignment: Alignment.bottomLeft,
-      children: [
-        Container(
-          alignment: Alignment.topCenter,
-          height: !hasCover
-              ? 0
-              : hasIcon
-                  ? 320
-                  : 280,
-          child: _buildCoverImage(context, widget.editorState),
-        ),
-        hasIcon
-            ? Positioned(
-                left: 80,
-                bottom: !hasCover ? 30 : 40,
-                child: AppFlowyPopover(
-                  offset: const Offset(100, 0),
-                  controller: iconPopoverController,
-                  direction: PopoverDirection.bottomWithCenterAligned,
-                  constraints: BoxConstraints.loose(const Size(320, 380)),
-                  margin: EdgeInsets.zero,
-                  child: EmojiIconWidget(
-                    emoji: widget.node.attributes[CoverBlockKeys.iconSelection],
-                  ),
-                  popupBuilder: (BuildContext popoverContext) {
-                    return EmojiPopover(
-                      node: widget.node,
-                      showRemoveButton: hasIcon,
-                      removeIcon: _removeIcon,
-                      editorState: widget.editorState,
-                      onEmojiChanged: (Emoji emoji) {
-                        _insertIcon(emoji);
-                        iconPopoverController.close();
-                      },
-                    );
-                  },
-                ),
-              )
-            : Container(),
-        hasIcon && selectionType != CoverSelectionType.initial
-            ? Container()
-            : _AddCoverButton(
-                onTap: () {
-                  _insertCover(
-                    CoverSelectionType.asset,
-                    builtInAssetImages.first,
-                  );
-                },
-                node: widget.node,
-                editorState: widget.editorState,
-                hasIcon: hasIcon,
-                selectionType: selectionType,
-                iconPopoverController: iconPopoverController,
-              ),
-      ],
-    );
-  }
-
-  Future<void> _insertCover(CoverSelectionType type, dynamic cover) async {
-    final transaction = widget.editorState.transaction;
-    transaction.updateNode(widget.node, {
-      CoverBlockKeys.selectionType: type.toString(),
-      CoverBlockKeys.selection: cover,
-      CoverBlockKeys.iconSelection:
-          widget.node.attributes[CoverBlockKeys.iconSelection]
-    });
-    return widget.editorState.apply(transaction);
-  }
-
-  Future<void> _insertIcon(Emoji emoji) async {
-    final transaction = widget.editorState.transaction;
-    transaction.updateNode(widget.node, {
-      CoverBlockKeys.selectionType:
-          widget.node.attributes[CoverBlockKeys.selectionType],
-      CoverBlockKeys.selection:
-          widget.node.attributes[CoverBlockKeys.selection],
-      CoverBlockKeys.iconSelection: emoji.emoji,
-    });
-    return widget.editorState.apply(transaction);
-  }
-
-  Future<void> _removeIcon() async {
-    final transaction = widget.editorState.transaction;
-    transaction.updateNode(widget.node, {
-      CoverBlockKeys.iconSelection: "",
-      CoverBlockKeys.selectionType:
-          widget.node.attributes[CoverBlockKeys.selectionType],
-      CoverBlockKeys.selection:
-          widget.node.attributes[CoverBlockKeys.selection],
-    });
-    return widget.editorState.apply(transaction);
-  }
-
-  Widget _buildCoverOverlayButtons(BuildContext context) {
-    return Positioned(
-      bottom: 20,
-      right: 50,
-      child: Row(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          AppFlowyPopover(
-            onClose: () {
-              setOverlayButtonsHidden(true);
-            },
-            offset: const Offset(-125, 10),
-            controller: popoverController,
-            direction: PopoverDirection.bottomWithCenterAligned,
-            constraints: BoxConstraints.loose(const Size(380, 450)),
-            margin: EdgeInsets.zero,
-            child: Visibility(
-              maintainState: true,
-              maintainAnimation: true,
-              maintainSize: true,
-              visible: !isOverlayButtonsHidden,
-              child: RoundedTextButton(
-                onPressed: () {
-                  popoverController.show();
-                  setOverlayButtonsHidden(true);
-                },
-                hoverColor: Theme.of(context).colorScheme.surface,
-                textColor: Theme.of(context).colorScheme.tertiary,
-                fillColor:
-                    Theme.of(context).colorScheme.surface.withOpacity(0.5),
-                width: 120,
-                height: 28,
-                title: LocaleKeys.document_plugins_cover_changeCover.tr(),
-              ),
-            ),
-            popupBuilder: (BuildContext popoverContext) {
-              return ChangeCoverPopover(
-                node: widget.node,
-                editorState: widget.editorState,
-                onCoverChanged: widget.onCoverChanged,
-              );
-            },
-          ),
-          const SizedBox(width: 10),
-          Visibility(
-            maintainAnimation: true,
-            maintainSize: true,
-            maintainState: true,
-            visible: !isOverlayButtonsHidden,
-            child: FlowyIconButton(
-              hoverColor: Theme.of(context).colorScheme.surface,
-              fillColor: Theme.of(context).colorScheme.surface.withOpacity(0.5),
-              iconPadding: const EdgeInsets.all(5),
-              width: 28,
-              icon: svgWidget(
-                'editor/delete',
-                color: Theme.of(context).colorScheme.tertiary,
-              ),
-              onPressed: () {
-                widget.onCoverChanged(CoverSelectionType.initial, null);
-              },
-            ),
-          ),
-        ],
-      ),
-    );
-  }
-
-  Widget _buildCoverImage(BuildContext context, EditorState editorState) {
-    const height = 250.0;
-    final Widget coverImage;
-    switch (selectionType) {
-      case CoverSelectionType.file:
-        final imageFile =
-            File(widget.node.attributes[CoverBlockKeys.selection]);
-        if (!imageFile.existsSync()) {
-          // reset cover state
-          WidgetsBinding.instance.addPostFrameCallback((_) {
-            widget.onCoverChanged(CoverSelectionType.initial, null);
-          });
-          coverImage = const SizedBox();
-          break;
-        }
-        coverImage = Image.file(
-          imageFile,
-          fit: BoxFit.cover,
-        );
-        break;
-      case CoverSelectionType.asset:
-        coverImage = Image.asset(
-          widget.node.attributes[CoverBlockKeys.selection],
-          fit: BoxFit.cover,
-        );
-        break;
-      case CoverSelectionType.color:
-        coverImage = Container(
-          decoration: BoxDecoration(
-            color: color,
-            borderRadius: Corners.s6Border,
-          ),
-          alignment: Alignment.center,
-        );
-        break;
-      case CoverSelectionType.initial:
-        coverImage = const SizedBox();
-        break;
-    }
-// OverflowBox needs to be wraped by a widget with constraints(or from its parent) first,otherwise it will occur an error
-    return MouseRegion(
-      onEnter: (event) {
-        setOverlayButtonsHidden(false);
-      },
-      onExit: (event) {
-        setOverlayButtonsHidden(true);
-      },
-      child: SizedBox(
-        height: height,
-        child: Stack(
-          children: [
-            Container(
-              padding: const EdgeInsets.only(bottom: 10),
-              height: double.infinity,
-              width: double.infinity,
-              child: coverImage,
-            ),
-            hasCover
-                ? _buildCoverOverlayButtons(context)
-                : const SizedBox.shrink()
-          ],
-        ),
-      ),
-    );
-  }
-
-  void setOverlayButtonsHidden(bool value) {
-    if (isOverlayButtonsHidden == value) return;
-    setState(() {
-      isOverlayButtonsHidden = value;
-    });
-  }
-}
@@ -1,84 +0,0 @@
-import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/workspace/presentation/widgets/emoji_picker/emoji_picker.dart';
-import 'package:appflowy_editor/appflowy_editor.dart' hide FlowySvg;
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/style_widget/button.dart';
-import 'package:flowy_infra_ui/style_widget/text.dart';
-import 'package:flowy_infra/image.dart';
-import 'package:flutter/material.dart';
-
-class EmojiPopover extends StatefulWidget {
-  final EditorState editorState;
-  final Node node;
-  final void Function(Emoji emoji) onEmojiChanged;
-  final VoidCallback removeIcon;
-  final bool showRemoveButton;
-
-  const EmojiPopover({
-    super.key,
-    required this.editorState,
-    required this.node,
-    required this.onEmojiChanged,
-    required this.removeIcon,
-    required this.showRemoveButton,
-  });
-
-  @override
-  State<EmojiPopover> createState() => _EmojiPopoverState();
-}
-
-class _EmojiPopoverState extends State<EmojiPopover> {
-  @override
-  Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.all(15),
-      child: Column(
-        children: [
-          if (widget.showRemoveButton)
-            Padding(
-              padding: const EdgeInsets.only(bottom: 4.0),
-              child: Align(
-                alignment: Alignment.centerRight,
-                child: DeleteButton(onTap: widget.removeIcon),
-              ),
-            ),
-          Expanded(
-            child: EmojiPicker(
-              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,
-              ),
-            ),
-          ),
-        ],
-      ),
-    );
-  }
-}
-
-class DeleteButton extends StatelessWidget {
-  final VoidCallback onTap;
-  const DeleteButton({required this.onTap, Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return FlowyButton(
-      onTap: onTap,
-      useIntrinsicWidth: true,
-      text: FlowyText(
-        LocaleKeys.document_plugins_cover_removeIcon.tr(),
-      ),
-      leftIcon: const FlowySvg(name: 'editor/delete'),
-    );
-  }
-}
@@ -11,6 +11,7 @@ import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';

@@ -25,7 +26,7 @@ class ChangeCoverPopover extends StatefulWidget {
  final EditorState editorState;
  final Node node;
  final Function(
-    CoverSelectionType selectionType,
+    CoverType selectionType,
    String selection,
  ) onCoverChanged;

@@ -83,7 +84,7 @@ class _ChangeCoverPopoverState extends State<ChangeCoverPopover> {
      child: BlocBuilder<ChangeCoverPopoverBloc, ChangeCoverPopoverState>(
        builder: (context, state) {
          return Padding(
-            padding: const EdgeInsets.all(15),
+            padding: const EdgeInsets.all(12),
            child: SingleChildScrollView(
              child: isAddingImage
                  ? CoverImagePicker(
@@ -116,18 +117,18 @@ class _ChangeCoverPopoverState extends State<ChangeCoverPopover> {
          LocaleKeys.document_plugins_cover_colors.tr(),
          color: Theme.of(context).colorScheme.tertiary,
        ),
-        const SizedBox(height: 10),
+        const VSpace(10),
        _buildColorPickerList(),
-        const SizedBox(height: 10),
+        const VSpace(10),
        _buildImageHeader(),
-        const SizedBox(height: 10),
+        const VSpace(10),
        _buildFileImagePicker(),
-        const SizedBox(height: 10),
+        const VSpace(10),
        FlowyText.semibold(
          LocaleKeys.document_plugins_cover_abstract.tr(),
          color: Theme.of(context).colorScheme.tertiary,
        ),
-        const SizedBox(height: 10),
+        const VSpace(10),
        _buildAbstractImagePicker(),
      ],
    );
@@ -149,10 +150,10 @@ class _ChangeCoverPopoverState extends State<ChangeCoverPopover> {
              LocaleKeys.document_plugins_cover_clearAll.tr(),
              fontColor: Theme.of(context).colorScheme.tertiary,
              onPressed: () async {
-                final hasFileImageCover = CoverSelectionType.fromString(
-                      widget.node.attributes[CoverBlockKeys.selectionType],
+                final hasFileImageCover = CoverType.fromString(
+                      widget.node.attributes[DocumentHeaderBlockKeys.coverType],
                    ) ==
-                    CoverSelectionType.file;
+                    CoverType.file;
                final changeCoverBloc = context.read<ChangeCoverPopoverBloc>();
                if (hasFileImageCover) {
                  await showDialog(
@@ -196,7 +197,7 @@ class _ChangeCoverPopoverState extends State<ChangeCoverPopover> {
        return InkWell(
          onTap: () {
            widget.onCoverChanged(
-              CoverSelectionType.asset,
+              CoverType.asset,
              builtInAssetImages[index],
            );
          },
@@ -220,14 +221,14 @@ class _ChangeCoverPopoverState extends State<ChangeCoverPopover> {
      pickerBackgroundColor: theme.cardColor,
      pickerItemHoverColor: theme.hoverColor,
      selectedBackgroundColorHex:
-          widget.node.attributes[CoverBlockKeys.selectionType] ==
-                  CoverSelectionType.color.toString()
-              ? widget.node.attributes[CoverBlockKeys.selection]
+          widget.node.attributes[DocumentHeaderBlockKeys.coverType] ==
+                  CoverType.color.toString()
+              ? widget.node.attributes[DocumentHeaderBlockKeys.coverDetails]
              : 'ffffff',
      backgroundColorOptions:
          _generateBackgroundColorOptions(widget.editorState),
      onSubmittedBackgroundColorHex: (color) {
-        widget.onCoverChanged(CoverSelectionType.color, color);
+        widget.onCoverChanged(CoverType.color, color);
        setState(() {});
      },
    );
@@ -249,43 +250,25 @@ class _ChangeCoverPopoverState extends State<ChangeCoverPopover> {
            itemCount: images.length + 1,
            itemBuilder: (BuildContext ctx, index) {
              if (index == 0) {
-                return Container(
-                  decoration: BoxDecoration(
-                    border: Border.all(
-                      color: Theme.of(context).colorScheme.primary,
-                    ),
-                    borderRadius: Corners.s8Border,
-                  ),
-                  child: FlowyIconButton(
-                    iconPadding: EdgeInsets.zero,
-                    icon: Icon(
-                      Icons.add,
-                      color: Theme.of(context).colorScheme.primary,
-                    ),
-                    hoverColor:
-                        Theme.of(context).colorScheme.primary.withOpacity(0.15),
-                    width: 20,
-                    onPressed: () {
-                      setState(() {
-                        isAddingImage = true;
-                      });
-                    },
+                return NewCustomCoverButton(
+                  onPressed: () => setState(
+                    () => isAddingImage = true,
                  ),
                );
              }
              return ImageGridItem(
                onImageSelect: () {
                  widget.onCoverChanged(
-                    CoverSelectionType.file,
+                    CoverType.file,
                    images[index - 1],
                  );
                },
                onImageDelete: () async {
                  final changeCoverBloc =
                      context.read<ChangeCoverPopoverBloc>();
-                  final deletingCurrentCover =
-                      widget.node.attributes[CoverBlockKeys.selection] ==
-                          images[index - 1];
+                  final deletingCurrentCover = widget.node
+                          .attributes[DocumentHeaderBlockKeys.coverDetails] ==
+                      images[index - 1];
                  if (deletingCurrentCover) {
                    await showDialog(
                      context: context,
@@ -328,6 +311,32 @@ class _ChangeCoverPopoverState extends State<ChangeCoverPopover> {
  }
 }

+@visibleForTesting
+class NewCustomCoverButton extends StatelessWidget {
+  final VoidCallback onPressed;
+  const NewCustomCoverButton({super.key, required this.onPressed});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        border: Border.all(
+          color: Theme.of(context).colorScheme.primary,
+        ),
+        borderRadius: Corners.s8Border,
+      ),
+      child: FlowyIconButton(
+        icon: Icon(
+          Icons.add,
+          color: Theme.of(context).colorScheme.primary,
+        ),
+        hoverColor: Theme.of(context).colorScheme.primary.withOpacity(0.15),
+        onPressed: onPressed,
+      ),
+    );
+  }
+}
+
 class DeleteImageAlertDialog extends StatelessWidget {
  const DeleteImageAlertDialog({
    Key? key,
@@ -481,36 +490,63 @@ class _CoverColorPickerState extends State<CoverColorPicker> {
    scrollController.dispose();
  }

-  Widget _buildColorItem(ColorOption option, bool isChecked) {
+  Widget _buildColorItems(List<ColorOption> options, String? selectedColor) {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: options
+          .map(
+            (e) => ColorItem(
+              option: e,
+              isChecked: e.colorHex == selectedColor,
+              hoverColor: widget.pickerItemHoverColor,
+              onTap: widget.onSubmittedBackgroundColorHex,
+            ),
+          )
+          .toList(),
+    );
+  }
+}
+
+@visibleForTesting
+class ColorItem extends StatelessWidget {
+  final ColorOption option;
+  final bool isChecked;
+  final Color hoverColor;
+  final void Function(String) onTap;
+  const ColorItem({
+    required this.option,
+    required this.isChecked,
+    required this.hoverColor,
+    required this.onTap,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
    return InkWell(
      customBorder: const RoundedRectangleBorder(
        borderRadius: Corners.s6Border,
      ),
-      hoverColor: widget.pickerItemHoverColor,
-      onTap: () {
-        widget.onSubmittedBackgroundColorHex(option.colorHex);
-      },
+      hoverColor: hoverColor,
+      onTap: () => onTap(option.colorHex),
      child: Padding(
        padding: const EdgeInsets.only(right: 10.0),
        child: SizedBox.square(
-          dimension: isChecked ? 24 : 25,
+          dimension: 25,
          child: Container(
            decoration: BoxDecoration(
              color: option.colorHex.toColor(),
-              border: isChecked
-                  ? Border.all(
-                      color: const Color(0xFFFFFFFF),
-                      width: 2.0,
-                    )
-                  : null,
              shape: BoxShape.circle,
            ),
            child: isChecked
                ? SizedBox.square(
-                    dimension: 24,
                    child: Container(
-                      margin: const EdgeInsets.all(4),
+                      margin: const EdgeInsets.all(1),
                      decoration: BoxDecoration(
+                        border: Border.all(
+                          color: Theme.of(context).cardColor,
+                          width: 3.0,
+                        ),
                        color: option.colorHex.toColor(),
                        shape: BoxShape.circle,
                      ),
@@ -522,14 +558,4 @@ class _CoverColorPickerState extends State<CoverColorPicker> {
      ),
    );
  }
-
-  Widget _buildColorItems(List<ColorOption> options, String? selectedColor) {
-    return Row(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      mainAxisAlignment: MainAxisAlignment.start,
-      children: options
-          .map((e) => _buildColorItem(e, e.colorHex == selectedColor))
-          .toList(),
-    );
-  }
 }
@@ -1,14 +1,14 @@
 import 'dart:async';
 import 'dart:io';

-import 'package:appflowy/plugins/document/presentation/editor_plugins/cover/change_cover_popover.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/cover/cover_node_widget.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/cover_editor.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
 import 'package:shared_preferences/shared_preferences.dart';

-part 'change_cover_popover_bloc.freezed.dart';
+part 'cover_editor_bloc.freezed.dart';

 class ChangeCoverPopoverBloc
    extends Bloc<ChangeCoverPopoverEvent, ChangeCoverPopoverState> {
@@ -32,7 +32,7 @@ class ChangeCoverPopoverBloc
        deleteImage: (DeleteImage deleteImage) async {
          final currentState = state;
          final currentlySelectedImage =
-              node.attributes[CoverBlockKeys.selection];
+              node.attributes[DocumentHeaderBlockKeys.coverDetails];
          if (currentState is Loaded) {
            await _deleteImageInStorage(deleteImage.path);
            if (currentlySelectedImage == deleteImage.path) {
@@ -48,7 +48,7 @@ class ChangeCoverPopoverBloc
        clearAllImages: (ClearAllImages clearAllImages) async {
          final currentState = state;
          final currentlySelectedImage =
-              node.attributes[CoverBlockKeys.selection];
+              node.attributes[DocumentHeaderBlockKeys.coverDetails];

          if (currentState is Loaded) {
            for (final image in currentState.imageNames) {
@@ -90,9 +90,9 @@ class ChangeCoverPopoverBloc
  Future<void> _removeCoverImageFromNode() async {
    final transaction = editorState.transaction;
    transaction.updateNode(node, {
-      CoverBlockKeys.selectionType: CoverSelectionType.initial.toString(),
-      CoverBlockKeys.iconSelection:
-          node.attributes[CoverBlockKeys.iconSelection]
+      DocumentHeaderBlockKeys.coverType: CoverType.none.toString(),
+      DocumentHeaderBlockKeys.icon:
+          node.attributes[DocumentHeaderBlockKeys.icon]
    });
    return editorState.apply(transaction);
  }
@@ -1,8 +1,9 @@
 import 'dart:io';
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/cover/cover_image_picker_bloc.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/custom_cover_picker_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/style_widget/snap_bar.dart';
+import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';

 import 'package:flowy_infra/image.dart';
@@ -67,17 +68,13 @@ class _CoverImagePickerState extends State<CoverImagePicker> {
                        ),
                      )
                    : CoverImagePreviewWidget(state: state),
-                const SizedBox(
-                  height: 10,
-                ),
+                const VSpace(10),
                NetworkImageUrlInput(
                  onAdd: (url) {
                    context.read<CoverImagePickerBloc>().add(UrlSubmit(url));
                  },
                ),
-                const SizedBox(
-                  height: 10,
-                ),
+                const VSpace(10),
                ImagePickerActionButtons(
                  onBackPressed: () {
                    widget.onBackPressed();
@@ -233,16 +230,12 @@ class _CoverImagePreviewWidgetState extends State<CoverImagePreviewWidget> {
              ),
            ],
          ),
-          const SizedBox(
-            height: 10,
-          ),
+          const VSpace(10),
          FlowyText(
            LocaleKeys.document_plugins_cover_or.tr(),
            fontWeight: FontWeight.w300,
          ),
-          const SizedBox(
-            height: 10,
-          ),
+          const VSpace(10),
          FlowyButton(
            hoverColor: Theme.of(context).hoverColor,
            onTap: () {
@@ -1,21 +1,21 @@
 import 'dart:io';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/startup/startup.dart';
-import 'package:appflowy/util/file_picker/file_picker_service.dart';
-import 'package:appflowy/workspace/application/settings/settings_location_cubit.dart';
+import 'package:appflowy/workspace/application/settings/prelude.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:file_picker/file_picker.dart' as fp;

 import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
+import 'package:flowy_infra/file_picker/file_picker_service.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:dartz/dartz.dart';
 import 'package:http/http.dart' as http;
 import 'package:shared_preferences/shared_preferences.dart';
 import 'package:path/path.dart' as p;
-import 'change_cover_popover.dart';

-part 'cover_image_picker_bloc.freezed.dart';
+import 'cover_editor.dart';
+
+part 'custom_cover_picker_bloc.freezed.dart';

 class CoverImagePickerBloc
    extends Bloc<CoverImagePickerEvent, CoverImagePickerState> {
@@ -120,7 +120,7 @@ class CoverImagePickerBloc
    final result = await getIt<FilePickerService>().pickFiles(
      dialogTitle: LocaleKeys.document_plugins_cover_addLocalImage.tr(),
      allowMultiple: false,
-      type: fp.FileType.image,
+      type: FileType.image,
      allowedExtensions: allowedExtensions,
    );
    if (result != null && result.files.isNotEmpty) {
@@ -0,0 +1,493 @@
+import 'dart:io';
+
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/workspace/presentation/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';
+import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flowy_infra_ui/widget/rounded_button.dart';
+import 'package:flutter/material.dart';
+
+import 'cover_editor.dart';
+import 'emoji_icon_widget.dart';
+import 'emoji_popover.dart';
+
+const double kCoverHeight = 250.0;
+const double kIconHeight = 60.0;
+const double kToolbarHeight = 40.0; // with padding to the top
+
+class DocumentHeaderBlockKeys {
+  const DocumentHeaderBlockKeys._();
+
+  static const String coverType = 'cover_selection_type';
+  static const String coverDetails = 'cover_selection';
+  static const String icon = 'selected_icon';
+}
+
+enum CoverType {
+  none,
+  color,
+  file,
+  asset;
+
+  static CoverType fromString(String? value) {
+    if (value == null) {
+      return CoverType.none;
+    }
+    return CoverType.values.firstWhere(
+      (e) => e.toString() == value,
+      orElse: () => CoverType.none,
+    );
+  }
+}
+
+class DocumentHeaderNodeWidget extends StatefulWidget {
+  const DocumentHeaderNodeWidget({
+    required this.node,
+    required this.editorState,
+    super.key,
+  });
+
+  final Node node;
+  final EditorState editorState;
+
+  @override
+  State<DocumentHeaderNodeWidget> createState() =>
+      _DocumentHeaderNodeWidgetState();
+}
+
+class _DocumentHeaderNodeWidgetState extends State<DocumentHeaderNodeWidget> {
+  CoverType get coverType => CoverType.fromString(
+        widget.node.attributes[DocumentHeaderBlockKeys.coverType],
+      );
+  String? get coverDetails =>
+      widget.node.attributes[DocumentHeaderBlockKeys.coverDetails];
+  String get icon => widget.node.attributes[DocumentHeaderBlockKeys.icon];
+  bool get hasIcon =>
+      widget.node.attributes[DocumentHeaderBlockKeys.icon]?.isNotEmpty ?? false;
+  bool get hasCover => coverType != CoverType.none;
+
+  @override
+  void initState() {
+    super.initState();
+    widget.node.addListener(_reload);
+  }
+
+  @override
+  void dispose() {
+    widget.node.removeListener(_reload);
+    super.dispose();
+  }
+
+  void _reload() => setState(() {});
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        SizedBox(
+          height: _calculateOverallHeight(),
+          child: DocumentHeaderToolbar(
+            onCoverChanged: _saveCover,
+            node: widget.node,
+            editorState: widget.editorState,
+            hasCover: hasCover,
+            hasIcon: hasIcon,
+          ),
+        ),
+        if (hasCover)
+          DocumentCover(
+            editorState: widget.editorState,
+            node: widget.node,
+            coverType: coverType,
+            coverDetails: coverDetails,
+            onCoverChanged: (type, details) =>
+                _saveCover(cover: (type, details)),
+          ),
+        if (hasIcon)
+          Positioned(
+            left: 80,
+            // if hasCover, there shouldn't be icons present so the icon can
+            // be closer to the bottom.
+            bottom:
+                hasCover ? kToolbarHeight - kIconHeight / 2 : kToolbarHeight,
+            child: DocumentIcon(
+              editorState: widget.editorState,
+              node: widget.node,
+              icon: icon,
+              onIconChanged: (icon) => _saveCover(icon: icon),
+            ),
+          ),
+      ],
+    );
+  }
+
+  double _calculateOverallHeight() {
+    switch ((hasIcon, hasCover)) {
+      case (true, true):
+        return kCoverHeight + kToolbarHeight;
+      case (true, false):
+        return 50 + kIconHeight + kToolbarHeight;
+      case (false, true):
+        return kCoverHeight + kToolbarHeight;
+      case (false, false):
+        return kToolbarHeight;
+    }
+  }
+
+  Future<void> _saveCover({(CoverType, String?)? cover, String? icon}) {
+    final transaction = widget.editorState.transaction;
+    final Map<String, dynamic> attributes = {
+      DocumentHeaderBlockKeys.coverType:
+          widget.node.attributes[DocumentHeaderBlockKeys.coverType],
+      DocumentHeaderBlockKeys.coverDetails:
+          widget.node.attributes[DocumentHeaderBlockKeys.coverDetails],
+      DocumentHeaderBlockKeys.icon:
+          widget.node.attributes[DocumentHeaderBlockKeys.icon]
+    };
+    if (cover != null) {
+      attributes[DocumentHeaderBlockKeys.coverType] = cover.$1.toString();
+      attributes[DocumentHeaderBlockKeys.coverDetails] = cover.$2;
+    }
+    if (icon != null) {
+      attributes[DocumentHeaderBlockKeys.icon] = icon;
+    }
+
+    transaction.updateNode(widget.node, attributes);
+    return widget.editorState.apply(transaction);
+  }
+}
+
+@visibleForTesting
+class DocumentHeaderToolbar extends StatefulWidget {
+  final Node node;
+  final EditorState editorState;
+  final bool hasCover;
+  final bool hasIcon;
+  final Future<void> Function({(CoverType, String?)? cover, String? icon})
+      onCoverChanged;
+
+  const DocumentHeaderToolbar({
+    required this.node,
+    required this.editorState,
+    required this.hasCover,
+    required this.hasIcon,
+    required this.onCoverChanged,
+    super.key,
+  });
+
+  @override
+  State<DocumentHeaderToolbar> createState() => _DocumentHeaderToolbarState();
+}
+
+class _DocumentHeaderToolbarState extends State<DocumentHeaderToolbar> {
+  bool isHidden = true;
+  bool isPopoverOpen = false;
+
+  final PopoverController _popoverController = PopoverController();
+
+  @override
+  Widget build(BuildContext context) {
+    return MouseRegion(
+      onEnter: (event) => setHidden(false),
+      onExit: (event) {
+        if (!isPopoverOpen) {
+          setHidden(true);
+        }
+      },
+      opaque: false,
+      child: Container(
+        alignment: Alignment.bottomLeft,
+        width: double.infinity,
+        padding: const EdgeInsets.symmetric(horizontal: 80),
+        child: SizedBox(
+          height: 28,
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: buildRowChildren(),
+          ),
+        ),
+      ),
+    );
+  }
+
+  List<Widget> buildRowChildren() {
+    if (isHidden || widget.hasCover && widget.hasIcon) {
+      return [];
+    }
+    final List<Widget> children = [];
+
+    if (!widget.hasCover) {
+      children.add(
+        FlowyButton(
+          leftIconSize: const Size.square(18),
+          onTap: () => widget.onCoverChanged(
+            cover: (CoverType.asset, builtInAssetImages.first),
+          ),
+          useIntrinsicWidth: true,
+          leftIcon: const FlowySvg(name: 'editor/image'),
+          text: FlowyText.regular(
+            LocaleKeys.document_plugins_cover_addCover.tr(),
+          ),
+        ),
+      );
+    }
+
+    if (widget.hasIcon) {
+      children.add(
+        FlowyButton(
+          leftIconSize: const Size.square(18),
+          onTap: () => widget.onCoverChanged(icon: ""),
+          useIntrinsicWidth: true,
+          leftIcon: const Icon(
+            Icons.emoji_emotions_outlined,
+            size: 18,
+          ),
+          text: FlowyText.regular(
+            LocaleKeys.document_plugins_cover_removeIcon.tr(),
+          ),
+        ),
+      );
+    } else {
+      children.add(
+        AppFlowyPopover(
+          onClose: () => isPopoverOpen = false,
+          controller: _popoverController,
+          offset: const Offset(0, 8),
+          direction: PopoverDirection.bottomWithCenterAligned,
+          constraints: BoxConstraints.loose(const Size(320, 380)),
+          child: FlowyButton(
+            leftIconSize: const Size.square(18),
+            useIntrinsicWidth: true,
+            leftIcon: const Icon(
+              Icons.emoji_emotions_outlined,
+              size: 18,
+            ),
+            text: FlowyText.regular(
+              LocaleKeys.document_plugins_cover_addIcon.tr(),
+            ),
+          ),
+          popupBuilder: (BuildContext popoverContext) {
+            isPopoverOpen = true;
+            return EmojiPopover(
+              showRemoveButton: widget.hasIcon,
+              removeIcon: () {
+                widget.onCoverChanged(icon: "");
+                _popoverController.close();
+              },
+              node: widget.node,
+              editorState: widget.editorState,
+              onEmojiChanged: (Emoji emoji) {
+                widget.onCoverChanged(icon: emoji.emoji);
+                _popoverController.close();
+              },
+            );
+          },
+        ),
+      );
+    }
+
+    return children;
+  }
+
+  void setHidden(bool value) {
+    if (isHidden == value) return;
+    setState(() {
+      isHidden = value;
+    });
+  }
+}
+
+@visibleForTesting
+class DocumentCover extends StatefulWidget {
+  final Node node;
+  final EditorState editorState;
+  final CoverType coverType;
+  final String? coverDetails;
+  final Future<void> Function(CoverType type, String? details) onCoverChanged;
+
+  const DocumentCover({
+    required this.editorState,
+    required this.node,
+    required this.coverType,
+    required this.onCoverChanged,
+    this.coverDetails,
+    super.key,
+  });
+
+  @override
+  State<DocumentCover> createState() => DocumentCoverState();
+}
+
+class DocumentCoverState extends State<DocumentCover> {
+  bool isOverlayButtonsHidden = true;
+  bool isPopoverOpen = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: kCoverHeight,
+      child: MouseRegion(
+        onEnter: (event) => setOverlayButtonsHidden(false),
+        onExit: (event) =>
+            setOverlayButtonsHidden(isPopoverOpen ? false : true),
+        child: Stack(
+          children: [
+            SizedBox(
+              height: double.infinity,
+              width: double.infinity,
+              child: _buildCoverImage(),
+            ),
+            if (!isOverlayButtonsHidden) _buildCoverOverlayButtons(context)
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildCoverImage() {
+    switch (widget.coverType) {
+      case CoverType.file:
+        final imageFile = File(widget.coverDetails ?? "");
+        if (!imageFile.existsSync()) {
+          WidgetsBinding.instance.addPostFrameCallback((_) {
+            widget.onCoverChanged(CoverType.none, null);
+          });
+          return const SizedBox.shrink();
+        }
+        return Image.file(
+          imageFile,
+          fit: BoxFit.cover,
+        );
+      case CoverType.asset:
+        return Image.asset(
+          widget.coverDetails!,
+          fit: BoxFit.cover,
+        );
+      case CoverType.color:
+        final color = widget.coverDetails?.toColor() ?? Colors.white;
+        return Container(color: color);
+      case CoverType.none:
+        return const SizedBox.shrink();
+    }
+  }
+
+  Widget _buildCoverOverlayButtons(BuildContext context) {
+    return Positioned(
+      bottom: 20,
+      right: 50,
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          AppFlowyPopover(
+            offset: const Offset(0, 8),
+            direction: PopoverDirection.bottomWithCenterAligned,
+            constraints: BoxConstraints.loose(const Size(380, 450)),
+            margin: EdgeInsets.zero,
+            onClose: () => isPopoverOpen = false,
+            child: RoundedTextButton(
+              hoverColor: Theme.of(context).colorScheme.surface,
+              textColor: Theme.of(context).colorScheme.tertiary,
+              fillColor: Theme.of(context).colorScheme.surface.withOpacity(0.5),
+              width: 120,
+              height: 28,
+              title: LocaleKeys.document_plugins_cover_changeCover.tr(),
+            ),
+            popupBuilder: (BuildContext popoverContext) {
+              isPopoverOpen = true;
+              return ChangeCoverPopover(
+                node: widget.node,
+                editorState: widget.editorState,
+                onCoverChanged: (cover, selection) =>
+                    widget.onCoverChanged(cover, selection),
+              );
+            },
+          ),
+          const HSpace(10),
+          DeleteCoverButton(
+            onTap: () => widget.onCoverChanged(CoverType.none, null),
+          ),
+        ],
+      ),
+    );
+  }
+
+  void setOverlayButtonsHidden(bool value) {
+    if (isOverlayButtonsHidden == value) return;
+    setState(() {
+      isOverlayButtonsHidden = value;
+    });
+  }
+}
+
+@visibleForTesting
+class DeleteCoverButton extends StatelessWidget {
+  final VoidCallback onTap;
+  const DeleteCoverButton({required this.onTap, super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return FlowyIconButton(
+      hoverColor: Theme.of(context).colorScheme.surface,
+      fillColor: Theme.of(context).colorScheme.surface.withOpacity(0.5),
+      iconPadding: const EdgeInsets.all(5),
+      width: 28,
+      icon: svgWidget(
+        'editor/delete',
+        color: Theme.of(context).colorScheme.tertiary,
+      ),
+      onPressed: onTap,
+    );
+  }
+}
+
+@visibleForTesting
+class DocumentIcon extends StatefulWidget {
+  final Node node;
+  final EditorState editorState;
+  final String icon;
+  final Future<void> Function(String icon) onIconChanged;
+
+  const DocumentIcon({
+    required this.node,
+    required this.editorState,
+    required this.icon,
+    required this.onIconChanged,
+    super.key,
+  });
+
+  @override
+  State<DocumentIcon> createState() => _DocumentIconState();
+}
+
+class _DocumentIconState extends State<DocumentIcon> {
+  final PopoverController _popoverController = PopoverController();
+
+  @override
+  Widget build(BuildContext context) {
+    return AppFlowyPopover(
+      direction: PopoverDirection.bottomWithCenterAligned,
+      controller: _popoverController,
+      offset: const Offset(0, 8),
+      constraints: BoxConstraints.loose(const Size(320, 380)),
+      child: EmojiIconWidget(emoji: widget.icon),
+      popupBuilder: (BuildContext popoverContext) {
+        return EmojiPopover(
+          node: widget.node,
+          showRemoveButton: true,
+          removeIcon: () {
+            widget.onIconChanged("");
+            _popoverController.close();
+          },
+          editorState: widget.editorState,
+          onEmojiChanged: (Emoji emoji) {
+            widget.onIconChanged(emoji.emoji);
+            _popoverController.close();
+          },
+        );
+      },
+    );
+  }
+}
@@ -5,12 +5,10 @@ class EmojiIconWidget extends StatefulWidget {
  const EmojiIconWidget({
    super.key,
    required this.emoji,
-    this.size = 80,
    this.emojiSize = 60,
  });

  final String emoji;
-  final double size;
  final double emojiSize;

  @override
@@ -25,12 +23,11 @@ class _EmojiIconWidgetState extends State<EmojiIconWidget> {
    return MouseRegion(
      onEnter: (_) => setHidden(false),
      onExit: (_) => setHidden(true),
+      cursor: SystemMouseCursors.click,
      child: Container(
-        height: widget.size,
-        width: widget.size,
        decoration: BoxDecoration(
          color: !hover
-              ? Theme.of(context).colorScheme.inverseSurface
+              ? Theme.of(context).colorScheme.inverseSurface.withOpacity(0.5)
              : Colors.transparent,
          borderRadius: BorderRadius.circular(8),
        ),
@@ -0,0 +1,84 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/workspace/presentation/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';
+import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flowy_infra/image.dart';
+import 'package:flutter/material.dart';
+
+class EmojiPopover extends StatefulWidget {
+  final EditorState editorState;
+  final Node node;
+  final void Function(Emoji emoji) onEmojiChanged;
+  final VoidCallback removeIcon;
+  final bool showRemoveButton;
+
+  const EmojiPopover({
+    super.key,
+    required this.editorState,
+    required this.node,
+    required this.onEmojiChanged,
+    required this.removeIcon,
+    required this.showRemoveButton,
+  });
+
+  @override
+  State<EmojiPopover> createState() => _EmojiPopoverState();
+}
+
+class _EmojiPopoverState extends State<EmojiPopover> {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        if (widget.showRemoveButton)
+          Padding(
+            padding: const EdgeInsets.only(bottom: 4.0),
+            child: Align(
+              alignment: Alignment.centerRight,
+              child: DeleteButton(onTap: widget.removeIcon),
+            ),
+          ),
+        Expanded(
+          child: EmojiPicker(
+            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,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class DeleteButton extends StatelessWidget {
+  final VoidCallback onTap;
+  const DeleteButton({required this.onTap, Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 28,
+      child: FlowyButton(
+        onTap: onTap,
+        useIntrinsicWidth: true,
+        text: FlowyText(
+          LocaleKeys.document_plugins_cover_removeIcon.tr(),
+        ),
+        leftIcon: const FlowySvg(name: 'editor/delete'),
+      ),
+    );
+  }
+}
@@ -0,0 +1,290 @@
+import 'package:appflowy/generated/locale_keys.g.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/image.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flowy_infra_ui/widget/ignore_parent_gesture.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:provider/provider.dart';
+
+class ImageMenu extends StatefulWidget {
+  const ImageMenu({
+    super.key,
+    required this.node,
+    required this.state,
+  });
+
+  final Node node;
+  final ImageBlockComponentWidgetState state;
+
+  @override
+  State<ImageMenu> createState() => _ImageMenuState();
+}
+
+class _ImageMenuState extends State<ImageMenu> {
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return Container(
+      height: 32,
+      decoration: BoxDecoration(
+        color: theme.cardColor,
+        boxShadow: [
+          BoxShadow(
+            blurRadius: 5,
+            spreadRadius: 1,
+            color: Colors.black.withOpacity(0.1),
+          ),
+        ],
+        borderRadius: BorderRadius.circular(4.0),
+      ),
+      child: Row(
+        children: [
+          const HSpace(4),
+          _ImageCopyLinkButton(
+            onTap: copyImageLink,
+          ),
+          const HSpace(4),
+          _ImageAlignButton(
+            node: widget.node,
+            state: widget.state,
+          ),
+          const _Divider(),
+          _ImageDeleteButton(
+            onTap: () => deleteImage(),
+          ),
+          const HSpace(4),
+        ],
+      ),
+    );
+  }
+
+  void copyImageLink() {
+    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(),
+          ),
+        ),
+      );
+    }
+  }
+
+  Future<void> deleteImage() async {
+    final node = widget.node;
+    final editorState = context.read<EditorState>();
+    final transaction = editorState.transaction;
+    transaction.deleteNode(node);
+    transaction.afterSelection = null;
+    await editorState.apply(transaction);
+  }
+}
+
+class _ImageCopyLinkButton extends StatelessWidget {
+  const _ImageCopyLinkButton({
+    required this.onTap,
+  });
+
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: const FlowySvg(
+        name: 'editor/copy',
+        size: Size.square(16),
+      ),
+    );
+  }
+}
+
+class _ImageAlignButton extends StatefulWidget {
+  const _ImageAlignButton({
+    required this.node,
+    required this.state,
+  });
+
+  final Node node;
+  final ImageBlockComponentWidgetState state;
+
+  @override
+  State<_ImageAlignButton> createState() => _ImageAlignButtonState();
+}
+
+const interceptorKey = 'image-align';
+
+class _ImageAlignButtonState extends State<_ImageAlignButton> {
+  final gestureInterceptor = SelectionGestureInterceptor(
+    key: interceptorKey,
+    canTap: (details) => false,
+  );
+
+  String get align => widget.node.attributes['align'] ?? 'center';
+  final popoverController = PopoverController();
+  late final EditorState editorState;
+
+  @override
+  void initState() {
+    super.initState();
+
+    editorState = context.read<EditorState>();
+  }
+
+  @override
+  void dispose() {
+    allowMenuClose();
+
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return IgnoreParentGestureWidget(
+      child: AppFlowyPopover(
+        onClose: allowMenuClose,
+        controller: popoverController,
+        windowPadding: const EdgeInsets.all(0),
+        margin: const EdgeInsets.all(0),
+        direction: PopoverDirection.bottomWithCenterAligned,
+        offset: const Offset(0, 10),
+        child: buildAlignIcon(),
+        popupBuilder: (_) {
+          preventMenuClose();
+          return _AlignButtons(
+            onAlignChanged: onAlignChanged,
+          );
+        },
+      ),
+    );
+  }
+
+  void onAlignChanged(String align) {
+    popoverController.close();
+
+    final transaction = editorState.transaction;
+    transaction.updateNode(widget.node, {
+      ImageBlockKeys.align: align,
+    });
+    editorState.apply(transaction);
+
+    allowMenuClose();
+  }
+
+  void preventMenuClose() {
+    widget.state.alwaysShowMenu = true;
+    editorState.service.selectionService.registerGestureInterceptor(
+      gestureInterceptor,
+    );
+  }
+
+  void allowMenuClose() {
+    widget.state.alwaysShowMenu = false;
+    editorState.service.selectionService.unregisterGestureInterceptor(
+      interceptorKey,
+    );
+  }
+
+  Widget buildAlignIcon() {
+    return FlowySvg(
+      name: 'editor/align/$align',
+      size: const Size.square(16),
+    );
+  }
+}
+
+class _AlignButtons extends StatelessWidget {
+  const _AlignButtons({
+    required this.onAlignChanged,
+  });
+
+  final Function(String align) onAlignChanged;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 32,
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          const HSpace(4),
+          _AlignButton(
+            align: 'left',
+            onTap: () => onAlignChanged('left'),
+          ),
+          const _Divider(),
+          _AlignButton(
+            align: 'left',
+            onTap: () => onAlignChanged('center'),
+          ),
+          const _Divider(),
+          _AlignButton(
+            align: 'left',
+            onTap: () => onAlignChanged('right'),
+          ),
+          const HSpace(4),
+        ],
+      ),
+    );
+  }
+}
+
+class _AlignButton extends StatelessWidget {
+  const _AlignButton({
+    required this.align,
+    required this.onTap,
+  });
+
+  final String align;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: FlowySvg(
+        name: 'editor/align/$align',
+        size: const Size.square(16),
+      ),
+    );
+  }
+}
+
+class _ImageDeleteButton extends StatelessWidget {
+  const _ImageDeleteButton({
+    required this.onTap,
+  });
+
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: const FlowySvg(
+        name: 'editor/delete',
+        size: Size.square(16),
+      ),
+    );
+  }
+}
+
+class _Divider extends StatelessWidget {
+  const _Divider();
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(8),
+      child: Container(
+        width: 1,
+        color: Colors.grey,
+      ),
+    );
+  }
+}
@@ -0,0 +1,59 @@
+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,
+  icon: (editorState, isSelected, style) => SelectionMenuIconWidget(
+    name: 'image',
+    isSelected: isSelected,
+    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);
+          }
+        }
+      },
+    );
+  },
+);
@@ -0,0 +1,173 @@
+import 'package:appflowy/generated/locale_keys.g.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/flowy_infra_ui.dart';
+import 'package:flowy_infra_ui/style_widget/text_input.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_math_fork/flutter_math.dart';
+import 'package:provider/provider.dart';
+
+class InlineMathEquationKeys {
+  const InlineMathEquationKeys._();
+
+  static const formula = 'formula';
+}
+
+class InlineMathEquation extends StatefulWidget {
+  const InlineMathEquation({
+    super.key,
+    required this.formula,
+    required this.node,
+    required this.index,
+    this.textStyle,
+  });
+
+  final Node node;
+  final int index;
+  final String formula;
+  final TextStyle? textStyle;
+
+  @override
+  State<InlineMathEquation> createState() => _InlineMathEquationState();
+}
+
+class _InlineMathEquationState extends State<InlineMathEquation> {
+  final popoverController = PopoverController();
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return _IgnoreParentPointer(
+      child: AppFlowyPopover(
+        controller: popoverController,
+        direction: PopoverDirection.bottomWithLeftAligned,
+        popupBuilder: (_) {
+          return MathInputTextField(
+            initialText: widget.formula,
+            onSubmit: (value) async {
+              popoverController.close();
+              if (value == widget.formula) {
+                return;
+              }
+              final editorState = context.read<EditorState>();
+              final transaction = editorState.transaction
+                ..formatText(widget.node, widget.index, 1, {
+                  InlineMathEquationKeys.formula: value,
+                });
+              await editorState.apply(transaction);
+            },
+          );
+        },
+        offset: const Offset(0, 10),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(vertical: 8.0),
+          child: MouseRegion(
+            cursor: SystemMouseCursors.click,
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                const HSpace(2),
+                Math.tex(
+                  widget.formula,
+                  options: MathOptions(
+                    style: MathStyle.text,
+                    mathFontOptions: const FontOptions(
+                      fontShape: FontStyle.italic,
+                    ),
+                    fontSize: 14.0,
+                    color: widget.textStyle?.color ??
+                        theme.colorScheme.onBackground,
+                  ),
+                ),
+                const HSpace(2),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class MathInputTextField extends StatefulWidget {
+  const MathInputTextField({
+    super.key,
+    required this.initialText,
+    required this.onSubmit,
+  });
+
+  final String initialText;
+  final void Function(String value) onSubmit;
+
+  @override
+  State<MathInputTextField> createState() => _MathInputTextFieldState();
+}
+
+class _MathInputTextFieldState extends State<MathInputTextField> {
+  late final TextEditingController textEditingController;
+
+  @override
+  void initState() {
+    super.initState();
+
+    textEditingController = TextEditingController(
+      text: widget.initialText,
+    );
+    textEditingController.selection = TextSelection(
+      baseOffset: 0,
+      extentOffset: widget.initialText.length,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 240,
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Expanded(
+            child: FlowyFormTextInput(
+              autoFocus: true,
+              textAlign: TextAlign.left,
+              controller: textEditingController,
+              contentPadding: const EdgeInsets.symmetric(
+                vertical: 8.0,
+                horizontal: 4.0,
+              ),
+              onEditingComplete: () =>
+                  widget.onSubmit(textEditingController.text),
+            ),
+          ),
+          const HSpace(4.0),
+          FlowyButton(
+            text: FlowyText(LocaleKeys.button_Done.tr()),
+            useIntrinsicWidth: true,
+            onTap: () => widget.onSubmit(textEditingController.text),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _IgnoreParentPointer extends StatelessWidget {
+  const _IgnoreParentPointer({
+    required this.child,
+  });
+
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      behavior: HitTestBehavior.opaque,
+      onTap: () {},
+      onTapDown: (_) {},
+      onDoubleTap: () {},
+      onLongPress: () {},
+      child: child,
+    );
+  }
+}
@@ -0,0 +1,74 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/image.dart';
+import 'package:flutter/material.dart';
+
+final ToolbarItem inlineMathEquationItem = ToolbarItem(
+  id: 'editor.inline_math_equation',
+  group: 2,
+  isActive: onlyShowInSingleSelectionAndTextType,
+  builder: (context, editorState) {
+    final selection = editorState.selection!;
+    final nodes = editorState.getNodesInSelection(selection);
+    final isHighlight = nodes.allSatisfyInSelection(selection, (delta) {
+      return delta.everyAttributes(
+        (attributes) => attributes[InlineMathEquationKeys.formula] != null,
+      );
+    });
+    return IconItemWidget(
+      iconBuilder: (_) => svgWidget(
+        'editor/math',
+        size: const Size.square(16),
+        color: isHighlight ? Colors.lightBlue : Colors.white,
+      ),
+      isHighlight: isHighlight,
+      tooltip: LocaleKeys.document_plugins_createInlineMathEquation.tr(),
+      onPressed: () async {
+        final selection = editorState.selection;
+        if (selection == null || selection.isCollapsed) {
+          return;
+        }
+        final node = editorState.getNodeAtPath(selection.start.path);
+        final delta = node?.delta;
+        if (node == null || delta == null) {
+          return;
+        }
+
+        final transaction = editorState.transaction;
+        if (isHighlight) {
+          final formula = delta
+              .slice(selection.startIndex, selection.endIndex)
+              .whereType<TextInsert>()
+              .firstOrNull
+              ?.attributes?[InlineMathEquationKeys.formula];
+          assert(formula != null);
+          if (formula == null) {
+            return;
+          }
+          // clear the format
+          transaction.replaceText(
+            node,
+            selection.startIndex,
+            selection.length,
+            formula,
+            attributes: {},
+          );
+        } else {
+          final text = editorState.getTextInSelection(selection).join();
+          transaction.replaceText(
+            node,
+            selection.startIndex,
+            selection.length,
+            '\$',
+            attributes: {
+              InlineMathEquationKeys.formula: text,
+            },
+          );
+        }
+        await editorState.apply(transaction);
+      },
+    );
+  },
+);
@@ -0,0 +1,162 @@
+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_backend/protobuf/flowy-folder2/view.pb.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 List<(ViewPB, List<ViewPB>)> pbViews = await service.fetchViews(
+      (_, __) => true,
+    );
+    if (pbViews.isEmpty) {
+      return [];
+    }
+    final List<SelectionMenuItem> pages = [];
+    final List<ViewPB> views = [];
+    for (final element in pbViews) {
+      views.addAll(element.$2);
+    }
+    views.sort(((a, b) => b.createTime.compareTo(a.createTime)));
+
+    for (final view in views) {
+      final SelectionMenuItem pageSelectionMenuItem = SelectionMenuItem(
+        icon: (editorState, isSelected, style) => SelectableSvgWidget(
+          name: view.iconName,
+          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;
+  }
+}
@@ -0,0 +1,22 @@
+import 'package:appflowy/plugins/document/presentation/editor_plugins/inline_page/inline_page_reference.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_page_block.dart';
+import 'package:flutter/material.dart';
+
+class MentionBlock extends StatelessWidget {
+  const MentionBlock({
+    super.key,
+    required this.mention,
+  });
+
+  final Map mention;
+
+  @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);
+    }
+    throw UnimplementedError();
+  }
+}
@@ -0,0 +1,144 @@
+import 'package:appflowy/plugins/document/presentation/more/cubit/document_appearance_cubit.dart';
+import 'package:appflowy/plugins/trash/application/trash_service.dart';
+import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy/workspace/application/view/prelude.dart';
+import 'package:appflowy/workspace/application/view/view_ext.dart';
+import 'package:appflowy/workspace/presentation/home/menu/menu.dart';
+import 'package:appflowy_backend/log.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder2/protobuf.dart';
+import 'package:appflowy_editor/appflowy_editor.dart'
+    show EditorState, SelectionUpdateReason;
+import 'package:collection/collection.dart';
+import 'package:flowy_infra/image.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:provider/provider.dart';
+
+final pageMemorizer = <String, ViewPB?>{};
+
+class MentionPageBlock extends StatefulWidget {
+  const MentionPageBlock({
+    super.key,
+    required this.pageId,
+  });
+
+  final String pageId;
+
+  @override
+  State<MentionPageBlock> createState() => _MentionPageBlockState();
+}
+
+class _MentionPageBlockState extends State<MentionPageBlock> {
+  late final EditorState editorState;
+  late Future<ViewPB?> viewPBFuture;
+  ViewListener? viewListener;
+
+  @override
+  void initState() {
+    super.initState();
+
+    editorState = context.read<EditorState>();
+    viewPBFuture = fetchView(widget.pageId);
+    viewListener = ViewListener(viewId: widget.pageId)
+      ..start(
+        onViewUpdated: (p0) {
+          pageMemorizer[p0.id] = p0;
+          viewPBFuture = fetchView(widget.pageId);
+          editorState.reload();
+        },
+      );
+  }
+
+  @override
+  void dispose() {
+    viewListener?.stop();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final fontSize = context.read<DocumentAppearanceCubit>().state.fontSize;
+    return FutureBuilder<ViewPB?>(
+      initialData: pageMemorizer[widget.pageId],
+      future: viewPBFuture,
+      builder: (context, state) {
+        final view = state.data;
+        // memorize the result
+        pageMemorizer[widget.pageId] = view;
+        if (view == null) {
+          return const SizedBox.shrink();
+        }
+        updateSelection();
+        return Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 2),
+          child: FlowyHover(
+            cursor: SystemMouseCursors.click,
+            child: GestureDetector(
+              onTap: () => openPage(widget.pageId),
+              behavior: HitTestBehavior.translucent,
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  const HSpace(4),
+                  FlowySvg(
+                    name: view.layout.iconName,
+                    size: const Size.square(18.0),
+                  ),
+                  const HSpace(2),
+                  FlowyText(
+                    view.name,
+                    decoration: TextDecoration.underline,
+                    fontSize: fontSize,
+                  ),
+                  const HSpace(2),
+                ],
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+
+  void openPage(String pageId) async {
+    final view = await fetchView(pageId);
+    if (view == null) {
+      Log.error('Page($pageId) not found');
+      return;
+    }
+    getIt<MenuSharedState>().latestOpenView = view;
+  }
+
+  Future<ViewPB?> fetchView(String pageId) async {
+    final view = await ViewBackendService.getView(pageId).then(
+      (value) => value.swap().toOption().toNullable(),
+    );
+
+    if (view == null) {
+      // try to fetch from trash
+      final trashViews = await TrashService().readTrash();
+      final trash = trashViews.fold(
+        (l) => l.items.firstWhereOrNull((element) => element.id == pageId),
+        (r) => null,
+      );
+      if (trash != null) {
+        return ViewPB()
+          ..id = trash.id
+          ..name = trash.name;
+      }
+    }
+
+    return view;
+  }
+
+  void updateSelection() {
+    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
+      editorState.updateSelectionWithReason(
+        editorState.selection,
+        reason: SelectionUpdateReason.transaction,
+      );
+    });
+  }
+}
@@ -141,13 +141,13 @@ class EditorMigration {
    }
    const backgroundColor = 'backgroundColor';
    if (attributes.containsKey(backgroundColor)) {
-      attributes[FlowyRichTextKeys.highlightColor] =
+      attributes[AppFlowyRichTextKeys.highlightColor] =
          attributes[backgroundColor];
      attributes.remove(backgroundColor);
    }
    const color = 'color';
    if (attributes.containsKey(color)) {
-      attributes[FlowyRichTextKeys.textColor] = attributes[color];
+      attributes[AppFlowyRichTextKeys.textColor] = attributes[color];
      attributes.remove(color);
    }
    return attributes;
@@ -157,7 +157,7 @@ class _SmartEditBlockComponentWidgetState
    var width = double.infinity;
    final editorSize = editorState.renderBox?.size;
    final padding = editorState.editorStyle.padding;
-    if (editorSize != null && padding != null) {
+    if (editorSize != null) {
      width = editorSize.width - padding.left - padding.right;
    }
    return width;
@@ -0,0 +1,212 @@
+import 'dart:async';
+
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flowy_infra_ui/style_widget/hover.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class OutlineBlockKeys {
+  const OutlineBlockKeys._();
+
+  static const String type = 'outline';
+  static const String backgroundColor = blockComponentBackgroundColor;
+}
+
+// defining the callout block menu item for selection
+SelectionMenuItem outlineItem = SelectionMenuItem.node(
+  name: LocaleKeys.document_selectionMenu_outline.tr(),
+  iconData: Icons.list_alt,
+  keywords: ['outline', 'table of contents'],
+  nodeBuilder: (editorState) => outlineBlockNode(),
+  replace: (_, node) => node.delta?.isEmpty ?? false,
+);
+
+Node outlineBlockNode() {
+  return Node(
+    type: OutlineBlockKeys.type,
+  );
+}
+
+class OutlineBlockComponentBuilder extends BlockComponentBuilder {
+  OutlineBlockComponentBuilder({
+    this.configuration = const BlockComponentConfiguration(),
+  });
+
+  @override
+  final BlockComponentConfiguration configuration;
+
+  @override
+  BlockComponentWidget build(BlockComponentContext blockComponentContext) {
+    final node = blockComponentContext.node;
+    return OutlineBlockWidget(
+      key: node.key,
+      node: node,
+      configuration: configuration,
+      showActions: showActions(node),
+      actionBuilder: (context, state) => actionBuilder(
+        blockComponentContext,
+        state,
+      ),
+    );
+  }
+
+  @override
+  bool validate(Node node) => node.children.isEmpty;
+}
+
+class OutlineBlockWidget extends BlockComponentStatefulWidget {
+  const OutlineBlockWidget({
+    super.key,
+    required super.node,
+    super.showActions,
+    super.actionBuilder,
+    super.configuration = const BlockComponentConfiguration(),
+  });
+
+  @override
+  State<OutlineBlockWidget> createState() => _OutlineBlockWidgetState();
+}
+
+class _OutlineBlockWidgetState extends State<OutlineBlockWidget>
+    with BlockComponentConfigurable {
+  @override
+  BlockComponentConfiguration get configuration => widget.configuration;
+
+  @override
+  Node get node => widget.node;
+
+  // get the background color of the note block from the node's attributes
+  Color get backgroundColor {
+    final colorString =
+        node.attributes[OutlineBlockKeys.backgroundColor] as String?;
+    if (colorString == null) {
+      return Colors.transparent;
+    }
+    return colorString.toColor();
+  }
+
+  late EditorState editorState = context.read<EditorState>();
+  late Stream<(TransactionTime, Transaction)> stream =
+      editorState.transactionStream;
+
+  @override
+  Widget build(BuildContext context) {
+    return StreamBuilder(
+      stream: stream,
+      builder: (context, snapshot) {
+        if (widget.showActions && widget.actionBuilder != null) {
+          return BlockComponentActionWrapper(
+            node: widget.node,
+            actionBuilder: widget.actionBuilder!,
+            child: _buildOutlineBlock(),
+          );
+        }
+        return _buildOutlineBlock();
+      },
+    );
+  }
+
+  Widget _buildOutlineBlock() {
+    final children = getHeadingNodes()
+        .map(
+          (e) => Container(
+            padding: const EdgeInsets.only(
+              bottom: 4.0,
+            ),
+            width: double.infinity,
+            child: OutlineItemWidget(node: e),
+          ),
+        )
+        .toList();
+    if (children.isEmpty) {
+      return Align(
+        alignment: Alignment.centerLeft,
+        child: Text(
+          LocaleKeys.document_plugins_outline_addHeadingToCreateOutline.tr(),
+          style: configuration.placeholderTextStyle(node),
+        ),
+      );
+    }
+    return Container(
+      decoration: BoxDecoration(
+        borderRadius: const BorderRadius.all(Radius.circular(8.0)),
+        color: backgroundColor,
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.max,
+        children: children,
+      ),
+    );
+  }
+
+  Iterable<Node> getHeadingNodes() {
+    final children = editorState.document.root.children;
+    return children.where((element) => element.type == HeadingBlockKeys.type);
+  }
+}
+
+class OutlineItemWidget extends StatelessWidget {
+  OutlineItemWidget({
+    super.key,
+    required this.node,
+  }) {
+    assert(node.type == HeadingBlockKeys.type);
+  }
+
+  final Node node;
+
+  @override
+  Widget build(BuildContext context) {
+    final editorState = context.read<EditorState>();
+    final textStyle = editorState.editorStyle.textStyleConfiguration;
+    final style = textStyle.href.combine(textStyle.text);
+    return FlowyHover(
+      style: HoverStyle(
+        hoverColor: Colors.grey.withOpacity(0.2), // TODO: use theme color.
+      ),
+      child: GestureDetector(
+        onTap: () => updateBlockSelection(context),
+        child: Container(
+          padding: EdgeInsets.only(left: node.leftIndent),
+          child: Text(
+            node.outlineItemText,
+            style: style,
+          ),
+        ),
+      ),
+    );
+  }
+
+  void updateBlockSelection(BuildContext context) {
+    final editorState = context.read<EditorState>();
+    editorState.selectionType = SelectionType.block;
+    editorState.selection = Selection.collapse(
+      node.path,
+      node.delta?.length ?? 0,
+    );
+    editorState.selectionType = null;
+  }
+}
+
+extension on Node {
+  double get leftIndent {
+    assert(type == HeadingBlockKeys.type);
+    if (type != HeadingBlockKeys.type) {
+      return 0.0;
+    }
+    final level = attributes[HeadingBlockKeys.level];
+    if (level == 2) {
+      return 20;
+    } else if (level == 3) {
+      return 40;
+    }
+    return 0;
+  }
+
+  String get outlineItemText {
+    return delta?.toPlainText() ?? '';
+  }
+}
@@ -1,16 +1,24 @@
+export 'actions/block_action_list.dart';
+export 'actions/option_action.dart';
 export 'callout/callout_block_component.dart';
 export 'code_block/code_block_component.dart';
 export 'code_block/code_block_shortcut_event.dart';
-export 'cover/change_cover_popover_bloc.dart';
-export 'cover/cover_node_widget.dart';
-export 'cover/cover_image_picker.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 'extensions/flowy_tint_extension.dart';
-export 'database/inline_database_menu_item.dart';
-export 'database/database_view_block_component.dart';
+export 'header/cover_editor_bloc.dart';
+export 'header/custom_cover_picker.dart';
+export 'header/document_header_node_widget.dart';
+export 'image/image_menu.dart';
+export 'image/image_selection_menu.dart';
+export 'inline_math_equation/inline_math_equation.dart';
+export 'inline_math_equation/inline_math_equation_toolbar_item.dart';
 export 'math_equation/math_equation_block_component.dart';
 export 'openai/widgets/auto_completion_node_widget.dart';
 export 'openai/widgets/smart_edit_node_widget.dart';
 export 'openai/widgets/smart_edit_toolbar_item.dart';
+export 'outline/outline_block_component.dart';
 export 'toggle/toggle_block_component.dart';
 export 'toggle/toggle_block_shortcut_event.dart';
@@ -84,7 +84,7 @@ class _ToggleListBlockComponentWidgetState
    extends State<ToggleListBlockComponentWidget>
    with
        SelectableMixin,
-        DefaultSelectable,
+        DefaultSelectableMixin,
        BlockComponentConfigurable,
        BackgroundColorMixin {
  // the key used to forward focus to the richtext child
@@ -141,7 +141,7 @@ class _ToggleListBlockComponentWidgetState
          width: 4.0,
        ),
        Expanded(
-          child: FlowyRichText(
+          child: AppFlowyRichText(
            key: forwardKey,
            node: widget.node,
            editorState: editorState,
@@ -1,5 +1,8 @@
+import 'package:appflowy/plugins/document/presentation/editor_plugins/inline_math_equation/inline_math_equation.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/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_editor/appflowy_editor.dart';
+import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -26,30 +29,35 @@ class EditorStyleCustomizer {
  EditorStyle desktop() {
    final theme = Theme.of(context);
    final fontSize = context.read<DocumentAppearanceCubit>().state.fontSize;
+    final fontFamily = context.read<DocumentAppearanceCubit>().state.fontFamily;
    return EditorStyle.desktop(
      padding: padding,
      backgroundColor: theme.colorScheme.surface,
      cursorColor: theme.colorScheme.primary,
      textStyleConfiguration: TextStyleConfiguration(
-        text: TextStyle(
-          fontFamily: 'Poppins',
+        text: baseTextStyle(fontFamily).copyWith(
          fontSize: fontSize,
          color: theme.colorScheme.onBackground,
          height: 1.5,
        ),
-        bold: const TextStyle(
-          fontFamily: 'Poppins-Bold',
+        bold: baseTextStyle(fontFamily, fontWeight: FontWeight.bold).copyWith(
          fontWeight: FontWeight.w600,
        ),
-        italic: const TextStyle(fontStyle: FontStyle.italic),
-        underline: const TextStyle(decoration: TextDecoration.underline),
-        strikethrough: const TextStyle(decoration: TextDecoration.lineThrough),
-        href: TextStyle(
+        italic: baseTextStyle(fontFamily).copyWith(
+          fontStyle: FontStyle.italic,
+        ),
+        underline: baseTextStyle(fontFamily).copyWith(
+          decoration: TextDecoration.underline,
+        ),
+        strikethrough: baseTextStyle(fontFamily).copyWith(
+          decoration: TextDecoration.lineThrough,
+        ),
+        href: baseTextStyle(fontFamily).copyWith(
          color: theme.colorScheme.primary,
          decoration: TextDecoration.underline,
        ),
        code: GoogleFonts.robotoMono(
-          textStyle: TextStyle(
+          textStyle: baseTextStyle(fontFamily).copyWith(
            fontSize: fontSize,
            fontWeight: FontWeight.normal,
            color: Colors.red,
@@ -57,36 +65,39 @@ class EditorStyleCustomizer {
          ),
        ),
      ),
+      textSpanDecorator: customizeAttributeDecorator,
    );
  }

  EditorStyle mobile() {
    final theme = Theme.of(context);
    final fontSize = context.read<DocumentAppearanceCubit>().state.fontSize;
+    final fontFamily = context.read<DocumentAppearanceCubit>().state.fontFamily;
+
    return EditorStyle.desktop(
      padding: padding,
      backgroundColor: theme.colorScheme.surface,
      cursorColor: theme.colorScheme.primary,
      textStyleConfiguration: TextStyleConfiguration(
-        text: TextStyle(
-          fontFamily: 'poppins',
+        text: baseTextStyle(fontFamily).copyWith(
          fontSize: fontSize,
          color: theme.colorScheme.onBackground,
          height: 1.5,
        ),
-        bold: const TextStyle(
-          fontFamily: 'poppins-Bold',
+        bold: baseTextStyle(fontFamily).copyWith(
          fontWeight: FontWeight.w600,
        ),
-        italic: const TextStyle(fontStyle: FontStyle.italic),
-        underline: const TextStyle(decoration: TextDecoration.underline),
-        strikethrough: const TextStyle(decoration: TextDecoration.lineThrough),
-        href: TextStyle(
+        italic: baseTextStyle(fontFamily).copyWith(fontStyle: FontStyle.italic),
+        underline: baseTextStyle(fontFamily)
+            .copyWith(decoration: TextDecoration.underline),
+        strikethrough: baseTextStyle(fontFamily)
+            .copyWith(decoration: TextDecoration.lineThrough),
+        href: baseTextStyle(fontFamily).copyWith(
          color: theme.colorScheme.primary,
          decoration: TextDecoration.underline,
        ),
        code: GoogleFonts.robotoMono(
-          textStyle: TextStyle(
+          textStyle: baseTextStyle(fontFamily).copyWith(
            fontSize: fontSize,
            fontWeight: FontWeight.normal,
            color: Colors.red,
@@ -114,13 +125,24 @@ class EditorStyleCustomizer {
  }

  TextStyle codeBlockStyleBuilder() {
+    final theme = Theme.of(context);
+    final fontSize = context.read<DocumentAppearanceCubit>().state.fontSize;
+    final fontFamily = context.read<DocumentAppearanceCubit>().state.fontFamily;
+    return baseTextStyle(fontFamily).copyWith(
+      fontSize: fontSize,
+      height: 1.5,
+      color: theme.colorScheme.onBackground,
+    );
+  }
+
+  TextStyle outlineBlockPlaceholderStyleBuilder() {
    final theme = Theme.of(context);
    final fontSize = context.read<DocumentAppearanceCubit>().state.fontSize;
    return TextStyle(
      fontFamily: 'poppins',
      fontSize: fontSize,
      height: 1.5,
-      color: theme.colorScheme.onBackground,
+      color: theme.colorScheme.onBackground.withOpacity(0.6),
    );
  }

@@ -142,4 +164,62 @@ class EditorStyleCustomizer {
      backgroundColor: theme.colorScheme.onTertiary,
    );
  }
+
+  TextStyle baseTextStyle(
+    String fontFamily, {
+    FontWeight? fontWeight,
+  }) {
+    try {
+      return GoogleFonts.getFont(
+        fontFamily,
+        fontWeight: fontWeight,
+      );
+    } on Exception {
+      return GoogleFonts.getFont('Poppins');
+    }
+  }
+
+  InlineSpan customizeAttributeDecorator(
+    BuildContext context,
+    Node node,
+    int index,
+    TextInsert text,
+    TextSpan textSpan,
+  ) {
+    final attributes = text.attributes;
+    if (attributes == null) {
+      return textSpan;
+    }
+
+    // customize the inline mention block, like inline page
+    final mention = attributes[MentionBlockKeys.mention] as Map?;
+    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,
+          ),
+        );
+      }
+    }
+
+    // customize the inline math equation block
+    final formula = attributes[InlineMathEquationKeys.formula] as String?;
+    if (formula != null) {
+      return WidgetSpan(
+        alignment: PlaceholderAlignment.middle,
+        child: InlineMathEquation(
+          node: node,
+          index: index,
+          formula: formula,
+          textStyle: style().textStyleConfiguration.text,
+        ),
+      );
+    }
+
+    return textSpan;
+  }
 }
@@ -1,30 +1,58 @@
+import 'package:appflowy/core/config/kv_keys.dart';
 import 'package:bloc/bloc.dart';
 import 'package:shared_preferences/shared_preferences.dart';

-const String _kDocumentAppearanceFontSize = 'kDocumentAppearanceFontSize';
-
 class DocumentAppearance {
  const DocumentAppearance({
    required this.fontSize,
+    required this.fontFamily,
  });

  final double fontSize;
-  // Will be supported...
-  // final String fontName;
+  final String fontFamily;

-  DocumentAppearance copyWith({double? fontSize}) {
+  DocumentAppearance copyWith({
+    double? fontSize,
+    String? fontFamily,
+  }) {
    return DocumentAppearance(
      fontSize: fontSize ?? this.fontSize,
+      fontFamily: fontFamily ?? this.fontFamily,
    );
  }
 }

 class DocumentAppearanceCubit extends Cubit<DocumentAppearance> {
-  DocumentAppearanceCubit() : super(const DocumentAppearance(fontSize: 16.0));
+  DocumentAppearanceCubit()
+      : super(const DocumentAppearance(fontSize: 16.0, fontFamily: 'Poppins'));

-  void fetch() async {
+  Future<void> fetch() async {
    final prefs = await SharedPreferences.getInstance();
-    final fontSize = prefs.getDouble(_kDocumentAppearanceFontSize) ?? 16.0;
+    final fontSize =
+        prefs.getDouble(KVKeys.kDocumentAppearanceFontSize) ?? 16.0;
+    final fontFamily =
+        prefs.getString(KVKeys.kDocumentAppearanceFontFamily) ?? 'Poppins';
+
+    if (isClosed) {
+      return;
+    }
+
+    emit(
+      state.copyWith(
+        fontSize: fontSize,
+        fontFamily: fontFamily,
+      ),
+    );
+  }
+
+  Future<void> syncFontSize(double fontSize) async {
+    final prefs = await SharedPreferences.getInstance();
+    prefs.setDouble(KVKeys.kDocumentAppearanceFontSize, fontSize);
+
+    if (isClosed) {
+      return;
+    }
+
    emit(
      state.copyWith(
        fontSize: fontSize,
@@ -32,12 +60,17 @@ class DocumentAppearanceCubit extends Cubit<DocumentAppearance> {
    );
  }

-  void syncFontSize(double fontSize) async {
+  Future<void> syncFontFamily(String fontFamily) async {
    final prefs = await SharedPreferences.getInstance();
-    prefs.setDouble(_kDocumentAppearanceFontSize, fontSize);
+    prefs.setString(KVKeys.kDocumentAppearanceFontFamily, fontFamily);
+
+    if (isClosed) {
+      return;
+    }
+
    emit(
      state.copyWith(
-        fontSize: fontSize,
+        fontFamily: fontFamily,
      ),
    );
  }
@@ -1,13 +1,13 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/plugins/document/application/share_bloc.dart';
-import 'package:appflowy/util/file_picker/file_picker_service.dart';
 import 'package:appflowy/workspace/application/view/view_listener.dart';
 import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
 import 'package:appflowy_backend/protobuf/flowy-document2/entities.pb.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/file_picker/file_picker_service.dart';
 import 'package:flowy_infra_ui/widget/rounded_button.dart';
 import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
@@ -6,14 +6,14 @@ import 'package:appflowy/plugins/database_view/application/field/field_service.d
 import 'package:appflowy/plugins/database_view/application/setting/property_bloc.dart';
 import 'package:appflowy/plugins/database_view/grid/application/grid_header_bloc.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/service/openai_client.dart';
+import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/application/auth/auth_service.dart';
 import 'package:appflowy/user/application/auth/supabase_auth_service.dart';
 import 'package:appflowy/user/application/user_listener.dart';
 import 'package:appflowy/user/application/user_service.dart';
-import 'package:appflowy/util/file_picker/file_picker_impl.dart';
-import 'package:appflowy/util/file_picker/file_picker_service.dart';
+import 'package:flowy_infra/file_picker/file_picker_impl.dart';
+import 'package:flowy_infra/file_picker/file_picker_service.dart';
 import 'package:appflowy/plugins/document/application/prelude.dart';
-import 'package:appflowy/workspace/application/settings/settings_location_cubit.dart';
 import 'package:appflowy/workspace/application/user/prelude.dart';
 import 'package:appflowy/workspace/application/workspace/prelude.dart';
 import 'package:appflowy/workspace/application/edit_panel/edit_panel_bloc.dart';
@@ -32,26 +32,35 @@ import 'package:get_it/get_it.dart';
 import 'package:http/http.dart' as http;

 class DependencyResolver {
-  static Future<void> resolve(GetIt getIt) async {
+  static Future<void> resolve(
+    GetIt getIt,
+    IntegrationMode mode,
+  ) async {
    _resolveUserDeps(getIt);
-
    _resolveHomeDeps(getIt);
-
    _resolveFolderDeps(getIt);
-
    _resolveDocDeps(getIt);
-
    _resolveGridDeps(getIt);
-
-    _resolveCommonService(getIt);
+    _resolveCommonService(getIt, mode);
  }
 }

-void _resolveCommonService(GetIt getIt) async {
+void _resolveCommonService(
+  GetIt getIt,
+  IntegrationMode mode,
+) async {
  // getIt.registerFactory<KeyValueStorage>(() => RustKeyValue());
  getIt.registerFactory<KeyValueStorage>(() => DartKeyValue());
  getIt.registerFactory<FilePickerService>(() => FilePicker());
-  getIt.registerFactory<ApplicationDataStorage>(() => ApplicationDataStorage());
+  if (mode.isTest) {
+    getIt.registerFactory<ApplicationDataStorage>(
+      () => MockApplicationDataStorage(),
+    );
+  } else {
+    getIt.registerFactory<ApplicationDataStorage>(
+      () => ApplicationDataStorage(),
+    );
+  }

  getIt.registerFactoryAsync<OpenAIRepository>(
    () async {
@@ -1,7 +1,6 @@
 import 'dart:io';

-import 'package:appflowy/env/env.dart';
-import 'package:appflowy/workspace/application/settings/settings_location_cubit.dart';
+import 'package:appflowy/workspace/application/settings/prelude.dart';
 import 'package:appflowy_backend/appflowy_backend.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
@@ -18,8 +17,14 @@ abstract class EntryPoint {
  Widget create(LaunchConfiguration config);
 }

+class FlowyRunnerContext {
+  final Directory applicationDataDirectory;
+
+  FlowyRunnerContext({required this.applicationDataDirectory});
+}
+
 class FlowyRunner {
-  static Future<void> run(
+  static Future<FlowyRunnerContext> run(
    EntryPoint f,
    IntegrationMode mode, {
    LaunchConfiguration config = const LaunchConfiguration(
@@ -32,44 +37,42 @@ class FlowyRunner {
    // Specify the env
    initGetIt(getIt, mode, f, config);

-    final directory = await getIt<ApplicationDataStorage>()
-        .getPath()
-        .then((value) => Directory(value));
-
-    // final directory = await appFlowyDocumentDirectory();
+    final applicationDataDirectory =
+        await getIt<ApplicationDataStorage>().getPath().then(
+              (value) => Directory(value),
+            );

    // add task
    final launcher = getIt<AppLauncher>();
    launcher.addTasks(
      [
-        // handle platform errors.
-        const PlatformErrorCatcherTask(),
+        // this task should be first task, for handling platform errors.
+        // don't catch errors in test mode
+        if (!mode.isUnitTest) const PlatformErrorCatcherTask(),
        // localization
        const InitLocalizationTask(),
        // init the app window
        const InitAppWindowTask(),
        // Init Rust SDK
-        InitRustSDKTask(directory: directory),
+        InitRustSDKTask(directory: applicationDataDirectory),
        // Load Plugins, like document, grid ...
        const PluginLoadTask(),

        // init the app widget
        // ignore in test mode
-        if (!mode.isTest()) ...[
+        if (!mode.isUnitTest) ...[
          const HotKeyTask(),
-          InitSupabaseTask(
-            url: Env.supabaseUrl,
-            anonKey: Env.supabaseAnonKey,
-            key: Env.supabaseKey,
-            jwtSecret: Env.supabaseJwtSecret,
-            collabTable: Env.supabaseCollabTable,
-          ),
+          InitSupabaseTask(),
          const InitAppWidgetTask(),
          const InitPlatformServiceTask()
        ],
      ],
    );
    await launcher.launch(); // execute the tasks
+
+    return FlowyRunnerContext(
+      applicationDataDirectory: applicationDataDirectory,
+    );
  }
 }

@@ -94,7 +97,7 @@ Future<void> initGetIt(
  );
  getIt.registerSingleton<PluginSandbox>(PluginSandbox());

-  await DependencyResolver.resolve(getIt);
+  await DependencyResolver.resolve(getIt, env);
 }

 class LaunchContext {
@@ -145,23 +148,24 @@ class AppLauncher {
 enum IntegrationMode {
  develop,
  release,
-  test,
-  integrationTest,
-}
+  unitTest,
+  integrationTest;

-extension IntegrationEnvExt on IntegrationMode {
-  bool isTest() {
-    return this == IntegrationMode.test;
-  }
+  // test mode
+  bool get isTest => isUnitTest || isIntegrationTest;
+  bool get isUnitTest => this == IntegrationMode.unitTest;
+  bool get isIntegrationTest => this == IntegrationMode.integrationTest;

-  bool isIntegrationTest() {
-    return this == IntegrationMode.integrationTest;
-  }
+  // release mode
+  bool get isRelease => this == IntegrationMode.release;
+
+  // develop mode
+  bool get isDevelop => this == IntegrationMode.develop;
 }

 IntegrationMode integrationEnv() {
  if (Platform.environment.containsKey('FLUTTER_TEST')) {
-    return IntegrationMode.test;
+    return IntegrationMode.unitTest;
  }

  if (kReleaseMode) {
@@ -1,3 +1,4 @@
+import 'package:appflowy/plugins/document/presentation/more/cubit/document_appearance_cubit.dart';
 import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -79,8 +80,13 @@ class ApplicationWidget extends StatelessWidget {
    final cubit = AppearanceSettingsCubit(appearanceSetting)
      ..readLocaleWhenAppLaunch(context);

-    return BlocProvider(
-      create: (context) => cubit,
+    return MultiBlocProvider(
+      providers: [
+        BlocProvider.value(value: cubit),
+        BlocProvider<DocumentAppearanceCubit>(
+          create: (_) => DocumentAppearanceCubit()..fetch(),
+        ),
+      ],
      child: BlocBuilder<AppearanceSettingsCubit, AppearanceSettingsState>(
        builder: (context, state) => MaterialApp(
          builder: overlayManagerBuilder(),
@@ -8,5 +8,6 @@ class InitLocalizationTask extends LaunchTask {
  @override
  Future<void> initialize(LaunchContext context) async {
    await EasyLocalization.ensureInitialized();
+    EasyLocalization.logger.enableBuildModes = [];
  }
 }
Author	SHA1	Message	Date
Lucas.Xu	2c669f1b85	chore: bump version 0.2.6 (#2963 )	2023-07-11 19:49:48 +08:00
Lucas.Xu	b9976b072e	fix: unable to cancel the inline math equation format (#2974 ) * fix: unable to cancel the inline math equation format * fix: bold font style used in the document is not suitable * chore: add flutter clean before executing the release task * fix: integration test	2023-07-11 19:49:29 +08:00
Felix HäberleandNathan.fooo	409e3bf1e3	feat: update translations (#2823 ) Co-authored-by: Nathan.fooo <86001920+appflowy@users.noreply.github.com>	2023-07-10 21:37:22 +08:00
Lucas.Xu	ff9b3c56c5	feat:IInline math equation (#2949 )	2023-07-09 11:03:22 +08:00
Kilu.He	4c17298432	feat: support dark mode (#2945 )	2023-07-07 21:58:15 +08:00
Kilu.He	0401fc4b22	fix: tauri check user failed (#2946 )	2023-07-06 16:40:20 +08:00
Mathias Mogensen	4805d0c568	Merge pull request #2939 from MayurSMahajan/fr_toggle_theme_shortcut_2304 feat: toggle theme mode shortcut	2023-07-06 09:34:00 +02:00
Nathan.foooandLucas.Xu	edc7933c66	feat: support pg storage (#2935 ) * refactor: using tokio-postgres * chore: update * chore: update env * chore: update * chore: upgrade supabase and add logout button * refactor: update * chore: update * refactor: using message queue to handle the pg connection * refactor: move test * refactor: update sql * chore: create pg database when user login * chore: update scheme * chore: generic user service * chore: update * chore: create statistics * chore: create snapshot * chore: add test * chore: add database cloud service * chore: add document cloud service * chore: update interface * test: add document test * refactor: document interface * chore: fix test * chore: update * chore: update test * test: add test * test: add test * test: add test * chore: update collab rev * fix: flutter analyzer * chore: update * chore: update * chore: update * fix: tests * chore: update * chore: update collab rev * ci: rust fmt --------- Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>	2023-07-05 20:57:09 +08:00
MayurSMahajan	89ff44b035	test: hotkeys integration test	2023-07-05 17:46:10 +05:30
MayurSMahajan	793884427c	feat: toggle theme mode shortcut	2023-07-05 10:58:36 +05:30
Richard Shiue	e0ad364fa3	test: improve stability of calendar integration test (#2930 )	2023-07-05 11:05:05 +08:00
Richard Shiue	5d76a7864d	chore: restore default vscode build task (#2931 )	2023-07-05 11:04:18 +08:00
Alex WallenandYijing Huang	323cb3b60f	[feat] Allow user to select any Google Font (#2895 ) * chore: add label for font selection drop down * chore: add method to set font family * feat: add drop down to setting appearance view * feat: add fontFamily to document appearance cubit * feat: add bloc provider to root for document appearance style * feat: syncFont family from setting appearance dialog * feat: plumbing for font style in editor * fix: add blocprovider before pushing overlay * chore: add kv_keys * fix: use fontFamily in document appearance cubit * fix: remove bloc providers because bloc is supplied in ancestor * fix: remove unecessary bloc provider * chore: add constraints to popover * chore: add translation for search box * feat: add levenshtein for string sort * feat: add search bar view * refactor: levenshtein * chore: add tests for levenshtein algorithm * feat: add unit tests for appearance cubit * fix: analyzer warnings * feat: sort by ascending if query is empty * chore: add test for the font family setting widget * feat: make comparison case insensitive * feat: lazy load with listview.builder Co-authored-by: Yijing Huang <hyj891204@gmail.com> * fix: fonts loaded on open application * fix: checkmark doesn't show * fix: try catch before getFont * fix: clear text editing value on close * fix: remove autofocus for search text field * chore: add tests * feat: use sliver protocol Co-authored-by: Yijing Huang <hyj891204@gmail.com> * fix: avoid using intrinsic height Co-authored-by: Yijing Huang <hyj891204@gmail.com> * fix: extra paren caused build failure * feat: switch order of font family setting --------- Co-authored-by: Yijing Huang <hyj891204@gmail.com>	2023-07-04 11:30:38 -10:00
Kilu.He	9fb8f221cf	chore: add document test (#2932 )	2023-07-04 17:17:25 +08:00
Alex Wallen Yijing Huang nathan	8dfbfe3c42	feat: Dynamically Load Themes in AppFlowy (#2670 ) * feat: dynamic theme plugin (init) * feat: provide fallback color if plugin becomes out of date (transparent) * feat: use applicationDocumentsDirectory to store plugins * chore: remove json files * fix: add toJson to resolve analyzer errors * fix: analyzer (unused imports) * feat: add code generation scripts for freezed files (call recursively in packages) * fix: revert changes to dry generation * feat: call directly into script * refactor: scripts try to be stateless :) * fix: path to code generation in toml * fix: generate script permissions * fix: path not correct in generate.sh * feat: modify execution permissions before executing scripts * chore: switch order of build_runner and easy_localizations * fix: fs is not valid duckscript cmd * chore: clean build_runner before executing * chore: upgrade freezed and build_runner attempt to resolve InvalidType error * fix: use exec cmd.exe to chmod * feat: add task to generate all files * chore: remove redundant task (Code Gen) * chore: remove json_annoation to dev_dependencies * fix: dropped & between commands * chore: rename file and class to FlowyDynamicPlugin * fix: dependency hell * fix: json annotation in colorscheme * fix: analyzer warnings * fix: duckscript runner for code generator * fix: try without setting file permissions * chore: move file picker to infra * chore: restructure project directory * feat: add BLoC components for consumers * chore: update dependencies in pubspec.yaml file * fix: file picker imports * feat: add new translations for features * feat: add new widgets to render upload * fix: import * feat: add text overflow * feat: use animated switcher * chore: export FileType * fix: directory was not created, only files were copied * chore: separate some logic * feat: add saveFile to FilePickerService * fix: analyzer error with unused imports * feat: add translations for uploading * feat: add builtins property to apptheme * feat: add theme preview widget * fix: upload widgets need to fill whole space and account for overflow * refactor: do not watch file system for changes * feat: add deletion confirmation dialog * feat: add form factor resolution for dyanmic layout * feat: trigger rebuild only when plugins are loaded * feat: make all methods static * chore: remove TODO comment, requires further design * chore: move models to subfolder * fix: references to plugin service instance * fix: rebase errors * fix: more rebasing errors * feat: remove multiple themes from one plugin * refactor: use pattern to resolve widget in settings_appearance_view * refactor: remove commented code * feat: add translations * fix: import error * refactor: separate concerns a bit more * fix: bug in toJson serialization code * feat: add package to use represent memory files * fix: analyzer warnings * chore: add translation * chore: remove unused exceptions * chore: use join * chore: add documentation * feat: add tests on theme * fix: fix scripts for macOS * feat: use appFlowyDocumentDirectory * fix: remove unused import * fix: imports * feat: allow plugin service to be passed * fix: theme tests * feat: separate themes by built-in and plugin * fix: rebase change name of appFlowyDocumentDirectory * chore: add test to check that initial state falls back to initial theme * chore: theme upload preview widget * chore: rename to brightness setting * refactor: appearance for settings appearance view * feat: change show dialog api and use it * fix: handle plugin compilation exception when incorrect format supplied * fix: style of theme upload * fix: always change state so that ui updates * chore: style of loading widget * fix: analyzer errors * feat: add learn more button to documentation --------- Co-authored-by: Yijing Huang <hyj891204@gmail.com> Co-authored-by: nathan <nathan@appflowy.io>	2023-07-03 22:07:11 +08:00
Nathan.fooo	453be8352a	chore: add ref (#2927 )	2023-07-03 11:14:45 +08:00
Kilu.He	452d7eb6d0	feat: support image block (#2912 )	2023-07-03 10:04:40 +08:00
Nathan.fooo vedon Lucas.Xu	f0d5f51703	fix: windows integration test (#2917 ) * fix：windows integration test * fix: load asset * fix: windows test * fix: test * test: refactor the folder test --------- Co-authored-by: vedon <vedon.fu@gmail.com> Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>	2023-07-02 23:37:30 +08:00
Lucas.Xu	2c513be305	chore: bump version 0.2.5 (#2924 )	2023-07-02 15:15:57 +08:00
Lucas.Xu	11d05b303d	feat: support inserting local image (#2913 )	2023-07-02 11:46:45 +08:00
Richard Shiue	c870dbeac4	test: add more cover integration tests (#2922 )	2023-07-01 23:13:09 +08:00
Richard ShiueandLucas.Xu	3acd36e580	test: fix calendar integration test #2919 (#2920 ) * test: fix calendar integration test #2919 * chore: update frontend/appflowy_flutter/integration_test/database_calendar_test.dart Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io> * test: fix date cell test --------- Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>	2023-07-01 20:29:49 +08:00
Aman Negi	95d4fb6865	feat: add outline block (#2750 )	2023-06-29 20:28:30 +08:00
Muhammad Rizwan	30b52a29fd	feat: support Inline page reference #2196 (#2898 )	2023-06-29 10:04:24 +08:00
Richard Shiue	a17d6b7eec	test: fix integration test (#2906 ) * test: fix calendar integration test * test: add comment for workaround	2023-06-28 22:11:50 +08:00
Kilu.He	18ed553296	feat: support equation block (#2903 )	2023-06-28 12:39:04 +08:00
Richard Shiue	7f74fd6149	refactor: cover node widget code (#2899 ) * chore: change initial cover type's name to none * chore: refactor cover node widget * chore: use a constant instead of magic value * fix: make the size of icon hover effect smaller * chore: improve appearance of selected color * test: add cover integration tests * fix: inner ring of selected color in dark mode * refactor: cover node to document header node * test: simplify tests * chore: rename files	2023-06-27 15:17:51 +08:00
LainHE	a3e09f6021	chore: update language zh-CN (#2900 )	2023-06-27 11:11:09 +08:00
Kilu.He	5e0a0f92ff	feat: support text equation (#2876 )	2023-06-27 10:44:06 +08:00
Alex Wallen	2a2b5fe246	[feat] Add actions to error widget. (#2865 ) * chore: rebase error? * fix: revert changes in Cargo.toml * feat: add actions row	2023-06-27 09:55:10 +08:00
rmri	f914e7aa33	chore: Update hu-HU.json (#2837 ) Fixed typos and added missing items in Hungarian translation.	2023-06-27 09:54:46 +08:00
Alex Wallen	386d3f2ba7	feat github redirect (#2867 ) * feat: add GitHub to question bubble * feat: translate to feedback	2023-06-27 09:53:38 +08:00
Nathan.fooo	88faa0f02a	feat: using cached view (#2877 )	2023-06-23 23:19:34 +08:00
				`@@ -0,0 +1 @@`
				<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" style="width: 16px; height: 16px; display: block; fill: inherit; flex-shrink: 0; backface-visibility: hidden;" width="30" height="30" ><path d="M6.04883 27.3232C7.24219 27.3232 7.86426 26.4854 8.20703 25.3936L13.9834 6.79492H27.5039C28.2275 6.79492 28.7227 6.35059 28.7227 5.65234C28.7227 4.97949 28.2275 4.53516 27.5039 4.53516H13.958C12.6631 4.53516 12.0791 5.01758 11.7363 6.13477L6.18848 24.3525H5.97266L3.58594 15.9355C3.38281 15.2373 3.00195 14.9072 2.40527 14.9072C1.73242 14.9072 1.2373 15.3896 1.2373 16.0117C1.2373 16.2656 1.30078 16.4941 1.35156 16.6846L4.04297 25.5332C4.36035 26.5615 4.93164 27.3232 6.04883 27.3232ZM16.3955 24.7334C16.8652 24.7334 17.1064 24.5684 17.4619 24.0732L20.4707 19.8203H20.5215L23.5049 24.0732C23.873 24.5684 24.1143 24.7334 24.5713 24.7334C25.2061 24.7334 25.6758 24.3018 25.6758 23.7051C25.6758 23.4258 25.6123 23.1973 25.4219 22.9561L21.9307 18.208L25.4473 13.4346C25.6377 13.168 25.7139 12.9395 25.7139 12.6855C25.7139 12.127 25.2568 11.6953 24.6475 11.6953C24.2031 11.6953 23.9365 11.8477 23.6064 12.3174L20.7246 16.5957H20.6611L17.6904 12.3047C17.373 11.8477 17.0938 11.6953 16.624 11.6953C16.0146 11.6953 15.5068 12.165 15.5068 12.7363C15.5068 13.0537 15.583 13.2568 15.8115 13.5488L19.1504 18.1445L15.6084 23.0322C15.418 23.2861 15.3672 23.4639 15.3672 23.7559C15.3672 24.3018 15.8115 24.7334 16.3955 24.7334Z" fill="#2F3030"></path></svg>