Thank you!
diff --git a/packages/frontend/component/src/components/block-suite-editor/index.css.ts b/packages/frontend/component/src/components/block-suite-editor/index.css.ts
deleted file mode 100644
index 3b7bd0186d..0000000000
--- a/packages/frontend/component/src/components/block-suite-editor/index.css.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const blockSuiteEditorStyle = style({
- maxWidth: 'var(--affine-editor-width)',
- margin: '0 2rem',
- padding: '0 24px',
-});
-
-export const blockSuiteEditorHeaderStyle = style({
- marginTop: '40px',
- marginBottom: '40px',
-});
diff --git a/packages/frontend/component/src/components/block-suite-editor/index.tsx b/packages/frontend/component/src/components/block-suite-editor/index.tsx
deleted file mode 100644
index 568895e9af..0000000000
--- a/packages/frontend/component/src/components/block-suite-editor/index.tsx
+++ /dev/null
@@ -1,275 +0,0 @@
-import { assertExists } from '@blocksuite/global/utils';
-import { AffineEditorContainer } from '@blocksuite/presets';
-import type { Page } from '@blocksuite/store';
-import clsx from 'clsx';
-import { use } from 'foxact/use';
-import type { CSSProperties, ReactElement } from 'react';
-import {
- forwardRef,
- memo,
- Suspense,
- useEffect,
- useLayoutEffect,
- useRef,
- useState,
-} from 'react';
-import { type Map as YMap } from 'yjs';
-
-import { Skeleton } from '../../ui/skeleton';
-import {
- blockSuiteEditorHeaderStyle,
- blockSuiteEditorStyle,
-} from './index.css';
-import { editorSpecs } from './specs';
-
-interface BlockElement extends Element {
- path: string[];
-}
-
-export type EditorProps = {
- page: Page;
- mode: 'page' | 'edgeless';
- defaultSelectedBlockId?: string;
- onModeChange?: (mode: 'page' | 'edgeless') => void;
- // on Editor instance instantiated
- onLoadEditor?: (editor: AffineEditorContainer) => () => void;
- style?: CSSProperties;
- className?: string;
-};
-
-export type ErrorBoundaryProps = {
- onReset?: () => void;
-};
-
-// a workaround for returning the webcomponent for the given block id
-// by iterating over the children of the rendered dom tree
-const useBlockElementById = (
- container: HTMLElement | null,
- blockId: string | undefined,
- timeout = 1000
-) => {
- const [blockElement, setBlockElement] = useState(null);
- useEffect(() => {
- if (!blockId) {
- return;
- }
- let canceled = false;
- const start = Date.now();
- function run() {
- if (canceled || !container) {
- return;
- }
- const element = container.querySelector(
- `[data-block-id="${blockId}"]`
- ) as BlockElement | null;
- if (element) {
- setBlockElement(element);
- } else if (Date.now() - start < timeout) {
- setTimeout(run, 100);
- }
- }
- run();
- return () => {
- canceled = true;
- };
- }, [container, blockId, timeout]);
- return blockElement;
-};
-
-/**
- * TODO: Define error to unexpected state together in the future.
- */
-export class NoPageRootError extends Error {
- constructor(public page: Page) {
- super('Page root not found when render editor!');
-
- // Log info to let sentry collect more message
- const hasExpectSpace = Array.from(page.rootDoc.spaces.values()).some(
- doc => page.spaceDoc.guid === doc.guid
- );
- const blocks = page.spaceDoc.getMap('blocks') as YMap>;
- const havePageBlock = Array.from(blocks.values()).some(
- block => block.get('sys:flavour') === 'affine:page'
- );
- console.info(
- 'NoPageRootError current data: %s',
- JSON.stringify({
- expectPageId: page.id,
- expectGuid: page.spaceDoc.guid,
- hasExpectSpace,
- blockSize: blocks.size,
- havePageBlock,
- })
- );
- }
-}
-
-/**
- * TODO: Defined async cache to support suspense, instead of reflect symbol to provider persistent error cache.
- */
-const PAGE_LOAD_KEY = Symbol('PAGE_LOAD');
-const PAGE_ROOT_KEY = Symbol('PAGE_ROOT');
-function usePageRoot(page: Page) {
- let load$ = Reflect.get(page, PAGE_LOAD_KEY);
- if (!load$) {
- load$ = page.load();
- Reflect.set(page, PAGE_LOAD_KEY, load$);
- }
- use(load$);
-
- if (!page.root) {
- let root$: Promise | undefined = Reflect.get(page, PAGE_ROOT_KEY);
- if (!root$) {
- root$ = new Promise((resolve, reject) => {
- const disposable = page.slots.rootAdded.once(() => {
- resolve();
- });
- window.setTimeout(() => {
- disposable.dispose();
- reject(new NoPageRootError(page));
- }, 20 * 1000);
- });
- Reflect.set(page, PAGE_ROOT_KEY, root$);
- }
- use(root$);
- }
-
- return page.root;
-}
-
-const BlockSuiteEditorImpl = forwardRef(
- (
- {
- mode,
- page,
- className,
- defaultSelectedBlockId,
- onLoadEditor,
- onModeChange,
- style,
- },
- ref
- ): ReactElement => {
- usePageRoot(page);
-
- assertExists(page, 'page should not be null');
- const editorRef = useRef(null);
- if (editorRef.current === null) {
- editorRef.current = new AffineEditorContainer();
- editorRef.current.autofocus = true;
- }
- const editor = editorRef.current;
- assertExists(editorRef, 'editorRef.current should not be null');
-
- if (editor.mode !== mode) {
- editor.mode = mode;
- }
-
- if (editor.page !== page) {
- editor.page = page;
- editor.docSpecs = editorSpecs.docModeSpecs;
- editor.edgelessSpecs = editorSpecs.edgelessModeSpecs;
- }
-
- if (ref) {
- if (typeof ref === 'function') {
- ref(editor);
- } else {
- ref.current = editor;
- }
- }
-
- useLayoutEffect(() => {
- if (editor) {
- const disposes: (() => void)[] = [];
- const disposeModeSwitch = editor.slots.pageModeSwitched.on(mode => {
- onModeChange?.(mode);
- });
- disposes.push(() => disposeModeSwitch?.dispose());
- if (onLoadEditor) {
- disposes.push(onLoadEditor(editor));
- }
- return () => {
- disposes.forEach(dispose => dispose());
- };
- }
- return;
- }, [editor, onModeChange, onLoadEditor]);
-
- const containerRef = useRef(null);
-
- useEffect(() => {
- const container = containerRef.current;
- if (!container) {
- return;
- }
- container.append(editor);
- return () => {
- editor.remove();
- };
- }, [editor]);
-
- const blockElement = useBlockElementById(
- containerRef.current,
- defaultSelectedBlockId
- );
-
- useEffect(() => {
- if (blockElement) {
- requestIdleCallback(() => {
- blockElement.scrollIntoView({
- behavior: 'smooth',
- block: 'center',
- inline: 'center',
- });
- const selectManager = editor.host?.selection;
- if (!blockElement.path.length || !selectManager) {
- return;
- }
- const newSelection = selectManager.create('block', {
- path: blockElement.path,
- });
- selectManager.set([newSelection]);
- });
- }
- }, [editor, blockElement]);
-
- // issue: https://github.com/toeverything/AFFiNE/issues/2004
- return (
-
- );
- }
-);
-BlockSuiteEditorImpl.displayName = 'BlockSuiteEditorImpl';
-
-export const EditorLoading = memo(function EditorLoading() {
- return (
-
-
- );
-});
-
-export const BlockSuiteEditor = memo(
- forwardRef(
- function BlockSuiteEditor(props, ref): ReactElement {
- return (
- (
- value ? dayjs(value).toDate() : null
- );
- const handleOpenMonthPicker = useCallback(() => {
- setOpenMonthPicker(true);
- }, []);
- const handleCloseMonthPicker = useCallback(() => {
- setOpenMonthPicker(false);
- }, []);
- const handleSelectDate = (date: Date | null) => {
- if (date) {
- setSelectedDate(date);
- onChange(dayjs(date).format('YYYY-MM-DD'));
- setOpenMonthPicker(false);
- }
- };
- const renderCustomHeader = ({
- date,
- decreaseMonth,
- increaseMonth,
- prevMonthButtonDisabled,
- nextMonthButtonDisabled,
- }: {
- date: Date;
- decreaseMonth: () => void;
- increaseMonth: () => void;
- prevMonthButtonDisabled: boolean;
- nextMonthButtonDisabled: boolean;
- }) => {
- const selectedYear = dayjs(date).year();
- const selectedMonth = dayjs(date).month();
- return (
-
-
- {months[selectedMonth]}
-
-
- {selectedYear}
-
-
-
-
-
-
-
-
- {selectedYear}
-
-
-
-
-
-
styles.weekStyle}
- dayClassName={() => styles.dayStyle}
- popperClassName={styles.popperStyle}
- monthClassName={() => styles.mouthsStyle}
- selected={selectedDate}
- onChange={handleSelectDate}
- showPopperArrow={false}
- dateFormat="MMM dd"
- showMonthYearPicker={openMonthPicker}
- shouldCloseOnSelect={!openMonthPicker}
- renderCustomHeader={({
- date,
- decreaseYear,
- increaseYear,
- decreaseMonth,
- increaseMonth,
- prevYearButtonDisabled,
- nextYearButtonDisabled,
- prevMonthButtonDisabled,
- nextMonthButtonDisabled,
- }) =>
- openMonthPicker
- ? renderCustomMonthHeader({
- date,
- decreaseYear,
- increaseYear,
- prevYearButtonDisabled,
- nextYearButtonDisabled,
- })
- : renderCustomHeader({
- date,
- decreaseMonth,
- increaseMonth,
- prevMonthButtonDisabled,
- nextMonthButtonDisabled,
- })
- }
- />
- );
-};
-
-export default AFFiNEDatePicker;
diff --git a/packages/frontend/component/src/components/date-picker/index.tsx b/packages/frontend/component/src/components/date-picker/index.tsx
deleted file mode 100644
index e5ce37c674..0000000000
--- a/packages/frontend/component/src/components/date-picker/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './date-picker';
diff --git a/packages/frontend/component/src/components/notification-center/index.jotai.ts b/packages/frontend/component/src/components/notification-center/index.jotai.ts
index c793112cdc..26bc44de42 100644
--- a/packages/frontend/component/src/components/notification-center/index.jotai.ts
+++ b/packages/frontend/component/src/components/notification-center/index.jotai.ts
@@ -11,7 +11,8 @@ export type Notification = {
progressingBar?: boolean;
multimedia?: React.ReactNode | JSX.Element;
// actions
- undo?: () => Promise;
+ action?: () => Promise;
+ actionLabel?: string;
};
const notificationsBaseAtom = atom([]);
@@ -48,19 +49,19 @@ export const pushNotificationAtom = atom(
set(notificationsBaseAtom, notifications =>
notifications.filter(notification => notification.key !== key)
);
- const undo: (() => Promise) | undefined = newNotification.undo
+ const action: (() => Promise) | undefined = newNotification.action
? (() => {
- const undo: () => Promise = newNotification.undo;
- return async function undoNotificationWrapper() {
+ const action: () => Promise = newNotification.action;
+ return async function actionNotificationWrapper() {
removeNotification();
- return undo();
+ return action();
};
})()
: undefined;
set(notificationsBaseAtom, notifications => [
// push to the top
- { ...newNotification, undo },
+ { ...newNotification, action },
...notifications,
]);
}
diff --git a/packages/frontend/component/src/components/notification-center/index.tsx b/packages/frontend/component/src/components/notification-center/index.tsx
index 73870ad836..712301f437 100644
--- a/packages/frontend/component/src/components/notification-center/index.tsx
+++ b/packages/frontend/component/src/components/notification-center/index.tsx
@@ -2,6 +2,7 @@
// License on the MIT
// https://github.com/emilkowalski/sonner/blob/5cb703edc108a23fd74979235c2f3c4005edd2a7/src/index.tsx
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { CloseIcon, InformationFillDuotoneIcon } from '@blocksuite/icons';
import * as Toast from '@radix-ui/react-toast';
import clsx from 'clsx';
@@ -71,6 +72,7 @@ const typeColorMap = {
};
function NotificationCard(props: NotificationCardProps): ReactNode {
+ const t = useAFFiNEI18N();
const removeNotification = useSetAtom(removeNotificationAtom);
const { notification, notifications, setHeights, heights, index } = props;
@@ -134,7 +136,6 @@ function NotificationCard(props: NotificationCardProps): ReactNode {
notificationNode.style.height = 'auto';
const newHeight = notificationNode.getBoundingClientRect().height;
notificationNode.style.height = originalHeight;
-
setInitialHeight(newHeight);
setHeights(heights => {
@@ -190,9 +191,9 @@ function NotificationCard(props: NotificationCardProps): ReactNode {
};
}, [duration, expand, onClickRemove]);
- const onClickUndo = useCallback(() => {
- if (notification.undo) {
- notification.undo().catch(err => {
+ const onClickAction = useCallback(() => {
+ if (notification.action) {
+ notification.action().catch(err => {
console.error(err);
});
}
@@ -298,7 +299,7 @@ function NotificationCard(props: NotificationCardProps): ReactNode {
{notification.title}
- {notification.undo && (
+ {notification.action && (
- UNDO
+ {notification.actionLabel ??
+ t['com.affine.keyboardShortcuts.undo']()}
)}
{notification.multimedia ? null : (
{
+ return (
+
+
+ );
+};
+
export const PageDetailSkeleton = () => {
return (
diff --git a/packages/frontend/component/src/components/setting-components/storage-progess.tsx b/packages/frontend/component/src/components/setting-components/storage-progess.tsx
index 174b6c83d8..e5cb1c7053 100644
--- a/packages/frontend/component/src/components/setting-components/storage-progess.tsx
+++ b/packages/frontend/component/src/components/setting-components/storage-progess.tsx
@@ -68,7 +68,11 @@ export const StorageProgress = ({
{upgradable ? (
= T extends any
+ ? K extends keyof T
+ ? Omit
+ : T
+ : T;
+type PropsWithoutRef = DistributiveOmit;
+
+/**
+ * Creates a type to be used for the props of a web component used directly in
+ * React JSX.
+ *
+ * Example:
+ *
+ * ```ts
+ * declare module "react" {
+ * namespace JSX {
+ * interface IntrinsicElements {
+ * 'x-foo': WebComponentProps;
+ * }
+ * }
+ * }
+ * ```
+ */
+export type WebComponentProps = React.DetailedHTMLProps<
+ React.HTMLAttributes,
+ I
+> &
+ ElementProps;
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type EmptyObject = {};
+
+/**
+ * Type of the React component wrapping the web component. This is the return
+ * type of `createComponent`.
+ */
+export type ReactWebComponent<
+ I extends HTMLElement,
+ E extends EventNames = EmptyObject,
+> = React.ForwardRefExoticComponent<
+ // TODO(augustjk): Remove and use `React.PropsWithoutRef` when
+ // https://github.com/preactjs/preact/issues/4124 is fixed.
+ PropsWithoutRef> & React.RefAttributes
+>;
+
+// Props derived from custom element class. Currently has limitations of making
+// all properties optional and also surfaces life cycle methods in autocomplete.
+// TODO(augustjk) Consider omitting keyof LitElement to remove "internal"
+// lifecycle methods or allow user to explicitly provide props.
+type ElementProps = Partial>;
+
+// Acceptable props to the React component.
+type ComponentProps = Omit<
+ React.HTMLAttributes,
+ // Prefer type of provided event handler props or those on element over
+ // built-in HTMLAttributes
+ keyof E | keyof ElementProps
+> &
+ EventListeners &
+ ElementProps;
+
+/**
+ * Type used to cast an event name with an event type when providing the
+ * `events` option to `createComponent` for better typing of the event handler
+ * prop.
+ *
+ * Example:
+ *
+ * ```ts
+ * const FooComponent = createComponent({
+ * ...
+ * events: {
+ * onfoo: 'foo' as EventName,
+ * }
+ * });
+ * ```
+ *
+ * `onfoo` prop will have the type `(e: FooEvent) => void`.
+ */
+export type EventName = string & {
+ __eventType: T;
+};
+
+// A key value map matching React prop names to event names.
+type EventNames = Record;
+
+// A map of expected event listener types based on EventNames.
+type EventListeners = {
+ [K in keyof R]?: R[K] extends EventName
+ ? (e: R[K]['__eventType']) => void
+ : (e: Event) => void;
+};
+
+export interface Options<
+ I extends HTMLElement,
+ E extends EventNames = EmptyObject,
+> {
+ react: typeof React;
+ tagName?: string; // default to `div`
+ elementClass: Constructor;
+ events?: E;
+ displayName?: string;
+}
+
+type Constructor = { new (): T };
+
+const reservedReactProperties = new Set([
+ 'children',
+ 'localName',
+ 'ref',
+ 'style',
+ 'className',
+]);
+
+const listenedEvents = new WeakMap>();
+
+/**
+ * Adds an event listener for the specified event to the given node. In the
+ * React setup, there should only ever be one event listener. Thus, for
+ * efficiency only one listener is added and the handler for that listener is
+ * updated to point to the given listener function.
+ */
+const addOrUpdateEventListener = (
+ node: Element,
+ event: string,
+ listener: (event?: Event) => void
+) => {
+ let events = listenedEvents.get(node);
+ if (events === undefined) {
+ listenedEvents.set(node, (events = new Map()));
+ }
+ let handler = events.get(event);
+ if (listener !== undefined) {
+ // If necessary, add listener and track handler
+ if (handler === undefined) {
+ events.set(event, (handler = { handleEvent: listener }));
+ node.addEventListener(event, handler);
+ // Otherwise just update the listener with new value
+ } else {
+ handler.handleEvent = listener;
+ }
+ // Remove listener if one exists and value is undefined
+ } else if (handler !== undefined) {
+ events.delete(event);
+ node.removeEventListener(event, handler);
+ }
+};
+
+/**
+ * Sets properties and events on custom elements. These properties and events
+ * have been pre-filtered so we know they should apply to the custom element.
+ */
+const setProperty = (
+ node: E,
+ name: string,
+ value: unknown,
+ old: unknown,
+ events?: EventNames
+) => {
+ const event = events?.[name];
+ // Dirty check event value.
+ if (event !== undefined && value !== old) {
+ addOrUpdateEventListener(node, event, value as (e?: Event) => void);
+ return;
+ }
+ // But don't dirty check properties; elements are assumed to do this.
+ node[name as keyof E] = value as E[keyof E];
+
+ // This block is to replicate React's behavior for attributes of native
+ // elements where `undefined` or `null` values result in attributes being
+ // removed.
+ // https://github.com/facebook/react/blob/899cb95f52cc83ab5ca1eb1e268c909d3f0961e7/packages/react-dom-bindings/src/client/DOMPropertyOperations.js#L107-L141
+ //
+ // It's only needed here for native HTMLElement properties that reflect
+ // attributes of the same name but don't have that behavior like "id" or
+ // "draggable".
+ if (
+ (value === undefined || value === null) &&
+ name in HTMLElement.prototype
+ ) {
+ node.removeAttribute(name);
+ }
+};
+
+/**
+ * Creates a React component for a custom element. Properties are distinguished
+ * from attributes automatically, and events can be configured so they are added
+ * to the custom element as event listeners.
+ *
+ * note from pengx17:
+ * This is a workaround for https://github.com/lit/lit/issues/4435
+ *
+ * Instead of directly using tag names of the custom elements, we create instance and then
+ * append to the container instead. An issue in this workaround is that the custom element
+ * will always be wrapped in an additional tag (the container, e.g. a div).
+ *
+ * @param options An options bag containing the parameters needed to generate a
+ * wrapped web component.
+ *
+ * @param options.react The React module, typically imported from the `react`
+ * npm package.
+ * @param options.tagName The custom element tag name registered via
+ * `customElements.define`.
+ * @param options.elementClass The custom element class registered via
+ * `customElements.define`.
+ * @param options.events An object listing events to which the component can
+ * listen. The object keys are the event property names passed in via React
+ * props and the object values are the names of the corresponding events
+ * generated by the custom element. For example, given `{onactivate:
+ * 'activate'}` an event function may be passed via the component's `onactivate`
+ * prop and will be called when the custom element fires its `activate` event.
+ * @param options.displayName A React component display name, used in debugging
+ * messages. Default value is inferred from the name of custom element class
+ * registered via `customElements.define`.
+ */
+export const createComponent = <
+ I extends HTMLElement,
+ E extends EventNames = EmptyObject,
+>({
+ react: React,
+ tagName = 'div',
+ elementClass,
+ events,
+ displayName,
+}: Options): ReactWebComponent => {
+ const eventProps = new Set(Object.keys(events ?? {}));
+
+ if (DEV_MODE) {
+ for (const p of reservedReactProperties) {
+ if (p in elementClass.prototype && !(p in HTMLElement.prototype)) {
+ // Note, this effectively warns only for `ref` since the other
+ // reserved props are on HTMLElement.prototype. To address this
+ // would require crawling down the prototype, which doesn't feel worth
+ // it since implementing these properties on an element is extremely
+ // rare.
+ console.warn(
+ `${tagName} contains property ${p} which is a React reserved ` +
+ `property. It will be used by React and not set on the element.`
+ );
+ }
+ }
+ }
+
+ type Props = ComponentProps;
+
+ const ReactComponent = React.forwardRef((props, ref) => {
+ const containerRef = React.useRef(null);
+ const prevPropsRef = React.useRef(null);
+ const elementRef = React.useRef(null);
+
+ // Props to be passed to React.createElement
+ const reactProps: Record = {
+ 'data-lit-react-wrapper': elementClass.name,
+ };
+ const elementProps: Record = {};
+
+ if (elementRef.current === null) {
+ const element = new elementClass();
+ elementRef.current = element;
+ if (typeof ref === 'function') {
+ ref(elementRef.current);
+ } else if (ref) {
+ ref.current = element;
+ }
+ }
+
+ const element = elementRef.current;
+
+ for (const [k, v] of Object.entries(props)) {
+ if (reservedReactProperties.has(k)) {
+ reactProps[k] = v;
+ continue;
+ }
+
+ if (eventProps.has(k) || k in elementClass.prototype) {
+ elementProps[k] = v;
+ continue;
+ }
+
+ reactProps[k] = v;
+ }
+
+ // This one has no dependency array so it'll run on every re-render.
+ React.useLayoutEffect(() => {
+ if (elementRef.current === null) {
+ return;
+ }
+ for (const prop in elementProps) {
+ setProperty(
+ elementRef.current,
+ prop,
+ props[prop],
+ prevPropsRef.current ? prevPropsRef.current[prop] : undefined,
+ events
+ );
+ }
+ // Note, the spirit of React might be to "unset" any old values that
+ // are no longer included; however, there's no reasonable value to set
+ // them to so we just leave the previous state as is.
+
+ prevPropsRef.current = props;
+ });
+
+ React.useLayoutEffect(() => {
+ const container = containerRef.current;
+ if (!container) {
+ return;
+ }
+ container.append(element);
+ return () => {
+ element.remove();
+ };
+ }, [element]);
+
+ return React.createElement(tagName, {
+ ...reactProps,
+ ref: React.useCallback(
+ (node: HTMLElement) => {
+ containerRef.current = node;
+ },
+ [containerRef]
+ ),
+ });
+ });
+
+ ReactComponent.displayName = displayName ?? elementClass.name;
+
+ return ReactComponent;
+};
diff --git a/packages/frontend/component/src/lit-react/index.ts b/packages/frontend/component/src/lit-react/index.ts
new file mode 100644
index 0000000000..25f45aab2c
--- /dev/null
+++ b/packages/frontend/component/src/lit-react/index.ts
@@ -0,0 +1 @@
+export { createComponent as createReactComponentFromLit } from './create-component';
diff --git a/packages/frontend/component/src/lit-react/readme.md b/packages/frontend/component/src/lit-react/readme.md
new file mode 100644
index 0000000000..4ea197fb3c
--- /dev/null
+++ b/packages/frontend/component/src/lit-react/readme.md
@@ -0,0 +1,3 @@
+# our custom @lit/react wrapper
+
+The official @lit/react createComponent has an issue with properties that accessed in `connectedCallback` lifecycle hook in lit.
diff --git a/packages/frontend/component/src/theme/global.css b/packages/frontend/component/src/theme/global.css
index 8f51d01a76..dcd9f41f95 100644
--- a/packages/frontend/component/src/theme/global.css
+++ b/packages/frontend/component/src/theme/global.css
@@ -1,4 +1,3 @@
-@import 'react-datepicker/dist/react-datepicker.css';
@import './fonts.css';
* {
@@ -310,3 +309,10 @@ body {
position: relative;
overflow: hidden;
}
+
+/**
+ * A hack to make the anchor wrapper not affect the layout of the page.
+ */
+[data-lit-react-wrapper] {
+ display: contents;
+}
diff --git a/packages/frontend/component/src/ui/date-picker/blocksuite-date-picker.stories.tsx b/packages/frontend/component/src/ui/date-picker/blocksuite-date-picker.stories.tsx
new file mode 100644
index 0000000000..b18a90a7c4
--- /dev/null
+++ b/packages/frontend/component/src/ui/date-picker/blocksuite-date-picker.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { BlocksuiteDatePicker } from './blocksuite-date-picker';
+
+export default {
+ title: 'UI/Date Picker/Blocksuite Date Picker',
+} satisfies Meta;
+
+export const Basic: StoryFn = () => {
+ return (
+
+
+ );
+};
diff --git a/packages/frontend/component/src/ui/date-picker/blocksuite-date-picker.tsx b/packages/frontend/component/src/ui/date-picker/blocksuite-date-picker.tsx
new file mode 100644
index 0000000000..fa97bc93c1
--- /dev/null
+++ b/packages/frontend/component/src/ui/date-picker/blocksuite-date-picker.tsx
@@ -0,0 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { DatePicker } from '@blocksuite/blocks/src/_common/components/date-picker/index';
+import { createComponent } from '@lit/react';
+import React from 'react';
+
+export const BlocksuiteDatePicker = createComponent({
+ tagName: 'date-picker',
+ elementClass: DatePicker,
+ react: React,
+ events: {},
+});
diff --git a/packages/frontend/component/src/ui/date-picker/date-picker.stories.tsx b/packages/frontend/component/src/ui/date-picker/date-picker.stories.tsx
new file mode 100644
index 0000000000..dd652b5ea4
--- /dev/null
+++ b/packages/frontend/component/src/ui/date-picker/date-picker.stories.tsx
@@ -0,0 +1,37 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import dayjs from 'dayjs';
+import { useState } from 'react';
+
+import { AFFiNEDatePicker } from '.';
+
+export default {
+ title: 'UI/Date Picker/Date Picker',
+} satisfies Meta;
+
+const _format = 'YYYY-MM-DD';
+
+const Template: StoryFn = args => {
+ const [date, setDate] = useState(dayjs().format(_format));
+ return (
+
+
Selected Date: {date}
+
+
{
+ setDate(dayjs(e, _format).format(_format));
+ }}
+ />
+ = Template.bind(undefined);
+Basic.args = {};
+
+export const Inline: StoryFn =
+ Template.bind(undefined);
+Inline.args = {
+ inline: true,
+};
diff --git a/packages/frontend/component/src/ui/date-picker/date-picker.tsx b/packages/frontend/component/src/ui/date-picker/date-picker.tsx
new file mode 100644
index 0000000000..268728a641
--- /dev/null
+++ b/packages/frontend/component/src/ui/date-picker/date-picker.tsx
@@ -0,0 +1,274 @@
+import {
+ ArrowDownSmallIcon,
+ ArrowLeftSmallIcon,
+ ArrowRightSmallIcon,
+} from '@blocksuite/icons';
+import clsx from 'clsx';
+import dayjs from 'dayjs';
+import { type HTMLAttributes, useCallback, useEffect, useState } from 'react';
+import DatePicker, { type ReactDatePickerProps } from 'react-datepicker';
+
+import * as styles from './index.css';
+const months = [
+ 'January',
+ 'February',
+ 'March',
+ 'April',
+ 'May',
+ 'June',
+ 'July',
+ 'August',
+ 'September',
+ 'October',
+ 'November',
+ 'December',
+];
+export interface AFFiNEDatePickerProps
+ extends Omit {
+ value?: string;
+ onChange?: (value: string) => void;
+ onSelect?: (value: string) => void;
+}
+
+interface HeaderLayoutProps extends HTMLAttributes {
+ length: number;
+ left: React.ReactNode;
+ right: React.ReactNode;
+}
+
+/**
+ * The `DatePicker` should work with different width
+ * This is a hack to make header's item align with calendar cell's label, **instead of the cell**
+ * @param length: number of items that calendar body row has
+ */
+const HeaderLayout = ({
+ length,
+ left,
+ right,
+ className,
+ ...attrs
+}: HeaderLayoutProps) => {
+ return (
+
+ {Array.from({ length })
+ .fill(0)
+ .map((_, index) => {
+ const isLeft = index === 0;
+ const isRight = index === length - 1;
+ return (
+
+
+ {isLeft ? left : isRight ? right : null}
+
+
+ );
+ })}
+
(
+ value ? dayjs(value).toDate() : null
+ );
+ const handleOpenMonthPicker = useCallback(() => {
+ setOpenMonthPicker(true);
+ }, []);
+ const handleCloseMonthPicker = useCallback(() => {
+ setOpenMonthPicker(false);
+ }, []);
+ const handleDateChange = (date: Date | null) => {
+ if (date) {
+ setSelectedDate(date);
+ onChange?.(dayjs(date).format('YYYY-MM-DD'));
+ setOpenMonthPicker(false);
+ }
+ };
+ const handleDateSelect = (date: Date | null) => {
+ if (date) {
+ onSelect?.(dayjs(date).format('YYYY-MM-DD'));
+ setOpenMonthPicker(false);
+ }
+ };
+ const renderCustomHeader = ({
+ date,
+ decreaseMonth,
+ increaseMonth,
+ prevMonthButtonDisabled,
+ nextMonthButtonDisabled,
+ }: {
+ date: Date;
+ decreaseMonth: () => void;
+ increaseMonth: () => void;
+ prevMonthButtonDisabled: boolean;
+ nextMonthButtonDisabled: boolean;
+ }) => {
+ const selectedYear = dayjs(date).year();
+ const selectedMonth = dayjs(date).month();
+ return (
+
+
+ {months[selectedMonth]}
+
+
+ {selectedYear}
+
+
+
+ {selectedYear}
+
+ }
+ right={
+ 
-## Data Compatibility
-
-Data compatibility is a very important issue for us. We will try our best to ensure that the data is compatible with the previous version.
-
-If you encounter any problems when upgrading the version, please feel free to [contact us](mailto:developer@toeverything.info).
-
-| AFFiNE Version | Export/Import workspace | Data auto migration |
-| --------------- | ----------------------- | ------------------- |
-| <= 0.5.4 | ❌️ | ❌ |
-| 0.6.x | ✅️ | ✅ |
-| 0.7.x | ✅️ | ✅ |
-| 0.8.x (current) | ✅ | ✅ |
-| 0.9.x (next) | 🚧 | 🚧 |
-
-- ❌️: Not compatible
-- ✅: Compatible
-- 🚧: Work in progress
-
## Self-Host
> We know that the self-host version has been out of date for a long time.
diff --git a/nx.json b/nx.json
index 69c3b1f5ef..a1c0114cf4 100644
--- a/nx.json
+++ b/nx.json
@@ -1,12 +1,13 @@
{
"$schema": "./node_modules/nx/schemas/nx-schema.json",
"npmScope": "toeverything",
+ "nxCloudAccessToken": "MzUwNTU4YWItZGFhYi00YjE2LWIxODAtODk4NmIwYjMwYzZkfHJlYWQ=",
"tasksRunnerOptions": {
"default": {
"runner": "nx-cloud",
"options": {
"cacheableOperations": ["build", "test", "e2e", "lint"],
- "accessToken": "YmQ2NTg1ODktZTk5Mi00YzhiLTk2ZmUtNWQzMDg0NDBkOWM3fHJlYWQtb25seQ=="
+ "runtimeCacheInputs": ["node -v"]
}
}
},
diff --git a/package.json b/package.json
index dd8bbf264b..070c3c5434 100644
--- a/package.json
+++ b/package.json
@@ -61,8 +61,7 @@
"@istanbuljs/schema": "^0.1.3",
"@magic-works/i18n-codegen": "^0.5.0",
"@nx/vite": "17.2.8",
- "@perfsee/sdk": "^1.9.0",
- "@playwright/test": "^1.40.0",
+ "@playwright/test": "^1.41.0",
"@taplo/cli": "^0.5.2",
"@testing-library/react": "^14.1.2",
"@toeverything/infra": "workspace:*",
@@ -76,7 +75,7 @@
"@vitejs/plugin-react-swc": "^3.5.0",
"@vitest/coverage-istanbul": "1.1.3",
"@vitest/ui": "1.1.3",
- "electron": "^27.1.0",
+ "electron": "^28.1.4",
"eslint": "^8.54.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-i": "^2.29.0",
@@ -88,13 +87,12 @@
"eslint-plugin-unused-imports": "^3.0.0",
"eslint-plugin-vue": "^9.18.1",
"fake-indexeddb": "5.0.2",
- "happy-dom": "^12.10.3",
+ "happy-dom": "^13.0.0",
"husky": "^8.0.3",
"lint-staged": "^15.1.0",
"msw": "^2.0.8",
"nanoid": "^5.0.3",
- "nx": "^17.1.3",
- "nx-cloud": "^16.5.2",
+ "nx": "^17.2.8",
"nyc": "^15.1.0",
"oxlint": "0.0.22",
"prettier": "^3.1.0",
diff --git a/packages/backend/server/.env.example b/packages/backend/server/.env.example
index 749873dc40..b3690ad7f7 100644
--- a/packages/backend/server/.env.example
+++ b/packages/backend/server/.env.example
@@ -1,8 +1,4 @@
-DATABASE_URL="postgresql://affine@localhost:5432/affine"
-NEXTAUTH_URL="http://localhost:8080"
-OAUTH_EMAIL_SENDER="noreply@toeverything.info"
-OAUTH_EMAIL_LOGIN=""
-OAUTH_EMAIL_PASSWORD=""
-ENABLE_LOCAL_EMAIL="true"
-STRIPE_API_KEY=
-STRIPE_WEBHOOK_KEY=
+# AFFINE_SERVER_PORT=3010
+# AFFINE_SERVER_HOST=app.affine.pro
+# AFFINE_SERVER_HTTPS=true
+# DATABASE_URL="postgres://affine@localhost:5432/affine"
diff --git a/packages/backend/server/package.json b/packages/backend/server/package.json
index 7856cd5a7c..0fa11eb863 100644
--- a/packages/backend/server/package.json
+++ b/packages/backend/server/package.json
@@ -14,8 +14,8 @@
"test": "ava --concurrency 1 --serial",
"test:coverage": "c8 ava --concurrency 1 --serial",
"postinstall": "prisma generate",
- "data-migration": "node --loader ts-node/esm/transpile-only.mjs --es-module-specifier-resolution node ./src/data/app.ts",
- "predeploy": "yarn prisma migrate deploy && node --es-module-specifier-resolution node ./dist/data/app.js run"
+ "data-migration": "node --loader ts-node/esm/transpile-only.mjs --es-module-specifier-resolution node ./src/data/index.ts",
+ "predeploy": "yarn prisma migrate deploy && node --es-module-specifier-resolution node ./dist/data/index.js run"
},
"dependencies": {
"@apollo/server": "^4.9.5",
@@ -23,6 +23,7 @@
"@aws-sdk/client-s3": "^3.454.0",
"@google-cloud/opentelemetry-cloud-monitoring-exporter": "^0.17.0",
"@google-cloud/opentelemetry-cloud-trace-exporter": "^2.1.0",
+ "@google-cloud/opentelemetry-resource-util": "^2.1.0",
"@keyv/redis": "^2.8.0",
"@nestjs/apollo": "^12.0.11",
"@nestjs/common": "^10.2.10",
@@ -32,35 +33,39 @@
"@nestjs/platform-express": "^10.2.10",
"@nestjs/platform-socket.io": "^10.2.10",
"@nestjs/schedule": "^4.0.0",
+ "@nestjs/serve-static": "^4.0.0",
"@nestjs/throttler": "^5.0.1",
"@nestjs/websockets": "^10.2.10",
"@node-rs/argon2": "^1.5.2",
"@node-rs/crc32": "^1.7.2",
"@node-rs/jsonwebtoken": "^0.3.0",
"@opentelemetry/api": "^1.7.0",
- "@opentelemetry/core": "^1.19.0",
- "@opentelemetry/exporter-prometheus": "^0.46.0",
- "@opentelemetry/exporter-zipkin": "^1.19.0",
+ "@opentelemetry/core": "^1.20.0",
+ "@opentelemetry/exporter-prometheus": "^0.47.0",
+ "@opentelemetry/exporter-zipkin": "^1.20.0",
"@opentelemetry/host-metrics": "^0.34.0",
- "@opentelemetry/instrumentation": "^0.46.0",
+ "@opentelemetry/instrumentation": "^0.47.0",
"@opentelemetry/instrumentation-graphql": "^0.36.0",
- "@opentelemetry/instrumentation-http": "^0.46.0",
+ "@opentelemetry/instrumentation-http": "^0.47.0",
"@opentelemetry/instrumentation-ioredis": "^0.36.0",
"@opentelemetry/instrumentation-nestjs-core": "^0.33.3",
"@opentelemetry/instrumentation-socket.io": "^0.35.0",
- "@opentelemetry/resources": "^1.19.0",
- "@opentelemetry/sdk-metrics": "^1.19.0",
- "@opentelemetry/sdk-node": "^0.46.0",
- "@opentelemetry/sdk-trace-node": "^1.19.0",
+ "@opentelemetry/resources": "^1.20.0",
+ "@opentelemetry/sdk-metrics": "^1.20.0",
+ "@opentelemetry/sdk-node": "^0.47.0",
+ "@opentelemetry/sdk-trace-node": "^1.20.0",
+ "@opentelemetry/semantic-conventions": "^1.20.0",
"@prisma/client": "^5.7.1",
"@prisma/instrumentation": "^5.7.1",
"@socket.io/redis-adapter": "^8.2.1",
"cookie-parser": "^1.4.6",
"dotenv": "^16.3.1",
+ "dotenv-cli": "^7.3.0",
"express": "^4.18.2",
"file-type": "^19.0.0",
"get-stream": "^8.0.1",
"graphql": "^16.8.1",
+ "graphql-scalars": "^1.22.4",
"graphql-type-json": "^0.3.2",
"graphql-upload": "^16.0.2",
"ioredis": "^5.3.2",
@@ -112,6 +117,7 @@
"typescript": "^5.3.2"
},
"ava": {
+ "timeout": "1m",
"extensions": {
"ts": "module"
},
diff --git a/packages/backend/server/scripts/self-host-predeploy.js b/packages/backend/server/scripts/self-host-predeploy.js
new file mode 100644
index 0000000000..bcd618a80f
--- /dev/null
+++ b/packages/backend/server/scripts/self-host-predeploy.js
@@ -0,0 +1,51 @@
+import { execSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const SELF_HOST_CONFIG_DIR = '/root/.affine/config';
+/**
+ * @type {Array<{ from: string; to?: string, modifier?: (content: string): string }>}
+ */
+const configFiles = [
+ { from: './.env.example', to: '.env' },
+ { from: './dist/config/affine.js', modifier: configCleaner },
+ { from: './dist/config/affine.env.js', modifier: configCleaner },
+];
+
+function configCleaner(content) {
+ return content.replace(/(\/\/#.*$)|(\/\/\s+TODO.*$)/gm, '');
+}
+
+function prepare() {
+ fs.mkdirSync(SELF_HOST_CONFIG_DIR, { recursive: true });
+
+ for (const { from, to, modifier } of configFiles) {
+ const targetFileName = to ?? path.parse(from).base;
+ const targetFilePath = path.join(SELF_HOST_CONFIG_DIR, targetFileName);
+ if (!fs.existsSync(targetFilePath)) {
+ console.log(`creating config file [${targetFilePath}].`);
+ if (modifier) {
+ const content = fs.readFileSync(from, 'utf-8');
+ fs.writeFileSync(targetFilePath, modifier(content), 'utf-8');
+ } else {
+ fs.cpSync(from, targetFilePath, {
+ force: false,
+ });
+ }
+ }
+ }
+}
+
+function runPredeployScript() {
+ console.log('running predeploy script.');
+ execSync('yarn predeploy', {
+ env: {
+ ...process.env,
+ NODE_OPTIONS:
+ (process.env.NODE_OPTIONS ?? '') + ' --import ./dist/prelude.js',
+ },
+ });
+}
+
+prepare();
+runPredeployScript();
diff --git a/packages/backend/server/src/affine.ts b/packages/backend/server/src/affine.ts
deleted file mode 100644
index ceb37536da..0000000000
--- a/packages/backend/server/src/affine.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { getDefaultAFFiNEConfig } from './config/default';
-
-globalThis.AFFiNE = getDefaultAFFiNEConfig();
diff --git a/packages/backend/server/src/app.controller.ts b/packages/backend/server/src/app.controller.ts
index 43eb338179..0e3a4abbf2 100644
--- a/packages/backend/server/src/app.controller.ts
+++ b/packages/backend/server/src/app.controller.ts
@@ -1,13 +1,17 @@
import { Controller, Get } from '@nestjs/common';
+import { Config } from './fundamentals/config';
+
@Controller('/')
export class AppController {
+ constructor(private readonly config: Config) {}
+
@Get()
info() {
- const version = AFFiNE.version;
return {
- compatibility: version,
- message: `AFFiNE ${version} Server`,
+ compatibility: this.config.version,
+ message: `AFFiNE ${this.config.version} Server`,
+ flavor: this.config.flavor,
};
}
}
diff --git a/packages/backend/server/src/app.module.ts b/packages/backend/server/src/app.module.ts
new file mode 100644
index 0000000000..f763a09286
--- /dev/null
+++ b/packages/backend/server/src/app.module.ts
@@ -0,0 +1,169 @@
+import { join } from 'node:path';
+
+import { Logger, Module } from '@nestjs/common';
+import { APP_INTERCEPTOR } from '@nestjs/core';
+import { ScheduleModule } from '@nestjs/schedule';
+import { ServeStaticModule } from '@nestjs/serve-static';
+import { get } from 'lodash-es';
+
+import { AppController } from './app.controller';
+import { AuthModule } from './core/auth';
+import { ADD_ENABLED_FEATURES, ServerConfigModule } from './core/config';
+import { DocModule } from './core/doc';
+import { FeatureModule } from './core/features';
+import { QuotaModule } from './core/quota';
+import { StorageModule } from './core/storage';
+import { SyncModule } from './core/sync';
+import { UsersModule } from './core/users';
+import { WorkspaceModule } from './core/workspaces';
+import { getOptionalModuleMetadata } from './fundamentals';
+import { CacheInterceptor, CacheModule } from './fundamentals/cache';
+import {
+ type AvailablePlugins,
+ Config,
+ ConfigModule,
+} from './fundamentals/config';
+import { EventModule } from './fundamentals/event';
+import { GqlModule } from './fundamentals/graphql';
+import { MailModule } from './fundamentals/mailer';
+import { MetricsModule } from './fundamentals/metrics';
+import { PrismaModule } from './fundamentals/prisma';
+import { SessionModule } from './fundamentals/session';
+import { RateLimiterModule } from './fundamentals/throttler';
+import { WebSocketModule } from './fundamentals/websocket';
+import { pluginsMap } from './plugins';
+
+export const FunctionalityModules = [
+ ConfigModule.forRoot(),
+ ScheduleModule.forRoot(),
+ EventModule,
+ CacheModule,
+ PrismaModule,
+ MetricsModule,
+ RateLimiterModule,
+ SessionModule,
+ MailModule,
+];
+
+export class AppModuleBuilder {
+ private readonly modules: AFFiNEModule[] = [];
+ constructor(private readonly config: Config) {}
+
+ use(...modules: AFFiNEModule[]): this {
+ modules.forEach(m => {
+ const requirements = getOptionalModuleMetadata(m, 'requires');
+ // if condition not set or condition met, include the module
+ if (requirements?.length) {
+ const nonMetRequirements = requirements.filter(c => {
+ const value = get(this.config, c);
+ return (
+ value === undefined ||
+ value === null ||
+ (typeof value === 'string' && value.trim().length === 0)
+ );
+ });
+
+ if (nonMetRequirements.length) {
+ const name = 'module' in m ? m.module.name : m.name;
+ new Logger(name).warn(
+ `${name} is not enabled because of the required configuration is not satisfied.`,
+ 'Unsatisfied configuration:',
+ ...nonMetRequirements.map(config => ` AFFiNE.${config}`)
+ );
+ return;
+ }
+ }
+
+ const predicator = getOptionalModuleMetadata(m, 'if');
+ if (predicator && !predicator(this.config)) {
+ return;
+ }
+
+ const contribution = getOptionalModuleMetadata(m, 'contributesTo');
+ if (contribution) {
+ ADD_ENABLED_FEATURES(contribution);
+ }
+ this.modules.push(m);
+ });
+
+ return this;
+ }
+
+ useIf(
+ predicator: (config: Config) => boolean,
+ ...modules: AFFiNEModule[]
+ ): this {
+ if (predicator(this.config)) {
+ this.use(...modules);
+ }
+
+ return this;
+ }
+
+ compile() {
+ @Module({
+ providers: [
+ {
+ provide: APP_INTERCEPTOR,
+ useClass: CacheInterceptor,
+ },
+ ],
+ imports: this.modules,
+ controllers: this.config.flavor.selfhosted ? [] : [AppController],
+ })
+ class AppModule {}
+
+ return AppModule;
+ }
+}
+
+function buildAppModule() {
+ const factor = new AppModuleBuilder(AFFiNE);
+
+ factor
+ // common fundamental modules
+ .use(...FunctionalityModules)
+ // auth
+ .use(AuthModule)
+
+ // business modules
+ .use(DocModule)
+
+ // sync server only
+ .useIf(config => config.flavor.sync, SyncModule)
+
+ // main server only
+ .useIf(
+ config => config.flavor.main,
+ ServerConfigModule,
+ WebSocketModule,
+ GqlModule,
+ StorageModule,
+ UsersModule,
+ WorkspaceModule,
+ FeatureModule,
+ QuotaModule
+ )
+
+ // self hosted server only
+ .useIf(
+ config => config.flavor.selfhosted,
+ ServeStaticModule.forRoot({
+ rootPath: join('/app', 'static'),
+ })
+ );
+
+ // plugin modules
+ AFFiNE.plugins.enabled.forEach(name => {
+ const plugin = pluginsMap.get(name as AvailablePlugins);
+ if (!plugin) {
+ throw new Error(`Unknown plugin ${name}`);
+ }
+
+ factor.use(plugin);
+ });
+
+ return factor.compile();
+}
+
+export const AppModule = buildAppModule();
diff --git a/packages/backend/server/src/app.ts b/packages/backend/server/src/app.ts
index 89a4019800..418141c49b 100644
--- a/packages/backend/server/src/app.ts
+++ b/packages/backend/server/src/app.ts
@@ -1,34 +1,48 @@
-import { Module } from '@nestjs/common';
-import { APP_INTERCEPTOR } from '@nestjs/core';
+import { Type } from '@nestjs/common';
+import { NestFactory } from '@nestjs/core';
+import type { NestExpressApplication } from '@nestjs/platform-express';
+import cookieParser from 'cookie-parser';
+import graphqlUploadExpress from 'graphql-upload/graphqlUploadExpress.mjs';
-import { AppController } from './app.controller';
-import { CacheInterceptor, CacheModule } from './cache';
-import { ConfigModule } from './config';
-import { EventModule } from './event';
-import { BusinessModules } from './modules';
-import { AuthModule } from './modules/auth';
-import { PrismaModule } from './prisma';
-import { SessionModule } from './session';
-import { RateLimiterModule } from './throttler';
+import { SocketIoAdapter } from './fundamentals';
+import { SocketIoAdapterImpl } from './fundamentals/websocket';
+import { ExceptionLogger } from './middleware/exception-logger';
+import { serverTimingAndCache } from './middleware/timing';
-const BasicModules = [
- PrismaModule,
- ConfigModule.forRoot(),
- CacheModule,
- EventModule,
- SessionModule,
- RateLimiterModule,
- AuthModule,
-];
+export async function createApp() {
+ const { AppModule } = await import('./app.module');
-@Module({
- providers: [
- {
- provide: APP_INTERCEPTOR,
- useClass: CacheInterceptor,
- },
- ],
- imports: [...BasicModules, ...BusinessModules],
- controllers: [AppController],
-})
-export class AppModule {}
+ const app = await NestFactory.create