#1181

Committed 23 Aug 2025 05:01PM UTC coverage: 0.52% (-0.003%) from 0.523%

Build # #1181

Build Type

push

Committed by

Commit Message

Merge 502f2d0f4 into 40e2e524d

Run Details

30 of 449 branches covered (6.68%)

Branch coverage included in aggregate %.

0 of 597 new or added lines in 14 files covered. (0.0%)

184 existing lines in 5 files now uncovered.

147 of 33621 relevant lines covered (0.44%)

8.64 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/components/RichTextEditor/markdown-components.tsx

import type React from 'react'
import { cn } from '@/lib/utils'

type HeadingProps = {
  level: 1 | 2 | 3 | 4 | 5 | 6
  children: React.ReactNode
}

const Heading = ({ level, children }: HeadingProps) => {
  const className = cn(
    'font-bold tracking-tight',
    level === 1 &&
      'mb-8 bg-linear-to-br from-gray-900 to-gray-600 bg-clip-text text-4xl text-transparent dark:from-gray-100 dark:to-gray-400',
    level === 2 &&
      'mb-6 bg-linear-to-br from-gray-800 to-gray-600 bg-clip-text text-3xl text-transparent dark:from-gray-200 dark:to-gray-400',
    level === 3 && 'mb-4 text-2xl text-gray-800 dark:text-gray-200',
    level === 4 && 'mb-4 text-xl text-gray-800 dark:text-gray-200',
    level === 5 && 'mb-4 text-lg text-gray-800 dark:text-gray-200',
    level === 6 && 'mb-4 text-base text-gray-800 dark:text-gray-200'
  )

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const Tag = `h${level}` as any
  return <Tag className={className}>{children}</Tag>
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const MarkdownComponents: any = {
  h1: ({
    children,
    ...props
  }: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLHeadingElement>,
    HTMLHeadingElement
  >) => (
    <Heading level={1} {...props}>
      {children}
    </Heading>
  ),
  h2: ({
    children,
  }: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLHeadingElement>,
    HTMLHeadingElement
  >) => <Heading level={2}>{children}</Heading>,
  h3: ({
    children,
  }: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLHeadingElement>,
    HTMLHeadingElement
  >) => <Heading level={3}>{children}</Heading>,
  h4: ({
    children,
  }: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLHeadingElement>,
    HTMLHeadingElement
  >) => <Heading level={4}>{children}</Heading>,
  h5: ({
    children,
  }: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLHeadingElement>,
    HTMLHeadingElement
  >) => <Heading level={5}>{children}</Heading>,
  h6: ({
    children,
  }: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLHeadingElement>,
    HTMLHeadingElement
  >) => <Heading level={6}>{children}</Heading>,
  p: ({
    children,
    ...props
  }: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLParagraphElement>,
    HTMLParagraphElement
  >) => (
    <p className='mb-6 leading-7 text-gray-700 not-first:mt-6 dark:text-gray-300'>
      {children}
    </p>
  ),
  a: ({
    href,
    children,
    ...props
  }: React.DetailedHTMLProps<
    React.AnchorHTMLAttributes<HTMLAnchorElement>,
    HTMLAnchorElement
  >) => (
    <a
      href={href}
      target='_blank'
      rel='noopener noreferrer'
      className='bg-linear-to-r from-blue-600 to-blue-400 bg-[length:0%_2px] bg-left-bottom bg-no-repeat px-1 text-blue-600 transition-all hover:bg-[length:100%_2px] hover:text-blue-500 dark:from-blue-400 dark:to-blue-300 dark:text-blue-400 dark:hover:text-blue-300'
      {...props}
    >
      {children}
    </a>
  ),
  strong: ({
    children,
    ...props
  }: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLElement>,
    HTMLElement
  >) => (
    <strong className='font-bold text-gray-900 dark:text-white' {...props}>
      {children}
    </strong>
  ),
  em: ({
    children,
    ...props
  }: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLElement>,
    HTMLElement
  >) => (
    <em className='text-gray-800 italic dark:text-gray-200' {...props}>
      {children}
    </em>
  ),
  code: ({
    children,
    ...props
  }: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLElement>,
    HTMLElement
  >) => (
    <code
      className='rounded-md bg-gray-100 px-1.5 py-0.5 font-mono text-sm text-gray-900 dark:bg-gray-800 dark:text-gray-100'
      {...props}
    >
      {children}
    </code>
  ),
  pre: ({
    children,
    ...props
  }: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLPreElement>,
    HTMLPreElement
  >) => (
    <pre
      className='mt-6 mb-4 overflow-x-auto rounded-lg bg-gray-100 p-4 dark:bg-gray-800/50'
      {...props}
    >
      {children}
    </pre>
  ),
  blockquote: ({
    children,
    ...props
  }: React.DetailedHTMLProps<
    React.BlockquoteHTMLAttributes<HTMLQuoteElement>,
    HTMLQuoteElement
  >) => (
    <blockquote
      className='mt-6 border-l-4 border-gray-300 bg-linear-to-r from-gray-100 to-transparent pl-6 text-gray-700 italic dark:border-gray-700 dark:from-gray-800 dark:to-transparent dark:text-gray-400'
      {...props}
    >
      {children}
    </blockquote>
  ),
  ul: ({
    children,
    ...props
  }: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLUListElement>,
    HTMLUListElement
  >) => (
    <ul
      className='my-6 ml-6 list-disc space-y-2 text-gray-700 dark:text-gray-300 [&>li]:mt-2'
      {...props}
    >
      {children}
    </ul>
  ),
  ol: ({
    children,
    ...props
  }: React.DetailedHTMLProps<
    React.OlHTMLAttributes<HTMLOListElement>,
    HTMLOListElement
  >) => (
    <ol
      className='my-6 ml-6 list-decimal space-y-2 text-gray-700 dark:text-gray-300 [&>li]:mt-2'
      {...props}
    >
      {children}
    </ol>
  ),
  li: ({
    children,
    ...props
  }: React.DetailedHTMLProps<
    React.LiHTMLAttributes<HTMLLIElement>,
    HTMLLIElement
  >) => <li {...props}>{children}</li>,
  hr: (
    props: React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLHRElement>,
      HTMLHRElement
    >
  ) => (
    <hr
      className='my-8 h-1 w-full rounded-full bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 opacity-80 shadow-sm backdrop-blur-sm dark:from-indigo-600 dark:via-violet-600 dark:to-purple-700'
      {...props}
    />
  ),
  img: ({
    src,
    alt,
    ...props
  }: React.DetailedHTMLProps<
    React.ImgHTMLAttributes<HTMLImageElement>,
    HTMLImageElement
  >) => (
    <img
      src={src}
      alt={alt}
      className='my-8 rounded-lg border border-gray-200 bg-gray-50 p-2 dark:border-gray-800 dark:bg-gray-900/50'
      {...props}
    />
  ),
  table: ({
    children,
    ...props
  }: React.DetailedHTMLProps<
    React.TableHTMLAttributes<HTMLTableElement>,
    HTMLTableElement
  >) => (
    <div className='my-6 w-full overflow-y-auto'>
      <table className='w-full border-collapse text-sm' {...props}>
        {children}
      </table>
    </div>
  ),
  thead: ({
    children,
    ...props
  }: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLTableSectionElement>,
    HTMLTableSectionElement
  >) => (
    <thead
      className='border-b border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900/50'
      {...props}
    >
      {children}
    </thead>
  ),
  tbody: ({
    children,
    ...props
  }: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLTableSectionElement>,
    HTMLTableSectionElement
  >) => <tbody {...props}>{children}</tbody>,
  tr: ({
    children,
    ...props
  }: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLTableRowElement>,
    HTMLTableRowElement
  >) => (
    <tr
      className='border-b border-gray-100 last:border-0 dark:border-gray-800'
      {...props}
    >
      {children}
    </tr>
  ),
  th: ({
    children,
    ...props
  }: React.DetailedHTMLProps<
    React.ThHTMLAttributes<HTMLTableHeaderCellElement>,
    HTMLTableHeaderCellElement
  >) => (
    <th className='border-r border-gray-100 p-4 text-left font-medium text-gray-900 last:border-0 dark:border-gray-800 dark:text-gray-100'>
      {children}
    </th>
  ),
  td: ({
    children,
    ...props
  }: React.DetailedHTMLProps<
    React.TdHTMLAttributes<HTMLTableDataCellElement>,
    HTMLTableDataCellElement
  >) => (
    <td
      className='border-r border-gray-100 p-4 text-gray-700 last:border-0 dark:border-gray-800 dark:text-gray-300'
      {...props}
    >
      {children}
    </td>
  ),
}

1	import type React from 'react'	×
2	import { cn } from '@/lib/utils'	×
3		×
4	type HeadingProps = {	×
5	level: 1 \| 2 \| 3 \| 4 \| 5 \| 6	×
6	children: React.ReactNode	×
7	}	×
8		×
9	const Heading = ({ level, children }: HeadingProps) => {	×
10	const className = cn(	×
11	'font-bold tracking-tight',	×
12	level === 1 &&	×
13	'mb-8 bg-linear-to-br from-gray-900 to-gray-600 bg-clip-text text-4xl text-transparent dark:from-gray-100 dark:to-gray-400',	×
14	level === 2 &&	×
15	'mb-6 bg-linear-to-br from-gray-800 to-gray-600 bg-clip-text text-3xl text-transparent dark:from-gray-200 dark:to-gray-400',	×
16	level === 3 && 'mb-4 text-2xl text-gray-800 dark:text-gray-200',	×
17	level === 4 && 'mb-4 text-xl text-gray-800 dark:text-gray-200',	×
18	level === 5 && 'mb-4 text-lg text-gray-800 dark:text-gray-200',	×
19	level === 6 && 'mb-4 text-base text-gray-800 dark:text-gray-200'	×
20	)	×
21		×
22	// eslint-disable-next-line @typescript-eslint/no-explicit-any	×
23	const Tag = `h${level}` as any	×
24	return <Tag className={className}>{children}</Tag>	×
25	}	×
26		×
27	// eslint-disable-next-line @typescript-eslint/no-explicit-any	×
28	export const MarkdownComponents: any = {	×
29	h1: ({	×
30	children,	×
31	...props	×
32	}: React.DetailedHTMLProps<	×
33	React.HTMLAttributes<HTMLHeadingElement>,	×
34	HTMLHeadingElement	×
35	>) => (	×
36	<Heading level={1} {...props}>	×
37	{children}	×
38	</Heading>	×
39	),	×
40	h2: ({	×
41	children,	×
42	}: React.DetailedHTMLProps<	×
43	React.HTMLAttributes<HTMLHeadingElement>,	×
44	HTMLHeadingElement	×
45	>) => <Heading level={2}>{children}</Heading>,	×
46	h3: ({	×
47	children,	×
48	}: React.DetailedHTMLProps<	×
49	React.HTMLAttributes<HTMLHeadingElement>,	×
50	HTMLHeadingElement	×
51	>) => <Heading level={3}>{children}</Heading>,	×
52	h4: ({	×
53	children,	×
54	}: React.DetailedHTMLProps<	×
55	React.HTMLAttributes<HTMLHeadingElement>,	×
56	HTMLHeadingElement	×
57	>) => <Heading level={4}>{children}</Heading>,	×
58	h5: ({	×
59	children,	×
60	}: React.DetailedHTMLProps<	×
61	React.HTMLAttributes<HTMLHeadingElement>,	×
62	HTMLHeadingElement	×
63	>) => <Heading level={5}>{children}</Heading>,	×
64	h6: ({	×
65	children,	×
66	}: React.DetailedHTMLProps<	×
67	React.HTMLAttributes<HTMLHeadingElement>,	×
68	HTMLHeadingElement	×
69	>) => <Heading level={6}>{children}</Heading>,	×
70	p: ({	×
71	children,	×
72	...props	×
73	}: React.DetailedHTMLProps<	×
74	React.HTMLAttributes<HTMLParagraphElement>,	×
75	HTMLParagraphElement	×
76	>) => (	×
77	<p className='mb-6 leading-7 text-gray-700 not-first:mt-6 dark:text-gray-300'>	×
78	{children}	×
79	</p>	×
80	),	×
81	a: ({	×
82	href,	×
83	children,	×
84	...props	×
85	}: React.DetailedHTMLProps<	×
86	React.AnchorHTMLAttributes<HTMLAnchorElement>,	×
87	HTMLAnchorElement	×
88	>) => (	×
89	<a	×
90	href={href}	×
91	target='_blank'	×
92	rel='noopener noreferrer'	×
93	className='bg-linear-to-r from-blue-600 to-blue-400 bg-[length:0%_2px] bg-left-bottom bg-no-repeat px-1 text-blue-600 transition-all hover:bg-[length:100%_2px] hover:text-blue-500 dark:from-blue-400 dark:to-blue-300 dark:text-blue-400 dark:hover:text-blue-300'	×
94	{...props}	×
95	>	×
96	{children}	×
97	</a>	×
98	),	×
99	strong: ({	×
100	children,	×
101	...props	×
102	}: React.DetailedHTMLProps<	×
103	React.HTMLAttributes<HTMLElement>,	×
104	HTMLElement	×
105	>) => (	×
106	<strong className='font-bold text-gray-900 dark:text-white' {...props}>	×
107	{children}	×
108	</strong>	×
109	),	×
110	em: ({	×
111	children,	×
112	...props	×
113	}: React.DetailedHTMLProps<	×
114	React.HTMLAttributes<HTMLElement>,	×
115	HTMLElement	×
116	>) => (	×
117	<em className='text-gray-800 italic dark:text-gray-200' {...props}>	×
118	{children}	×
119	</em>	×
120	),	×
UNCOV 121	code: ({	×
UNCOV 122	children,	×
UNCOV 123	...props	×
UNCOV 124	}: React.DetailedHTMLProps<	×
UNCOV 125	React.HTMLAttributes<HTMLElement>,	×
UNCOV 126	HTMLElement	×
UNCOV 127	>) => (	×
UNCOV 128	<code	×
UNCOV 129	className='rounded-md bg-gray-100 px-1.5 py-0.5 font-mono text-sm text-gray-900 dark:bg-gray-800 dark:text-gray-100'	×
UNCOV 130	{...props}	×
UNCOV 131	>	×
UNCOV 132	{children}	×
UNCOV 133	</code>	×
UNCOV 134	),	×
UNCOV 135	pre: ({	×
UNCOV 136	children,	×
UNCOV 137	...props	×
UNCOV 138	}: React.DetailedHTMLProps<	×
UNCOV 139	React.HTMLAttributes<HTMLPreElement>,	×
UNCOV 140	HTMLPreElement	×
UNCOV 141	>) => (	×
UNCOV 142	<pre	×
UNCOV 143	className='mt-6 mb-4 overflow-x-auto rounded-lg bg-gray-100 p-4 dark:bg-gray-800/50'	×
UNCOV 144	{...props}	×
UNCOV 145	>	×
UNCOV 146	{children}	×
UNCOV 147	</pre>	×
UNCOV 148	),	×
UNCOV 149	blockquote: ({	×
UNCOV 150	children,	×
UNCOV 151	...props	×
UNCOV 152	}: React.DetailedHTMLProps<	×
UNCOV 153	React.BlockquoteHTMLAttributes<HTMLQuoteElement>,	×
UNCOV 154	HTMLQuoteElement	×
UNCOV 155	>) => (	×
UNCOV 156	<blockquote	×
UNCOV 157	className='mt-6 border-l-4 border-gray-300 bg-linear-to-r from-gray-100 to-transparent pl-6 text-gray-700 italic dark:border-gray-700 dark:from-gray-800 dark:to-transparent dark:text-gray-400'	×
UNCOV 158	{...props}	×
UNCOV 159	>	×
UNCOV 160	{children}	×
UNCOV 161	</blockquote>	×
UNCOV 162	),	×
UNCOV 163	ul: ({	×
UNCOV 164	children,	×
UNCOV 165	...props	×
UNCOV 166	}: React.DetailedHTMLProps<	×
UNCOV 167	React.HTMLAttributes<HTMLUListElement>,	×
UNCOV 168	HTMLUListElement	×
UNCOV 169	>) => (	×
UNCOV 170	<ul	×
UNCOV 171	className='my-6 ml-6 list-disc space-y-2 text-gray-700 dark:text-gray-300 [&>li]:mt-2'	×
UNCOV 172	{...props}	×
UNCOV 173	>	×
UNCOV 174	{children}	×
UNCOV 175	</ul>	×
UNCOV 176	),	×
UNCOV 177	ol: ({	×
UNCOV 178	children,	×
UNCOV 179	...props	×
UNCOV 180	}: React.DetailedHTMLProps<	×
UNCOV 181	React.OlHTMLAttributes<HTMLOListElement>,	×
UNCOV 182	HTMLOListElement	×
UNCOV 183	>) => (	×
UNCOV 184	<ol	×
UNCOV 185	className='my-6 ml-6 list-decimal space-y-2 text-gray-700 dark:text-gray-300 [&>li]:mt-2'	×
UNCOV 186	{...props}	×
UNCOV 187	>	×
UNCOV 188	{children}	×
UNCOV 189	</ol>	×
UNCOV 190	),	×
UNCOV 191	li: ({	×
UNCOV 192	children,	×
UNCOV 193	...props	×
UNCOV 194	}: React.DetailedHTMLProps<	×
UNCOV 195	React.LiHTMLAttributes<HTMLLIElement>,	×
UNCOV 196	HTMLLIElement	×
UNCOV 197	>) => <li {...props}>{children}</li>,	×
UNCOV 198	hr: (	×
UNCOV 199	props: React.DetailedHTMLProps<	×
UNCOV 200	React.HTMLAttributes<HTMLHRElement>,	×
UNCOV 201	HTMLHRElement	×
UNCOV 202	>	×
UNCOV 203	) => (	×
UNCOV 204	<hr	×
UNCOV 205	className='my-8 h-1 w-full rounded-full bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 opacity-80 shadow-sm backdrop-blur-sm dark:from-indigo-600 dark:via-violet-600 dark:to-purple-700'	×
UNCOV 206	{...props}	×
UNCOV 207	/>	×
UNCOV 208	),	×
UNCOV 209	img: ({	×
UNCOV 210	src,	×
UNCOV 211	alt,	×
UNCOV 212	...props	×
UNCOV 213	}: React.DetailedHTMLProps<	×
UNCOV 214	React.ImgHTMLAttributes<HTMLImageElement>,	×
UNCOV 215	HTMLImageElement	×
UNCOV 216	>) => (	×
UNCOV 217	<img	×
UNCOV 218	src={src}	×
UNCOV 219	alt={alt}	×
UNCOV 220	className='my-8 rounded-lg border border-gray-200 bg-gray-50 p-2 dark:border-gray-800 dark:bg-gray-900/50'	×
UNCOV 221	{...props}	×
UNCOV 222	/>	×
UNCOV 223	),	×
UNCOV 224	table: ({	×
UNCOV 225	children,	×
UNCOV 226	...props	×
UNCOV 227	}: React.DetailedHTMLProps<	×
UNCOV 228	React.TableHTMLAttributes<HTMLTableElement>,	×
UNCOV 229	HTMLTableElement	×
UNCOV 230	>) => (	×
UNCOV 231	<div className='my-6 w-full overflow-y-auto'>	×
UNCOV 232	<table className='w-full border-collapse text-sm' {...props}>	×
UNCOV 233	{children}	×
UNCOV 234	</table>	×
UNCOV 235	</div>	×
UNCOV 236	),	×
UNCOV 237	thead: ({	×
UNCOV 238	children,	×
UNCOV 239	...props	×
UNCOV 240	}: React.DetailedHTMLProps<	×
UNCOV 241	React.HTMLAttributes<HTMLTableSectionElement>,	×
UNCOV 242	HTMLTableSectionElement	×
UNCOV 243	>) => (	×
UNCOV 244	<thead	×
UNCOV 245	className='border-b border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900/50'	×
UNCOV 246	{...props}	×
UNCOV 247	>	×
UNCOV 248	{children}	×
UNCOV 249	</thead>	×
UNCOV 250	),	×
UNCOV 251	tbody: ({	×
UNCOV 252	children,	×
UNCOV 253	...props	×
UNCOV 254	}: React.DetailedHTMLProps<	×
UNCOV 255	React.HTMLAttributes<HTMLTableSectionElement>,	×
UNCOV 256	HTMLTableSectionElement	×
UNCOV 257	>) => <tbody {...props}>{children}</tbody>,	×
UNCOV 258	tr: ({	×
UNCOV 259	children,	×
UNCOV 260	...props	×
UNCOV 261	}: React.DetailedHTMLProps<	×
UNCOV 262	React.HTMLAttributes<HTMLTableRowElement>,	×
UNCOV 263	HTMLTableRowElement	×
UNCOV 264	>) => (	×
UNCOV 265	<tr	×
UNCOV 266	className='border-b border-gray-100 last:border-0 dark:border-gray-800'	×
UNCOV 267	{...props}	×
UNCOV 268	>	×
UNCOV 269	{children}	×
UNCOV 270	</tr>	×
UNCOV 271	),	×
UNCOV 272	th: ({	×
UNCOV 273	children,	×
UNCOV 274	...props	×
UNCOV 275	}: React.DetailedHTMLProps<	×
UNCOV 276	React.ThHTMLAttributes<HTMLTableHeaderCellElement>,	×
UNCOV 277	HTMLTableHeaderCellElement	×
UNCOV 278	>) => (	×
UNCOV 279	<th className='border-r border-gray-100 p-4 text-left font-medium text-gray-900 last:border-0 dark:border-gray-800 dark:text-gray-100'>	×
UNCOV 280	{children}	×
UNCOV 281	</th>	×
UNCOV 282	),	×
UNCOV 283	td: ({	×
UNCOV 284	children,	×
UNCOV 285	...props	×
UNCOV 286	}: React.DetailedHTMLProps<	×
UNCOV 287	React.TdHTMLAttributes<HTMLTableDataCellElement>,	×
UNCOV 288	HTMLTableDataCellElement	×
UNCOV 289	>) => (	×
UNCOV 290	<td	×
UNCOV 291	className='border-r border-gray-100 p-4 text-gray-700 last:border-0 dark:border-gray-800 dark:text-gray-300'	×
UNCOV 292	{...props}	×
UNCOV 293	>	×
UNCOV 294	{children}	×
UNCOV 295	</td>	×
UNCOV 296	),	×
UNCOV 297	}	×

clippingkk / web / #1181

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous