toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-25 11:24:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor(core): add CustomEditorWrapper

Browse Source
This commit is contained in:
Jimmfly 2024-12-24 12:59:37 +08:00
parent 4173272228
commit ae889e26f1
No known key found for this signature in database
7 changed files with 88 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/frontend/core/package.json
View File

@ -34,6 +34,7 @@
"@radix-ui/react-dialog": "^1.1.3",
"@radix-ui/react-popover": "^1.1.3",
"@radix-ui/react-scroll-area": "^1.2.2",
"@radix-ui/react-slot": "^1.1.1",
"@radix-ui/react-toolbar": "^1.1.1",
"@sentry/react": "^8.44.0",
"@toeverything/pdf-viewer": "^0.1.1",

17
packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx
View File

@ -33,7 +33,10 @@ import {
import { encodeStateAsUpdate } from 'yjs';
import { pageHistoryModalAtom } from '../../atoms/page-history';
import { BlockSuiteEditor } from '../../blocksuite/block-suite-editor';
import {
BlockSuiteEditor,
CustomEditorWrapper,
} from '../../blocksuite/block-suite-editor';
import { PureEditorModeSwitch } from '../../blocksuite/block-suite-mode-switch';
import { AffineErrorBoundary } from '../affine-error-boundary';
import {
@ -131,11 +134,13 @@ const HistoryEditorPreview = ({
<AffineErrorBoundary>
<Scrollable.Root>
<Scrollable.Viewport className="affine-page-viewport">
<BlockSuiteEditor
className={styles.editor}
mode={mode}
page={snapshotPage}
/>
<CustomEditorWrapper>
<BlockSuiteEditor
className={styles.editor}
mode={mode}
page={snapshotPage}
/>
</CustomEditorWrapper>
</Scrollable.Viewport>
<Scrollable.Scrollbar />
</Scrollable.Root>

43
packages/frontend/core/src/components/blocksuite/block-suite-editor/custom-editor-wrapper.tsx Normal file
View File

@ -0,0 +1,43 @@
import {
EditorSettingService,
fontStyleOptions,
} from '@affine/core/modules/editor-setting';
import { Slot } from '@radix-ui/react-slot';
import { useLiveData, useService } from '@toeverything/infra';
import { cssVar } from '@toeverything/theme';
import { type CSSProperties, type ReactNode, useMemo } from 'react';
export const CustomEditorWrapper = ({ children }: { children: ReactNode }) => {
const editorSetting = useService(EditorSettingService).editorSetting;
const settings = useLiveData(
editorSetting.settings$.selector(s => ({
fontFamily: s.fontFamily,
customFontFamily: s.customFontFamily,
fullWidthLayout: s.fullWidthLayout,
}))
);
const value = useMemo(() => {
const fontStyle = fontStyleOptions.find(
option => option.key === settings.fontFamily
);
if (!fontStyle) {
return cssVar('fontSansFamily');
}
const customFontFamily = settings.customFontFamily;
return customFontFamily && fontStyle.key === 'Custom'
? `${customFontFamily}, ${fontStyle.value}`
: fontStyle.value;
}, [settings.customFontFamily, settings.fontFamily]);
return (
<Slot
style={
{
'--affine-font-family': value,
} as CSSProperties
}
>
{children}
</Slot>
);
};

1
packages/frontend/core/src/components/blocksuite/block-suite-editor/index.ts
View File

@ -10,3 +10,4 @@ edgelessEffects();
registerBlocksuitePresetsCustomComponents();
export * from './blocksuite-editor';
export * from './custom-editor-wrapper';

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

@ -2,18 +2,15 @@ import './page-detail-editor.css';
import type { AffineEditorContainer } from '@blocksuite/affine/presets';
import { useLiveData, useService } from '@toeverything/infra';
import { cssVar } from '@toeverything/theme';
import clsx from 'clsx';
import type { CSSProperties } from 'react';
import { useMemo } from 'react';
import { DocService } from '../modules/doc';
import { EditorService } from '../modules/editor';
import { EditorSettingService } from '../modules/editor-setting';
import {
EditorSettingService,
fontStyleOptions,
} from '../modules/editor-setting';
import { BlockSuiteEditor as Editor } from './blocksuite/block-suite-editor';
BlockSuiteEditor as Editor,
CustomEditorWrapper,
} from './blocksuite/block-suite-editor';
import * as styles from './page-detail-editor.css';
declare global {
@ -50,36 +47,19 @@ export const PageDetailEditor = ({ onLoad }: PageDetailEditorProps) => {
? pageWidth === 'fullWidth'
: settings.fullWidthLayout;
const value = useMemo(() => {
const fontStyle = fontStyleOptions.find(
option => option.key === settings.fontFamily
);
if (!fontStyle) {
return cssVar('fontSansFamily');
}
const customFontFamily = settings.customFontFamily;
return customFontFamily && fontStyle.key === 'Custom'
? `${customFontFamily}, ${fontStyle.value}`
: fontStyle.value;
}, [settings.customFontFamily, settings.fontFamily]);
return (
<Editor
className={clsx(styles.editor, {
'full-screen': !isSharedMode && fullWidthLayout,
'is-public': isSharedMode,
})}
style={
{
'--affine-font-family': value,
} as CSSProperties
}
mode={mode}
defaultOpenProperty={defaultOpenProperty}
page={editor.doc.blockSuiteDoc}
shared={isSharedMode}
onEditorReady={onLoad}
/>
<CustomEditorWrapper>
<Editor
className={clsx(styles.editor, {
'full-screen': !isSharedMode && fullWidthLayout,
'is-public': isSharedMode,
})}
mode={mode}
defaultOpenProperty={defaultOpenProperty}
page={editor.doc.blockSuiteDoc}
shared={isSharedMode}
onEditorReady={onLoad}
/>
</CustomEditorWrapper>
);
};

55
packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx
View File

@ -2,14 +2,13 @@ import { Scrollable } from '@affine/component';
import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
import { AIProvider } from '@affine/core/blocksuite/presets/ai';
import { AffineErrorBoundary } from '@affine/core/components/affine/affine-error-boundary';
import { BlockSuiteEditor } from '@affine/core/components/blocksuite/block-suite-editor';
import {
BlockSuiteEditor,
CustomEditorWrapper,
} from '@affine/core/components/blocksuite/block-suite-editor';
import { EditorOutlineViewer } from '@affine/core/components/blocksuite/outline-viewer';
import { PageNotFound } from '@affine/core/desktop/pages/404';
import { EditorService } from '@affine/core/modules/editor';
import {
EditorSettingService,
fontStyleOptions,
} from '@affine/core/modules/editor-setting';
import { DebugLogger } from '@affine/debug';
import {
type EdgelessRootService,
@ -23,9 +22,8 @@ import {
useService,
useServices,
} from '@toeverything/infra';
import { cssVar } from '@toeverything/theme';
import clsx from 'clsx';
import { type CSSProperties, useCallback, useEffect, useMemo } from 'react';
import { useCallback, useEffect } from 'react';
import { WorkbenchService } from '../../../workbench';
import type { DocReferenceInfo } from '../../entities/peek-view';
@ -90,14 +88,6 @@ function DocPeekPreviewEditor({
const workbench = useService(WorkbenchService).workbench;
const peekView = useService(PeekViewService).peekView;
const editorElement = useLiveData(editor.editorContainer$);
const editorSetting = useService(EditorSettingService).editorSetting;
const settings = useLiveData(
editorSetting.settings$.selector(s => ({
fontFamily: s.fontFamily,
customFontFamily: s.customFontFamily,
fullWidthLayout: s.fullWidthLayout,
}))
);
const handleOnEditorReady = useCallback(
(editorContainer: AffineEditorContainer) => {
@ -156,38 +146,21 @@ function DocPeekPreviewEditor({
peekView.close();
}, [doc, peekView, workbench]);
const value = useMemo(() => {
const fontStyle = fontStyleOptions.find(
option => option.key === settings.fontFamily
);
if (!fontStyle) {
return cssVar('fontSansFamily');
}
const customFontFamily = settings.customFontFamily;
return customFontFamily && fontStyle.key === 'Custom'
? `${customFontFamily}, ${fontStyle.value}`
: fontStyle.value;
}, [settings.customFontFamily, settings.fontFamily]);
return (
<AffineErrorBoundary>
<Scrollable.Root>
<Scrollable.Viewport
className={clsx('affine-page-viewport', styles.affineDocViewport)}
>
<BlockSuiteEditor
className={styles.editor}
mode={mode}
page={doc.blockSuiteDoc}
onEditorReady={handleOnEditorReady}
defaultOpenProperty={defaultOpenProperty}
style={
{
'--affine-font-family': value,
} as CSSProperties
}
/>
<CustomEditorWrapper>
<BlockSuiteEditor
className={styles.editor}
mode={mode}
page={doc.blockSuiteDoc}
onEditorReady={handleOnEditorReady}
defaultOpenProperty={defaultOpenProperty}
/>
</CustomEditorWrapper>
</Scrollable.Viewport>
<Scrollable.Scrollbar />
</Scrollable.Root>

1
yarn.lock
View File

@ -370,6 +370,7 @@ __metadata:
"@radix-ui/react-dialog": "npm:^1.1.3"
"@radix-ui/react-popover": "npm:^1.1.3"
"@radix-ui/react-scroll-area": "npm:^1.2.2"
"@radix-ui/react-slot": "npm:^1.1.1"
"@radix-ui/react-toolbar": "npm:^1.1.1"
"@sentry/react": "npm:^8.44.0"
"@swc/core": "npm:^1.10.1"