Merge pull request #6 from toeverything/feat/layout

Feat/layout

package.json

@@ -10,8 +10,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@blocksuite/blocks": "^0.1.1",
+    "@blocksuite/blocks": "^0.2.1",
-    "@blocksuite/editor": "^0.1.1",
+    "@blocksuite/editor": "^0.2.1",
+    "@blocksuite/shared": "^0.2.1",
     "@emotion/css": "^11.10.0",
     "@emotion/react": "^11.10.4",
     "@emotion/server": "^11.10.0",

pnpm-lock.yaml

@@ -1,8 +1,9 @@
 lockfileVersion: 5.4
 
 specifiers:
-  '@blocksuite/blocks': ^0.1.1
+  '@blocksuite/blocks': ^0.2.1
-  '@blocksuite/editor': ^0.1.1
+  '@blocksuite/editor': ^0.2.1
+  '@blocksuite/shared': ^0.2.1
   '@emotion/css': ^11.10.0
   '@emotion/react': ^11.10.4
   '@emotion/server': ^11.10.0
@@ -24,8 +25,9 @@ specifiers:
   typescript: 4.8.3
 
 dependencies:
-  '@blocksuite/blocks': 0.1.1
+  '@blocksuite/blocks': 0.2.1
-  '@blocksuite/editor': 0.1.1
+  '@blocksuite/editor': 0.2.1
+  '@blocksuite/shared': 0.2.1
   '@emotion/css': 11.10.0
   '@emotion/react': 11.10.4_w5j4k42lgipnm43s3brx6h3c34
   '@emotion/server': 11.10.0_@emotion+css@11.10.0
@@ -120,23 +122,27 @@ packages:
       to-fast-properties: 2.0.0
     dev: false
 
-  /@blocksuite/blocks/0.1.1:
+  /@blocksuite/blocks/0.2.1:
-    resolution: {integrity: sha512-0bkv6nQu0Q3D+rcwXrWaCqihxDfSCT7kBfST71rK2LiL76huVzlgfgsT8JnZW4D2RHwuncb8JClqPFbxBCnhZA==}
+    resolution: {integrity: sha512-IBUsuc+GeG12KGHXwY7tqA4QDWDnn33sIllWPCnDgnRcBnklAC4b8D+C3Iltn5LGkJ6/y5sujO563i8HTdWqFA==}
     dependencies:
-      '@blocksuite/shared': 0.1.1
+      '@blocksuite/shared': 0.2.1
-      '@blocksuite/store': 0.1.1
+      '@blocksuite/store': 0.2.1
+      lit: 2.3.1
+      quill: 1.3.7
+      quill-cursors: 4.0.0
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - utf-8-validate
     dev: false
 
-  /@blocksuite/editor/0.1.1:
+  /@blocksuite/editor/0.2.1:
-    resolution: {integrity: sha512-05gsCvLiE4ZU6prXqAnQQLqJ4euJfbibP1CbrzIU5umZp01t4dItpAdzqcRuMSK5FUEbA4fLjm+nfOprMjiyLw==}
+    resolution: {integrity: sha512-OUHRojBGprVFfadWEy8qoKo8C53uCDjuCGQX1Ek3BjwznQFeaw8qiJ1EKzVxtJZw2v1tb1ZB1vQ6Oo8oRZSkOA==}
     dependencies:
-      '@blocksuite/blocks': 0.1.1
+      '@blocksuite/blocks': 0.2.1
-      '@blocksuite/shared': 0.1.1
+      '@blocksuite/shared': 0.2.1
-      '@blocksuite/store': 0.1.1
+      '@blocksuite/store': 0.2.1
+      lit: 2.3.1
       marked: 4.1.1
     transitivePeerDependencies:
       - bufferutil
@@ -144,10 +150,10 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@blocksuite/shared/0.1.1:
+  /@blocksuite/shared/0.2.1:
-    resolution: {integrity: sha512-7AtsI2cqrYXI/cLfZ9vkxB/m++1KNRuZYgV4u7AZvnvtHZm7e9+8YnZLbqfMVuPmyMwrzVkQWA3WunU78dEFhA==}
+    resolution: {integrity: sha512-wdSfYIVj1sT5T9UxwgiECNEbkQVJnDonyoyz/3O8zznPvwB9wknLBEfvI5w/K0Orr9Nypzc7gaErz1bck7aECQ==}
     dependencies:
