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

close AF-1655

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={