Merge pull request #12 from toeverything/feat/layout

Feat/layout

public/globals.css

@@ -2,6 +2,7 @@
   -webkit-overflow-scrolling: touch;
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   box-sizing: border-box;
+  transition: all 0.1s;
 }
 html,
 body,
@@ -144,7 +145,7 @@ button,
 select,
 keygen,
 legend {
-  color: var(--affine-primary-color);
+  color: var(--page-text-color);
   outline: 0;
   font-size: 18px;
   line-height: 1.5;
@@ -155,7 +156,7 @@ body {
 }
 a,
 a:hover {
-  color: var(--affine-primary-color);
+  color: var(--page-text-color);
 }
 
 input {

public/variable.css

@@ -1,17 +1,22 @@
-:root {
+/*:root {*/
-  --affine-primary-color: #3a4c5c;
+/*  --affine-primary-color: #3a4c5c;*/
-  --affine-muted-color: #a6abb7;
+/*  --affine-muted-color: #a6abb7;*/
-  --affine-highlight-color: #6880ff;
+/*  --affine-highlight-color: #6880ff;*/
-  --affine-placeholder-color: #c7c7c7;
+/*  --affine-placeholder-color: #c7c7c7;*/
-  --affine-selected-color: rgba(104, 128, 255, 0.1);
+/*  --affine-selected-color: rgba(104, 128, 255, 0.1);*/
 
-  --affine-font-family: Avenir Next, apple-system, BlinkMacSystemFont,
+/*  --affine-font-family: Avenir Next, apple-system, BlinkMacSystemFont,*/
-    Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,
+/*    Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,*/
-    Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,
+/*    Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,*/
-    Segoe UI Symbol, Noto Color Emoji;
+/*    Segoe UI Symbol, Noto Color Emoji;*/
 
-  --affine-font-family2: Roboto Mono, apple-system, BlinkMacSystemFont,
+/*  --affine-font-family2: Roboto Mono, apple-system, BlinkMacSystemFont,*/
-    Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,
+/*    Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,*/
-    Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,
+/*    Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,*/
-    Segoe UI Symbol, Noto Color Emoji;
+/*    Segoe UI Symbol, Noto Color Emoji;*/
-}
+/*}*/
+
+/*:root {*/
+/*  --page-background-color: #fff;*/
+/*  --page-text-color: #3a4c5c;*/
+/*}*/

src/components/Header/icons.tsx

@@ -6,7 +6,7 @@ type IconProps = {
 } & DOMAttributes<SVGElement>;
 
 export const LogoIcon = ({
-  color = '#000',
+  color,
   style: propsStyle = {},
   ...props
 }: IconProps) => {
@@ -30,7 +30,7 @@ export const LogoIcon = ({
 };
 
 export const EdgelessIcon = ({
-  color = '#000',
+  color,
   style: propsStyle = {},
   ...props
 }: IconProps) => {
@@ -60,7 +60,7 @@ export const EdgelessIcon = ({
 };
 
 export const MoonIcon = ({
-  color = '#000',
+  color,
   style: propsStyle = {},
   ...props
 }: IconProps) => {
@@ -85,7 +85,7 @@ export const MoonIcon = ({
 };
 
 export const PaperIcon = ({
-  color = '#000',
+  color,
   style: propsStyle = {},
   ...props
 }: IconProps) => {
@@ -116,7 +116,7 @@ export const PaperIcon = ({
 };
 
 export const SunIcon = ({
-  color = '#000',
+  color,
   style: propsStyle = {},
   ...props
 }: IconProps) => {
@@ -139,3 +139,50 @@ export const SunIcon = ({
     </svg>
   );
 };
+
+export const MoreIcon = ({
+  color,
+  style: propsStyle = {},
+  ...props
+}: IconProps) => {
+  const style = { fill: color, ...propsStyle, transform: 'rotate(90deg)' };
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      {...props}
+      style={style}
+    >
+      <circle cx="12" cy="5.5" r="1.5" />
+      <circle cx="12" cy="12" r="1.5" />
+      <circle cx="12" cy="18.5" r="1.5" />
+    </svg>
+  );
+};
+export const ExportIcon = ({
+  color,
+  style: propsStyle = {},
+  ...props
+}: IconProps) => {
+  const style = { fill: color, ...propsStyle };
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      {...props}
+      style={style}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 3.19995C12.2121 3.19995 12.4156 3.28424 12.5656 3.43427L16.5656 7.43427L15.4343 8.56564L12.8 5.93132V14H11.2V5.93132L8.56564 8.56564L7.43427 7.43427L11.4343 3.43427C11.5843 3.28424 11.7878 3.19995 12 3.19995ZM3.79995 12V16.7992C3.79995 17.3724 3.80057 17.7543 3.82454 18.0476C3.84775 18.3317 3.88879 18.4616 3.93074 18.544C4.04579 18.7698 4.22937 18.9533 4.45516 19.0684C4.5375 19.1103 4.66747 19.1514 4.9515 19.1746C5.24487 19.1985 5.6267 19.1992 6.19995 19.1992H17.8C18.3732 19.1992 18.755 19.1985 19.0484 19.1746C19.3324 19.1514 19.4624 19.1103 19.5447 19.0684C19.7705 18.9533 19.9541 18.7698 20.0692 18.544C20.1111 18.4616 20.1522 18.3317 20.1754 18.0476C20.1993 17.7543 20.2 17.3724 20.2 16.7992V12H21.8V16.8314C21.8 17.364 21.8 17.8116 21.77 18.1779C21.7388 18.5609 21.6708 18.9249 21.4948 19.2703C21.2263 19.7972 20.798 20.2255 20.2711 20.494C19.9256 20.67 19.5617 20.738 19.1787 20.7693C18.8124 20.7992 18.3648 20.7992 17.8322 20.7992H6.16775C5.63509 20.7992 5.18749 20.7992 4.82121 20.7693C4.43823 20.738 4.07426 20.67 3.72878 20.494C3.20193 20.2255 2.77358 19.7972 2.50513 19.2703C2.3291 18.9249 2.26115 18.5609 2.22986 18.1779C2.19993 17.8116 2.19994 17.364 2.19995 16.8313L2.19995 12H3.79995Z"
+        fill="#9096A5"
+      />
+    </svg>
+  );
+};

src/components/Header/index.tsx

@@ -1,51 +1,27 @@
 import React, { useEffect, useState } from 'react';
-import { styled } from '@/styles';
+import {
-import { LogoIcon, PaperIcon, EdgelessIcon, SunIcon, MoonIcon } from './icons';
+  LogoIcon,
+  PaperIcon,
+  EdgelessIcon,
+  SunIcon,
+  MoonIcon,
+  MoreIcon,
+  ExportIcon,
+} from './icons';
+import {
+  StyledHeader,
+  StyledTitle,
+  StyledTitleWrapper,
+  StyledLogo,
+  StyledModeSwitch,
+  StyledHeaderRightSide,
+  StyledMoreMenuItem,
+} from './styles';
+import { Popover } from '@/components/popover';
+import { useTheme } from '@/styles';
+import { useEditor } from '@/components/editor-provider';
 
-const StyledHeader = styled('div')({
+const EditorModeSwitch = () => {
-  height: '60px',
-  width: '100vw',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  position: 'relative',
-  padding: '0 22px',
-});
-
-const StyledTitle = styled('div')({
-  width: '720px',
-  height: '100%',
-  position: 'absolute',
-  left: 0,
-  right: 0,
-  top: 0,
-  margin: 'auto',
-
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  fontWeight: '600',
-  fontSize: '20px',
-});
-
-const StyledTitleWrapper = styled('div')({
-  maxWidth: '720px',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  position: 'relative',
-});
-
-const StyledLogo = styled('div')({});
-
-const StyledModeSwitch = styled('div')({
-  height: '100%',
-  display: 'flex',
-  alignItems: 'center',
-  marginRight: '15px',
-});
-
-const ModeSwitch = () => {
   const [mode, setMode] = useState<'page' | 'edgeless'>('page');
 
   const handleModeSwitch = (mode: 'page' | 'edgeless') => {
@@ -75,27 +51,67 @@ const ModeSwitch = () => {
 };
 
 const DarkModeSwitch = () => {
-  const [darkMode, setDarkMode] = useState(false);
+  const { changeMode, mode } = useTheme();
+
+  return (
+    <>
+      {mode === 'dark' ? (
+        <SunIcon
+          color="#9096A5"
+          style={{ cursor: 'pointer' }}
+          onClick={() => {
+            changeMode('light');
+          }}
+        ></SunIcon>
+      ) : (
+        <MoonIcon
+          color="#9096A5"
+          style={{ cursor: 'pointer' }}
+          onClick={() => {
+            changeMode('dark');
+          }}
+        ></MoonIcon>
+      )}
+    </>
+  );
+};
+
+const PopoverContent = () => {
+  const { editor } = useEditor();
   return (
     <div>
-      <SunIcon></SunIcon>
+      <StyledMoreMenuItem
-      <MoonIcon></MoonIcon>
+        onClick={() => {
+          editor && editor.contentParser.onExportHtml();
+        }}
+      >
+        <ExportIcon />
+        Export to HTML
+      </StyledMoreMenuItem>
+      <StyledMoreMenuItem
+        onClick={() => {
+          editor && editor.contentParser.onExportMarkdown();
+        }}
+      >
+        <ExportIcon />
+        Export to markdown
+      </StyledMoreMenuItem>
     </div>
   );
 };
 
 export const Header = () => {
   const [title, setTitle] = useState('');
+  const { editor } = useEditor();
 
   useEffect(() => {
-    setTimeout(() => {
+    if (editor) {
-      const editor = window.editor;
       setTitle(editor.model.title || '');
       editor.model.propsUpdated.on(() => {
         setTitle(editor.model.title);
       });
-    }, 500);
+    }
-  }, []);
+  }, [editor]);
 
   return (
     <StyledHeader>
@@ -103,9 +119,16 @@ export const Header = () => {
         <LogoIcon color={'#6880FF'} onClick={() => {}} />
       </StyledLogo>
       <StyledTitle>
-        <ModeSwitch />
+        <EditorModeSwitch />
         <StyledTitleWrapper>{title}</StyledTitleWrapper>
       </StyledTitle>
+
+      <StyledHeaderRightSide>
+        <DarkModeSwitch />
+        <Popover popoverContent={<PopoverContent />}>
+          <MoreIcon color="#9096A5" style={{ marginLeft: '20px' }} />
+        </Popover>
+      </StyledHeaderRightSide>
     </StyledHeader>
   );
 };

src/components/Header/styles.ts

@@ -0,0 +1,73 @@
+import { styled } from '@/styles';
+
+export const StyledHeader = styled('div')({
+  height: '60px',
+  width: '100vw',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  position: 'relative',
+  padding: '0 22px',
+});
+
+export const StyledTitle = styled('div')({
+  width: '720px',
+  height: '100%',
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  margin: 'auto',
+
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  fontWeight: '600',
+  fontSize: '20px',
+});
+
+export const StyledTitleWrapper = styled('div')({
+  maxWidth: '720px',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  position: 'relative',
+});
+
+export const StyledLogo = styled('div')({});
+
+export const StyledModeSwitch = styled('div')({
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  marginRight: '12px',
+});
+
+export const StyledHeaderRightSide = styled('div')({
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const StyledMoreMenuItem = styled('div')({
+  height: '32px',
+  display: 'flex',
+  alignItems: 'center',
+  borderRadius: '5px',
+  fontSize: '14px',
+  color: '#4C6275',
+  padding: '0 14px',
+  svg: {
+    fill: '#4C6275',
+    width: '16px',
+    height: '16px',
+    marginRight: '14px',
+  },
+  ':hover': {
+    color: 'var(--affine-highlight-color)',
+    background: '#F1F3FF',
+    svg: {
+      fill: 'var(--affine-highlight-color)',
+    },
+  },
+});

src/components/editor-provider.tsx

@@ -0,0 +1,31 @@
+import type { EditorContainer } from '@blocksuite/editor';
+
+import { createContext, useContext, useEffect, useState } from 'react';
+import type { PropsWithChildren } from 'react';
+
+type EditorContextValue = {
+  editor: EditorContainer | null;
+  setEditor: (editor: EditorContainer) => void;
+};
+type EditorContextProps = PropsWithChildren<{}>;
+
+export const EditorContext = createContext<EditorContextValue>({
+  editor: null,
+  setEditor: () => {},
+});
+
+export const useEditor = () => useContext(EditorContext);
+
+export const EditorProvider = ({
+  children,
+}: PropsWithChildren<EditorContextProps>) => {
+  const [editor, setEditor] = useState<EditorContainer | null>(null);
+
+  return (
+    <EditorContext.Provider value={{ editor, setEditor }}>
+      {children}
+    </EditorContext.Provider>
+  );
+};
+
+export default EditorProvider;

src/components/editor.tsx

@@ -4,16 +4,13 @@ import { Text } from '@blocksuite/store';
 import '@blocksuite/blocks';
 import '@blocksuite/editor';
 import '@blocksuite/blocks/style';
+import { useEditor } from '@/components/editor-provider';
 
-declare global {
-  interface Window {
-    editor: EditorContainer;
-  }
-}
 export const Editor = () => {
   const editorRef = useRef<EditorContainer>();
-
+  const { setEditor } = useEditor();
   useEffect(() => {
+    setEditor(editorRef.current!);
     const { store } = editorRef.current as EditorContainer;
 
     const pageId = store.addBlock({

src/components/popover/index.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import type { PropsWithChildren } from 'react';
+import { styled } from '@/styles';
+
+type PopoverProps = {
+  popoverContent?: React.ReactNode;
+};
+
+const StyledPopoverContainer = styled('div')({
+  position: 'relative',
+  cursor: 'pointer',
+});
+
+const StyledPopoverWrapper = styled('div')({
+  position: 'absolute',
+  bottom: '0',
+  right: '0',
+  paddingTop: '46px',
+});
+const StyledPopover = styled('div')<{ show: boolean }>(({ show }) => {
+  return {
+    width: '248px',
+    background: '#fff',
+    boxShadow:
+      '0px 1px 10px -6px rgba(24, 39, 75, 0.5), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
+    borderRadius: '10px 0px 10px 10px',
+    padding: '8px 4px',
+    display: show ? 'block' : 'none',
+    position: 'absolute',
+    top: '46px',
+    right: '0',
+  };
+});
+export const Popover = ({
+  children,
+  popoverContent,
+}: PropsWithChildren<PopoverProps>) => {
+  const [show, setShow] = useState(false);
+  return (
+    <StyledPopoverContainer
+      onClick={() => {
+        setShow(!show);
+      }}
+      onMouseEnter={() => {
+        setShow(true);
+      }}
+      onMouseLeave={() => {
+        setShow(false);
+      }}
+    >
+      {children}
+      <StyledPopoverWrapper>
+        <StyledPopover show={show}>{popoverContent}</StyledPopover>
+      </StyledPopoverWrapper>
+    </StyledPopoverContainer>
+  );
+};

src/pages/_app.tsx

@@ -3,6 +3,7 @@ import dynamic from 'next/dynamic';
 import '../../public/globals.css';
 import '../../public/variable.css';
 import './temporary.css';
+import { EditorProvider } from '@/components/editor-provider';
 
 const ThemeProvider = dynamic(() => import('@/styles/themeProvider'), {
   ssr: false,
@@ -11,7 +12,9 @@ const ThemeProvider = dynamic(() => import('@/styles/themeProvider'), {
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <ThemeProvider>
+      <EditorProvider>
         <Component {...pageProps} />
+      </EditorProvider>
     </ThemeProvider>
   );
 }

src/pages/index.tsx

@@ -16,6 +16,8 @@ const StyledPage = styled('div')({
   height: '100vh',
   display: 'flex',
   flexDirection: 'column',
+  backgroundColor: 'var(--page-background-color)',
+  transition: 'background-color .5s',
 });
 
 const DynamicEditor = dynamic(() => import('../components/editor'), {
@@ -24,7 +26,6 @@ const DynamicEditor = dynamic(() => import('../components/editor'), {
 });
 
 const Home: NextPage = () => {
-  const { changeMode, mode } = useTheme();
   return (
     <StyledPage>
       <Header />

src/styles/theme.ts

@@ -1,5 +1,5 @@
 import '@emotion/react';
-import { AffineTheme } from './types';
+import { AffineTheme, ThemeMode } from './types';
 
 export const lightTheme: AffineTheme = {
   colors: {
@@ -13,8 +13,43 @@ export const darkTheme: AffineTheme = {
   },
 };
 
-export const globalThemeConstant = (theme: AffineTheme) => {
+export const globalThemeConstant = (mode: ThemeMode, theme: AffineTheme) => {
+  const isDark = mode === 'dark';
   return {
     '--color-primary': theme.colors.primary,
+    '--page-background-color': isDark ? '#3d3c3f' : '#fff',
+    '--page-text-color': isDark ? '#fff' : '#3a4c5c',
+
+    // editor style variables
+    '--affine-primary-color': isDark ? '#fff' : '#3a4c5c',
+    '--affine-muted-color': '#a6abb7',
+    '--affine-highlight-color': '#6880ff',
+    '--affine-placeholder-color': '#c7c7c7',
+    '--affine-selected-color': 'rgba(104, 128, 255, 0.1)',
+
+    '--affine-font-family':
+      'Avenir Next, apple-system, BlinkMacSystemFont,Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,Segoe UI Symbol, Noto Color Emoji',
+
+    '--affine-font-family2':
+      'Roboto Mono, apple-system, BlinkMacSystemFont,Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,Segoe UI Symbol, Noto Color Emoji',
   };
 };
+
+const editorStyleVariable = {
+  '--affine-primary-color': '#3a4c5c',
+  '--affine-muted-color': '#a6abb7',
+  '--affine-highlight-color': '#6880ff',
+  '--affine-placeholder-color': '#c7c7c7',
+  '--affine-selected-color': 'rgba(104, 128, 255, 0.1)',
+
+  '--affine-font-family':
+    'Avenir Next, apple-system, BlinkMacSystemFont,Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,Segoe UI Symbol, Noto Color Emoji',
+
+  '--affine-font-family2':
+    'Roboto Mono, apple-system, BlinkMacSystemFont,Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,Segoe UI Symbol, Noto Color Emoji',
+};
+
+const pageStyleVariable = {
+  '--page-background-color': '#fff',
+  '--page-text-color': '#3a4c5c',
+};

src/styles/themeProvider.tsx

@@ -67,7 +67,7 @@ export const ThemeProvider = ({
       <Global
         styles={css`
           :root {
-            ${globalThemeConstant(themeStyle)}
+            ${globalThemeConstant(mode, themeStyle)}
           }
         `}
       />