milestone: publish alpha version (#637)

- document folder
- full-text search
- blob storage
- basic edgeless support

Co-authored-by: tzhangchi <terry.zhangchi@outlook.com>
Co-authored-by: QiShaoXuan <qishaoxuan777@gmail.com>
Co-authored-by: DiamondThree <diamond.shx@gmail.com>
Co-authored-by: MingLiang Wang <mingliangwang0o0@gmail.com>
Co-authored-by: JimmFly <yangjinfei001@gmail.com>
Co-authored-by: Yifeng Wang <doodlewind@toeverything.info>
Co-authored-by: Himself65 <himself65@outlook.com>
Co-authored-by: lawvs <18554747+lawvs@users.noreply.github.com>
Co-authored-by: Qi <474021214@qq.com>

packages/app/src/components/editor-mode-switch/index.tsx

@@ -11,9 +11,10 @@ import type {
   AnimateRadioProps,
   AnimateRadioItemProps,
 } from './type';
-import { useTheme } from '@/styles';
+import { useTheme } from '@/providers/themeProvider';
 import { EdgelessIcon, PaperIcon } from './icons';
-import { useEditor } from '@/components/editor-provider';
+import useCurrentPageMeta from '@/hooks/use-current-page-meta';
+import { usePageHelper } from '@/hooks/use-page-helper';
 
 const PaperItem = ({ active }: { active?: boolean }) => {
   const {
@@ -66,7 +67,9 @@ export const EditorModeSwitch = ({
   style = {},
 }: AnimateRadioProps) => {
   const { mode: themeMode } = useTheme();
-  const { mode, setMode } = useEditor();
+  const { changePageMode } = usePageHelper();
+  const { trash, mode = 'page', id = '' } = useCurrentPageMeta() || {};
+
   const modifyRadioItemStatus = (): RadioItemStatus => {
     return {
       left: isHover
@@ -99,6 +102,7 @@ export const EditorModeSwitch = ({
       data-testid="editor-mode-switcher"
       shrink={!isHover}
       style={style}
+      disabled={!!trash}
     >
       <AnimateRadioItem
         isLeft={true}
@@ -107,7 +111,7 @@ export const EditorModeSwitch = ({
         active={mode === 'page'}
         status={radioItemStatus.left}
         onClick={() => {
-          setMode('page');
+          changePageMode(id, 'page');
         }}
         onMouseEnter={() => {
           setRadioItemStatus({
@@ -123,11 +127,12 @@ export const EditorModeSwitch = ({
       <AnimateRadioItem
         isLeft={false}
         label="Edgeless"
+        data-testid="switch-edgeless-item"
         icon={<EdgelessItem />}
         active={mode === 'edgeless'}
         status={radioItemStatus.right}
         onClick={() => {
-          setMode('edgeless');
+          changePageMode(id, 'edgeless');
         }}
         onMouseEnter={() => {
           setRadioItemStatus({

packages/app/src/components/editor-mode-switch/style.ts

@@ -1,45 +1,47 @@
 import { displayFlex, keyframes, styled } from '@/styles';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import spring, { toString } from 'css-spring';
 import type { ItemStatus } from './type';
 
 const ANIMATE_DURATION = 500;
 
-export const StyledAnimateRadioContainer = styled('div')<{ shrink: boolean }>(
-  ({ shrink, theme }) => {
-    const animateScaleStretch = keyframes`${toString(
-      spring({ width: '36px' }, { width: '160px' }, { preset: 'gentle' })
-    )}`;
-    const animateScaleShrink = keyframes(
-      `${toString(
-        spring({ width: '160px' }, { width: '36px' }, { preset: 'gentle' })
-      )}`
-    );
-    const shrinkStyle = shrink
-      ? {
-          animation: `${animateScaleShrink} ${ANIMATE_DURATION}ms forwards`,
-          background: 'transparent',
-        }
-      : {
-          animation: `${animateScaleStretch} ${ANIMATE_DURATION}ms forwards`,
-        };
+export const StyledAnimateRadioContainer = styled('div')<{
+  shrink: boolean;
+  disabled: boolean;
+}>(({ shrink, theme, disabled }) => {
+  const animateScaleStretch = keyframes`${toString(
+    spring({ width: '36px' }, { width: '160px' }, { preset: 'gentle' })
+  )}`;
+  const animateScaleShrink = keyframes(
+    `${toString(
+      spring({ width: '160px' }, { width: '36px' }, { preset: 'gentle' })
+    )}`
+  );
+  const shrinkStyle = shrink
+    ? {
+        animation: `${animateScaleShrink} ${ANIMATE_DURATION}ms forwards`,
+        background: 'transparent',
+      }
+    : {
+        animation: `${animateScaleStretch} ${ANIMATE_DURATION}ms forwards`,
+      };
 
-    return {
-      height: '36px',
-      borderRadius: '18px',
-      background: theme.colors.hoverBackground,
-      position: 'relative',
-      display: 'flex',
-      transition: `background ${ANIMATE_DURATION}ms, border ${ANIMATE_DURATION}ms`,
-      border: '1px solid transparent',
+  return {
+    height: '36px',
+    borderRadius: '18px',
+    background: disabled ? 'transparent' : theme.colors.hoverBackground,
+    position: 'relative',
+    display: 'flex',
+    transition: `background ${ANIMATE_DURATION}ms, border ${ANIMATE_DURATION}ms`,
+    border: '1px solid transparent',
 
-      ...shrinkStyle,
-      ':hover': {
-        border: `1px solid ${theme.colors.primaryColor}`,
-      },
-    };
-  }
-);
+    ...(disabled ? { pointerEvents: 'none' } : shrinkStyle),
+    ':hover': {
+      border: disabled ? '' : `1px solid ${theme.colors.primaryColor}`,
+    },
+  };
+});
 
 export const StyledMiddleLine = styled('div')<{
   hidden: boolean;