feat(core): set doc mode and primary doc mode separately (#8359)

https://github.com/user-attachments/assets/98c282f2-4c53-475f-bf10-936a626c2630
toeverything · Oct 17, 2024 · bfb8d58 · bfb8d58
1 parent 7dae5c5
commit bfb8d58
Show file tree

Hide file tree

Showing 15 changed files with 192 additions and 90 deletions.
diff --git a/packages/common/infra/src/modules/doc/constants.ts b/packages/common/infra/src/modules/doc/constants.ts
@@ -11,4 +11,9 @@ export const BUILT_IN_CUSTOM_PROPERTY_TYPE = [
     type: 'tags',
     index: 'a0000001',
   },
+  {
+    id: 'docPrimaryMode',
+    type: 'docPrimaryMode',
+    show: 'always-hide',
+  },
 ] as DocCustomPropertyInfo[];
diff --git a/packages/frontend/component/src/ui/property/property.css.ts b/packages/frontend/component/src/ui/property/property.css.ts
@@ -65,6 +65,7 @@ export const hide = style({
 export const propertyNameContainer = style({
   display: 'flex',
   flexDirection: 'column',
+  justifyContent: 'center',
   position: 'relative',
   borderRadius: 4,
   fontSize: cssVar('fontSm'),

diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx
@@ -1,4 +1,4 @@
-import { toast } from '@affine/component';
+import { notify } from '@affine/component';
 import {
   Menu,
   MenuItem,
@@ -74,6 +74,7 @@ export const PageHeaderMenuButton = ({
     editorService.editor.doc.meta$.map(meta => meta.trash)
   );
   const currentMode = useLiveData(editorService.editor.mode$);
+  const primaryMode = useLiveData(editorService.editor.doc.primaryMode$);
 
   const workbench = useService(WorkbenchService).workbench;
 
@@ -148,16 +149,22 @@ export const PageHeaderMenuButton = ({
   }, [rename]);
 
   const handleSwitchMode = useCallback(() => {
-    editorService.editor.toggleMode();
+    const mode = primaryMode === 'page' ? 'edgeless' : 'page';
+    editorService.editor.doc.setPrimaryMode(mode);
     track.$.header.docOptions.switchPageMode({
-      mode: currentMode === 'page' ? 'edgeless' : 'page',
+      mode,
     });
-    toast(
-      currentMode === 'page'
-        ? t['com.affine.toastMessage.edgelessMode']()
-        : t['com.affine.toastMessage.pageMode']()
-    );
-  }, [currentMode, editorService, t]);
+    notify.success({
+      title:
+        primaryMode === 'page'
+          ? t['com.affine.toastMessage.defaultMode.edgeless.title']()
+          : t['com.affine.toastMessage.defaultMode.page.title'](),
+      message:
+        primaryMode === 'page'
+          ? t['com.affine.toastMessage.defaultMode.edgeless.message']()
+          : t['com.affine.toastMessage.defaultMode.page.message'](),
+    });
+  }, [primaryMode, editorService, t]);
 
   const handleMenuOpenChange = useCallback((open: boolean) => {
     if (open) {
@@ -264,14 +271,13 @@ export const PageHeaderMenuButton = ({
         </MenuItem>
       )}
       <MenuItem
-        prefixIcon={currentMode === 'page' ? <EdgelessIcon /> : <PageIcon />}
+        prefixIcon={primaryMode === 'page' ? <EdgelessIcon /> : <PageIcon />}
         data-testid="editor-option-menu-edgeless"
         onSelect={handleSwitchMode}
       >
-        {t['Convert to ']()}
-        {currentMode === 'page'
-          ? t['com.affine.pageMode.edgeless']()
-          : t['com.affine.pageMode.page']()}
+        {primaryMode === 'page'
+          ? t['com.affine.editorDefaultMode.edgeless']()
+          : t['com.affine.editorDefaultMode.page']()}
       </MenuItem>
       <MenuItem
         data-testid="editor-option-menu-favorite"

diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/index.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/index.tsx
@@ -1,4 +1,4 @@
-import { RadioGroup, type RadioItem, toast, Tooltip } from '@affine/component';
+import { RadioGroup, type RadioItem, Tooltip } from '@affine/component';
 import { registerAffineCommand } from '@affine/core/commands';
 import { EditorService } from '@affine/core/modules/editor';
 import { useI18n } from '@affine/i18n';
@@ -41,19 +41,15 @@ export const EditorModeSwitch = () => {
     if (currentMode === 'page' || isSharedMode || trash) return;
     editor.setMode('page');
     editor.setSelector(undefined);
-    editor.doc.setPrimaryMode('page');
-    toast(t['com.affine.toastMessage.pageMode']());
     track.$.header.actions.switchPageMode({ mode: 'page' });
-  }, [currentMode, editor, isSharedMode, t, trash]);
+  }, [currentMode, editor, isSharedMode, trash]);
 
   const toggleEdgeless = useCallback(() => {
     if (currentMode === 'edgeless' || isSharedMode || trash) return;
     editor.setMode('edgeless');
     editor.setSelector(undefined);
-    editor.doc.setPrimaryMode('edgeless');
-    toast(t['com.affine.toastMessage.edgelessMode']());
     track.$.header.actions.switchPageMode({ mode: 'edgeless' });
-  }, [currentMode, editor, isSharedMode, t, trash]);
+  }, [currentMode, editor, isSharedMode, trash]);
 
   const onModeChange = useCallback(
     (mode: DocMode) => {

diff --git a/packages/frontend/core/src/components/doc-properties/types/constant.tsx b/packages/frontend/core/src/components/doc-properties/types/constant.tsx
@@ -3,6 +3,7 @@ import {
   CheckBoxCheckLinearIcon,
   CreatedEditedIcon,
   DateTimeIcon,
+  FileIcon,
   NumberIcon,
   TagIcon,
   TextIcon,
@@ -11,6 +12,7 @@ import {
 import { CheckboxValue } from './checkbox';
 import { CreatedByValue, UpdatedByValue } from './created-updated-by';
 import { DateValue } from './date';
+import { DocPrimaryModeValue } from './doc-primary-mode';
 import { NumberValue } from './number';
 import { TagsValue } from './tags';
 import { TextValue } from './text';
@@ -54,6 +56,11 @@ export const DocPropertyTypes = {
     uniqueId: 'tags',
     renameable: false,
   },
+  docPrimaryMode: {
+    icon: FileIcon,
+    value: DocPrimaryModeValue,
+    name: 'com.affine.page-properties.property.docPrimaryMode',
+  },
 } as Record<
   string,
   {

diff --git a/packages/frontend/core/src/components/doc-properties/types/doc-primary-mode.tsx b/packages/frontend/core/src/components/doc-properties/types/doc-primary-mode.tsx
@@ -0,0 +1,58 @@
+import {
+  notify,
+  PropertyValue,
+  RadioGroup,
+  type RadioItem,
+} from '@affine/component';
+import { useI18n } from '@affine/i18n';
+import type { DocMode } from '@blocksuite/affine/blocks';
+import { DocService, useLiveData, useService } from '@toeverything/infra';
+import { useCallback, useMemo } from 'react';
+
+export const DocPrimaryModeValue = () => {
+  const t = useI18n();
+  const doc = useService(DocService).doc;
+
+  const primaryMode = useLiveData(doc.primaryMode$);
+
+  const DocModeItems = useMemo<RadioItem[]>(
+    () => [
+      {
+        value: 'page' as DocMode,
+        label: t['Page'](),
+      },
+      {
+        value: 'edgeless' as DocMode,
+        label: t['Edgeless'](),
+      },
+    ],
+    [t]
+  );
+
+  const handleChange = useCallback(
+    (mode: DocMode) => {
+      doc.setPrimaryMode(mode);
+      notify.success({
+        title:
+          mode === 'page'
+            ? t['com.affine.toastMessage.defaultMode.page.title']()
+            : t['com.affine.toastMessage.defaultMode.edgeless.title'](),
+        message:
+          mode === 'page'
+            ? t['com.affine.toastMessage.defaultMode.page.message']()
+            : t['com.affine.toastMessage.defaultMode.edgeless.message'](),
+      });
+    },
+    [doc, t]
+  );
+  return (
+    <PropertyValue>
+      <RadioGroup
+        width={194}
+        value={primaryMode}
+        onChange={handleChange}
+        items={DocModeItems}
+      />
+    </PropertyValue>
+  );
+};
diff --git a/packages/frontend/core/src/mobile/pages/workspace/detail/page-header-more-button.tsx b/packages/frontend/core/src/mobile/pages/workspace/detail/page-header-more-button.tsx
@@ -1,4 +1,4 @@
-import { IconButton, toast } from '@affine/component';
+import { IconButton, notify } from '@affine/component';
 import {
   MenuSeparator,
   MobileMenu,
@@ -39,21 +39,29 @@ export const PageHeaderMenuButton = () => {
   const isInTrash = useLiveData(
     editorService.editor.doc.meta$.map(meta => meta.trash)
   );
-  const currentMode = useLiveData(editorService.editor.mode$);
+  const primaryMode = useLiveData(editorService.editor.doc.primaryMode$);
 
   const { favorite, toggleFavorite } = useFavorite(docId);
 
   const handleSwitchMode = useCallback(() => {
-    editorService.editor.toggleMode();
+    const mode = primaryMode === 'page' ? 'edgeless' : 'page';
+    // TODO(@JimmFly): remove setMode when there has view mode switch
+    editorService.editor.setMode(mode);
+    editorService.editor.doc.setPrimaryMode(mode);
     track.$.header.docOptions.switchPageMode({
-      mode: currentMode === 'page' ? 'edgeless' : 'page',
+      mode,
     });
-    toast(
-      currentMode === 'page'
-        ? t['com.affine.toastMessage.edgelessMode']()
-        : t['com.affine.toastMessage.pageMode']()
-    );
-  }, [currentMode, editorService, t]);
+    notify.success({
+      title:
+        primaryMode === 'page'
+          ? t['com.affine.toastMessage.defaultMode.edgeless.title']()
+          : t['com.affine.toastMessage.defaultMode.page.title'](),
+      message:
+        primaryMode === 'page'
+          ? t['com.affine.toastMessage.defaultMode.edgeless.message']()
+          : t['com.affine.toastMessage.defaultMode.page.message'](),
+    });
+  }, [primaryMode, editorService, t]);
 
   const handleMenuOpenChange = useCallback((open: boolean) => {
     if (open) {
@@ -75,14 +83,13 @@ export const PageHeaderMenuButton = () => {
   const EditMenu = (
     <>
       <MobileMenuItem
-        prefixIcon={currentMode === 'page' ? <EdgelessIcon /> : <PageIcon />}
+        prefixIcon={primaryMode === 'page' ? <EdgelessIcon /> : <PageIcon />}
         data-testid="editor-option-menu-mode-switch"
         onSelect={handleSwitchMode}
       >
-        {t['Convert to ']()}
-        {currentMode === 'page'
-          ? t['com.affine.pageMode.edgeless']()
-          : t['com.affine.pageMode.page']()}
+        {primaryMode === 'page'
+          ? t['com.affine.editorDefaultMode.edgeless']()
+          : t['com.affine.editorDefaultMode.page']()}
       </MobileMenuItem>
       <MobileMenuItem
         data-testid="editor-option-menu-favorite"

diff --git a/packages/frontend/i18n/src/i18n-completenesses.json b/packages/frontend/i18n/src/i18n-completenesses.json
@@ -1,22 +1,22 @@
 {
-  "ar": 87,
+  "ar": 86,
   "ca": 6,
   "da": 7,
   "de": 32,
   "en": 100,
-  "es-AR": 16,
+  "es-AR": 15,
   "es-CL": 18,
-  "es": 16,
+  "es": 15,
   "fr": 77,
   "hi": 2,
   "it": 1,
   "ja": 65,
   "ko": 92,
   "pl": 0,
   "pt-BR": 99,
-  "ru": 85,
+  "ru": 84,
   "sv-SE": 5,
   "ur": 3,
   "zh-Hans": 100,
-  "zh-Hant": 100
+  "zh-Hant": 99
 }
diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json
@@ -92,6 +92,7 @@
   "Successfully deleted": "Successfully deleted",
   "Successfully joined!": "Successfully joined!",
   "Switch": "Switch",
+  "switchView": "Switch view",
   "Sync": "Sync",
   "Synced with AFFiNE Cloud": "Synced with AFFiNE Cloud",
   "Tags": "Tags",
@@ -425,6 +426,8 @@
   "com.affine.editCollectionName.createTips": "Collection is a smart folder where you can manually add docs or automatically add docs through rules.",
   "com.affine.editCollectionName.name": "Name",
   "com.affine.editCollectionName.name.placeholder": "Collection name",
+  "com.affine.editorDefaultMode.edgeless": "Default to Edgeless mode",
+  "com.affine.editorDefaultMode.page": "Default to Page mode",
   "com.affine.empty.collection-detail.action.add-doc": "Add docs",
   "com.affine.empty.collection-detail.action.add-rule": "Add rules",
   "com.affine.empty.collection-detail.description": "Collection is a smart folder where you can manually add docs or automatically add docs through rules.",
@@ -527,7 +530,7 @@
   "com.affine.keyboardShortcuts.elbowedConnector": "Elbowed connector",
   "com.affine.keyboardShortcuts.expandOrCollapseSidebar": "Expand/collapse sidebar",
   "com.affine.keyboardShortcuts.goBack": "Go back",
-  "com.affine.keyboardShortcuts.goForward": "Go Forward",
+  "com.affine.keyboardShortcuts.goForward": "Go forward",
   "com.affine.keyboardShortcuts.group": "Group",
   "com.affine.keyboardShortcuts.groupDatabase": "Group as database",
   "com.affine.keyboardShortcuts.hand": "Hand",
@@ -551,7 +554,7 @@
   "com.affine.keyboardShortcuts.straightConnector": "Straight connector",
   "com.affine.keyboardShortcuts.strikethrough": "Strikethrough",
   "com.affine.keyboardShortcuts.subtitle": "Check keyboard shortcuts quickly",
-  "com.affine.keyboardShortcuts.switch": "Switch",
+  "com.affine.keyboardShortcuts.switch": "Switch view",
   "com.affine.keyboardShortcuts.text": "Text",
   "com.affine.keyboardShortcuts.title": "Keyboard shortcuts",
   "com.affine.keyboardShortcuts.unGroup": "Ungroup",
@@ -647,6 +650,7 @@
   "com.affine.page-properties.property.required": "Required",
   "com.affine.page-properties.property.show-in-view": "Show in view",
   "com.affine.page-properties.property.tags": "Tags",
+  "com.affine.page-properties.property.docPrimaryMode": "Doc mode",
   "com.affine.page-properties.property.text": "Text",
   "com.affine.page-properties.property.updatedBy": "Last edited by",
   "com.affine.propertySidebar.property-list.section": "Properties",
@@ -1213,6 +1217,10 @@
   "com.affine.toastMessage.edgelessMode": "Edgeless mode",
   "com.affine.toastMessage.movedTrash": "Moved to trash",
   "com.affine.toastMessage.pageMode": "Page Mode",
+  "com.affine.toastMessage.defaultMode.page.title": "Default mode has changed",
+  "com.affine.toastMessage.defaultMode.page.message": "The default mode for this document has been changed to Page mode",
+  "com.affine.toastMessage.defaultMode.edgeless.title": "Default mode has changed",
+  "com.affine.toastMessage.defaultMode.edgeless.message": "The default mode for this document has been changed to Edgeless mode",
   "com.affine.toastMessage.permanentlyDeleted": "Permanently deleted",
   "com.affine.toastMessage.removedFavorites": "Removed from favourites",
   "com.affine.toastMessage.rename": "Successfully renamed",

diff --git a/packages/frontend/i18n/src/resources/ko.json b/packages/frontend/i18n/src/resources/ko.json
@@ -682,7 +682,6 @@
   "com.affine.editCollectionName.name": "이름",
   "com.affine.editCollectionName.name.placeholder": "컬렉션 이름",
   "com.affine.editor.reference-not-found": "연결된 페이지를 찾을 수 없음",
-  "com.affine.editorModeSwitch.tooltip": "전환",
   "com.affine.empty.collection-detail.action.add-doc": "문서 추가",
   "com.affine.empty.collection-detail.action.add-rule": "규칙 추가",
   "com.affine.empty.collection-detail.description": "컬렉션은 페이지를 수동으로 추가하거나 규칙을 통해 자동으로 페이지를 추가할 수 있는 스마트 폴더입니다.",

diff --git a/packages/frontend/i18n/src/resources/zh-Hans.json b/packages/frontend/i18n/src/resources/zh-Hans.json
@@ -92,6 +92,7 @@
   "Successfully deleted": "成功删除。",
   "Successfully joined!": "加入成功！",
   "Switch": "切换",
+  "switchView": "切换视图",
   "Sync": "同步",
   "Synced with AFFiNE Cloud": "AFFiNE Cloud 同步完成",
   "Tags": "标签",
@@ -438,6 +439,9 @@
   "com.affine.empty.docs.trash-description": "已删除的文档将显示在此处。",
   "com.affine.empty.tags.description": "为您的文档创建一个新标签。",
   "com.affine.empty.tags.title": "标签管理",
+  "com.affine.editorDefaultMode.edgeless": "默认为无界模式",
+  "com.affine.editorDefaultMode.page": "默认为文档模式",
+  "com.affine.editor.reference-not-found": "未找到已链接的文档",
   "com.affine.emptyDesc": "这里还没有文档",
   "com.affine.enableAffineCloudModal.button.cancel": "取消",
   "com.affine.error.hide-error": "隐藏错误详情",
@@ -551,7 +555,7 @@
   "com.affine.keyboardShortcuts.straightConnector": "直线连接器快捷键",
   "com.affine.keyboardShortcuts.strikethrough": "删除线",
   "com.affine.keyboardShortcuts.subtitle": "快速查看快捷键",
-  "com.affine.keyboardShortcuts.switch": "切换快捷键",
+  "com.affine.keyboardShortcuts.switch": "切换视图快捷键",
   "com.affine.keyboardShortcuts.text": "文本",
   "com.affine.keyboardShortcuts.title": "键盘快捷键",
   "com.affine.keyboardShortcuts.unGroup": "取消分组",
@@ -642,6 +646,7 @@
   "com.affine.page-properties.property.required": "必选",
   "com.affine.page-properties.property.show-in-view": "在视图中显示",
   "com.affine.page-properties.property.tags": "标签",
+  "com.affine.page-properties.property.docPrimaryMode": "文档模式",
   "com.affine.page-properties.property.text": "文本",
   "com.affine.page-properties.property.updatedBy": "最后编辑者",
   "com.affine.page-properties.settings.title": "自定义属性",
@@ -1206,6 +1211,10 @@
   "com.affine.toastMessage.rename": "更名成功",
   "com.affine.toastMessage.restored": "{{title}} 已恢复",
   "com.affine.toastMessage.successfullyDeleted": "删除成功",
+  "com.affine.toastMessage.defaultMode.page.title": "默认模式已更改",
+  "com.affine.toastMessage.defaultMode.page.message": "该文档的默认模式已更改为页面模式",
+  "com.affine.toastMessage.defaultMode.edgeless.title": "默认模式已更改",
+  "com.affine.toastMessage.defaultMode.edgeless.message": "该文档的默认模式已更改为无界模式",
   "com.affine.today": "今天",
   "com.affine.tomorrow": "明日",
   "com.affine.top-tip.mobile": "在移动设备上仅限于查看。",