Merge branch 'main' into feat/board_ui_temp

2024-08-30 18:12:39 +00:00 · 2022-08-04 23:33:39 +08:00 · 2022-08-04 23:33:39 +08:00 · 20f34dc952
commit 20f34dc952
parent 146cc5c5e9 398a86bbfd
348 changed files with 17117 additions and 1203 deletions
--- a/.githooks/commit-msg
+++ b/.githooks/commit-msg
@ -6,7 +6,24 @@
 # status after issuing an appropriate message if it wants to stop the
 # commit.  The hook is allowed to edit the commit message file.

-echo "Running the AppFlowy commit-msg hook."
+YELLOW="\e[93m"
+GREEN="\e[32m"
+RED="\e[31m"
+ENDCOLOR="\e[0m"
+
+printMessage() {
+   printf "${YELLOW}AppFlowy : $1${ENDCOLOR}\n"
+}
+
+printSuccess() {
+   printf "${GREEN}AppFlowy : $1${ENDCOLOR}\n"
+}
+
+printError() {
+   printf "${RED}AppFlowy : $1${ENDCOLOR}\n"
+}
+
+printMessage "Running the AppFlowy commit-msg hook."

 # This example catches duplicate Signed-off-by lines.

@ -16,11 +33,19 @@ test "" = "$(grep '^Signed-off-by: ' "$1" |
 	exit 1
 }

-npx --no -- commitlint --edit $1
+.githooks/gitlint \
+	 --msg-file=$1 \
+	 --subject-regex="^(build|chore|ci|docs|feat|feature|fix|perf|refactor|revert|style|test)(.*)?:\s?.*" \
+    --subject-maxlen=100 \
+    --subject-minlen=10 \
+    --body-regex=".*" \
+    --body-maxlen=200 \
+    --max-parents=1

 if [ $? -ne 0 ]
 then
-    echo "Please fix your commit message to match AppFlowy coding standards"
+    printError "Please fix your commit message to match AppFlowy coding standards"
+    printError "https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/software-contributions/submitting-code/style-guides"
    exit 1
 fi

--- a/.githooks/pre-commit
+++ b/.githooks/pre-commit
@ -1,6 +1,23 @@
 #!/usr/bin/env bash

-echo "Running local AppFlowy pre-commit hook."
+YELLOW="\e[93m"
+GREEN="\e[32m"
+RED="\e[31m"
+ENDCOLOR="\e[0m"
+
+printMessage() {
+   printf "${YELLOW}AppFlowy : $1${ENDCOLOR}\n"
+}
+
+printSuccess() {
+   printf "${GREEN}AppFlowy : $1${ENDCOLOR}\n"
+}
+
+printError() {
+   printf "${RED}AppFlowy : $1${ENDCOLOR}\n"
+}
+
+printMessage "Running local AppFlowy pre-commit hook."

 #flutter format .
 ##https://gist.github.com/benmccallum/28e4f216d9d72f5965133e6c43aaff6e
--- a/.githooks/pre-push
+++ b/.githooks/pre-push
@ -1,26 +1,36 @@
 #!/usr/bin/env bash

-echo "Running local AppFlowy pre-push hook."
+YELLOW="\e[93m"
+GREEN="\e[32m"
+RED="\e[31m"
+ENDCOLOR="\e[0m"
+
+printMessage() {
+   printf "${YELLOW}AppFlowy : $1${ENDCOLOR}\n"
+}
+
+printSuccess() {
+   printf "${GREEN}AppFlowy : $1${ENDCOLOR}\n"
+}
+
+printError() {
+   printf "${RED}AppFlowy : $1${ENDCOLOR}\n"
+}
+
+printMessage "Running local AppFlowy pre-push hook."

 if [[ `git status --porcelain` ]]; then
-  printf "\e[31;1m%s\e[0m\n" 'This script needs to run against committed code only. Please commit or stash you changes.'
+  printError "This script needs to run against committed code only. Please commit or stash you changes."
  exit 1
 fi

-printf "\e[33;1m%s\e[0m\n" 'Running the Flutter analyzer'
-flutter analyze
-
-if [ $? -ne 0 ]; then
-  printf "\e[31;1m%s\e[0m\n" 'Flutter analyzer error'
-  exit 1
-fi
-
-printf "\e[33;1m%s\e[0m\n" 'Finished running the Flutter analyzer'
-printf "\e[33;1m%s\e[0m\n" 'Running unit tests'
-
-#flutter test
+#
+#printMessage "Running the Flutter analyzer"
+#flutter analyze
+#
 #if [ $? -ne 0 ]; then
-#  printf "\e[31;1m%s\e[0m\n" 'Unit tests error'
+#  printError "Flutter analyzer error"
 #  exit 1
 #fi
-#printf "\e[33;1m%s\e[0m\n" 'Finished running unit tests'
+#
+#printMessage "Finished running the Flutter analyzer"
--- a/.github/workflows/dart_test.yml
+++ b/.github/workflows/dart_test.yml
@ -8,6 +8,7 @@ on:
  pull_request:
    branches:
      - 'main'
+      - 'feat/flowy_editor'

 env:
  CARGO_TERM_COLOR: always
@ -71,3 +72,8 @@ jobs:
          flutter pub get
          flutter test

+      - name: Run FlowyEditor tests
+        working-directory: frontend/app_flowy/packages/flowy_editor
+        run: |
+          flutter pub get
+          flutter test
--- a/.github/workflows/rust_lint.yml
+++ b/.github/workflows/rust_lint.yml
@ -17,9 +17,13 @@ jobs:
    steps:
      - uses: actions/checkout@v2
      - uses: actions-rs/toolchain@v1
-      with:
-        toolchain: 'stable-2022-01-20'
-        override: true
+        with:
+          toolchain: 'stable-2022-01-20'
+          override: true
+      - uses: subosito/flutter-action@v1
+        with:
+          flutter-version: '3.0.0'
+          channel: "stable"

      - name: Rust Deps
        working-directory: frontend
@ -40,7 +44,7 @@ jobs:


      - run: rustup component add clippy
-          working-directory: frontend/rust-lib
+        working-directory: frontend/rust-lib
      - name: clippy
        run: cargo clippy --no-default-features
        working-directory: frontend/rust-lib
--- a/.github/workflows/translation_notify.yml
+++ b/.github/workflows/translation_notify.yml
@ -4,15 +4,12 @@ on:
    branches: [ main ]
    paths:
      - "frontend/app_flowy/assets/translations/en.json"
-  pull_request:
-    branches: [ main ]
-    paths:
-      - "frontend/app_flowy/assets/translations/en.json"
+
 jobs:
  Discord-Notify:
    runs-on: ubuntu-latest
    steps:
-      - uses: Ilshidur/action-discord@0.3.2
+      - uses: Ilshidur/action-discord@master
        env:
          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
        with:
--- a/.gitignore
+++ b/.gitignore
@ -32,3 +32,7 @@ frontend/.vscode/*
 # Commit the highest level pubspec.lock, but ignore the others
 pubspec.lock
 !frontend/app_flowy/pubspec.lock
+
+# ignore tool used for commit linting
+.githooks/gitlint
+.githooks/gitlint.exe
--- a/README.md
+++ b/README.md
@ -38,14 +38,15 @@ Please view the [documentation](https://appflowy.gitbook.io/docs/essential-docum

 ## Stay Up-to-Date

-<p align="center"><img src="https://github.com/AppFlowy-IO/appflowy/blob/main/doc/imgs/howtostar.gif" alt="AppFlowy Github" width="1000px" /></p>
+<p align="center"><img src="https://github.com/AppFlowy-IO/appflowy/blob/main/doc/imgs/howtostar.gif" alt="AppFlowy Github - how to star the repo" width="100%" /></p>

 ## Getting Started with development
 Please view the [documentation](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy) for OS specific development instructions

 ## Roadmap

-[AppFlowy Roadmap](https://trello.com/b/NCyXCXXh/appflowy-roadmap)
+- [AppFlowy Roadmap ReadMe](https://appflowy.gitbook.io/docs/essential-documentation/roadmap)
+- [AppFlowy Public Roadmap](https://github.com/orgs/AppFlowy-IO/projects/5/views/12)

 If you'd like to propose a feature, submit an issue [here](https://github.com/AppFlowy-IO/appflowy/issues).

--- a/ROADMAP.md
+++ b/ROADMAP.md
@ -0,0 +1,3 @@
+## Our [roadmap](https://github.com/orgs/AppFlowy-IO/projects/5/views/12) is where you can learn about the features we’re working on, their status, when we expect to release them, and how you can help us. 
+
+## Find more information about how to use our official AppFlowy public roadmap on [Gitbook](https://appflowy.gitbook.io/docs/essential-documentation/roadmap).
--- a/commitlint.config.js
+++ b/commitlint.config.js
@ -22,3 +22,4 @@ module.exports = {
        'footer-max-line-length': [2, 'always', 100]
    },
 };
+
--- a/doc/roadmap.md
+++ b/doc/roadmap.md
@ -1 +1,3 @@
-https://trello.com/b/NCyXCXXh/appflowy-roadmap
+[AppFlowy Roadmap ReadMe](https://appflowy.gitbook.io/docs/essential-documentation/roadmap)
+
+[AppFlowy Public Roadmap](https://github.com/orgs/AppFlowy-IO/projects/5/views/12)
--- a/frontend/.vscode/settings.json
+++ b/frontend/.vscode/settings.json
@ -2,23 +2,21 @@
    "[dart]": {
        "editor.formatOnSave": true,
        "editor.formatOnType": true,
-        "editor.rulers": [
-            120
-        ],
+        "editor.rulers": [80],
        "editor.selectionHighlight": false,
        "editor.suggest.snippetsPreventQuickSuggestions": false,
        "editor.suggestSelection": "first",
        "editor.tabCompletion": "onlySnippets",
-        "editor.wordBasedSuggestions": false
+        "editor.wordBasedSuggestions": false,
    },
    "svgviewer.enableautopreview": true,
    "svgviewer.previewcolumn": "Active",
    "svgviewer.showzoominout": true,
-    "editor.wordWrapColumn": 120,
+    "editor.wordWrapColumn": 80,
    "editor.minimap.maxColumn": 140,
    "prettier.printWidth": 140,
    "editor.wordWrap": "wordWrapColumn",
-    "dart.lineLength": 120,
+    "dart.lineLength": 80,
    "files.associations": {
        "*.log.*": "log"
    },
--- a/frontend/Makefile.toml
+++ b/frontend/Makefile.toml
@ -8,7 +8,6 @@ extend = [
    { path = "scripts/makefile/env.toml" },
    { path = "scripts/makefile/flutter.toml" },
    { path = "scripts/makefile/tool.toml" },
-    { path = "scripts/makefile/githooks.toml" },
 ]

 [config]
--- a/frontend/app_flowy/.gitignore
+++ b/frontend/app_flowy/.gitignore
@ -64,4 +64,5 @@ windows/flutter/dart_ffi/
 **/**/*.dll
 **/**/*.so
 **/**/Brewfile.lock.json
-**/.sandbox
+**/.sandbox
+**/.vscode/
--- a/frontend/app_flowy/assets/translations/en.json
+++ b/frontend/app_flowy/assets/translations/en.json
@ -141,6 +141,7 @@
    "menu": {
      "appearance": "Appearance",
      "language": "Language",
+      "user": "User",
      "open": "Open Settings"
    },
    "appearance": {
@ -172,8 +173,8 @@
      "includeTime": " Include time",
      "dateFormatFriendly": "Month Day,Year",
      "dateFormatISO": "Year-Month-Day",
-      "dateFormatLocal": "Month/Month/Day",
-      "dateFormatUS": "Month/Month/Day",
+      "dateFormatLocal": "Year/Month/Day",
+      "dateFormatUS": "Year/Month/Day",
      "timeFormat": " Time format",
      "invalidTimeFormat": "Invalid format",
      "timeFormatTwelveHour": "12 hour",
@ -214,4 +215,4 @@
      "timeHintTextInTwentyFourHour": "12:00"
    }
  }
-}
+}
--- a/frontend/app_flowy/assets/translations/es-VE.json
+++ b/frontend/app_flowy/assets/translations/es-VE.json
@ -96,6 +96,12 @@
    "lightMode": "Cambiar a modo Claro",
    "darkMode": "Cambiar a modo Oscuro"
  },
+  "notifications": {
+    "export": {
+      "markdown": "Nota exportada a Markdown",
+      "path": "Documentos/flowy"
+    }
+  },
  "contactsPage": {
    "title": "Contactos",
    "whatsHappening": "¿Qué está pasando esta semana?",
@ -120,13 +126,13 @@
  "oAuth": {
    "err": {
      "failedTitle": "Imposible conectarse con sus credenciales.",
-      "failedMsg": "Por favor asegurese haber completado el proceso de ingreso en su buscador."
+      "failedMsg": "Por favor asegurese haber completado el proceso de ingreso en su navegador."
    },
    "google": {
      "title": "Ingresar con Google",
-      "instruction1": "Para importar sus contactos de Google, debe autorizar esta aplicación usando su buscador web.",
+      "instruction1": "Para importar sus contactos de Google, debe autorizar esta aplicación usando su navegador web.",
      "instruction2": "Copie este código al presionar el icono o al seleccionar el texto:",
-      "instruction3": "Navege al siguiente enlace en su buscador web, e ingrese el código anterior:",
+      "instruction3": "Navege al siguiente enlace en su navegador web, e ingrese el código anterior:",
      "instruction4": "Presione el botón de abajo cuando haya completado su registro:"
    }
  },
@ -141,5 +147,71 @@
      "lightLabel": "Modo Claro",
      "darkLabel": "Modo Oscuro"
    }
+  },
+  "grid": {
+    "settings": {
+      "filter": "Filtrar",
+      "sortBy": "Ordenar por",
+      "Properties": "Propiedades"
+    },
+    "field": {
+      "hide": "Ocultar",
+      "insertLeft": "Insertar a la Izquierda",
+      "insertRight": "Insertar a la Derecha",
+      "duplicate": "Duplicar",
+      "delete": "Eliminar",
+      "textFieldName": "Texto",
+      "checkboxFieldName": "Casilla de verificación",
+      "dateFieldName": "Fecha",
+      "numberFieldName": "Números",
+      "singleSelectFieldName": "Seleccionar",
+      "multiSelectFieldName": "Selección múltiple",
+      "urlFieldName": "URL",
+      "numberFormat": " Formato numérico",
+      "dateFormat": " Formato de fecha",
+      "includeTime": " Incluir tiempo",
+      "dateFormatFriendly": "Mes Día, Año",
+      "dateFormatISO": "Año-Mes-Día",
+      "dateFormatLocal": "Año/Mes/Día",
+      "dateFormatUS": "Año/Mes/Día",
+      "timeFormat": " Time format",
+      "invalidTimeFormat": "Formato de tiempo",
+      "timeFormatTwelveHour": "12 horas",
+      "timeFormatTwentyFourHour": "24 horas",
+      "addSelectOption": "Añadir una opción",
+      "optionTitle": "Opciones",
+      "addOption": "Añadir opción",
+      "editProperty": "Editar propiedad"
+    },
+    "row": {
+      "duplicate": "Duplicar",
+      "delete": "Eliminar",
+      "textPlaceholder": "Vacío",
+      "copyProperty": "Propiedad copiada al portapapeles"
+    },
+    "selectOption": {
+      "create": "Crear",
+      "purpleColor": "Morado",
+      "pinkColor": "Rosa",
+      "lightPinkColor": "Rosa Claro",
+      "orangeColor": "Naranja",
+      "yellowColor": "Amarillo",
+      "limeColor": "Lima",
+      "greenColor": "Verde",
+      "aquaColor": "Agua",
+      "blueColor": "Azul",
+      "deleteTag": "Borrar etiqueta",
+      "colorPannelTitle": "Colores",
+      "pannelTitle": "Selecciona una opción o crea una",
+      "searchOption": "Buscar una opción"
+    },
+    "menuName": "Grid"
+  },
+  "document": {
+    "menuName": "Doc",
+    "date": {
+      "timeHintTextInTwelveHour": "12:00 AM",
+      "timeHintTextInTwentyFourHour": "12:00"
+    }
  }
 }
