diff --git a/.all-contributorsrc b/.all-contributorsrc index 0340f41c9..3286d1be2 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1,5 +1,5 @@ { - "projectName": "Ligo-Virgo", + "projectName": "toeverything", "projectOwner": "toeverything", "repoType": "github", "repoHost": "https://github.com", @@ -25,7 +25,7 @@ "login": "tzhangchi", "name": "Chi Zhang", "avatar_url": "https://avatars.githubusercontent.com/u/5910926?v=4", - "profile": "https://zhangchi.blog.csdn.net/", + "profile": "http://zhangchi.page/", "contributions": [ "code", "doc" @@ -33,7 +33,7 @@ }, { "login": "alt1o", - "name": "alt1o", + "name": "wang xinglong", "avatar_url": "https://avatars.githubusercontent.com/u/21084335?v=4", "profile": "https://github.com/alt1o", "contributions": [ @@ -43,7 +43,7 @@ }, { "login": "DiamondThree", - "name": "Diamond", + "name": "DiamondThree", "avatar_url": "https://avatars.githubusercontent.com/u/24630517?v=4", "profile": "https://github.com/DiamondThree", "contributions": [ @@ -63,7 +63,7 @@ }, { "login": "zuoxiaodong0815", - "name": "zuoxiaodong0815", + "name": "xiaodong zuo", "avatar_url": "https://avatars.githubusercontent.com/u/53252747?v=4", "profile": "https://github.com/zuoxiaodong0815", "contributions": [ @@ -73,7 +73,7 @@ }, { "login": "SaikaSakura", - "name": "SaikaSakura", + "name": "MingLIang Wang", "avatar_url": "https://avatars.githubusercontent.com/u/11530942?v=4", "profile": "https://github.com/SaikaSakura", "contributions": [ @@ -92,10 +92,10 @@ ] }, { - "login": "tuluffy", - "name": "tuluffy", - "avatar_url": "https://avatars.githubusercontent.com/u/26808339?v=4", - "profile": "https://tuluffy.github.io/angular.github.io/", + "login": "mitsuhatu", + "name": "mitsuhatu", + "avatar_url": "https://avatars.githubusercontent.com/u/110213079?v=4", + "profile": "https://github.com/mitsuhatu", "contributions": [ "code", "doc" diff --git a/.github/deployment/Caddyfile-affine b/.github/deployment/Caddyfile-affine new file mode 100644 index 000000000..b6db6009e --- /dev/null +++ b/.github/deployment/Caddyfile-affine @@ -0,0 +1,28 @@ +:3000 { + root /* ./dist + + file_server { + precompressed br + } + + encode { + zstd + gzip 9 + } + + @notStatic { + not path /*.css + not path /*.js + not path /*.png + not path /*.jpg + not path /*.svg + not path /*.ttf + not path /*.eot + not path /*.woff + not path /*.woff2 + } + + handle @notStatic { + try_files {path} /index.html + } +} diff --git a/Caddyfile b/.github/deployment/Caddyfile-lisa similarity index 100% rename from Caddyfile rename to .github/deployment/Caddyfile-lisa diff --git a/Caddyfile-venus b/.github/deployment/Caddyfile-venus similarity index 100% rename from Caddyfile-venus rename to .github/deployment/Caddyfile-venus diff --git a/.github/deployment/Dockerfile-affine b/.github/deployment/Dockerfile-affine new file mode 100644 index 000000000..46a46233f --- /dev/null +++ b/.github/deployment/Dockerfile-affine @@ -0,0 +1,21 @@ +FROM node:16-alpine as builder +WORKDIR /app +COPY . . +RUN apk add g++ make python3 git libpng-dev +RUN npm i -g pnpm@7 && pnpm i --frozen-lockfile --store=node_modules/.pnpm-store && pnpm run build:local + +FROM node:16-alpine as relocate +WORKDIR /app +COPY --from=builder /app/dist/apps/ligo-virgo ./dist +COPY --from=builder /app/.github/deployment/Caddyfile-affine ./Caddyfile +RUN rm ./dist/*.txt + +# ============= +# AFFiNE image +# ============= +FROM caddy:2.4.6-alpine as AFFiNE +WORKDIR /app +COPY --from=relocate /app . + +EXPOSE 3000 +CMD ["caddy", "run"] \ No newline at end of file diff --git a/Dockerfile-keck b/.github/deployment/Dockerfile-keck similarity index 93% rename from Dockerfile-keck rename to .github/deployment/Dockerfile-keck index 598fded0a..7918e4942 100644 --- a/Dockerfile-keck +++ b/.github/deployment/Dockerfile-keck @@ -1,7 +1,7 @@ FROM node:16-alpine as builder WORKDIR /app COPY . . -RUN apk add g++ make python3 git +RUN apk add g++ make python3 git libpng-dev RUN npm i -g pnpm@7 && pnpm i --frozen-lockfile --store=node_modules/.pnpm-store && pnpm run build:keck FROM node:16-alpine as node_modules diff --git a/Dockerfile b/.github/deployment/Dockerfile-lisa similarity index 78% rename from Dockerfile rename to .github/deployment/Dockerfile-lisa index f6e2249fa..471e4d0d4 100644 --- a/Dockerfile +++ b/.github/deployment/Dockerfile-lisa @@ -1,13 +1,13 @@ FROM node:16-alpine as builder WORKDIR /app COPY . . -RUN apk add g++ make python3 git +RUN apk add g++ make python3 git libpng-dev RUN npm i -g pnpm@7 && pnpm i --frozen-lockfile --store=node_modules/.pnpm-store && pnpm run build FROM node:16-alpine as relocate WORKDIR /app COPY --from=builder /app/dist/apps/ligo-virgo ./dist -COPY --from=builder /app/Caddyfile ./ +COPY --from=builder /app/.github/deployment/Caddyfile-lisa ./Caddyfile RUN rm ./dist/*.txt # ============= diff --git a/Dockerfile-venus b/.github/deployment/Dockerfile-venus similarity index 78% rename from Dockerfile-venus rename to .github/deployment/Dockerfile-venus index 55ece303c..585ade8a2 100644 --- a/Dockerfile-venus +++ b/.github/deployment/Dockerfile-venus @@ -1,13 +1,13 @@ FROM node:16-alpine as builder WORKDIR /app COPY . . -RUN apk add g++ make python3 git +RUN apk add g++ make python3 git libpng-dev RUN npm i -g pnpm@7 && pnpm i --frozen-lockfile --store=node_modules/.pnpm-store && pnpm run build:venus FROM node:16-alpine as relocate WORKDIR /app COPY --from=builder /app/dist/apps/venus ./dist -COPY --from=builder /app/Caddyfile-venus ./Caddyfile +COPY --from=builder /app/.github/deployment/Caddyfile-venus ./Caddyfile RUN rm ./dist/*.txt # ============= diff --git a/.github/workflows/affine.yml b/.github/workflows/affine.yml new file mode 100644 index 000000000..28ca2d429 --- /dev/null +++ b/.github/workflows/affine.yml @@ -0,0 +1,57 @@ +name: Build AFFiNE-Local + +on: + push: + branches: [master] + pull_request: + branches: [master] + +# Cancels all previous workflow runs for pull requests that have not completed. +# See https://docs.github.com/en/actions/using-jobs/using-concurrency +concurrency: + # The concurrency group contains the workflow name and the branch name for + # pull requests or the commit hash for any other events. + group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }} + cancel-in-progress: true + +env: + REGISTRY: ghcr.io + NAMESPACE: toeverything + AFFINE_IMAGE_NAME: AFFiNE + IMAGE_TAG_LATEST: nightly-latest + +jobs: + ligo-virgo: + runs-on: self-hosted + environment: development + permissions: + contents: read + packages: write + + steps: + - name: Checkout + uses: actions/checkout@v2 + + - name: Log in to the Container registry + uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9 + with: + registry: ${{ env.REGISTRY }} + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + + - name: Extract metadata (tags, labels) for Docker (AFFiNE-Local) + id: meta_affine + uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38 + with: + images: ${{ env.REGISTRY }}/${{ env.NAMESPACE }}/${{ env.AFFINE_IMAGE_NAME }} + tags: ${{ env.IMAGE_TAG_LATEST }} + + - name: Build and push Docker image (AFFINE-Local) + uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc + with: + context: . + file: ./.github/deployment/Dockerfile-affine + push: ${{ github.ref == 'refs/heads/master' && true || false }} + tags: ${{ steps.meta_affine.outputs.tags }} + labels: ${{ steps.meta_affine.outputs.labels }} + target: AFFiNE diff --git a/.github/workflows/keck.yml b/.github/workflows/keck.yml index d7b915c10..a09d79045 100644 --- a/.github/workflows/keck.yml +++ b/.github/workflows/keck.yml @@ -6,11 +6,13 @@ on: branches: [master] paths: - 'apps/keck/**' + - '.github/deployment' - '.github/workflows/keck.yml' pull_request: branches: [master] paths: - 'apps/keck/**' + - '.github/deployment' - '.github/workflows/keck.yml' # Cancels all previous workflow runs for pull requests that have not completed. @@ -60,7 +62,7 @@ jobs: uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc with: context: . - file: ./Dockerfile-keck + file: ./.github/deployment/Dockerfile-keck push: ${{ github.ref == 'refs/heads/field' && true || false }} tags: ${{ steps.meta_keck.outputs.tags }} labels: ${{ steps.meta_keck.outputs.labels }} diff --git a/.github/workflows/lisa.yml b/.github/workflows/lisa.yml index 878fad627..ead4c8fff 100644 --- a/.github/workflows/lisa.yml +++ b/.github/workflows/lisa.yml @@ -53,6 +53,7 @@ jobs: uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc with: context: . + file: ./.github/deployment/Dockerfile-lisa push: ${{ github.ref == 'refs/heads/master' && true || false }} tags: ${{ steps.meta_lisa.outputs.tags }} labels: ${{ steps.meta_lisa.outputs.labels }} diff --git a/.github/workflows/venus.yml b/.github/workflows/venus.yml index 59bf758cd..8b8841404 100644 --- a/.github/workflows/venus.yml +++ b/.github/workflows/venus.yml @@ -5,6 +5,7 @@ on: branches: [master] paths: - 'apps/venus/**' + - '.github/deployment' - '.github/workflows/venus.yml' pull_request: branches: [master] @@ -59,7 +60,7 @@ jobs: uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc with: context: . - file: ./Dockerfile-venus + file: ./.github/deployment/Dockerfile-venus push: ${{ github.ref == 'refs/heads/master' && true || false }} tags: ${{ steps.meta_venus.outputs.tags }} labels: ${{ steps.meta_venus.outputs.labels }} diff --git a/README.md b/README.md index 0fbcf5bf8..26d85580e 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ Planning, Sorting and Creating all Together. Open-source, Privacy-First, and Fre @@ -38,21 +38,29 @@ See https://github.com/all-contributors/all-contributors/issues/361#issuecomment Telegram

-

affine_screen

+

affine_screen

-# Stay Up-to-Date +# Stay Up-to-Date and Support Us ![952cd7a5-70fe-48ab-b74f-23981d94d2c5](https://user-images.githubusercontent.com/79301703/182365526-df074c64-cee4-45f6-b8e0-b912f17332c6.gif) +# How to use + +If you have experience in front-end development, please [refer to here](https://affine.gitbook.io/affine/basic-documentation/contribute-to-affine); if you want to experience our latest version, please wait a moment, we will launch a web version in the near future. +And, thanks to Lee who [made a desktop build with Tauri](https://github.com/m1911star/affine-client) for you to try out. +Please notice that AFFiNE is still under Alpha stage and is not ready for production use. + # Table of contents -- [Stay Up-to-Date](#stay-up-to-date) +- [Stay Up-to-Date and Support Us](#stay-up-to-date-and-support-us) +- [How to Use](#how-to-use) - [Table of contents](#table-of-contents) - [Shape your page](#shape-your-page) - [Plan your task](#plan-your-task) - [Sort your knowledge](#sort-your-knowledge) - [Create your story](#create-your-story) -- [Getting Started with development](#getting-started-with-development) +- [Documentation](#documentation) + - [Getting Started with development](#getting-started-with-development) - [Roadmap](#roadmap) - [Releases](#releases) - [Feature requests](#feature-requests) @@ -60,6 +68,7 @@ See https://github.com/all-contributors/all-contributors/issues/361#issuecomment - [The Philosophy of AFFiNE](#the-philosophy-of-affine) - [Community](#community) - [Contributors](#contributors) +- [Acknowledgments](#acknowledgments) - [License](#license) ## Shape your page @@ -80,9 +89,13 @@ We want your data always to be yours, and we don't want to make any sacrifice to Collaboration isn't only necessary for teams -- you may take and insert pics on your phone, then edit them on your desktop, and share them with your collaborators. Affine is fully built with web technologies so that consistency and accessibility are always guaranteed on Mac, Windows and Linux. The local file system support will be available when version 0.0.1beta is released. -# Getting Started with development +# Documentation -Please view the [documentation](https://affine.gitbook.io/affine/) in Contribute-to-AFFiNE/Software-Contributions/Environment-setup. +AFFiNE is not yet ready for production use. To install, you may check how to build or depoly the AFFiNE in [quick-start](https://affine.gitbook.io/affine/basic-documentation/contribute-to-affine/quick-start). For the full documentation, please view it [here](https://affine.gitbook.io/affine/). + +## Getting Started with development + +Please view the path Contribute-to-AFFiNE/Software-Contributions/Quick-Start in documentation. # Roadmap @@ -110,7 +123,7 @@ It is all perfect... If there are not so many waste operations and redundant inf That's why we are making AFFiNE. Some of the most important features are: - Transformable - - Every block can be transformed equally as a database + - Every block can be transformed equally well as a database - e.g. you can now set up a to-do with MarkDown in text view and edit it in kanban view. - Every doc can be turned into a whiteboard - An always good-to-read, structured docs-form page is the best for your notes, but a boundless doodle surface is better for collaboration and creativity. @@ -134,9 +147,17 @@ We would like to give special thanks to the innovators and pioneers who greatly We would also like to give thanks to open-source projects that make affine possible: -- Yjs & Yrs -- React -- Rust +- [Yjs](https://github.com/yjs/yjs) & [Yrs](https://github.com/y-crdt/y-crdt) -- Fundamental support of CRDTs for our implements on state management and data sync. +- [React](https://github.com/facebook/react) -- View layer support and web GUI framework. +- [Rust](https://github.com/rust-lang/rust) -- High performance language that extends the ability and availability of our real-time backend, JWST. +- [Fossil](https://www2.fossil-scm.org/home/doc/trunk/www/index.wiki) -- Source code management tool made with CRDTs which inspired our design on block data structure. +- [slatejs](https://github.com/ianstormtaylor/slate) -- Customizable rich-text editor. +- [Jotai](https://github.com/pmndrs/jotai) -- Minimal state management tool for frontend. +- [Tldraw](https://github.com/tldraw/tldraw) -- Excellent drawing board. +- [MUI](https://github.com/mui/material-ui) -- Our most used graphic UI component library. +- Other [dependancies](https://github.com/toeverything/AFFiNE/network/dependencies) + +Thanks a lot to the community for providing such powerful and simple libraries, so that we can focus more on the implementation of the product logic, and we hope that in the future our projects will also provide a more easy-to-use knowledge base for everyone. # Community @@ -152,16 +173,16 @@ For help, discussion about best practices, or any other conversation that would - - - + + + - - + + - + diff --git a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx index b2ebc5f7d..76c48efeb 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/Page.tsx @@ -1,16 +1,9 @@ /* eslint-disable filename-rules/match */ -import { - useEffect, - useRef, - type UIEvent, - useState, - useLayoutEffect, -} from 'react'; +import { useEffect, useRef, type UIEvent, useState } from 'react'; import { useParams } from 'react-router'; import { MuiBox as Box, MuiCircularProgress as CircularProgress, - MuiDivider as Divider, styled, } from '@toeverything/components/ui'; import { AffineEditor } from '@toeverything/components/affine-editor'; @@ -31,7 +24,7 @@ import { WorkspaceName } from './workspace-name'; import { CollapsiblePageTree } from './collapsible-page-tree'; import { useFlag } from '@toeverything/datasource/feature-flags'; import { type BlockEditor } from '@toeverything/components/editor-core'; - +import { Tabs } from './components/tabs'; type PageProps = { workspace: string; }; @@ -40,30 +33,8 @@ export function Page(props: PageProps) { const { page_id } = useParams(); const { showSpaceSidebar, fixedDisplay, setSpaceSidebarVisible } = useShowSpaceSidebar(); - const { user } = useUserAndSpaces(); const dailyNotesFlag = useFlag('BooleanDailyNotes', false); - useEffect(() => { - if (!user?.id || !page_id) return; - const updateRecentPages = async () => { - // TODO: deal with it temporarily - await services.api.editorBlock.getWorkspaceDbBlock( - props.workspace, - { - userId: user.id, - } - ); - - // await services.api.userConfig.addRecentPage( - // props.workspace, - // user.id, - // page_id - // ); - await services.api.editorBlock.clearUndoRedo(props.workspace); - }; - updateRecentPages(); - }, [user, props.workspace, page_id]); - return ( @@ -80,7 +51,9 @@ export function Page(props: PageProps) { onMouseLeave={() => setSpaceSidebarVisible(false)} > - + + +
{dailyNotesFlag && ( @@ -92,14 +65,14 @@ export function Page(props: PageProps) { )}
- + {page_id ? : null}
@@ -120,38 +93,29 @@ const EditorContainer = ({ workspace: string; }) => { const [lockScroll, setLockScroll] = useState(false); - const scrollContainerRef = useRef(); + const [scrollContainer, setScrollContainer] = useState(); const editorRef = useRef(); + const onScroll = (event: UIEvent) => { editorRef.current.getHooks().onRootNodeScroll(event); editorRef.current.scrollManager.emitScrollEvent(event); }; - useEffect(() => { - editorRef.current.scrollManager.scrollContainer = - scrollContainerRef.current; - - editorRef.current.scrollManager.scrollController = { - lockScroll: () => setLockScroll(true), - unLockScroll: () => setLockScroll(false), - }; - }, []); - const { setPageClientWidth } = usePageClientWidth(); useEffect(() => { - if (scrollContainerRef.current) { + if (scrollContainer) { const obv = new ResizeObserver(e => { setPageClientWidth(e[0].contentRect.width); }); - obv.observe(scrollContainerRef.current); + obv.observe(scrollContainer); return () => obv.disconnect(); } - }); + }, [setPageClientWidth, scrollContainer]); return ( setScrollContainer(ref)} onScroll={onScroll} > {pageId ? ( @@ -159,6 +123,11 @@ const EditorContainer = ({ workspace={workspace} rootBlockId={pageId} ref={editorRef} + scrollContainer={scrollContainer} + scrollController={{ + lockScroll: () => setLockScroll(true), + unLockScroll: () => setLockScroll(false), + }} /> ) : ( {children ? ( diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/logo/Logo.tsx b/apps/ligo-virgo/src/pages/workspace/docs/components/logo/Logo.tsx new file mode 100644 index 000000000..8b33a276c --- /dev/null +++ b/apps/ligo-virgo/src/pages/workspace/docs/components/logo/Logo.tsx @@ -0,0 +1,19 @@ +export const Logo = ({ color, style, ...props }) => { + return ( + + + + + ); +}; diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/logo/index.ts b/apps/ligo-virgo/src/pages/workspace/docs/components/logo/index.ts new file mode 100644 index 000000000..33af50533 --- /dev/null +++ b/apps/ligo-virgo/src/pages/workspace/docs/components/logo/index.ts @@ -0,0 +1 @@ +export { Logo } from './Logo'; diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/Tabs.tsx b/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/Tabs.tsx new file mode 100644 index 000000000..3722c5e16 --- /dev/null +++ b/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/Tabs.tsx @@ -0,0 +1,61 @@ +import { useState } from 'react'; +import { MuiDivider as Divider, styled } from '@toeverything/components/ui'; +import type { ValueOf } from '@toeverything/utils'; + +const StyledTabs = styled('div')({ + width: '100%', + height: '12px', + marginTop: '12px', + display: 'flex', + alignItems: 'center', + cursor: 'pointer', +}); + +const StyledDivider = styled(Divider)<{ isActive?: boolean }>( + ({ isActive }) => { + return { + flex: 1, + backgroundColor: isActive ? '#3E6FDB' : '#ECF1FB', + borderWidth: '2px', + }; + } +); + +const TAB_TITLE = { + PAGES: 'pages', + GALLERY: 'gallery', + TOC: 'toc', +} as const; + +const TabMap = new Map([ + ['PAGES', 'pages'], + ['GALLERY', 'gallery'], + ['TOC', 'toc'], +]); + +type TabKey = keyof typeof TAB_TITLE; +type TabValue = ValueOf; + +const Tabs = () => { + const [activeTab, setActiveTab] = useState(TAB_TITLE.PAGES); + + const onClick = (v: TabValue) => { + setActiveTab(v); + }; + + return ( + + {[...TabMap.entries()].map(([k, v]) => { + return ( + onClick(v)} + /> + ); + })} + + ); +}; + +export { Tabs }; diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/index.ts b/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/index.ts new file mode 100644 index 000000000..941e6baba --- /dev/null +++ b/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/index.ts @@ -0,0 +1 @@ +export { Tabs } from './Tabs'; diff --git a/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx b/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx index 24d69b659..cf6f3a031 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx @@ -1,27 +1,28 @@ import { - MuiButton as Button, - Switch, styled, MuiOutlinedInput as OutlinedInput, } from '@toeverything/components/ui'; -import { LogoIcon } from '@toeverything/components/icons'; +import { PinIcon } from '@toeverything/components/icons'; import { useUserAndSpaces, useShowSpaceSidebar, } from '@toeverything/datasource/state'; -import { useCallback, useEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { services } from '@toeverything/datasource/db-service'; +import { Logo } from './components/logo/Logo'; const WorkspaceContainer = styled('div')({ display: 'flex', - alignItems: 'center', - minHeight: 60, - padding: '12px 0px', + flexDirection: 'column', + paddingBottom: '12px', color: '#566B7D', }); const LeftContainer = styled('div')({ flex: 'auto', display: 'flex', + height: '52px', + alignItems: 'center', + margin: '0 12px', }); const LogoContainer = styled('div')({ @@ -32,20 +33,36 @@ const LogoContainer = styled('div')({ minWidth: 24, }); -const StyledLogoIcon = styled(LogoIcon)(({ theme }) => { - return { - color: theme.affine.palette.primary, - width: '16px !important', - height: '16px !important', - }; +const StyledPin = styled('div')({ + display: 'flex', + justifyContent: 'end', + alignItems: 'center', +}); + +const StyledWorkspace = styled('div')({ + height: '100%', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + marginLeft: '12px', + paddingLeft: '12px', +}); + +const StyledWorkspaceDesc = styled('div')({ + fontSize: '12px', + color: '#98ACBD', + height: '18px', + + display: 'flex', + alignItems: 'center', }); const WorkspaceNameContainer = styled('div')({ display: 'flex', alignItems: 'center', flex: 'auto', - width: '100px', - marginRight: '10px', + width: '165px', + height: '34px', input: { padding: '5px 10px', }, @@ -58,21 +75,15 @@ const WorkspaceNameContainer = styled('div')({ }); const WorkspaceReNameContainer = styled('div')({ - marginRight: '10px', + height: '34px', + display: 'flex', + alignItems: 'center', + input: { padding: '5px 10px', }, }); -const ToggleDisplayContainer = styled('div')({ - display: 'flex', - alignItems: 'center', - fontSize: 12, - color: '#3E6FDB', - padding: 6, - minWidth: 64, -}); - export const WorkspaceName = () => { const { currentSpaceId } = useUserAndSpaces(); const { fixedDisplay, toggleSpaceSidebar } = useShowSpaceSidebar(); @@ -139,35 +150,46 @@ export const WorkspaceName = () => { return ( + + + - + - {inRename ? ( - - setInRename(false)} - /> - - ) : ( - - setInRename(true)}> - {workspaceName || workspaceId} - - - )} + + {inRename ? ( + + setInRename(false)} + /> + + ) : ( + + setInRename(true)}> + {workspaceName || workspaceId} + + + )} + + + To shape, Not to Adapt. + + - - - ); }; diff --git a/apps/venus/package.json b/apps/venus/package.json index 20c7374fd..fe69da1b8 100644 --- a/apps/venus/package.json +++ b/apps/venus/package.json @@ -14,6 +14,9 @@ }, "devDependencies": { "mini-css-extract-plugin": "^2.6.1", - "webpack": "^5.73.0" + "image-minimizer-webpack-plugin": "^3.2.3", + "imagemin": "^8.0.1", + "imagemin-optipng": "^8.0.0", + "webpack": "^5.74.0" } } diff --git a/apps/venus/src/app/collaboration.png b/apps/venus/src/app/collaboration.png new file mode 100644 index 000000000..bad2daedd Binary files /dev/null and b/apps/venus/src/app/collaboration.png differ diff --git a/apps/venus/src/app/index.tsx b/apps/venus/src/app/index.tsx index 8e17108f1..dea6dc0b7 100644 --- a/apps/venus/src/app/index.tsx +++ b/apps/venus/src/app/index.tsx @@ -6,13 +6,18 @@ import clsx from 'clsx'; import { CssVarsProvider, styled } from '@mui/joy/styles'; import { Box, Button, Container, Grid, SvgIcon, Typography } from '@mui/joy'; -import Card from '@mui/joy/Card'; import GitHubIcon from '@mui/icons-material/GitHub'; import RedditIcon from '@mui/icons-material/Reddit'; import TelegramIcon from '@mui/icons-material/Telegram'; // eslint-disable-next-line no-restricted-imports import { useMediaQuery } from '@mui/material'; +import LogoImage from './logo.png'; +import CollaborationImage from './collaboration.png'; +import PageImage from './page.png'; +import ShapeImage from './shape.png'; +import TaskImage from './task.png'; + const DiscordIcon = (props: any) => { return ( { width="71" height="55" viewBox="0 0 71 55" - fill="none" + fill="currentcolor" > @@ -407,10 +412,7 @@ export function App() { }, }} > - + @@ -515,14 +517,16 @@ export function App() { justifyContent: 'left', textAlign: 'left', transition: 'all .5s', - // boxShadow: '2px 2px 40px #08f2', - // ':hover': { - // boxShadow: '2px 2px 40px #08f4', - // }, + transform: 'scale(0.98)', + boxShadow: '2px 2px 40px #0002', + ':hover': { + transform: 'scale(1)', + boxShadow: '2px 2px 40px #0004', + }, }} > @@ -537,10 +541,10 @@ export function App() { }} > @@ -656,14 +662,14 @@ export function App() { justifyContent: 'center', margin: 'auto', transition: 'all .5s', - // boxShadow: '2px 2px 40px #08f2', - // ':hover': { - // boxShadow: '2px 2px 40px #08f4', - // }, + transform: 'scale(0.98)', + ':hover': { + transform: 'scale(1)', + }, }} > @@ -676,7 +682,7 @@ export function App() { margin: 'auto', }} > - + @@ -738,13 +744,20 @@ export function App() { }} > - + window.open( + 'https://github.com/toeverything/AFFiNE/' + ) + } > GitHub - + - + window.open('https://www.reddit.com/r/Affine/') + } > Reddit - + - + window.open('https://t.me/affineworkos') + } > Telegram - + - + window.open('https://discord.gg/yz6tGVsf5p') + } > @@ -883,12 +927,16 @@ export function App() { }} > Discord - + diff --git a/apps/venus/src/assets/logo.png b/apps/venus/src/app/logo.png similarity index 100% rename from apps/venus/src/assets/logo.png rename to apps/venus/src/app/logo.png diff --git a/apps/venus/src/app/page.png b/apps/venus/src/app/page.png new file mode 100644 index 000000000..d5f393262 Binary files /dev/null and b/apps/venus/src/app/page.png differ diff --git a/apps/venus/src/app/shape.png b/apps/venus/src/app/shape.png new file mode 100644 index 000000000..ad0ea8088 Binary files /dev/null and b/apps/venus/src/app/shape.png differ diff --git a/apps/venus/src/app/task.png b/apps/venus/src/app/task.png new file mode 100644 index 000000000..279d968cb Binary files /dev/null and b/apps/venus/src/app/task.png differ diff --git a/apps/venus/src/assets/collaboration.png b/apps/venus/src/assets/collaboration.png deleted file mode 100644 index 5d56d6158..000000000 Binary files a/apps/venus/src/assets/collaboration.png and /dev/null differ diff --git a/apps/venus/src/assets/discord.svg b/apps/venus/src/assets/discord.svg deleted file mode 100644 index 9da6ee033..000000000 --- a/apps/venus/src/assets/discord.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/apps/venus/src/assets/page.png b/apps/venus/src/assets/page.png deleted file mode 100644 index 2236ce046..000000000 Binary files a/apps/venus/src/assets/page.png and /dev/null differ diff --git a/apps/venus/src/assets/shape.png b/apps/venus/src/assets/shape.png deleted file mode 100644 index 178d7ea6a..000000000 Binary files a/apps/venus/src/assets/shape.png and /dev/null differ diff --git a/apps/venus/src/assets/task.png b/apps/venus/src/assets/task.png deleted file mode 100644 index 8ef6c9505..000000000 Binary files a/apps/venus/src/assets/task.png and /dev/null differ diff --git a/apps/venus/src/favicon.ico b/apps/venus/src/favicon.ico deleted file mode 100644 index 317ebcb23..000000000 Binary files a/apps/venus/src/favicon.ico and /dev/null differ diff --git a/apps/venus/webpack.config.js b/apps/venus/webpack.config.js index 8c980aef9..9b5aba0ee 100644 --- a/apps/venus/webpack.config.js +++ b/apps/venus/webpack.config.js @@ -7,6 +7,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const CompressionPlugin = require('compression-webpack-plugin'); +const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); const Style9Plugin = require('style9/webpack'); @@ -61,6 +62,14 @@ module.exports = function (webpackConfig) { parallel: true, }), new CssMinimizerPlugin(), + new ImageMinimizerPlugin({ + minimizer: { + implementation: ImageMinimizerPlugin.imageminMinify, + options: { + plugins: [['optipng', { optimizationLevel: 5 }]], + }, + }, + }), ], splitChunks: { chunks: 'all', diff --git a/libs/components/affine-editor/src/Editor.tsx b/libs/components/affine-editor/src/Editor.tsx index 62f266b46..4f842de2f 100644 --- a/libs/components/affine-editor/src/Editor.tsx +++ b/libs/components/affine-editor/src/Editor.tsx @@ -18,6 +18,12 @@ interface AffineEditorProps { scrollBlank?: boolean; isWhiteboard?: boolean; + + scrollContainer?: HTMLElement; + scrollController?: { + lockScroll: () => void; + unLockScroll: () => void; + }; } function _useConstantWithDispose( @@ -53,13 +59,32 @@ function _useConstantWithDispose( } export const AffineEditor = forwardRef( - ({ workspace, rootBlockId, scrollBlank = true, isWhiteboard }, ref) => { + ( + { + workspace, + rootBlockId, + scrollBlank = true, + isWhiteboard, + scrollController, + scrollContainer, + }, + ref + ) => { const editor = _useConstantWithDispose( workspace, rootBlockId, isWhiteboard ); + useEffect(() => { + if (scrollContainer) { + editor.scrollManager.scrollContainer = scrollContainer; + } + if (scrollController) { + editor.scrollManager.scrollController = scrollController; + } + }, [editor, scrollContainer, scrollController]); + useImperativeHandle(ref, () => editor); return ( diff --git a/libs/components/board-draw/src/TlDraw.tsx b/libs/components/board-draw/src/TlDraw.tsx index 5ade114f4..21044ad51 100644 --- a/libs/components/board-draw/src/TlDraw.tsx +++ b/libs/components/board-draw/src/TlDraw.tsx @@ -29,6 +29,7 @@ import { ErrorBoundary } from 'react-error-boundary'; import { ErrorFallback } from './components/error-fallback'; import { ZoomBar } from './components/zoom-bar'; import { CommandPanel } from './components/command-panel'; +import { usePageClientWidth } from '@toeverything/datasource/state'; export interface TldrawProps extends TldrawAppCtorProps { /** @@ -132,6 +133,9 @@ export function Tldraw({ tools, }: TldrawProps) { const [sId, set_sid] = React.useState(id); + const { pageClientWidth } = usePageClientWidth(); + // page padding left and right total 300px + const editorShapeInitSize = pageClientWidth - 300; // Create a new app when the component mounts. const [app, setApp] = React.useState(() => { @@ -140,6 +144,7 @@ export function Tldraw({ callbacks, commands, getSession, + editorShapeInitSize, tools, }); return app; diff --git a/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx b/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx index f1f6961e5..1e73889fb 100644 --- a/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx +++ b/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx @@ -11,6 +11,7 @@ import { StrokeLineStyleConfig } from './stroke-line-style-config'; import { Group, UnGroup } from './GroupOperation'; import { DeleteShapes } from './DeleteOperation'; import { Lock, Unlock } from './LockOperation'; +import { FrameFillColorConfig } from './FrameFillColorConfig'; export const CommandPanel: FC<{ app: TldrawApp }> = ({ app }) => { const state = app.useStore(); @@ -51,6 +52,13 @@ export const CommandPanel: FC<{ app: TldrawApp }> = ({ app }) => { shapes={config.fill.selectedShapes} /> ) : null, + frameFill: config.frameFill.selectedShapes.length ? ( + + ) : null, font: config.font.selectedShapes.length ? ( { + const counted = countBy(shapes, shape => shape.style.fill); + const max = maxBy(Object.entries(counted), ([c, n]) => n); + return max[0]; +}; + +export const FrameFillColorConfig: FC = ({ + app, + shapes, +}) => { + const theme = useTheme(); + const setFillColor = (color: ColorType) => { + app.style( + { fill: color, isFilled: color !== 'none' }, + getShapeIds(shapes) + ); + }; + + const iconColor = _getIconRenderColor(shapes); + + return ( + + } + > + + + {iconColor === 'none' ? ( + + ) : ( + + )} + + + + ); +}; diff --git a/libs/components/board-draw/src/components/command-panel/utils/use-config.ts b/libs/components/board-draw/src/components/command-panel/utils/use-config.ts index 05b08b46c..6071eb8dc 100644 --- a/libs/components/board-draw/src/components/command-panel/utils/use-config.ts +++ b/libs/components/board-draw/src/components/command-panel/utils/use-config.ts @@ -7,6 +7,7 @@ interface Config { type: | 'stroke' | 'fill' + | 'frameFill' | 'font' | 'group' | 'ungroup' @@ -22,6 +23,10 @@ const _createInitConfig = (): Record => { type: 'fill', selectedShapes: [], }, + frameFill: { + type: 'frameFill', + selectedShapes: [], + }, stroke: { type: 'stroke', selectedShapes: [], @@ -64,6 +69,7 @@ const _isSupportStroke = (shape: TDShape): boolean => { TDShapeType.Pencil, TDShapeType.Laser, TDShapeType.Highlight, + TDShapeType.Draw, TDShapeType.Arrow, TDShapeType.Line, ].some(type => type === shape.type); @@ -91,6 +97,10 @@ const _isSupportFont = (shape: TDShape): boolean => { ].some(type => type === shape.type); }; +const _isSupportFrameFill = (shape: TDShape): boolean => { + return shape.type === TDShapeType.Frame; +}; + export const useConfig = (app: TldrawApp): Record => { const state = app.useStore(); const selectedShapes = TLDR.get_selected_shapes(state, app.currentPageId); @@ -105,6 +115,9 @@ export const useConfig = (app: TldrawApp): Record => { if (_isSupportFont(cur)) { acc.font.selectedShapes.push(cur); } + if (_isSupportFrameFill(cur)) { + acc.frameFill.selectedShapes.push(cur); + } return acc; }, _createInitConfig() diff --git a/libs/components/board-sessions/src/rotate-session.ts b/libs/components/board-sessions/src/rotate-session.ts index e9da6b6bc..2de48ed12 100644 --- a/libs/components/board-sessions/src/rotate-session.ts +++ b/libs/components/board-sessions/src/rotate-session.ts @@ -6,6 +6,7 @@ import { TldrawPatch, TDShape, TDStatus, + TDShapeType, } from '@toeverything/components/board-types'; import { TLDR } from '@toeverything/components/board-state'; import { BaseSession } from './base-session'; @@ -75,6 +76,10 @@ export class RotateSession extends BaseSession { app: { currentPageId, currentPoint, shiftKey }, } = this; + const filteredShapes = initialShapes.filter( + shape => shape.shape.type !== TDShapeType.Editor + ); + const shapes: Record> = {}; let directionDelta = @@ -85,7 +90,7 @@ export class RotateSession extends BaseSession { } // Update the shapes - initialShapes.forEach(({ center, shape }) => { + filteredShapes.forEach(({ center, shape }) => { const { rotation = 0 } = shape; let shapeDelta = 0; diff --git a/libs/components/board-shapes/src/frame-util/frame-util.tsx b/libs/components/board-shapes/src/frame-util/FrameUtil.tsx similarity index 67% rename from libs/components/board-shapes/src/frame-util/frame-util.tsx rename to libs/components/board-shapes/src/frame-util/FrameUtil.tsx index f8db4d09f..47fc778da 100644 --- a/libs/components/board-shapes/src/frame-util/frame-util.tsx +++ b/libs/components/board-shapes/src/frame-util/FrameUtil.tsx @@ -1,12 +1,9 @@ -import * as React from 'react'; +/* eslint-disable no-restricted-syntax */ import { Utils, SVGContainer } from '@tldraw/core'; import { FrameShape, - DashStyle, TDShapeType, TDMeta, - GHOSTED_OPACITY, - LABEL_POINT, } from '@toeverything/components/board-types'; import { TDShapeUtil } from '../TDShapeUtil'; import { @@ -14,14 +11,13 @@ import { getShapeStyle, getBoundsRectangle, transformRectangle, - getFontStyle, transformSingleRectangle, } from '../shared'; -import { DrawFrame } from './components/draw-frame'; +import { Frame } from './components/Frame'; import { styled } from '@toeverything/components/ui'; type T = FrameShape; -type E = HTMLDivElement; +type E = SVGSVGElement; export class FrameUtil extends TDShapeUtil { type = TDShapeType.Frame as const; @@ -56,10 +52,7 @@ export class FrameUtil extends TDShapeUtil { ( { shape, - isEditing, - isBinding, isSelected, - isGhost, meta, bounds, events, @@ -70,21 +63,20 @@ export class FrameUtil extends TDShapeUtil { ) => { const { id, size, style } = shape; return ( - - - - - + + + ); } ); @@ -121,27 +113,9 @@ export class FrameUtil extends TDShapeUtil { override transform = transformRectangle; override transformSingle = transformSingleRectangle; - - override hitTestPoint = (shape: T, point: number[]): boolean => { - return false; - }; - - override hitTestLineSegment = ( - shape: T, - A: number[], - B: number[] - ): boolean => { - return false; - }; } const FullWrapper = styled('div')({ width: '100%', height: '100%', - '.tl-fill-hitarea': { - fill: '#F7F9FF', - }, - '.tl-stroke-hitarea': { - fill: '#F7F9FF', - }, }); diff --git a/libs/components/board-shapes/src/frame-util/components/Frame.tsx b/libs/components/board-shapes/src/frame-util/components/Frame.tsx new file mode 100644 index 000000000..57a6fa878 --- /dev/null +++ b/libs/components/board-shapes/src/frame-util/components/Frame.tsx @@ -0,0 +1,54 @@ +import * as React from 'react'; +import { BINDING_DISTANCE } from '@toeverything/components/board-types'; +import type { ShapeStyles } from '@toeverything/components/board-types'; +import { getShapeStyle } from '../../shared'; + +interface RectangleSvgProps { + id: string; + style: ShapeStyles; + isSelected: boolean; + size: number[]; + isDarkMode: boolean; +} + +export const Frame = React.memo(function DashedRectangle({ + id, + style, + size, + isSelected, + isDarkMode, +}: RectangleSvgProps) { + const { strokeWidth, fill } = getShapeStyle(style, isDarkMode); + + const _fill = fill && fill !== 'none' ? fill : '#F7F9FF'; + + const sw = 1 + strokeWidth * 1.618; + + const w = Math.max(0, size[0] - sw / 2); + const h = Math.max(0, size[1] - sw / 2); + + return ( + <> + + + + ); +}); diff --git a/libs/components/board-shapes/src/frame-util/components/draw-frame.tsx b/libs/components/board-shapes/src/frame-util/components/draw-frame.tsx deleted file mode 100644 index 4074f76b1..000000000 --- a/libs/components/board-shapes/src/frame-util/components/draw-frame.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from 'react'; -import { BINDING_DISTANCE } from '@toeverything/components/board-types'; -import type { ShapeStyles } from '@toeverything/components/board-types'; -import { getShapeStyle } from '../../shared'; - -interface RectangleSvgProps { - id: string; - style: ShapeStyles; - isSelected: boolean; - size: number[]; - isDarkMode: boolean; -} - -export const DrawFrame = React.memo(function DashedRectangle({ - id, - style, - size, - isSelected, - isDarkMode, -}: RectangleSvgProps) { - const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode); - - const sw = 1 + strokeWidth * 1.618; - - const w = Math.max(0, size[0] - sw / 2); - const h = Math.max(0, size[1] - sw / 2); - - return ( - - ); -}); diff --git a/libs/components/board-shapes/src/frame-util/index.ts b/libs/components/board-shapes/src/frame-util/index.ts index bda0014cd..5401a5fd2 100644 --- a/libs/components/board-shapes/src/frame-util/index.ts +++ b/libs/components/board-shapes/src/frame-util/index.ts @@ -1 +1 @@ -export * from './frame-util'; +export * from './FrameUtil'; diff --git a/libs/components/board-state/src/tldraw-app.ts b/libs/components/board-state/src/tldraw-app.ts index c431a90bd..ab9492aab 100644 --- a/libs/components/board-state/src/tldraw-app.ts +++ b/libs/components/board-state/src/tldraw-app.ts @@ -73,6 +73,7 @@ import { StateManager } from './manager/state-manager'; import { getClipboard, setClipboard } from './idb-clipboard'; import type { Commands } from './types/commands'; import type { BaseTool } from './types/tool'; +import { MIN_PAGE_WIDTH } from '@toeverything/components/editor-core'; const uuid = Utils.uniqueId(); @@ -178,6 +179,7 @@ export interface TldrawAppCtorProps { getSession: (type: SessionType) => { new (app: TldrawApp, ...args: any[]): BaseSessionType; }; + editorShapeInitSize?: number; commands: Commands; tools: Record; } @@ -223,6 +225,8 @@ export class TldrawApp extends StateManager { fileSystemHandle: FileSystemHandle | null = null; + editorShapeInitSize = MIN_PAGE_WIDTH; + viewport = Utils.getBoundsFromPoints([ [0, 0], [100, 100], @@ -285,6 +289,10 @@ export class TldrawApp extends StateManager { return acc; }, {} as Record); this.currentTool = this.tools['select']; + + if (props.editorShapeInitSize) { + this.editorShapeInitSize = props.editorShapeInitSize; + } } /* -------------------- Internal -------------------- */ diff --git a/libs/components/board-tools/src/editor-tool/editor-tool.ts b/libs/components/board-tools/src/editor-tool/editor-tool.ts index 4f1d20a2d..f0da22a0c 100644 --- a/libs/components/board-tools/src/editor-tool/editor-tool.ts +++ b/libs/components/board-tools/src/editor-tool/editor-tool.ts @@ -18,6 +18,7 @@ export class EditorTool extends BaseTool { const { currentPoint, currentGrid, + editorShapeInitSize, settings: { showGrid }, appState: { currentPageId, currentStyle }, document: { id: workspace }, @@ -47,6 +48,7 @@ export class EditorTool extends BaseTool { ? Vec.snap(currentPoint, currentGrid) : currentPoint, style: { ...currentStyle }, + size: [editorShapeInitSize, 200], workspace, }); // In order to make the cursor just positioned at the beginning of the first line, it needs to be adjusted according to the padding newShape.point = Vec.sub(newShape.point, [50, 30]); diff --git a/libs/components/common/src/lib/collapsible-title/index.tsx b/libs/components/common/src/lib/collapsible-title/index.tsx index 2612eb0aa..7dd59e613 100644 --- a/libs/components/common/src/lib/collapsible-title/index.tsx +++ b/libs/components/common/src/lib/collapsible-title/index.tsx @@ -1,16 +1,21 @@ import { useState } from 'react'; -import clsx from 'clsx'; -import style9 from 'style9'; import { MuiButton as Button, MuiCollapse as Collapse, + styled, } from '@toeverything/components/ui'; -import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; -import ArrowRightIcon from '@mui/icons-material/ArrowRight'; +import { + ArrowDropDownIcon, + ArrowRightIcon, +} from '@toeverything/components/icons'; -const styles = style9.create({ - ligoButton: { - textTransform: 'none', +const StyledContainer = styled('div')({ + display: 'flex', + alignItems: 'center', + cursor: 'pointer', + '&:hover': { + background: '#f5f7f8', + borderRadius: '5px', }, }); @@ -24,29 +29,32 @@ export type CollapsibleTitleProps = { }; export function CollapsibleTitle(props: CollapsibleTitleProps) { - const { className, style, children, title, initialOpen = true } = props; + const { children, title, initialOpen = true } = props; const [open, setOpen] = useState(initialOpen); return ( <> - + setOpen(prev => !prev)}> + {open ? ( + + ) : ( + + )} +
+ {title} +
+ {children ? ( {children} diff --git a/libs/components/common/src/lib/text/plugins/link.tsx b/libs/components/common/src/lib/text/plugins/link.tsx index 18679b27d..60193e38a 100644 --- a/libs/components/common/src/lib/text/plugins/link.tsx +++ b/libs/components/common/src/lib/text/plugins/link.tsx @@ -121,11 +121,11 @@ const isLinkActive = (editor: ReactEditor) => { const LinkStyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => ( -))(() => ({ +))(({ theme }) => ({ [`& .${muiTooltipClasses.tooltip}`]: { backgroundColor: '#fff', color: '#4C6275', - boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)', + boxShadow: theme.affine.shadows.shadow1, fontSize: '14px', }, [`& .MuiTooltip-tooltipPlacementBottom`]: { @@ -412,8 +412,7 @@ export const LinkModal = memo((props: LinkModalProps) => { visible && ( <> -
{ autoComplete="off" ref={inputEl} /> -
+ ), body @@ -491,19 +490,20 @@ const LinkBehavior = (props: { ); }; +const LinkModalContainer = styled('div')(({ theme }) => ({ + position: 'fixed', + width: '354px', + height: '40px', + padding: '12px', + display: 'flex', + borderRadius: '4px', + boxShadow: theme.affine.shadows.shadow1, + backgroundColor: '#fff', + alignItems: 'center', + zIndex: '1', +})); + const styles = style9.create({ - linkModalContainer: { - position: 'fixed', - width: '354px', - height: '40px', - padding: '12px', - display: 'flex', - borderRadius: '4px', - boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)', - backgroundColor: '#fff', - alignItems: 'center', - zIndex: '1', - }, linkModalContainerIcon: { width: '16px', margin: '0 16px 0 4px', diff --git a/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx b/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx index 6f1970df1..dee9042e7 100644 --- a/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx +++ b/libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx @@ -17,7 +17,7 @@ import { supportChildren, RenderBlockChildren, useOnSelect, - WrapperWithPendantAndDragDrop, + BlockPendantProvider, } from '@toeverything/components/editor-core'; import { List } from '../../components/style-container'; import { getChildrenType, BulletIcon, NumberType } from './data'; @@ -188,7 +188,7 @@ export const BulletView: FC = ({ block, editor }) => { return ( - + @@ -206,7 +206,7 @@ export const BulletView: FC = ({ block, editor }) => { />
- + diff --git a/libs/components/editor-blocks/src/blocks/code/CodeView.tsx b/libs/components/editor-blocks/src/blocks/code/CodeView.tsx index 3a729e51f..3b64cc3b1 100644 --- a/libs/components/editor-blocks/src/blocks/code/CodeView.tsx +++ b/libs/components/editor-blocks/src/blocks/code/CodeView.tsx @@ -50,7 +50,7 @@ import { Option, Select } from '@toeverything/components/ui'; import { useOnSelect, - WrapperWithPendantAndDragDrop, + BlockPendantProvider, } from '@toeverything/components/editor-core'; import { copyToClipboard } from '@toeverything/utils'; interface CreateCodeView extends CreateView { @@ -163,7 +163,7 @@ export const CodeView: FC = ({ block, editor }) => { editor.selectionManager.activePreviousNode(block.id, 'start'); }; return ( - + { e.stopPropagation(); @@ -222,6 +222,6 @@ export const CodeView: FC = ({ block, editor }) => { handleKeyArrowUp={handleKeyArrowUp} /> - + ); }; diff --git a/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx b/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx index ac073abdb..da33c2be4 100644 --- a/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx +++ b/libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx @@ -1,7 +1,7 @@ import { FC, useState } from 'react'; import { CreateView } from '@toeverything/framework/virgo'; import { - WrapperWithPendantAndDragDrop, + BlockPendantProvider, useOnSelect, } from '@toeverything/components/editor-core'; import { Upload } from '../../components/upload/upload'; @@ -33,7 +33,7 @@ export const EmbedLinkView: FC = props => { }; return ( - + {embedLinkUrl ? ( = props => { /> )} - + ); }; diff --git a/libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx b/libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx index 1dbaef3e1..2d1231523 100644 --- a/libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx +++ b/libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx @@ -2,7 +2,7 @@ import { FC, useState } from 'react'; import { CreateView } from '@toeverything/framework/virgo'; import { useOnSelect, - WrapperWithPendantAndDragDrop, + BlockPendantProvider, } from '@toeverything/components/editor-core'; import { Upload } from '../../components/upload/upload'; import { SourceView } from '../../components/source-view'; @@ -30,7 +30,7 @@ export const FigmaView: FC = ({ block, editor }) => { setIsSelect(isSelect); }); return ( - + {figmaUrl ? ( = ({ block, editor }) => { /> )} - + ); }; diff --git a/libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx b/libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx index e6464860c..687cc2873 100644 --- a/libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx +++ b/libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx @@ -12,6 +12,8 @@ type GridHandleProps = { blockId: string; enabledAddItem: boolean; draggable: boolean; + alertHandleId: string; + onMouseEnter?: React.MouseEventHandler; }; export const GridHandle: FC = function ({ @@ -21,6 +23,8 @@ export const GridHandle: FC = function ({ onDrag, onMouseDown, draggable, + alertHandleId, + onMouseEnter, }) { const [isMouseDown, setIsMouseDown] = useState(false); const handleMouseDown: React.MouseEventHandler = e => { @@ -44,16 +48,17 @@ export const GridHandle: FC = function ({ editor.selectionManager.setActivatedNodeId(textBlock.id); } }; + + const handleMouseEnter: React.MouseEventHandler = e => { + onMouseEnter && onMouseEnter(e); + }; + return ( {enabledAddItem ? ( = function ({ ); }; -const GridHandleContainer = styled('div')(({ theme }) => ({ +const GridHandleContainer = styled('div')<{ + isMouseDown: boolean; + isAlert: boolean; +}>(({ theme, isMouseDown, isAlert }) => ({ position: 'relative', width: '10px', flexGrow: '0', @@ -78,11 +86,15 @@ const GridHandleContainer = styled('div')(({ theme }) => ({ borderRadius: '1px', backgroundClip: 'content-box', ' &:hover': { - backgroundColor: theme.affine.palette.primary, + backgroundColor: isAlert ? 'red' : theme.affine.palette.primary, [`.${GRID_ADD_HANDLE_NAME}`]: { display: 'block', }, }, + ...(isMouseDown && + (isAlert + ? { backgroundColor: 'red' } + : { backgroundColor: theme.affine.palette.primary })), })); const AddGridHandle = styled('div')(({ theme }) => ({ diff --git a/libs/components/editor-blocks/src/blocks/grid/Grid.tsx b/libs/components/editor-blocks/src/blocks/grid/Grid.tsx index 77a83ff59..bc27ec4ac 100644 --- a/libs/components/editor-blocks/src/blocks/grid/Grid.tsx +++ b/libs/components/editor-blocks/src/blocks/grid/Grid.tsx @@ -31,6 +31,7 @@ export const Grid: FC = function (props) { const gridItemCountRef = useRef(); const originalLeftWidth = useRef(GRID_ITEM_MIN_WIDTH); const originalRightWidth = useRef(GRID_ITEM_MIN_WIDTH); + const [alertHandleId, setAlertHandleId] = useState(null); const getLeftRightGridItemDomByIndex = (index: number) => { const gridItems = Array.from(gridContainerRef.current?.children).filter( @@ -117,7 +118,7 @@ export const Grid: FC = function (props) { itemDom.style.width = width; }; - const handleDragGrid = (e: MouseEvent, index: number) => { + const handleDragGrid = async (e: MouseEvent, index: number) => { setIsOnDrag(true); window.getSelection().removeAllRanges(); if (!isSetMouseUp.current) { @@ -165,39 +166,47 @@ export const Grid: FC = function (props) { setItemWidth(leftGrid, newLeft); setItemWidth(rightGrid, newRight); updateDbWidth(leftBlockId, newLeft, rightBlockId, newRight); + [leftBlockId, rightBlockId].forEach(async blockId => { + if (await checkGridItemHasOverflow(blockId)) { + setAlertHandleId(leftBlockId); + } else { + setAlertHandleId(null); + } + }); } } }; - const children = ( - <> - {block.childrenIds.map((id, i) => { - return ( - - - handleDragGrid(event, i)} - editor={editor} - onMouseDown={event => handleMouseDown(event, i)} - blockId={id} - enabledAddItem={ - block.childrenIds.length < MAX_ITEM_COUNT - } - draggable={i !== block.childrenIds.length - 1} - /> - - ); - })} - - ); + const checkGridItemHasOverflow = async (blockId: string) => { + let isOverflow = false; + const block = await editor.getBlockById(blockId); + if (block) { + const blockDom = block.dom; + if (blockDom) { + block.dom.style.overflow = 'scroll'; + if (block.dom.clientWidth !== block.dom.scrollWidth) { + isOverflow = true; + } + blockDom.style.overflow = 'visible'; + } + } + return isOverflow; + }; + + const handleHandleMouseEnter = ( + e: React.MouseEvent, + index: number + ) => { + const leftBlockId = block.childrenIds[index]; + const rightBlockId = block.childrenIds[index + 1]; + [leftBlockId, rightBlockId].forEach(async blockId => { + if (await checkGridItemHasOverflow(blockId)) { + setAlertHandleId(leftBlockId); + } else { + setAlertHandleId(null); + } + }); + }; return ( <> @@ -206,7 +215,35 @@ export const Grid: FC = function (props) { ref={gridContainerRef} isOnDrag={isOnDrag} > - {children} + {block.childrenIds.map((id, i) => { + return ( + + + handleDragGrid(event, i)} + editor={editor} + onMouseDown={event => handleMouseDown(event, i)} + blockId={id} + enabledAddItem={ + block.childrenIds.length < MAX_ITEM_COUNT + } + onMouseEnter={event => + handleHandleMouseEnter(event, i) + } + alertHandleId={alertHandleId} + draggable={i !== block.childrenIds.length - 1} + /> + + ); + })} {isOnDrag ? ReactDOM.createPortal(, window.document.body) diff --git a/libs/components/editor-blocks/src/blocks/group/GroupView.tsx b/libs/components/editor-blocks/src/blocks/group/GroupView.tsx index 694fe7820..193a97f07 100644 --- a/libs/components/editor-blocks/src/blocks/group/GroupView.tsx +++ b/libs/components/editor-blocks/src/blocks/group/GroupView.tsx @@ -60,7 +60,7 @@ const GroupContainer = styled('div')<{ isSelect?: boolean }>( ({ isSelect, theme }) => ({ background: theme.affine.palette.white, border: '2px solid rgba(236,241,251,.5)', - padding: '15px 12px', + padding: `15px 16px 0 16px`, borderRadius: '10px', ...(isSelect ? { @@ -69,7 +69,7 @@ const GroupContainer = styled('div')<{ isSelect?: boolean }>( } : { '&:hover': { - boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)', + boxShadow: theme.affine.shadows.shadow1, }, }), }) diff --git a/libs/components/editor-blocks/src/blocks/group/components/Panel.tsx b/libs/components/editor-blocks/src/blocks/group/components/Panel.tsx index e8faba84a..d6d4b79f0 100644 --- a/libs/components/editor-blocks/src/blocks/group/components/Panel.tsx +++ b/libs/components/editor-blocks/src/blocks/group/components/Panel.tsx @@ -2,11 +2,11 @@ import { styled } from '@toeverything/components/ui'; import type { ComponentPropsWithRef, MouseEvent } from 'react'; import { forwardRef } from 'react'; -const StyledPanel = styled('div')(() => ({ +const StyledPanel = styled('div')(({ theme }) => ({ position: 'absolute', top: 50, background: '#FFFFFF', - boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)', + boxShadow: theme.affine.shadows.shadow1, borderRadius: 10, padding: '12px 24px', })); diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContainer.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContainer.tsx index 3616c0d20..cd71b7266 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContainer.tsx +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContainer.tsx @@ -41,6 +41,7 @@ const getKanbanColor = ( return DEFAULT_COLOR; } if ( + group.type === PropertyType.Status || group.type === PropertyType.Select || group.type === PropertyType.MultiSelect || group.type === DEFAULT_GROUP_ID diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContext.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContext.tsx index cb313d14e..f7f05b37d 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContext.tsx +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContext.tsx @@ -25,7 +25,7 @@ const AddCard = ({ group }: { group: KanbanGroup }) => { const { addCard } = useKanban(); const handleClick = useCallback(async () => { await addCard(group); - }, [addCard]); + }, [addCard, group]); return +; }; diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx index f26374e4c..76220d7ff 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx @@ -1,6 +1,11 @@ import type { KanbanCard } from '@toeverything/components/editor-core'; -import { RenderBlock, useKanban } from '@toeverything/components/editor-core'; +import { + RenderBlock, + useKanban, + useRefPage, +} from '@toeverything/components/editor-core'; import { styled } from '@toeverything/components/ui'; +import { useFlag } from '@toeverything/datasource/feature-flags'; const CardContent = styled('div')({ margin: '20px', @@ -58,18 +63,24 @@ export const CardItem = ({ block: KanbanCard['block']; }) => { const { addSubItem } = useKanban(); + const { openSubPage } = useRefPage(); + const showKanbanRefPageFlag = useFlag('ShowKanbanRefPage', false); const onAddItem = async () => { await addSubItem(block); }; + const onClickCard = async () => { + showKanbanRefPageFlag && openSubPage(id); + }; + return ( - + - Add item + Add a sub-block ); diff --git a/libs/components/editor-blocks/src/blocks/image/ImageView.tsx b/libs/components/editor-blocks/src/blocks/image/ImageView.tsx index 36b446d79..369dceac8 100644 --- a/libs/components/editor-blocks/src/blocks/image/ImageView.tsx +++ b/libs/components/editor-blocks/src/blocks/image/ImageView.tsx @@ -1,7 +1,7 @@ import { useCurrentView, useOnSelect, - WrapperWithPendantAndDragDrop, + BlockPendantProvider, } from '@toeverything/components/editor-core'; import { styled } from '@toeverything/components/ui'; import { services } from '@toeverything/datasource/db-service'; @@ -143,13 +143,13 @@ export const ImageView: FC = ({ block, editor }) => { type: 'link', }); }; - const handle_click = (e: React.MouseEvent) => { + const handle_click = async (e: React.MouseEvent) => { //TODO clear active selection // document.getElementsByTagName('body')[0].click(); e.stopPropagation(); e.nativeEvent.stopPropagation(); - editor.selectionManager.setSelectedNodesIds([block.id]); - editor.selectionManager.activeNodeByNodeId(block.id); + await editor.selectionManager.setSelectedNodesIds([block.id]); + await editor.selectionManager.activeNodeByNodeId(block.id, 'end'); }; const down_file = () => { if (down_ref) { @@ -158,7 +158,7 @@ export const ImageView: FC = ({ block, editor }) => { }; return ( - +
{imgUrl ? ( @@ -229,6 +229,6 @@ export const ImageView: FC = ({ block, editor }) => {
*/} - + ); }; diff --git a/libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx b/libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx index 514ce335f..2f8f29b70 100644 --- a/libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx +++ b/libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx @@ -19,9 +19,8 @@ import { supportChildren, RenderBlockChildren, useOnSelect, - WrapperWithPendantAndDragDrop, + BlockPendantProvider, } from '@toeverything/components/editor-core'; -import { styled } from '@toeverything/components/ui'; import { List } from '../../components/style-container'; import { BlockContainer } from '../../components/BlockContainer'; @@ -185,7 +184,7 @@ export const NumberedView: FC = ({ block, editor }) => { return ( - +
{getNumber(properties.numberType, number)}. @@ -203,7 +202,7 @@ export const NumberedView: FC = ({ block, editor }) => { />
- + diff --git a/libs/components/editor-blocks/src/blocks/text/TextView.tsx b/libs/components/editor-blocks/src/blocks/text/TextView.tsx index ced1a8745..cb408cb18 100644 --- a/libs/components/editor-blocks/src/blocks/text/TextView.tsx +++ b/libs/components/editor-blocks/src/blocks/text/TextView.tsx @@ -8,7 +8,7 @@ import { supportChildren, unwrapGroup, useOnSelect, - WrapperWithPendantAndDragDrop, + BlockPendantProvider, } from '@toeverything/components/editor-core'; import { styled } from '@toeverything/components/ui'; import { Protocol } from '@toeverything/datasource/db-service'; @@ -99,7 +99,7 @@ export const TextView: FC = ({ if (!parentBlock) { return false; } - + const preParent = await parentBlock.previousSibling(); if (Protocol.Block.Type.group === parentBlock.type) { const children = await block.children(); const preNode = await block.physicallyPerviousSibling(); @@ -129,34 +129,19 @@ export const TextView: FC = ({ 'start' ); if (block.blockProvider.isEmpty()) { - block.remove(); - } - } - return true; - } else { - // TODO remove timing problem - const prevGroupBlock = await parentBlock.previousSibling(); - - if (!prevGroupBlock) { - const childrenBlock = await parentBlock.children(); - if (childrenBlock.length) { - if (children.length) { - await parentBlock.append(...children); - } await block.remove(); - return true; + const parentChild = await parentBlock.children(); + if ( + parentBlock.type === + Protocol.Block.Type.group && + !parentChild.length + ) { + await editor.selectionManager.setSelectedNodesIds( + [preParent?.id ?? editor.getRootBlockId()] + ); + } } - - parentBlock.remove(); - return true; } - if (prevGroupBlock.type !== Protocol.Block.Type.group) { - unwrapGroup(parentBlock); - return true; - } - - mergeGroup(prevGroupBlock, parentBlock); - return true; } } @@ -231,7 +216,7 @@ export const TextView: FC = ({ selected={isSelect} className={containerClassName} > - + = ({ handleConvert={handleConvert} handleTab={onTab} /> - + diff --git a/libs/components/editor-blocks/src/components/source-view/SourceView.tsx b/libs/components/editor-blocks/src/components/source-view/SourceView.tsx index 3835199d3..4dbb48885 100644 --- a/libs/components/editor-blocks/src/components/source-view/SourceView.tsx +++ b/libs/components/editor-blocks/src/components/source-view/SourceView.tsx @@ -1,6 +1,18 @@ -import type { AsyncBlock } from '@toeverything/components/editor-core'; +import { + AsyncBlock, + useCurrentView, + useLazyIframe, +} from '@toeverything/components/editor-core'; import { styled } from '@toeverything/components/ui'; -import type { FC } from 'react'; +import { + FC, + ReactElement, + ReactNode, + useEffect, + useRef, + useState, +} from 'react'; +import { SCENE_CONFIG } from '../../blocks/group/config'; import { BlockPreview } from './BlockView'; import { formatUrl } from './format-url'; @@ -15,7 +27,18 @@ export interface Props { } const getHost = (url: string) => new URL(url).host; - +const MouseMaskContainer = styled('div')({ + position: 'absolute', + zIndex: 1, + top: '0px', + left: '0px', + right: '0px', + bottom: '0px', + backgroundColor: 'transparent', + '&:hover': { + pointerEvents: 'none', + }, +}); const LinkContainer = styled('div')<{ isSelected: boolean; }>(({ theme, isSelected }) => { @@ -38,12 +61,28 @@ const LinkContainer = styled('div')<{ }, }; }); - +const _getLinkStyle = (scene: string) => { + switch (scene) { + case SCENE_CONFIG.PAGE: + return { + width: '420px', + height: '198px', + }; + default: + return { + width: '252px', + height: '126px', + }; + } +}; const SourceViewContainer = styled('div')<{ isSelected: boolean; -}>(({ theme, isSelected }) => { + scene: string; +}>(({ theme, isSelected, scene }) => { return { + ..._getLinkStyle(scene), overflow: 'hidden', + position: 'relative', borderRadius: theme.affine.shape.borderRadius, background: isSelected ? 'rgba(152, 172, 189, 0.1)' : 'transparent', padding: '8px', @@ -52,32 +91,96 @@ const SourceViewContainer = styled('div')<{ height: '100%', border: '1px solid #EAEEF2', borderRadius: theme.affine.shape.borderRadius, + userSelect: 'none', }, }; }); +const LazyIframe = ({ + src, + delay = 3000, + fallback, +}: { + src: string; + delay?: number; + fallback?: ReactNode; +}) => { + const [show, setShow] = useState(false); + const timer = useRef(); + + useEffect(() => { + // Hide iframe when the src changed + setShow(false); + }, [src]); + + const onLoad = () => { + clearTimeout(timer.current); + timer.current = window.setTimeout(() => { + // Prevent iframe scrolling parent container + // Remove the delay after the issue is resolved + // See W3C https://github.com/w3c/csswg-drafts/issues/7134 + // See https://forum.figma.com/t/prevent-figmas-embed-code-from-automatically-scrolling-to-it-on-page-load/26029/6 + setShow(true); + }, delay); + }; + + return ( + <> +
{ + e.preventDefault(); + e.stopPropagation(); + }} + style={{ display: show ? 'block' : 'none', height: '100%' }} + > +

DarkSky
💻 📖
Chi Zhang
💻 📖
alt1o
💻 📖
Diamond
💻 📖
Chi Zhang
💻 📖
wang xinglong
💻 📖
DiamondThree
💻 📖
Whitewater
💻 📖
zuoxiaodong0815
💻 📖
SaikaSakura
💻 📖
xiaodong zuo
💻 📖
MingLIang Wang
💻 📖

Qi
💻 📖
tuluffy
💻 📖
mitsuhatu
💻 📖
Austaras
💻 📖
Jin Yao
💻 📖