feat(core): add page width property (#8775)

close AF-1655

packages/common/infra/src/modules/db/schema/schema.ts

@@ -16,6 +16,7 @@ export const AFFiNE_WORKSPACE_DB_SCHEMA = {
     primaryMode: f.string().optional(),
     edgelessColorTheme: f.string().optional(),
     journal: f.string().optional(),
+    pageWidth: f.string().optional(),
   }),
   docCustomPropertyInfo: {
     id: f.string().primaryKey().optional().default(nanoid),

packages/common/infra/src/modules/doc/constants.ts

@@ -45,4 +45,10 @@ export const BUILT_IN_CUSTOM_PROPERTY_TYPE = [
     show: 'always-hide',
     index: 'a0000007',
   },
+  {
+    id: 'pageWidth',
+    type: 'pageWidth',
+    show: 'always-hide',
+    index: 'a0000008',
+  },
 ] as DocCustomPropertyInfo[];

packages/frontend/core/src/commands/affine-settings.tsx

@@ -174,10 +174,10 @@ export function registerAffineSettingsCommands({
     registerAffineCommand({
       id: `affine:change-full-width-layout`,
       label: () =>
-        `${t['com.affine.cmdk.affine.full-width-layout.to']()} ${t[
+        `${t[
           settings$.value.fullWidthLayout
-            ? 'com.affine.cmdk.affine.switch-state.off'
+            ? 'com.affine.cmdk.affine.default-page-width-layout.standard'
-            : 'com.affine.cmdk.affine.switch-state.on'
+            : 'com.affine.cmdk.affine.default-page-width-layout.full-width'
         ]()}`,
       category: 'affine:settings',
       icon: <SettingsIcon />,

packages/frontend/core/src/components/doc-properties/types/constant.tsx

@@ -6,6 +6,7 @@ import {
   EdgelessIcon,
   FileIcon,
   HistoryIcon,
+  LongerIcon,
   NumberIcon,
   TagIcon,
   TextIcon,
@@ -19,6 +20,7 @@ import { DocPrimaryModeValue } from './doc-primary-mode';
 import { EdgelessThemeValue } from './edgeless-theme';
 import { JournalValue } from './journal';
 import { NumberValue } from './number';
+import { PageWidthValue } from './page-width';
 import { TagsValue } from './tags';
 import { TextValue } from './text';
 import type { PropertyValueProps } from './types';
@@ -100,6 +102,12 @@ export const DocPropertyTypes = {
     name: 'com.affine.page-properties.property.edgelessTheme',
     description: 'com.affine.page-properties.property.edgelessTheme.tooltips',
   },
+  pageWidth: {
+    icon: LongerIcon,
+    value: PageWidthValue,
+    name: 'com.affine.page-properties.property.pageWidth',
+    description: 'com.affine.page-properties.property.pageWidth.tooltips',
+  },
 } as Record<
   string,
   {

packages/frontend/core/src/components/doc-properties/types/page-width.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+export const container = style({
+  paddingTop: '3px',
+  paddingBottom: '3px',
+});

packages/frontend/core/src/components/doc-properties/types/page-width.tsx

@@ -0,0 +1,61 @@
+import { PropertyValue, RadioGroup, type RadioItem } from '@affine/component';
+import { EditorSettingService } from '@affine/core/modules/editor-setting';
+import { useI18n } from '@affine/i18n';
+import { DocService, useLiveData, useService } from '@toeverything/infra';
+import { useCallback, useMemo } from 'react';
+
+import { container } from './page-width.css';
+import type { PageLayoutMode } from './types';
+
+export const PageWidthValue = () => {
+  const t = useI18n();
+  const editorSetting = useService(EditorSettingService).editorSetting;
+  const defaultPageWidth = useLiveData(editorSetting.settings$).fullWidthLayout;
+
+  const doc = useService(DocService).doc;
+  const pageWidth = useLiveData(doc.properties$.selector(p => p.pageWidth));
+
+  const radioValue =
+    pageWidth ??
+    ((defaultPageWidth ? 'fullWidth' : 'standard') as PageLayoutMode);
+
+  const radioItems = useMemo<RadioItem[]>(
+    () => [
+      {
+        value: 'standard' as PageLayoutMode,
+        label:
+          t[
+            'com.affine.settings.editorSettings.page.default-page-width.standard'
+          ](),
+        testId: 'standard-width-trigger',
+      },
+      {
+        value: 'fullWidth' as PageLayoutMode,
+        label:
+          t[
+            'com.affine.settings.editorSettings.page.default-page-width.full-width'
+          ](),
+        testId: 'full-width-trigger',
+      },
+    ],
+    [t]
+  );
+
+  const handleChange = useCallback(
+    (value: PageLayoutMode) => {
+      doc.record.setProperty('pageWidth', value);
+    },
+    [doc]
+  );
+  return (
+    <PropertyValue className={container} hoverable={false}>
+      <RadioGroup
+        width={194}
+        itemHeight={24}
+        value={radioValue}
+        onChange={handleChange}
+        items={radioItems}
+      />
+    </PropertyValue>
+  );
+};

packages/frontend/core/src/components/doc-properties/types/types.ts

@@ -5,3 +5,5 @@ export interface PropertyValueProps {
   value: any;
   onChange: (value: any) => void;
 }
+
+export type PageLayoutMode = 'standard' | 'fullWidth';

packages/frontend/core/src/components/hooks/affine/use-register-blocksuite-editor-commands.tsx

@@ -5,6 +5,7 @@ import {
 } from '@affine/core/commands';
 import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
 import type { Editor } from '@affine/core/modules/editor';
+import { EditorSettingService } from '@affine/core/modules/editor-setting';
 import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/favorite';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useI18n } from '@affine/i18n';
@@ -30,6 +31,11 @@ export function useRegisterBlocksuiteEditorCommands(editor: Editor) {
   const t = useI18n();
   const workspace = useService(WorkspaceService).workspace;
 
+  const editorSetting = useService(EditorSettingService).editorSetting;
+  const defaultPageWidth = useLiveData(editorSetting.settings$).fullWidthLayout;
+  const pageWidth = useLiveData(doc.properties$.selector(p => p.pageWidth));
+  const checked = pageWidth ? pageWidth === 'fullWidth' : defaultPageWidth;
+
   const favAdapter = useService(CompatibleFavoriteItemsAdapter);
   const favorite = useLiveData(favAdapter.isFavorite$(docId, 'doc'));
   const trash = useLiveData(doc.trash$);
@@ -159,6 +165,24 @@ export function useRegisterBlocksuiteEditorCommands(editor: Editor) {
       })
     );
 
+    unsubs.push(
+      registerAffineCommand({
+        id: `editor:page-set-width`,
+        preconditionStrategy: () => mode === 'page',
+        category: `editor:page`,
+        icon: <PageIcon />,
+        label: checked
+          ? t['com.affine.cmdk.affine.current-page-width-layout.standard']()
+          : t['com.affine.cmdk.affine.current-page-width-layout.full-width'](),
+        async run() {
+          doc.record.setProperty(
+            'pageWidth',
+            checked ? 'standard' : 'fullWidth'
+          );
+        },
+      })
+    );
+
     // TODO(@Peng): should not show duplicate for journal
     unsubs.push(
       registerAffineCommand({
@@ -308,5 +332,8 @@ export function useRegisterBlocksuiteEditorCommands(editor: Editor) {
     docId,
     doc,
     openInfoModal,
+    pageWidth,
+    defaultPageWidth,
+    checked,
   ]);
 }

packages/frontend/core/src/components/page-detail-editor.tsx

@@ -1,7 +1,7 @@
 import './page-detail-editor.css';
 
 import type { AffineEditorContainer } from '@blocksuite/affine/presets';
-import { useLiveData, useService } from '@toeverything/infra';
+import { DocService, useLiveData, useService } from '@toeverything/infra';
 import { cssVar } from '@toeverything/theme';
 import clsx from 'clsx';
 import type { CSSProperties } from 'react';
@@ -33,6 +33,9 @@ export const PageDetailEditor = ({ onLoad }: PageDetailEditorProps) => {
   const mode = useLiveData(editor.mode$);
   const defaultOpenProperty = useLiveData(editor.defaultOpenProperty$);
 
+  const doc = useService(DocService).doc;
+  const pageWidth = useLiveData(doc.properties$.selector(p => p.pageWidth));
+
   const isSharedMode = editor.isSharedMode;
   const editorSetting = useService(EditorSettingService).editorSetting;
   const settings = useLiveData(
@@ -42,6 +45,9 @@ export const PageDetailEditor = ({ onLoad }: PageDetailEditorProps) => {
       fullWidthLayout: s.fullWidthLayout,
     }))
   );
+  const fullWidthLayout = pageWidth
+    ? pageWidth === 'fullWidth'
+    : settings.fullWidthLayout;
 
   const value = useMemo(() => {
     const fontStyle = fontStyleOptions.find(
@@ -60,7 +66,7 @@ export const PageDetailEditor = ({ onLoad }: PageDetailEditorProps) => {
   return (
     <Editor
       className={clsx(styles.editor, {
-        'full-screen': !isSharedMode && settings.fullWidthLayout,
+        'full-screen': !isSharedMode && fullWidthLayout,
         'is-public': isSharedMode,
       })}
       style={

packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/page.tsx

@@ -1,20 +1,46 @@
-import { Switch } from '@affine/component';
+import { RadioGroup, type RadioItem, Switch } from '@affine/component';
 import {
   SettingRow,
   SettingWrapper,
 } from '@affine/component/setting-components';
+import type { PageLayoutMode } from '@affine/core/components/doc-properties/types/types';
 import { EditorSettingService } from '@affine/core/modules/editor-setting';
 import { useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
+
+import { settingWrapper } from './style.css';
 
 export const Page = () => {
   const t = useI18n();
   const editorSetting = useService(EditorSettingService).editorSetting;
   const settings = useLiveData(editorSetting.settings$);
 
+  const radioItems = useMemo<RadioItem[]>(
+    () => [
+      {
+        value: 'standard' as PageLayoutMode,
+        label:
+          t[
+            'com.affine.settings.editorSettings.page.default-page-width.standard'
+          ](),
+        testId: 'standard-width-trigger',
+      },
+      {
+        value: 'fullWidth' as PageLayoutMode,
+        label:
+          t[
+            'com.affine.settings.editorSettings.page.default-page-width.full-width'
+          ](),
+        testId: 'full-width-trigger',
+      },
+    ],
+    [t]
+  );
+
   const handleFullWidthLayoutChange = useCallback(
-    (checked: boolean) => {
+    (value: PageLayoutMode) => {
+      const checked = value === 'fullWidth';
       editorSetting.set('fullWidthLayout', checked);
     },
     [editorSetting]
@@ -35,14 +61,18 @@ export const Page = () => {
   return (
     <SettingWrapper title={t['com.affine.settings.editorSettings.page']()}>
       <SettingRow
-        name={t['com.affine.settings.editorSettings.page.full-width.title']()}
+        name={t[
+          'com.affine.settings.editorSettings.page.default-page-width.title'
+        ]()}
         desc={t[
-          'com.affine.settings.editorSettings.page.full-width.description'
+          'com.affine.settings.editorSettings.page.default-page-width.description'
         ]()}
       >
-        <Switch
+        <RadioGroup
-          data-testid="full-width-layout-trigger"
+          items={radioItems}
-          checked={settings.fullWidthLayout}
+          value={settings.fullWidthLayout ? 'fullWidth' : 'standard'}
+          width={250}
+          className={settingWrapper}
           onChange={handleFullWidthLayoutChange}
         />
       </SettingRow>

packages/frontend/i18n/src/i18n-completenesses.json

@@ -7,16 +7,16 @@
   "es-AR": 14,
   "es-CL": 16,
   "es": 14,
-  "fr": 71,
+  "fr": 70,
   "hi": 2,
   "it": 1,
   "ja": 94,
-  "ko": 84,
+  "ko": 83,
   "pl": 0,
   "pt-BR": 91,
-  "ru": 78,
+  "ru": 77,
   "sv-SE": 5,
   "ur": 3,
   "zh-Hans": 95,
-  "zh-Hant": 93
+  "zh-Hant": 92
 }

packages/frontend/i18n/src/resources/en.json

@@ -333,6 +333,10 @@
   "com.affine.cmdk.affine.editor.trash-footer-hint": "This doc has been moved to the trash, you can either restore or permanently delete it.",
   "com.affine.cmdk.affine.font-style.to": "Change font style to",
   "com.affine.cmdk.affine.full-width-layout.to": "Change full width layout to",
+  "com.affine.cmdk.affine.default-page-width-layout.standard": "Change default width for new pages in to standard",
+  "com.affine.cmdk.affine.default-page-width-layout.full-width": "Change default width for new pages in to full width",
+  "com.affine.cmdk.affine.current-page-width-layout.standard": "Change current page width to standard",
+  "com.affine.cmdk.affine.current-page-width-layout.full-width": "Change current page width to full width",
   "com.affine.cmdk.affine.getting-started": "Getting started",
   "com.affine.cmdk.affine.import-workspace": "Import workspace",
   "com.affine.cmdk.affine.insert-link": "Insert this link to the current doc",
@@ -681,6 +685,7 @@
   "com.affine.page-properties.property.createdAt": "Created",
   "com.affine.page-properties.property.updatedAt": "Updated",
   "com.affine.page-properties.property.edgelessTheme": "Edgeless theme",
+  "com.affine.page-properties.property.pageWidth": "Page width",
   "com.affine.page-properties.property.tags.tooltips": "Add relevant identifiers or categories to the doc. Useful for organizing content, improving searchability, and grouping related docs together.",
   "com.affine.page-properties.property.journal.tooltips": "Indicates that this doc is a journal entry or daily note. Facilitates easy capture of ideas, quick logging of thoughts, and ongoing personal reflection.",
   "com.affine.page-properties.property.checkbox.tooltips": "Use a checkbox to indicate whether a condition is true or false. Useful for confirming options, toggling features, or tracking task states.",
@@ -698,6 +703,7 @@
   "com.affine.page-properties.property.createdAt.tooltips": "Track when a doc was first created. Useful for maintaining record history, sorting by creation date, or auditing content chronologically.",
   "com.affine.page-properties.property.docPrimaryMode.tooltips": "Select the doc mode from Page Mode, Edgeless Mode, or Auto. Useful for choosing the best display for your content.",
   "com.affine.page-properties.property.edgelessTheme.tooltips": "Select the doc theme from Light, Dark, or System. Useful for precise control over content viewing style.",
+  "com.affine.page-properties.property.pageWidth.tooltips": "Control the width of this page to fit content display needs.",
   "com.affine.propertySidebar.property-list.section": "Properties",
   "com.affine.propertySidebar.add-more.section": "Add more properties",
   "com.affine.page-properties.settings.title": "customize properties",
@@ -1132,6 +1138,10 @@
   "com.affine.settings.editorSettings.page.display-doc-info.title": "Display doc info",
   "com.affine.settings.editorSettings.page.full-width.description": "Maximise display of content within a page.",
   "com.affine.settings.editorSettings.page.full-width.title": "Full width layout",
+  "com.affine.settings.editorSettings.page.default-page-width.title": "Default page width",
+  "com.affine.settings.editorSettings.page.default-page-width.description": "Set default width for new pages, individual pages can override.",
+  "com.affine.settings.editorSettings.page.default-page-width.standard": "Standard",
+  "com.affine.settings.editorSettings.page.default-page-width.full-width": "Full width",
   "com.affine.settings.editorSettings.page.edgeless-default-theme.description": "Set edgeless default color scheme.",
   "com.affine.settings.editorSettings.page.edgeless-default-theme.title": "Edgeless default theme",
   "com.affine.settings.editorSettings.page.edgeless-default-theme.specified": "Specified by current color mode",

packages/frontend/i18n/src/resources/zh-Hans.json

@@ -330,6 +330,10 @@
   "com.affine.cmdk.affine.editor.trash-footer-hint": "该文档已移至回收站，您可以恢复或永久删除它。",
   "com.affine.cmdk.affine.font-style.to": "更改字体样式为",
   "com.affine.cmdk.affine.full-width-layout.to": "更改全宽布局为",
+  "com.affine.cmdk.affine.default-page-width-layout.standard": "将新页面的默认宽度更改为标准",
+  "com.affine.cmdk.affine.default-page-width-layout.full-width": "将新页面的默认宽度更改为全宽",
+  "com.affine.cmdk.affine.current-page-width-layout.standard": "将当前页面宽度更改为标准",
+  "com.affine.cmdk.affine.current-page-width-layout.full-width": "将当前页面宽度更改为全宽",
   "com.affine.cmdk.affine.getting-started": "开始使用",
   "com.affine.cmdk.affine.import-workspace": "导入工作区",
   "com.affine.cmdk.affine.insert-link": "将这个链接插入到当前文档",
@@ -666,6 +670,7 @@
   "com.affine.page-properties.property.text": "文本",
   "com.affine.page-properties.property.updatedBy": "最后编辑者",
   "com.affine.page-properties.property.edgelessTheme": "无界配色方案",
+  "com.affine.page-properties.property.pageWidth": "页面宽度",
   "com.affine.page-properties.property.createdAt": "创建时间",
   "com.affine.page-properties.property.updatedAt": "更新时间",
   "com.affine.page-properties.property.tags.tooltips": "为文档添加相关标识或类别，有助于组织内容、提高搜索效率并将相关文档归类。",
@@ -685,6 +690,7 @@
   "com.affine.page-properties.property.createdAt.tooltips": "跟踪文档首次创建的时间。用于维护记录历史、按创建日期排序或按时间顺序审核内容。",
   "com.affine.page-properties.property.docPrimaryMode.tooltips": "选择页面模式、无边界模式或自动模式，适合根据内容选择最佳显示方式。",
   "com.affine.page-properties.property.edgelessTheme.tooltips": "选择浅色、深色或系统主题，精确控制内容的查看样式。",
+  "com.affine.page-properties.property.pageWidth.tooltips": "控制此页面的宽度以适合内容显示需要。",
   "com.affine.page-properties.settings.title": "自定义属性",
   "com.affine.page-properties.tags.open-tags-page": "打开标签页面",
   "com.affine.page-properties.tags.selector-header-title": "选择或者创建一个标签",
@@ -1094,6 +1100,10 @@
   "com.affine.settings.editorSettings.page.display-doc-info.title": "显示文档信息",
   "com.affine.settings.editorSettings.page.full-width.description": "文档内容的最大显示量。",
   "com.affine.settings.editorSettings.page.full-width.title": "全宽布局",
+  "com.affine.settings.editorSettings.page.default-page-width.title": "默认文档页面宽度",
+  "com.affine.settings.editorSettings.page.default-page-width.description": "设置新页面的默认宽度，单独在页面中设置页面宽度属性可以覆盖默认设置。",
+  "com.affine.settings.editorSettings.page.default-page-width.standard": "标准",
+  "com.affine.settings.editorSettings.page.default-page-width.full-width": "全宽",
   "com.affine.settings.editorSettings.page.edgeless-default-theme.description": "设置默认的无界配色方案。",
   "com.affine.settings.editorSettings.page.edgeless-default-theme.title": "无界默认配色方案",
   "com.affine.settings.editorSettings.page.edgeless-default-theme.specified": "由当前应用的配色方案指定",

tests/affine-local/e2e/page-properties.spec.ts

@@ -130,6 +130,7 @@ test('property table reordering', async ({ page }) => {
     'Updated',
     'Created by',
     'Edgeless theme',
+    'Page width',
     'Number',
     'Date',
     'Checkbox',
@@ -174,6 +175,7 @@ test('page info show more will show all properties', async ({ page }) => {
     'Updated',
     'Created by',
     'Edgeless theme',
+    'Page width',
     'Text',
     'Number',
     'Date',

tests/affine-local/e2e/quick-search.spec.ts

@@ -137,7 +137,7 @@ test('Create a new page without keyword', async ({ page }) => {
   await waitForEditorLoad(page);
   await clickNewPageButton(page);
   await openQuickSearchByShortcut(page);
-  const addNewPage = page.locator('[cmdk-item] >> text=New Page');
+  const addNewPage = page.getByText('New page', { exact: true });
   await addNewPage.click();
   await page.waitForTimeout(300);
   await assertTitle(page, '');
@@ -242,7 +242,7 @@ test('Focus title after creating a new page', async ({ page }) => {
   await waitForEditorLoad(page);
   await clickNewPageButton(page);
   await openQuickSearchByShortcut(page);
-  const addNewPage = page.locator('[cmdk-item] >> text=New Page');
+  const addNewPage = page.getByText('New page', { exact: true });
   await addNewPage.click();
   await titleIsFocused(page);
 });
@@ -275,7 +275,7 @@ test('assert the recent browse pages are on the recent list', async ({
 
   // create second page
   await openQuickSearchByShortcut(page);
-  const addNewPage = page.locator('[cmdk-item] >> text=New Page');
+  const addNewPage = page.getByText('New page', { exact: true });
   await addNewPage.click();
   await waitForEditorLoad(page);
   {
@@ -315,7 +315,7 @@ test('assert the recent browse pages are on the recent list', async ({
   await waitForEditorLoad(page);
   await openQuickSearchByShortcut(page);
   {
-    const addNewPage = page.locator('[cmdk-item] >> text=New Page');
+    const addNewPage = page.getByText('New page', { exact: true });
     await addNewPage.click();
   }
   await waitForEditorLoad(page);

tests/affine-local/e2e/settings.spec.ts

@@ -68,7 +68,7 @@ test('Change layout width', async ({ page }) => {
   await waitForEditorLoad(page);
   await openEditorSetting(page);
 
-  await page.getByTestId('full-width-layout-trigger').click();
+  await page.getByTestId('full-width-trigger').click();
 
   const editorWrapper = page.locator('.editor-wrapper');
   const className = await editorWrapper.getAttribute('class');