diff --git a/src/app/notes/[id]/page.tsx b/src/app/notes/[id]/page.tsx index 50381fe6d0..72a10f9268 100644 --- a/src/app/notes/[id]/page.tsx +++ b/src/app/notes/[id]/page.tsx @@ -5,7 +5,7 @@ import { useParams } from 'next/navigation' import { Toc, TocAutoScroll } from '~/components/widgets/toc' import { useNoteByNidQuery } from '~/hooks/data/use-note' import { PageDataHolder } from '~/lib/page-holder' -import { ArticleElementContextProvider } from '~/providers/article/article-element-provider' +import { ArticleElementProvider } from '~/providers/article/article-element-provider' import { NoteLayoutRightSidePortal } from '~/providers/note/right-side-provider' import { parseMarkdown } from '~/remark' @@ -21,14 +21,14 @@ const PageImpl = () => {

{data?.data?.title}

- + {mardownResult.jsx} - + ) } diff --git a/src/components/ui/float-popover/FloatPopover.tsx b/src/components/ui/float-popover/FloatPopover.tsx index 4b4458bf8c..2e52b73f54 100644 --- a/src/components/ui/float-popover/FloatPopover.tsx +++ b/src/components/ui/float-popover/FloatPopover.tsx @@ -1,14 +1,7 @@ 'use client' import { flip, offset, shift, useFloating } from '@floating-ui/react-dom' -import React, { - Fragment, - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from 'react' +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' import clsx from 'clsx' import type { UseFloatingOptions } from '@floating-ui/react-dom' import type { FC, PropsWithChildren } from 'react' @@ -21,7 +14,7 @@ import styles from './index.module.css' export const FloatPopover: FC< PropsWithChildren<{ - triggerComponent: FC + TriggerComponent: FC headless?: boolean wrapperClassNames?: string trigger?: 'click' | 'hover' | 'both' @@ -43,7 +36,7 @@ export const FloatPopover: FC< const { headless = false, wrapperClassNames, - triggerComponent: TriggerComponent, + TriggerComponent, trigger = 'hover', padding, offset: offsetValue, @@ -96,10 +89,10 @@ export const FloatPopover: FC< if (status === 'in') { nextElementSibling.ontransitionend = null - nextElementSibling?.classList.add(styles.show) + nextElementSibling.classList.add(styles.show) } else { - nextElementSibling?.classList.remove(styles.show) - nextElementSibling!.ontransitionend = () => { + nextElementSibling.classList.remove(styles.show) + nextElementSibling.ontransitionend = () => { setOpen(false) setMounted(false) } @@ -201,6 +194,12 @@ export const FloatPopover: FC< ) + useEffect(() => { + if (containerRef.current && open) { + containerRef.current.focus() + } + }, [open]) + if (!props.children) { return TriggerWrapper } @@ -219,15 +218,15 @@ export const FloatPopover: FC< )} {...(trigger === 'hover' || trigger === 'both' ? listener : {})} ref={containerRef} - tabIndex={0} - role="tooltip" + tabIndex={-1} + role="dialog" aria-modal="true" >
{open && (
- + {

此文章收录于专栏：

+ @@ -53,8 +54,8 @@ const InnerTopicDetail: FC<{ topic: TopicModel }> = (props) => { return (
- -

+ +

{topic.name}

@@ -85,7 +86,6 @@ const InnerTopicDetail: FC<{ topic: TopicModel }> = (props) => { diff --git a/src/providers/article/article-element-provider.tsx b/src/providers/article/article-element-provider.tsx index 981798a6ae..6caf898a7a 100644 --- a/src/providers/article/article-element-provider.tsx +++ b/src/providers/article/article-element-provider.tsx @@ -1,37 +1,70 @@ -import { useEffect, useState } from 'react' +import { useEffect, useRef } from 'react' import { createContextState } from 'foxact/create-context-state' import { clsxm } from '~/utils/helper' const [ - ArticleElementContextProviderInternal, + ArticleElementProviderInternal, useArticleElement, useSetArticleElement, ] = createContextState(undefined as any) -const ArticleElementContextProvider: Component = ({ children, className }) => { +const [ + IsEOArticleElementProviderInternal, + useIsEOArticleElement, + useSetIsEOArticleElement, +] = createContextState(false) + +const ArticleElementProvider: Component = ({ children, className }) => { return ( - - {children} - + + + {children} + + ) } const Content: Component = ({ children, className }) => { - const [contentRef, setContentRef] = useState(null) const setter = useSetArticleElement() - useEffect(() => { - setter(contentRef) - }, [contentRef, setter]) + return ( -
+
{children} +
) } +const EOADetector: Component = () => { + const ref = useRef(null) + const setter = useSetIsEOArticleElement() + useEffect(() => { + if (!ref.current) return + const $el = ref.current + const observer = new IntersectionObserver( + (entries) => { + const entry = entries[0] + setter(entry.isIntersecting) + }, + { + rootMargin: '0px 0px 10% 0px', + }, + ) + + observer.observe($el) + return () => { + observer.unobserve($el) + observer.disconnect() + } + }, []) + + return
+} + export { - ArticleElementContextProvider, + ArticleElementProvider, useSetArticleElement, useArticleElement, + useIsEOArticleElement, } diff --git a/src/styles/tailwindcss.css b/src/styles/tailwindcss.css index f6cf6edfc2..91c42edb16 100644 --- a/src/styles/tailwindcss.css +++ b/src/styles/tailwindcss.css @@ -11,10 +11,6 @@ html { max-width: 100% !important; } -* { - @apply duration-200; -} - *:focus { outline: none; }