--- a/frontend/app_flowy/assets/translations/fr-FR.json
+++ b/frontend/app_flowy/assets/translations/fr-FR.json
@ -68,7 +68,7 @@
    "help": "Aide et Support",
    "debug": {
      "name": "Informations de Débogage",
-      "success": "Informations de Débogage copiées dans le presse-papiers!",
+      "success": "Informations de Débogage copiées dans le presse-papiers !",
      "fail": "Impossible de copier les informations de Débogage dans le presse-papiers"
    }
  },
--- a/frontend/app_flowy/assets/translations/id-ID.json
+++ b/frontend/app_flowy/assets/translations/id-ID.json
@ -0,0 +1,218 @@
+{
+  "appName": "AppFlowy",
+  "defaultUsername": "Saya",
+  "welcomeText": "Selamat datang di @:appName",
+  "githubStarText": "Bintangi GitHub",
+  "subscribeNewsletterText": "Berlangganan buletin",
+  "letsGoButtonText": "Ayo",
+  "title": "Judul",
+  "signUp": {
+    "buttonText": "Daftar",
+    "title": "Daftar ke @:appName",
+    "getStartedText": "Mulai",
+    "emptyPasswordError": "Sandi tidak boleh kosong",
+    "repeatPasswordEmptyError": "Sandi ulang tidak boleh kosong",
+    "unmatchedPasswordError": "Sandi ulang tidak sama dengan sandi",
+    "alreadyHaveAnAccount": "Sudah punya akun?",
+    "emailHint": "Email",
+    "passwordHint": "Sandi",
+    "repeatPasswordHint": "Sandi ulang"
+  },
+  "signIn": {
+    "loginTitle": "Masuk ke @:appName",
+    "loginButtonText": "Masuk",
+    "buttonText": "Masuk",
+    "forgotPassword": "Lupa Sandi?",
+    "emailHint": "Email",
+    "passwordHint": "Sandi",
+    "dontHaveAnAccount": "Belum punya akun?",
+    "repeatPasswordEmptyError": "Sandi ulang tidak boleh kosong",
+    "unmatchedPasswordError": "Sandi ulang tidak sama dengan sandi"
+  },
+  "workspace": {
+    "create": "Buat workspace",
+    "hint": "workspace",
+    "notFoundError": "Workspace tidak ditemukan"
+  },
+  "shareAction": {
+    "buttonText": "Bagikan",
+    "workInProgress": "Segera",
+    "markdown": "Markdown",
+    "copyLink": "Salin tautan"
+  },
+  "disclosureAction": {
+    "rename": "Ganti nama",
+    "delete": "Hapus",
+    "duplicate": "Duplikat"
+  },
+  "blankPageTitle": "Halaman kosong",
+  "newPageText": "Halaman baru",
+  "trash": {
+    "text": "Sampah",
+    "restoreAll": "Pulihkan Semua",
+    "deleteAll": "Hapus semua",
+    "pageHeader": {
+      "fileName": "Nama file",
+      "lastModified": "Terakhir diubah",
+      "created": "Dibuat"
+    }
+  },
+  "deletePagePrompt": {
+    "text": "Halaman ini di tempat sampah",
+    "restore": "Pulihkan halaman",
+    "deletePermanent": "Hapus secara permanen"
+  },
+  "dialogCreatePageNameHint": "Nama halaman",
+  "questionBubble": {
+    "whatsNew": "Apa yang baru?",
+    "help": "Bantuan & Dukungan",
+    "debug": {
+      "name": "Info debug",
+      "success": "Info debug disalin ke papan klip!",
+      "fail": "Tidak dapat menyalin info debug ke papan klip"
+    }
+  },
+  "menuAppHeader": {
+    "addPageTooltip": "Menambahkan halaman di dalam dengan cepat",
+    "defaultNewPageName": "Tanpa Judul",
+    "renameDialog": "Ganti nama"
+  },
+  "toolbar": {
+    "undo": "Undo",
+    "redo": "Redo",
+    "bold": "Tebal",
+    "italic": "Miring",
+    "underline": "Garis bawah",
+    "strike": "Dicoret",
+    "numList": "Daftar bernomor",
+    "bulletList": "Daftar berpoin",
+    "checkList": "Daftar periksa",
+    "inlineCode": "Kode sebaris",
+    "quote": "Blok kutipan",
+    "header": "Tajuk",
+    "highlight": "Sorotan"
+  },
+  "tooltip": {
+    "lightMode": "Ganti mode terang",
+    "darkMode": "Ganti mode gelap"
+  },
+  "notifications": {
+    "export": {
+      "markdown": "Mengekspor Catatan ke Markdown",
+      "path": "Documents/flowy"
+    }
+  },
+  "contactsPage": {
+    "title": "Kontak",
+    "whatsHappening": "Apa yang terjadi minggu ini?",
+    "addContact": "Tambahkan Kontak",
+    "editContact": "Ubah Kontak"
+  },
+  "button": {
+    "OK": "Ya",
+    "Cancel": "Batal",
+    "signIn": "Masuk",
+    "signOut": "Keluar",
+    "complete": "Selesai",
+    "save": "Simpan"
+  },
+  "label": {
+    "welcome": "Selamat datang!",
+    "firstName": "Nama Depan",
+    "middleName": "Nama Tengah",
+    "lastName": "Nama Akhir",
+    "stepX": "Langkah {X}"
+  },
+  "oAuth": {
+    "err": {
+      "failedTitle": "Tidak dapat terhubung ke akun anda",
+      "failedMsg": "Mohon pastikan anda menyelesaikan proses pendaftaran pada browser anda."
+    },
+    "google": {
+      "title": "MASUK GOOGLE",
+      "instruction1": "Untuk mengimpor kontak Google Contacts anda, anda harus mengizinkan aplikasi ini menggunakan browser web anda.",
+      "instruction2": "Salin kode ini ke papan klip anda dengan cara mengklik ikon atau memilih teks:",
+      "instruction3": "Arahkan ke tautan berikut di browser web Anda, dan masukkan kode di atas:",
+      "instruction4": "Tekan tombol di bawah ini setelah Anda menyelesaikan pendaftaran:"
+    }
+  },
+  "settings": {
+    "title": "Pengaturan",
+    "menu": {
+      "appearance": "Tampilan",
+      "language": "Bahasa",
+      "user": "Pengguna",
+      "open": "Buka Pengaturan"
+    },
+    "appearance": {
+      "lightLabel": "Mode Terang",
+      "darkLabel": "Mode Gelap"
+    }
+  },
+  "grid": {
+    "settings": {
+      "filter": "Filter",
+      "sortBy": "Sortir dengan",
+      "Properties": "Properti"
+    },
+    "field": {
+      "hide": "Sembunyikan",
+      "insertLeft": "Sisipkan Kiri",
+      "insertRight": "Sisipkan Kanan",
+      "duplicate": "Duplikasi",
+      "delete": "Hapus",
+      "textFieldName": "Teks",
+      "checkboxFieldName": "Kotak Centang",
+      "dateFieldName": "Tanggal",
+      "numberFieldName": "Angka",
+      "singleSelectFieldName": "seleksi",
+      "multiSelectFieldName": "Multi seleksi",
+      "urlFieldName": "URL",
+      "numberFormat": " Format angka",
+      "dateFormat": " Format tanggal",
+      "includeTime": " Sertakan waktu",
+      "dateFormatFriendly": "Bulan Hari,Tahun",
+      "dateFormatISO": "Tahun-Bulan-Hari",
+      "dateFormatLocal": "Tahun/Bulan/Hari",
+      "dateFormatUS": "Tahun/Bulan/Hari",
+      "timeFormat": " Format waktu",
+      "invalidTimeFormat": "Format yang tidak valid",
+      "timeFormatTwelveHour": "12 jam",
+      "timeFormatTwentyFourHour": "24 jam",
+      "addSelectOption": "Tambahkan opsi",
+      "optionTitle": "Opsi",
+      "addOption": "Tambahkan opsi",
+      "editProperty": "Ubah properti"
+    },
+    "row": {
+      "duplicate": "Duplikasi",
+      "delete": "Hapus",
+      "textPlaceholder": "Kosong",
+      "copyProperty": "Salin properti ke papan klip"
+    },
+    "selectOption": {
+      "create": "Buat",
+      "purpleColor": "Ungu",
+      "pinkColor": "Merah Jambu",
+      "lightPinkColor": "Merah Jambu Muda",
+      "orangeColor": "Oranye",
+      "yellowColor": "Kuning",
+      "limeColor": "Limau",
+      "greenColor": "Hijau",
+      "aquaColor": "Air",
+      "blueColor": "Biru",
+      "deleteTag": "Hapus tag",
+      "colorPannelTitle": "Warna",
+      "pannelTitle": "Pilih opsi atau buat baru",
+      "searchOption": "Cari opsi"
+    },
+    "menuName": "Grid"
+  },
+  "document": {
+    "menuName": "Doc",
+    "date": {
+      "timeHintTextInTwelveHour": "12:00 AM",
+      "timeHintTextInTwentyFourHour": "12:00"
+    }
+  }
+}
--- a/frontend/app_flowy/assets/translations/pl-PL.json
+++ b/frontend/app_flowy/assets/translations/pl-PL.json
@ -0,0 +1,145 @@
+{
+  "appName": "AppFlowy",
+  "defaultUsername": "Ja",
+  "welcomeText": "Witaj w @:appName",
+  "githubStarText": "Gwiazdka na GitHub-ie",
+  "subscribeNewsletterText": "Zapisz się do naszego Newslettera",
+  "letsGoButtonText": "Start!",
+  "title": "Tytuł",
+  "signUp": {
+    "buttonText": "Zarejestruj",
+    "title": "Zarejestruj się w @:appName",
+    "getStartedText": "Zaczynamy",
+    "emptyPasswordError": "Hasło nie moze być puste",
+    "repeatPasswordEmptyError": "Powtórzone hasło nie moze być puste",
+    "unmatchedPasswordError": "Hasła nie są takie same",
+    "alreadyHaveAnAccount": "Masz juz konto?",
+    "emailHint": "Email",
+    "passwordHint": "Hasło",
+    "repeatPasswordHint": "Powtórz hasło"
+  },
+  "signIn": {
+    "loginTitle": "Zaloguj do @:appName",
+    "loginButtonText": "Logowanie",
+    "buttonText": "Zaloguj",
+    "forgotPassword": "Zapomniałem hasła?",
+    "emailHint": "Email",
+    "passwordHint": "Password",
+    "dontHaveAnAccount": "Nie masz konta?",
+    "repeatPasswordEmptyError": "Powtórzone hasło nie moze być puste",
+    "unmatchedPasswordError": "Hasła nie są takie same"
+  },
+  "workspace": {
+    "create": "Utwórz przestrzeń",
+    "hint": "przestrzeń robocza",
+    "notFoundError": "Przestrzeni nie znaleziono"
+  },
+  "shareAction": {
+    "buttonText": "Udostępnij",
+    "workInProgress": "Wkrótce",
+    "markdown": "Markdown",
+    "copyLink": "Skopiuj link"
+  },
+  "disclosureAction": {
+    "rename": "Zmień nazwę",
+    "delete": "Usuń",
+    "duplicate": "Duplikuj"
+  },
+  "blankPageTitle": "Pusta strona",
+  "newPageText": "Nowa strona",
+  "trash": {
+    "text": "Kosz",
+    "restoreAll": "Przywróć Wszystko",
+    "deleteAll": "Usuń Wszystko",
+    "pageHeader": {
+      "fileName": "Nazwa Pliku",
+      "lastModified": "Ostatnio Zmodyfikowano",
+      "created": "Utworzono"
+    }
+  },
+  "deletePagePrompt": {
+    "text": "Ta strona jest w Koszu",
+    "restore": "Przywróć strone",
+    "deletePermanent": "Usuń bezpowrotnie"
+  },
+  "dialogCreatePageNameHint": "Nazwa Strony",
+  "questionBubble": {
+    "whatsNew": "What's new?",
+    "help": "Pomoc & Wsparcie",
+    "debug": {
+      "name": "Informacje Debugowania",
+      "success": "Skopiowano informacje debugowania do schowka!",
+      "fail": "Nie mozna skopiować informacji debugowania do schowka"
+    }
+  },
+  "menuAppHeader": {
+    "addPageTooltip": "Szybko dodaj stronę do środka",
+    "defaultNewPageName": "Brak tytułu",
+    "renameDialog": "Zmień nazwę"
+  },
+  "toolbar": {
+    "undo": "Cofnij",
+    "redo": "Powtórz",
+    "bold": "Pogrubiony",
+    "italic": "Kursywa",
+    "underline": "Podkreśl",
+    "strike": "Przekreśl",
+    "numList": "Lista Numerowana",
+    "bulletList": "Lista Punktowana",
+    "checkList": "Lista Kontrolna",
+    "inlineCode": "Kod Wbudowany",
+    "quote": "Blok cytat",
+    "header": "Nagłówek",
+    "highlight": "Podświetl"
+  },
+  "tooltip": {
+    "lightMode": "Przełącz w Tryb Jasny",
+    "darkMode": "Przełącz w Tryb Ciemny"
+  },
+  "contactsPage": {
+    "title": "Kontakty",
+    "whatsHappening": "Co się dzieje w tym tygodniu?",
+    "addContact": "Dodaj Kontakt",
+    "editContact": "Edytuj Kontakt"
+  },
+  "button": {
+    "OK": "OK",
+    "Cancel": "Anuluj",
+    "signIn": "Zaloguj",
+    "signOut": "Wyloguj",
+    "complete": "Zakończono",
+    "save": "Zapisz"
+  },
+  "label": {
+    "welcome": "Witaj!",
+    "firstName": "Imię Pierwsze",
+    "middleName": "Imię Drugie",
+    "lastName": "Nazwisko",
+    "stepX": "Krok {X}"
+  },
+  "oAuth": {
+    "err": {
+      "failedTitle": "Nie można połączyć się z Twoim kontem.",
+      "failedMsg": "Upewnij się, że zakończyłeś proces logowania w przeglądarce."
+    },
+    "google": {
+      "title": "LOGOWANIE GOOGLE",
+      "instruction1": "Aby zaimportować Kontakty Google, musisz autoryzować tę aplikację za pomocą przeglądarki internetowej.",
+      "instruction2": "Skopiuj ten kod do schowka, klikając ikonę lub zaznaczając tekst:",
+      "instruction3": "Przejdź do następującego linku w przeglądarce internetowej i wprowadź powyższy kod:",
+      "instruction4": "Naciśnij poniższy przycisk po zakończeniu rejestracji:"
+    }
+  },
+  "settings": {
+    "title": "Ustawienia",
+    "menu": {
+      "appearance": "Wygląd",
+      "language": "Język",
+      "open": "Otwórz Ustawienia"
+    },
+    "appearance": {
+      "lightLabel": "Tryb Jasny",
+      "darkLabel": "Tryb Ciemny"
+    }
+  }
+}
--- a/frontend/app_flowy/assets/translations/zh-TW.json
+++ b/frontend/app_flowy/assets/translations/zh-TW.json
@ -0,0 +1,218 @@
+{
+  "appName": "AppFlowy",
+  "defaultUsername": "我",
+  "welcomeText": "歡迎使用 @:appName",
+  "githubStarText": "在 GitHub 點星",
+  "subscribeNewsletterText": "訂閱電子報",
+  "letsGoButtonText": "出發吧",
+  "title": "標題",
+  "signUp": {
+    "buttonText": "註冊",
+    "title": "註冊 @:appName",
+    "getStartedText": "開始使用",
+    "emptyPasswordError": "密碼不能為空",
+    "repeatPasswordEmptyError": "確認密碼不能為空",
+    "unmatchedPasswordError": "確認密碼與密碼不符",
+    "alreadyHaveAnAccount": "已經有帳號了嗎？",
+    "emailHint": "電子郵件地址",
+    "passwordHint": "密碼",
+    "repeatPasswordHint": "確認密碼"
+  },
+  "signIn": {
+    "loginTitle": "登入 @:appName",
+    "loginButtonText": "登入",
+    "buttonText": "登入",
+    "forgotPassword": "忘記密碼？",
+    "emailHint": "電子郵件地址",
+    "passwordHint": "密碼",
+    "dontHaveAnAccount": "沒有帳號？",
+    "repeatPasswordEmptyError": "確認密碼不能為空",
+    "unmatchedPasswordError": "確認密碼與密碼不符"
+  },
+  "workspace": {
+    "create": "建立工作區",
+    "hint": "工作區",
+    "notFoundError": "找不到工作區"
+  },
+  "shareAction": {
+    "buttonText": "分享",
+    "workInProgress": "即將推出",
+    "markdown": "Markdown",
+    "copyLink": "複製連結"
+  },
+  "disclosureAction": {
+    "rename": "重新命名",
+    "delete": "刪除",
+    "duplicate": "複製"
+  },
+  "blankPageTitle": "空白頁面",
+  "newPageText": "新頁面",
+  "trash": {
+    "text": "垃圾筒",
+    "restoreAll": "全部復原",
+    "deleteAll": "全部刪除",
+    "pageHeader": {
+      "fileName": "檔案名稱",
+      "lastModified": "最後修改時間",
+      "created": "建立時間"
+    }
+  },
+  "deletePagePrompt": {
+    "text": "此頁面在垃圾筒中",
+    "restore": "復原頁面",
+    "deletePermanent": "永久刪除"
+  },
+  "dialogCreatePageNameHint": "頁面名稱",
+  "questionBubble": {
+    "whatsNew": "新功能",
+    "help": "幫助 & 支援",
+    "debug": {
+      "name": "除錯資訊",
+      "success": "已將除錯資訊複製至剪貼簿！",
+      "fail": "無法將除錯資訊複製至剪貼簿"
+    }
+  },
+  "menuAppHeader": {
+    "addPageTooltip": "快速新增頁面",
+    "defaultNewPageName": "未命名",
+    "renameDialog": "重新命名"
+  },
+  "toolbar": {
+    "undo": "復原",
+    "redo": "取消復原",
+    "bold": "粗體",
+    "italic": "斜體",
+    "underline": "底線",
+    "strike": "刪除線",
+    "numList": "有序清單",
+    "bulletList": "無序清單",
+    "checkList": "核取清單",
+    "inlineCode": "程式碼",
+    "quote": "區塊引言",
+    "header": "標題",
+    "highlight": "反白"
+  },
+  "tooltip": {
+    "lightMode": "切換至亮色模式",
+    "darkMode": "切換至暗色模式"
+  },
+  "notifications": {
+    "export": {
+      "markdown": "已將筆記匯出成 Markdown",
+      "path": "Documents/flowy"
+    }
+  },
+  "contactsPage": {
+    "title": "聯絡人",
+    "whatsHappening": "這周有甚麼新鮮事？",
+    "addContact": "新增聯絡人",
+    "editContact": "編輯聯絡人"
+  },
+  "button": {
+    "OK": "OK",
+    "Cancel": "取消",
+    "signIn": "登入",
+    "signOut": "登出",
+    "complete": "完成",
+    "save": "儲存"
+  },
+  "label": {
+    "welcome": "歡迎！",
+    "firstName": "名",
+    "middleName": "中間名",
+    "lastName": "姓",
+    "stepX": "步驟 {X}"
+  },
+  "oAuth": {
+    "err": {
+      "failedTitle": "無法連接至您的帳號。",
+      "failedMsg": "請確認您已在瀏覽器中完成登入程序："
+    },
+    "google": {
+      "title": "GOOGLE 登入",
+      "instruction1": "若要匯入您的 Google 聯絡人，您必須透過瀏覽器授權此應用程式：",
+      "instruction2": "點擊圖示或選取文字以複製代碼：",
+      "instruction3": "前往下列網址，並輸入上述代碼：",
+      "instruction4": "完成註冊後，請點擊下方按鈕："
+    }
+  },
+  "settings": {
+    "title": "設定",
+    "menu": {
+      "appearance": "外觀",
+      "language": "語言",
+      "user": "使用者",
+      "open": "開啟設定"
+    },
+    "appearance": {
+      "lightLabel": "亮色模式",
+      "darkLabel": "暗色模式"
+    }
+  },
+  "grid": {
+    "settings": {
+      "filter": "篩選",
+      "sortBy": "排序方式",
+      "Properties": "內容"
+    },
+    "field": {
+      "hide": "隱藏",
+      "insertLeft": "插入左方欄",
+      "insertRight": "插入右方欄",
+      "duplicate": "複製",
+      "delete": "刪除",
+      "textFieldName": "文字",
+      "checkboxFieldName": "核取方塊",
+      "dateFieldName": "日期",
+      "numberFieldName": "數字",
+      "singleSelectFieldName": "單選",
+      "multiSelectFieldName": "多選",
+      "urlFieldName": "網址",
+      "numberFormat": " 數字格式",
+      "dateFormat": " 日期格式",
+      "includeTime": " 包含時間",
+      "dateFormatFriendly": "月 日,年",
+      "dateFormatISO": "年-月-日",
+      "dateFormatLocal": "年/月/日",
+      "dateFormatUS": "年/月/日",
+      "timeFormat": " 時間格式",
+      "invalidTimeFormat": "格式無效",
+      "timeFormatTwelveHour": "12 小時",
+      "timeFormatTwentyFourHour": "24 小時",
+      "addSelectOption": "新增選項",
+      "optionTitle": "選項",
+      "addOption": "新增選項",
+      "editProperty": "編輯內容"
+    },
+    "row": {
+      "duplicate": "複製",
+      "delete": "刪除",
+      "textPlaceholder": "空",
+      "copyProperty": "已將內容複製至剪貼簿"
+    },
+    "selectOption": {
+      "create": "建立",
+      "purpleColor": "紫色",
+      "pinkColor": "粉色",
+      "lightPinkColor": "淡粉色",
+      "orangeColor": "橘色",
+      "yellowColor": "黃色",
+      "limeColor": "萊姆色",
+      "greenColor": "綠色",
+      "aquaColor": "水藍色",
+      "blueColor": "藍色",
+      "deleteTag": "刪除標籤",
+      "colorPannelTitle": "顏色",
+      "pannelTitle": "搜尋或建立選項",
+      "searchOption": "搜尋選項"
+    },
+    "menuName": "網格"
+  },
+  "document": {
+    "menuName": "檔案",
+    "date": {
+      "timeHintTextInTwelveHour": "12:00 AM",
+      "timeHintTextInTwentyFourHour": "12:00"
+    }
+  }
+}
--- a/frontend/app_flowy/lib/startup/deps_resolver.dart
+++ b/frontend/app_flowy/lib/startup/deps_resolver.dart
@ -5,10 +5,12 @@ import 'package:app_flowy/workspace/application/app/prelude.dart';
 import 'package:app_flowy/workspace/application/doc/prelude.dart';
 import 'package:app_flowy/workspace/application/grid/prelude.dart';
 import 'package:app_flowy/workspace/application/trash/prelude.dart';
