@devalok/shilp-sutra 0.55.1 → 0.56.0
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/BREAKING.json +13 -0
- package/MIGRATION.md +56 -0
- package/README.md +16 -1
- package/dist/_chunks/badge-group.js +45 -45
- package/dist/_chunks/emoji-suggestion.js +32 -30
- package/dist/_chunks/emoji-suggestion.js.map +1 -1
- package/dist/_chunks/mention-suggestion.js +35 -34
- package/dist/_chunks/mention-suggestion.js.map +1 -1
- package/dist/_chunks/primitives-internal.js +437 -537
- package/dist/_chunks/primitives-internal.js.map +1 -1
- package/dist/composed/content-card.js +18 -18
- package/dist/composed/extensions/emoji-node.js +8 -7
- package/dist/composed/extensions/emoji-node.js.map +1 -1
- package/dist/composed/rich-chat-input.js +535 -526
- package/dist/composed/rich-chat-input.js.map +1 -1
- package/dist/composed/rich-text-editor.js +201 -193
- package/dist/composed/rich-text-editor.js.map +1 -1
- package/dist/ui/alert.js +29 -29
- package/dist/ui/avatar.js +42 -42
- package/dist/ui/banner.js +25 -25
- package/dist/ui/button.js +31 -31
- package/dist/ui/button.js.map +1 -1
- package/dist/ui/card.js +39 -39
- package/dist/ui/combobox.js +135 -135
- package/dist/ui/combobox.js.map +1 -1
- package/dist/ui/dot.js +13 -13
- package/dist/ui/input.js +25 -25
- package/dist/ui/lib/utils.js +2 -1
- package/dist/ui/lib/utils.js.map +1 -1
- package/dist/ui/number-input.js +36 -36
- package/dist/ui/progress.js +55 -55
- package/dist/ui/select.js +58 -58
- package/dist/ui/sheet.js +46 -46
- package/dist/ui/sidebar.js +128 -128
- package/dist/ui/sidebar.js.map +1 -1
- package/dist/ui/skeleton.js +39 -39
- package/dist/ui/slider.js +18 -18
- package/dist/ui/surface.js +9 -9
- package/dist/ui/tabs.js +47 -47
- package/dist/ui/text.js +8 -8
- package/dist/ui/textarea.js +12 -12
- package/dist/ui/toggle.js +12 -12
- package/docs/recipes/install-astro.md +2 -2
- package/docs/recipes/install-next-app-router.md +2 -2
- package/docs/recipes/install-remix.md +2 -2
- package/docs/recipes/install-tanstack-start.md +2 -2
- package/docs/recipes/install-vite.md +2 -2
- package/docs/recipes/troubleshoot.md +26 -5
- package/llms.txt +1 -1
- package/mcp-manifest.json +24 -3
- package/package.json +38 -11
- package/skill/SKILL.md +1 -1
- package/skill/references/components.md +1 -1
- package/skill/references/setup-astro.md +2 -2
- package/skill/references/setup-next-app-router.md +2 -2
- package/skill/references/setup-remix.md +2 -2
- package/skill/references/setup-tanstack-start.md +2 -2
- package/skill/references/setup-vite.md +2 -2
- package/skill/references/troubleshoot.md +26 -5
- package/dist/_chunks/tiptap.js +0 -18809
- package/dist/_chunks/tiptap.js.map +0 -1
- package/dist/_chunks/vendor-utils.js +0 -1766
- package/dist/_chunks/vendor-utils.js.map +0 -1
- package/scripts/welcome.mjs +0 -312
|
@@ -3,14 +3,22 @@ import { cn as e } from "../ui/lib/utils.js";
|
|
|
3
3
|
import { Icon as t } from "../ui/icon.js";
|
|
4
4
|
import { Button as n } from "../ui/button.js";
|
|
5
5
|
import { MENTION_TOKEN_CLASS as r } from "../_chunks/mention.js";
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import
|
|
6
|
+
import { EmojiNode as i } from "./extensions/emoji-node.js";
|
|
7
|
+
import { createEmojiSuggestion as a } from "../_chunks/emoji-suggestion.js";
|
|
8
|
+
import { FileAttachment as o, createSuggestionRenderer as s } from "../_chunks/mention-suggestion.js";
|
|
9
|
+
import * as c from "react";
|
|
10
|
+
import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
|
|
11
|
+
import { IconAlignCenter as f, IconAlignLeft as p, IconAlignRight as ee, IconArrowBackUp as m, IconArrowForwardUp as h, IconBlockquote as g, IconBold as _, IconCode as v, IconEye as y, IconH2 as b, IconH3 as x, IconHighlight as te, IconItalic as ne, IconLineDashed as re, IconLink as S, IconList as C, IconListCheck as w, IconListNumbers as T, IconMoodSmile as E, IconPaperclip as D, IconPhoto as O, IconStrikethrough as k, IconUnderline as A } from "@tabler/icons-react";
|
|
12
|
+
import { AnimatePresence as j, motion as M, useReducedMotion as N } from "framer-motion";
|
|
13
|
+
import P from "@tiptap/extension-highlight";
|
|
14
|
+
import F from "@tiptap/extension-image";
|
|
15
|
+
import I from "@tiptap/extension-mention";
|
|
16
|
+
import { Placeholder as ie } from "@tiptap/extensions";
|
|
17
|
+
import { EditorContent as L, useEditor as ae, useEditorState as R } from "@tiptap/react";
|
|
18
|
+
import oe from "@tiptap/starter-kit";
|
|
19
|
+
import { ListKit as z } from "@tiptap/extension-list";
|
|
20
|
+
import B from "@tiptap/extension-text-align";
|
|
21
|
+
import { Markdown as V } from "@tiptap/markdown";
|
|
14
22
|
//#region src/composed/rich-text-editor.tsx
|
|
15
23
|
var H = [
|
|
16
24
|
"prose prose-sm max-w-none",
|
|
@@ -32,7 +40,7 @@ var H = [
|
|
|
32
40
|
r
|
|
33
41
|
];
|
|
34
42
|
function U({ onClick: t, isActive: n = !1, disabled: r = !1, title: i, children: a }) {
|
|
35
|
-
return /* @__PURE__ */
|
|
43
|
+
return /* @__PURE__ */ u("button", {
|
|
36
44
|
type: "button",
|
|
37
45
|
onClick: t,
|
|
38
46
|
disabled: r,
|
|
@@ -44,34 +52,34 @@ function U({ onClick: t, isActive: n = !1, disabled: r = !1, title: i, children:
|
|
|
44
52
|
});
|
|
45
53
|
}
|
|
46
54
|
function W({ editor: e }) {
|
|
47
|
-
let [r, i] =
|
|
55
|
+
let [r, i] = c.useState(!1), [a, o] = c.useState(""), s = c.useRef(null), { isLink: l } = R({
|
|
48
56
|
editor: e,
|
|
49
57
|
selector: ({ editor: e }) => ({ isLink: e.isActive("link") })
|
|
50
58
|
});
|
|
51
|
-
return /* @__PURE__ */
|
|
59
|
+
return /* @__PURE__ */ d("div", {
|
|
52
60
|
className: "relative",
|
|
53
|
-
children: [/* @__PURE__ */
|
|
61
|
+
children: [/* @__PURE__ */ u(U, {
|
|
54
62
|
onClick: () => {
|
|
55
|
-
if (
|
|
63
|
+
if (l) {
|
|
56
64
|
e.chain().focus().unsetLink().run();
|
|
57
65
|
return;
|
|
58
66
|
}
|
|
59
67
|
let t = e.getAttributes("link").href || "";
|
|
60
68
|
o(t), i(!0), setTimeout(() => s.current?.focus(), 0);
|
|
61
69
|
},
|
|
62
|
-
isActive:
|
|
70
|
+
isActive: l,
|
|
63
71
|
title: "Link",
|
|
64
|
-
children: /* @__PURE__ */
|
|
65
|
-
icon:
|
|
72
|
+
children: /* @__PURE__ */ u(t, {
|
|
73
|
+
icon: S,
|
|
66
74
|
size: "sm"
|
|
67
75
|
})
|
|
68
|
-
}), r && /* @__PURE__ */
|
|
76
|
+
}), r && /* @__PURE__ */ d("form", {
|
|
69
77
|
onSubmit: (t) => {
|
|
70
78
|
t.preventDefault(), a.trim() && e.chain().focus().setLink({ href: a.trim() }).run(), i(!1), o("");
|
|
71
79
|
},
|
|
72
80
|
"aria-label": "Edit link URL",
|
|
73
81
|
className: "absolute left-0 top-full z-popover mt-ds-01 flex items-center gap-ds-02 rounded-control bg-surface-overlay p-ds-02 shadow-raised-hover",
|
|
74
|
-
children: [/* @__PURE__ */
|
|
82
|
+
children: [/* @__PURE__ */ u("input", {
|
|
75
83
|
ref: s,
|
|
76
84
|
type: "url",
|
|
77
85
|
value: a,
|
|
@@ -81,7 +89,7 @@ function W({ editor: e }) {
|
|
|
81
89
|
},
|
|
82
90
|
placeholder: "https://...",
|
|
83
91
|
className: "h-ds-sm w-[240px] rounded-control-inner border border-surface-border-strong bg-surface-overlay px-ds-03 text-body-sm text-surface-fg focus:border-accent-7 focus:outline-hidden"
|
|
84
|
-
}), /* @__PURE__ */
|
|
92
|
+
}), /* @__PURE__ */ u(n, {
|
|
85
93
|
type: "submit",
|
|
86
94
|
variant: "solid",
|
|
87
95
|
size: "sm",
|
|
@@ -91,10 +99,10 @@ function W({ editor: e }) {
|
|
|
91
99
|
});
|
|
92
100
|
}
|
|
93
101
|
function G() {
|
|
94
|
-
return /* @__PURE__ */
|
|
102
|
+
return /* @__PURE__ */ u("div", { className: "mx-ds-02 h-ds-05 w-px bg-surface-border" });
|
|
95
103
|
}
|
|
96
104
|
function K({ editor: e, toolbar: n, onImageClick: r, onFileClick: i, onEmojiClick: a, trailing: o, showControls: s = !0 }) {
|
|
97
|
-
let c =
|
|
105
|
+
let c = R({
|
|
98
106
|
editor: e,
|
|
99
107
|
selector: ({ editor: e }) => ({
|
|
100
108
|
isBold: e.isActive("bold"),
|
|
@@ -116,248 +124,248 @@ function K({ editor: e, toolbar: n, onImageClick: r, onFileClick: i, onEmojiClic
|
|
|
116
124
|
canUndo: e.can().undo(),
|
|
117
125
|
canRedo: e.can().redo()
|
|
118
126
|
})
|
|
119
|
-
}),
|
|
120
|
-
return /* @__PURE__ */
|
|
127
|
+
}), y = (e) => !n || n.includes(e), S = y("bold") || y("italic") || y("underline") || y("strike") || y("highlight"), j = y("h2") || y("h3") || y("blockquote"), M = y("bulletList") || y("orderedList") || y("taskList") || y("codeBlock"), N = y("link") || !!r && y("image") || !!i && y("file") || y("hr"), P = y("alignLeft") || y("alignCenter") || y("alignRight"), F = !!a && y("emoji"), I = y("undo") || y("redo");
|
|
128
|
+
return /* @__PURE__ */ d("div", {
|
|
121
129
|
role: "toolbar",
|
|
122
130
|
"aria-label": "Text formatting",
|
|
123
131
|
className: "flex min-h-[2.75rem] flex-wrap items-center gap-ds-01 border-b border-surface-border-strong px-ds-04 py-ds-02b",
|
|
124
|
-
children: [s && /* @__PURE__ */
|
|
125
|
-
|
|
132
|
+
children: [s && /* @__PURE__ */ d(l, { children: [
|
|
133
|
+
y("bold") && /* @__PURE__ */ u(U, {
|
|
126
134
|
onClick: () => e.chain().focus().toggleBold().run(),
|
|
127
135
|
isActive: c.isBold,
|
|
128
136
|
title: "Bold",
|
|
129
|
-
children: /* @__PURE__ */
|
|
130
|
-
icon:
|
|
137
|
+
children: /* @__PURE__ */ u(t, {
|
|
138
|
+
icon: _,
|
|
131
139
|
size: "sm",
|
|
132
140
|
stroke: "bold"
|
|
133
141
|
})
|
|
134
142
|
}),
|
|
135
|
-
|
|
143
|
+
y("italic") && /* @__PURE__ */ u(U, {
|
|
136
144
|
onClick: () => e.chain().focus().toggleItalic().run(),
|
|
137
145
|
isActive: c.isItalic,
|
|
138
146
|
title: "Italic",
|
|
139
|
-
children: /* @__PURE__ */
|
|
140
|
-
icon:
|
|
147
|
+
children: /* @__PURE__ */ u(t, {
|
|
148
|
+
icon: ne,
|
|
141
149
|
size: "sm",
|
|
142
150
|
stroke: "bold"
|
|
143
151
|
})
|
|
144
152
|
}),
|
|
145
|
-
|
|
153
|
+
y("underline") && /* @__PURE__ */ u(U, {
|
|
146
154
|
onClick: () => e.chain().focus().toggleUnderline().run(),
|
|
147
155
|
isActive: c.isUnderline,
|
|
148
156
|
title: "Underline",
|
|
149
|
-
children: /* @__PURE__ */
|
|
150
|
-
icon:
|
|
157
|
+
children: /* @__PURE__ */ u(t, {
|
|
158
|
+
icon: A,
|
|
151
159
|
size: "sm",
|
|
152
160
|
stroke: "bold"
|
|
153
161
|
})
|
|
154
162
|
}),
|
|
155
|
-
|
|
163
|
+
y("strike") && /* @__PURE__ */ u(U, {
|
|
156
164
|
onClick: () => e.chain().focus().toggleStrike().run(),
|
|
157
165
|
isActive: c.isStrike,
|
|
158
166
|
title: "Strikethrough",
|
|
159
|
-
children: /* @__PURE__ */
|
|
160
|
-
icon:
|
|
167
|
+
children: /* @__PURE__ */ u(t, {
|
|
168
|
+
icon: k,
|
|
161
169
|
size: "sm",
|
|
162
170
|
stroke: "bold"
|
|
163
171
|
})
|
|
164
172
|
}),
|
|
165
|
-
|
|
173
|
+
y("highlight") && /* @__PURE__ */ u(U, {
|
|
166
174
|
onClick: () => e.chain().focus().toggleHighlight().run(),
|
|
167
175
|
isActive: c.isHighlight,
|
|
168
176
|
title: "Highlight",
|
|
169
|
-
children: /* @__PURE__ */
|
|
170
|
-
icon:
|
|
177
|
+
children: /* @__PURE__ */ u(t, {
|
|
178
|
+
icon: te,
|
|
171
179
|
size: "sm",
|
|
172
180
|
stroke: "bold"
|
|
173
181
|
})
|
|
174
182
|
}),
|
|
175
|
-
|
|
176
|
-
|
|
183
|
+
S && j && /* @__PURE__ */ u(G, {}),
|
|
184
|
+
y("h2") && /* @__PURE__ */ u(U, {
|
|
177
185
|
onClick: () => e.chain().focus().toggleHeading({ level: 2 }).run(),
|
|
178
186
|
isActive: c.isH2,
|
|
179
187
|
title: "Heading 2",
|
|
180
|
-
children: /* @__PURE__ */
|
|
181
|
-
icon:
|
|
188
|
+
children: /* @__PURE__ */ u(t, {
|
|
189
|
+
icon: b,
|
|
182
190
|
size: "sm",
|
|
183
191
|
stroke: "bold"
|
|
184
192
|
})
|
|
185
193
|
}),
|
|
186
|
-
|
|
194
|
+
y("h3") && /* @__PURE__ */ u(U, {
|
|
187
195
|
onClick: () => e.chain().focus().toggleHeading({ level: 3 }).run(),
|
|
188
196
|
isActive: c.isH3,
|
|
189
197
|
title: "Heading 3",
|
|
190
|
-
children: /* @__PURE__ */
|
|
191
|
-
icon:
|
|
198
|
+
children: /* @__PURE__ */ u(t, {
|
|
199
|
+
icon: x,
|
|
192
200
|
size: "sm",
|
|
193
201
|
stroke: "bold"
|
|
194
202
|
})
|
|
195
203
|
}),
|
|
196
|
-
|
|
204
|
+
y("blockquote") && /* @__PURE__ */ u(U, {
|
|
197
205
|
onClick: () => e.chain().focus().toggleBlockquote().run(),
|
|
198
206
|
isActive: c.isBlockquote,
|
|
199
207
|
title: "Blockquote",
|
|
200
|
-
children: /* @__PURE__ */
|
|
201
|
-
icon:
|
|
208
|
+
children: /* @__PURE__ */ u(t, {
|
|
209
|
+
icon: g,
|
|
202
210
|
size: "sm",
|
|
203
211
|
stroke: "bold"
|
|
204
212
|
})
|
|
205
213
|
}),
|
|
206
|
-
|
|
207
|
-
|
|
214
|
+
j && M && /* @__PURE__ */ u(G, {}),
|
|
215
|
+
y("bulletList") && /* @__PURE__ */ u(U, {
|
|
208
216
|
onClick: () => e.chain().focus().toggleBulletList().run(),
|
|
209
217
|
isActive: c.isBulletList,
|
|
210
218
|
title: "Bullet list",
|
|
211
|
-
children: /* @__PURE__ */
|
|
212
|
-
icon:
|
|
219
|
+
children: /* @__PURE__ */ u(t, {
|
|
220
|
+
icon: C,
|
|
213
221
|
size: "sm",
|
|
214
222
|
stroke: "bold"
|
|
215
223
|
})
|
|
216
224
|
}),
|
|
217
|
-
|
|
225
|
+
y("orderedList") && /* @__PURE__ */ u(U, {
|
|
218
226
|
onClick: () => e.chain().focus().toggleOrderedList().run(),
|
|
219
227
|
isActive: c.isOrderedList,
|
|
220
228
|
title: "Ordered list",
|
|
221
|
-
children: /* @__PURE__ */
|
|
222
|
-
icon:
|
|
229
|
+
children: /* @__PURE__ */ u(t, {
|
|
230
|
+
icon: T,
|
|
223
231
|
size: "sm",
|
|
224
232
|
stroke: "bold"
|
|
225
233
|
})
|
|
226
234
|
}),
|
|
227
|
-
|
|
235
|
+
y("taskList") && /* @__PURE__ */ u(U, {
|
|
228
236
|
onClick: () => e.chain().focus().toggleTaskList().run(),
|
|
229
237
|
isActive: c.isTaskList,
|
|
230
238
|
title: "Task list",
|
|
231
|
-
children: /* @__PURE__ */
|
|
232
|
-
icon:
|
|
239
|
+
children: /* @__PURE__ */ u(t, {
|
|
240
|
+
icon: w,
|
|
233
241
|
size: "sm",
|
|
234
242
|
stroke: "bold"
|
|
235
243
|
})
|
|
236
244
|
}),
|
|
237
|
-
|
|
245
|
+
y("codeBlock") && /* @__PURE__ */ u(U, {
|
|
238
246
|
onClick: () => e.chain().focus().toggleCodeBlock().run(),
|
|
239
247
|
isActive: c.isCodeBlock,
|
|
240
248
|
title: "Code block",
|
|
241
|
-
children: /* @__PURE__ */
|
|
242
|
-
icon:
|
|
249
|
+
children: /* @__PURE__ */ u(t, {
|
|
250
|
+
icon: v,
|
|
243
251
|
size: "sm",
|
|
244
252
|
stroke: "bold"
|
|
245
253
|
})
|
|
246
254
|
}),
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
r &&
|
|
255
|
+
M && N && /* @__PURE__ */ u(G, {}),
|
|
256
|
+
y("link") && /* @__PURE__ */ u(W, { editor: e }),
|
|
257
|
+
r && y("image") && /* @__PURE__ */ u(U, {
|
|
250
258
|
onClick: r,
|
|
251
259
|
title: "Insert image",
|
|
252
|
-
children: /* @__PURE__ */
|
|
253
|
-
icon:
|
|
260
|
+
children: /* @__PURE__ */ u(t, {
|
|
261
|
+
icon: O,
|
|
254
262
|
size: "sm"
|
|
255
263
|
})
|
|
256
264
|
}),
|
|
257
|
-
i &&
|
|
265
|
+
i && y("file") && /* @__PURE__ */ u(U, {
|
|
258
266
|
onClick: i,
|
|
259
267
|
title: "Attach file",
|
|
260
|
-
children: /* @__PURE__ */
|
|
261
|
-
icon:
|
|
268
|
+
children: /* @__PURE__ */ u(t, {
|
|
269
|
+
icon: D,
|
|
262
270
|
size: "sm"
|
|
263
271
|
})
|
|
264
272
|
}),
|
|
265
|
-
|
|
273
|
+
y("hr") && /* @__PURE__ */ u(U, {
|
|
266
274
|
onClick: () => e.chain().focus().setHorizontalRule().run(),
|
|
267
275
|
title: "Horizontal rule",
|
|
268
|
-
children: /* @__PURE__ */
|
|
269
|
-
icon:
|
|
276
|
+
children: /* @__PURE__ */ u(t, {
|
|
277
|
+
icon: re,
|
|
270
278
|
size: "sm"
|
|
271
279
|
})
|
|
272
280
|
}),
|
|
273
|
-
|
|
274
|
-
|
|
281
|
+
N && P && /* @__PURE__ */ u(G, {}),
|
|
282
|
+
y("alignLeft") && /* @__PURE__ */ u(U, {
|
|
275
283
|
onClick: () => e.chain().focus().setTextAlign("left").run(),
|
|
276
284
|
isActive: c.isAlignLeft,
|
|
277
285
|
title: "Align left",
|
|
278
|
-
children: /* @__PURE__ */
|
|
279
|
-
icon:
|
|
286
|
+
children: /* @__PURE__ */ u(t, {
|
|
287
|
+
icon: p,
|
|
280
288
|
size: "sm"
|
|
281
289
|
})
|
|
282
290
|
}),
|
|
283
|
-
|
|
291
|
+
y("alignCenter") && /* @__PURE__ */ u(U, {
|
|
284
292
|
onClick: () => e.chain().focus().setTextAlign("center").run(),
|
|
285
293
|
isActive: c.isAlignCenter,
|
|
286
294
|
title: "Align center",
|
|
287
|
-
children: /* @__PURE__ */
|
|
288
|
-
icon:
|
|
295
|
+
children: /* @__PURE__ */ u(t, {
|
|
296
|
+
icon: f,
|
|
289
297
|
size: "sm"
|
|
290
298
|
})
|
|
291
299
|
}),
|
|
292
|
-
|
|
300
|
+
y("alignRight") && /* @__PURE__ */ u(U, {
|
|
293
301
|
onClick: () => e.chain().focus().setTextAlign("right").run(),
|
|
294
302
|
isActive: c.isAlignRight,
|
|
295
303
|
title: "Align right",
|
|
296
|
-
children: /* @__PURE__ */
|
|
297
|
-
icon:
|
|
304
|
+
children: /* @__PURE__ */ u(t, {
|
|
305
|
+
icon: ee,
|
|
298
306
|
size: "sm"
|
|
299
307
|
})
|
|
300
308
|
}),
|
|
301
|
-
|
|
302
|
-
a &&
|
|
309
|
+
P && (F || I) && /* @__PURE__ */ u(G, {}),
|
|
310
|
+
a && y("emoji") && /* @__PURE__ */ u(U, {
|
|
303
311
|
onClick: a,
|
|
304
312
|
title: "Emoji",
|
|
305
|
-
children: /* @__PURE__ */
|
|
306
|
-
icon:
|
|
313
|
+
children: /* @__PURE__ */ u(t, {
|
|
314
|
+
icon: E,
|
|
307
315
|
size: "sm"
|
|
308
316
|
})
|
|
309
317
|
}),
|
|
310
|
-
|
|
318
|
+
y("undo") && /* @__PURE__ */ u(U, {
|
|
311
319
|
onClick: () => e.chain().focus().undo().run(),
|
|
312
320
|
disabled: !c.canUndo,
|
|
313
321
|
title: "Undo",
|
|
314
|
-
children: /* @__PURE__ */
|
|
315
|
-
icon:
|
|
322
|
+
children: /* @__PURE__ */ u(t, {
|
|
323
|
+
icon: m,
|
|
316
324
|
size: "sm"
|
|
317
325
|
})
|
|
318
326
|
}),
|
|
319
|
-
|
|
327
|
+
y("redo") && /* @__PURE__ */ u(U, {
|
|
320
328
|
onClick: () => e.chain().focus().redo().run(),
|
|
321
329
|
disabled: !c.canRedo,
|
|
322
330
|
title: "Redo",
|
|
323
|
-
children: /* @__PURE__ */
|
|
324
|
-
icon:
|
|
331
|
+
children: /* @__PURE__ */ u(t, {
|
|
332
|
+
icon: h,
|
|
325
333
|
size: "sm"
|
|
326
334
|
})
|
|
327
335
|
})
|
|
328
|
-
] }), o && /* @__PURE__ */
|
|
336
|
+
] }), o && /* @__PURE__ */ u("div", {
|
|
329
337
|
className: "ml-auto flex items-center pl-ds-02",
|
|
330
338
|
children: o
|
|
331
339
|
})]
|
|
332
340
|
});
|
|
333
341
|
}
|
|
334
|
-
var q =
|
|
342
|
+
var q = c.lazy(() => import("./emoji-picker.js").then((e) => ({ default: e.EmojiPicker })));
|
|
335
343
|
function se({ onSelect: e }) {
|
|
336
|
-
let t = /* @__PURE__ */
|
|
344
|
+
let t = /* @__PURE__ */ u("div", {
|
|
337
345
|
className: "flex h-[435px] w-[352px] items-center justify-center rounded-surface bg-surface-overlay shadow-raised-hover",
|
|
338
|
-
children: /* @__PURE__ */
|
|
346
|
+
children: /* @__PURE__ */ u("span", {
|
|
339
347
|
className: "text-body-sm text-surface-fg-subtle",
|
|
340
348
|
children: "Loading…"
|
|
341
349
|
})
|
|
342
350
|
});
|
|
343
|
-
return /* @__PURE__ */
|
|
351
|
+
return /* @__PURE__ */ u(c.Suspense, {
|
|
344
352
|
fallback: t,
|
|
345
|
-
children: /* @__PURE__ */
|
|
353
|
+
children: /* @__PURE__ */ u(q, { onSelect: e })
|
|
346
354
|
});
|
|
347
355
|
}
|
|
348
|
-
var J =
|
|
356
|
+
var J = c.createContext(null);
|
|
349
357
|
function Y() {
|
|
350
|
-
let e =
|
|
358
|
+
let e = c.useContext(J);
|
|
351
359
|
if (!e) throw Error("RichTextEditor.Toolbar / .Content must be used within <RichTextEditor.Provider>");
|
|
352
360
|
return e;
|
|
353
361
|
}
|
|
354
|
-
var X =
|
|
355
|
-
let
|
|
356
|
-
|
|
357
|
-
}, [
|
|
358
|
-
let t =
|
|
359
|
-
if (t) if (
|
|
360
|
-
let n = await
|
|
362
|
+
var X = c.forwardRef(function({ format: t = "html", content: n = "", placeholder: r = "Start writing...", onChange: l, className: f, editable: p = !0, toolbar: ee, onImageUpload: m, onFileUpload: h, mentions: g, onMentionSearch: _, onMentionSelect: v, sourceMode: y, defaultSourceMode: b = !1, onSourceModeChange: x, emojiSet: te = "native", sourceToggle: ne, children: re, ...S }, C) {
|
|
363
|
+
let w = c.useRef(null), T = c.useRef(!1), E = N(), [D, O] = c.useState(!1), [k, A] = c.useState(b), L = y ?? k, R = c.useCallback((e) => {
|
|
364
|
+
y === void 0 && A(e), x?.(e);
|
|
365
|
+
}, [y, x]), [U, W] = c.useState(""), G = c.useRef(null), K = c.useRef(null), q = c.useRef(null), Y = async (e) => {
|
|
366
|
+
let t = w.current;
|
|
367
|
+
if (t) if (m) {
|
|
368
|
+
let n = await m(e);
|
|
361
369
|
n && /^https?:\/\//i.test(n) && t.chain().focus().setImage({ src: n }).run();
|
|
362
370
|
} else {
|
|
363
371
|
let n = new FileReader();
|
|
@@ -366,9 +374,9 @@ var X = v.forwardRef(function({ format: t = "html", content: n = "", placeholder
|
|
|
366
374
|
}, n.readAsDataURL(e);
|
|
367
375
|
}
|
|
368
376
|
}, X = async (e) => {
|
|
369
|
-
let t =
|
|
370
|
-
if (!t || !
|
|
371
|
-
let n = await
|
|
377
|
+
let t = w.current;
|
|
378
|
+
if (!t || !h) return;
|
|
379
|
+
let n = await h(e);
|
|
372
380
|
t.chain().focus().insertContent({
|
|
373
381
|
type: "fileAttachment",
|
|
374
382
|
attrs: {
|
|
@@ -377,10 +385,10 @@ var X = v.forwardRef(function({ format: t = "html", content: n = "", placeholder
|
|
|
377
385
|
size: n.size
|
|
378
386
|
}
|
|
379
387
|
}).run();
|
|
380
|
-
}, Z =
|
|
388
|
+
}, Z = ae({
|
|
381
389
|
immediatelyRender: !1,
|
|
382
390
|
extensions: [
|
|
383
|
-
|
|
391
|
+
oe.configure({
|
|
384
392
|
heading: { levels: [2, 3] },
|
|
385
393
|
link: {
|
|
386
394
|
openOnClick: !1,
|
|
@@ -396,12 +404,12 @@ var X = v.forwardRef(function({ format: t = "html", content: n = "", placeholder
|
|
|
396
404
|
}
|
|
397
405
|
}
|
|
398
406
|
}),
|
|
399
|
-
|
|
407
|
+
ie.configure({
|
|
400
408
|
placeholder: r,
|
|
401
409
|
emptyEditorClass: "before:content-[attr(data-placeholder)] before:text-surface-fg-subtle before:float-left before:h-0 before:pointer-events-none"
|
|
402
410
|
}),
|
|
403
|
-
|
|
404
|
-
|
|
411
|
+
P.configure({ multicolor: !1 }),
|
|
412
|
+
z.configure({
|
|
405
413
|
bulletList: !1,
|
|
406
414
|
orderedList: !1,
|
|
407
415
|
listItem: !1,
|
|
@@ -409,54 +417,54 @@ var X = v.forwardRef(function({ format: t = "html", content: n = "", placeholder
|
|
|
409
417
|
taskList: {},
|
|
410
418
|
taskItem: { nested: !0 }
|
|
411
419
|
}),
|
|
412
|
-
|
|
413
|
-
|
|
420
|
+
B.configure({ types: ["heading", "paragraph"] }),
|
|
421
|
+
F.configure({
|
|
414
422
|
allowBase64: !0,
|
|
415
423
|
HTMLAttributes: { class: "max-w-full rounded-control" }
|
|
416
424
|
}),
|
|
417
|
-
|
|
418
|
-
...
|
|
425
|
+
o,
|
|
426
|
+
...g || _ ? [I.configure({
|
|
419
427
|
HTMLAttributes: { class: "mention" },
|
|
420
428
|
suggestion: {
|
|
421
|
-
items: async ({ query: e }) =>
|
|
422
|
-
render:
|
|
429
|
+
items: async ({ query: e }) => _ ? await _(e) : g ? g.filter((t) => t.label.toLowerCase().includes(e.toLowerCase())).slice(0, 8) : [],
|
|
430
|
+
render: s(v)
|
|
423
431
|
}
|
|
424
432
|
})] : [],
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
433
|
+
i,
|
|
434
|
+
a(),
|
|
435
|
+
V
|
|
428
436
|
],
|
|
429
437
|
content: n,
|
|
430
438
|
contentType: t === "markdown" ? "markdown" : void 0,
|
|
431
|
-
editable:
|
|
439
|
+
editable: p,
|
|
432
440
|
editorProps: {
|
|
433
441
|
handleDrop: (e, t, n, r) => {
|
|
434
442
|
if (r || !t.dataTransfer?.files.length) return !1;
|
|
435
443
|
let i = t.dataTransfer.files[0];
|
|
436
|
-
return i ? i.type.startsWith("image/") ? (Y(i), !0) :
|
|
444
|
+
return i ? i.type.startsWith("image/") ? (Y(i), !0) : h ? (X(i), !0) : !1 : !1;
|
|
437
445
|
},
|
|
438
446
|
handlePaste: (e, t) => {
|
|
439
447
|
let n = t.clipboardData?.files[0];
|
|
440
|
-
return n ? n.type.startsWith("image/") ? (Y(n), !0) :
|
|
448
|
+
return n ? n.type.startsWith("image/") ? (Y(n), !0) : h ? (X(n), !0) : !1 : !1;
|
|
441
449
|
},
|
|
442
450
|
attributes: { class: e(...H, "focus:outline-hidden", "min-h-[120px] px-ds-04 py-ds-04") }
|
|
443
451
|
},
|
|
444
452
|
onUpdate: ({ editor: e }) => {
|
|
445
|
-
|
|
446
|
-
|
|
453
|
+
T.current = !0, l?.(t === "markdown" ? e.getMarkdown() : e.getHTML()), queueMicrotask(() => {
|
|
454
|
+
T.current = !1;
|
|
447
455
|
});
|
|
448
456
|
}
|
|
449
457
|
});
|
|
450
|
-
if (
|
|
451
|
-
|
|
452
|
-
}, [Z]),
|
|
453
|
-
if (!
|
|
458
|
+
if (c.useEffect(() => {
|
|
459
|
+
w.current = Z;
|
|
460
|
+
}, [Z]), c.useEffect(() => {
|
|
461
|
+
if (!D) return;
|
|
454
462
|
let e = (e) => {
|
|
455
|
-
G.current && !G.current.contains(e.target) &&
|
|
463
|
+
G.current && !G.current.contains(e.target) && O(!1);
|
|
456
464
|
};
|
|
457
465
|
return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
|
|
458
|
-
}, [
|
|
459
|
-
|
|
466
|
+
}, [D]), c.useEffect(() => {
|
|
467
|
+
T.current || Z && n !== (t === "markdown" ? Z.getMarkdown() : Z.getHTML()) && Z.commands.setContent(n, {
|
|
460
468
|
emitUpdate: !1,
|
|
461
469
|
contentType: t === "markdown" ? "markdown" : void 0
|
|
462
470
|
});
|
|
@@ -464,34 +472,34 @@ var X = v.forwardRef(function({ format: t = "html", content: n = "", placeholder
|
|
|
464
472
|
Z,
|
|
465
473
|
n,
|
|
466
474
|
t
|
|
467
|
-
]),
|
|
468
|
-
|
|
469
|
-
}, [
|
|
475
|
+
]), c.useEffect(() => {
|
|
476
|
+
L && Z && W(Z.getMarkdown());
|
|
477
|
+
}, [L]), !Z) return null;
|
|
470
478
|
let Q = {
|
|
471
479
|
editor: Z,
|
|
472
|
-
toolbar:
|
|
473
|
-
editable:
|
|
480
|
+
toolbar: ee,
|
|
481
|
+
editable: p,
|
|
474
482
|
onImageClick: () => K.current?.click(),
|
|
475
|
-
onFileClick:
|
|
476
|
-
onEmojiClick: () =>
|
|
477
|
-
sourceMode:
|
|
478
|
-
setSourceMode:
|
|
479
|
-
toggleSource: () =>
|
|
483
|
+
onFileClick: h ? () => q.current?.click() : void 0,
|
|
484
|
+
onEmojiClick: () => O((e) => !e),
|
|
485
|
+
sourceMode: L,
|
|
486
|
+
setSourceMode: R,
|
|
487
|
+
toggleSource: () => R(!L),
|
|
480
488
|
sourceText: U,
|
|
481
489
|
onSourceChange: (e) => {
|
|
482
490
|
W(e), Z.commands.setContent(e, { contentType: "markdown" });
|
|
483
491
|
}
|
|
484
492
|
};
|
|
485
|
-
return /* @__PURE__ */
|
|
493
|
+
return /* @__PURE__ */ u(J.Provider, {
|
|
486
494
|
value: Q,
|
|
487
|
-
children: /* @__PURE__ */
|
|
488
|
-
ref:
|
|
489
|
-
...
|
|
490
|
-
className: e("relative",
|
|
495
|
+
children: /* @__PURE__ */ d("div", {
|
|
496
|
+
ref: C,
|
|
497
|
+
...S,
|
|
498
|
+
className: e("relative", f),
|
|
491
499
|
children: [
|
|
492
|
-
/* @__PURE__ */
|
|
500
|
+
/* @__PURE__ */ u(j, { children: D && /* @__PURE__ */ u(M.div, {
|
|
493
501
|
ref: G,
|
|
494
|
-
initial: !
|
|
502
|
+
initial: !E && {
|
|
495
503
|
opacity: 0,
|
|
496
504
|
scale: .96,
|
|
497
505
|
y: 4
|
|
@@ -501,7 +509,7 @@ var X = v.forwardRef(function({ format: t = "html", content: n = "", placeholder
|
|
|
501
509
|
scale: 1,
|
|
502
510
|
y: 0
|
|
503
511
|
},
|
|
504
|
-
exit:
|
|
512
|
+
exit: E ? { opacity: 0 } : {
|
|
505
513
|
opacity: 0,
|
|
506
514
|
scale: .96,
|
|
507
515
|
y: 4
|
|
@@ -512,19 +520,19 @@ var X = v.forwardRef(function({ format: t = "html", content: n = "", placeholder
|
|
|
512
520
|
},
|
|
513
521
|
className: "absolute bottom-full right-0 z-popover mb-ds-02 origin-bottom-right",
|
|
514
522
|
onKeyDown: (e) => {
|
|
515
|
-
e.key === "Escape" && (e.stopPropagation(),
|
|
523
|
+
e.key === "Escape" && (e.stopPropagation(), O(!1));
|
|
516
524
|
},
|
|
517
|
-
children: /* @__PURE__ */
|
|
525
|
+
children: /* @__PURE__ */ u(se, { onSelect: ({ id: e, native: t }) => {
|
|
518
526
|
Z.chain().focus().insertContent({
|
|
519
527
|
type: "emojiNode",
|
|
520
528
|
attrs: {
|
|
521
529
|
id: e,
|
|
522
530
|
native: t
|
|
523
531
|
}
|
|
524
|
-
}).run(),
|
|
532
|
+
}).run(), O(!1);
|
|
525
533
|
} })
|
|
526
534
|
}, "emoji-picker") }),
|
|
527
|
-
/* @__PURE__ */
|
|
535
|
+
/* @__PURE__ */ u("input", {
|
|
528
536
|
ref: K,
|
|
529
537
|
type: "file",
|
|
530
538
|
accept: "image/*",
|
|
@@ -535,7 +543,7 @@ var X = v.forwardRef(function({ format: t = "html", content: n = "", placeholder
|
|
|
535
543
|
t && Y(t), e.target.value = "";
|
|
536
544
|
}
|
|
537
545
|
}),
|
|
538
|
-
|
|
546
|
+
h && /* @__PURE__ */ u("input", {
|
|
539
547
|
ref: q,
|
|
540
548
|
type: "file",
|
|
541
549
|
"aria-label": "Upload file",
|
|
@@ -555,7 +563,7 @@ function Z({ trailing: e }) {
|
|
|
555
563
|
let { editor: t, toolbar: n, editable: r, sourceMode: i, onImageClick: a, onFileClick: o, onEmojiClick: s } = Y();
|
|
556
564
|
if (!r) return null;
|
|
557
565
|
let c = !i;
|
|
558
|
-
return !c && !e ? null : /* @__PURE__ */
|
|
566
|
+
return !c && !e ? null : /* @__PURE__ */ u(K, {
|
|
559
567
|
editor: t,
|
|
560
568
|
toolbar: n,
|
|
561
569
|
showControls: c,
|
|
@@ -567,50 +575,50 @@ function Z({ trailing: e }) {
|
|
|
567
575
|
}
|
|
568
576
|
Z.displayName = "RichTextEditor.Toolbar";
|
|
569
577
|
function Q() {
|
|
570
|
-
let { editor: e, sourceMode: t, sourceText: n, onSourceChange: r } = Y(),
|
|
578
|
+
let { editor: e, sourceMode: t, sourceText: n, onSourceChange: r } = Y(), i = N() ? { opacity: 0 } : {
|
|
571
579
|
opacity: 0,
|
|
572
580
|
y: 4
|
|
573
581
|
};
|
|
574
|
-
return /* @__PURE__ */
|
|
582
|
+
return /* @__PURE__ */ u(j, {
|
|
575
583
|
mode: "wait",
|
|
576
584
|
initial: !1,
|
|
577
|
-
children: t ? /* @__PURE__ */
|
|
578
|
-
initial:
|
|
585
|
+
children: t ? /* @__PURE__ */ u(M.div, {
|
|
586
|
+
initial: i,
|
|
579
587
|
animate: {
|
|
580
588
|
opacity: 1,
|
|
581
589
|
y: 0
|
|
582
590
|
},
|
|
583
|
-
exit:
|
|
591
|
+
exit: i,
|
|
584
592
|
transition: {
|
|
585
593
|
duration: .14,
|
|
586
594
|
ease: "easeOut"
|
|
587
595
|
},
|
|
588
|
-
children: /* @__PURE__ */
|
|
596
|
+
children: /* @__PURE__ */ u("textarea", {
|
|
589
597
|
value: n,
|
|
590
598
|
onChange: (e) => r(e.target.value),
|
|
591
599
|
spellCheck: !1,
|
|
592
600
|
"aria-label": "Markdown source",
|
|
593
601
|
className: "block min-h-[120px] w-full resize-y bg-surface-raised px-ds-04 py-ds-04 font-mono text-body-sm leading-ds-relaxed text-surface-fg focus:outline-hidden"
|
|
594
602
|
})
|
|
595
|
-
}, "source") : /* @__PURE__ */
|
|
596
|
-
initial:
|
|
603
|
+
}, "source") : /* @__PURE__ */ u(M.div, {
|
|
604
|
+
initial: i,
|
|
597
605
|
animate: {
|
|
598
606
|
opacity: 1,
|
|
599
607
|
y: 0
|
|
600
608
|
},
|
|
601
|
-
exit:
|
|
609
|
+
exit: i,
|
|
602
610
|
transition: {
|
|
603
611
|
duration: .14,
|
|
604
612
|
ease: "easeOut"
|
|
605
613
|
},
|
|
606
|
-
children: /* @__PURE__ */
|
|
614
|
+
children: /* @__PURE__ */ u(L, { editor: e })
|
|
607
615
|
}, "visual")
|
|
608
616
|
});
|
|
609
617
|
}
|
|
610
618
|
Q.displayName = "RichTextEditor.Content";
|
|
611
619
|
function $({ className: e, iconOnly: r = !1 }) {
|
|
612
|
-
let { sourceMode: i, toggleSource: a } = Y(), o = i ? "Switch to visual editor" : "Switch to Markdown source", s = i ?
|
|
613
|
-
return r ? /* @__PURE__ */
|
|
620
|
+
let { sourceMode: i, toggleSource: a } = Y(), o = i ? "Switch to visual editor" : "Switch to Markdown source", s = i ? y : v;
|
|
621
|
+
return r ? /* @__PURE__ */ u(n, {
|
|
614
622
|
type: "button",
|
|
615
623
|
variant: "ghost",
|
|
616
624
|
size: "icon-sm",
|
|
@@ -619,11 +627,11 @@ function $({ className: e, iconOnly: r = !1 }) {
|
|
|
619
627
|
title: o,
|
|
620
628
|
className: e,
|
|
621
629
|
onClick: a,
|
|
622
|
-
children: /* @__PURE__ */
|
|
630
|
+
children: /* @__PURE__ */ u(t, {
|
|
623
631
|
icon: s,
|
|
624
632
|
size: "sm"
|
|
625
633
|
})
|
|
626
|
-
}) : /* @__PURE__ */
|
|
634
|
+
}) : /* @__PURE__ */ u(n, {
|
|
627
635
|
type: "button",
|
|
628
636
|
variant: "ghost",
|
|
629
637
|
size: "sm",
|
|
@@ -636,13 +644,13 @@ function $({ className: e, iconOnly: r = !1 }) {
|
|
|
636
644
|
});
|
|
637
645
|
}
|
|
638
646
|
$.displayName = "RichTextEditor.SourceToggle";
|
|
639
|
-
var ce =
|
|
640
|
-
return /* @__PURE__ */
|
|
647
|
+
var ce = c.forwardRef(function(t, n) {
|
|
648
|
+
return /* @__PURE__ */ u(X, {
|
|
641
649
|
ref: n,
|
|
642
650
|
...t,
|
|
643
|
-
children: /* @__PURE__ */
|
|
651
|
+
children: /* @__PURE__ */ d("div", {
|
|
644
652
|
className: e("overflow-hidden rounded-surface border border-surface-border-strong bg-surface-raised", "transition-colors ease-productive-standard focus-within:border-surface-border-strong"),
|
|
645
|
-
children: [/* @__PURE__ */
|
|
653
|
+
children: [/* @__PURE__ */ u(Z, { trailing: t.sourceToggle ? /* @__PURE__ */ u($, {}) : void 0 }), /* @__PURE__ */ u(Q, {})]
|
|
646
654
|
})
|
|
647
655
|
});
|
|
648
656
|
});
|
|
@@ -652,11 +660,11 @@ var le = Object.assign(ce, {
|
|
|
652
660
|
Toolbar: Z,
|
|
653
661
|
Content: Q,
|
|
654
662
|
SourceToggle: $
|
|
655
|
-
}), ue =
|
|
656
|
-
let
|
|
663
|
+
}), ue = c.forwardRef(function({ content: t, format: n = "html", className: r, ...i }, a) {
|
|
664
|
+
let s = ae({
|
|
657
665
|
immediatelyRender: !1,
|
|
658
666
|
extensions: [
|
|
659
|
-
|
|
667
|
+
oe.configure({
|
|
660
668
|
heading: { levels: [2, 3] },
|
|
661
669
|
link: {
|
|
662
670
|
openOnClick: !0,
|
|
@@ -672,8 +680,8 @@ var le = Object.assign(ce, {
|
|
|
672
680
|
}
|
|
673
681
|
}
|
|
674
682
|
}),
|
|
675
|
-
|
|
676
|
-
|
|
683
|
+
P.configure({ multicolor: !1 }),
|
|
684
|
+
z.configure({
|
|
677
685
|
bulletList: !1,
|
|
678
686
|
orderedList: !1,
|
|
679
687
|
listItem: !1,
|
|
@@ -681,25 +689,25 @@ var le = Object.assign(ce, {
|
|
|
681
689
|
taskList: {},
|
|
682
690
|
taskItem: { nested: !0 }
|
|
683
691
|
}),
|
|
684
|
-
|
|
685
|
-
|
|
692
|
+
B.configure({ types: ["heading", "paragraph"] }),
|
|
693
|
+
F.configure({
|
|
686
694
|
allowBase64: !0,
|
|
687
695
|
HTMLAttributes: { class: "max-w-full rounded-control" }
|
|
688
696
|
}),
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
697
|
+
o,
|
|
698
|
+
I.configure({ HTMLAttributes: { class: "mention" } }),
|
|
699
|
+
V
|
|
692
700
|
],
|
|
693
701
|
content: t,
|
|
694
702
|
contentType: n === "markdown" ? "markdown" : void 0,
|
|
695
703
|
editable: !1,
|
|
696
704
|
editorProps: { attributes: { class: e(...H) } }
|
|
697
705
|
});
|
|
698
|
-
return
|
|
699
|
-
ref:
|
|
700
|
-
...
|
|
706
|
+
return s ? /* @__PURE__ */ u("div", {
|
|
707
|
+
ref: a,
|
|
708
|
+
...i,
|
|
701
709
|
className: r,
|
|
702
|
-
children: /* @__PURE__ */
|
|
710
|
+
children: /* @__PURE__ */ u(L, { editor: s })
|
|
703
711
|
}) : null;
|
|
704
712
|
});
|
|
705
713
|
ue.displayName = "RichTextViewer";
|