diff --git a/frontend/appflowy_web_app/index.html b/frontend/appflowy_web_app/index.html index 49615f8cb0..4c8514b049 100644 --- a/frontend/appflowy_web_app/index.html +++ b/frontend/appflowy_web_app/index.html @@ -31,7 +31,6 @@
- - - - + + diff --git a/frontend/appflowy_web_app/package.json b/frontend/appflowy_web_app/package.json index 9729bfd716..04c3f259ae 100644 --- a/frontend/appflowy_web_app/package.json +++ b/frontend/appflowy_web_app/package.json @@ -49,6 +49,7 @@ "emoji-regex": "^10.2.1", "events": "^3.3.0", "google-protobuf": "^3.15.12", + "highlight.js": "^11.10.0", "i18next": "^22.4.10", "i18next-browser-languagedetector": "^7.0.1", "i18next-resources-to-backend": "^1.1.4", diff --git a/frontend/appflowy_web_app/pnpm-lock.yaml b/frontend/appflowy_web_app/pnpm-lock.yaml index 4e52a1cb94..db5d7e333a 100644 --- a/frontend/appflowy_web_app/pnpm-lock.yaml +++ b/frontend/appflowy_web_app/pnpm-lock.yaml @@ -80,6 +80,9 @@ dependencies: google-protobuf: specifier: ^3.15.12 version: 3.21.2 + highlight.js: + specifier: ^11.10.0 + version: 11.10.0 i18next: specifier: ^22.4.10 version: 22.5.1 @@ -7068,6 +7071,11 @@ packages: resolution: {integrity: sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==} dev: true + /highlight.js@11.10.0: + resolution: {integrity: sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==} + engines: {node: '>=12.0.0'} + dev: false + /hoist-non-react-statics@3.3.2: resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} dependencies: diff --git a/frontend/appflowy_web_app/src/assets/clock_alarm.svg b/frontend/appflowy_web_app/src/assets/clock_alarm.svg new file mode 100644 index 0000000000..8e58bc8c42 --- /dev/null +++ b/frontend/appflowy_web_app/src/assets/clock_alarm.svg @@ -0,0 +1,7 @@ + + + + + + diff --git a/frontend/appflowy_web_app/src/components/_shared/popover/Popover.tsx b/frontend/appflowy_web_app/src/components/_shared/popover/Popover.tsx index 60c2856d31..90819ed57b 100644 --- a/frontend/appflowy_web_app/src/components/_shared/popover/Popover.tsx +++ b/frontend/appflowy_web_app/src/components/_shared/popover/Popover.tsx @@ -10,7 +10,7 @@ const defaultProps: Partial = { }, }; -function Popover({ children, ...props }: PopoverComponentProps) { +export function Popover({ children, ...props }: PopoverComponentProps) { return ( {children} diff --git a/frontend/appflowy_web_app/src/components/_shared/popover/index.ts b/frontend/appflowy_web_app/src/components/_shared/popover/index.ts index c93b1f5d31..f1c61c79c4 100644 --- a/frontend/appflowy_web_app/src/components/_shared/popover/index.ts +++ b/frontend/appflowy_web_app/src/components/_shared/popover/index.ts @@ -1,4 +1,2 @@ -import { lazy } from 'react'; - -export const RichTooltip = lazy(() => import('./RichTooltip')); -export const Popover = lazy(() => import('./Popover')); +export * from './Popover'; +export * from './RichTooltip'; diff --git a/frontend/appflowy_web_app/src/components/app/AppConfig.tsx b/frontend/appflowy_web_app/src/components/app/AppConfig.tsx index ac1ec4ce7d..44d00cdb67 100644 --- a/frontend/appflowy_web_app/src/components/app/AppConfig.tsx +++ b/frontend/appflowy_web_app/src/components/app/AppConfig.tsx @@ -2,8 +2,9 @@ import { clearData } from '@/application/db'; import { EventType, on } from '@/application/session'; import { isTokenValid } from '@/application/session/token'; import { useAppLanguage } from '@/components/app/useAppLanguage'; +import { LoginModal } from '@/components/login'; import { useSnackbar } from 'notistack'; -import React, { createContext, useEffect, useState } from 'react'; +import React, { createContext, useCallback, useEffect, useState } from 'react'; import { AFService, AFServiceConfig } from '@/application/services/services.type'; import { getService } from '@/application/services'; import { InfoSnackbarProps } from '@/components/_shared/notify'; @@ -26,6 +27,7 @@ export const AFConfigContext = createContext< service: AFService | undefined; isAuthenticated: boolean; currentUser?: User; + openLoginModal: (redirectTo?: string) => void; } | undefined >(undefined); @@ -35,6 +37,13 @@ function AppConfig({ children }: { children: React.ReactNode }) { const [service, setService] = useState(); const [isAuthenticated, setIsAuthenticated] = React.useState(isTokenValid()); const [currentUser, setCurrentUser] = React.useState(); + const [loginOpen, setLoginOpen] = React.useState(false); + const [loginCompletedRedirectTo, setLoginCompletedRedirectTo] = React.useState(''); + + const openLoginModal = useCallback((redirectTo?: string) => { + setLoginOpen(true); + setLoginCompletedRedirectTo(redirectTo || ''); + }, []); useEffect(() => { return on(EventType.SESSION_VALID, () => { @@ -135,9 +144,19 @@ function AppConfig({ children }: { children: React.ReactNode }) { service, isAuthenticated, currentUser, + openLoginModal, }} > {children} + {loginOpen && ( + { + setLoginOpen(false); + }} + /> + )} ); } diff --git a/frontend/appflowy_web_app/src/components/database/calendar/Calendar.tsx b/frontend/appflowy_web_app/src/components/database/calendar/Calendar.tsx index d8011f6e63..a96ceffc95 100644 --- a/frontend/appflowy_web_app/src/components/database/calendar/Calendar.tsx +++ b/frontend/appflowy_web_app/src/components/database/calendar/Calendar.tsx @@ -14,9 +14,6 @@ export function Calendar() { toolbar: (props) => , eventWrapper: Event, }} - style={{ - marginBottom: '24px', - }} events={events} views={['month']} localizer={localizer} diff --git a/frontend/appflowy_web_app/src/components/database/calendar/calendar.scss b/frontend/appflowy_web_app/src/components/database/calendar/calendar.scss index c8b76004af..ab922c91e5 100644 --- a/frontend/appflowy_web_app/src/components/database/calendar/calendar.scss +++ b/frontend/appflowy_web_app/src/components/database/calendar/calendar.scss @@ -30,6 +30,7 @@ $today-highlight-bg: transparent; .rbc-month-view { border: none; + .rbc-month-row { border: 1px solid var(--line-divider); border-top: none; diff --git a/frontend/appflowy_web_app/src/components/database/components/cell/date/DateTimeCell.tsx b/frontend/appflowy_web_app/src/components/database/components/cell/date/DateTimeCell.tsx index 8585b47a20..ccfd773c0a 100644 --- a/frontend/appflowy_web_app/src/components/database/components/cell/date/DateTimeCell.tsx +++ b/frontend/appflowy_web_app/src/components/database/components/cell/date/DateTimeCell.tsx @@ -2,7 +2,7 @@ import { FieldType } from '@/application/database-yjs'; import { useDateTypeCellDispatcher } from '@/components/database/components/cell/Cell.hooks'; import { CellProps, DateTimeCell as DateTimeCellType } from '@/application/database-yjs/cell.type'; import React, { useMemo } from 'react'; -import { ReactComponent as ReminderSvg } from '$icons/16x/clock_alarm.svg'; +import { ReactComponent as ReminderSvg } from '@/assets/clock_alarm.svg'; export function DateTimeCell({ cell, fieldId, style, placeholder }: CellProps) { const { getDateTimeStr } = useDateTypeCellDispatcher(fieldId); diff --git a/frontend/appflowy_web_app/src/components/database/components/field/CardField.tsx b/frontend/appflowy_web_app/src/components/database/components/field/CardField.tsx index b5785d0f5e..85aa3edb9a 100644 --- a/frontend/appflowy_web_app/src/components/database/components/field/CardField.tsx +++ b/frontend/appflowy_web_app/src/components/database/components/field/CardField.tsx @@ -4,7 +4,7 @@ import Cell from '@/components/database/components/cell/Cell'; import React, { CSSProperties, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -function CardField({ rowId, fieldId }: { rowId: string; fieldId: string; index: number }) { +export function CardField({ rowId, fieldId }: { rowId: string; fieldId: string; index: number }) { const { t } = useTranslation(); const { field } = useFieldSelector(fieldId); const cell = useCellSelector({ diff --git a/frontend/appflowy_web_app/src/components/editor/components/blocks/code/Code.hooks.ts b/frontend/appflowy_web_app/src/components/editor/components/blocks/code/Code.hooks.ts index 8f3b3f99de..232e60cd63 100644 --- a/frontend/appflowy_web_app/src/components/editor/components/blocks/code/Code.hooks.ts +++ b/frontend/appflowy_web_app/src/components/editor/components/blocks/code/Code.hooks.ts @@ -3,39 +3,49 @@ import { useEditorContext } from '@/components/editor/EditorContext'; import { useCallback, useEffect } from 'react'; import { ReactEditor, useSlateStatic } from 'slate-react'; import { Element as SlateElement, Transforms } from 'slate'; - -const Prism = window.Prism; -const hljs = window.hljs; +import Prism from 'prismjs'; export function useCodeBlock(node: CodeNode) { const language = node.data.language; const editor = useSlateStatic() as ReactEditor; - const addCodeGrammars = useEditorContext().addCodeGrammars; useEffect(() => { - const path = ReactEditor.findPath(editor, node); - let detectedLanguage = language; + void (async () => { + const path = ReactEditor.findPath(editor, node); + let detectedLanguage = language; - if (!language) { - const codeSnippet = editor.string(path); + if (!language) { + const codeSnippet = editor.string(path); + const script = document.createElement('script'); - detectedLanguage = hljs.highlightAuto(codeSnippet).language; - } + script.src = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js'; + document.body.appendChild(script); + const promise = new Promise((resolve) => { + script.onload = () => { + resolve(true); + }; + }); - const prismLanguage = Prism.languages[detectedLanguage.toLowerCase()]; + await promise; - if (!prismLanguage) { - const script = document.createElement('script'); + detectedLanguage = window.hljs.highlightAuto(codeSnippet).language || 'plaintext'; + } - script.src = `https://cdnjs.cloudflare.com/ajax/libs/prism/1.26.0/components/prism-${detectedLanguage.toLowerCase()}.min.js`; - document.head.appendChild(script); - script.onload = () => { + const prismLanguage = Prism.languages[detectedLanguage.toLowerCase()]; + + if (!prismLanguage) { + const script = document.createElement('script'); + + script.src = `https://cdnjs.cloudflare.com/ajax/libs/prism/1.26.0/components/prism-${detectedLanguage.toLowerCase()}.min.js`; + document.body.appendChild(script); + script.onload = () => { + addCodeGrammars?.(node.blockId, detectedLanguage); + }; + } else { addCodeGrammars?.(node.blockId, detectedLanguage); - }; - } else { - addCodeGrammars?.(node.blockId, detectedLanguage); - } + } + })(); }, [addCodeGrammars, editor, language, node]); const handleChangeLanguage = useCallback( diff --git a/frontend/appflowy_web_app/src/components/editor/components/blocks/code/utils.ts b/frontend/appflowy_web_app/src/components/editor/components/blocks/code/utils.ts index 12d5070c7b..4750b0c229 100644 --- a/frontend/appflowy_web_app/src/components/editor/components/blocks/code/utils.ts +++ b/frontend/appflowy_web_app/src/components/editor/components/blocks/code/utils.ts @@ -1,8 +1,5 @@ import { BaseRange, NodeEntry, Text, Path } from 'slate'; - -const Prism = window.Prism; - -Prism.plugins.autoloader.languages_path = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.26.0/components/'; +import Prism, { Grammar } from 'prismjs'; const push_string = ( token: string | Prism.Token, @@ -86,7 +83,7 @@ export const decorateCode = ([node, path]: NodeEntry, language: string) => { return ranges; } - const highlightCode = (code: string, language: string) => { + const highlightCode = (code: string, language: Grammar) => { try { const tokens = Prism.tokenize(code, language); diff --git a/frontend/appflowy_web_app/src/components/editor/components/blocks/math-equation/index.ts b/frontend/appflowy_web_app/src/components/editor/components/blocks/math-equation/index.ts index d10b172020..ae6eb70209 100644 --- a/frontend/appflowy_web_app/src/components/editor/components/blocks/math-equation/index.ts +++ b/frontend/appflowy_web_app/src/components/editor/components/blocks/math-equation/index.ts @@ -1,3 +1 @@ -import { lazy } from 'react'; - -export const MathEquation = lazy(() => import('./MathEquation')); +export * from './MathEquation'; diff --git a/frontend/appflowy_web_app/src/components/editor/components/leaf/formula/index.ts b/frontend/appflowy_web_app/src/components/editor/components/leaf/formula/index.ts index 1c01fca07e..dc4ad2cd03 100644 --- a/frontend/appflowy_web_app/src/components/editor/components/leaf/formula/index.ts +++ b/frontend/appflowy_web_app/src/components/editor/components/leaf/formula/index.ts @@ -1,5 +1 @@ -import { lazy } from 'react'; - -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-expect-error -export const Formula = lazy(() => import('./Formula?chunkName=formula')); +export * from './Formula'; diff --git a/frontend/appflowy_web_app/src/components/editor/components/leaf/mention/MentionDate.tsx b/frontend/appflowy_web_app/src/components/editor/components/leaf/mention/MentionDate.tsx index fd167985af..89ec879784 100644 --- a/frontend/appflowy_web_app/src/components/editor/components/leaf/mention/MentionDate.tsx +++ b/frontend/appflowy_web_app/src/components/editor/components/leaf/mention/MentionDate.tsx @@ -1,7 +1,7 @@ import { renderDate } from '@/utils/time'; import React, { useMemo } from 'react'; import { ReactComponent as DateSvg } from '@/assets/date.svg'; -import { ReactComponent as ReminderSvg } from '$icons/16x/clock_alarm.svg'; +import { ReactComponent as ReminderSvg } from '@/assets/clock_alarm.svg'; function MentionDate({ date, reminder }: { date: string; reminder?: { id: string; option: string } }) { const dateFormat = useMemo(() => { diff --git a/frontend/appflowy_web_app/src/components/global-comment/AddComment.tsx b/frontend/appflowy_web_app/src/components/global-comment/AddComment.tsx index e70ad41a0b..d7ac6f9ee2 100644 --- a/frontend/appflowy_web_app/src/components/global-comment/AddComment.tsx +++ b/frontend/appflowy_web_app/src/components/global-comment/AddComment.tsx @@ -3,7 +3,6 @@ import { notify } from '@/components/_shared/notify'; import { AFConfigContext } from '@/components/app/AppConfig'; import { useGlobalCommentContext } from '@/components/global-comment/GlobalComment.hooks'; import ReplyComment from '@/components/global-comment/ReplyComment'; -import { LoginModal } from '@/components/login'; import { Button, TextareaAutosize } from '@mui/material'; import CircularProgress from '@mui/material/CircularProgress'; import React, { memo, useCallback, useContext, useEffect, useRef } from 'react'; @@ -16,24 +15,19 @@ function AddComment() { const { t } = useTranslation(); const isAuthenticated = useContext(AFConfigContext)?.isAuthenticated; + const openLoginModal = useContext(AFConfigContext)?.openLoginModal; const createCommentOnPublishView = useContext(AFConfigContext)?.service?.createCommentOnPublishView; const viewId = useContext(PublishContext)?.viewMeta?.view_id; const [content, setContent] = React.useState(''); const [loading, setLoading] = React.useState(false); - const [loginOpen, setLoginOpen] = React.useState(false); const [focus, setFocus] = React.useState(false); const url = window.location.href + '#addComment'; const ref = useRef(null); const inputRef = useRef(null); - const handleOnFocus = (e: React.FocusEvent) => { + const handleOnFocus = () => { setFocus(true); - if (!isAuthenticated) { - e.preventDefault(); - - setLoginOpen(true); - } }; useEffect(() => { @@ -118,6 +112,12 @@ function AddComment() { ref={inputRef} autoComplete={'off'} spellCheck={false} + onMouseDown={() => { + if (!isAuthenticated && openLoginModal) { + openLoginModal(url); + } + }} + readOnly={!isAuthenticated} onFocus={handleOnFocus} onBlur={() => setFocus(false)} value={content} @@ -128,8 +128,9 @@ function AddComment() { placeholder={t('globalComment.addComment')} onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey) { - if (!content) return; e.preventDefault(); + if (!content) return; + void handleSubmit(); } @@ -167,15 +168,6 @@ function AddComment() { )} - {loginOpen && ( - { - setLoginOpen(false); - }} - /> - )} ); } diff --git a/frontend/appflowy_web_app/src/components/global-comment/GlobaclCommentProvider.tsx b/frontend/appflowy_web_app/src/components/global-comment/GlobalCommentProvider.tsx similarity index 100% rename from frontend/appflowy_web_app/src/components/global-comment/GlobaclCommentProvider.tsx rename to frontend/appflowy_web_app/src/components/global-comment/GlobalCommentProvider.tsx diff --git a/frontend/appflowy_web_app/src/components/global-comment/comment/CommentWrap.tsx b/frontend/appflowy_web_app/src/components/global-comment/comment/CommentWrap.tsx index 0aba5d3c6e..8c22f5eebe 100644 --- a/frontend/appflowy_web_app/src/components/global-comment/comment/CommentWrap.tsx +++ b/frontend/appflowy_web_app/src/components/global-comment/comment/CommentWrap.tsx @@ -1,8 +1,9 @@ +import { AFConfigContext } from '@/components/app/AppConfig'; import CommentActions from '@/components/global-comment/actions/CommentActions'; import Comment from './Comment'; import { useGlobalCommentContext } from '@/components/global-comment/GlobalComment.hooks'; import ReplyComment from '@/components/global-comment/ReplyComment'; -import React, { useCallback, useEffect, useMemo } from 'react'; +import React, { useCallback, useContext, useEffect, useMemo } from 'react'; import smoothScrollIntoViewIfNeeded from 'smooth-scroll-into-view-if-needed'; export interface CommentWrapProps { @@ -16,6 +17,7 @@ export function CommentWrap({ commentId, isHovered, onHovered }: CommentWrapProp const comment = useMemo(() => getComment(commentId), [commentId, getComment]); const ref = React.useRef(null); const [highLight, setHighLight] = React.useState(false); + const isAuthenticated = useContext(AFConfigContext)?.isAuthenticated; useEffect(() => { const hashHasComment = window.location.hash.includes(`#comment-${commentId}`); @@ -29,15 +31,17 @@ export function CommentWrap({ commentId, isHovered, onHovered }: CommentWrapProp void (async () => { window.location.hash = ''; - await smoothScrollIntoViewIfNeeded(element, { - behavior: 'smooth', - block: 'center', - }); - setHighLight(true); - timeout = setTimeout(() => { - setHighLight(false); - }, 10000); + void smoothScrollIntoViewIfNeeded(element, { + behavior: 'smooth', + block: 'center', + }); + setHighLight(true); + + timeout = setTimeout(() => { + setHighLight(false); + }, 10000); + }, 500); })(); return () => { @@ -70,7 +74,7 @@ export function CommentWrap({ commentId, isHovered, onHovered }: CommentWrapProp }} > - {isHovered && !comment.isDeleted && ( + {isHovered && isAuthenticated && !comment.isDeleted && (
diff --git a/frontend/appflowy_web_app/src/components/global-comment/index.ts b/frontend/appflowy_web_app/src/components/global-comment/index.ts index 98aec84c80..0f422a88f5 100644 --- a/frontend/appflowy_web_app/src/components/global-comment/index.ts +++ b/frontend/appflowy_web_app/src/components/global-comment/index.ts @@ -1,3 +1 @@ -import { lazy } from 'react'; - -export const GlobalCommentProvider = lazy(() => import('./GlobaclCommentProvider')); +export * from './GlobalCommentProvider'; diff --git a/frontend/appflowy_web_app/src/components/global-comment/reactions/Reaction.tsx b/frontend/appflowy_web_app/src/components/global-comment/reactions/Reaction.tsx index bb415c694e..b8954f46b4 100644 --- a/frontend/appflowy_web_app/src/components/global-comment/reactions/Reaction.tsx +++ b/frontend/appflowy_web_app/src/components/global-comment/reactions/Reaction.tsx @@ -6,7 +6,9 @@ import { useTranslation } from 'react-i18next'; function Reaction({ reaction, onClick }: { reaction: ReactionType; onClick: (reaction: ReactionType) => void }) { const { t } = useTranslation(); - + const isAuthenticated = useContext(AFConfigContext)?.isAuthenticated; + const openLoginModal = useContext(AFConfigContext)?.openLoginModal; + const url = window.location.href + '#comment-' + reaction.commentId; const reactCount = useMemo(() => { return reaction.reactUsers.length; }, [reaction.reactUsers]); @@ -64,7 +66,14 @@ function Reaction({ reaction, onClick }: { reaction: ReactionType; onClick: (rea >
onClick(reaction)} + onClick={() => { + if (!isAuthenticated && openLoginModal) { + openLoginModal(url); + return; + } + + onClick(reaction); + }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} className={ diff --git a/frontend/appflowy_web_app/src/components/login/LoginModal.tsx b/frontend/appflowy_web_app/src/components/login/LoginModal.tsx index bbd3403761..af86862b3b 100644 --- a/frontend/appflowy_web_app/src/components/login/LoginModal.tsx +++ b/frontend/appflowy_web_app/src/components/login/LoginModal.tsx @@ -3,7 +3,7 @@ import { Dialog, IconButton } from '@mui/material'; import { Login } from './Login'; import { ReactComponent as CloseIcon } from '@/assets/close.svg'; -function LoginModal({ redirectTo, open, onClose }: { redirectTo: string; open: boolean; onClose: () => void }) { +export function LoginModal({ redirectTo, open, onClose }: { redirectTo: string; open: boolean; onClose: () => void }) { return (
diff --git a/frontend/appflowy_web_app/src/components/login/index.ts b/frontend/appflowy_web_app/src/components/login/index.ts index b9219955f0..f86440c5a4 100644 --- a/frontend/appflowy_web_app/src/components/login/index.ts +++ b/frontend/appflowy_web_app/src/components/login/index.ts @@ -1,5 +1,3 @@ -import { lazy } from 'react'; +export * from './LoginModal'; -export const Login = lazy(() => import('./Login')); - -export const LoginModal = lazy(() => import('./LoginModal')); +export * from './Login'; diff --git a/frontend/appflowy_web_app/src/components/publish/DatabaseView.tsx b/frontend/appflowy_web_app/src/components/publish/DatabaseView.tsx index 3ffb980c34..3c07a7fb2c 100644 --- a/frontend/appflowy_web_app/src/components/publish/DatabaseView.tsx +++ b/frontend/appflowy_web_app/src/components/publish/DatabaseView.tsx @@ -45,7 +45,7 @@ function DatabaseView({ viewMeta, ...props }: DatabaseProps) { return (
diff --git a/frontend/appflowy_web_app/src/components/publish/PublishView.tsx b/frontend/appflowy_web_app/src/components/publish/PublishView.tsx index 7986e1dcf7..f5a79a2197 100644 --- a/frontend/appflowy_web_app/src/components/publish/PublishView.tsx +++ b/frontend/appflowy_web_app/src/components/publish/PublishView.tsx @@ -86,13 +86,13 @@ export function PublishView({ namespace, publishName }: PublishViewProps) { /> - }> - - + {doc && ( + }> + + + )} - - {open && setOpen(false)} />} - + {open && setOpen(false)} />}
); diff --git a/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx b/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx index 5064364772..70f60d6d31 100644 --- a/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx +++ b/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx @@ -66,28 +66,26 @@ export function PublishViewHeader({ onOpenDrawer, openDrawer }: { onOpenDrawer: className={'appflowy-top-bar sticky top-0 z-10 flex px-5'} >
- - {!openDrawer && openPopover && ( - + { + setOpenPopover(false); + onOpenDrawer(); + }} onMouseEnter={handleOpenPopover} onMouseLeave={debounceClosePopover} - open={openPopover} - onClose={debounceClosePopover} > - { - setOpenPopover(false); - onOpenDrawer(); - }} - onMouseEnter={handleOpenPopover} - onMouseLeave={debounceClosePopover} - > - - - - )} - + + + + )}
diff --git a/frontend/appflowy_web_app/src/components/publish/header/duplicate/Duplicate.tsx b/frontend/appflowy_web_app/src/components/publish/header/duplicate/Duplicate.tsx index 5471486c9a..76a7e58ce1 100644 --- a/frontend/appflowy_web_app/src/components/publish/header/duplicate/Duplicate.tsx +++ b/frontend/appflowy_web_app/src/components/publish/header/duplicate/Duplicate.tsx @@ -6,7 +6,7 @@ import { useSearchParams } from 'react-router-dom'; import { useDuplicate } from '@/components/publish/header/duplicate/useDuplicate'; import DuplicateModal from '@/components/publish/header/duplicate/DuplicateModal'; -function Duplicate() { +export function Duplicate() { const { t } = useTranslation(); const { loginOpen, duplicateOpen, handleDuplicateClose, handleLoginClose, url } = useDuplicate(); const [search, setSearch] = useSearchParams(); diff --git a/frontend/appflowy_web_app/src/components/publish/header/duplicate/index.ts b/frontend/appflowy_web_app/src/components/publish/header/duplicate/index.ts index 3caddba43b..28659ab13f 100644 --- a/frontend/appflowy_web_app/src/components/publish/header/duplicate/index.ts +++ b/frontend/appflowy_web_app/src/components/publish/header/duplicate/index.ts @@ -1,3 +1 @@ -import { lazy } from 'react'; - -export const Duplicate = lazy(() => import('./Duplicate')); +export * from './Duplicate'; diff --git a/frontend/appflowy_web_app/src/components/publish/outline/OutlineDrawer.tsx b/frontend/appflowy_web_app/src/components/publish/outline/OutlineDrawer.tsx index 2376db484d..c25a447f14 100644 --- a/frontend/appflowy_web_app/src/components/publish/outline/OutlineDrawer.tsx +++ b/frontend/appflowy_web_app/src/components/publish/outline/OutlineDrawer.tsx @@ -7,7 +7,7 @@ import { createHotKeyLabel, HOT_KEY_NAME } from '@/utils/hotkeys'; import { Drawer, IconButton, Tooltip } from '@mui/material'; import { useTranslation } from 'react-i18next'; -function OutlineDrawer({ open, width, onClose }: { open: boolean; width: number; onClose: () => void }) { +export function OutlineDrawer({ open, width, onClose }: { open: boolean; width: number; onClose: () => void }) { const { t } = useTranslation(); const viewMeta = usePublishContext()?.viewMeta; diff --git a/frontend/appflowy_web_app/src/components/publish/outline/index.ts b/frontend/appflowy_web_app/src/components/publish/outline/index.ts index d64a5d5738..dea4da9c45 100644 --- a/frontend/appflowy_web_app/src/components/publish/outline/index.ts +++ b/frontend/appflowy_web_app/src/components/publish/outline/index.ts @@ -1,4 +1,2 @@ -import { lazy } from 'react'; - -export const OutlineDrawer = lazy(() => import('./OutlineDrawer')); -export const OutlinePopover = lazy(() => import('./OutlinePopover')); +export * from './OutlinePopover'; +export * from './OutlineDrawer'; diff --git a/frontend/appflowy_web_app/src/components/publish/useViewMeta.ts b/frontend/appflowy_web_app/src/components/publish/useViewMeta.ts index 18122ef445..f17afc1d9f 100644 --- a/frontend/appflowy_web_app/src/components/publish/useViewMeta.ts +++ b/frontend/appflowy_web_app/src/components/publish/useViewMeta.ts @@ -1,6 +1,7 @@ import { usePublishContext } from '@/application/publish'; import { EditorLayoutStyle } from '@/components/editor/EditorContext'; import { ViewMetaCover } from '@/components/view-meta'; +import { getFontFamily } from '@/utils/font'; import { useEffect, useMemo } from 'react'; export function useViewMeta() { @@ -21,7 +22,7 @@ export function useViewMeta() { lineHeightLayout: extra?.lineHeightLayout, }; }, [extra]); - + const layout = viewMeta?.layout; const style = useMemo(() => { const fontSizeMap = { @@ -56,11 +57,7 @@ export function useViewMeta() { useEffect(() => { if (!layoutStyle.font) return; - void window.WebFont?.load({ - google: { - families: [layoutStyle.font], - }, - }); + void getFontFamily(layoutStyle.font); }, [layoutStyle.font]); const icon = viewMeta?.icon || undefined; diff --git a/frontend/appflowy_web_app/src/utils/font.ts b/frontend/appflowy_web_app/src/utils/font.ts index 645340d958..b4a41698fa 100644 --- a/frontend/appflowy_web_app/src/utils/font.ts +++ b/frontend/appflowy_web_app/src/utils/font.ts @@ -7,10 +7,22 @@ export function getFontFamily(attribute: string) { return fontFamily; } - window.WebFont?.load({ - google: { - families: [fontFamily], - }, - }); + void (async () => { + const script = document.createElement('script'); + + script.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js'; + document.body.appendChild(script); + await new Promise((resolve) => { + script.onload = () => { + resolve(true); + }; + }); + window.WebFont?.load({ + google: { + families: [fontFamily], + }, + }); + })(); + return fontFamily; } diff --git a/frontend/appflowy_web_app/vite.config.ts b/frontend/appflowy_web_app/vite.config.ts index 4a058a50fa..1b6d0fc30f 100644 --- a/frontend/appflowy_web_app/vite.config.ts +++ b/frontend/appflowy_web_app/vite.config.ts @@ -114,7 +114,10 @@ export default defineConfig({ id.includes('/y-indexeddb@') || id.includes('/dexie') || id.includes('/redux') || - id.includes('/react-custom-scrollbars') + id.includes('/react-custom-scrollbars') || + id.includes('/dayjs') || + id.includes('/smooth-scroll-into-view-if-needed') || + id.includes('/react-virtualized-auto-sizer') ) { return 'common'; }