@djangocfg/ui-tools 2.1.241 → 2.1.243
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/README.md +2 -1
- package/dist/index.cjs +221 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +162 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +33 -1
- package/dist/index.d.ts +33 -1
- package/dist/index.mjs +218 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +18 -10
- package/src/tools/MarkdownEditor/MarkdownEditor.story.tsx +119 -0
- package/src/tools/MarkdownEditor/MarkdownEditor.tsx +174 -0
- package/src/tools/MarkdownEditor/MentionList.tsx +73 -0
- package/src/tools/MarkdownEditor/README.md +68 -0
- package/src/tools/MarkdownEditor/createMentionSuggestion.ts +81 -0
- package/src/tools/MarkdownEditor/index.ts +3 -0
- package/src/tools/MarkdownEditor/styles.css +191 -0
- package/src/tools/MarkdownEditor/types.ts +19 -0
- package/src/tools/index.ts +4 -0
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
.markdown-editor .markdown-editor-content {
|
|
2
|
+
outline: none;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.markdown-editor .tiptap h1 {
|
|
6
|
+
font-size: 1.5em;
|
|
7
|
+
font-weight: 700;
|
|
8
|
+
margin: 0.5em 0 0.25em;
|
|
9
|
+
line-height: 1.3;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.markdown-editor .tiptap h2 {
|
|
13
|
+
font-size: 1.25em;
|
|
14
|
+
font-weight: 600;
|
|
15
|
+
margin: 0.5em 0 0.25em;
|
|
16
|
+
line-height: 1.3;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.markdown-editor .tiptap h3 {
|
|
20
|
+
font-size: 1.1em;
|
|
21
|
+
font-weight: 600;
|
|
22
|
+
margin: 0.4em 0 0.2em;
|
|
23
|
+
line-height: 1.3;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.markdown-editor .tiptap p {
|
|
27
|
+
margin: 0.25em 0;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.markdown-editor .tiptap ul,
|
|
31
|
+
.markdown-editor .tiptap ol {
|
|
32
|
+
padding-left: 1.5em;
|
|
33
|
+
margin: 0.25em 0;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.markdown-editor .tiptap ul {
|
|
37
|
+
list-style: disc;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.markdown-editor .tiptap ol {
|
|
41
|
+
list-style: decimal;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.markdown-editor .tiptap li {
|
|
45
|
+
margin: 0.1em 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.markdown-editor .tiptap blockquote {
|
|
49
|
+
border-left: 3px solid var(--border, #333);
|
|
50
|
+
padding-left: 1em;
|
|
51
|
+
margin: 0.5em 0;
|
|
52
|
+
opacity: 0.8;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.markdown-editor .tiptap hr {
|
|
56
|
+
border: none;
|
|
57
|
+
border-top: 1px solid var(--border, #333);
|
|
58
|
+
margin: 0.75em 0;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.markdown-editor .tiptap code {
|
|
62
|
+
background: var(--muted, #222);
|
|
63
|
+
padding: 0.15em 0.3em;
|
|
64
|
+
border-radius: 0.25em;
|
|
65
|
+
font-size: 0.9em;
|
|
66
|
+
font-family: monospace;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.markdown-editor .tiptap strong {
|
|
70
|
+
font-weight: 700;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.markdown-editor .tiptap em {
|
|
74
|
+
font-style: italic;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.markdown-editor .tiptap s {
|
|
78
|
+
text-decoration: line-through;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.markdown-editor .tiptap p.is-editor-empty:first-child::before {
|
|
82
|
+
content: attr(data-placeholder);
|
|
83
|
+
float: left;
|
|
84
|
+
pointer-events: none;
|
|
85
|
+
height: 0;
|
|
86
|
+
opacity: 0.4;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* Focus ring */
|
|
90
|
+
.markdown-editor:focus-within {
|
|
91
|
+
border-color: var(--color-ring, hsl(var(--ring, 0 0% 60%)));
|
|
92
|
+
box-shadow: 0 0 0 2px var(--color-ring, hsl(var(--ring, 0 0% 60%) / 0.3));
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* Mention inline chip */
|
|
96
|
+
.markdown-mention {
|
|
97
|
+
background: var(--color-primary, hsl(var(--primary)));
|
|
98
|
+
color: var(--color-primary-foreground, #fff);
|
|
99
|
+
padding: 1px 6px;
|
|
100
|
+
border-radius: 4px;
|
|
101
|
+
font-size: 0.9em;
|
|
102
|
+
font-weight: 500;
|
|
103
|
+
cursor: default;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/* Mention dropdown */
|
|
107
|
+
.markdown-mention-list {
|
|
108
|
+
background: var(--color-popover, hsl(var(--popover, 0 0% 8%)));
|
|
109
|
+
color: var(--color-popover-foreground, hsl(var(--popover-foreground, 0 0% 98%)));
|
|
110
|
+
border: 1px solid var(--color-border, hsl(var(--border, 0 0% 15%)));
|
|
111
|
+
border-radius: 8px;
|
|
112
|
+
padding: 4px;
|
|
113
|
+
min-width: 220px;
|
|
114
|
+
max-height: 260px;
|
|
115
|
+
overflow-y: auto;
|
|
116
|
+
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.markdown-mention-item {
|
|
120
|
+
display: flex;
|
|
121
|
+
align-items: center;
|
|
122
|
+
gap: 8px;
|
|
123
|
+
width: 100%;
|
|
124
|
+
padding: 6px 8px;
|
|
125
|
+
border: none;
|
|
126
|
+
background: transparent;
|
|
127
|
+
border-radius: 4px;
|
|
128
|
+
cursor: pointer;
|
|
129
|
+
text-align: left;
|
|
130
|
+
font-size: 13px;
|
|
131
|
+
transition: background 0.1s;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.markdown-mention-item:hover,
|
|
135
|
+
.markdown-mention-item.selected {
|
|
136
|
+
background: var(--color-muted, hsl(var(--muted, 0 0% 15%)));
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.markdown-mention-avatar {
|
|
140
|
+
width: 24px;
|
|
141
|
+
height: 24px;
|
|
142
|
+
border-radius: 50%;
|
|
143
|
+
object-fit: cover;
|
|
144
|
+
flex-shrink: 0;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.markdown-mention-info {
|
|
148
|
+
display: flex;
|
|
149
|
+
flex-direction: column;
|
|
150
|
+
min-width: 0;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.markdown-mention-name {
|
|
154
|
+
font-weight: 500;
|
|
155
|
+
white-space: nowrap;
|
|
156
|
+
overflow: hidden;
|
|
157
|
+
text-overflow: ellipsis;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.markdown-mention-desc {
|
|
161
|
+
font-size: 11px;
|
|
162
|
+
opacity: 0.6;
|
|
163
|
+
white-space: nowrap;
|
|
164
|
+
overflow: hidden;
|
|
165
|
+
text-overflow: ellipsis;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
/* Toolbar buttons */
|
|
169
|
+
.markdown-toolbar-btn {
|
|
170
|
+
display: flex;
|
|
171
|
+
align-items: center;
|
|
172
|
+
justify-content: center;
|
|
173
|
+
width: 28px;
|
|
174
|
+
height: 28px;
|
|
175
|
+
border-radius: 4px;
|
|
176
|
+
border: none;
|
|
177
|
+
background: transparent;
|
|
178
|
+
cursor: pointer;
|
|
179
|
+
opacity: 0.5;
|
|
180
|
+
transition: opacity 0.15s, background 0.15s;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.markdown-toolbar-btn:hover {
|
|
184
|
+
opacity: 1;
|
|
185
|
+
background: var(--muted, #222);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.markdown-toolbar-btn.active {
|
|
189
|
+
opacity: 1;
|
|
190
|
+
background: var(--muted, #222);
|
|
191
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
|
|
3
|
+
/** Item that can be mentioned via @ trigger */
|
|
4
|
+
export interface MentionItem {
|
|
5
|
+
id: string;
|
|
6
|
+
label: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
thumbnail?: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/** Mention configuration */
|
|
12
|
+
export interface MentionConfig {
|
|
13
|
+
/** Trigger character (default: '@') */
|
|
14
|
+
trigger?: string;
|
|
15
|
+
/** Available items */
|
|
16
|
+
items: MentionItem[];
|
|
17
|
+
/** Max dropdown items (default: 5) */
|
|
18
|
+
maxItems?: number;
|
|
19
|
+
}
|
package/src/tools/index.ts
CHANGED
|
@@ -222,6 +222,10 @@ export type {
|
|
|
222
222
|
UseMonacoReturn,
|
|
223
223
|
} from './CodeEditor/types';
|
|
224
224
|
|
|
225
|
+
// Export MarkdownEditor (Tiptap ~200KB)
|
|
226
|
+
export { MarkdownEditor } from './MarkdownEditor';
|
|
227
|
+
export type { MarkdownEditorProps, MentionItem, MentionConfig } from './MarkdownEditor';
|
|
228
|
+
|
|
225
229
|
// Export Media Cache Store
|
|
226
230
|
export {
|
|
227
231
|
useMediaCacheStore,
|