Skip to content

Commit

Permalink
feat: markdown support tag
Browse files Browse the repository at this point in the history
  • Loading branch information
Innei committed Aug 11, 2023
1 parent ad4530a commit 784b096
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 31 deletions.
4 changes: 2 additions & 2 deletions src/app/feed/route.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import type { AggregateRoot } from '@mx-space/api-client'
import { InsertRule } from '~/components/ui/markdown/parsers/ins'
import { MarkRule } from '~/components/ui/markdown/parsers/mark'
import { MentionRule } from '~/components/ui/markdown/parsers/mention'
import { SpoilderRule } from '~/components/ui/markdown/parsers/spoiler'
import { SpoilerRule } from '~/components/ui/markdown/parsers/spoiler'
import { escapeXml } from '~/lib/helper.server'
import { getQueryClient } from '~/lib/query-client.server'
import { apiClient } from '~/lib/request'
Expand Down Expand Up @@ -73,7 +73,7 @@ ${ReactDOM.renderToString(
),
},
additionalParserRules: {
spoilder: SpoilderRule,
spoilder: SpoilerRule,
mention: MentionRule,
mark: MarkRule,
Expand Down
9 changes: 7 additions & 2 deletions src/components/ui/markdown/Markdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { InsertRule } from './parsers/ins'
import { KateXRule } from './parsers/katex'
import { MarkRule } from './parsers/mark'
import { MentionRule } from './parsers/mention'
import { SpoilderRule } from './parsers/spoiler'
import { SpoilerRule } from './parsers/spoiler'
import {
MParagraph,
MTable,
Expand All @@ -34,6 +34,7 @@ import { MDetails } from './renderers/collapse'
import { MFootNote } from './renderers/footnotes'
import { MHeader } from './renderers/heading'
import { MarkdownImage } from './renderers/image'
import { MTag } from './renderers/tag'

const CodeBlock = dynamic(() => import('~/components/widgets/shared/CodeBlock'))

Expand Down Expand Up @@ -89,11 +90,15 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
footer: MFootNote,
details: MDetails,
img: MarkdownImage,
tag: MTag,

// for custom react component
// Tag: MTag,

LinkCard,
Gallery,
script: allowsScript ? Script : undefined,

...overrides,
},

Expand Down Expand Up @@ -221,7 +226,7 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
...renderers,
},
additionalParserRules: {
spoilder: SpoilderRule,
spoilder: SpoilerRule,
mention: MentionRule,

mark: MarkRule,
Expand Down
10 changes: 5 additions & 5 deletions src/components/ui/markdown/parsers/spoiler.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import type { MarkdownToJSX } from 'markdown-to-jsx'
import React from 'react'
import {
Priority,
parseCaptureInline,
Priority,
simpleInlineRegex,
} from 'markdown-to-jsx'
import React from 'react'
import type { MarkdownToJSX } from 'markdown-to-jsx'

// ||Spoilder||
export const SpoilderRule: MarkdownToJSX.Rule = {
// ||Spoiler||
export const SpoilerRule: MarkdownToJSX.Rule = {
match: simpleInlineRegex(
/^\|\|((?:\[.*?\]|<.*?>(?:.*?<.*?>)?|`.*?`|.)*?)\|\|/,
),
Expand Down
8 changes: 8 additions & 0 deletions src/components/ui/markdown/renderers/tag.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
// @ts-nocheck
import { Tag } from '../../tag/Tag'

export const MTag: Component = ({ children }) => {
const text = children?.[0]
if (typeof text !== 'string') return null
return <Tag text={children[0]} />
}
35 changes: 35 additions & 0 deletions src/components/ui/tag/Tag.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { memo } from 'react'

import { useIsDark } from '~/hooks/common/use-is-dark'
import { addAlphaToHSL, getColorScheme, stringToHue } from '~/lib/color'

import { MotionButtonBase } from '../button'

export const Tag = memo(function Tag<T>(props: {
onClick?: (passProps: T) => void
text: string
passProps: T
count?: number
}) {
const { text, count, passProps, onClick } = props
const { dark, light } = getColorScheme(stringToHue(text))
const isDark = useIsDark()

const bgColor = isDark ? dark.background : light.background
const Tag = onClick ? MotionButtonBase : 'span'
return (
<Tag
onClick={() => {
onClick?.(passProps)
}}
key={text}
className="space-x-1 rounded-md px-3 py-2"
style={{
backgroundColor: addAlphaToHSL(bgColor, 0.7),
}}
>
<span>{text}</span>
{!!count && <span className="self-end text-xs">({count})</span>}
</Tag>
)
})
27 changes: 5 additions & 22 deletions src/components/widgets/post/PostTagsFAB.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,10 @@ import Link from 'next/link'
import type { TagModel } from '@mx-space/api-client'

import { EmptyIcon } from '~/components/icons/empty'
import { MotionButtonBase } from '~/components/ui/button'
import { FABPortable } from '~/components/ui/fab'
import { TimelineList } from '~/components/ui/list/TimelineList'
import { Loading } from '~/components/ui/loading'
import { useIsDark } from '~/hooks/common/use-is-dark'
import { addAlphaToHSL, getColorScheme, stringToHue } from '~/lib/color'
import { Tag } from '~/components/ui/tag/Tag'
import { apiClient } from '~/lib/request'
import { routeBuilder, Routes } from '~/lib/route-builder'
import { useModalStack } from '~/providers/root/modal-stack-provider'
Expand Down Expand Up @@ -52,37 +50,22 @@ const TagsModal = () => {
return (
<div className="flex flex-wrap gap-3">
{data.map((tag) => {
return <Tag key={tag.name} {...tag} onClick={handleTagClick} />
return <TagInternal key={tag.name} {...tag} onClick={handleTagClick} />
})}
</div>
)
}

const Tag = memo(function Tag(
const TagInternal = memo(function TagInternal(
props: TagModel & {
onClick?: (tag: TagModel) => void
},
) {
const { count, name } = props

const { dark, light } = getColorScheme(stringToHue(name))
const isDark = useIsDark()

const bgColor = isDark ? dark.background : light.background
return (
<MotionButtonBase
onClick={() => {
props.onClick?.(props)
}}
key={name}
className="space-x-1 rounded-md px-3 py-2"
style={{
backgroundColor: addAlphaToHSL(bgColor, 0.7),
}}
>
<span>{name}</span>
<span className="self-end text-xs">({count})</span>
</MotionButtonBase>
// @ts-ignore
<Tag count={count} text={name} onClick={props.onClick} passProps={props} />
)
})

Expand Down

1 comment on commit 784b096

@vercel
Copy link

@vercel vercel bot commented on 784b096 Aug 11, 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.