betterstart-cli 0.0.105 → 0.0.106
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/adapters/next/templates/init/components/shared/data-table/data-grid-body.tsx +20 -0
- package/dist/assets/adapters/next/templates/init/components/shared/data-table/data-grid-cell.tsx +20 -0
- package/dist/assets/adapters/next/templates/init/components/shared/data-table/data-grid-head.tsx +21 -0
- package/dist/assets/adapters/next/templates/init/components/shared/data-table/data-grid-header.tsx +20 -0
- package/dist/assets/adapters/next/templates/init/components/shared/data-table/data-grid-row.tsx +22 -0
- package/dist/assets/adapters/next/templates/init/components/shared/data-table/data-grid.tsx +7 -81
- package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/blockquote-button/blockquote-button.tsx +4 -11
- package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/blockquote-button/blockquote-shortcut-badge.tsx +15 -0
- package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/code-block-button/code-block-button.tsx +4 -11
- package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/code-block-button/code-block-shortcut-badge.tsx +15 -0
- package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/color-highlight-button/color-highlight-button.tsx +6 -42
- package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/color-highlight-button/color-highlight-shortcut-badge.tsx +15 -0
- package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/color-highlight-button/highlight-swatch.tsx +34 -0
- package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/mark-button/mark-button.tsx +5 -14
- package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/mark-button/mark-shortcut-badge.tsx +18 -0
- package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/undo-redo-button/history-shortcut-badge.tsx +18 -0
- package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/undo-redo-button/undo-redo-button.tsx +5 -14
- package/dist/assets/shared-assets/react-admin/custom/icon-picker/memoized-icon.tsx +10 -0
- package/dist/assets/shared-assets/react-admin/custom/icon-picker.tsx +1 -3
- package/dist/cli.js +55 -1
- package/dist/cli.js.map +1 -1
- package/package.json +1 -1
package/dist/assets/adapters/next/templates/init/components/shared/data-table/data-grid-body.tsx
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
|
|
3
|
+
import type * as React from 'react'
|
|
4
|
+
import { cn } from '@admin/utils/shared/cn'
|
|
5
|
+
|
|
6
|
+
function DataGridBody({ className, ...props }: React.ComponentProps<'div'>) {
|
|
7
|
+
return (
|
|
8
|
+
<div
|
|
9
|
+
role="rowgroup"
|
|
10
|
+
data-slot="data-grid-body"
|
|
11
|
+
className={cn(
|
|
12
|
+
"relative col-span-full grid grid-cols-subgrid overflow-hidden rounded-sm bg-card shadow-input after:pointer-events-none after:absolute after:inset-0 after:rounded-sm after:border after:border-border after:content-['']",
|
|
13
|
+
className
|
|
14
|
+
)}
|
|
15
|
+
{...props}
|
|
16
|
+
/>
|
|
17
|
+
)
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export { DataGridBody }
|
package/dist/assets/adapters/next/templates/init/components/shared/data-table/data-grid-cell.tsx
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
|
|
3
|
+
import type * as React from 'react'
|
|
4
|
+
import { cn } from '@admin/utils/shared/cn'
|
|
5
|
+
|
|
6
|
+
function DataGridCell({ className, ...props }: React.ComponentProps<'div'>) {
|
|
7
|
+
return (
|
|
8
|
+
<div
|
|
9
|
+
role="cell"
|
|
10
|
+
data-slot="data-grid-cell"
|
|
11
|
+
className={cn(
|
|
12
|
+
'grid min-h-12 items-center px-3 py-1.5 whitespace-nowrap [&:has([role=checkbox])]:pr-0',
|
|
13
|
+
className
|
|
14
|
+
)}
|
|
15
|
+
{...props}
|
|
16
|
+
/>
|
|
17
|
+
)
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export { DataGridCell }
|
package/dist/assets/adapters/next/templates/init/components/shared/data-table/data-grid-head.tsx
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
|
|
3
|
+
import type * as React from 'react'
|
|
4
|
+
import { cn } from '@admin/utils/shared/cn'
|
|
5
|
+
|
|
6
|
+
function DataGridHead({ className, ...props }: React.ComponentProps<'div'>) {
|
|
7
|
+
return (
|
|
8
|
+
<div
|
|
9
|
+
role="columnheader"
|
|
10
|
+
data-slot="data-grid-head"
|
|
11
|
+
className={cn(
|
|
12
|
+
'grid h-9.5 items-center px-3 text-left font-medium whitespace-nowrap text-muted-foreground *:h-full [&:has([role=checkbox])]:pr-0',
|
|
13
|
+
className
|
|
14
|
+
)}
|
|
15
|
+
tabIndex={-1}
|
|
16
|
+
{...props}
|
|
17
|
+
/>
|
|
18
|
+
)
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export { DataGridHead }
|
package/dist/assets/adapters/next/templates/init/components/shared/data-table/data-grid-header.tsx
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
|
|
3
|
+
import type * as React from 'react'
|
|
4
|
+
import { cn } from '@admin/utils/shared/cn'
|
|
5
|
+
|
|
6
|
+
function DataGridHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
|
7
|
+
return (
|
|
8
|
+
<div
|
|
9
|
+
role="rowgroup"
|
|
10
|
+
data-slot="data-grid-header"
|
|
11
|
+
className={cn(
|
|
12
|
+
"relative col-span-full -mb-1 grid grid-cols-subgrid rounded-t-sm bg-muted pb-1 after:pointer-events-none after:absolute after:inset-0 after:rounded-t-sm after:border-x after:border-t after:border-border after:content-['']",
|
|
13
|
+
className
|
|
14
|
+
)}
|
|
15
|
+
{...props}
|
|
16
|
+
/>
|
|
17
|
+
)
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export { DataGridHeader }
|
package/dist/assets/adapters/next/templates/init/components/shared/data-table/data-grid-row.tsx
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
|
|
3
|
+
import type * as React from 'react'
|
|
4
|
+
import { cn } from '@admin/utils/shared/cn'
|
|
5
|
+
|
|
6
|
+
function DataGridRow({ className, style, ...props }: React.ComponentProps<'div'>) {
|
|
7
|
+
return (
|
|
8
|
+
<div
|
|
9
|
+
role="row"
|
|
10
|
+
data-slot="data-grid-row"
|
|
11
|
+
className={cn(
|
|
12
|
+
'grid border-b transition-colors last:border-b-0 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',
|
|
13
|
+
className
|
|
14
|
+
)}
|
|
15
|
+
style={{ ...style, gridColumn: '1 / -1', gridTemplateColumns: 'subgrid' }}
|
|
16
|
+
tabIndex={-1}
|
|
17
|
+
{...props}
|
|
18
|
+
/>
|
|
19
|
+
)
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export { DataGridRow }
|
|
@@ -9,12 +9,6 @@ type DataGridProps = React.ComponentProps<'div'> & {
|
|
|
9
9
|
gridTemplateColumns: string
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
const dataGridTableRole = { role: 'table' } as const
|
|
13
|
-
const dataGridRowGroupRole = { role: 'rowgroup' } as const
|
|
14
|
-
const dataGridRowRole = { role: 'row' } as const
|
|
15
|
-
const dataGridColumnHeaderRole = { role: 'columnheader' } as const
|
|
16
|
-
const dataGridCellRole = { role: 'cell' } as const
|
|
17
|
-
|
|
18
12
|
function DataGrid({
|
|
19
13
|
className,
|
|
20
14
|
containerClassName,
|
|
@@ -30,7 +24,7 @@ function DataGrid({
|
|
|
30
24
|
className={cn('relative min-w-0 overflow-auto', containerClassName)}
|
|
31
25
|
>
|
|
32
26
|
<div
|
|
33
|
-
|
|
27
|
+
role="table"
|
|
34
28
|
data-slot="data-grid"
|
|
35
29
|
className={cn('grid min-w-full text-sm', className)}
|
|
36
30
|
style={{ ...style, gridTemplateColumns }}
|
|
@@ -40,77 +34,9 @@ function DataGrid({
|
|
|
40
34
|
)
|
|
41
35
|
}
|
|
42
36
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
"relative col-span-full -mb-1 grid grid-cols-subgrid rounded-t-sm bg-muted pb-1 after:pointer-events-none after:absolute after:inset-0 after:rounded-t-sm after:border-x after:border-t after:border-border after:content-['']",
|
|
50
|
-
className
|
|
51
|
-
)}
|
|
52
|
-
{...props}
|
|
53
|
-
/>
|
|
54
|
-
)
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
function DataGridBody({ className, ...props }: React.ComponentProps<'div'>) {
|
|
58
|
-
return (
|
|
59
|
-
<div
|
|
60
|
-
{...dataGridRowGroupRole}
|
|
61
|
-
data-slot="data-grid-body"
|
|
62
|
-
className={cn(
|
|
63
|
-
"relative col-span-full grid grid-cols-subgrid overflow-hidden rounded-sm bg-card shadow-input after:pointer-events-none after:absolute after:inset-0 after:rounded-sm after:border after:border-border after:content-['']",
|
|
64
|
-
className
|
|
65
|
-
)}
|
|
66
|
-
{...props}
|
|
67
|
-
/>
|
|
68
|
-
)
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
function DataGridRow({ className, style, ...props }: React.ComponentProps<'div'>) {
|
|
72
|
-
return (
|
|
73
|
-
<div
|
|
74
|
-
{...dataGridRowRole}
|
|
75
|
-
data-slot="data-grid-row"
|
|
76
|
-
className={cn(
|
|
77
|
-
'grid border-b transition-colors last:border-b-0 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',
|
|
78
|
-
className
|
|
79
|
-
)}
|
|
80
|
-
style={{ ...style, gridColumn: '1 / -1', gridTemplateColumns: 'subgrid' }}
|
|
81
|
-
tabIndex={-1}
|
|
82
|
-
{...props}
|
|
83
|
-
/>
|
|
84
|
-
)
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
function DataGridHead({ className, ...props }: React.ComponentProps<'div'>) {
|
|
88
|
-
return (
|
|
89
|
-
<div
|
|
90
|
-
{...dataGridColumnHeaderRole}
|
|
91
|
-
data-slot="data-grid-head"
|
|
92
|
-
className={cn(
|
|
93
|
-
'grid h-9.5 items-center px-3 text-left font-medium whitespace-nowrap text-muted-foreground *:h-full [&:has([role=checkbox])]:pr-0',
|
|
94
|
-
className
|
|
95
|
-
)}
|
|
96
|
-
tabIndex={-1}
|
|
97
|
-
{...props}
|
|
98
|
-
/>
|
|
99
|
-
)
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
function DataGridCell({ className, ...props }: React.ComponentProps<'div'>) {
|
|
103
|
-
return (
|
|
104
|
-
<div
|
|
105
|
-
{...dataGridCellRole}
|
|
106
|
-
data-slot="data-grid-cell"
|
|
107
|
-
className={cn(
|
|
108
|
-
'grid min-h-12 items-center px-3 py-1.5 whitespace-nowrap [&:has([role=checkbox])]:pr-0',
|
|
109
|
-
className
|
|
110
|
-
)}
|
|
111
|
-
{...props}
|
|
112
|
-
/>
|
|
113
|
-
)
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
export { DataGrid, DataGridHeader, DataGridBody, DataGridHead, DataGridRow, DataGridCell }
|
|
37
|
+
export { DataGridBody } from './data-grid-body'
|
|
38
|
+
export { DataGridCell } from './data-grid-cell'
|
|
39
|
+
export { DataGridHead } from './data-grid-head'
|
|
40
|
+
export { DataGridHeader } from './data-grid-header'
|
|
41
|
+
export { DataGridRow } from './data-grid-row'
|
|
42
|
+
export { DataGrid }
|
|
@@ -2,22 +2,23 @@
|
|
|
2
2
|
|
|
3
3
|
import type { ControlAvailability, ControlShortcut, ControlTooltip } from '../control-options'
|
|
4
4
|
import type { UseBlockquoteConfig } from '@admin/hooks/content-editor/use-blockquote'
|
|
5
|
-
import { Badge } from '@admin/components/ui/badge'
|
|
6
5
|
import { Button } from '@admin/components/ui/button'
|
|
7
|
-
import {
|
|
6
|
+
import { useBlockquote } from '@admin/hooks/content-editor/use-blockquote'
|
|
8
7
|
import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
|
|
9
|
-
import { parseShortcutKeys } from '@admin/utils/editor/parse-shortcut-keys'
|
|
10
8
|
import { useCallback } from 'react'
|
|
11
9
|
import {
|
|
12
10
|
getControlTooltipTitle,
|
|
13
11
|
shouldHideUnavailableControl,
|
|
14
12
|
shouldShowControlShortcut
|
|
15
13
|
} from '../control-options'
|
|
14
|
+
import { BlockquoteShortcutBadge } from './blockquote-shortcut-badge'
|
|
16
15
|
|
|
17
16
|
type EditorButtonProps = React.ComponentProps<typeof Button> & {
|
|
18
17
|
tooltip?: ControlTooltip
|
|
19
18
|
}
|
|
20
19
|
|
|
20
|
+
export { BlockquoteShortcutBadge } from './blockquote-shortcut-badge'
|
|
21
|
+
|
|
21
22
|
export interface BlockquoteButtonProps
|
|
22
23
|
extends Omit<EditorButtonProps, 'type'>, Omit<UseBlockquoteConfig, 'hideWhenUnavailable'> {
|
|
23
24
|
availability?: ControlAvailability
|
|
@@ -25,14 +26,6 @@ export interface BlockquoteButtonProps
|
|
|
25
26
|
shortcut?: ControlShortcut
|
|
26
27
|
}
|
|
27
28
|
|
|
28
|
-
export function BlockquoteShortcutBadge({
|
|
29
|
-
shortcutKeys = BLOCKQUOTE_SHORTCUT_KEY
|
|
30
|
-
}: {
|
|
31
|
-
shortcutKeys?: string
|
|
32
|
-
}) {
|
|
33
|
-
return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
|
|
34
|
-
}
|
|
35
|
-
|
|
36
29
|
export function BlockquoteButton({
|
|
37
30
|
editor: providedEditor,
|
|
38
31
|
availability,
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
|
|
3
|
+
import { Badge } from '@admin/components/ui/badge'
|
|
4
|
+
import { BLOCKQUOTE_SHORTCUT_KEY } from '@admin/hooks/content-editor/use-blockquote'
|
|
5
|
+
import { parseShortcutKeys } from '@admin/utils/editor/parse-shortcut-keys'
|
|
6
|
+
|
|
7
|
+
function BlockquoteShortcutBadge({
|
|
8
|
+
shortcutKeys = BLOCKQUOTE_SHORTCUT_KEY
|
|
9
|
+
}: {
|
|
10
|
+
shortcutKeys?: string
|
|
11
|
+
}) {
|
|
12
|
+
return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export { BlockquoteShortcutBadge }
|
|
@@ -2,22 +2,23 @@
|
|
|
2
2
|
|
|
3
3
|
import type { ControlAvailability, ControlShortcut, ControlTooltip } from '../control-options'
|
|
4
4
|
import type { UseCodeBlockConfig } from '@admin/hooks/content-editor/use-code-block'
|
|
5
|
-
import { Badge } from '@admin/components/ui/badge'
|
|
6
5
|
import { Button } from '@admin/components/ui/button'
|
|
7
|
-
import {
|
|
6
|
+
import { useCodeBlock } from '@admin/hooks/content-editor/use-code-block'
|
|
8
7
|
import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
|
|
9
|
-
import { parseShortcutKeys } from '@admin/utils/editor/parse-shortcut-keys'
|
|
10
8
|
import { useCallback } from 'react'
|
|
11
9
|
import {
|
|
12
10
|
getControlTooltipTitle,
|
|
13
11
|
shouldHideUnavailableControl,
|
|
14
12
|
shouldShowControlShortcut
|
|
15
13
|
} from '../control-options'
|
|
14
|
+
import { CodeBlockShortcutBadge } from './code-block-shortcut-badge'
|
|
16
15
|
|
|
17
16
|
type EditorButtonProps = React.ComponentProps<typeof Button> & {
|
|
18
17
|
tooltip?: ControlTooltip
|
|
19
18
|
}
|
|
20
19
|
|
|
20
|
+
export { CodeBlockShortcutBadge } from './code-block-shortcut-badge'
|
|
21
|
+
|
|
21
22
|
export interface CodeBlockButtonProps
|
|
22
23
|
extends Omit<EditorButtonProps, 'type'>, Omit<UseCodeBlockConfig, 'hideWhenUnavailable'> {
|
|
23
24
|
availability?: ControlAvailability
|
|
@@ -25,14 +26,6 @@ export interface CodeBlockButtonProps
|
|
|
25
26
|
shortcut?: ControlShortcut
|
|
26
27
|
}
|
|
27
28
|
|
|
28
|
-
export function CodeBlockShortcutBadge({
|
|
29
|
-
shortcutKeys = CODE_BLOCK_SHORTCUT_KEY
|
|
30
|
-
}: {
|
|
31
|
-
shortcutKeys?: string
|
|
32
|
-
}) {
|
|
33
|
-
return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
|
|
34
|
-
}
|
|
35
|
-
|
|
36
29
|
export function CodeBlockButton({
|
|
37
30
|
editor: providedEditor,
|
|
38
31
|
availability,
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
|
|
3
|
+
import { Badge } from '@admin/components/ui/badge'
|
|
4
|
+
import { CODE_BLOCK_SHORTCUT_KEY } from '@admin/hooks/content-editor/use-code-block'
|
|
5
|
+
import { parseShortcutKeys } from '@admin/utils/editor/parse-shortcut-keys'
|
|
6
|
+
|
|
7
|
+
function CodeBlockShortcutBadge({
|
|
8
|
+
shortcutKeys = CODE_BLOCK_SHORTCUT_KEY
|
|
9
|
+
}: {
|
|
10
|
+
shortcutKeys?: string
|
|
11
|
+
}) {
|
|
12
|
+
return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export { CodeBlockShortcutBadge }
|
|
@@ -2,14 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
import type { ControlAvailability, ControlShortcut, ControlTooltip } from '../control-options'
|
|
4
4
|
import type { UseColorHighlightConfig } from '@admin/hooks/content-editor/use-color-highlight'
|
|
5
|
-
import { Badge } from '@admin/components/ui/badge'
|
|
6
5
|
import { Button } from '@admin/components/ui/button'
|
|
7
|
-
import {
|
|
8
|
-
COLOR_HIGHLIGHT_SHORTCUT_KEY,
|
|
9
|
-
useColorHighlight
|
|
10
|
-
} from '@admin/hooks/content-editor/use-color-highlight'
|
|
6
|
+
import { useColorHighlight } from '@admin/hooks/content-editor/use-color-highlight'
|
|
11
7
|
import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
|
|
12
|
-
import { parseShortcutKeys } from '@admin/utils/editor/parse-shortcut-keys'
|
|
13
8
|
import { cn } from '@admin/utils/shared/cn'
|
|
14
9
|
import { useCallback, useMemo } from 'react'
|
|
15
10
|
import {
|
|
@@ -17,11 +12,16 @@ import {
|
|
|
17
12
|
shouldHideUnavailableControl,
|
|
18
13
|
shouldShowControlShortcut
|
|
19
14
|
} from '../control-options'
|
|
15
|
+
import { ColorHighlightShortcutBadge } from './color-highlight-shortcut-badge'
|
|
16
|
+
import { HighlightSwatch } from './highlight-swatch'
|
|
20
17
|
|
|
21
18
|
type EditorButtonProps = React.ComponentProps<typeof Button> & {
|
|
22
19
|
tooltip?: ControlTooltip
|
|
23
20
|
}
|
|
24
21
|
|
|
22
|
+
export { ColorHighlightShortcutBadge } from './color-highlight-shortcut-badge'
|
|
23
|
+
export { HighlightSwatch } from './highlight-swatch'
|
|
24
|
+
|
|
25
25
|
export interface ColorHighlightButtonProps
|
|
26
26
|
extends Omit<EditorButtonProps, 'type'>, Omit<UseColorHighlightConfig, 'hideWhenUnavailable'> {
|
|
27
27
|
availability?: ControlAvailability
|
|
@@ -29,42 +29,6 @@ export interface ColorHighlightButtonProps
|
|
|
29
29
|
shortcut?: ControlShortcut
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
export function ColorHighlightShortcutBadge({
|
|
33
|
-
shortcutKeys = COLOR_HIGHLIGHT_SHORTCUT_KEY
|
|
34
|
-
}: {
|
|
35
|
-
shortcutKeys?: string
|
|
36
|
-
}) {
|
|
37
|
-
return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
export function HighlightSwatch({ highlightColor }: { highlightColor: string }) {
|
|
41
|
-
return (
|
|
42
|
-
<span
|
|
43
|
-
className={cn(
|
|
44
|
-
'relative -mx-[0.175rem] size-5 rounded-sm transition-transform duration-200 ease-in-out',
|
|
45
|
-
'bg-[var(--highlight-color)]',
|
|
46
|
-
'shadow-[inset_0_0_0_1px_var(--highlight-shadow),_0_1px_2px_var(--highlight-shadow-soft)]',
|
|
47
|
-
"after:absolute after:inset-0 after:box-border after:size-full after:rounded-sm after:border after:opacity-0 after:transition-opacity after:duration-200 after:ease-in-out after:content-['']",
|
|
48
|
-
'after:border-[var(--highlight-after-border)]',
|
|
49
|
-
'group-data-[active-state=on]/highlight:scale-110',
|
|
50
|
-
'group-data-[highlighted=true]/highlight:scale-110',
|
|
51
|
-
'group-data-[active-state=on]/highlight:after:opacity-100',
|
|
52
|
-
'group-data-[highlighted=true]/highlight:after:opacity-100'
|
|
53
|
-
)}
|
|
54
|
-
style={
|
|
55
|
-
{
|
|
56
|
-
'--highlight-color': highlightColor,
|
|
57
|
-
'--highlight-shadow':
|
|
58
|
-
'color-mix(in oklab, var(--highlight-border-color, var(--highlight-color)) 72%, var(--foreground) 28%)',
|
|
59
|
-
'--highlight-shadow-soft': 'color-mix(in oklab, var(--foreground) 10%, transparent)',
|
|
60
|
-
'--highlight-after-border':
|
|
61
|
-
'color-mix(in oklab, var(--highlight-border-color, var(--highlight-color)) 52%, var(--foreground) 48%)'
|
|
62
|
-
} as React.CSSProperties
|
|
63
|
-
}
|
|
64
|
-
/>
|
|
65
|
-
)
|
|
66
|
-
}
|
|
67
|
-
|
|
68
32
|
export function ColorHighlightButton({
|
|
69
33
|
editor: providedEditor,
|
|
70
34
|
availability,
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
|
|
3
|
+
import { Badge } from '@admin/components/ui/badge'
|
|
4
|
+
import { COLOR_HIGHLIGHT_SHORTCUT_KEY } from '@admin/hooks/content-editor/use-color-highlight'
|
|
5
|
+
import { parseShortcutKeys } from '@admin/utils/editor/parse-shortcut-keys'
|
|
6
|
+
|
|
7
|
+
function ColorHighlightShortcutBadge({
|
|
8
|
+
shortcutKeys = COLOR_HIGHLIGHT_SHORTCUT_KEY
|
|
9
|
+
}: {
|
|
10
|
+
shortcutKeys?: string
|
|
11
|
+
}) {
|
|
12
|
+
return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export { ColorHighlightShortcutBadge }
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
|
|
3
|
+
import type { CSSProperties } from 'react'
|
|
4
|
+
import { cn } from '@admin/utils/shared/cn'
|
|
5
|
+
|
|
6
|
+
function HighlightSwatch({ highlightColor }: { highlightColor: string }) {
|
|
7
|
+
return (
|
|
8
|
+
<span
|
|
9
|
+
className={cn(
|
|
10
|
+
'relative -mx-[0.175rem] size-5 rounded-sm transition-transform duration-200 ease-in-out',
|
|
11
|
+
'bg-[var(--highlight-color)]',
|
|
12
|
+
'shadow-[inset_0_0_0_1px_var(--highlight-shadow),_0_1px_2px_var(--highlight-shadow-soft)]',
|
|
13
|
+
"after:absolute after:inset-0 after:box-border after:size-full after:rounded-sm after:border after:opacity-0 after:transition-opacity after:duration-200 after:ease-in-out after:content-['']",
|
|
14
|
+
'after:border-[var(--highlight-after-border)]',
|
|
15
|
+
'group-data-[active-state=on]/highlight:scale-110',
|
|
16
|
+
'group-data-[highlighted=true]/highlight:scale-110',
|
|
17
|
+
'group-data-[active-state=on]/highlight:after:opacity-100',
|
|
18
|
+
'group-data-[highlighted=true]/highlight:after:opacity-100'
|
|
19
|
+
)}
|
|
20
|
+
style={
|
|
21
|
+
{
|
|
22
|
+
'--highlight-color': highlightColor,
|
|
23
|
+
'--highlight-shadow':
|
|
24
|
+
'color-mix(in oklab, var(--highlight-border-color, var(--highlight-color)) 72%, var(--foreground) 28%)',
|
|
25
|
+
'--highlight-shadow-soft': 'color-mix(in oklab, var(--foreground) 10%, transparent)',
|
|
26
|
+
'--highlight-after-border':
|
|
27
|
+
'color-mix(in oklab, var(--highlight-border-color, var(--highlight-color)) 52%, var(--foreground) 48%)'
|
|
28
|
+
} as CSSProperties
|
|
29
|
+
}
|
|
30
|
+
/>
|
|
31
|
+
)
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export { HighlightSwatch }
|
|
@@ -1,23 +1,24 @@
|
|
|
1
1
|
'use client'
|
|
2
2
|
|
|
3
3
|
import type { ControlAvailability, ControlShortcut, ControlTooltip } from '../control-options'
|
|
4
|
-
import type {
|
|
5
|
-
import { Badge } from '@admin/components/ui/badge'
|
|
4
|
+
import type { UseMarkConfig } from '@admin/hooks/content-editor/use-mark'
|
|
6
5
|
import { Button } from '@admin/components/ui/button'
|
|
7
|
-
import {
|
|
6
|
+
import { useMark } from '@admin/hooks/content-editor/use-mark'
|
|
8
7
|
import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
|
|
9
|
-
import { parseShortcutKeys } from '@admin/utils/editor/parse-shortcut-keys'
|
|
10
8
|
import { useCallback } from 'react'
|
|
11
9
|
import {
|
|
12
10
|
getControlTooltipTitle,
|
|
13
11
|
shouldHideUnavailableControl,
|
|
14
12
|
shouldShowControlShortcut
|
|
15
13
|
} from '../control-options'
|
|
14
|
+
import { MarkShortcutBadge } from './mark-shortcut-badge'
|
|
16
15
|
|
|
17
16
|
type EditorButtonProps = React.ComponentProps<typeof Button> & {
|
|
18
17
|
tooltip?: ControlTooltip
|
|
19
18
|
}
|
|
20
19
|
|
|
20
|
+
export { MarkShortcutBadge } from './mark-shortcut-badge'
|
|
21
|
+
|
|
21
22
|
export interface MarkButtonProps
|
|
22
23
|
extends Omit<EditorButtonProps, 'type'>, Omit<UseMarkConfig, 'hideWhenUnavailable'> {
|
|
23
24
|
availability?: ControlAvailability
|
|
@@ -25,16 +26,6 @@ export interface MarkButtonProps
|
|
|
25
26
|
shortcut?: ControlShortcut
|
|
26
27
|
}
|
|
27
28
|
|
|
28
|
-
export function MarkShortcutBadge({
|
|
29
|
-
type,
|
|
30
|
-
shortcutKeys = MARK_SHORTCUT_KEYS[type]
|
|
31
|
-
}: {
|
|
32
|
-
type: Mark
|
|
33
|
-
shortcutKeys?: string
|
|
34
|
-
}) {
|
|
35
|
-
return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
|
|
36
|
-
}
|
|
37
|
-
|
|
38
29
|
export function MarkButton({
|
|
39
30
|
editor: providedEditor,
|
|
40
31
|
availability,
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
|
|
3
|
+
import type { Mark } from '@admin/hooks/content-editor/use-mark'
|
|
4
|
+
import { Badge } from '@admin/components/ui/badge'
|
|
5
|
+
import { MARK_SHORTCUT_KEYS } from '@admin/hooks/content-editor/use-mark'
|
|
6
|
+
import { parseShortcutKeys } from '@admin/utils/editor/parse-shortcut-keys'
|
|
7
|
+
|
|
8
|
+
function MarkShortcutBadge({
|
|
9
|
+
type,
|
|
10
|
+
shortcutKeys = MARK_SHORTCUT_KEYS[type]
|
|
11
|
+
}: {
|
|
12
|
+
type: Mark
|
|
13
|
+
shortcutKeys?: string
|
|
14
|
+
}) {
|
|
15
|
+
return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export { MarkShortcutBadge }
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
|
|
3
|
+
import type { UndoRedoAction } from '@admin/hooks/content-editor/use-undo-redo'
|
|
4
|
+
import { Badge } from '@admin/components/ui/badge'
|
|
5
|
+
import { UNDO_REDO_SHORTCUT_KEYS } from '@admin/hooks/content-editor/use-undo-redo'
|
|
6
|
+
import { parseShortcutKeys } from '@admin/utils/editor/parse-shortcut-keys'
|
|
7
|
+
|
|
8
|
+
function HistoryShortcutBadge({
|
|
9
|
+
action,
|
|
10
|
+
shortcutKeys = UNDO_REDO_SHORTCUT_KEYS[action]
|
|
11
|
+
}: {
|
|
12
|
+
action: UndoRedoAction
|
|
13
|
+
shortcutKeys?: string
|
|
14
|
+
}) {
|
|
15
|
+
return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export { HistoryShortcutBadge }
|
|
@@ -1,23 +1,24 @@
|
|
|
1
1
|
'use client'
|
|
2
2
|
|
|
3
3
|
import type { ControlAvailability, ControlShortcut, ControlTooltip } from '../control-options'
|
|
4
|
-
import type {
|
|
5
|
-
import { Badge } from '@admin/components/ui/badge'
|
|
4
|
+
import type { UseUndoRedoConfig } from '@admin/hooks/content-editor/use-undo-redo'
|
|
6
5
|
import { Button } from '@admin/components/ui/button'
|
|
7
6
|
import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
|
|
8
|
-
import {
|
|
9
|
-
import { parseShortcutKeys } from '@admin/utils/editor/parse-shortcut-keys'
|
|
7
|
+
import { useUndoRedo } from '@admin/hooks/content-editor/use-undo-redo'
|
|
10
8
|
import { useCallback } from 'react'
|
|
11
9
|
import {
|
|
12
10
|
getControlTooltipTitle,
|
|
13
11
|
shouldHideUnavailableControl,
|
|
14
12
|
shouldShowControlShortcut
|
|
15
13
|
} from '../control-options'
|
|
14
|
+
import { HistoryShortcutBadge } from './history-shortcut-badge'
|
|
16
15
|
|
|
17
16
|
type EditorButtonProps = React.ComponentProps<typeof Button> & {
|
|
18
17
|
tooltip?: ControlTooltip
|
|
19
18
|
}
|
|
20
19
|
|
|
20
|
+
export { HistoryShortcutBadge } from './history-shortcut-badge'
|
|
21
|
+
|
|
21
22
|
export interface UndoRedoButtonProps
|
|
22
23
|
extends Omit<EditorButtonProps, 'type'>, Omit<UseUndoRedoConfig, 'hideWhenUnavailable'> {
|
|
23
24
|
availability?: ControlAvailability
|
|
@@ -25,16 +26,6 @@ export interface UndoRedoButtonProps
|
|
|
25
26
|
shortcut?: ControlShortcut
|
|
26
27
|
}
|
|
27
28
|
|
|
28
|
-
export function HistoryShortcutBadge({
|
|
29
|
-
action,
|
|
30
|
-
shortcutKeys = UNDO_REDO_SHORTCUT_KEYS[action]
|
|
31
|
-
}: {
|
|
32
|
-
action: UndoRedoAction
|
|
33
|
-
shortcutKeys?: string
|
|
34
|
-
}) {
|
|
35
|
-
return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
|
|
36
|
-
}
|
|
37
|
-
|
|
38
29
|
export function UndoRedoButton({
|
|
39
30
|
editor: providedEditor,
|
|
40
31
|
action,
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
|
|
3
|
+
import * as React from 'react'
|
|
4
|
+
import type { IconName } from 'lucide-react/dynamic'
|
|
5
|
+
import { DynamicIcon } from 'lucide-react/dynamic'
|
|
6
|
+
|
|
7
|
+
const MemoizedIcon = React.memo(({ name }: { name: IconName }) => <DynamicIcon name={name} />)
|
|
8
|
+
MemoizedIcon.displayName = 'MemoizedIcon'
|
|
9
|
+
|
|
10
|
+
export { MemoizedIcon }
|
|
@@ -19,6 +19,7 @@ import Fuse from 'fuse.js'
|
|
|
19
19
|
import { DynamicIcon, dynamicIconImports } from 'lucide-react/dynamic'
|
|
20
20
|
import { useCallback, useMemo, useState } from 'react'
|
|
21
21
|
import { useDebounceValue } from 'usehooks-ts'
|
|
22
|
+
import { MemoizedIcon } from './icon-picker/memoized-icon'
|
|
22
23
|
import { IconsColumnSkeleton } from './icons-column-skeleton'
|
|
23
24
|
import { iconsData } from './icons-data'
|
|
24
25
|
|
|
@@ -26,9 +27,6 @@ const DEFAULT_ICONS = iconsData.filter((icon: IconData) => {
|
|
|
26
27
|
return icon.name in dynamicIconImports
|
|
27
28
|
})
|
|
28
29
|
|
|
29
|
-
const MemoizedIcon = React.memo(({ name }: { name: IconName }) => <DynamicIcon name={name} />)
|
|
30
|
-
MemoizedIcon.displayName = 'MemoizedIcon'
|
|
31
|
-
|
|
32
30
|
interface IconPickerProps extends Omit<
|
|
33
31
|
React.ComponentPropsWithoutRef<typeof PopoverTrigger>,
|
|
34
32
|
'onSelect' | 'onOpenChange'
|