@devalok/shilp-sutra 0.29.0 → 0.30.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/dist/composed/avatar-group.d.ts.map +1 -1
- package/dist/composed/avatar-group.js +94 -79
- package/dist/composed/index.d.ts +1 -1
- package/dist/composed/index.d.ts.map +1 -1
- package/dist/composed/page-header.d.ts.map +1 -1
- package/dist/composed/page-header.js +36 -23
- package/dist/composed/rich-text-editor.d.ts +3 -0
- package/dist/composed/rich-text-editor.d.ts.map +1 -1
- package/dist/composed/rich-text-editor.js +243 -240
- package/dist/tokens/primitives.css +10 -0
- package/dist/tokens/semantic.css +6 -2
- package/dist/ui/button-processing.d.ts +2 -1
- package/dist/ui/button-processing.d.ts.map +1 -1
- package/dist/ui/lib/utils.js +3 -3
- package/docs/components/composed/rich-text-editor.md +6 -0
- package/llms-full.txt +7 -1
- package/llms.txt +9 -3
- package/package.json +1 -1
|
@@ -1,39 +1,39 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
2
|
+
import { jsx as n, jsxs as p } from "react/jsx-runtime";
|
|
3
3
|
import * as c from "react";
|
|
4
|
-
import { N as
|
|
5
|
-
import { IconFile as
|
|
4
|
+
import { N as Z, R as ee, m as te, a as ne, E as re, S as se, u as M, U as P, T as U, b as K, P as ie, H as $, c as q, d as O, L as V, I as F, M as W, e as G } from "../_chunks/tiptap.js";
|
|
5
|
+
import { IconFile as oe, IconDownload as le, IconBold as ae, IconItalic as ce, IconUnderline as ue, IconStrikethrough as de, IconHighlight as fe, IconH2 as me, IconH3 as he, IconBlockquote as ge, IconList as be, IconListNumbers as pe, IconListCheck as ke, IconCode as xe, IconPhoto as ve, IconPaperclip as ye, IconLineDashed as we, IconAlignLeft as Ae, IconAlignCenter as _e, IconAlignRight as Le, IconMoodSmile as Ie, IconArrowBackUp as Ce, IconArrowForwardUp as Re, IconLink as Ee } from "@tabler/icons-react";
|
|
6
6
|
import { Icon as u } from "../ui/icon.js";
|
|
7
|
-
import { createRoot as
|
|
7
|
+
import { createRoot as J } from "react-dom/client";
|
|
8
8
|
import { cn as x } from "../ui/lib/utils.js";
|
|
9
|
-
import { useColorMode as
|
|
10
|
-
function
|
|
9
|
+
import { useColorMode as ze } from "../hooks/use-color-mode.js";
|
|
10
|
+
function Ne(e) {
|
|
11
11
|
return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`;
|
|
12
12
|
}
|
|
13
|
-
function
|
|
14
|
-
const
|
|
15
|
-
return /* @__PURE__ */
|
|
13
|
+
function Te({ node: e }) {
|
|
14
|
+
const r = /^https?:\/\//.test(e.attrs.url) ? e.attrs.url : "#";
|
|
15
|
+
return /* @__PURE__ */ n(ne, { className: "my-ds-02", children: /* @__PURE__ */ p(
|
|
16
16
|
"a",
|
|
17
17
|
{
|
|
18
|
-
href:
|
|
18
|
+
href: r,
|
|
19
19
|
target: "_blank",
|
|
20
20
|
rel: "noopener noreferrer",
|
|
21
21
|
className: "inline-flex items-center gap-ds-03 rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-04 py-ds-03 text-ds-sm text-surface-fg transition-colors hover:border-surface-border-strong hover:bg-surface-raised-hover",
|
|
22
22
|
contentEditable: !1,
|
|
23
23
|
children: [
|
|
24
|
-
/* @__PURE__ */
|
|
25
|
-
/* @__PURE__ */
|
|
24
|
+
/* @__PURE__ */ n(u, { icon: oe, size: "sm", className: "shrink-0 text-surface-fg-subtle" }),
|
|
25
|
+
/* @__PURE__ */ n("span", { className: "truncate", children: e.attrs.name }),
|
|
26
26
|
/* @__PURE__ */ p("span", { className: "shrink-0 text-surface-fg-subtle", children: [
|
|
27
27
|
"(",
|
|
28
|
-
|
|
28
|
+
Ne(e.attrs.size),
|
|
29
29
|
")"
|
|
30
30
|
] }),
|
|
31
|
-
/* @__PURE__ */
|
|
31
|
+
/* @__PURE__ */ n(u, { icon: le, size: "sm", className: "shrink-0 text-surface-fg-subtle" })
|
|
32
32
|
]
|
|
33
33
|
}
|
|
34
34
|
) });
|
|
35
35
|
}
|
|
36
|
-
const
|
|
36
|
+
const Q = Z.create({
|
|
37
37
|
name: "fileAttachment",
|
|
38
38
|
group: "block",
|
|
39
39
|
atom: !0,
|
|
@@ -48,47 +48,47 @@ const F = Y.create({
|
|
|
48
48
|
return [{ tag: "div[data-file-attachment]" }];
|
|
49
49
|
},
|
|
50
50
|
renderHTML({ HTMLAttributes: e }) {
|
|
51
|
-
return ["div",
|
|
51
|
+
return ["div", te({ "data-file-attachment": "" }, e)];
|
|
52
52
|
},
|
|
53
53
|
addNodeView() {
|
|
54
|
-
return
|
|
54
|
+
return ee(Te);
|
|
55
55
|
}
|
|
56
|
-
}),
|
|
57
|
-
({ items: e, command:
|
|
56
|
+
}), H = c.forwardRef(
|
|
57
|
+
({ items: e, command: r }, s) => {
|
|
58
58
|
const [o, i] = c.useState(0);
|
|
59
|
-
return c.useEffect(() => i(0), [e]), c.useImperativeHandle(
|
|
60
|
-
onKeyDown: ({ event:
|
|
61
|
-
})), e.length ? /* @__PURE__ */
|
|
59
|
+
return c.useEffect(() => i(0), [e]), c.useImperativeHandle(s, () => ({
|
|
60
|
+
onKeyDown: ({ event: t }) => t.key === "ArrowUp" ? (i((l) => (l + e.length - 1) % e.length), !0) : t.key === "ArrowDown" ? (i((l) => (l + 1) % e.length), !0) : t.key === "Enter" ? (e[o] && r(e[o]), !0) : !1
|
|
61
|
+
})), e.length ? /* @__PURE__ */ n("div", { role: "listbox", "aria-label": "Mention suggestions", className: "z-popover overflow-hidden rounded-ds-md border border-surface-border-strong bg-surface-overlay shadow-raised-hover", children: e.map((t, l) => /* @__PURE__ */ p(
|
|
62
62
|
"button",
|
|
63
63
|
{
|
|
64
64
|
type: "button",
|
|
65
65
|
role: "option",
|
|
66
66
|
"aria-selected": l === o,
|
|
67
|
-
onClick: () =>
|
|
67
|
+
onClick: () => r(t),
|
|
68
68
|
className: x(
|
|
69
69
|
"flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left text-ds-sm",
|
|
70
70
|
l === o ? "bg-surface-raised text-surface-fg" : "text-surface-fg-muted hover:bg-surface-raised"
|
|
71
71
|
),
|
|
72
72
|
children: [
|
|
73
|
-
|
|
74
|
-
/* @__PURE__ */
|
|
73
|
+
t.avatar ? /* @__PURE__ */ n("img", { src: t.avatar, alt: "", className: "h-ico-md w-ico-md rounded-ds-full object-cover" }) : /* @__PURE__ */ n("span", { className: "flex h-ico-md w-ico-md items-center justify-center rounded-ds-full bg-accent-2 text-[10px] font-semibold text-accent-11", children: t.label.charAt(0).toUpperCase() }),
|
|
74
|
+
/* @__PURE__ */ n("span", { children: t.label })
|
|
75
75
|
]
|
|
76
76
|
},
|
|
77
|
-
|
|
77
|
+
t.id
|
|
78
78
|
)) }) : null;
|
|
79
79
|
}
|
|
80
80
|
);
|
|
81
|
-
|
|
82
|
-
function
|
|
81
|
+
H.displayName = "MentionList";
|
|
82
|
+
function Se(e) {
|
|
83
83
|
return () => {
|
|
84
|
-
let
|
|
84
|
+
let r = null, s = null, o = null;
|
|
85
85
|
return {
|
|
86
86
|
onStart: (i) => {
|
|
87
|
-
|
|
88
|
-
const
|
|
89
|
-
|
|
90
|
-
/* @__PURE__ */
|
|
91
|
-
|
|
87
|
+
s = document.createElement("div"), s.style.position = "absolute", s.style.zIndex = "1400";
|
|
88
|
+
const t = i.clientRect?.();
|
|
89
|
+
t && (s.style.left = `${t.left}px`, s.style.top = `${t.bottom + 4}px`), document.body.appendChild(s), r = J(s), r.render(
|
|
90
|
+
/* @__PURE__ */ n(
|
|
91
|
+
H,
|
|
92
92
|
{
|
|
93
93
|
ref: (l) => {
|
|
94
94
|
o = l;
|
|
@@ -102,11 +102,11 @@ function Te(e) {
|
|
|
102
102
|
);
|
|
103
103
|
},
|
|
104
104
|
onUpdate: (i) => {
|
|
105
|
-
if (!
|
|
106
|
-
const
|
|
107
|
-
|
|
108
|
-
/* @__PURE__ */
|
|
109
|
-
|
|
105
|
+
if (!r || !s) return;
|
|
106
|
+
const t = i.clientRect?.();
|
|
107
|
+
t && (s.style.left = `${t.left}px`, s.style.top = `${t.bottom + 4}px`), r.render(
|
|
108
|
+
/* @__PURE__ */ n(
|
|
109
|
+
H,
|
|
110
110
|
{
|
|
111
111
|
ref: (l) => {
|
|
112
112
|
o = l;
|
|
@@ -119,117 +119,117 @@ function Te(e) {
|
|
|
119
119
|
)
|
|
120
120
|
);
|
|
121
121
|
},
|
|
122
|
-
onKeyDown: (i) => i.event.key === "Escape" ? (
|
|
122
|
+
onKeyDown: (i) => i.event.key === "Escape" ? (s && (r?.unmount(), s.remove(), s = null, r = null), !0) : o?.onKeyDown(i) ?? !1,
|
|
123
123
|
onExit: () => {
|
|
124
|
-
|
|
124
|
+
s && (r?.unmount(), s.remove(), s = null, r = null);
|
|
125
125
|
}
|
|
126
126
|
};
|
|
127
127
|
};
|
|
128
128
|
}
|
|
129
|
-
let
|
|
130
|
-
async function
|
|
131
|
-
if (
|
|
132
|
-
const e = await import("@emoji-mart/data"),
|
|
133
|
-
return
|
|
134
|
-
id:
|
|
135
|
-
name:
|
|
136
|
-
native:
|
|
137
|
-
})),
|
|
129
|
+
let _ = null;
|
|
130
|
+
async function He() {
|
|
131
|
+
if (_) return _;
|
|
132
|
+
const e = await import("@emoji-mart/data"), r = e.default ?? e;
|
|
133
|
+
return _ = Object.values(r.emojis).map((s) => ({
|
|
134
|
+
id: s.id,
|
|
135
|
+
name: s.name,
|
|
136
|
+
native: s.skins[0]?.native ?? ""
|
|
137
|
+
})), _;
|
|
138
138
|
}
|
|
139
|
-
const
|
|
140
|
-
({ items: e, command:
|
|
139
|
+
const j = c.forwardRef(
|
|
140
|
+
({ items: e, command: r }, s) => {
|
|
141
141
|
const [o, i] = c.useState(0);
|
|
142
|
-
return c.useEffect(() => i(0), [e]), c.useImperativeHandle(
|
|
143
|
-
onKeyDown: ({ event:
|
|
144
|
-
})), e.length ? /* @__PURE__ */
|
|
142
|
+
return c.useEffect(() => i(0), [e]), c.useImperativeHandle(s, () => ({
|
|
143
|
+
onKeyDown: ({ event: t }) => t.key === "ArrowUp" ? (i((l) => (l + e.length - 1) % e.length), !0) : t.key === "ArrowDown" ? (i((l) => (l + 1) % e.length), !0) : t.key === "Enter" ? (e[o] && r(e[o]), !0) : !1
|
|
144
|
+
})), e.length ? /* @__PURE__ */ n("div", { role: "listbox", "aria-label": "Emoji suggestions", className: "z-popover max-h-[200px] overflow-x-hidden overflow-y-auto rounded-ds-md border border-surface-border-strong bg-surface-overlay shadow-raised-hover", children: e.map((t, l) => /* @__PURE__ */ p(
|
|
145
145
|
"button",
|
|
146
146
|
{
|
|
147
147
|
type: "button",
|
|
148
148
|
role: "option",
|
|
149
149
|
"aria-selected": l === o,
|
|
150
|
-
onClick: () =>
|
|
150
|
+
onClick: () => r(t),
|
|
151
151
|
className: x(
|
|
152
152
|
"flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left text-ds-sm",
|
|
153
153
|
l === o ? "bg-surface-raised text-surface-fg" : "text-surface-fg-muted hover:bg-surface-raised"
|
|
154
154
|
),
|
|
155
155
|
children: [
|
|
156
|
-
/* @__PURE__ */
|
|
156
|
+
/* @__PURE__ */ n("span", { className: "text-ds-base", children: t.native }),
|
|
157
157
|
/* @__PURE__ */ p("span", { className: "truncate", children: [
|
|
158
158
|
":",
|
|
159
|
-
|
|
159
|
+
t.id,
|
|
160
160
|
":"
|
|
161
161
|
] })
|
|
162
162
|
]
|
|
163
163
|
},
|
|
164
|
-
|
|
164
|
+
t.id
|
|
165
165
|
)) }) : null;
|
|
166
166
|
}
|
|
167
167
|
);
|
|
168
|
-
|
|
169
|
-
function
|
|
168
|
+
j.displayName = "EmojiList";
|
|
169
|
+
function je() {
|
|
170
170
|
return () => {
|
|
171
|
-
let e = null,
|
|
171
|
+
let e = null, r = null, s = null;
|
|
172
172
|
return {
|
|
173
173
|
onStart: (o) => {
|
|
174
|
-
|
|
174
|
+
r = document.createElement("div"), r.style.position = "absolute", r.style.zIndex = "1400";
|
|
175
175
|
const i = o.clientRect?.();
|
|
176
|
-
i && (
|
|
177
|
-
/* @__PURE__ */
|
|
178
|
-
|
|
176
|
+
i && (r.style.left = `${i.left}px`, r.style.top = `${i.bottom + 4}px`), document.body.appendChild(r), e = J(r), e.render(
|
|
177
|
+
/* @__PURE__ */ n(
|
|
178
|
+
j,
|
|
179
179
|
{
|
|
180
|
-
ref: (
|
|
181
|
-
|
|
180
|
+
ref: (t) => {
|
|
181
|
+
s = t;
|
|
182
182
|
},
|
|
183
183
|
items: o.items,
|
|
184
|
-
command: (
|
|
184
|
+
command: (t) => o.command(t)
|
|
185
185
|
}
|
|
186
186
|
)
|
|
187
187
|
);
|
|
188
188
|
},
|
|
189
189
|
onUpdate: (o) => {
|
|
190
|
-
if (!e || !
|
|
190
|
+
if (!e || !r) return;
|
|
191
191
|
const i = o.clientRect?.();
|
|
192
|
-
i && (
|
|
193
|
-
/* @__PURE__ */
|
|
194
|
-
|
|
192
|
+
i && (r.style.left = `${i.left}px`, r.style.top = `${i.bottom + 4}px`), e.render(
|
|
193
|
+
/* @__PURE__ */ n(
|
|
194
|
+
j,
|
|
195
195
|
{
|
|
196
|
-
ref: (
|
|
197
|
-
|
|
196
|
+
ref: (t) => {
|
|
197
|
+
s = t;
|
|
198
198
|
},
|
|
199
199
|
items: o.items,
|
|
200
|
-
command: (
|
|
200
|
+
command: (t) => o.command(t)
|
|
201
201
|
}
|
|
202
202
|
)
|
|
203
203
|
);
|
|
204
204
|
},
|
|
205
|
-
onKeyDown: (o) => o.event.key === "Escape" ? (
|
|
205
|
+
onKeyDown: (o) => o.event.key === "Escape" ? (r && (e?.unmount(), r.remove(), r = null, e = null), !0) : s?.onKeyDown(o) ?? !1,
|
|
206
206
|
onExit: () => {
|
|
207
|
-
|
|
207
|
+
r && (e?.unmount(), r.remove(), r = null, e = null);
|
|
208
208
|
}
|
|
209
209
|
};
|
|
210
210
|
};
|
|
211
211
|
}
|
|
212
|
-
const
|
|
212
|
+
const Be = re.create({
|
|
213
213
|
name: "emojiSuggestion",
|
|
214
214
|
addProseMirrorPlugins() {
|
|
215
215
|
return [
|
|
216
|
-
|
|
216
|
+
se({
|
|
217
217
|
editor: this.editor,
|
|
218
218
|
char: ":",
|
|
219
219
|
items: async ({ query: e }) => {
|
|
220
|
-
const
|
|
221
|
-
return e ?
|
|
222
|
-
(
|
|
223
|
-
).slice(0, 8) :
|
|
220
|
+
const r = await He();
|
|
221
|
+
return e ? r.filter(
|
|
222
|
+
(s) => s.id.includes(e.toLowerCase()) || s.name.toLowerCase().includes(e.toLowerCase())
|
|
223
|
+
).slice(0, 8) : r.slice(0, 8);
|
|
224
224
|
},
|
|
225
|
-
command: ({ editor: e, range:
|
|
226
|
-
e.chain().focus().deleteRange(
|
|
225
|
+
command: ({ editor: e, range: r, props: s }) => {
|
|
226
|
+
e.chain().focus().deleteRange(r).insertContent(s.native).run();
|
|
227
227
|
},
|
|
228
|
-
render:
|
|
228
|
+
render: je()
|
|
229
229
|
})
|
|
230
230
|
];
|
|
231
231
|
}
|
|
232
|
-
}),
|
|
232
|
+
}), X = [
|
|
233
233
|
"prose prose-sm max-w-none",
|
|
234
234
|
"font-body text-ds-md leading-relaxed text-surface-fg",
|
|
235
235
|
"[&_h2]:text-ds-xl [&_h2]:mb-ds-03 [&_h2]:mt-ds-05 [&_h2]:text-surface-fg",
|
|
@@ -250,140 +250,142 @@ const je = ne.create({
|
|
|
250
250
|
];
|
|
251
251
|
function d({
|
|
252
252
|
onClick: e,
|
|
253
|
-
isActive:
|
|
254
|
-
disabled:
|
|
253
|
+
isActive: r = !1,
|
|
254
|
+
disabled: s = !1,
|
|
255
255
|
title: o,
|
|
256
256
|
children: i
|
|
257
257
|
}) {
|
|
258
|
-
return /* @__PURE__ */
|
|
258
|
+
return /* @__PURE__ */ n(
|
|
259
259
|
"button",
|
|
260
260
|
{
|
|
261
261
|
type: "button",
|
|
262
262
|
onClick: e,
|
|
263
|
-
disabled:
|
|
263
|
+
disabled: s,
|
|
264
264
|
title: o,
|
|
265
|
-
"aria-pressed":
|
|
265
|
+
"aria-pressed": r,
|
|
266
266
|
className: x(
|
|
267
267
|
"inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md transition-colors duration-fast-01 ease-productive-standard",
|
|
268
268
|
"hover:bg-surface-raised-hover",
|
|
269
269
|
"disabled:pointer-events-none disabled:opacity-action-disabled",
|
|
270
|
-
|
|
270
|
+
r ? "bg-surface-raised-hover text-accent-11" : "text-surface-fg-subtle"
|
|
271
271
|
),
|
|
272
272
|
children: i
|
|
273
273
|
}
|
|
274
274
|
);
|
|
275
275
|
}
|
|
276
276
|
function De({ editor: e }) {
|
|
277
|
-
const [
|
|
277
|
+
const [r, s] = c.useState(!1), [o, i] = c.useState(""), t = c.useRef(null), l = () => {
|
|
278
278
|
if (e.isActive("link")) {
|
|
279
279
|
e.chain().focus().unsetLink().run();
|
|
280
280
|
return;
|
|
281
281
|
}
|
|
282
|
-
const
|
|
283
|
-
i(
|
|
284
|
-
},
|
|
285
|
-
|
|
286
|
-
},
|
|
287
|
-
|
|
282
|
+
const h = e.getAttributes("link").href || "";
|
|
283
|
+
i(h), s(!0), setTimeout(() => t.current?.focus(), 0);
|
|
284
|
+
}, k = (h) => {
|
|
285
|
+
h.preventDefault(), o.trim() && e.chain().focus().setLink({ href: o.trim() }).run(), s(!1), i("");
|
|
286
|
+
}, g = (h) => {
|
|
287
|
+
h.key === "Escape" && (s(!1), i(""), e.commands.focus());
|
|
288
288
|
};
|
|
289
289
|
return /* @__PURE__ */ p("div", { className: "relative", children: [
|
|
290
|
-
/* @__PURE__ */
|
|
291
|
-
|
|
290
|
+
/* @__PURE__ */ n(d, { onClick: l, isActive: e.isActive("link"), title: "Link", children: /* @__PURE__ */ n(u, { icon: Ee, size: "sm" }) }),
|
|
291
|
+
r && /* @__PURE__ */ p(
|
|
292
292
|
"form",
|
|
293
293
|
{
|
|
294
|
-
onSubmit:
|
|
294
|
+
onSubmit: k,
|
|
295
295
|
"aria-label": "Edit link URL",
|
|
296
296
|
className: "absolute left-0 top-full z-popover mt-ds-01 flex items-center gap-ds-02 rounded-ds-md border border-surface-border-strong bg-surface-overlay p-ds-02 shadow-raised-hover",
|
|
297
297
|
children: [
|
|
298
|
-
/* @__PURE__ */
|
|
298
|
+
/* @__PURE__ */ n(
|
|
299
299
|
"input",
|
|
300
300
|
{
|
|
301
|
-
ref:
|
|
301
|
+
ref: t,
|
|
302
302
|
type: "url",
|
|
303
303
|
value: o,
|
|
304
|
-
onChange: (
|
|
305
|
-
onKeyDown:
|
|
304
|
+
onChange: (h) => i(h.target.value),
|
|
305
|
+
onKeyDown: g,
|
|
306
306
|
placeholder: "https://...",
|
|
307
307
|
className: "h-ds-sm w-[240px] rounded-ds-sm border border-surface-border-strong bg-surface-overlay px-ds-03 text-ds-sm text-surface-fg focus:border-accent-7 focus:outline-none"
|
|
308
308
|
}
|
|
309
309
|
),
|
|
310
|
-
/* @__PURE__ */
|
|
310
|
+
/* @__PURE__ */ n("button", { type: "submit", className: "h-ds-sm rounded-ds-sm bg-accent-9 px-ds-03 text-ds-sm text-accent-fg hover:bg-accent-10", children: "Apply" })
|
|
311
311
|
]
|
|
312
312
|
}
|
|
313
313
|
)
|
|
314
314
|
] });
|
|
315
315
|
}
|
|
316
|
-
function
|
|
317
|
-
return /* @__PURE__ */
|
|
316
|
+
function y() {
|
|
317
|
+
return /* @__PURE__ */ n("div", { className: "mx-ds-02 h-[16px] w-px bg-surface-border" });
|
|
318
318
|
}
|
|
319
|
-
function
|
|
319
|
+
function Me({ editor: e, toolbar: r, onImageClick: s, onFileClick: o, onEmojiClick: i }) {
|
|
320
|
+
const t = (C) => !r || r.includes(C), l = t("bold") || t("italic") || t("underline") || t("strike") || t("highlight"), k = t("h2") || t("h3") || t("blockquote"), g = t("bulletList") || t("orderedList") || t("taskList") || t("codeBlock"), h = t("link") || !!s && t("image") || !!o && t("file") || t("hr"), v = t("alignLeft") || t("alignCenter") || t("alignRight"), L = !!i && t("emoji"), I = t("undo") || t("redo");
|
|
320
321
|
return /* @__PURE__ */ p("div", { className: "flex flex-wrap items-center gap-ds-01 border-b border-surface-border-strong px-ds-04 py-ds-02b", children: [
|
|
321
|
-
/* @__PURE__ */
|
|
322
|
-
/* @__PURE__ */
|
|
323
|
-
/* @__PURE__ */
|
|
324
|
-
/* @__PURE__ */
|
|
325
|
-
/* @__PURE__ */
|
|
326
|
-
/* @__PURE__ */
|
|
327
|
-
/* @__PURE__ */
|
|
328
|
-
/* @__PURE__ */
|
|
329
|
-
/* @__PURE__ */
|
|
330
|
-
/* @__PURE__ */
|
|
331
|
-
/* @__PURE__ */
|
|
332
|
-
/* @__PURE__ */
|
|
333
|
-
/* @__PURE__ */
|
|
334
|
-
/* @__PURE__ */
|
|
335
|
-
/* @__PURE__ */
|
|
336
|
-
/* @__PURE__ */
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
/* @__PURE__ */
|
|
340
|
-
/* @__PURE__ */
|
|
341
|
-
/* @__PURE__ */
|
|
342
|
-
/* @__PURE__ */
|
|
343
|
-
/* @__PURE__ */
|
|
344
|
-
/* @__PURE__ */
|
|
345
|
-
|
|
346
|
-
/* @__PURE__ */
|
|
347
|
-
/* @__PURE__ */
|
|
322
|
+
t("bold") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleBold().run(), isActive: e.isActive("bold"), title: "Bold", children: /* @__PURE__ */ n(u, { icon: ae, size: "sm", stroke: "bold" }) }),
|
|
323
|
+
t("italic") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleItalic().run(), isActive: e.isActive("italic"), title: "Italic", children: /* @__PURE__ */ n(u, { icon: ce, size: "sm", stroke: "bold" }) }),
|
|
324
|
+
t("underline") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleUnderline().run(), isActive: e.isActive("underline"), title: "Underline", children: /* @__PURE__ */ n(u, { icon: ue, size: "sm", stroke: "bold" }) }),
|
|
325
|
+
t("strike") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleStrike().run(), isActive: e.isActive("strike"), title: "Strikethrough", children: /* @__PURE__ */ n(u, { icon: de, size: "sm", stroke: "bold" }) }),
|
|
326
|
+
t("highlight") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleHighlight().run(), isActive: e.isActive("highlight"), title: "Highlight", children: /* @__PURE__ */ n(u, { icon: fe, size: "sm", stroke: "bold" }) }),
|
|
327
|
+
l && k && /* @__PURE__ */ n(y, {}),
|
|
328
|
+
t("h2") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleHeading({ level: 2 }).run(), isActive: e.isActive("heading", { level: 2 }), title: "Heading 2", children: /* @__PURE__ */ n(u, { icon: me, size: "sm", stroke: "bold" }) }),
|
|
329
|
+
t("h3") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleHeading({ level: 3 }).run(), isActive: e.isActive("heading", { level: 3 }), title: "Heading 3", children: /* @__PURE__ */ n(u, { icon: he, size: "sm", stroke: "bold" }) }),
|
|
330
|
+
t("blockquote") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleBlockquote().run(), isActive: e.isActive("blockquote"), title: "Blockquote", children: /* @__PURE__ */ n(u, { icon: ge, size: "sm", stroke: "bold" }) }),
|
|
331
|
+
k && g && /* @__PURE__ */ n(y, {}),
|
|
332
|
+
t("bulletList") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleBulletList().run(), isActive: e.isActive("bulletList"), title: "Bullet list", children: /* @__PURE__ */ n(u, { icon: be, size: "sm", stroke: "bold" }) }),
|
|
333
|
+
t("orderedList") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleOrderedList().run(), isActive: e.isActive("orderedList"), title: "Ordered list", children: /* @__PURE__ */ n(u, { icon: pe, size: "sm", stroke: "bold" }) }),
|
|
334
|
+
t("taskList") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleTaskList().run(), isActive: e.isActive("taskList"), title: "Task list", children: /* @__PURE__ */ n(u, { icon: ke, size: "sm", stroke: "bold" }) }),
|
|
335
|
+
t("codeBlock") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().toggleCodeBlock().run(), isActive: e.isActive("codeBlock"), title: "Code block", children: /* @__PURE__ */ n(u, { icon: xe, size: "sm", stroke: "bold" }) }),
|
|
336
|
+
g && h && /* @__PURE__ */ n(y, {}),
|
|
337
|
+
t("link") && /* @__PURE__ */ n(De, { editor: e }),
|
|
338
|
+
s && t("image") && /* @__PURE__ */ n(d, { onClick: s, title: "Insert image", children: /* @__PURE__ */ n(u, { icon: ve, size: "sm" }) }),
|
|
339
|
+
o && t("file") && /* @__PURE__ */ n(d, { onClick: o, title: "Attach file", children: /* @__PURE__ */ n(u, { icon: ye, size: "sm" }) }),
|
|
340
|
+
t("hr") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().setHorizontalRule().run(), title: "Horizontal rule", children: /* @__PURE__ */ n(u, { icon: we, size: "sm" }) }),
|
|
341
|
+
h && v && /* @__PURE__ */ n(y, {}),
|
|
342
|
+
t("alignLeft") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().setTextAlign("left").run(), isActive: e.isActive({ textAlign: "left" }), title: "Align left", children: /* @__PURE__ */ n(u, { icon: Ae, size: "sm" }) }),
|
|
343
|
+
t("alignCenter") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().setTextAlign("center").run(), isActive: e.isActive({ textAlign: "center" }), title: "Align center", children: /* @__PURE__ */ n(u, { icon: _e, size: "sm" }) }),
|
|
344
|
+
t("alignRight") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().setTextAlign("right").run(), isActive: e.isActive({ textAlign: "right" }), title: "Align right", children: /* @__PURE__ */ n(u, { icon: Le, size: "sm" }) }),
|
|
345
|
+
v && (L || I) && /* @__PURE__ */ n(y, {}),
|
|
346
|
+
i && t("emoji") && /* @__PURE__ */ n(d, { onClick: i, title: "Emoji", children: /* @__PURE__ */ n(u, { icon: Ie, size: "sm" }) }),
|
|
347
|
+
t("undo") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().undo().run(), disabled: !e.can().undo(), title: "Undo", children: /* @__PURE__ */ n(u, { icon: Ce, size: "sm" }) }),
|
|
348
|
+
t("redo") && /* @__PURE__ */ n(d, { onClick: () => e.chain().focus().redo().run(), disabled: !e.can().redo(), title: "Redo", children: /* @__PURE__ */ n(u, { icon: Re, size: "sm" }) })
|
|
348
349
|
] });
|
|
349
350
|
}
|
|
350
|
-
const
|
|
351
|
-
function
|
|
352
|
-
const [
|
|
351
|
+
const Pe = c.lazy(() => import("@emoji-mart/react"));
|
|
352
|
+
function Ue({ onSelect: e }) {
|
|
353
|
+
const [r, s] = c.useState(null), { colorMode: o } = ze();
|
|
353
354
|
c.useEffect(() => {
|
|
354
|
-
import("@emoji-mart/data").then((
|
|
355
|
+
import("@emoji-mart/data").then((t) => s(t.default));
|
|
355
356
|
}, []);
|
|
356
|
-
const i = /* @__PURE__ */
|
|
357
|
-
return
|
|
358
|
-
|
|
357
|
+
const i = /* @__PURE__ */ n("div", { className: "flex h-[350px] w-[352px] items-center justify-center rounded-ds-lg border border-surface-border-strong bg-surface-overlay shadow-raised-hover", children: /* @__PURE__ */ n("span", { className: "text-ds-sm text-surface-fg-subtle", children: "Loading..." }) });
|
|
358
|
+
return r ? /* @__PURE__ */ n(c.Suspense, { fallback: i, children: /* @__PURE__ */ n(
|
|
359
|
+
Pe,
|
|
359
360
|
{
|
|
360
|
-
data:
|
|
361
|
-
onEmojiSelect: (
|
|
361
|
+
data: r,
|
|
362
|
+
onEmojiSelect: (t) => e(t.native),
|
|
362
363
|
theme: o === "dark" ? "dark" : "light",
|
|
363
364
|
previewPosition: "none",
|
|
364
365
|
skinTonePosition: "none"
|
|
365
366
|
}
|
|
366
367
|
) }) : i;
|
|
367
368
|
}
|
|
368
|
-
const
|
|
369
|
+
const Ke = c.forwardRef(
|
|
369
370
|
function({
|
|
370
|
-
content:
|
|
371
|
-
placeholder:
|
|
371
|
+
content: r = "",
|
|
372
|
+
placeholder: s = "Start writing...",
|
|
372
373
|
onChange: o,
|
|
373
374
|
className: i,
|
|
374
|
-
editable:
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
375
|
+
editable: t = !0,
|
|
376
|
+
toolbar: l,
|
|
377
|
+
onImageUpload: k,
|
|
378
|
+
onFileUpload: g,
|
|
379
|
+
mentions: h,
|
|
380
|
+
onMentionSearch: v,
|
|
381
|
+
onMentionSelect: L,
|
|
382
|
+
...I
|
|
383
|
+
}, C) {
|
|
384
|
+
const R = c.useRef(null), E = c.useRef(!1), [z, w] = c.useState(!1), N = c.useRef(null), B = c.useRef(null), D = c.useRef(null), T = async (a) => {
|
|
385
|
+
const f = R.current;
|
|
384
386
|
if (f)
|
|
385
|
-
if (
|
|
386
|
-
const m = await
|
|
387
|
+
if (k) {
|
|
388
|
+
const m = await k(a);
|
|
387
389
|
m && /^https?:\/\//i.test(m) && f.chain().focus().setImage({ src: m }).run();
|
|
388
390
|
} else {
|
|
389
391
|
const m = new FileReader();
|
|
@@ -391,29 +393,29 @@ const Ue = c.forwardRef(
|
|
|
391
393
|
f.chain().focus().setImage({ src: m.result }).run();
|
|
392
394
|
}, m.readAsDataURL(a);
|
|
393
395
|
}
|
|
394
|
-
},
|
|
395
|
-
const f =
|
|
396
|
-
if (!f || !
|
|
397
|
-
const m = await
|
|
396
|
+
}, S = async (a) => {
|
|
397
|
+
const f = R.current;
|
|
398
|
+
if (!f || !g) return;
|
|
399
|
+
const m = await g(a);
|
|
398
400
|
f.chain().focus().insertContent({
|
|
399
401
|
type: "fileAttachment",
|
|
400
402
|
attrs: { url: m.url, name: m.name, size: m.size }
|
|
401
403
|
}).run();
|
|
402
|
-
},
|
|
404
|
+
}, b = M({
|
|
403
405
|
extensions: [
|
|
404
|
-
|
|
406
|
+
K.configure({
|
|
405
407
|
heading: { levels: [2, 3] }
|
|
406
408
|
}),
|
|
407
|
-
|
|
408
|
-
placeholder:
|
|
409
|
+
ie.configure({
|
|
410
|
+
placeholder: s,
|
|
409
411
|
emptyEditorClass: "before:content-[attr(data-placeholder)] before:text-surface-fg-subtle before:float-left before:h-0 before:pointer-events-none"
|
|
410
412
|
}),
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
413
|
+
P,
|
|
414
|
+
$.configure({ multicolor: !1 }),
|
|
415
|
+
U,
|
|
416
|
+
q.configure({ nested: !0 }),
|
|
417
|
+
O.configure({ types: ["heading", "paragraph"] }),
|
|
418
|
+
V.configure({
|
|
417
419
|
openOnClick: !1,
|
|
418
420
|
protocols: ["http", "https", "mailto"],
|
|
419
421
|
validate: (a) => /^(https?:\/\/|mailto:)/i.test(a),
|
|
@@ -422,74 +424,74 @@ const Ue = c.forwardRef(
|
|
|
422
424
|
target: "_blank"
|
|
423
425
|
}
|
|
424
426
|
}),
|
|
425
|
-
|
|
427
|
+
F.configure({
|
|
426
428
|
allowBase64: !0,
|
|
427
429
|
HTMLAttributes: {
|
|
428
430
|
class: "max-w-full rounded-ds-md"
|
|
429
431
|
}
|
|
430
432
|
}),
|
|
431
|
-
|
|
432
|
-
...
|
|
433
|
-
|
|
433
|
+
Q,
|
|
434
|
+
...h || v ? [
|
|
435
|
+
W.configure({
|
|
434
436
|
HTMLAttributes: { class: "mention" },
|
|
435
437
|
suggestion: {
|
|
436
|
-
items: async ({ query: a }) =>
|
|
437
|
-
render:
|
|
438
|
+
items: async ({ query: a }) => v ? await v(a) : h ? h.filter((f) => f.label.toLowerCase().includes(a.toLowerCase())).slice(0, 8) : [],
|
|
439
|
+
render: Se(L)
|
|
438
440
|
}
|
|
439
441
|
})
|
|
440
442
|
] : [],
|
|
441
|
-
|
|
443
|
+
Be
|
|
442
444
|
],
|
|
443
|
-
content:
|
|
444
|
-
editable:
|
|
445
|
+
content: r,
|
|
446
|
+
editable: t,
|
|
445
447
|
editorProps: {
|
|
446
|
-
handleDrop: (a, f, m,
|
|
447
|
-
if (
|
|
448
|
-
const
|
|
449
|
-
return
|
|
448
|
+
handleDrop: (a, f, m, Y) => {
|
|
449
|
+
if (Y || !f.dataTransfer?.files.length) return !1;
|
|
450
|
+
const A = f.dataTransfer.files[0];
|
|
451
|
+
return A ? A.type.startsWith("image/") ? (T(A), !0) : g ? (S(A), !0) : !1 : !1;
|
|
450
452
|
},
|
|
451
453
|
handlePaste: (a, f) => {
|
|
452
454
|
const m = f.clipboardData?.files[0];
|
|
453
|
-
return m ? m.type.startsWith("image/") ? (
|
|
455
|
+
return m ? m.type.startsWith("image/") ? (T(m), !0) : g ? (S(m), !0) : !1 : !1;
|
|
454
456
|
},
|
|
455
457
|
attributes: {
|
|
456
458
|
class: x(
|
|
457
|
-
...
|
|
459
|
+
...X,
|
|
458
460
|
"focus:outline-none",
|
|
459
461
|
"min-h-[120px] px-ds-04 py-ds-04"
|
|
460
462
|
)
|
|
461
463
|
}
|
|
462
464
|
},
|
|
463
465
|
onUpdate: ({ editor: a }) => {
|
|
464
|
-
|
|
465
|
-
|
|
466
|
+
E.current = !0, o?.(a.getHTML()), queueMicrotask(() => {
|
|
467
|
+
E.current = !1;
|
|
466
468
|
});
|
|
467
469
|
}
|
|
468
470
|
});
|
|
469
471
|
return c.useEffect(() => {
|
|
470
|
-
|
|
471
|
-
}, [
|
|
472
|
-
if (!
|
|
472
|
+
R.current = b;
|
|
473
|
+
}, [b]), c.useEffect(() => {
|
|
474
|
+
if (!z) return;
|
|
473
475
|
const a = (f) => {
|
|
474
|
-
|
|
476
|
+
N.current && !N.current.contains(f.target) && w(!1);
|
|
475
477
|
};
|
|
476
478
|
return document.addEventListener("mousedown", a), () => document.removeEventListener("mousedown", a);
|
|
477
|
-
}, [
|
|
478
|
-
|
|
479
|
-
}, [
|
|
480
|
-
|
|
479
|
+
}, [z]), c.useEffect(() => {
|
|
480
|
+
E.current || b && r !== b.getHTML() && b.commands.setContent(r, !1);
|
|
481
|
+
}, [b, r]), b ? /* @__PURE__ */ p("div", { ref: C, ...I, className: x("relative", i), children: [
|
|
482
|
+
z && /* @__PURE__ */ n(
|
|
481
483
|
"div",
|
|
482
484
|
{
|
|
483
|
-
ref:
|
|
485
|
+
ref: N,
|
|
484
486
|
className: "absolute bottom-full right-0 z-popover mb-ds-02",
|
|
485
487
|
onKeyDown: (a) => {
|
|
486
|
-
a.key === "Escape" && (a.stopPropagation(),
|
|
488
|
+
a.key === "Escape" && (a.stopPropagation(), w(!1));
|
|
487
489
|
},
|
|
488
|
-
children: /* @__PURE__ */
|
|
489
|
-
|
|
490
|
+
children: /* @__PURE__ */ n(
|
|
491
|
+
Ue,
|
|
490
492
|
{
|
|
491
493
|
onSelect: (a) => {
|
|
492
|
-
|
|
494
|
+
b.chain().focus().insertContent(a).run(), w(!1);
|
|
493
495
|
}
|
|
494
496
|
}
|
|
495
497
|
)
|
|
@@ -503,63 +505,64 @@ const Ue = c.forwardRef(
|
|
|
503
505
|
"transition-colors ease-productive-standard focus-within:border-surface-border-strong"
|
|
504
506
|
),
|
|
505
507
|
children: [
|
|
506
|
-
/* @__PURE__ */
|
|
508
|
+
/* @__PURE__ */ n(
|
|
507
509
|
"input",
|
|
508
510
|
{
|
|
509
|
-
ref:
|
|
511
|
+
ref: B,
|
|
510
512
|
type: "file",
|
|
511
513
|
accept: "image/*",
|
|
512
514
|
"aria-label": "Upload image",
|
|
513
515
|
className: "hidden",
|
|
514
516
|
onChange: (a) => {
|
|
515
517
|
const f = a.target.files?.[0];
|
|
516
|
-
f &&
|
|
518
|
+
f && T(f), a.target.value = "";
|
|
517
519
|
}
|
|
518
520
|
}
|
|
519
521
|
),
|
|
520
|
-
|
|
522
|
+
g && /* @__PURE__ */ n(
|
|
521
523
|
"input",
|
|
522
524
|
{
|
|
523
|
-
ref:
|
|
525
|
+
ref: D,
|
|
524
526
|
type: "file",
|
|
525
527
|
"aria-label": "Upload file",
|
|
526
528
|
className: "hidden",
|
|
527
529
|
onChange: (a) => {
|
|
528
530
|
const f = a.target.files?.[0];
|
|
529
|
-
f &&
|
|
531
|
+
f && S(f), a.target.value = "";
|
|
530
532
|
}
|
|
531
533
|
}
|
|
532
534
|
),
|
|
533
|
-
|
|
534
|
-
|
|
535
|
+
t && /* @__PURE__ */ n(
|
|
536
|
+
Me,
|
|
535
537
|
{
|
|
536
|
-
editor:
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
538
|
+
editor: b,
|
|
539
|
+
toolbar: l,
|
|
540
|
+
onImageClick: () => B.current?.click(),
|
|
541
|
+
onFileClick: g ? () => D.current?.click() : void 0,
|
|
542
|
+
onEmojiClick: () => w((a) => !a)
|
|
540
543
|
}
|
|
541
544
|
),
|
|
542
|
-
/* @__PURE__ */
|
|
545
|
+
/* @__PURE__ */ n(G, { editor: b })
|
|
543
546
|
]
|
|
544
547
|
}
|
|
545
548
|
)
|
|
546
549
|
] }) : null;
|
|
547
550
|
}
|
|
548
551
|
);
|
|
549
|
-
|
|
550
|
-
const
|
|
551
|
-
function({ content:
|
|
552
|
-
const
|
|
552
|
+
Ke.displayName = "RichTextEditor";
|
|
553
|
+
const $e = c.forwardRef(
|
|
554
|
+
function({ content: r, className: s, ...o }, i) {
|
|
555
|
+
const t = M({
|
|
553
556
|
extensions: [
|
|
554
|
-
|
|
557
|
+
K.configure({
|
|
555
558
|
heading: { levels: [2, 3] }
|
|
556
559
|
}),
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
560
|
+
P,
|
|
561
|
+
$.configure({ multicolor: !1 }),
|
|
562
|
+
U,
|
|
563
|
+
q.configure({ nested: !0 }),
|
|
564
|
+
O.configure({ types: ["heading", "paragraph"] }),
|
|
565
|
+
V.configure({
|
|
563
566
|
openOnClick: !0,
|
|
564
567
|
protocols: ["http", "https", "mailto"],
|
|
565
568
|
validate: (l) => /^(https?:\/\/|mailto:)/i.test(l),
|
|
@@ -568,30 +571,30 @@ const Ke = c.forwardRef(
|
|
|
568
571
|
target: "_blank"
|
|
569
572
|
}
|
|
570
573
|
}),
|
|
571
|
-
|
|
574
|
+
F.configure({
|
|
572
575
|
allowBase64: !0,
|
|
573
576
|
HTMLAttributes: {
|
|
574
577
|
class: "max-w-full rounded-ds-md"
|
|
575
578
|
}
|
|
576
579
|
}),
|
|
577
|
-
|
|
578
|
-
|
|
580
|
+
Q,
|
|
581
|
+
W.configure({
|
|
579
582
|
HTMLAttributes: { class: "mention" }
|
|
580
583
|
})
|
|
581
584
|
],
|
|
582
|
-
content:
|
|
585
|
+
content: r,
|
|
583
586
|
editable: !1,
|
|
584
587
|
editorProps: {
|
|
585
588
|
attributes: {
|
|
586
|
-
class: x(...
|
|
589
|
+
class: x(...X)
|
|
587
590
|
}
|
|
588
591
|
}
|
|
589
592
|
});
|
|
590
|
-
return
|
|
593
|
+
return t ? /* @__PURE__ */ n("div", { ref: i, ...o, className: s, children: /* @__PURE__ */ n(G, { editor: t }) }) : null;
|
|
591
594
|
}
|
|
592
595
|
);
|
|
593
|
-
|
|
596
|
+
$e.displayName = "RichTextViewer";
|
|
594
597
|
export {
|
|
595
|
-
|
|
596
|
-
|
|
598
|
+
Ke as RichTextEditor,
|
|
599
|
+
$e as RichTextViewer
|
|
597
600
|
};
|