From 379ded3fb4eb417f75ddc900ef5eef383eb3b982 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Wed, 12 Oct 2022 18:44:11 +0800 Subject: [PATCH] feat: add blocksuit --- package.json | 5 +- pnpm-lock.yaml | 42 ++++++---- public/globals.css | 8 +- public/variable.css | 17 ++++ src/components/Header/icons.tsx | 141 ++++++++++++++++++++++++++++++++ src/components/Header/index.tsx | 110 +++++++++++++++++++++++-- src/components/editor.tsx | 13 +-- src/pages/_app.tsx | 2 + src/pages/index.tsx | 19 +++-- src/pages/temporary.css | 38 +++++++++ 10 files changed, 353 insertions(+), 42 deletions(-) create mode 100644 public/variable.css create mode 100644 src/components/Header/icons.tsx create mode 100644 src/pages/temporary.css diff --git a/package.json b/package.json index 1c609e1fe5..8f2c29177e 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,9 @@ "lint": "next lint" }, "dependencies": { - "@blocksuite/blocks": "^0.1.1", - "@blocksuite/editor": "^0.1.1", + "@blocksuite/blocks": "^0.2.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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d353ee2991..e9d4f7bb37 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,8 +1,9 @@ lockfileVersion: 5.4 specifiers: - '@blocksuite/blocks': ^0.1.1 - '@blocksuite/editor': ^0.1.1 + '@blocksuite/blocks': ^0.2.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/editor': 0.1.1 + '@blocksuite/blocks': 0.2.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: - resolution: {integrity: sha512-0bkv6nQu0Q3D+rcwXrWaCqihxDfSCT7kBfST71rK2LiL76huVzlgfgsT8JnZW4D2RHwuncb8JClqPFbxBCnhZA==} + /@blocksuite/blocks/0.2.1: + resolution: {integrity: sha512-IBUsuc+GeG12KGHXwY7tqA4QDWDnn33sIllWPCnDgnRcBnklAC4b8D+C3Iltn5LGkJ6/y5sujO563i8HTdWqFA==} dependencies: - '@blocksuite/shared': 0.1.1 - '@blocksuite/store': 0.1.1 + '@blocksuite/shared': 0.2.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: - resolution: {integrity: sha512-05gsCvLiE4ZU6prXqAnQQLqJ4euJfbibP1CbrzIU5umZp01t4dItpAdzqcRuMSK5FUEbA4fLjm+nfOprMjiyLw==} + /@blocksuite/editor/0.2.1: + resolution: {integrity: sha512-OUHRojBGprVFfadWEy8qoKo8C53uCDjuCGQX1Ek3BjwznQFeaw8qiJ1EKzVxtJZw2v1tb1ZB1vQ6Oo8oRZSkOA==} dependencies: - '@blocksuite/blocks': 0.1.1 - '@blocksuite/shared': 0.1.1 - '@blocksuite/store': 0.1.1 + '@blocksuite/blocks': 0.2.1 + '@blocksuite/shared': 0.2.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: - resolution: {integrity: sha512-7AtsI2cqrYXI/cLfZ9vkxB/m++1KNRuZYgV4u7AZvnvtHZm7e9+8YnZLbqfMVuPmyMwrzVkQWA3WunU78dEFhA==} + /@blocksuite/shared/0.2.1: + 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: - resolution: {integrity: sha512-a6dmXo8uHyEt0XpLjGJn1dAYKMDKttZHqRp4h5Otg6CnwAgRrNujSpOhV9y3zMxSqBy1VyTcY6V1/RRD3dWeJQ==} + /@blocksuite/store/0.2.1: + resolution: {integrity: sha512-EagjMW7YRZ6Tj4ipr/Z+kcXU7B3k22OC0WatRml+Pu/p1vyHVPMUsRynh5PLx+EmLkigI26P8bP1aJ70W9ilOw==} dependencies: lib0: 0.2.52 y-protocols: 1.0.5 diff --git a/public/globals.css b/public/globals.css index 6040c5315f..1c45aaea00 100644 --- a/public/globals.css +++ b/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, - PingFang SC, Microsoft Yahei, Arial, Hiragino Sans GB, sans-serif, - Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + font-family: var(--affine-font-family); } body { background: #fff; } a, a:hover { - color: #333; + color: var(--affine-primary-color); } input { diff --git a/public/variable.css b/public/variable.css new file mode 100644 index 0000000000..8b567ef536 --- /dev/null +++ b/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; +} diff --git a/src/components/Header/icons.tsx b/src/components/Header/icons.tsx new file mode 100644 index 0000000000..ba3150dc3a --- /dev/null +++ b/src/components/Header/icons.tsx @@ -0,0 +1,141 @@ +import type { DOMAttributes, CSSProperties } from 'react'; + +type IconProps = { + color?: string; + style?: CSSProperties; +} & DOMAttributes; + +export const LogoIcon = ({ + color = '#000', + style: propsStyle = {}, + ...props +}: IconProps) => { + const style = { fill: color, ...propsStyle }; + return ( + + + + ); +}; + +export const EdgelessIcon = ({ + color = '#000', + style: propsStyle = {}, + ...props +}: IconProps) => { + const style = { fill: color, ...propsStyle }; + + return ( + + + + + ); +}; + +export const MoonIcon = ({ + color = '#000', + style: propsStyle = {}, + ...props +}: IconProps) => { + const style = { fill: color, ...propsStyle }; + + return ( + + + + ); +}; + +export const PaperIcon = ({ + color = '#000', + style: propsStyle = {}, + ...props +}: IconProps) => { + const style = { fill: color, ...propsStyle }; + + return ( + + + + + + ); +}; + +export const SunIcon = ({ + color = '#000', + style: propsStyle = {}, + ...props +}: IconProps) => { + const style = { fill: color, ...propsStyle }; + + return ( + + + + ); +}; diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 63dccb58a2..61f368cab7 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,11 +1,111 @@ -import React from 'react'; +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: '100vh', - borderBottom: '1px solid gray', + width: '100vw', + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + position: 'relative', + padding: '0 22px', }); -export const Header = () => { - return Here is header; + +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 ( + + { + handleModeSwitch('page'); + }} + style={{ cursor: 'pointer' }} + > + { + handleModeSwitch('edgeless'); + }} + style={{ cursor: 'pointer' }} + > + + ); +}; + +const DarkModeSwitch = () => { + const [darkMode, setDarkMode] = useState(false); + return ( +
+ + +
+ ); +}; + +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 ( + + + {}} /> + + + + {title} + + + ); }; diff --git a/src/components/editor.tsx b/src/components/editor.tsx index 0ed37de6b9..65666a2468 100644 --- a/src/components/editor.tsx +++ b/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 ( -
- Editor - -
- ); + return ; }; declare global { diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 7b41f8c263..81efb41989 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,6 +1,8 @@ import type { AppProps } from 'next/app'; import dynamic from 'next/dynamic'; import '../../public/globals.css'; +import '../../public/variable.css'; +import './temporary.css'; const ThemeProvider = dynamic(() => import('@/styles/themeProvider'), { ssr: false, diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 4a79e311f0..4f9f3f806f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -7,11 +7,17 @@ import '@/components/simple-counter'; const StyledEditorContainer = styled('div')(({ theme }) => { return { - width: '720px', - margin: '78px auto 0', + flexGrow: 1, + paddingTop: '78px', }; }); +const StyledPage = styled('div')({ + height: '100vh', + display: 'flex', + flexDirection: 'column', +}); + const DynamicEditor = dynamic(() => import('../components/editor'), { loading: () =>
Loading...
, ssr: false, @@ -20,9 +26,11 @@ const DynamicEditor = dynamic(() => import('../components/editor'), { const Home: NextPage = () => { const { changeMode, mode } = useTheme(); return ( -
+
- + + + {/**/} {/**/} {/*

current mode {mode}

*/} @@ -47,8 +55,7 @@ const Home: NextPage = () => { {/*>*/} {/* auto*/} {/**/} - -
+ ); }; diff --git a/src/pages/temporary.css b/src/pages/temporary.css new file mode 100644 index 0000000000..820d931540 --- /dev/null +++ b/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; +}