feat: support document editing

frontend/appflowy_web_app/cypress.config.ts

@@ -22,10 +22,11 @@ export default defineConfig({
     },
     supportFile: 'cypress/support/component.ts',
   },
+  chromeWebSecurity: false,
   retries: {
     // Configure retry attempts for `cypress run`
     // Default is 0
-    runMode: 10,
+    runMode: 16,
     // Configure retry attempts for `cypress open`
     // Default is 0
     openMode: 0,

frontend/appflowy_web_app/cypress/support/component.ts

@@ -17,6 +17,7 @@ import 'cypress-real-events';
 
 // Import commands.js using ES2015 syntax:
 import '@cypress/code-coverage/support';
+import 'cypress-real-events/support';
 import './commands';
 import './document';
 

frontend/appflowy_web_app/cypress/support/document.ts

@@ -114,7 +114,7 @@ export class DocumentTest {
       blockText.applyDelta(child.text);
 
       this.textMap.set(blockId, blockText);
-      
+
       const blockChildren = new Y.Array<BlockId>();
 
       this.childrenMap.set(blockId, blockChildren);
@@ -137,7 +137,7 @@ export class DocumentTest {
       children.push({
         type: child.get(YjsEditorKey.block_type),
         data: JSON.parse(child.get(YjsEditorKey.block_data)),
-        text: this.textMap.get(childId).toDelta(),
+        text: this.textMap.get(childId)?.toDelta() || [],
         children: this.toJSONChildren(childId),
       });
     }

frontend/appflowy_web_app/package.json

@@ -29,6 +29,7 @@
     "@emoji-mart/react": "^1.1.1",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
+    "@floating-ui/react": "^0.26.27",
     "@jest/globals": "^29.7.0",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "6.0.0-alpha.2",
@@ -44,6 +45,7 @@
     "decimal.js": "^10.4.3",
     "dexie": "^4.0.7",
     "dexie-react-hooks": "^1.1.7",
+    "dompurify": "^3.1.7",
     "emoji-mart": "^5.5.2",
     "emoji-regex": "^10.2.1",
     "escape-string-regexp": "^5.0.0",
@@ -122,6 +124,7 @@
     "@tauri-apps/cli": "^1.5.11",
     "@testing-library/react": "^16.0.0",
     "@types/cypress-image-snapshot": "^3.1.9",
+    "@types/dompurify": "^3.0.5",
     "@types/google-protobuf": "^3.15.12",
     "@types/is-hotkey": "^0.1.7",
     "@types/jest": "^29.5.3",

frontend/appflowy_web_app/src/application/database-yjs/context.ts

@@ -69,7 +69,7 @@ export const useViewId = () => {
 export const useReadOnly = () => {
   const context = useContext(DatabaseContext);
 
-  return context?.readOnly;
+  return context?.readOnly || true;
 };
 
 export const useDatabaseView = () => {

frontend/appflowy_web_app/src/application/services/js-services/http/http_api.ts

@@ -14,7 +14,7 @@ import {
   Subscriptions,
   SubscriptionPlan,
   SubscriptionInterval,
-  RequestAccessInfoStatus, ViewInfo,
+  RequestAccessInfoStatus, ViewInfo, UpdatePagePayload, CreatePagePayload, CreateSpacePayload, UpdateSpacePayload,
 } from '@/application/types';
 import { GlobalComment, Reaction } from '@/application/comment.type';
 import { initGrantService, refreshToken } from '@/application/services/js-services/http/gotrue';
@@ -30,6 +30,7 @@ import {
 } from '@/application/template.type';
 import axios, { AxiosInstance } from 'axios';
 import dayjs from 'dayjs';
+import { omit } from 'lodash-es';
 
 export * from './gotrue';
 
@@ -1007,7 +1008,7 @@ export async function deleteTemplateCreator (creatorId: string) {
   return Promise.reject(response?.data.message);
 }
 
-export async function uploadFileToCDN (file: File) {
+export async function uploadTemplateAvatar (file: File) {
   const url = '/api/template-center/avatar';
   const formData = new FormData();
 
@@ -1236,3 +1237,131 @@ export async function uploadImportFile (presignedUrl: string, file: File, onProg
   });
 }
 
+export async function addAppPage (workspaceId: string, parentViewId: string, {
+  layout,
+  name,
+}: CreatePagePayload) {
+  const url = `/api/workspace/${workspaceId}/page-view`;
+  const response = await axiosInstance?.post<{
+    code: number;
+    data: {
+      view_id: string;
+    };
+    message: string;
+  }>(url, {
+    parent_view_id: parentViewId,
+    layout,
+    name,
+  });
+
+  if (response?.data.code === 0) {
+    return response?.data.data.view_id;
+  }
+
+  return Promise.reject(response?.data);
+}
+
+export async function updatePage (workspaceId: string, viewId: string, data: UpdatePagePayload) {
+  const url = `/api/workspace/${workspaceId}/page-view/${viewId}`;
+
+  const res = await axiosInstance?.patch<{
+    code: number;
+    message: string;
+  }>(url, data);
+
+  if (res?.data.code === 0) {
+    return;
+  }
+
+  return Promise.reject(res?.data);
+}
+
+export async function deleteTrash (workspaceId: string, viewId?: string) {
+  const url = `/api/workspace/${workspaceId}/page-view/trash/${viewId}`;
+  const response = await axiosInstance?.delete<{
+    code: number;
+    message: string;
+  }>(url);
+
+  if (response?.data.code === 0) {
+    return;
+  }
+
+  return Promise.reject(response?.data);
+}
+
+export async function moveToTrash (workspaceId: string, viewId: string) {
+  const url = `/api/workspace/${workspaceId}/page-view/${viewId}/move-to-trash`;
+  const response = await axiosInstance?.post<{
+    code: number;
+    message: string;
+  }>(url);
+
+  if (response?.data.code === 0) {
+    return;
+  }
+
+  return Promise.reject(response?.data);
+}
+
+export async function movePageTo (workspaceId: string, viewId: string, parentViewId: string) {
+  const url = `/api/workspace/${workspaceId}/page-view/${viewId}/move`;
+  const response = await axiosInstance?.post<{
+    code: number;
+    message: string;
+  }>(url, {
+    parent_view_id: parentViewId,
+  });
+
+  if (response?.data.code === 0) {
+    return;
+  }
+
+  return Promise.reject(response?.data);
+}
+
+export async function restorePage (workspaceId: string, viewId?: string) {
+  const url = viewId ? `/api/workspace/${workspaceId}/page-view/${viewId}/restore-from-trash` : `/api/workspace/${workspaceId}/restore-all-pages-from-trash`;
+  const response = await axiosInstance?.post<{
+    code: number;
+    message: string;
+  }>(url);
+
+  if (response?.data.code === 0) {
+    return;
+  }
+
+  return Promise.reject(response?.data);
+}
+
+export async function createSpace (workspaceId: string, payload: CreateSpacePayload) {
+  const url = `/api/workspace/${workspaceId}/space`;
+  const response = await axiosInstance?.post<{
+    code: number;
+    data: {
+      view_id: string;
+    };
+    message: string;
+  }>(url, payload);
+
+  if (response?.data.code === 0) {
+    return response?.data.data.view_id;
+  }
+
+  return Promise.reject(response?.data);
+}
+
+export async function updateSpace (workspaceId: string, payload: UpdateSpacePayload) {
+  const url = `/api/workspace/${workspaceId}/space/${payload.view_id}`;
+  const data = omit(payload, ['view_id']);
+  const response = await axiosInstance?.patch<{
+    code: number;
+    message: string;
+  }>(url, data);
+
+  if (response?.data.code === 0) {
+    return;
+  }
+
+  return Promise.reject(response?.data);
+}