Skip to content

Commit

Permalink
fix: typo & markdown selection action
Browse files Browse the repository at this point in the history
Signed-off-by: Innei <[email protected]>
  • Loading branch information
Innei committed Oct 16, 2023
1 parent 7c63699 commit 108d4c3
Show file tree
Hide file tree
Showing 11 changed files with 96 additions and 45 deletions.
10 changes: 8 additions & 2 deletions src/app/(page-detail)/[slug]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,20 @@ import { ReadIndicatorForMobile } from '~/components/widgets/shared/ReadIndicato
import { LayoutRightSidePortal } from '~/providers/shared/LayoutRightSideProvider'
import { WrappedElementProvider } from '~/providers/shared/WrappedElementProvider'

import { MarkdownImageRecordProviderInternal, PageMarkdown } from './pageExtra'
import {
MarkdownImageRecordProviderInternal,
MarkdownSelection,
PageMarkdown,
} from './pageExtra'

const PageDetail = () => {
return (
<WrappedElementProvider>
<ReadIndicatorForMobile />
<MarkdownImageRecordProviderInternal>
<PageMarkdown />
<MarkdownSelection>
<PageMarkdown />
</MarkdownSelection>
</MarkdownImageRecordProviderInternal>

<LayoutRightSidePortal>
Expand Down
16 changes: 16 additions & 0 deletions src/app/(page-detail)/[slug]/pageExtra.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import type { PropsWithChildren } from 'react'
import { useSetHeaderMetaInfo } from '~/components/layout/header/hooks'
import { MainMarkdown } from '~/components/ui/markdown'
import { GoToAdminEditingButton } from '~/components/widgets/shared/GoToAdminEditingButton'
import { WithArticleSelectionAction } from '~/components/widgets/shared/WithArticleSelectionAction'
import { noopArr } from '~/lib/noop'
import { MarkdownImageRecordProvider } from '~/providers/article/MarkdownImageRecordProvider'
import { useCurrentPageDataSelector } from '~/providers/page/CurrentPageDataProvider'
Expand Down Expand Up @@ -138,3 +139,18 @@ export const PagePaginator = () => {
</div>
)
}

export const MarkdownSelection: Component = (props) => {
const id = useCurrentPageDataSelector((data) => data?.id)!
const title = useCurrentPageDataSelector((data) => data?.title)!
const canComment = useCurrentPageDataSelector((data) => data?.allowComment)!
return (
<WithArticleSelectionAction
refId={id}
title={title}
canComment={canComment}
>
{props.children}
</WithArticleSelectionAction>
)
}
9 changes: 8 additions & 1 deletion src/app/notes/[id]/pageExtra.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,15 @@ import styles from './page.module.css'
export const MarkdownSelection: Component = (props) => {
const id = useCurrentNoteDataSelector((data) => data?.data?.id)!
const title = useCurrentNoteDataSelector((data) => data?.data?.title)!
const canComment = useCurrentNoteDataSelector(
(data) => data?.data.allowComment,
)!
return (
<WithArticleSelectionAction refId={id} title={title}>
<WithArticleSelectionAction
refId={id}
title={title}
canComment={canComment}
>
{props.children}
</WithArticleSelectionAction>
)
Expand Down
7 changes: 6 additions & 1 deletion src/app/posts/(post-detail)/[category]/[slug]/pageExtra.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,13 @@ export const PostTitle = () => {
export const MarkdownSelection: Component = (props) => {
const id = useCurrentPostDataSelector((data) => data?.id)!
const title = useCurrentPostDataSelector((data) => data?.title)!
const allowComment = useCurrentPostDataSelector((data) => data?.allowComment)!
return (
<WithArticleSelectionAction refId={id} title={title}>
<WithArticleSelectionAction
refId={id}
title={title}
canComment={allowComment}
>
{props.children}
</WithArticleSelectionAction>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { atom, useAtom } from 'jotai'

import { CloseIcon } from '~/components/icons/close'
import { MotionButtonBase } from '~/components/ui/button'
import { DialogOverlay } from '~/components/ui/dlalog/DialogOverlay'
import { DialogOverlay } from '~/components/ui/dialog/DialogOverlay'
import { useIsClient } from '~/hooks/common/use-is-client'

import { HeaderActionButton } from './HeaderActionButton'
Expand Down
File renamed without changes.
File renamed without changes.
2 changes: 1 addition & 1 deletion src/components/widgets/shared/AsideDonateButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import type { HTMLMotionProps } from 'framer-motion'

import { ImpressionView } from '~/components/common/ImpressionTracker'
import { MotionButtonBase } from '~/components/ui/button'
import { DialogOverlay } from '~/components/ui/dlalog/DialogOverlay'
import { DialogOverlay } from '~/components/ui/dialog/DialogOverlay'
import { TrackerAction } from '~/constants/tracker'
import { useIsClient } from '~/hooks/common/use-is-client'
import { clsxm } from '~/lib/helper'
Expand Down
12 changes: 8 additions & 4 deletions src/components/widgets/shared/BanCopyWrapper.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
'use client'

import { DialogContent, DialogPortal, Root } from '@radix-ui/react-dialog'
import { useEffect, useRef, useState } from 'react'
import { createContext, useContext, useEffect, useRef, useState } from 'react'
import { AnimatePresence, m } from 'framer-motion'
import type { FC, PropsWithChildren } from 'react'

import { isLogged } from '~/atoms'

import { DialogOverlay } from '../../ui/dlalog'
import { DialogOverlay } from '../../ui/dialog'

const BanCopyContext = createContext(false)

export const useIsInBanCopyContext = () => useContext(BanCopyContext)

export const BanCopyWrapper: FC<PropsWithChildren> = (props) => {
const [showCopyWarn, setShowCopyWarn] = useState(false)
Expand Down Expand Up @@ -42,7 +46,7 @@ export const BanCopyWrapper: FC<PropsWithChildren> = (props) => {
}
}, [showCopyWarn])
return (
<>
<BanCopyContext.Provider value={true}>
<div ref={ref}>{props.children}</div>
<Root open>
<AnimatePresence>
Expand Down Expand Up @@ -71,6 +75,6 @@ export const BanCopyWrapper: FC<PropsWithChildren> = (props) => {
)}
</AnimatePresence>
</Root>
</>
</BanCopyContext.Provider>
)
}
81 changes: 47 additions & 34 deletions src/components/widgets/shared/WithArticleSelectionAction.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,14 @@ import { useIsClient } from '~/hooks/common/use-is-client'
import { stopPropagation } from '~/lib/dom'
import { useModalStack } from '~/providers/root/modal-stack-provider'

import { useIsInBanCopyContext } from './BanCopyWrapper'
import { CommentModal } from './CommentModal'

export const WithArticleSelectionAction: Component<{
refId: string
title: string
}> = ({ refId, title, children }) => {
canComment: boolean
}> = ({ refId, title, children, canComment }) => {
const isMobile = useIsMobile()
const [pos, setPos] = useState({
x: 0,
Expand Down Expand Up @@ -52,7 +54,12 @@ export const WithArticleSelectionAction: Component<{
}, 1000)
}, [])

const canCopy = !useIsInBanCopyContext()

const actionCanActivated = canCopy || canComment

if (isMobile || !isClient) return children
if (!actionCanActivated) return children
return (
<div
className="relative"
Expand Down Expand Up @@ -95,40 +102,46 @@ export const WithArticleSelectionAction: Component<{
opacity: 0,
}}
>
<MotionButtonBase
data-event="selection-comment"
className="rounded-md px-2 py-1 hover:bg-slate-100/80 dark:hover:bg-zinc-900/90"
onMouseUp={stopPropagation}
onClick={() => {
navigator.clipboard.writeText(selectedText)
setShow(false)
}}
>
复制
</MotionButtonBase>
<DividerVertical className="mx-1" />
<MotionButtonBase
data-event="selection-comment"
className="rounded-md px-2 py-1 hover:bg-slate-100/80 dark:hover:bg-zinc-900/90"
onClick={() => {
present({
title: '评论',
{canCopy && (
<>
<MotionButtonBase
data-event="selection-comment"
className="rounded-md px-2 py-1 hover:bg-slate-100/80 dark:hover:bg-zinc-900/90"
onMouseUp={stopPropagation}
onClick={() => {
navigator.clipboard.writeText(selectedText)
setShow(false)
}}
>
复制
</MotionButtonBase>
<DividerVertical className="mx-1" />
</>
)}
{canComment && (
<MotionButtonBase
data-event="selection-comment"
className="rounded-md px-2 py-1 hover:bg-slate-100/80 dark:hover:bg-zinc-900/90"
onClick={() => {
present({
title: '评论',

content: (rest) => (
<CommentModal
refId={refId}
title={title}
initialValue={`> ${selectedText
?.split('\n')
.join('')}\n\n`}
{...rest}
/>
),
})
}}
>
引用评论
</MotionButtonBase>
content: (rest) => (
<CommentModal
refId={refId}
title={title}
initialValue={`> ${selectedText
?.split('\n')
.join('')}\n\n`}
{...rest}
/>
),
})
}}
>
引用评论
</MotionButtonBase>
)}
</m.div>
)}
</AnimatePresence>
Expand Down
2 changes: 1 addition & 1 deletion src/providers/root/modal-stack-provider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ import type { Target, Transition } from 'framer-motion'
import type { FC, PropsWithChildren, SyntheticEvent } from 'react'

import { CloseIcon } from '~/components/icons/close'
import { DialogOverlay } from '~/components/ui/dialog/DialogOverlay'
import { Divider } from '~/components/ui/divider'
import { DialogOverlay } from '~/components/ui/dlalog/DialogOverlay'
import { microReboundPreset } from '~/constants/spring'
import { useEventCallback } from '~/hooks/common/use-event-callback'
import { useIsClient } from '~/hooks/common/use-is-client'
Expand Down

1 comment on commit 108d4c3

@vercel
Copy link

@vercel vercel bot commented on 108d4c3 Oct 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

shiro – ./

shiro-innei.vercel.app
shiro-git-main-innei.vercel.app
springtide.vercel.app
innei.in

Please sign in to comment.