-      '@blocksuite/store': 0.1.1
+      '@blocksuite/store': 0.2.1
       hotkeys-js: 3.10.0
     transitivePeerDependencies:
       - bufferutil
@@ -155,8 +161,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@blocksuite/store/0.1.1:
+  /@blocksuite/store/0.2.1:
-    resolution: {integrity: sha512-a6dmXo8uHyEt0XpLjGJn1dAYKMDKttZHqRp4h5Otg6CnwAgRrNujSpOhV9y3zMxSqBy1VyTcY6V1/RRD3dWeJQ==}
+    resolution: {integrity: sha512-EagjMW7YRZ6Tj4ipr/Z+kcXU7B3k22OC0WatRml+Pu/p1vyHVPMUsRynh5PLx+EmLkigI26P8bP1aJ70W9ilOw==}
     dependencies:
       lib0: 0.2.52
       y-protocols: 1.0.5

public/globals.css

@@ -144,20 +144,18 @@ button,
 select,
 keygen,
 legend {
-  color: #333;
+  color: var(--affine-primary-color);
   outline: 0;
   font-size: 18px;
   line-height: 1.5;
-  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Tahoma,
+  font-family: var(--affine-font-family);
-    PingFang SC, Microsoft Yahei, Arial, Hiragino Sans GB, sans-serif,
-    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 body {
   background: #fff;
 }
 a,
 a:hover {
-  color: #333;
+  color: var(--affine-primary-color);
 }
 
 input {

public/variable.css

@@ -0,0 +1,17 @@
+:root {
+  --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;
+}

src/components/Header/icons.tsx

@@ -0,0 +1,141 @@
+import type { DOMAttributes, CSSProperties } from 'react';
+
+type IconProps = {
+  color?: string;
+  style?: CSSProperties;
+} & DOMAttributes<SVGElement>;
+
+export const LogoIcon = ({
+  color = '#000',
+  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"
+        d="M10.552 2 4 21h3.838l4.168-13.14L16.176 21H20L13.447 2h-2.895Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const EdgelessIcon = ({
+  color = '#000',
+  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"
+        d="M12 17.4a5.4 5.4 0 1 0 0-10.8 5.4 5.4 0 0 0 0 10.8Zm7-5.4a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"
+        clipRule="evenodd"
+      />
+      <path
+        fillRule="evenodd"
+        d="M18.565 8a.8.8 0 0 1 .8-.8c.797 0 1.511.07 2.07.24.5.15 1.172.477 1.334 1.202v.004c.089.405-.026.776-.186 1.065a3.165 3.165 0 0 1-.652.782c-.52.471-1.265.947-2.15 1.407-1.783.927-4.28 1.869-7.077 2.62-2.796.752-5.409 1.184-7.381 1.266-.98.04-1.848-.003-2.516-.162-.333-.079-.662-.196-.937-.38-.282-.19-.547-.48-.639-.892v-.002c-.138-.63.202-1.173.518-1.532.343-.39.836-.768 1.413-1.129a.8.8 0 0 1 .848 1.357c-.515.322-.862.605-1.06.83a1.524 1.524 0 0 0-.078.096c.07.03.169.064.304.095.461.11 1.163.158 2.08.12 1.822-.075 4.314-.481 7.033-1.212 2.718-.73 5.1-1.635 6.753-2.494.832-.433 1.441-.835 1.814-1.173.127-.115.213-.21.268-.284a1.67 1.67 0 0 0-.153-.053c-.342-.104-.878-.171-1.606-.171a.8.8 0 0 1-.8-.8Zm2.692 1.097-.004-.004a.026.026 0 0 1 .004.004Zm-18.46 5 .001-.002v.002Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const MoonIcon = ({
+  color = '#000',
+  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"
+        d="M9.549 3.314a.775.775 0 0 1-.136-.855.801.801 0 0 1 .746-.46c3.287.078 6.352 2.081 7.577 5.292 1.608 4.215-.569 8.911-4.862 10.49a8.407 8.407 0 0 1-9.044-2.138.775.775 0 0 1-.137-.855.802.802 0 0 1 .747-.46c.832.02 1.684-.11 2.51-.414 3.465-1.275 5.222-5.066 3.924-8.469a6.6 6.6 0 0 0-1.325-2.13Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const PaperIcon = ({
+  color = '#000',
+  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"
+        d="M17 9.8H7V8.2h10v1.6ZM12 12.8H7v-1.6h5v1.6Z"
+        clipRule="evenodd"
+      />
+      <path d="m14 19 7-7h-5a2 2 0 0 0-2 2v5Z" />
+      <path
+        fillRule="evenodd"
+        d="M5 6.6h14c.22 0 .4.18.4.4v6.6L21 12V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h9l1.6-1.6H5a.4.4 0 0 1-.4-.4V7c0-.22.18-.4.4-.4Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const SunIcon = ({
+  color = '#000',
+  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"
+        d="M10.8 2.5a.8.8 0 0 0-1.6 0v.834a.8.8 0 1 0 1.6 0V2.5ZM5.15 4.018a.8.8 0 1 0-1.132 1.131l.678.679a.8.8 0 1 0 1.132-1.132l-.679-.678Zm10.832 1.131a.8.8 0 0 0-1.13-1.131l-.68.678a.8.8 0 1 0 1.132 1.132l.678-.679ZM10 5.867a4.133 4.133 0 1 0 0 8.267 4.133 4.133 0 0 0 0-8.267ZM2.5 9.2a.8.8 0 1 0 0 1.6h.834a.8.8 0 0 0 0-1.6H2.5Zm14.167 0a.8.8 0 1 0 0 1.6h.833a.8.8 0 0 0 0-1.6h-.833ZM5.827 15.31a.8.8 0 0 0-1.13-1.134l-.678.675a.8.8 0 0 0 1.129 1.134l.678-.675Zm9.476-1.134a.8.8 0 1 0-1.129 1.134l.679.675a.8.8 0 1 0 1.128-1.134l-.678-.675ZM10.8 16.667a.8.8 0 1 0-1.6 0v.833a.8.8 0 0 0 1.6 0v-.833Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};

src/components/Header/index.tsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from 'react';
+import { styled } from '@/styles';
+import { LogoIcon, PaperIcon, EdgelessIcon, SunIcon, MoonIcon } from './icons';
+
+const StyledHeader = styled('div')({
+  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') => {
+    const event = new CustomEvent('affine.switch-mode', { detail: mode });
+    window.dispatchEvent(event);
+
+    setMode(mode);
+  };
+  return (
+    <StyledModeSwitch>
+      <PaperIcon
+        color={mode === 'page' ? '#6880FF' : '#a6abb7'}
+        onClick={() => {
+          handleModeSwitch('page');
+        }}
+        style={{ cursor: 'pointer' }}
+      ></PaperIcon>
+      <EdgelessIcon
+        color={mode === 'edgeless' ? '#6880FF' : '#a6abb7'}
+        onClick={() => {
+          handleModeSwitch('edgeless');
+        }}
+        style={{ cursor: 'pointer' }}
+      ></EdgelessIcon>
+    </StyledModeSwitch>
+  );
+};
+
+const DarkModeSwitch = () => {
+  const [darkMode, setDarkMode] = useState(false);
+  return (
+    <div>
+      <SunIcon></SunIcon>
+      <MoonIcon></MoonIcon>
+    </div>
+  );
+};
+
+export const Header = () => {
+  const [title, setTitle] = useState('');
+
+  useEffect(() => {
+    setTimeout(() => {
+      const editor = window.editor;
+      setTitle(editor.model.title);
+      editor.model.propsUpdated.on(() => {
+        setTitle(editor.model.title);
+      });
+    }, 1000);
+  }, []);
+
+  return (
+    <StyledHeader>
+      <StyledLogo>
+        <LogoIcon color={'#6880FF'} onClick={() => {}} />
+      </StyledLogo>
+      <StyledTitle>
+        <ModeSwitch />
+        <StyledTitleWrapper>{title}</StyledTitleWrapper>
+      </StyledTitle>
+    </StyledHeader>
+  );
+};

src/components/editor.tsx

@@ -3,13 +3,14 @@ import '@blocksuite/blocks';
 import '@blocksuite/editor';
 import '@blocksuite/blocks/style';
 
+declare global {
+  interface Window {
+    editor: EditorContainer;
+  }
+}
+
 export const Editor = () => {
-  return (
+  return <editor-container />;
-    <div>
-      Editor
-      <editor-container />
-    </div>
-  );
 };
 
 declare global {

src/pages/_app.tsx

@@ -1,7 +1,12 @@
 import type { AppProps } from 'next/app';
-import { ThemeProvider } from '@/styles';
+import dynamic from 'next/dynamic';
-
 import '../../public/globals.css';
+import '../../public/variable.css';
+import './temporary.css';
+
+const ThemeProvider = dynamic(() => import('@/styles/themeProvider'), {
+  ssr: false,
+});
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (

src/pages/index.tsx

@@ -1,15 +1,23 @@
 import type { NextPage } from 'next';
 import dynamic from 'next/dynamic';
 import { styled, useTheme } from '@/styles';
+import { Header } from '@/components/Header';
 
 import '@/components/simple-counter';
 
-const Button = styled('div')(({ theme }) => {
+const StyledEditorContainer = styled('div')(({ theme }) => {
   return {
-    color: theme.colors.primary,
+    flexGrow: 1,
+    paddingTop: '78px',
   };
 });
 
+const StyledPage = styled('div')({
+  height: '100vh',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
 const DynamicEditor = dynamic(() => import('../components/editor'), {
   loading: () => <div>Loading...</div>,
   ssr: false,
@@ -18,33 +26,36 @@ const DynamicEditor = dynamic(() => import('../components/editor'), {
 const Home: NextPage = () => {
   const { changeMode, mode } = useTheme();
   return (
-    <div>
+    <StyledPage>
-      <Button>A button use the theme styles</Button>
+      <Header />
-      <simple-counter name="A counter created by web component" />
+      <StyledEditorContainer>
-      <p>current mode {mode}</p>
-      <button
-        onClick={() => {
-          changeMode('light');
-        }}
-      >
-        light
-      </button>
-      <button
-        onClick={() => {
-          changeMode('dark');
-        }}
-      >
-        dark
-      </button>
-      <button
-        onClick={() => {
-          changeMode('auto');
-        }}
-      >
-        auto
-      </button>
         <DynamicEditor />
-    </div>
+      </StyledEditorContainer>
+      {/*<Button>A button use the theme styles</Button>*/}
+      {/*<simple-counter name="A counter created by web component" />*/}
+      {/*<p>current mode {mode}</p>*/}
+      {/*<button*/}
+      {/*  onClick={() => {*/}
+      {/*    changeMode('light');*/}
+      {/*  }}*/}
+      {/*>*/}
+      {/*  light*/}
+      {/*</button>*/}
+      {/*<button*/}
+      {/*  onClick={() => {*/}
+      {/*    changeMode('dark');*/}
+      {/*  }}*/}
+      {/*>*/}
+      {/*  dark*/}
+      {/*</button>*/}
+      {/*<button*/}
+      {/*  onClick={() => {*/}
+      {/*    changeMode('auto');*/}
+      {/*  }}*/}
+      {/*>*/}
+      {/*  auto*/}
+      {/*</button>*/}
+    </StyledPage>
   );
 };
 

src/pages/temporary.css

@@ -0,0 +1,38 @@
+debug-menu {
+  display: none !important;
+}
+.affine-editor-container {
+  height: 100%;
+  padding: 0 !important;
+}
+.affine-default-page-block-container {
+  width: 720px;
+  height: 100%;
+  margin: 0 auto;
+}
+
+u {
+  text-decoration: none;
+  border-bottom: 1px solid #4c6275 !important;
+}
+u::after {
+  display: none;
+}
+
+.affine-paragraph-block-container.text {
+  margin-top: 18px !important;
+}
+
+.affine-default-page-block-title {
+  width: 100%;
+}
+s {
+  text-decoration: line-through !important;
+}
+
+.affine-edgeless-page-block-container {
+  height: 100% !important;
+}
+.affine-block-children-container.edgeless {
+  height: 100% !important;
+}

src/styles/themeProvider.tsx

@@ -75,3 +75,5 @@ export const ThemeProvider = ({
     </ThemeContext.Provider>
   );
 };
+
+export default ThemeProvider;