+import 'package:app_flowy/workspace/application/user/prelude.dart';
 import 'package:app_flowy/workspace/application/workspace/prelude.dart';
 import 'package:app_flowy/workspace/application/edit_pannel/edit_pannel_bloc.dart';
 import 'package:app_flowy/workspace/application/view/prelude.dart';
 import 'package:app_flowy/workspace/application/menu/prelude.dart';
+import 'package:app_flowy/workspace/application/settings/prelude.dart';
 import 'package:app_flowy/user/application/prelude.dart';
 import 'package:app_flowy/user/presentation/router.dart';
 import 'package:app_flowy/workspace/presentation/home/home_stack.dart';
@ -101,6 +103,16 @@ void _resolveFolderDeps(GetIt getIt) {
    (user, _) => MenuUserBloc(user),
  );

+  //Settings
+  getIt.registerFactoryParam<SettingsDialogBloc, UserProfilePB, void>(
+    (user, _) => SettingsDialogBloc(user),
+  );
+
+  //User
+  getIt.registerFactoryParam<SettingsUserViewBloc, UserProfilePB, void>(
+    (user, _) => SettingsUserViewBloc(user),
+  );
+
  // AppPB
  getIt.registerFactoryParam<AppBloc, AppPB, void>(
    (app, _) => AppBloc(
--- a/frontend/app_flowy/lib/startup/tasks/app_widget.dart
+++ b/frontend/app_flowy/lib/startup/tasks/app_widget.dart
@ -36,8 +36,10 @@ class InitAppWidgetTask extends LaunchTask {
              Locale('fr', 'FR'),
              Locale('fr', 'CA'),
              Locale('hu', 'HU'),
+              Locale('id', 'ID'),
              Locale('it', 'IT'),
              Locale('ja', 'JP'),
+              Locale('pl', 'PL'),
              Locale('pt', 'BR'),
              Locale('ru', 'RU'),
              Locale('tr', 'TR'),
--- a/frontend/app_flowy/lib/workspace/application/grid/cell/cell_service/cell_data_persistence.dart
+++ b/frontend/app_flowy/lib/workspace/application/grid/cell/cell_service/cell_data_persistence.dart
@ -58,8 +58,8 @@ class DateCellDataPersistence implements IGridCellDataPersistence<CalendarData>
  }
 }

-GridCellIdentifierPayloadPB _makeCellIdPayload(GridCellIdentifier cellId) {
-  return GridCellIdentifierPayloadPB.create()
+GridCellIdPB _makeCellIdPayload(GridCellIdentifier cellId) {
+  return GridCellIdPB.create()
    ..gridId = cellId.gridId
    ..fieldId = cellId.fieldId
    ..rowId = cellId.rowId;
--- a/frontend/app_flowy/lib/workspace/application/grid/cell/cell_service/cell_service.dart
+++ b/frontend/app_flowy/lib/workspace/application/grid/cell/cell_service/cell_service.dart
@ -46,7 +46,7 @@ class CellService {
  Future<Either<GridCellPB, FlowyError>> getCell({
    required GridCellIdentifier cellId,
  }) {
-    final payload = GridCellIdentifierPayloadPB.create()
+    final payload = GridCellIdPB.create()
      ..gridId = cellId.gridId
      ..fieldId = cellId.fieldId
      ..rowId = cellId.rowId;
--- a/frontend/app_flowy/lib/workspace/application/grid/cell/select_option_service.dart
+++ b/frontend/app_flowy/lib/workspace/application/grid/cell/select_option_service.dart
@ -19,7 +19,7 @@ class SelectOptionService {
      (result) {
        return result.fold(
          (option) {
-            final cellIdentifier = GridCellIdentifierPayloadPB.create()
+            final cellIdentifier = GridCellIdPB.create()
              ..gridId = gridId
              ..fieldId = fieldId
              ..rowId = rowId;
@ -54,7 +54,7 @@ class SelectOptionService {
  }

  Future<Either<SelectOptionCellDataPB, FlowyError>> getOpitonContext() {
-    final payload = GridCellIdentifierPayloadPB.create()
+    final payload = GridCellIdPB.create()
      ..gridId = gridId
      ..fieldId = fieldId
      ..rowId = rowId;
@ -76,8 +76,8 @@ class SelectOptionService {
    return GridEventUpdateSelectOptionCell(payload).send();
  }

-  GridCellIdentifierPayloadPB _cellIdentifier() {
-    return GridCellIdentifierPayloadPB.create()
+  GridCellIdPB _cellIdentifier() {
+    return GridCellIdPB.create()
      ..gridId = gridId
      ..fieldId = fieldId
      ..rowId = rowId;
--- a/frontend/app_flowy/lib/workspace/application/grid/field/field_service.dart
+++ b/frontend/app_flowy/lib/workspace/application/grid/field/field_service.dart
@ -103,7 +103,7 @@ class FieldService {
  }

  Future<Either<Unit, FlowyError>> deleteField() {
-    final payload = GridFieldIdentifierPayloadPB.create()
+    final payload = DeleteFieldPayloadPB.create()
      ..gridId = gridId
      ..fieldId = fieldId;

@ -111,7 +111,7 @@ class FieldService {
  }

  Future<Either<Unit, FlowyError>> duplicateField() {
-    final payload = GridFieldIdentifierPayloadPB.create()
+    final payload = DuplicateFieldPayloadPB.create()
      ..gridId = gridId
      ..fieldId = fieldId;

@ -121,7 +121,7 @@ class FieldService {
  Future<Either<FieldTypeOptionDataPB, FlowyError>> getFieldTypeOptionData({
    required FieldType fieldType,
  }) {
-    final payload = EditFieldPayloadPB.create()
+    final payload = GridFieldTypeOptionIdPB.create()
      ..gridId = gridId
      ..fieldId = fieldId
      ..fieldType = fieldType;
@ -165,7 +165,7 @@ class NewFieldTypeOptionLoader extends IFieldTypeOptionLoader {

  @override
  Future<Either<FieldTypeOptionDataPB, FlowyError>> load() {
-    final payload = EditFieldPayloadPB.create()
+    final payload = CreateFieldPayloadPB.create()
      ..gridId = gridId
      ..fieldType = FieldType.RichText;

@ -185,7 +185,7 @@ class FieldTypeOptionLoader extends IFieldTypeOptionLoader {

  @override
  Future<Either<FieldTypeOptionDataPB, FlowyError>> load() {
-    final payload = EditFieldPayloadPB.create()
+    final payload = GridFieldTypeOptionIdPB.create()
      ..gridId = gridId
      ..fieldId = field.id
      ..fieldType = field.fieldType;
--- a/frontend/app_flowy/lib/workspace/application/grid/field/type_option/type_option_service.dart
+++ b/frontend/app_flowy/lib/workspace/application/grid/field/type_option/type_option_service.dart
@ -21,13 +21,10 @@ class TypeOptionService {
  Future<Either<SelectOptionPB, FlowyError>> newOption({
    required String name,
  }) {
-    final fieldIdentifier = GridFieldIdentifierPayloadPB.create()
-      ..gridId = gridId
-      ..fieldId = fieldId;
-
    final payload = CreateSelectOptionPayloadPB.create()
      ..optionName = name
-      ..fieldIdentifier = fieldIdentifier;
+      ..gridId = gridId
+      ..fieldId = fieldId;

    return GridEventNewSelectOption(payload).send();
  }
--- a/frontend/app_flowy/lib/workspace/application/grid/row/row_service.dart
+++ b/frontend/app_flowy/lib/workspace/application/grid/row/row_service.dart
@ -191,7 +191,7 @@ class GridRowCache {
  }

  Future<void> _loadRow(String rowId) async {
-    final payload = GridRowIdPayloadPB.create()
+    final payload = GridRowIdPB.create()
      ..gridId = gridId
      ..blockId = block.id
      ..rowId = rowId;
@ -297,7 +297,7 @@ class RowService {
  }

  Future<Either<OptionalRowPB, FlowyError>> getRow() {
-    final payload = GridRowIdPayloadPB.create()
+    final payload = GridRowIdPB.create()
      ..gridId = gridId
      ..blockId = blockId
      ..rowId = rowId;
@ -306,7 +306,7 @@ class RowService {
  }

  Future<Either<Unit, FlowyError>> deleteRow() {
-    final payload = GridRowIdPayloadPB.create()
+    final payload = GridRowIdPB.create()
      ..gridId = gridId
      ..blockId = blockId
      ..rowId = rowId;
@ -315,7 +315,7 @@ class RowService {
  }

  Future<Either<Unit, FlowyError>> duplicateRow() {
-    final payload = GridRowIdPayloadPB.create()
+    final payload = GridRowIdPB.create()
      ..gridId = gridId
      ..blockId = blockId
      ..rowId = rowId;
--- a/frontend/app_flowy/lib/workspace/application/home/home_bloc.dart
+++ b/frontend/app_flowy/lib/workspace/application/home/home_bloc.dart
@ -16,42 +16,48 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
  HomeBloc(UserProfilePB user, CurrentWorkspaceSettingPB workspaceSetting)
      : _listener = UserWorkspaceListener(userProfile: user),
        super(HomeState.initial(workspaceSetting)) {
-    on<HomeEvent>((event, emit) async {
-      await event.map(
-        initial: (_Initial value) {
-          _listener.start(
-            onAuthChanged: (result) => _authDidChanged(result),
-            onSettingUpdated: (result) {
-              result.fold(
-                (setting) => add(HomeEvent.didReceiveWorkspaceSetting(setting)),
-                (r) => Log.error(r),
-              );
-            },
-          );
-        },
-        showLoading: (e) async {
-          emit(state.copyWith(isLoading: e.isLoading));
-        },
-        setEditPannel: (e) async {
-          emit(state.copyWith(pannelContext: some(e.editContext)));
-        },
-        dismissEditPannel: (value) async {
-          emit(state.copyWith(pannelContext: none()));
-        },
-        forceCollapse: (e) async {
-          emit(state.copyWith(forceCollapse: e.forceCollapse));
-        },
-        didReceiveWorkspaceSetting: (_DidReceiveWorkspaceSetting value) {
-          emit(state.copyWith(workspaceSetting: value.setting));
-        },
-        unauthorized: (_Unauthorized value) {
-          emit(state.copyWith(unauthorized: true));
-        },
-        collapseMenu: (e) {
-          emit(state.copyWith(isMenuCollapsed: !state.isMenuCollapsed));
-        },
-      );
-    });
+    on<HomeEvent>(
+      (event, emit) async {
+        await event.map(
+          initial: (_Initial value) {
+            _listener.start(
+              onAuthChanged: (result) => _authDidChanged(result),
+              onSettingUpdated: (result) {
+                result.fold(
+                  (setting) => add(HomeEvent.didReceiveWorkspaceSetting(setting)),
+                  (r) => Log.error(r),
+                );
+              },
+            );
+          },
+          showLoading: (e) async {
+            emit(state.copyWith(isLoading: e.isLoading));
+          },
+          setEditPannel: (e) async {
+            emit(state.copyWith(pannelContext: some(e.editContext)));
+          },
+          dismissEditPannel: (value) async {
+            emit(state.copyWith(pannelContext: none()));
+          },
+          forceCollapse: (e) async {
+            emit(state.copyWith(forceCollapse: e.forceCollapse));
+          },
+          didReceiveWorkspaceSetting: (_DidReceiveWorkspaceSetting value) {
+            emit(state.copyWith(workspaceSetting: value.setting));
+          },
+          unauthorized: (_Unauthorized value) {
+            emit(state.copyWith(unauthorized: true));
+          },
+          collapseMenu: (e) {
+            emit(state.copyWith(isMenuCollapsed: !state.isMenuCollapsed));
+          },
+          editPannelResized: (e) {
+            final newOffset = (state.resizeOffset + e.offset).clamp(-50, 200).toDouble();
+            emit(state.copyWith(resizeOffset: newOffset));
+          },
+        );
+      },
+    );
  }

  @override
@ -79,6 +85,7 @@ class HomeEvent with _$HomeEvent {
  const factory HomeEvent.didReceiveWorkspaceSetting(CurrentWorkspaceSettingPB setting) = _DidReceiveWorkspaceSetting;
  const factory HomeEvent.unauthorized(String msg) = _Unauthorized;
  const factory HomeEvent.collapseMenu() = _CollapseMenu;
+  const factory HomeEvent.editPannelResized(double offset) = _EditPannelResized;
 }

@freezed
@ -90,6 +97,7 @@ class HomeState with _$HomeState {
    required CurrentWorkspaceSettingPB workspaceSetting,
    required bool unauthorized,
    required bool isMenuCollapsed,
+    required double resizeOffset,
  }) = _HomeState;

  factory HomeState.initial(CurrentWorkspaceSettingPB workspaceSetting) => HomeState(
@ -99,5 +107,6 @@ class HomeState with _$HomeState {
        workspaceSetting: workspaceSetting,
        unauthorized: false,
        isMenuCollapsed: false,
+        resizeOffset: 0,
      );
 }
--- a/frontend/app_flowy/lib/workspace/application/settings/prelude.dart
+++ b/frontend/app_flowy/lib/workspace/application/settings/prelude.dart
@ -0,0 +1 @@
+export 'settings_dialog_bloc.dart';
--- a/frontend/app_flowy/lib/workspace/application/settings/settings_dialog_bloc.dart
+++ b/frontend/app_flowy/lib/workspace/application/settings/settings_dialog_bloc.dart
@ -0,0 +1,67 @@
+import 'package:app_flowy/user/application/user_listener.dart';
+import 'package:flowy_sdk/log.dart';
+import 'package:flowy_sdk/protobuf/flowy-error/errors.pb.dart';
+import 'package:flowy_sdk/protobuf/flowy-user/user_profile.pb.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'package:dartz/dartz.dart';
+
+part 'settings_dialog_bloc.freezed.dart';
+
+class SettingsDialogBloc extends Bloc<SettingsDialogEvent, SettingsDialogState> {
+  final UserListener _userListener;
+  final UserProfilePB userProfile;
+
+  SettingsDialogBloc(this.userProfile)
+      : _userListener = UserListener(userProfile: userProfile),
+        super(SettingsDialogState.initial(userProfile)) {
+    on<SettingsDialogEvent>((event, emit) async {
+      await event.when(
+        initial: () async {
+          _userListener.start(onProfileUpdated: _profileUpdated);
+        },
+        didReceiveUserProfile: (UserProfilePB newUserProfile) {
+          emit(state.copyWith(userProfile: newUserProfile));
+        },
+        setViewIndex: (int viewIndex) {
+          emit(state.copyWith(viewIndex: viewIndex));
+        },
+      );
+    });
+  }
+
+  @override
+  Future<void> close() async {
+    await _userListener.stop();
+    super.close();
+  }
+
+  void _profileUpdated(Either<UserProfilePB, FlowyError> userProfileOrFailed) {
+    userProfileOrFailed.fold(
+      (newUserProfile) => add(SettingsDialogEvent.didReceiveUserProfile(newUserProfile)),
+      (err) => Log.error(err),
+    );
+  }
+}
+
+@freezed
+class SettingsDialogEvent with _$SettingsDialogEvent {
+  const factory SettingsDialogEvent.initial() = _Initial;
+  const factory SettingsDialogEvent.didReceiveUserProfile(UserProfilePB newUserProfile) = _DidReceiveUserProfile;
+  const factory SettingsDialogEvent.setViewIndex(int index) = _SetViewIndex;
+}
+
+@freezed
+class SettingsDialogState with _$SettingsDialogState {
+  const factory SettingsDialogState({
+    required UserProfilePB userProfile,
+    required Either<Unit, String> successOrFailure,
+    required int viewIndex,
+  }) = _SettingsDialogState;
+
+  factory SettingsDialogState.initial(UserProfilePB userProfile) => SettingsDialogState(
+        userProfile: userProfile,
+        successOrFailure: left(unit),
+        viewIndex: 0,
+      );
+}
--- a/frontend/app_flowy/lib/workspace/application/user/prelude.dart
+++ b/frontend/app_flowy/lib/workspace/application/user/prelude.dart
@ -0,0 +1 @@
+export 'settings_user_bloc.dart';
--- a/frontend/app_flowy/lib/workspace/application/user/settings_user_bloc.dart
+++ b/frontend/app_flowy/lib/workspace/application/user/settings_user_bloc.dart
@ -0,0 +1,79 @@
+import 'package:app_flowy/user/application/user_listener.dart';
+import 'package:app_flowy/user/application/user_service.dart';
+import 'package:flowy_sdk/log.dart';
+import 'package:flowy_sdk/protobuf/flowy-error/errors.pb.dart';
+import 'package:flowy_sdk/protobuf/flowy-user/user_profile.pb.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'package:dartz/dartz.dart';
+
+part 'settings_user_bloc.freezed.dart';
+
+class SettingsUserViewBloc extends Bloc<SettingsUserEvent, SettingsUserState> {
+  final UserService _userService;
+  final UserListener _userListener;
+  final UserProfilePB userProfile;
+
+  SettingsUserViewBloc(this.userProfile)
+      : _userListener = UserListener(userProfile: userProfile),
+        _userService = UserService(userId: userProfile.id),
+        super(SettingsUserState.initial(userProfile)) {
+    on<SettingsUserEvent>((event, emit) async {
+      await event.when(
+        initial: () async {
+          _userListener.start(onProfileUpdated: _profileUpdated);
+          await _initUser();
+        },
+        didReceiveUserProfile: (UserProfilePB newUserProfile) {
+          emit(state.copyWith(userProfile: newUserProfile));
+        },
+        updateUserName: (String name) {
+          _userService.updateUserProfile(name: name).then((result) {
+            result.fold(
+              (l) => null,
+              (err) => Log.error(err),
+            );
+          });
+        },
+      );
+    });
+  }
+
+  @override
+  Future<void> close() async {
+    await _userListener.stop();
+    super.close();
+  }
+
+  Future<void> _initUser() async {
+    final result = await _userService.initUser();
+    result.fold((l) => null, (error) => Log.error(error));
+  }
+
+  void _profileUpdated(Either<UserProfilePB, FlowyError> userProfileOrFailed) {
+    userProfileOrFailed.fold(
+      (newUserProfile) => add(SettingsUserEvent.didReceiveUserProfile(newUserProfile)),
+      (err) => Log.error(err),
+    );
+  }
+}
+
+@freezed
+class SettingsUserEvent with _$SettingsUserEvent {
+  const factory SettingsUserEvent.initial() = _Initial;
+  const factory SettingsUserEvent.updateUserName(String name) = _UpdateUserName;
+  const factory SettingsUserEvent.didReceiveUserProfile(UserProfilePB newUserProfile) = _DidReceiveUserProfile;
+}
+
+@freezed
+class SettingsUserState with _$SettingsUserState {
+  const factory SettingsUserState({
+    required UserProfilePB userProfile,
+    required Either<Unit, String> successOrFailure,
+  }) = _SettingsUserState;
+
+  factory SettingsUserState.initial(UserProfilePB userProfile) => SettingsUserState(
+        userProfile: userProfile,
+        successOrFailure: left(unit),
+      );
+}
--- a/frontend/app_flowy/lib/workspace/presentation/home/home_layout.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/home/home_layout.dart
@ -27,6 +27,8 @@ class HomeLayout {
      menuWidth = Sizes.sideBarLg;
    }

+    menuWidth += homeBlocState.resizeOffset;
+
    if (forceCollapse) {
      showMenu = false;
    } else {
--- a/frontend/app_flowy/lib/workspace/presentation/home/home_screen.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/home/home_screen.dart
@ -7,6 +7,7 @@ import 'package:flowy_sdk/log.dart';
 import 'package:flowy_infra_ui/style_widget/container.dart';
 import 'package:flowy_sdk/protobuf/flowy-user/protobuf.dart' show UserProfilePB;
 import 'package:flowy_sdk/protobuf/flowy-folder/protobuf.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:styled_widget/styled_widget.dart';
@ -87,6 +88,7 @@ class _HomeScreenState extends State<HomeScreen> {
          context: context,
          state: state,
        );
+        final homeMenuResizer = _buildHomeMenuResizer(context: context);
        final editPannel = _buildEditPannel(
          homeState: state,
          layout: layout,
@ -99,6 +101,7 @@ class _HomeScreenState extends State<HomeScreen> {
          homeMenu: menu,
          editPannel: editPannel,
          bubble: bubble,
+          homeMenuResizer: homeMenuResizer,
        );
      },
    );
@ -150,12 +153,31 @@ class _HomeScreenState extends State<HomeScreen> {
    );
  }

+  Widget _buildHomeMenuResizer({
+    required BuildContext context,
+  }) {
+    return MouseRegion(
+      cursor: SystemMouseCursors.resizeLeftRight,
+      child: GestureDetector(
+          dragStartBehavior: DragStartBehavior.down,
+          onPanUpdate: ((details) {
+            context.read<HomeBloc>().add(HomeEvent.editPannelResized(details.delta.dx));
+          }),
+          behavior: HitTestBehavior.translucent,
+          child: SizedBox(
+            width: 10,
+            height: MediaQuery.of(context).size.height,
+          )),
+    );
+  }
+
  Widget _layoutWidgets({
    required HomeLayout layout,
    required Widget homeMenu,
    required Widget homeStack,
    required Widget editPannel,
    required Widget bubble,
+    required Widget homeMenuResizer,
  }) {
    return Stack(
      children: [
@ -170,6 +192,7 @@ class _HomeScreenState extends State<HomeScreen> {
            .constrained(minWidth: 500)
            .positioned(left: layout.homePageLOffset, right: layout.homePageROffset, bottom: 0, top: 0, animate: true)
            .animate(layout.animDuration, Curves.easeOut),
+        homeMenuResizer.positioned(left: layout.homePageLOffset - 5),
        bubble
            .positioned(
              right: 20,
--- a/frontend/app_flowy/lib/workspace/presentation/home/menu/menu_user.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/home/menu/menu_user.dart
@ -67,6 +67,7 @@ class MenuUser extends StatelessWidget {

  Widget _renderSettingsButton(BuildContext context) {
    final theme = context.watch<AppTheme>();
+    final userProfile = context.read<MenuUserBloc>().state.userProfile;
    return Tooltip(
      message: LocaleKeys.settings_menu_open.tr(),
      child: IconButton(
@ -74,7 +75,7 @@ class MenuUser extends StatelessWidget {
          showDialog(
            context: context,
            builder: (context) {
-              return const SettingsDialog();
+              return SettingsDialog(userProfile);
            },
          );
        },
--- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/grid_page.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/grid_page.dart
@ -1,9 +1,11 @@
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/workspace/application/grid/grid_bloc.dart';
 import 'package:app_flowy/workspace/application/grid/row/row_service.dart';
+import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_scroll_bar.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_scrollview.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/error_page.dart';
 import 'package:flowy_sdk/protobuf/flowy-folder/view.pb.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@ -250,6 +252,8 @@ class _GridFooter extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
+    final rowCount = context.watch<GridBloc>().state.rowInfos.length;
+    final theme = context.watch<AppTheme>();
    return SliverPadding(
      padding: const EdgeInsets.only(bottom: 200),
      sliver: SliverToBoxAdapter(
@ -260,7 +264,14 @@ class _GridFooter extends StatelessWidget {
            child: Row(
              children: [
                SizedBox(width: GridSize.leadingHeaderPadding),
-                const SizedBox(width: 120, child: GridAddRowButton()),
+                Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children:  [
+                    const SizedBox(width: 120, child: GridAddRowButton()),
+                    const SizedBox(height: 30),
+                    _rowCountTextWidget(theme: theme,count: rowCount)
+                  ],
+                ),
              ],
            ),
          ),
@ -268,4 +279,19 @@ class _GridFooter extends StatelessWidget {
      ),
    );
  }
+
+  Widget _rowCountTextWidget({required AppTheme theme, required int count}){
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.start,
+      children: [
+        FlowyText.regular('Count : ',
+         fontSize: 13,
+         color: theme.shader3,
+        ),
+        FlowyText.regular(count.toString(),
+         fontSize: 13,
+        ),
+      ],
+    );
+  }
 }
--- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/layout/sizes.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/layout/sizes.dart
@ -5,7 +5,7 @@ class GridSize {

  static double get scrollBarSize => 12 * scale;
  static double get headerHeight => 40 * scale;
-  static double get footerHeight => 40 * scale;
+  static double get footerHeight => 100 * scale;
  static double get leadingHeaderPadding => 50 * scale;
  static double get trailHeaderPadding => 140 * scale;
  static double get headerContainerPadding => 0 * scale;
--- a/frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart
@ -1,70 +1,75 @@
+import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/workspace/application/appearance.dart';
 import 'package:app_flowy/workspace/presentation/settings/widgets/settings_appearance_view.dart';
 import 'package:app_flowy/workspace/presentation/settings/widgets/settings_language_view.dart';
+import 'package:app_flowy/workspace/presentation/settings/widgets/settings_user_view.dart';
 import 'package:app_flowy/workspace/presentation/settings/widgets/settings_menu.dart';
+import 'package:app_flowy/workspace/application/settings/settings_dialog_bloc.dart';
+import 'package:flowy_sdk/protobuf/flowy-user/user_profile.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:provider/provider.dart';

-class SettingsDialog extends StatefulWidget {
-  const SettingsDialog({Key? key}) : super(key: key);
+class SettingsDialog extends StatelessWidget {
+  final UserProfilePB user;
+  SettingsDialog(this.user, {Key? key}) : super(key: ValueKey(user.id));

-  @override
-  State<SettingsDialog> createState() => _SettingsDialogState();
-}
-
-class _SettingsDialogState extends State<SettingsDialog> {
-  int _selectedViewIndex = 0;
-
-  final List<Widget> settingsViews = const [
-    SettingsAppearanceView(),
-    SettingsLanguageView(),
-  ];
+  Widget getSettingsView(int index, UserProfilePB user) {
+    final List<Widget> settingsViews = [
+      const SettingsAppearanceView(),
+      const SettingsLanguageView(),
+      SettingsUserView(user),
+    ];
+    return settingsViews[index];
+  }

  @override
  Widget build(BuildContext context) {
-    return ChangeNotifierProvider.value(
-      value: Provider.of<AppearanceSettingModel>(context, listen: true),
-      child: AlertDialog(
-        shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(10),
-        ),
-        title: Text(
-          LocaleKeys.settings_title.tr(),
-          style: const TextStyle(
-            fontWeight: FontWeight.bold,
-          ),
-        ),
-        content: ConstrainedBox(
-          constraints: const BoxConstraints(
-            maxHeight: 600,
-            minWidth: 600,
-            maxWidth: 1000,
-          ),
-          child: Row(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              SizedBox(
-                width: 200,
-                child: SettingsMenu(
-                  changeSelectedIndex: (index) {
-                    setState(() {
-                      _selectedViewIndex = index;
-                    });
-                  },
-                  currentIndex: _selectedViewIndex,
-                ),
-              ),
-              const VerticalDivider(),
-              const SizedBox(width: 10),
-              Expanded(
-                child: settingsViews[_selectedViewIndex],
-              )
-            ],
-          ),
-        ),
-      ),
-    );
+    return BlocProvider<SettingsDialogBloc>(
+        create: (context) => getIt<SettingsDialogBloc>(param1: user)..add(const SettingsDialogEvent.initial()),
+        child: BlocBuilder<SettingsDialogBloc, SettingsDialogState>(
+            builder: (context, state) => ChangeNotifierProvider.value(
+                  value: Provider.of<AppearanceSettingModel>(context, listen: true),
+                  child: AlertDialog(
+                    shape: RoundedRectangleBorder(
+                      borderRadius: BorderRadius.circular(10),
+                    ),
+                    title: Text(
+                      LocaleKeys.settings_title.tr(),
+                      style: const TextStyle(
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                    content: ConstrainedBox(
+                      constraints: const BoxConstraints(
+                        maxHeight: 600,
+                        minWidth: 600,
+                        maxWidth: 1000,
+                      ),
+                      child: Row(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          SizedBox(
+                            width: 200,
+                            child: SettingsMenu(
+                              changeSelectedIndex: (index) {
+                                context.read<SettingsDialogBloc>().add(SettingsDialogEvent.setViewIndex(index));
+                              },
+                              currentIndex: context.read<SettingsDialogBloc>().state.viewIndex,
+                            ),
+                          ),
+                          const VerticalDivider(),
+                          const SizedBox(width: 10),
+                          Expanded(
+                            child: getSettingsView(context.read<SettingsDialogBloc>().state.viewIndex,
+                                context.read<SettingsDialogBloc>().state.userProfile),
+                          )
+                        ],
+                      ),
+                    ),
+                  ),
+                )));
  }
 }
--- a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
@ -1,10 +1,13 @@
 import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/workspace/application/appearance.dart';
+import 'package:app_flowy/workspace/presentation/widgets/toggle/toggle_style.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';

+import '../../widgets/toggle/toggle.dart';
+
 class SettingsAppearanceView extends StatelessWidget {
  const SettingsAppearanceView({Key? key}) : super(key: key);

@ -25,11 +28,12 @@ class SettingsAppearanceView extends StatelessWidget {
                  fontWeight: FontWeight.w500,
                ),
              ),
-              Switch(
+              Toggle(
                value: theme.isDark,
                onChanged: (val) {
                  context.read<AppearanceSettingModel>().swapTheme();
                },
+                style: ToggleStyle.big(theme),
              ),
              Text(
                LocaleKeys.settings_appearance_darkLabel.tr(),
--- a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_language_view.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_language_view.dart
@ -1,18 +1,37 @@
+import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/workspace/application/appearance.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flowy_infra/language.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:provider/provider.dart';

 class SettingsLanguageView extends StatelessWidget {
  const SettingsLanguageView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
-    return SingleChildScrollView(
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: const [LanguageSelectorDropdown()],
+    context.watch<AppTheme>();
+    return ChangeNotifierProvider.value(
+      value: Provider.of<AppearanceSettingModel>(context, listen: true),
+      child: SingleChildScrollView(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                Text(
+                  LocaleKeys.settings_menu_language.tr(),
+                  style: const TextStyle(
+                    fontSize: 14,
+                    fontWeight: FontWeight.w500,
+                  ),
+                ),
+                const LanguageSelectorDropdown(),
+              ],
+            ),
+          ],
+        ),
      ),
    );
  }
@ -28,22 +47,66 @@ class LanguageSelectorDropdown extends StatefulWidget {
 }

 class _LanguageSelectorDropdownState extends State<LanguageSelectorDropdown> {
+  Color currHoverColor = Colors.white.withOpacity(0.0);
+  late Color themedHoverColor;
+  void hoverExitLanguage() {
+    setState(() {
+      currHoverColor = Colors.white.withOpacity(0.0);
+    });
+  }
+
+  void hoverEnterLanguage() {
+    setState(() {
+      currHoverColor = themedHoverColor;
+    });
+  }
+
  @override
  Widget build(BuildContext context) {
-    return DropdownButton<Locale>(
-      value: context.read<AppearanceSettingModel>().locale,
-      onChanged: (val) {
-        setState(() {
-          context.read<AppearanceSettingModel>().setLocale(context, val!);
-        });
-      },
-      autofocus: true,
-      items: EasyLocalization.of(context)!.supportedLocales.map((locale) {
-        return DropdownMenuItem<Locale>(
-          value: locale,
-          child: Text(languageFromLocale(locale)),
-        );
-      }).toList(),
+    final theme = context.watch<AppTheme>();
+    themedHoverColor = theme.main2;
+
+    return MouseRegion(
+      onEnter: (event) => {hoverEnterLanguage()},
+      onExit: (event) => {hoverExitLanguage()},
+      child: Container(
+        margin: const EdgeInsets.only(left: 8, right: 8),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(8),
+          color: currHoverColor,
+        ),
+        child: DropdownButtonHideUnderline(
+          child: DropdownButton<Locale>(
+            value: context.read<AppearanceSettingModel>().locale,
+            onChanged: (val) {
+              setState(() {
+                context.read<AppearanceSettingModel>().setLocale(context, val!);
+              });
+            },
+            icon: const Visibility(
+              child: (Icon(Icons.arrow_downward)),
+              visible: false,
+            ),
+            borderRadius: BorderRadius.circular(8),
+            items: EasyLocalization.of(context)!.supportedLocales.map((locale) {
+              return DropdownMenuItem<Locale>(
+                value: locale,
+                child: Padding(
+                  padding: const EdgeInsets.all(12.0),
+                  child: Text(
+                    languageFromLocale(locale),
+                    style: TextStyle(
+                      fontSize: 14,
+                      fontWeight: FontWeight.w500,
+                      color: theme.textColor,
+                    ),
+                  ),
+                ),
+              );
+            }).toList(),
+          ),
+        ),
+      ),
    );
  }
 }
--- a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_menu.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_menu.dart
@ -34,6 +34,16 @@ class SettingsMenu extends StatelessWidget {
          icon: Icons.translate,
          changeSelectedIndex: changeSelectedIndex,
        ),
+        const SizedBox(
+          height: 10,
+        ),
+        SettingsMenuElement(
+          index: 2,
+          currentIndex: currentIndex,
+          label: LocaleKeys.settings_menu_user.tr(),
+          icon: Icons.account_box_outlined,
+          changeSelectedIndex: changeSelectedIndex,
+        ),
      ],
    );
  }
--- a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_user_view.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_user_view.dart
@ -0,0 +1,50 @@
+import 'package:app_flowy/startup/startup.dart';
+import 'package:flutter/material.dart';
+import 'package:app_flowy/workspace/application/user/settings_user_bloc.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flowy_sdk/protobuf/flowy-user/user_profile.pb.dart';
+
+class SettingsUserView extends StatelessWidget {
+  final UserProfilePB user;
+  SettingsUserView(this.user, {Key? key}) : super(key: ValueKey(user.id));
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider<SettingsUserViewBloc>(
+      create: (context) => getIt<SettingsUserViewBloc>(param1: user)..add(const SettingsUserEvent.initial()),
+      child: BlocBuilder<SettingsUserViewBloc, SettingsUserState>(
+        builder: (context, state) => SingleChildScrollView(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [_renderUserNameInput(context)],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _renderUserNameInput(BuildContext context) {
+    String name = context.read<SettingsUserViewBloc>().state.userProfile.name;
+    return _UserNameInput(name);
+  }
+}
+
+class _UserNameInput extends StatelessWidget {
+  final String name;
+  const _UserNameInput(
+    this.name, {
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return TextField(
+        controller: TextEditingController()..text = name,
+        decoration: const InputDecoration(
+          labelText: 'Name',
+        ),
+        onSubmitted: (val) {
+          context.read<SettingsUserViewBloc>().add(SettingsUserEvent.updateUserName(val));
+        });
+  }
+}
--- a/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart
@ -0,0 +1,52 @@
+import 'package:app_flowy/workspace/presentation/widgets/toggle/toggle_style.dart';
+import 'package:flutter/widgets.dart';
+
+class Toggle extends StatelessWidget {
+  final ToggleStyle style;
+  final bool value;
+  final void Function(bool) onChanged;
+  final EdgeInsets padding;
+
+  const Toggle({
+    Key? key,
+    required this.value,
+    required this.onChanged,
+    required this.style,
+    this.padding = const EdgeInsets.all(8.0),
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: (() => onChanged(value)),
+      child: Padding(
+        padding: padding,
+        child: Stack(
+          children: [
+            Container(
+              height: style.height,
+              width: style.width,
+              decoration: BoxDecoration(
+                color: value ? style.activeBackgroundColor : style.inactiveBackgroundColor,
+                borderRadius: BorderRadius.circular(style.height / 2),
+              ),
+            ),
+            AnimatedPositioned(
+              duration: const Duration(milliseconds: 150),
+              top: (style.height - style.thumbRadius) / 2,
+              left: value ? style.width - style.thumbRadius - 1 : 1,
+              child: Container(
+                height: style.thumbRadius,
+                width: style.thumbRadius,
+                decoration: BoxDecoration(
+                  color: style.thumbColor,
+                  borderRadius: BorderRadius.circular(style.thumbRadius / 2),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
--- a/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle_style.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle_style.dart
@ -0,0 +1,38 @@
+import 'package:flowy_infra/theme.dart';
+import 'package:flutter/painting.dart';
+import 'package:flutter/widgets.dart';
+
+class ToggleStyle {
+  final double height;
+  final double width;
+
+  final double thumbRadius;
+  final Color thumbColor;
+  final Color activeBackgroundColor;
+  final Color inactiveBackgroundColor;
+
+  ToggleStyle({
+    required this.height,
+    required this.width,
+    required this.thumbRadius,
+    required this.thumbColor,
+    required this.activeBackgroundColor,
+    required this.inactiveBackgroundColor,
+  });
+
+  ToggleStyle.big(AppTheme theme)
+      : height = 16,
+        width = 27,
+        thumbRadius = 14,
+        activeBackgroundColor = theme.main1,
+        inactiveBackgroundColor = theme.shader5,
+        thumbColor = theme.surface;
+
+  ToggleStyle.small(AppTheme theme)
+      : height = 10,
+        width = 16,
+        thumbRadius = 8,
+        activeBackgroundColor = theme.main1,
+        inactiveBackgroundColor = theme.shader5,
+        thumbColor = theme.surface;
+}
--- a/frontend/app_flowy/packages/flowy_editor/.gitignore
+++ b/frontend/app_flowy/packages/flowy_editor/.gitignore
@ -0,0 +1,30 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+migrate_working_dir/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# The .vscode folder contains launch configuration and tasks you configure in
+# VS Code which you may wish to be included in version control, so this line
+# is commented out by default.
+#.vscode/
+
+# Flutter/Dart/Pub related
+# Libraries should not include pubspec.lock, per https://dart.dev/guides/libraries/private-files#pubspeclock.
+/pubspec.lock
+**/doc/api/
+.dart_tool/
+.packages
+build/
--- a/frontend/app_flowy/packages/flowy_editor/.metadata
+++ b/frontend/app_flowy/packages/flowy_editor/.metadata
@ -0,0 +1,10 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled and should not be manually edited.
+
+version:
+  revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+  channel: stable
+
+project_type: package
--- a/frontend/app_flowy/packages/flowy_editor/.vscode/launch.json
+++ b/frontend/app_flowy/packages/flowy_editor/.vscode/launch.json
@ -0,0 +1,45 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "example",
+            "cwd": "example",
+            "request": "launch",
+            "type": "dart"
+        },
+        {
+            "name": "example (profile mode)",
+            "cwd": "example",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "profile"
+        },
+        {
+            "name": "example (release mode)",
+            "cwd": "example",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "release"
+        },
+        {
+            "name": "flowy_editor",
+            "request": "launch",
+            "type": "dart"
+        },
+        {
+            "name": "flowy_editor (profile mode)",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "profile"
+        },
+        {
+            "name": "flowy_editor (release mode)",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "release"
+        },
+    ]
+}
--- a/frontend/app_flowy/packages/flowy_editor/CHANGELOG.md
+++ b/frontend/app_flowy/packages/flowy_editor/CHANGELOG.md
@ -0,0 +1,3 @@
+## 0.0.1
+
+* TODO: Describe initial release.
--- a/frontend/app_flowy/packages/flowy_editor/LICENSE
+++ b/frontend/app_flowy/packages/flowy_editor/LICENSE
@ -0,0 +1 @@
+TODO: Add your license here.
--- a/frontend/app_flowy/packages/flowy_editor/README.md
+++ b/frontend/app_flowy/packages/flowy_editor/README.md
@ -0,0 +1,39 @@
+<!-- 
+This README describes the package. If you publish this package to pub.dev,
+this README's contents appear on the landing page for your package.
+
+For information about how to write a good package README, see the guide for
+[writing package pages](https://dart.dev/guides/libraries/writing-package-pages). 
+
+For general information about developing packages, see the Dart guide for
+[creating packages](https://dart.dev/guides/libraries/create-library-packages)
+and the Flutter guide for
+[developing packages and plugins](https://flutter.dev/developing-packages). 
+-->
+
+TODO: Put a short description of the package here that helps potential users
+know whether this package might be useful for them.
+
+## Features
+
+TODO: List what your package can do. Maybe include images, gifs, or videos.
+
+## Getting started
+
+TODO: List prerequisites and provide or point to information on how to
+start using the package.
+
+## Usage
+
+TODO: Include short and useful examples for package users. Add longer examples
+to `/example` folder. 
+
+```dart
+const like = 'sample';
+```
+
+## Additional information
+
+TODO: Tell users more about the package: where to find more information, how to 
+contribute to the package, how to file issues, what response they can expect 
+from the package authors, and more.
--- a/frontend/app_flowy/packages/flowy_editor/analysis_options.yaml
+++ b/frontend/app_flowy/packages/flowy_editor/analysis_options.yaml
@ -0,0 +1,4 @@
+include: package:flutter_lints/flutter.yaml
+
+# Additional information about this file can be found at
+# https://dart.dev/guides/language/analysis-options
--- a/frontend/app_flowy/packages/flowy_editor/assets/document.json
+++ b/frontend/app_flowy/packages/flowy_editor/assets/document.json
@ -0,0 +1,58 @@
+{
+  "document": {
+    "type": "root",
+    "children": [
+      {
+        "type": "text",
+        "delta": [],
+        "attributes": {
+          "subtype": "with-heading"
+        }
+      },
+      {
+        "type": "text", 
+        "delta": [],
+        "attributes": {
+          "tag": "*"
+        },
+        "children": [
+          {
+            "type": "text",
+            "delta": [],
+            "attributes": {
+              "text-type": "heading2",
+              "check": true
+            }
+          },
+          {
+            "type": "text",
+            "delta": [],
+            "attributes": {
+              "text-type": "checkbox",
+              "check": true
+            }
+          },
+          {
+            "type": "text",
+            "delta": [],
+            "attributes": {
+              "tag": "**"
+            }
+          }
+        ]
+      },
+      {
+        "type": "image",
+        "attributes": {
+          "url": "x.png"
+        }
+      },
+      {
+        "type": "video",
+        "attributes": {
+          "url": "x.mp4"
+        }
+      }
+    ]
+  }
+}
--- a/frontend/app_flowy/packages/flowy_editor/assets/images/check.svg
+++ b/frontend/app_flowy/packages/flowy_editor/assets/images/check.svg
@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="12" height="12" rx="4" fill="#00BCF0"/>
+<path d="M6 8L7.61538 9.5L10.5 6.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/frontend/app_flowy/packages/flowy_editor/assets/images/point.svg
+++ b/frontend/app_flowy/packages/flowy_editor/assets/images/point.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="6" y="6" width="4" height="4" rx="2" fill="#333333"/>
+</svg>
--- a/frontend/app_flowy/packages/flowy_editor/assets/images/quote.svg
+++ b/frontend/app_flowy/packages/flowy_editor/assets/images/quote.svg
@ -0,0 +1,3 @@
+<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+  <rect width="40" height="160" x="80" y="20" fill="#00BCF0"/>
+</svg>
--- a/frontend/app_flowy/packages/flowy_editor/assets/images/toolbar/bold.svg
+++ b/frontend/app_flowy/packages/flowy_editor/assets/images/toolbar/bold.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 8C9.66667 8 11 8.4 11 10C11 11.6 9.66667 12 9 12H6V8M9 8H6M9 8C9.5 8 10.5171 6.97616 10.5 6C10.4806 4.8956 9.5 4 8.5 4H6V8" stroke="white" stroke-width="1.5"/>
+</svg>
--- a/frontend/app_flowy/packages/flowy_editor/assets/images/toolbar/bulleted_list.svg
+++ b/frontend/app_flowy/packages/flowy_editor/assets/images/toolbar/bulleted_list.svg
@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 4L12.5 4" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.5 8H12.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.5 12H12.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="4" cy="4" r="0.5" fill="white"/>
+<circle cx="4" cy="8" r="0.5" fill="white"/>
+<circle cx="4" cy="12" r="0.5" fill="white"/>
+</svg>
--- a/frontend/app_flowy/packages/flowy_editor/assets/images/toolbar/divider.svg
+++ b/frontend/app_flowy/packages/flowy_editor/assets/images/toolbar/divider.svg
@ -0,0 +1,3 @@
+<svg width="1" height="16" viewBox="0 0 1 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1" height="16" rx="0.5" fill="#4F4F4F"/>
+</svg>
--- a/frontend/app_flowy/packages/flowy_editor/assets/images/toolbar/italic.svg
+++ b/frontend/app_flowy/packages/flowy_editor/assets/images/toolbar/italic.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.7 4L7.3 12M8.7 4H11.5M8.7 4H5.9M7.3 12H10.1M7.3 12H4.5" stroke="white" stroke-width="1.2"/>
+</svg>
--- a/frontend/app_flowy/packages/flowy_editor/assets/images/toolbar/number_list.svg
+++ b/frontend/app_flowy/packages/flowy_editor/assets/images/toolbar/number_list.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.201 6.4H3.001V12H2.081V7.384L0.953 7.704L0.729 6.92L2.201 6.4ZM3.91156 12V11.1L6.35156 8.61C6.9449 8.01667 7.24156 7.50333 7.24156 7.07C7.24156 6.73 7.13823 6.46667 6.93156 6.28C6.73156 6.08667 6.4749 5.99 6.16156 5.99C5.5749 5.99 5.14156 6.28 4.86156 6.86L3.89156 6.29C4.11156 5.82333 4.42156 5.47 4.82156 5.23C5.22156 4.99 5.6649 4.87 6.15156 4.87C6.7649 4.87 7.29156 5.06333 7.73156 5.45C8.17156 5.83667 8.39156 6.36333 8.39156 7.03C8.39156 7.74333 7.9949 8.50333 7.20156 9.31L5.62156 10.89H8.52156V12H3.91156ZM12.9025 7.032C13.5105 7.176 14.0025 7.46 14.3785 7.884C14.7625 8.3 14.9545 8.824 14.9545 9.456C14.9545 10.296 14.6705 10.956 14.1025 11.436C13.5345 11.916 12.8385 12.156 12.0145 12.156C11.3745 12.156 10.7985 12.008 10.2865 11.712C9.78253 11.416 9.41853 10.984 9.19453 10.416L10.3705 9.732C10.6185 10.452 11.1665 10.812 12.0145 10.812C12.4945 10.812 12.8745 10.692 13.1545 10.452C13.4345 10.204 13.5745 9.872 13.5745 9.456C13.5745 9.04 13.4345 8.712 13.1545 8.472C12.8745 8.232 12.4945 8.112 12.0145 8.112H11.7025L11.1505 7.284L12.9625 4.896H9.44653V3.6H14.6065V4.776L12.9025 7.032Z" fill="white"/>
+</svg>
--- a/frontend/app_flowy/packages/flowy_editor/assets/images/toolbar/quote.svg
+++ b/frontend/app_flowy/packages/flowy_editor/assets/images/toolbar/quote.svg
@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4742 9.35161C12.8007 8.99566 13 8.52111 13 8C13 6.89543 12.1046 6 11 6C9.89543 6 9 6.89543 9 8C9 9.04413 9.80011 9.90137 10.8207 9.99207L10.0124 11.1682L10.8365 11.7346L12.4742 9.35161Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.47395 7.35186C6.80061 6.99588 7 6.52123 7 6C7 4.89543 6.10457 4 5 4C3.89543 4 3 4.89543 3 6C3 7.04411 3.80008 7.90134 4.82061 7.99206L4.01231 9.16823L4.83645 9.73461L6.47395 7.35186Z" fill="white"/>
+</svg>
--- a/frontend/app_flowy/packages/flowy_editor/assets/images/toolbar/strikethrough.svg
+++ b/frontend/app_flowy/packages/flowy_editor/assets/images/toolbar/strikethrough.svg
@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99994 3C6.78324 3 5.57768 3.89295 5.26683 5.05868C5.14348 5.52122 5.16418 6.01807 5.36988 6.5H6.53454C6.50039 6.45893 6.46931 6.41816 6.44111 6.37779C6.18329 6.00862 6.14534 5.64531 6.23306 5.31634C6.4222 4.60706 7.21665 4 7.99994 4C8.69325 4 9.21448 4.21587 9.55371 4.46532C9.7248 4.59113 9.84481 4.72187 9.91824 4.83203C9.98388 4.93049 9.99678 4.98806 9.99929 4.99927C9.99983 5.00168 9.99989 5.00194 9.99989 5H10.9999C10.9999 4.73903 10.8893 4.4858 10.7503 4.27735C10.605 4.05938 10.4 3.84637 10.1461 3.65968C9.63538 3.28413 8.90664 3 7.99994 3ZM10.63 9.5H9.4653C9.49948 9.54108 9.53057 9.58188 9.55877 9.62226C9.8166 9.99142 9.85455 10.3547 9.76683 10.6837C9.57769 11.393 8.78324 12 7.99994 12C7.30664 12 6.78541 11.7842 6.44617 11.5347C6.27508 11.4089 6.15508 11.2781 6.08165 11.168C6.01601 11.0695 6.00311 11.012 6.0006 11.0008C6.00006 10.9983 6 10.9981 6 11H5C5 11.261 5.11062 11.5142 5.24958 11.7227C5.39489 11.9406 5.59988 12.1537 5.85377 12.3403C6.36451 12.7159 7.09325 13 7.99994 13C9.21665 13 10.4222 12.1071 10.7331 10.9414C10.8564 10.4788 10.8357 9.98194 10.63 9.5Z" fill="white"/>
+<rect width="8" height="1" transform="matrix(1 0 0 -1 4 8.5)" fill="white"/>
+</svg>
--- a/frontend/app_flowy/packages/flowy_editor/assets/images/toolbar/underline.svg
+++ b/frontend/app_flowy/packages/flowy_editor/assets/images/toolbar/underline.svg
@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="12" width="8" height="1" fill="white"/>
+<path d="M10.1623 10.2595C9.60377 10.7532 8.88302 11 8 11C7.11698 11 6.39623 10.7532 5.83774 10.2595C5.27925 9.7583 5 9.08883 5 8.25105V3H6.30189V8.17251C6.30189 8.65124 6.44151 9.03273 6.72075 9.31697C7.00755 9.60122 7.43396 9.74334 8 9.74334C8.56604 9.74334 8.98868 9.60122 9.26792 9.31697C9.55472 9.03273 9.69811 8.65124 9.69811 8.17251V3H11V8.25105C11 9.08883 10.7208 9.7583 10.1623 10.2595Z" fill="white"/>
+</svg>
--- a/frontend/app_flowy/packages/flowy_editor/assets/images/uncheck.svg
+++ b/frontend/app_flowy/packages/flowy_editor/assets/images/uncheck.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.5" y="2.5" width="11" height="11" rx="3.5" stroke="#BDBDBD"/>
+</svg>
--- a/frontend/app_flowy/packages/flowy_editor/example/.gitignore
+++ b/frontend/app_flowy/packages/flowy_editor/example/.gitignore
@ -0,0 +1,47 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+migrate_working_dir/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# The .vscode folder contains launch configuration and tasks you configure in
+# VS Code which you may wish to be included in version control, so this line
+# is commented out by default.
+#.vscode/
+
+# Flutter/Dart/Pub related
+**/doc/api/
+**/ios/Flutter/.last_build_id
+.dart_tool/
+.flutter-plugins
+.flutter-plugins-dependencies
+.packages
+.pub-cache/
+.pub/
+/build/
+
+# Web related
+lib/generated_plugin_registrant.dart
+
+# Symbolication related
+app.*.symbols
+
+# Obfuscation related
+app.*.map.json
+
+# Android Studio will place build artifacts here
+/android/app/debug
+/android/app/profile
+/android/app/release
--- a/frontend/app_flowy/packages/flowy_editor/example/.metadata
+++ b/frontend/app_flowy/packages/flowy_editor/example/.metadata
@ -0,0 +1,45 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled.
+
+version:
+  revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+  channel: stable
+
+project_type: app
+
+# Tracks metadata for the flutter migrate command
+migration:
+  platforms:
+    - platform: root
+      create_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+      base_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+    - platform: android
+      create_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+      base_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+    - platform: ios
+      create_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+      base_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+    - platform: linux
+      create_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+      base_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+    - platform: macos
+      create_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+      base_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+    - platform: web
+      create_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+      base_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+    - platform: windows
+      create_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+      base_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+
+  # User provided section
+
+  # List of Local paths (relative to this file) that should be
+  # ignored by the migrate tool.
+  #
+  # Files that are not part of the templates will be ignored by default.
+  unmanaged_files:
+    - 'lib/main.dart'
+    - 'ios/Runner.xcodeproj/project.pbxproj'
--- a/frontend/app_flowy/packages/flowy_editor/example/.vscode/launch.json
+++ b/frontend/app_flowy/packages/flowy_editor/example/.vscode/launch.json
@ -0,0 +1,25 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "example",
+            "request": "launch",
+            "type": "dart"
+        },
+        {
+            "name": "example (profile mode)",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "profile"
+        },
+        {
+            "name": "example (release mode)",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "release"
+        }
+    ]
+}
--- a/frontend/app_flowy/packages/flowy_editor/example/README.md
+++ b/frontend/app_flowy/packages/flowy_editor/example/README.md
@ -0,0 +1,16 @@
+# example
+
+A new Flutter project.
+
+## Getting Started
+
+This project is a starting point for a Flutter application.
+
+A few resources to get you started if this is your first Flutter project:
+
+- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)
+- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)
+
+For help getting started with Flutter development, view the
+[online documentation](https://docs.flutter.dev/), which offers tutorials,
+samples, guidance on mobile development, and a full API reference.
--- a/frontend/app_flowy/packages/flowy_editor/example/analysis_options.yaml
+++ b/frontend/app_flowy/packages/flowy_editor/example/analysis_options.yaml
@ -0,0 +1,29 @@
+# This file configures the analyzer, which statically analyzes Dart code to
+# check for errors, warnings, and lints.
+#
+# The issues identified by the analyzer are surfaced in the UI of Dart-enabled
+# IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be
+# invoked from the command line by running `flutter analyze`.
+
+# The following line activates a set of recommended lints for Flutter apps,
+# packages, and plugins designed to encourage good coding practices.
+include: package:flutter_lints/flutter.yaml
+
+linter:
+  # The lint rules applied to this project can be customized in the
+  # section below to disable rules from the `package:flutter_lints/flutter.yaml`
+  # included above or to enable additional rules. A list of all available lints
+  # and their documentation is published at
+  # https://dart-lang.github.io/linter/lints/index.html.
+  #
+  # Instead of disabling a lint rule for the entire project in the
+  # section below, it can also be suppressed for a single line of code
+  # or a specific dart file by using the `// ignore: name_of_lint` and
+  # `// ignore_for_file: name_of_lint` syntax on the line or in the file
+  # producing the lint.
+  rules:
+    # avoid_print: false  # Uncomment to disable the `avoid_print` rule
+    # prefer_single_quotes: true  # Uncomment to enable the `prefer_single_quotes` rule
+
+# Additional information about this file can be found at
+# https://dart.dev/guides/language/analysis-options
--- a/frontend/app_flowy/packages/flowy_editor/example/android/.gitignore
+++ b/frontend/app_flowy/packages/flowy_editor/example/android/.gitignore
@ -0,0 +1,13 @@
+gradle-wrapper.jar
+/.gradle
+/captures/
+/gradlew
+/gradlew.bat
+/local.properties
+GeneratedPluginRegistrant.java
+
+# Remember to never publicly share your keystore.
+# See https://flutter.dev/docs/deployment/android#reference-the-keystore-from-the-app
+key.properties
+**/*.keystore
+**/*.jks
--- a/frontend/app_flowy/packages/flowy_editor/example/android/app/build.gradle
+++ b/frontend/app_flowy/packages/flowy_editor/example/android/app/build.gradle
@ -0,0 +1,71 @@
+def localProperties = new Properties()
+def localPropertiesFile = rootProject.file('local.properties')
+if (localPropertiesFile.exists()) {
+    localPropertiesFile.withReader('UTF-8') { reader ->
+        localProperties.load(reader)
+    }
+}
+
+def flutterRoot = localProperties.getProperty('flutter.sdk')
+if (flutterRoot == null) {
+    throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
+}
+
+def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
+if (flutterVersionCode == null) {
+    flutterVersionCode = '1'
+}
+
+def flutterVersionName = localProperties.getProperty('flutter.versionName')
+if (flutterVersionName == null) {
+    flutterVersionName = '1.0'
+}
+
+apply plugin: 'com.android.application'
+apply plugin: 'kotlin-android'
+apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
+
+android {
+    compileSdkVersion flutter.compileSdkVersion
+    ndkVersion flutter.ndkVersion
+
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+
+    kotlinOptions {
+        jvmTarget = '1.8'
+    }
+
+    sourceSets {
+        main.java.srcDirs += 'src/main/kotlin'
+    }
+
+    defaultConfig {
+        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
+        applicationId "com.example.example"
+        // You can update the following values to match your application needs.
+        // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-build-configuration.
+        minSdkVersion flutter.minSdkVersion
+        targetSdkVersion flutter.targetSdkVersion
+        versionCode flutterVersionCode.toInteger()
+        versionName flutterVersionName
+    }
+
+    buildTypes {
+        release {
+            // TODO: Add your own signing config for the release build.
+            // Signing with the debug keys for now, so `flutter run --release` works.
+            signingConfig signingConfigs.debug
+        }
+    }
+}
+
+flutter {
+    source '../..'
+}
+
+dependencies {
+    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+}
--- a/frontend/app_flowy/packages/flowy_editor/example/android/app/src/debug/AndroidManifest.xml
+++ b/frontend/app_flowy/packages/flowy_editor/example/android/app/src/debug/AndroidManifest.xml
@ -0,0 +1,8 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.example.example">
+    <!-- The INTERNET permission is required for development. Specifically,
+         the Flutter tool needs it to communicate with the running application
+         to allow setting breakpoints, to provide hot reload, etc.
+    -->
+    <uses-permission android:name="android.permission.INTERNET"/>
+</manifest>
--- a/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/AndroidManifest.xml
+++ b/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/AndroidManifest.xml
@ -0,0 +1,34 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.example.example">
+   <application
+        android:label="example"
+        android:name="${applicationName}"
+        android:icon="@mipmap/ic_launcher">
+        <activity
+            android:name=".MainActivity"
+            android:exported="true"
+            android:launchMode="singleTop"
+            android:theme="@style/LaunchTheme"
+            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
+            android:hardwareAccelerated="true"
+            android:windowSoftInputMode="adjustResize">
+            <!-- Specifies an Android theme to apply to this Activity as soon as
+                 the Android process has started. This theme is visible to the user
+                 while the Flutter UI initializes. After that, this theme continues
+                 to determine the Window background behind the Flutter UI. -->
+            <meta-data
+              android:name="io.flutter.embedding.android.NormalTheme"
+              android:resource="@style/NormalTheme"
+              />
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN"/>
+                <category android:name="android.intent.category.LAUNCHER"/>
+            </intent-filter>
+        </activity>
+        <!-- Don't delete the meta-data below.
+             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
+        <meta-data
+            android:name="flutterEmbedding"
+            android:value="2" />
+    </application>
+</manifest>
--- a/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/kotlin/com/example/example/MainActivity.kt
+++ b/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/kotlin/com/example/example/MainActivity.kt
@ -0,0 +1,6 @@
+package com.example.example
+
+import io.flutter.embedding.android.FlutterActivity
+
+class MainActivity: FlutterActivity() {
+}
--- a/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/res/drawable-v21/launch_background.xml
+++ b/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/res/drawable-v21/launch_background.xml
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Modify this file to customize your launch splash screen -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="?android:colorBackground" />
+
+    <!-- You can insert your own image assets here -->
+    <!-- <item>
+        <bitmap
+            android:gravity="center"
+            android:src="@mipmap/launch_image" />
+    </item> -->
+</layer-list>
--- a/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/res/drawable/launch_background.xml
+++ b/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/res/drawable/launch_background.xml
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Modify this file to customize your launch splash screen -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@android:color/white" />
+
+    <!-- You can insert your own image assets here -->
+    <!-- <item>
+        <bitmap
+            android:gravity="center"
+            android:src="@mipmap/launch_image" />
+    </item> -->
+</layer-list>
--- a/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
+++ b/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
--- a/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
+++ b/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
--- a/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
+++ b/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
--- a/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
+++ b/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
--- a/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
+++ b/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
--- a/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/res/values-night/styles.xml
+++ b/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/res/values-night/styles.xml
@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is on -->
+    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
+        <!-- Show a splash screen on the activity. Automatically removed when
+             the Flutter engine draws its first frame -->
+        <item name="android:windowBackground">@drawable/launch_background</item>
+    </style>
+    <!-- Theme applied to the Android Window as soon as the process has started.
+         This theme determines the color of the Android Window while your
+         Flutter UI initializes, as well as behind your Flutter UI while its
+         running.
+
+         This Theme is only used starting with V2 of Flutter's Android embedding. -->
+    <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
+        <item name="android:windowBackground">?android:colorBackground</item>
+    </style>
+</resources>
--- a/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/res/values/styles.xml
+++ b/frontend/app_flowy/packages/flowy_editor/example/android/app/src/main/res/values/styles.xml
@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
+    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
+        <!-- Show a splash screen on the activity. Automatically removed when
+             the Flutter engine draws its first frame -->
+        <item name="android:windowBackground">@drawable/launch_background</item>
+    </style>
+    <!-- Theme applied to the Android Window as soon as the process has started.
+         This theme determines the color of the Android Window while your
+         Flutter UI initializes, as well as behind your Flutter UI while its
+         running.
+
+         This Theme is only used starting with V2 of Flutter's Android embedding. -->
+    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
+        <item name="android:windowBackground">?android:colorBackground</item>
+    </style>
+</resources>
--- a/frontend/app_flowy/packages/flowy_editor/example/android/app/src/profile/AndroidManifest.xml
+++ b/frontend/app_flowy/packages/flowy_editor/example/android/app/src/profile/AndroidManifest.xml
@ -0,0 +1,8 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.example.example">
+    <!-- The INTERNET permission is required for development. Specifically,
+         the Flutter tool needs it to communicate with the running application
+         to allow setting breakpoints, to provide hot reload, etc.
+    -->
+    <uses-permission android:name="android.permission.INTERNET"/>
+</manifest>
--- a/frontend/app_flowy/packages/flowy_editor/example/android/build.gradle
+++ b/frontend/app_flowy/packages/flowy_editor/example/android/build.gradle
@ -0,0 +1,31 @@
+buildscript {
+    ext.kotlin_version = '1.6.10'
+    repositories {
+        google()
+        mavenCentral()
+    }
+
+    dependencies {
+        classpath 'com.android.tools.build:gradle:7.1.2'
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+    }
+}
+
+allprojects {
+    repositories {
+        google()
+        mavenCentral()
+    }
+}
+
+rootProject.buildDir = '../build'
+subprojects {
+    project.buildDir = "${rootProject.buildDir}/${project.name}"
+}
+subprojects {
+    project.evaluationDependsOn(':app')
+}
+
+task clean(type: Delete) {
+    delete rootProject.buildDir
+}
--- a/frontend/app_flowy/packages/flowy_editor/example/android/gradle.properties
+++ b/frontend/app_flowy/packages/flowy_editor/example/android/gradle.properties
@ -0,0 +1,3 @@
+org.gradle.jvmargs=-Xmx1536M
+android.useAndroidX=true
+android.enableJetifier=true
--- a/frontend/app_flowy/packages/flowy_editor/example/android/gradle/wrapper/gradle-wrapper.properties
+++ b/frontend/app_flowy/packages/flowy_editor/example/android/gradle/wrapper/gradle-wrapper.properties
@ -0,0 +1,6 @@
+#Fri Jun 23 08:50:38 CEST 2017
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.4-all.zip
--- a/frontend/app_flowy/packages/flowy_editor/example/android/settings.gradle
+++ b/frontend/app_flowy/packages/flowy_editor/example/android/settings.gradle
@ -0,0 +1,11 @@
+include ':app'
+
+def localPropertiesFile = new File(rootProject.projectDir, "local.properties")
+def properties = new Properties()
+
+assert localPropertiesFile.exists()
+localPropertiesFile.withReader("UTF-8") { reader -> properties.load(reader) }
+
+def flutterSdkPath = properties.getProperty("flutter.sdk")
+assert flutterSdkPath != null, "flutter.sdk not set in local.properties"
+apply from: "$flutterSdkPath/packages/flutter_tools/gradle/app_plugin_loader.gradle"
--- a/frontend/app_flowy/packages/flowy_editor/example/assets/document.json
+++ b/frontend/app_flowy/packages/flowy_editor/example/assets/document.json
@ -0,0 +1,245 @@
+{
+  "document": {
+    "type": "editor",
+    "attributes": {},
+    "children": [
+      {
+        "type": "image",
+        "attributes": {
+          "image_src": "https://images.squarespace-cdn.com/content/v1/617f6f16b877c06711e87373/c3f23723-37f4-44d7-9c5d-6e2a53064ae7/Asset+10.png?format=1500w"
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "👋 Welcome to AppFlowy!",
+            "attributes": {
+              "href": "https://www.appflowy.io/",
+              "heading": "h1"
+            }
+          }
+        ],
+        "attributes": {
+          "heading": "h1"
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          { "insert": "Here are the basics", "attributes": { "heading": "h2" } }
+        ],
+        "attributes": {
+          "heading": "h2"
+        }
+      },
+      {
+        "type": "text",
+        "delta": [{ "insert": "Click anywhere and just start typing." }],
+        "attributes": {
+          "list": "todo",
+          "todo": false
+        }
+      },
+      {
+        "type": "text",
+        "delta": [{ "insert": "Click anywhere and just start typing." }],
+        "attributes": {
+          "list": "bullet"
+        }
+      },
+      {
+        "type": "text",
+        "delta": [{ "insert": "Click anywhere and just start typing." }],
+        "attributes": {
+          "list": "bullet"
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Highlight",
+            "attributes": { "highlight": "0xFFFFFF00" }
+          },
+          { "insert": " Click anywhere and just start typing" },
+          { "insert": " any text, and use the menu at the bottom to " },
+          { "insert": "style", "attributes": { "italic": true } },
+          { "insert": " your ", "attributes": { "bold": true } },
+          { "insert": "writing", "attributes": { "underline": true } },
+          {
+            "insert": " however you like.",
+            "attributes": { "strikethrough": true }
+          }
+        ],
+        "attributes": {
+          "checkbox": false
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          { "insert": "Have a question? ", "attributes": { "heading": "h2" } }
+        ],
+        "attributes": {
+          "heading": "h2"
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "1. Click the '?' at the bottom right for help and support."
+          }
+        ],
+        "attributes": {
+          "quotes": true
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "2. Click the '?' at the bottom right for help and support."
+          }
+        ],
+        "attributes": {}
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "3. Click the '?' at the bottom right for help and support."
+          }
+        ],
+        "attributes": {}
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "4. Click the '?' at the bottom right for help and support.Click the '?' at the bottom right for help and support.Click the '?' at the bottom right for help and support.Click the '?' at the bottom right for help and support.Click the '?' at the bottom right for help and support.Click the '?' at the bottom right for help and support.Click the '?' at the bottom right for help and support."
+          }
+        ],
+        "attributes": {}
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "5. Click the '?' at the bottom right for help and support."
+          }
+        ],
+        "attributes": {}
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "6. Click the '?' at the bottom right for help and support."
+          }
+        ],
+        "attributes": {}
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "7. Click the '?' at the bottom right for help and support."
+          }
+        ],
+        "attributes": {}
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "8. Click the '?' at the bottom right for help and support."
+          }
+        ],
+        "attributes": {}
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "9. Click the '?' at the bottom right for help and support."
+          }
+        ],
+        "attributes": {}
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "10. Click the '?' at the bottom right for help and support."
+          }
+        ],
+        "attributes": {}
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "11. Click the '?' at the bottom right for help and support."
+          }
+        ],
+        "attributes": {}
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Click the '?' at the bottom right for help and support."
+          }
+        ],
+        "attributes": {}
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Click the '?' at the bottom right for help and support."
+          }
+        ],
+        "attributes": {}
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Click the '?' at the bottom right for help and support."
+          }
+        ],
+        "attributes": {}
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Click the '?' at the bottom right for help and support."
+          }
+        ],
+        "attributes": {}
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Click the '?' at the bottom right for help and support."
+          }
+        ],
+        "attributes": {}
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Click the '?' at the bottom right for help and support."
+          }
+        ],
+        "attributes": {}
+      }
+    ]
+  }
+}
--- a/frontend/app_flowy/packages/flowy_editor/example/assets/example.json
+++ b/frontend/app_flowy/packages/flowy_editor/example/assets/example.json
@ -0,0 +1,247 @@
+{
+  "document": {
+    "type": "editor",
+    "attributes": {},
+    "children": [
+      {
+        "type": "image",
+        "attributes": {
+          "image_src": "https://s1.ax1x.com/2022/07/28/vCgz1x.png"
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "🌶 Read Me"
+          }
+        ],
+        "attributes": {
+          "subtype": "heading",
+          "heading": "h1"
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "👋 Welcome to Appflowy"
+          }
+        ],
+        "attributes": {
+          "subtype": "heading",
+          "heading": "h2"
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "At AppFlowy, we embody what we value deep in our hearts, taking inspiration from other great companies while forging our own path. AppFlowy’s five core values are Mission Driven, Aim High & Iterate, Transparency, Collaboration, and Honesty. Together, they spell MATCH. We will continue to iterate and refine these values as we grow."
+          }
+        ]
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Here are the basics:"
+          }
+        ],
+        "attributes": {
+          "subtype": "heading",
+          "heading": "h3"
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          { "insert": "Click " },
+          { "insert": "anywhere", "attributes": { "underline": true } },
+          { "insert": " and just typing." }
+        ]
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Hit"
+          },
+          {
+            "insert": "  /  ",
+            "attributes": { "highlightColor": "0xFFFFFF00" }
+          },
+          {
+            "insert": "to see all the types of content you can add - entity, headers, videos, sub pages, etc."
+          }
+        ]
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Highlight any text, and use the menu that pops up to "
+          },
+          { "insert": "style", "attributes": { "bold": true } },
+          { "insert": " your ", "attributes": { "italic": true } },
+          { "insert": "writing", "attributes": { "strikethrough": true } },
+          { "insert": "." }
+        ]
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Here are the plugins:"
+          }
+        ],
+        "attributes": {
+          "subtype": "heading",
+          "heading": "h3"
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Hello world"
+          }
+        ],
+        "attributes": {
+          "subtype": "checkbox",
+          "checkbox": false
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Hello world"
+          }
+        ],
+        "attributes": {
+          "subtype": "checkbox",
+          "checkbox": false
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Hello world"
+          }
+        ],
+        "attributes": {
+          "subtype": "checkbox",
+          "checkbox": false
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Hello world"
+          }
+        ],
+        "attributes": {
+          "subtype": "bulleted-list"
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Hello world"
+          }
+        ],
+        "attributes": {
+          "subtype": "bulleted-list"
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Hello "
+          },
+          {
+            "insert": "world",
+            "attributes": { "bold": true }
+          }
+        ],
+        "attributes": {
+          "subtype": "bulleted-list"
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Hello world"
+          }
+        ],
+        "attributes": {
+          "subtype": "quote"
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Hello world"
+          }
+        ],
+        "attributes": {
+          "subtype": "quote"
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Hello world"
+          }
+        ],
+        "attributes": {
+          "subtype": "quote"
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Hello world"
+          }
+        ],
+        "attributes": {
+          "subtype": "number-list",
+          "number": 1
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Hello world"
+          }
+        ],
+        "attributes": {
+          "subtype": "number-list",
+          "number": 2
+        }
+      },
+      {
+        "type": "text",
+        "delta": [
+          {
+            "insert": "Hello world"
+          }
+        ],
+        "attributes": {
+          "subtype": "number-list",
+          "number": 3
+        }
+      }
+    ]
+  }
+}
--- a/frontend/app_flowy/packages/flowy_editor/example/ios/.gitignore
+++ b/frontend/app_flowy/packages/flowy_editor/example/ios/.gitignore
@ -0,0 +1,34 @@
+**/dgph
+*.mode1v3
+*.mode2v3
+*.moved-aside
+*.pbxuser
+*.perspectivev3
+**/*sync/
+.sconsign.dblite
+.tags*
+**/.vagrant/
+**/DerivedData/
+Icon?
+**/Pods/
+**/.symlinks/
+profile
+xcuserdata
+**/.generated/
+Flutter/App.framework
+Flutter/Flutter.framework
+Flutter/Flutter.podspec
+Flutter/Generated.xcconfig
+Flutter/ephemeral/
+Flutter/app.flx
+Flutter/app.zip
+Flutter/flutter_assets/
+Flutter/flutter_export_environment.sh
+ServiceDefinitions.json
+Runner/GeneratedPluginRegistrant.*
+
+# Exceptions to above rules.
+!default.mode1v3
+!default.mode2v3
+!default.pbxuser
+!default.perspectivev3
--- a/frontend/app_flowy/packages/flowy_editor/example/ios/Flutter/AppFrameworkInfo.plist
+++ b/frontend/app_flowy/packages/flowy_editor/example/ios/Flutter/AppFrameworkInfo.plist
@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+  <key>CFBundleDevelopmentRegion</key>
+  <string>en</string>
+  <key>CFBundleExecutable</key>
+  <string>App</string>
+  <key>CFBundleIdentifier</key>
+  <string>io.flutter.flutter.app</string>
+  <key>CFBundleInfoDictionaryVersion</key>
+  <string>6.0</string>
+  <key>CFBundleName</key>
+  <string>App</string>
+  <key>CFBundlePackageType</key>
+  <string>FMWK</string>
+  <key>CFBundleShortVersionString</key>
+  <string>1.0</string>
+  <key>CFBundleSignature</key>
+  <string>????</string>
+  <key>CFBundleVersion</key>
+  <string>1.0</string>
+  <key>MinimumOSVersion</key>
+  <string>9.0</string>
+</dict>
+</plist>
--- a/frontend/app_flowy/packages/flowy_editor/example/ios/Flutter/Debug.xcconfig
+++ b/frontend/app_flowy/packages/flowy_editor/example/ios/Flutter/Debug.xcconfig
@ -0,0 +1,2 @@
+#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"
+#include "Generated.xcconfig"
--- a/frontend/app_flowy/packages/flowy_editor/example/ios/Flutter/Release.xcconfig
+++ b/frontend/app_flowy/packages/flowy_editor/example/ios/Flutter/Release.xcconfig
@ -0,0 +1,2 @@
+#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig"
+#include "Generated.xcconfig"
--- a/frontend/app_flowy/packages/flowy_editor/example/ios/Podfile
+++ b/frontend/app_flowy/packages/flowy_editor/example/ios/Podfile
@ -0,0 +1,41 @@
+# Uncomment this line to define a global platform for your project
+# platform :ios, '9.0'
+
+# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
+ENV['COCOAPODS_DISABLE_STATS'] = 'true'
+
+project 'Runner', {
+  'Debug' => :debug,
+  'Profile' => :release,
+  'Release' => :release,
+}
+
+def flutter_root
+  generated_xcode_build_settings_path = File.expand_path(File.join('..', 'Flutter', 'Generated.xcconfig'), __FILE__)
+  unless File.exist?(generated_xcode_build_settings_path)
+    raise "#{generated_xcode_build_settings_path} must exist. If you're running pod install manually, make sure flutter pub get is executed first"
+  end
+
+  File.foreach(generated_xcode_build_settings_path) do |line|
+    matches = line.match(/FLUTTER_ROOT\=(.*)/)
+    return matches[1].strip if matches
+  end
+  raise "FLUTTER_ROOT not found in #{generated_xcode_build_settings_path}. Try deleting Generated.xcconfig, then run flutter pub get"
+end
+
+require File.expand_path(File.join('packages', 'flutter_tools', 'bin', 'podhelper'), flutter_root)
+
+flutter_ios_podfile_setup
+
+target 'Runner' do
+  use_frameworks!
+  use_modular_headers!
+
+  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
+end
+
+post_install do |installer|
+  installer.pods_project.targets.each do |target|
+    flutter_additional_ios_build_settings(target)
+  end
+end
--- a/frontend/app_flowy/packages/flowy_editor/example/ios/Runner.xcodeproj/project.pbxproj
+++ b/frontend/app_flowy/packages/flowy_editor/example/ios/Runner.xcodeproj/project.pbxproj
@ -0,0 +1,484 @@
+// !$*UTF8*$!
+{
+	archiveVersion = 1;
+	classes = {
+	};
+	objectVersion = 50;
+	objects = {
+
+/* Begin PBXBuildFile section */
+		1498D2341E8E89220040F4C2 /* GeneratedPluginRegistrant.m in Sources */ = {isa = PBXBuildFile; fileRef = 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */; };
+		3B3967161E833CAA004F5970 /* AppFrameworkInfo.plist in Resources */ = {isa = PBXBuildFile; fileRef = 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */; };
+		74858FAF1ED2DC5600515810 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 74858FAE1ED2DC5600515810 /* AppDelegate.swift */; };
+		97C146FC1CF9000F007C117D /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FA1CF9000F007C117D /* Main.storyboard */; };
+		97C146FE1CF9000F007C117D /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FD1CF9000F007C117D /* Assets.xcassets */; };
+		97C147011CF9000F007C117D /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */; };
+/* End PBXBuildFile section */
+
+/* Begin PBXCopyFilesBuildPhase section */
+		9705A1C41CF9048500538489 /* Embed Frameworks */ = {
+			isa = PBXCopyFilesBuildPhase;
+			buildActionMask = 2147483647;
+			dstPath = "";
+			dstSubfolderSpec = 10;
+			files = (
+			);
+			name = "Embed Frameworks";
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXCopyFilesBuildPhase section */
+
+/* Begin PBXFileReference section */
+		1498D2321E8E86230040F4C2 /* GeneratedPluginRegistrant.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = GeneratedPluginRegistrant.h; sourceTree = "<group>"; };
+		1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = GeneratedPluginRegistrant.m; sourceTree = "<group>"; };
+		3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = AppFrameworkInfo.plist; path = Flutter/AppFrameworkInfo.plist; sourceTree = "<group>"; };
+		74858FAD1ED2DC5600515810 /* Runner-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "Runner-Bridging-Header.h"; sourceTree = "<group>"; };
+		74858FAE1ED2DC5600515810 /* AppDelegate.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
+		7AFA3C8E1D35360C0083082E /* Release.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = Release.xcconfig; path = Flutter/Release.xcconfig; sourceTree = "<group>"; };
+		9740EEB21CF90195004384FC /* Debug.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Debug.xcconfig; path = Flutter/Debug.xcconfig; sourceTree = "<group>"; };
+		9740EEB31CF90195004384FC /* Generated.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Generated.xcconfig; path = Flutter/Generated.xcconfig; sourceTree = "<group>"; };
+		97C146EE1CF9000F007C117D /* Runner.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Runner.app; sourceTree = BUILT_PRODUCTS_DIR; };
+		97C146FB1CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = "<group>"; };
+		97C146FD1CF9000F007C117D /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
+		97C147001CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
+		97C147021CF9000F007C117D /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+/* End PBXFileReference section */
+
+/* Begin PBXFrameworksBuildPhase section */
+		97C146EB1CF9000F007C117D /* Frameworks */ = {
+			isa = PBXFrameworksBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXFrameworksBuildPhase section */
+
+/* Begin PBXGroup section */
+		9740EEB11CF90186004384FC /* Flutter */ = {
+			isa = PBXGroup;
+			children = (
+				3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */,
+				9740EEB21CF90195004384FC /* Debug.xcconfig */,
+				7AFA3C8E1D35360C0083082E /* Release.xcconfig */,
+				9740EEB31CF90195004384FC /* Generated.xcconfig */,
+			);
+			name = Flutter;
+			sourceTree = "<group>";
+		};
+		97C146E51CF9000F007C117D = {
+			isa = PBXGroup;
+			children = (
+				9740EEB11CF90186004384FC /* Flutter */,
+				97C146F01CF9000F007C117D /* Runner */,
+				97C146EF1CF9000F007C117D /* Products */,
+			);
+			sourceTree = "<group>";
+		};
+		97C146EF1CF9000F007C117D /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				97C146EE1CF9000F007C117D /* Runner.app */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		97C146F01CF9000F007C117D /* Runner */ = {
+			isa = PBXGroup;
+			children = (
+				97C146FA1CF9000F007C117D /* Main.storyboard */,
+				97C146FD1CF9000F007C117D /* Assets.xcassets */,
+				97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */,
+				97C147021CF9000F007C117D /* Info.plist */,
+				1498D2321E8E86230040F4C2 /* GeneratedPluginRegistrant.h */,
+				1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */,
+				74858FAE1ED2DC5600515810 /* AppDelegate.swift */,
+				74858FAD1ED2DC5600515810 /* Runner-Bridging-Header.h */,
+			);
+			path = Runner;
+			sourceTree = "<group>";
+		};
+/* End PBXGroup section */
+
+/* Begin PBXNativeTarget section */
+		97C146ED1CF9000F007C117D /* Runner */ = {
+			isa = PBXNativeTarget;
+			buildConfigurationList = 97C147051CF9000F007C117D /* Build configuration list for PBXNativeTarget "Runner" */;
+			buildPhases = (
+				9740EEB61CF901F6004384FC /* Run Script */,
+				97C146EA1CF9000F007C117D /* Sources */,
+				97C146EB1CF9000F007C117D /* Frameworks */,
+				97C146EC1CF9000F007C117D /* Resources */,
+				9705A1C41CF9048500538489 /* Embed Frameworks */,
+				3B06AD1E1E4923F5004D2608 /* Thin Binary */,
+			);
+			buildRules = (
+			);
+			dependencies = (
+			);
+			name = Runner;
+			productName = Runner;
+			productReference = 97C146EE1CF9000F007C117D /* Runner.app */;
+			productType = "com.apple.product-type.application";
+		};
+/* End PBXNativeTarget section */
+
+/* Begin PBXProject section */
+		97C146E61CF9000F007C117D /* Project object */ = {
+			isa = PBXProject;
+			attributes = {
+				LastUpgradeCheck = 1300;
+				ORGANIZATIONNAME = "";
+				TargetAttributes = {
+					97C146ED1CF9000F007C117D = {
+						CreatedOnToolsVersion = 7.3.1;
+						LastSwiftMigration = 1100;
+					};
+				};
+			};
+			buildConfigurationList = 97C146E91CF9000F007C117D /* Build configuration list for PBXProject "Runner" */;
+			compatibilityVersion = "Xcode 9.3";
+			developmentRegion = en;
+			hasScannedForEncodings = 0;
+			knownRegions = (
+				en,
+				Base,
+			);
+			mainGroup = 97C146E51CF9000F007C117D;
+			productRefGroup = 97C146EF1CF9000F007C117D /* Products */;
+			projectDirPath = "";
+			projectRoot = "";
+			targets = (
+				97C146ED1CF9000F007C117D /* Runner */,
+			);
+		};
+/* End PBXProject section */
+
+/* Begin PBXResourcesBuildPhase section */
+		97C146EC1CF9000F007C117D /* Resources */ = {
+			isa = PBXResourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				97C147011CF9000F007C117D /* LaunchScreen.storyboard in Resources */,
+				3B3967161E833CAA004F5970 /* AppFrameworkInfo.plist in Resources */,
+				97C146FE1CF9000F007C117D /* Assets.xcassets in Resources */,
+				97C146FC1CF9000F007C117D /* Main.storyboard in Resources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXResourcesBuildPhase section */
+
+/* Begin PBXShellScriptBuildPhase section */
+		3B06AD1E1E4923F5004D2608 /* Thin Binary */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "Thin Binary";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "/bin/sh \"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh\" embed_and_thin";
+		};
+		9740EEB61CF901F6004384FC /* Run Script */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "Run Script";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "/bin/sh \"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh\" build";
+		};
+/* End PBXShellScriptBuildPhase section */
+
+/* Begin PBXSourcesBuildPhase section */
+		97C146EA1CF9000F007C117D /* Sources */ = {
+			isa = PBXSourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				74858FAF1ED2DC5600515810 /* AppDelegate.swift in Sources */,
+				1498D2341E8E89220040F4C2 /* GeneratedPluginRegistrant.m in Sources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXSourcesBuildPhase section */
+
+/* Begin PBXVariantGroup section */
+		97C146FA1CF9000F007C117D /* Main.storyboard */ = {
+			isa = PBXVariantGroup;
+			children = (
+				97C146FB1CF9000F007C117D /* Base */,
+			);
+			name = Main.storyboard;
+			sourceTree = "<group>";
+		};
+		97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */ = {
+			isa = PBXVariantGroup;
+			children = (
+				97C147001CF9000F007C117D /* Base */,
+			);
+			name = LaunchScreen.storyboard;
+			sourceTree = "<group>";
+		};
+/* End PBXVariantGroup section */
+
+/* Begin XCBuildConfiguration section */
+		249021D3217E4FDB00AE95B9 /* Profile */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				COPY_PHASE_STRIP = NO;
+				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
+				ENABLE_NS_ASSERTIONS = NO;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu99;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
+				MTL_ENABLE_DEBUG_INFO = NO;
+				SDKROOT = iphoneos;
+				SUPPORTED_PLATFORMS = iphoneos;
+				TARGETED_DEVICE_FAMILY = "1,2";
+				VALIDATE_PRODUCT = YES;
+			};
+			name = Profile;
+		};
+		249021D4217E4FDB00AE95B9 /* Profile */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CLANG_ENABLE_MODULES = YES;
+				CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)";
+				DEVELOPMENT_TEAM = 446D3AAR7E;
+				ENABLE_BITCODE = NO;
+				INFOPLIST_FILE = Runner/Info.plist;
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
+				PRODUCT_BUNDLE_IDENTIFIER = com.example.example;
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
+				SWIFT_VERSION = 5.0;
+				VERSIONING_SYSTEM = "apple-generic";
+			};
+			name = Profile;
+		};
+		97C147031CF9000F007C117D /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				COPY_PHASE_STRIP = NO;
+				DEBUG_INFORMATION_FORMAT = dwarf;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				ENABLE_TESTABILITY = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu99;
+				GCC_DYNAMIC_NO_PIC = NO;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_OPTIMIZATION_LEVEL = 0;
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
+					"$(inherited)",
+				);
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
+				MTL_ENABLE_DEBUG_INFO = YES;
+				ONLY_ACTIVE_ARCH = YES;
+				SDKROOT = iphoneos;
+				TARGETED_DEVICE_FAMILY = "1,2";
+			};
+			name = Debug;
+		};
+		97C147041CF9000F007C117D /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				COPY_PHASE_STRIP = NO;
+				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
+				ENABLE_NS_ASSERTIONS = NO;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu99;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
+				MTL_ENABLE_DEBUG_INFO = NO;
+				SDKROOT = iphoneos;
+				SUPPORTED_PLATFORMS = iphoneos;
+				SWIFT_COMPILATION_MODE = wholemodule;
+				SWIFT_OPTIMIZATION_LEVEL = "-O";
+				TARGETED_DEVICE_FAMILY = "1,2";
+				VALIDATE_PRODUCT = YES;
+			};
+			name = Release;
+		};
+		97C147061CF9000F007C117D /* Debug */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = 9740EEB21CF90195004384FC /* Debug.xcconfig */;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CLANG_ENABLE_MODULES = YES;
+				CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)";
+				DEVELOPMENT_TEAM = 446D3AAR7E;
+				ENABLE_BITCODE = NO;
+				INFOPLIST_FILE = Runner/Info.plist;
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
+				PRODUCT_BUNDLE_IDENTIFIER = com.example.example;
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
+				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
+				SWIFT_VERSION = 5.0;
+				VERSIONING_SYSTEM = "apple-generic";
+			};
+			name = Debug;
+		};
+		97C147071CF9000F007C117D /* Release */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CLANG_ENABLE_MODULES = YES;
+				CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)";
+				DEVELOPMENT_TEAM = 446D3AAR7E;
+				ENABLE_BITCODE = NO;
+				INFOPLIST_FILE = Runner/Info.plist;
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
+				PRODUCT_BUNDLE_IDENTIFIER = com.example.example;
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
+				SWIFT_VERSION = 5.0;
+				VERSIONING_SYSTEM = "apple-generic";
+			};
+			name = Release;
+		};
+/* End XCBuildConfiguration section */
+
+/* Begin XCConfigurationList section */
+		97C146E91CF9000F007C117D /* Build configuration list for PBXProject "Runner" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				97C147031CF9000F007C117D /* Debug */,
+				97C147041CF9000F007C117D /* Release */,
+				249021D3217E4FDB00AE95B9 /* Profile */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+		97C147051CF9000F007C117D /* Build configuration list for PBXNativeTarget "Runner" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				97C147061CF9000F007C117D /* Debug */,
+				97C147071CF9000F007C117D /* Release */,
+				249021D4217E4FDB00AE95B9 /* Profile */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+/* End XCConfigurationList section */
+	};
+	rootObject = 97C146E61CF9000F007C117D /* Project object */;
+}
--- a/frontend/app_flowy/packages/flowy_editor/example/ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata
+++ b/frontend/app_flowy/packages/flowy_editor/example/ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Workspace
+   version = "1.0">
+   <FileRef
+      location = "self:">
+   </FileRef>
+</Workspace>
--- a/frontend/app_flowy/packages/flowy_editor/example/ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
+++ b/frontend/app_flowy/packages/flowy_editor/example/ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>
--- a/frontend/app_flowy/packages/flowy_editor/example/ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings
+++ b/frontend/app_flowy/packages/flowy_editor/example/ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>PreviewsEnabled</key>
+	<false/>
+</dict>
+</plist>
--- a/Show More
+++ b/Show More