Merge branch 'master' into feat/sync-languages

packages/app/src/components/contact-modal/index.tsx

@@ -76,6 +76,8 @@ export const ContactModal = ({
       link: 'https://community.affine.pro',
     },
   ];
+  const date = new Date();
+  const year = date.getFullYear();
   return (
     <Modal open={open} onClose={onClose} data-testid="contact-us-modal-content">
       <ModalWrapper
@@ -135,7 +137,7 @@ export const ContactModal = ({
               {t('How is AFFiNE Alpha different?')}
             </a>
           </p>
-          <p>Copyright &copy; 2022 Toeverything</p>
+          <p>Copyright &copy; {year} Toeverything</p>
         </StyledModalFooter>
       </ModalWrapper>
     </Modal>

packages/app/src/components/header/EditorHeader.tsx

@@ -1,14 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import {
+import { StyledSwitchWrapper, StyledTitle, StyledTitleWrapper } from './styles';
-  StyledSearchArrowWrapper,
-  StyledSwitchWrapper,
-  StyledTitle,
-  StyledTitleWrapper,
-} from './styles';
 import { Content } from '@/ui/layout';
 import { useAppState } from '@/providers/app-state-provider/context';
 import EditorModeSwitch from '@/components/editor-mode-switch';
-import QuickSearchButton from './QuickSearchButton';
 import Header from './Header';
 import usePropsUpdated from '@/hooks/use-props-updated';
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
@@ -64,9 +58,9 @@ export const EditorHeader = () => {
               />
             </StyledSwitchWrapper>
             <Content ellipsis={true}>{title}</Content>
-            <StyledSearchArrowWrapper>
+            {/* <StyledSearchArrowWrapper>
               <QuickSearchButton />
-            </StyledSearchArrowWrapper>
+            </StyledSearchArrowWrapper> */}
           </StyledTitleWrapper>
         </StyledTitle>
       )}

packages/app/src/components/header/Header.tsx

@@ -11,7 +11,6 @@ import { getWarningMessage, shouldShowWarning } from './utils';
 import EditorOptionMenu from './header-right-items/EditorOptionMenu';
 import TrashButtonGroup from './header-right-items/TrashButtonGroup';
 import ThemeModeSwitch from './header-right-items/theme-mode-switch';
-import SyncUser from './header-right-items/SyncUser';
 
 const BrowserWarning = ({
   show,
@@ -40,7 +39,7 @@ const HeaderRightItems: Record<HeaderRightItemNames, ReactNode> = {
   editorOptionMenu: <EditorOptionMenu key="editorOptionMenu" />,
   trashButtonGroup: <TrashButtonGroup key="trashButtonGroup" />,
   themeModeSwitch: <ThemeModeSwitch key="themeModeSwitch" />,
-  syncUser: <SyncUser key="syncUser" />,
+  syncUser: null, //<SyncUser key="syncUser" />,
 };
 
 export const Header = ({

packages/app/src/components/header/QuickSearchButton.tsx

@@ -11,7 +11,7 @@ export const QuickSearchButton = ({
   const { triggerQuickSearchModal } = useModal();
   const { t } = useTranslation();
   return (
-    <Tooltip content={t('Switch to')} placement="bottom">
+    <Tooltip content={t('Jump to')} placement="bottom">
       <IconButton
         data-testid="header-quickSearchButton"
         {...props}

packages/app/src/components/quick-search/Results.tsx

@@ -81,7 +81,7 @@ export const Results = (props: {
           </StyledNotFound>
         )
       ) : (
-        <Command.Group heading={t('Switch to')}>
+        <Command.Group heading={t('Jump to')}>
           {List.map(link => {
             return (
               <Command.Item

packages/app/src/styles/theme.ts

@@ -20,6 +20,7 @@ export const getLightTheme = (
       popoverBackground: '#fff',
       tooltipBackground: '#6880FF',
       codeBackground: '#f2f5f9',
+      codeBlockBackground: '#fafbfd',
       warningBackground: '#FFF9C7',
       errorBackground: '#FFDED8',
 
@@ -40,6 +41,7 @@ export const getLightTheme = (
       disableColor: '#C0C0C0',
       warningColor: '#906616',
       errorColor: '#EB4335',
+      lineNumberColor: '#888A9E',
     },
     font: {
       xs: '12px',
@@ -96,6 +98,7 @@ export const getDarkTheme = (
         editorMode === 'edgeless'
           ? lightTheme.colors.codeBackground
           : '#505662',
+      codeBlockBackground: '#36383D',
       warningBackground: '#FFF9C7',
       errorBackground: '#FFDED8',
 
@@ -117,6 +120,7 @@ export const getDarkTheme = (
       disableColor: '#4b4b4b',
       warningColor: '#906616',
       errorColor: '#EB4335',
+      lineNumberColor: '#888A9E',
     },
     shadow: {
       popover:
@@ -154,12 +158,14 @@ export const globalThemeVariables: (
     '--affine-popover-color': theme.colors.popoverColor,
     '--affine-input-color': theme.colors.inputColor,
     '--affine-code-color': theme.colors.codeColor,
+    '--affine-code-block-background': theme.colors.codeBlockBackground,
     '--affine-quote-color': theme.colors.quoteColor,
     '--affine-selected-color': theme.colors.selectedColor,
     '--affine-placeholder-color': theme.colors.placeHolderColor,
     '--affine-border-color': theme.colors.borderColor,
     '--affine-disable-color': theme.colors.disableColor,
     '--affine-tooltip-color': theme.colors.tooltipColor,
+    '--affine-line-number-color': theme.colors.lineNumberColor,
 
     '--affine-modal-shadow': theme.shadow.modal,
     '--affine-popover-shadow': theme.shadow.popover,

packages/app/src/styles/types.ts

@@ -25,6 +25,7 @@ export interface AffineTheme {
     hoverBackground: string;
     innerHoverBackground: string;
     codeBackground: string;
+    codeBlockBackground: string;
     warningBackground: string;
     errorBackground: string;
     // Use for the page`s text
@@ -47,6 +48,7 @@ export interface AffineTheme {
     disableColor: string;
     warningColor: string;
     errorColor: string;
+    lineNumberColor: string;
   };
   font: {
     xs: string; // tiny
@@ -90,6 +92,8 @@ export interface AffineThemeCSSVariables {
   '--affine-popover-background': AffineTheme['colors']['popoverBackground'];
   '--affine-hover-background': AffineTheme['colors']['hoverBackground'];
   '--affine-code-background': AffineTheme['colors']['codeBackground'];
+
+  '--affine-code-block-background': AffineTheme['colors']['codeBlockBackground'];
   '--affine-tooltip-background': AffineTheme['colors']['tooltipBackground'];
 
   '--affine-text-color': AffineTheme['colors']['textColor'];
@@ -107,6 +111,7 @@ export interface AffineThemeCSSVariables {
   '--affine-border-color': AffineTheme['colors']['borderColor'];
   '--affine-disable-color': AffineTheme['colors']['disableColor'];
   '--affine-tooltip-color': AffineTheme['colors']['tooltipColor'];
+  '--affine-line-number-color': AffineTheme['colors']['lineNumberColor'];
 
   '--affine-modal-shadow': AffineTheme['shadow']['modal'];
   '--affine-popover-shadow': AffineTheme['shadow']['popover'];

packages/app/src/templates/Welcome-to-AFFiNE-Alpha-v2.0.md

@@ -39,7 +39,7 @@ docker run -it --name affine -d -v [YOUR_PATH]:/app/data -p 3000:3000 ghcr.io/to
 
 [] What about a code block? `````
 
-```javascript
+```JavaScript
 console.log('Hello world');
 ```
 

tests/libs/page-logic.ts

@@ -5,9 +5,12 @@ export async function newPage(page: Page) {
 }
 
 export async function clickPageMoreActions(page: Page) {
-  return page
+  return (
+    page
       .getByTestId('editor-header-items')
       .getByRole('button')
-    .nth(2)
+      //FIXME: temporary change due to cloud sync icon being hidden
-    .click();
+      .nth(0)
+      .click()
+  );
 }

tests/login.spec.ts

@@ -15,7 +15,7 @@ test.describe('Login Flow', () => {
       .click();
   });
 
-  test('Open login modal by click cloud-unsync-icon', async ({ page }) => {
+  test.skip('Open login modal by click cloud-unsync-icon', async ({ page }) => {
     await page.getByTestId('cloud-unsync-icon').click();
 
     await page.waitForTimeout(800);

tests/quick-search.spec.ts

@@ -32,7 +32,7 @@ test.describe('Open quick search', () => {
     await expect(quickSearch).toBeVisible();
   });
 
-  test('Click arrowDown icon after title', async ({ page }) => {
+  test.skip('Click arrowDown icon after title', async ({ page }) => {
     await newPage(page);
     const quickSearchButton = page.locator(
       '[data-testid=header-quickSearchButton]'