@opengis/form 0.0.184 → 0.0.185

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.
@@ -1,3049 +0,0 @@
1
- import { shallowRef as Je, ref as $, computed as P, watch as ue, markRaw as et, nextTick as be, getCurrentInstance as tt, resolveComponent as G, createElementBlock as w, openBlock as v, normalizeClass as T, createVNode as C, createElementVNode as d, unref as k, createBlock as K, Teleport as Ve, createCommentVNode as R, Transition as Re, withCtx as D, toDisplayString as W, renderSlot as he, defineComponent as rt, withDirectives as ie, mergeProps as ot, vModelDynamic as lt, Fragment as re, vModelCheckbox as at, onMounted as fe, onBeforeUnmount as Ue, normalizeStyle as ae, vShow as ye, renderList as le, onUnmounted as ke, resolveDynamicComponent as Fe, vModelText as st, withModifiers as nt, createStaticVNode as it, mergeModels as Pe, useModel as ct, isRef as dt } from "vue";
2
- import { r as Me, _ as X, a as ut, b as ft } from "./index-CDkrmpbb.js";
3
- import { Quote as pt, List as gt, ListOrdered as ht, CodeXml as vt, Bold as mt, Italic as bt, Underline as yt, Strikethrough as xt, X as Te, Mail as wt, Search as kt, Link2 as _t, ExternalLink as $t, Trash2 as Ct, Table2 as At, AlignJustify as Ft, AlignRight as St, AlignCenter as Tt, AlignLeft as Lt, Type as Bt, Check as ve, Eraser as It, PaintBucket as Et, Highlighter as jt, ChevronDown as Le, ALargeSmall as Pt, Superscript as Mt, Subscript as Ht, RemoveFormatting as Nt, Image as zt, Undo2 as Dt, Redo2 as Ot, CircleHelp as Vt, Minus as Rt, Maximize as Ut, ListIndentIncrease as qt } from "lucide-vue-next";
4
- import { notify as we } from "@opengis/core";
5
- const Kt = async (t) => {
6
- try {
7
- const e = new FormData();
8
- return e.append("unique", "true"), e.append("file", t), (await (await fetch("/file/upload/uploads?id=&form=&table=", {
9
- method: "POST",
10
- body: e
11
- })).json())?.result;
12
- } catch (e) {
13
- console.error(e);
14
- }
15
- }, Wt = async (t, e, l) => {
16
- const s = e.clipboardData?.items;
17
- if (s) {
18
- const a = e.clipboardData?.getData("text/html"), o = e.clipboardData?.getData("text/plain");
19
- if (a) {
20
- const { state: n, dispatch: c } = t, { tr: r } = n, i = l.fromSchema(t.state.schema), b = new DOMParser().parseFromString(a, "text/html").body, u = i.parse(b), h = r.replaceSelectionWith(u);
21
- return c(h), e.preventDefault(), !0;
22
- }
23
- if (o) {
24
- const { state: n, dispatch: c } = t, { tr: r } = n, i = r.insertText(o, n.selection.from, n.selection.to);
25
- return c(i), e.preventDefault(), !0;
26
- }
27
- for (let n = 0; n < s.length; n++) {
28
- const c = s[n];
29
- if (c.type.startsWith("image/")) {
30
- const r = c.getAsFile();
31
- if (r) {
32
- const i = await Kt(r), { schema: b } = t.state, u = b.nodes.image.create({
33
- src: i?.file_path
34
- }), h = t.state.tr.replaceSelectionWith(u);
35
- return t.dispatch(h), e.preventDefault(), !0;
36
- }
37
- }
38
- }
39
- }
40
- return !1;
41
- }, Xt = "https://esm.sh", te = "3.7.2", qe = "3.7.2", Gt = `?deps=@tiptap/core@${te},@tiptap/pm@${qe}`, Z = (t) => `${Xt}/${t}${Gt}`, J = {
42
- core: Z(`@tiptap/core@${te}`),
43
- starterKit: Z(`@tiptap/starter-kit@${te}`),
44
- textStyle: Z(`@tiptap/extension-text-style@${te}`),
45
- table: Z(`@tiptap/extension-table@${te}`),
46
- highlight: Z(`@tiptap/extension-highlight@${te}`),
47
- subscript: Z(`@tiptap/extension-subscript@${te}`),
48
- superscript: Z(`@tiptap/extension-superscript@${te}`),
49
- link: Z(`@tiptap/extension-link@${te}`),
50
- image: Z(`@tiptap/extension-image@${te}`),
51
- textAlign: Z(`@tiptap/extension-text-align@${te}`),
52
- heading: Z(`@tiptap/extension-heading@${te}`),
53
- paragraph: Z(`@tiptap/extension-paragraph@${te}`),
54
- pmModel: Z(`@tiptap/pm@${qe}/model`)
55
- }, pe = "__vs_form_tiptap_loader__", ee = (t) => import(
56
- /* @vite-ignore */
57
- t
58
- ), U = (t, e) => t?.[e] || t?.default?.[e] || t?.default?.default?.[e] || t?.default || t, He = {
59
- 1: "font-weight:700; font-size:30px;",
60
- 2: "font-weight:700; font-size:26px;",
61
- 3: "font-weight:700; font-size:22px;",
62
- 4: "font-weight:700; font-size:18px;",
63
- 5: "font-weight:500; font-size:16px;",
64
- 6: "font-weight:400; font-size:14px;"
65
- }, Yt = (t) => t.extend({
66
- addOptions() {
67
- return {
68
- ...this.parent?.(),
69
- levels: [1, 2, 3, 4, 5, 6]
70
- };
71
- }
72
- }).extend({
73
- addAttributes() {
74
- return {
75
- ...this.parent?.(),
76
- level: {
77
- default: 1,
78
- renderHTML: (e) => {
79
- const l = e.level || 1;
80
- return {
81
- class: `heading-level-${l}`,
82
- style: He[l] || He[1]
83
- };
84
- }
85
- }
86
- };
87
- }
88
- }), Qt = (t) => t.configure({
89
- HTMLAttributes: {
90
- style: "min-height: 1rem;"
91
- }
92
- }), Zt = (t, e, l, s, a) => {
93
- const o = e.extend({
94
- renderHTML({ HTMLAttributes: n }) {
95
- return [
96
- "div",
97
- { style: "overflow-x: auto;" },
98
- ["table", n, 0]
99
- ];
100
- },
101
- parseHTML() {
102
- return [
103
- {
104
- tag: "div.table-wrapper table",
105
- priority: 100
106
- },
107
- {
108
- tag: "table"
109
- }
110
- ];
111
- }
112
- });
113
- return t.extend({
114
- addExtensions() {
115
- return [
116
- o.configure({
117
- HTMLAttributes: {
118
- class: "editor-content"
119
- },
120
- resizable: !0
121
- }),
122
- l,
123
- s,
124
- a
125
- ];
126
- }
127
- });
128
- }, Jt = (t) => t.extend({
129
- addAttributes() {
130
- return {
131
- ...this.parent?.(),
132
- fontFamily: {
133
- default: null,
134
- parseHTML: (e) => e.style.fontFamily?.replace(/['"]/g, ""),
135
- renderHTML: (e) => e.fontFamily ? {
136
- style: `font-family: ${e.fontFamily}`
137
- } : {}
138
- },
139
- fontSize: {
140
- default: null,
141
- parseHTML: (e) => e.style.fontSize?.replace(/['"]/g, ""),
142
- renderHTML: (e) => e.fontSize ? {
143
- style: `font-size: ${e.fontSize}`
144
- } : {}
145
- },
146
- color: {
147
- default: null,
148
- parseHTML: (e) => e.style.color?.replace(/['"]/g, ""),
149
- renderHTML: (e) => e.color ? {
150
- style: `color: ${e.color}`
151
- } : {}
152
- },
153
- backgroundColor: {
154
- default: null,
155
- parseHTML: (e) => e.style.backgroundColor?.replace(/['"]/g, ""),
156
- renderHTML: (e) => !e.backgroundColor || e.backgroundColor === "transparent" ? {} : {
157
- style: `background-color: ${e.backgroundColor}`
158
- }
159
- }
160
- };
161
- },
162
- addCommands() {
163
- return {
164
- setFontFamily: (e) => ({ chain: l }) => l().setMark("textStyle", { fontFamily: e }).run(),
165
- unsetFontFamily: () => ({ chain: e }) => e().setMark("textStyle", { fontFamily: null }).removeEmptyTextStyle().run(),
166
- setFontSize: (e) => ({ chain: l }) => l().setMark("textStyle", { fontSize: e }).run(),
167
- unsetFontSize: () => ({ chain: e }) => e().setMark("textStyle", { fontSize: null }).removeEmptyTextStyle().run(),
168
- setColor: (e) => ({ chain: l }) => l().setMark("textStyle", { color: e }).run(),
169
- unsetColor: () => ({ chain: e }) => e().setMark("textStyle", { color: null }).removeEmptyTextStyle().run(),
170
- setBackgroundColor: (e) => ({ chain: l }) => l().setMark("textStyle", { backgroundColor: e }).run(),
171
- unsetBackgroundColor: () => ({ chain: e }) => e().setMark("textStyle", { backgroundColor: null }).removeEmptyTextStyle().run()
172
- };
173
- }
174
- }), er = (t) => t.create({
175
- name: "iframe",
176
- group: "block",
177
- inline: !1,
178
- atom: !0,
179
- selectable: !0,
180
- addAttributes() {
181
- return {
182
- src: { default: null },
183
- width: { default: "100%" },
184
- height: { default: "280" },
185
- frameborder: { default: "0" },
186
- allow: { default: null },
187
- allowfullscreen: { default: null },
188
- referrerpolicy: { default: null },
189
- loading: { default: null },
190
- class: { default: null },
191
- title: { default: null },
192
- style: { default: null }
193
- };
194
- },
195
- parseHTML() {
196
- return [{ tag: "iframe" }];
197
- },
198
- renderHTML({ HTMLAttributes: e }) {
199
- return ["iframe", e];
200
- }
201
- });
202
- async function tr() {
203
- if (typeof window > "u") return null;
204
- const t = window;
205
- return t[pe] || (t[pe] = Promise.all([
206
- ee(J.core),
207
- ee(J.starterKit),
208
- ee(J.textStyle),
209
- ee(J.table),
210
- ee(J.highlight),
211
- ee(J.subscript),
212
- ee(J.superscript),
213
- ee(J.link),
214
- ee(J.image),
215
- ee(J.textAlign),
216
- ee(J.heading),
217
- ee(J.paragraph),
218
- ee(J.pmModel)
219
- ]).then(([
220
- e,
221
- l,
222
- s,
223
- a,
224
- o,
225
- n,
226
- c,
227
- r,
228
- i,
229
- b,
230
- u,
231
- h,
232
- g
233
- ]) => {
234
- const S = U(e, "Editor"), j = U(e, "Node"), H = U(e, "Extension"), z = U(l, "StarterKit"), q = U(s, "TextStyle"), L = U(a, "TableKit"), Y = U(a, "Table"), oe = U(a, "TableRow"), se = U(a, "TableCell"), O = U(a, "TableHeader"), p = U(o, "Highlight"), y = U(n, "Subscript"), f = U(c, "Superscript"), _ = U(r, "Link"), x = U(i, "Image"), B = U(b, "TextAlign"), m = U(u, "Heading"), A = U(h, "Paragraph"), I = U(g, "DOMParser");
235
- if (!S || !j || !z || !q || !L || !Y || !oe || !se || !O || !p || !y || !f || !_ || !x || !B || !m || !A || !I)
236
- throw new Error("Failed to resolve one or more Tiptap modules");
237
- return {
238
- Editor: S,
239
- Extension: H,
240
- ProseMirrorDOMParser: I,
241
- StarterKit: z,
242
- ExtendedTextStyle: Jt(q),
243
- Highlight: p,
244
- Subscript: y,
245
- Superscript: f,
246
- Link: _,
247
- Image: x,
248
- TextAlign: B,
249
- CustomHeading: Yt(m),
250
- CustomParagraph: Qt(A),
251
- CustomTableKit: Zt(L, Y, oe, se, O),
252
- Iframe: er(j)
253
- };
254
- }).catch((e) => {
255
- throw delete t[pe], e;
256
- })), t[pe];
257
- }
258
- function rr(t) {
259
- let e = !1;
260
- const l = Je(null), s = $(!1), a = $(""), o = async (i, b = "") => {
261
- if (!i) return null;
262
- s.value = !0, a.value = "";
263
- try {
264
- const u = await tr();
265
- if (!u) return null;
266
- const h = new u.Editor({
267
- element: i,
268
- content: b,
269
- extensions: [
270
- u.StarterKit.configure({
271
- history: {
272
- depth: 100,
273
- newGroupDelay: 500
274
- },
275
- code: {
276
- HTMLAttributes: {
277
- class: "editor-code"
278
- }
279
- },
280
- codeBlock: {
281
- HTMLAttributes: {
282
- class: "editor-codeblock"
283
- }
284
- },
285
- paragraph: !1,
286
- heading: !1,
287
- link: !1
288
- }),
289
- u.Superscript,
290
- u.Subscript,
291
- u.ExtendedTextStyle,
292
- u.CustomParagraph,
293
- u.CustomHeading,
294
- u.Highlight,
295
- u.Image.configure({
296
- inline: !0,
297
- allowBase64: !0,
298
- HTMLAttributes: {
299
- class: "editor-image"
300
- }
301
- }),
302
- u.TextAlign.configure({
303
- types: ["heading", "paragraph"]
304
- }),
305
- u.Link.configure({
306
- HTMLAttributes: {
307
- class: "editor-link"
308
- },
309
- openOnClick: !1,
310
- autolink: !0
311
- }),
312
- u.CustomTableKit,
313
- u.Iframe
314
- ],
315
- editorProps: {
316
- handlePaste: (g, S) => Wt(g, S, u.ProseMirrorDOMParser),
317
- handleKeyDown: (g, S) => {
318
- if (S.key === "Tab") {
319
- const j = g.state, { $anchor: H } = j.selection;
320
- let z = !1;
321
- for (let q = H.depth; q > 0; q--) {
322
- const L = H.node(q);
323
- if (L && (L.type.name === "bulletList" || L.type.name === "orderedList")) {
324
- z = !0;
325
- break;
326
- }
327
- }
328
- return z ? !1 : (S.preventDefault(), !0);
329
- }
330
- return !1;
331
- }
332
- }
333
- });
334
- return l.value = et(h), h;
335
- } catch (u) {
336
- return a.value = "Failed to load rich text editor dependencies.", console.error("Failed to initialize rich text editor", u), null;
337
- } finally {
338
- s.value = !1;
339
- }
340
- }, n = P(() => l.value || null);
341
- return ue(l, (i) => {
342
- i && l.value.on("update", (b) => {
343
- if (!e) {
344
- e = !0;
345
- const u = b.editor.getHTML();
346
- t.modelValue, setTimeout(() => {
347
- e = !1;
348
- }, 10);
349
- }
350
- });
351
- }), {
352
- editor: l,
353
- editorInstance: n,
354
- focusEditor: () => {
355
- l.value && !l.value.isFocused && l.value.commands.focus();
356
- },
357
- createEditor: o,
358
- destroyEditor: () => {
359
- l.value && (l.value.destroy(), l.value = null);
360
- },
361
- isLoading: s,
362
- loadError: a
363
- };
364
- }
365
- function or(t, e, l, {
366
- toEditorContent: s,
367
- toSourceContent: a
368
- } = {}) {
369
- const o = $(!1), n = $(""), c = $(null);
370
- return {
371
- isHtmlMode: o,
372
- htmlContent: n,
373
- htmlTextarea: c,
374
- toggleHtmlMode: async (b) => {
375
- if (o.value = b, b)
376
- t.value && (n.value = a ? await a(t.value.getHTML(), e) : t.value.getHTML()), be(() => {
377
- c.value && c.value.focus?.();
378
- });
379
- else if (t.value) {
380
- const u = s ? await s(n.value, e) : n.value;
381
- t.value.commands.setContent(u, !0), be(() => {
382
- t.value?.commands?.focus?.();
383
- });
384
- }
385
- },
386
- onHtmlInput: (b) => {
387
- n.value = b, l && l("update:modelValue", b);
388
- }
389
- };
390
- }
391
- function lr() {
392
- const t = $(!1);
393
- return {
394
- isFullscreen: t,
395
- toggleFullscreen: () => {
396
- t.value = !t.value;
397
- }
398
- };
399
- }
400
- const ne = (t) => t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), xe = (t) => {
401
- let e = ne(t || "");
402
- return e = e.replace(/!\[([^\]]*)]\(([^)\s]+)(?:\s+"([^"]+)")?\)/g, (l, s, a, o) => {
403
- const n = o ? ` title="${ne(o)}"` : "";
404
- return `<img src="${ne(a)}" alt="${ne(s)}"${n}>`;
405
- }), e = e.replace(/\[([^\]]+)]\(([^)\s]+)(?:\s+"([^"]+)")?\)/g, (l, s, a, o) => {
406
- const n = o ? ` title="${ne(o)}"` : "";
407
- return `<a href="${ne(a)}"${n} target="_blank" rel="noopener noreferrer">${s}</a>`;
408
- }), e = e.replace(/`([^`]+)`/g, "<code>$1</code>"), e = e.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>"), e = e.replace(/__([^_]+)__/g, "<strong>$1</strong>"), e = e.replace(/~~([^~]+)~~/g, "<del>$1</del>"), e = e.replace(/\*([^*\n]+)\*/g, "<em>$1</em>"), e = e.replace(/_([^_\n]+)_/g, "<em>$1</em>"), e;
409
- }, me = (t) => /^\s*\d+\.\s+/.test(t), Be = (t) => /^\s*[-*+]\s+/.test(t), Ke = (t) => /^\s*[-*+]\s+\[[ xX]\]\s+/.test(t), Se = (t) => /^\s*>\s?/.test(t), Ie = (t) => /^\s*\|?(?:\s*:?-{3,}:?\s*\|)+\s*:?-{3,}:?\s*\|?\s*$/.test(t), Ne = (t) => t.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map((e) => xe(e.trim())), ar = (t, e) => {
410
- const l = t[e], s = t[e + 1];
411
- if (!l || !s || !l.includes("|") || !Ie(s))
412
- return null;
413
- const a = Ne(l), o = [];
414
- let n = e + 2;
415
- for (; n < t.length && t[n].includes("|") && t[n].trim() !== ""; ) {
416
- const i = Ne(t[n]);
417
- o.push(`<tr>${i.map((b) => `<td>${b}</td>`).join("")}</tr>`), n += 1;
418
- }
419
- const c = `<thead><tr>${a.map((i) => `<th>${i}</th>`).join("")}</tr></thead>`, r = o.length ? `<tbody>${o.join("")}</tbody>` : "";
420
- return {
421
- html: `<table>${c}${r}</table>`,
422
- nextIndex: n
423
- };
424
- }, sr = (t, e) => {
425
- const l = me(t[e]), s = l ? "ol" : "ul", a = [];
426
- let o = e;
427
- for (; o < t.length; ) {
428
- const n = t[o];
429
- if (n.trim() === "" || !(l ? me(n) : (Be(n) || Ke(n)) && !me(n))) break;
430
- const r = n.match(/^\s*[-*+]\s+\[([ xX])\]\s+(.*)$/);
431
- if (r) {
432
- const i = r[1].toLowerCase() === "x";
433
- a.push(`<li><input type="checkbox" disabled${i ? " checked" : ""}> ${xe(r[2])}</li>`);
434
- } else {
435
- const i = n.replace(/^\s*(?:[-*+]|\d+\.)\s+/, "");
436
- a.push(`<li>${xe(i)}</li>`);
437
- }
438
- o += 1;
439
- }
440
- return {
441
- html: `<${s}>${a.join("")}</${s}>`,
442
- nextIndex: o
443
- };
444
- }, nr = (t, e) => {
445
- const s = t[e].replace(/^```/, "").trim(), a = [];
446
- let o = e + 1;
447
- for (; o < t.length && !t[o].startsWith("```"); )
448
- a.push(t[o]), o += 1;
449
- return {
450
- html: `<pre><code${s ? ` class="language-${ne(s)}"` : ""}>${ne(a.join(`
451
- `))}</code></pre>`,
452
- nextIndex: o < t.length ? o + 1 : o
453
- };
454
- }, ir = (t, e) => {
455
- const l = [];
456
- let s = e;
457
- for (; s < t.length; ) {
458
- const a = t[s];
459
- if (a.trim() === "" || a.startsWith("```") || /^#{1,6}\s+/.test(a) || /^---+$/.test(a.trim()) || /^\*\*\*+$/.test(a.trim()) || Se(a) || me(a) || Be(a) || s + 1 < t.length && a.includes("|") && Ie(t[s + 1]))
460
- break;
461
- l.push(a.trim()), s += 1;
462
- }
463
- return {
464
- html: `<p>${xe(l.join(" "))}</p>`,
465
- nextIndex: s
466
- };
467
- }, We = (t) => {
468
- const l = (t || "").replace(/\r\n/g, `
469
- `).split(`
470
- `), s = [];
471
- let a = 0;
472
- for (; a < l.length; ) {
473
- const o = l[a], n = o.trim();
474
- if (!n) {
475
- a += 1;
476
- continue;
477
- }
478
- if (o.startsWith("```")) {
479
- const i = nr(l, a);
480
- s.push(i.html), a = i.nextIndex;
481
- continue;
482
- }
483
- const c = o.match(/^(#{1,6})\s+(.*)$/);
484
- if (c) {
485
- const i = c[1].length;
486
- s.push(`<h${i}>${xe(c[2])}</h${i}>`), a += 1;
487
- continue;
488
- }
489
- if (/^---+$/.test(n) || /^\*\*\*+$/.test(n)) {
490
- s.push("<hr>"), a += 1;
491
- continue;
492
- }
493
- if (o.includes("|") && a + 1 < l.length && Ie(l[a + 1])) {
494
- const i = ar(l, a);
495
- if (i) {
496
- s.push(i.html), a = i.nextIndex;
497
- continue;
498
- }
499
- }
500
- if (Se(o)) {
501
- const i = [];
502
- for (; a < l.length && Se(l[a]); )
503
- i.push(l[a].replace(/^\s*>\s?/, "")), a += 1;
504
- s.push(`<blockquote>${We(i.join(`
505
- `))}</blockquote>`);
506
- continue;
507
- }
508
- if (me(o) || Be(o) || Ke(o)) {
509
- const i = sr(l, a);
510
- s.push(i.html), a = i.nextIndex;
511
- continue;
512
- }
513
- const r = ir(l, a);
514
- s.push(r.html), a = r.nextIndex;
515
- }
516
- return s.join("");
517
- }, Ce = (t) => (t.textContent || "").replace(/\u00a0/g, " "), Xe = (t) => Array.from(t.childNodes).map((e) => Ee(e)).join(""), cr = (t) => {
518
- const e = Array.from(t.querySelectorAll("tr"));
519
- if (!e.length) return "";
520
- const l = (c) => `| ${Array.from(c.children).map((i) => Xe(i).trim()).join(" | ")} |`, s = e[0], a = s ? Array.from(s.children).length : 0, o = `| ${Array(Math.max(a, 1)).fill("---").join(" | ")} |`, n = e.slice(1).map((c) => l(c));
521
- return [l(s), o, ...n].join(`
522
- `);
523
- }, ze = (t, e = !1) => Array.from(t.children).filter((l) => l.nodeType === Node.ELEMENT_NODE).map((l, s) => {
524
- const a = l, o = a.querySelector('input[type="checkbox"]'), n = Array.from(a.childNodes).filter((c) => !(c instanceof HTMLInputElement)).map((c) => Ee(c)).join("").trim();
525
- return o ? `- [${o.checked ? "x" : " "}] ${n}` : e ? `${s + 1}. ${n}` : `- ${n}`;
526
- }).join(`
527
- `);
528
- function Ee(t) {
529
- if (t.nodeType === Node.TEXT_NODE)
530
- return Ce(t);
531
- if (t.nodeType !== Node.ELEMENT_NODE)
532
- return "";
533
- const e = t, l = e.tagName.toLowerCase(), s = Xe(e);
534
- switch (l) {
535
- case "br":
536
- return `
537
- `;
538
- case "p":
539
- return `${s.trim()}
540
-
541
- `;
542
- case "strong":
543
- case "b":
544
- return `**${s}**`;
545
- case "em":
546
- case "i":
547
- return `*${s}*`;
548
- case "del":
549
- case "s":
550
- return `~~${s}~~`;
551
- case "code":
552
- return e.parentElement?.tagName.toLowerCase() === "pre" ? s : `\`${s}\``;
553
- case "pre": {
554
- const a = e.querySelector("code"), c = (a?.className || "").match(/language-([a-z0-9_-]+)/i)?.[1] || "", r = Ce(a || e);
555
- return `\`\`\`${c}
556
- ${r}
557
- \`\`\`
558
-
559
- `;
560
- }
561
- case "blockquote":
562
- return `${s.trim().split(`
563
- `).map((a) => `> ${a}`).join(`
564
- `)}
565
-
566
- `;
567
- case "h1":
568
- case "h2":
569
- case "h3":
570
- case "h4":
571
- case "h5":
572
- case "h6": {
573
- const a = Number(l[1]);
574
- return `${"#".repeat(a)} ${s.trim()}
575
-
576
- `;
577
- }
578
- case "ul":
579
- return `${ze(e, !1)}
580
-
581
- `;
582
- case "ol":
583
- return `${ze(e, !0)}
584
-
585
- `;
586
- case "a": {
587
- const a = e.getAttribute("href") || "";
588
- return `[${s || a}](${a})`;
589
- }
590
- case "img": {
591
- const a = e.getAttribute("alt") || "", o = e.getAttribute("src") || "";
592
- return o ? `![${a}](${o})` : "";
593
- }
594
- case "hr":
595
- return `---
596
-
597
- `;
598
- case "table":
599
- return `${cr(e)}
600
-
601
- `;
602
- default:
603
- return s;
604
- }
605
- }
606
- const Ge = (t) => {
607
- if (!t) return "";
608
- if (typeof window > "u" || typeof DOMParser > "u")
609
- return t;
610
- const l = new DOMParser().parseFromString(t, "text/html");
611
- return Array.from(l.body.childNodes).map((s) => Ee(s)).join("").replace(/\n{3,}/g, `
612
-
613
- `).trim();
614
- }, dr = /* @__PURE__ */ new Set([
615
- "area",
616
- "base",
617
- "br",
618
- "col",
619
- "embed",
620
- "hr",
621
- "img",
622
- "input",
623
- "link",
624
- "meta",
625
- "param",
626
- "source",
627
- "track",
628
- "wbr"
629
- ]), ur = (t) => {
630
- if (!t) return "";
631
- if (typeof window > "u" || typeof DOMParser > "u")
632
- return t;
633
- const l = new DOMParser().parseFromString(t, "text/html"), s = " ", a = (o, n) => {
634
- if (o.nodeType === Node.TEXT_NODE) {
635
- const g = (o.textContent || "").replace(/\s+/g, " ").trim();
636
- return g ? [`${s.repeat(n)}${g}`] : [];
637
- }
638
- if (o.nodeType !== Node.ELEMENT_NODE)
639
- return [];
640
- const c = o, r = c.tagName.toLowerCase(), i = Array.from(c.attributes).map((g) => `${g.name}="${g.value}"`).join(" "), b = i ? `<${r} ${i}>` : `<${r}>`, u = `</${r}>`;
641
- if (dr.has(r))
642
- return [`${s.repeat(n)}${b}`];
643
- const h = Array.from(c.childNodes).flatMap((g) => a(g, n + 1));
644
- if (!h.length)
645
- return [`${s.repeat(n)}${b}${u}`];
646
- if (c.childNodes.length === 1 && c.firstChild?.nodeType === Node.TEXT_NODE && h.length === 1) {
647
- const g = h[0].trim();
648
- return [`${s.repeat(n)}${b}${g}${u}`];
649
- }
650
- return [
651
- `${s.repeat(n)}${b}`,
652
- ...h,
653
- `${s.repeat(n)}${u}`
654
- ];
655
- };
656
- return Array.from(l.body.childNodes).flatMap((o) => a(o, 0)).join(`
657
- `);
658
- }, Ae = async (t, e) => e !== "md" ? t || "" : We(t || ""), fr = async (t, e) => e !== "md" ? ur(t || "") : Ge(t || ""), pr = async (t, e) => e !== "md" ? t || "" : Ge(t || ""), gr = (t) => String(t).trim().toLowerCase().split("-")[0], hr = () => typeof window > "u" ? "uk" : gr(
659
- localStorage.getItem("language") || localStorage.getItem("locale") || navigator.language || "uk"
660
- ), vr = (t, e) => {
661
- const l = e.replace(/^form\.richtext\./, "");
662
- return Me?.[t]?.form?.richtext?.[l] || Me?.uk?.form?.richtext?.[l] || e;
663
- }, De = (t) => t.startsWith("form.richtext.") ? t : `form.richtext.${t}`;
664
- function _e() {
665
- const e = tt()?.appContext?.config?.globalProperties, l = e?.$i18n;
666
- return { t: (a) => {
667
- const o = e?.$t, n = e?.$te, c = typeof l?.te == "function" ? l.te.bind(l) : null;
668
- if (typeof o == "function") {
669
- const r = De(a);
670
- if ((typeof n == "function" ? n(r) : typeof c == "function" ? c(r) : null) !== !1) {
671
- const b = o(r);
672
- if (b && b !== r)
673
- return b;
674
- }
675
- }
676
- return vr(hr(), De(a));
677
- } };
678
- }
679
- const mr = {
680
- components: { Quote: pt },
681
- props: { editor: Object },
682
- methods: {
683
- toggleBlockquote() {
684
- this.editor && this.editor.chain().toggleBlockquote().run();
685
- }
686
- }
687
- };
688
- function br(t, e, l, s, a, o) {
689
- const n = G("Quote");
690
- return v(), w("button", {
691
- title: "Blockquote",
692
- onClick: e[0] || (e[0] = (...c) => o.toggleBlockquote && o.toggleBlockquote(...c)),
693
- class: T(["text-gray-500 w-[30px] h-[30px] flex items-center justify-center rounded-full hover:text-gray-900 hover:bg-gray-100 focus:outline-none", { "bg-gray-100 text-gray-900": l.editor?.isActive("blockquote") }])
694
- }, [
695
- C(n, { class: "h-4 w-4" })
696
- ], 2);
697
- }
698
- const yr = /* @__PURE__ */ X(mr, [["render", br]]), xr = {
699
- components: { List: gt },
700
- props: { editor: Object },
701
- methods: {
702
- toggleBulletList() {
703
- this.editor && this.editor.chain().focus().toggleBulletList().run();
704
- }
705
- }
706
- };
707
- function wr(t, e, l, s, a, o) {
708
- const n = G("List");
709
- return v(), w("button", {
710
- title: "Bullet List",
711
- onClick: e[0] || (e[0] = (...c) => o.toggleBulletList && o.toggleBulletList(...c)),
712
- class: T(["text-gray-500 w-[30px] h-[30px] flex items-center justify-center rounded-full hover:text-gray-900 hover:bg-gray-100", { "bg-gray-100 text-gray-900": l.editor?.isActive("bulletList") }])
713
- }, [
714
- C(n, { class: "h-4 w-4" })
715
- ], 2);
716
- }
717
- const kr = /* @__PURE__ */ X(xr, [["render", wr]]), _r = {
718
- components: { ListOrdered: ht },
719
- props: { editor: Object },
720
- methods: {
721
- toggleOrderedList() {
722
- this.editor && this.editor.chain().focus().toggleOrderedList().run();
723
- }
724
- }
725
- };
726
- function $r(t, e, l, s, a, o) {
727
- const n = G("ListOrdered");
728
- return v(), w("button", {
729
- title: "Ordered List",
730
- onClick: e[0] || (e[0] = (...c) => o.toggleOrderedList && o.toggleOrderedList(...c)),
731
- class: T(["text-gray-500 w-[30px] h-[30px] flex items-center justify-center rounded-full hover:text-gray-900 hover:bg-gray-100", { "bg-gray-100 text-gray-900": l.editor?.isActive("orderedList") }])
732
- }, [
733
- C(n, { class: "h-4 w-4" })
734
- ], 2);
735
- }
736
- const Cr = /* @__PURE__ */ X(_r, [["render", $r]]), Ar = {
737
- components: { CodeXml: vt },
738
- props: { editor: Object },
739
- methods: {
740
- toggleCodeBlock() {
741
- this.editor && this.editor.chain().focus().toggleCodeBlock().run();
742
- }
743
- }
744
- };
745
- function Fr(t, e, l, s, a, o) {
746
- const n = G("CodeXml");
747
- return v(), w("button", {
748
- title: "Code Block",
749
- onClick: e[0] || (e[0] = (...c) => o.toggleCodeBlock && o.toggleCodeBlock(...c)),
750
- class: T(["text-gray-500 w-[30px] h-[30px] flex items-center justify-center rounded-full hover:text-gray-900 hover:bg-gray-100", { "bg-gray-100 text-gray-900": l.editor?.isActive("codeBlock") }])
751
- }, [
752
- C(n, { class: "h-4 w-4" })
753
- ], 2);
754
- }
755
- const Sr = /* @__PURE__ */ X(Ar, [["render", Fr]]), Tr = {
756
- components: { Bold: mt },
757
- props: {
758
- editor: Object
759
- },
760
- methods: {
761
- toggleBold() {
762
- this.editor && this.editor.commands.toggleBold();
763
- }
764
- }
765
- };
766
- function Lr(t, e, l, s, a, o) {
767
- const n = G("Bold");
768
- return v(), w("button", {
769
- title: "Bold Text",
770
- onClick: e[0] || (e[0] = (...c) => o.toggleBold && o.toggleBold(...c)),
771
- class: T(["h-[30px] w-[30px] flex items-center justify-center text-gray-500 rounded-full cursor-pointer hover:text-gray-900 hover:bg-gray-100", { "bg-gray-100 text-gray-900": l.editor?.isActive("bold") }])
772
- }, [
773
- C(n, { class: "h-4 w-4" }),
774
- e[1] || (e[1] = d("span", { class: "sr-only" }, "Bold", -1))
775
- ], 2);
776
- }
777
- const Br = /* @__PURE__ */ X(Tr, [["render", Lr]]), Ir = {
778
- components: { Italic: bt },
779
- props: {
780
- editor: Object
781
- },
782
- methods: {
783
- toggleItalic() {
784
- this.editor && this.editor.chain().toggleItalic().run();
785
- }
786
- }
787
- };
788
- function Er(t, e, l, s, a, o) {
789
- const n = G("Italic");
790
- return v(), w("button", {
791
- title: "Italic Text",
792
- onClick: e[0] || (e[0] = (...c) => o.toggleItalic && o.toggleItalic(...c)),
793
- class: T(["h-[30px] w-[30px] flex items-center justify-center text-gray-500 rounded-full cursor-pointer hover:text-gray-900 hover:bg-gray-100", { "bg-gray-100 text-gray-900": l.editor?.isActive("italic") }])
794
- }, [
795
- C(n, { class: "h-4 w-4" }),
796
- e[1] || (e[1] = d("span", { class: "sr-only" }, "Italic", -1))
797
- ], 2);
798
- }
799
- const jr = /* @__PURE__ */ X(Ir, [["render", Er]]), Pr = {
800
- __name: "vs-editor-underline",
801
- props: { editor: Object },
802
- setup(t) {
803
- const e = t, l = () => {
804
- e.editor && e.editor.chain().focus().toggleUnderline().run();
805
- };
806
- return (s, a) => (v(), w("button", {
807
- title: "Underline",
808
- onClick: l,
809
- class: T(["w-[30px] h-[30px] flex items-center justify-center rounded-full hover:text-gray-900 hover:bg-gray-100", [
810
- t.editor?.isActive("underline") ? "bg-gray-100 text-gray-900" : "text-gray-500"
811
- ]])
812
- }, [
813
- C(k(yt), { class: "h-4 w-4" })
814
- ], 2));
815
- }
816
- }, Mr = {
817
- __name: "vs-editor-strike",
818
- props: { editor: Object },
819
- setup(t) {
820
- const e = t, l = () => {
821
- e.editor && e.editor.chain().focus().toggleStrike().run();
822
- };
823
- return (s, a) => (v(), w("button", {
824
- title: "Strikethrough",
825
- onClick: l,
826
- class: T(["w-[30px] h-[30px] flex items-center justify-center rounded-full hover:text-gray-900 hover:bg-gray-100", [
827
- t.editor?.isActive("strike") ? "bg-gray-100 text-gray-900" : "text-gray-500"
828
- ]])
829
- }, [
830
- C(k(xt), { class: "h-4 w-4" })
831
- ], 2));
832
- }
833
- }, Hr = {
834
- components: { X: Te },
835
- props: {
836
- visible: { type: Boolean, default: () => !1 },
837
- modelValue: { type: Boolean, default: () => !1 },
838
- title: { type: String, default: () => "" },
839
- size: { type: String, default: () => "" },
840
- closeClickBack: { type: Boolean, default: () => !1 }
841
- },
842
- emits: ["update:visible", "update:modelValue", "onClose", "confirm", "cancel"],
843
- inheritAttrs: !1,
844
- name: "vs-dialog",
845
- mounted() {
846
- window.addEventListener("keydown", this.checkKey);
847
- },
848
- unmounted() {
849
- window.removeEventListener("keydown", this.checkKey);
850
- },
851
- computed: {
852
- hasSlot() {
853
- return !!this.$slots?.footer;
854
- },
855
- checkSize() {
856
- return this.size === "small" ? "md:w-5/12 w-9/12" : this.size === "medium" ? "md:w-6/12 w-9/12" : "lg:w-7/12 w-11/12";
857
- }
858
- },
859
- methods: {
860
- checkKey({ key: t }) {
861
- t === "Escape" && this.handleClose();
862
- },
863
- handleClose() {
864
- this.$emit("update:visible", !1), this.$emit("update:modelValue", !1), this.$emit("onClose");
865
- },
866
- handleConfirm() {
867
- this.$emit("confirm"), this.handleClose();
868
- },
869
- handleCancel() {
870
- this.$emit("cancel"), this.handleClose();
871
- },
872
- closeByClickBack(t, e) {
873
- e && t.target.classList.contains("vs-dialog-overlay") && this.handleClose();
874
- }
875
- }
876
- }, Nr = {
877
- key: 0,
878
- class: "vsTailwind ui-dialog__wrapper"
879
- }, zr = { class: "py-2.5 px-4 flex justify-between items-center border-0 border-b border-solid border-gray-200 dark:border-b-[#454545]" }, Dr = { class: "font-medium text-gray-800 dark:text-[#ffffff]" }, Or = { class: "ui-dialog__content p-4" }, Vr = {
880
- key: 0,
881
- class: "flex justify-end gap-x-2"
882
- };
883
- function Rr(t, e, l, s, a, o) {
884
- const n = G("X");
885
- return v(), K(Ve, { to: "body" }, [
886
- l.visible || l.modelValue ? (v(), w("div", Nr, [
887
- d("div", {
888
- onMousedown: e[1] || (e[1] = (c) => o.closeByClickBack(c, l.closeClickBack)),
889
- class: "vs-dialog-overlay vs-dialog w-full h-full fixed top-0 start-0 z-[100001] bg-black bg-opacity-50"
890
- }, [
891
- C(Re, {
892
- name: "content",
893
- appear: ""
894
- }, {
895
- default: D(() => [
896
- d("div", {
897
- class: T(["ui-dialog__modal opacity-1 flex flex-col bg-white dark:bg-[#1A1A1A] border dark:border-[#454545] pointer-events-auto shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] rounded-xl", [o.checkSize]])
898
- }, [
899
- d("div", zr, [
900
- d("h3", Dr, W(l.title), 1),
901
- d("button", {
902
- type: "button",
903
- class: "size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200 focus:outline-none focus:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600",
904
- onClick: e[0] || (e[0] = (...c) => o.handleClose && o.handleClose(...c))
905
- }, [
906
- e[2] || (e[2] = d("span", { class: "sr-only" }, "Close", -1)),
907
- C(n, { class: "h-4 w-4 flex-shrink-0" })
908
- ])
909
- ]),
910
- d("div", Or, [
911
- he(t.$slots, "default", {}, void 0, !0)
912
- ]),
913
- o.hasSlot ? (v(), w("div", Vr, [
914
- he(t.$slots, "footer", {
915
- handleClose: o.handleClose,
916
- handleConfirm: o.handleConfirm,
917
- handleCancel: o.handleCancel
918
- }, void 0, !0)
919
- ])) : R("", !0)
920
- ], 2)
921
- ]),
922
- _: 3
923
- })
924
- ], 32)
925
- ])) : R("", !0)
926
- ]);
927
- }
928
- const Ye = /* @__PURE__ */ X(Hr, [["render", Rr], ["__scopeId", "data-v-56ad9010"]]), Ur = rt({
929
- components: {
930
- IconClose: Te,
931
- IconSearch: kt,
932
- IconEmail: wt
933
- },
934
- inheritAttrs: !1,
935
- props: {
936
- icon: { type: String, default: () => "" },
937
- disabled: { type: Boolean, default: () => !1 },
938
- clearable: { type: Boolean, default: () => !1 },
939
- modelValue: { type: String, default: () => "" },
940
- placeholder: { type: String, default: () => "" },
941
- iconPosition: { type: String, default: () => "right" },
942
- type: { type: String, default: () => "text" },
943
- style: { type: Object, default: () => null },
944
- size: { type: String, default: () => "md" },
945
- attrs: { type: Object, default: () => {
946
- } }
947
- },
948
- emits: ["onInput", "update:modelValue", "blur", "focus"],
949
- computed: {
950
- checkSize() {
951
- return (this.style?.size || this.size) === "xs" ? "h-[32px] text-sm" : (this.style?.size || this.size) === "md" ? "h-[38px] text-sm" : (this.style?.size || this.size) === "lg" ? "h-[46px] text-[20px]" : "h-[38px] text-sm";
952
- },
953
- value: {
954
- get() {
955
- return this.modelValue;
956
- },
957
- set(t) {
958
- this.$emit("update:modelValue", t.trim());
959
- }
960
- },
961
- clearIconStyle() {
962
- return [
963
- {
964
- "right-8": this.icon && this.iconPosition === "right",
965
- "right-3": !this.icon || this.iconPosition !== "right",
966
- "pointer-events-none": this.disabled
967
- }
968
- ];
969
- },
970
- iconStylePosition() {
971
- return [
972
- {
973
- "left-3": this.icon && this.iconPosition === "left",
974
- "right-3": this.icon && this.iconPosition === "right"
975
- }
976
- ];
977
- },
978
- inputStyle() {
979
- return [
980
- {
981
- "!pr-8": this.clearable && !this.icon,
982
- "!pr-7": this.clearable,
983
- "!pr-16": this.clearable && this.icon && this.iconPosition === "right",
984
- "!pl-8": this.icon && this.iconPosition === "left",
985
- "!pr-[50px]": this.clearable && this.value && this.icon && this.iconPosition === "right",
986
- "!cursor-not-allowed bg-slate-100": this.disabled,
987
- "bg-white": !this.disabled
988
- }
989
- ];
990
- }
991
- },
992
- methods: {
993
- // Emits input value to the upper level
994
- handleInput() {
995
- this.$emit("onInput", this.modelValue);
996
- },
997
- handleBlur() {
998
- this.$emit("blur");
999
- },
1000
- handleFocus() {
1001
- this.$emit("focus");
1002
- },
1003
- // Clears input
1004
- clearInput() {
1005
- this.$emit("update:modelValue", ""), this.$emit("onInput", "");
1006
- },
1007
- async inputFocus() {
1008
- await this.$refs.vsText?.focus();
1009
- }
1010
- }
1011
- }), qr = { class: "vs-form-text relative bg-white rounded-lg" }, Kr = {
1012
- key: 2,
1013
- class: "absolute bottom-2/4 translate-y-2/4 left-[10px] cursor-pointer"
1014
- }, Wr = ["disabled", "type", "placeholder"];
1015
- function Xr(t, e, l, s, a, o) {
1016
- const n = G("IconClose"), c = G("IconSearch"), r = G("IconEmail");
1017
- return v(), w("div", qr, [
1018
- t.clearable && t.value ? (v(), w("div", {
1019
- key: 0,
1020
- class: "absolute bottom-2/4 translate-y-2/4 right-3 cursor-pointer",
1021
- onClick: e[0] || (e[0] = (...i) => t.clearInput && t.clearInput(...i))
1022
- }, [
1023
- C(n, { class: "h-4 w-4 stroke-gray-500 transition-all hover:stroke-red-500" })
1024
- ])) : R("", !0),
1025
- t.icon && t.icon === "search" ? (v(), w("div", {
1026
- key: 1,
1027
- class: T(["absolute bottom-2/4 translate-y-2/4 cursor-pointer", t.iconStylePosition])
1028
- }, [
1029
- C(c, { class: "h-4 w-4 stroke-gray-500 transition-all" })
1030
- ], 2)) : t.icon && t.icon === "email" ? (v(), w("div", Kr, [
1031
- C(r, { class: "h-4 w-4 stroke-gray-500 transition-all" })
1032
- ])) : (v(), w("i", {
1033
- key: 3,
1034
- class: T(["absolute bottom-2/4 translate-y-2/4 text-gray-500 cursor-pointer", ["ti " + t.icon, t.iconStylePosition]])
1035
- }, null, 2)),
1036
- t.clearable && t.value ? (v(), w("div", {
1037
- key: 4,
1038
- class: "absolute bottom-2/4 translate-y-2/4 right-3 cursor-pointer",
1039
- onClick: e[1] || (e[1] = (...i) => t.clearInput && t.clearInput(...i))
1040
- }, [
1041
- C(n, { class: "h-4 w-4 stroke-gray-500 transition-all hover:stroke-red-500" })
1042
- ])) : R("", !0),
1043
- ie(d("input", ot({
1044
- ref: "vsText",
1045
- disabled: t.disabled,
1046
- type: t.type,
1047
- onInput: e[2] || (e[2] = (...i) => t.handleInput && t.handleInput(...i)),
1048
- placeholder: t.placeholder,
1049
- "onUpdate:modelValue": e[3] || (e[3] = (i) => t.value = i)
1050
- }, t.style?.attrs || t.attrs || {}, {
1051
- onFocus: e[4] || (e[4] = (...i) => t.handleFocus && t.handleFocus(...i)),
1052
- onBlur: e[5] || (e[5] = (...i) => t.handleBlur && t.handleBlur(...i)),
1053
- class: [[t.inputStyle, t.checkSize], "py-2 px-3 block w-full border border-solid placeholder:text-nowrap border-stone-200 rounded-lg text-sm text-stone-800 placeholder:text-stone-400 focus:outline focus:z-10 focus:border-blue-500 focus:ring-blue-500 focus:outline-blue-500"]
1054
- }), null, 16, Wr), [
1055
- [lt, t.value]
1056
- ])
1057
- ]);
1058
- }
1059
- const Qe = /* @__PURE__ */ X(Ur, [["render", Xr], ["__scopeId", "data-v-eb21a54f"]]), Gr = ["title"], Yr = { class: "flex flex-col gap-3 p-[20px]" }, Qr = { class: "relative flex items-center gap-2" }, Zr = { class: "flex-1" }, Jr = {
1060
- key: 0,
1061
- class: "flex items-center gap-2 flex-shrink-0"
1062
- }, eo = ["title"], to = ["title"], ro = { class: "flex items-center gap-2" }, oo = {
1063
- for: "openInNewTab",
1064
- class: "text-sm text-gray-700 cursor-pointer"
1065
- }, lo = { class: "flex justify-end p-[20px] gap-[10px] border-t w-full" }, ao = /* @__PURE__ */ Object.assign({
1066
- inheritAttrs: !1
1067
- }, {
1068
- __name: "vs-editor-link",
1069
- props: { editor: Object },
1070
- setup(t) {
1071
- const { t: e } = _e(), l = t, s = $(!1), a = $(""), o = $(!1), n = $(!1), c = () => {
1072
- if (!l.editor) return;
1073
- l.editor.chain().focus().extendMarkRange("link").run();
1074
- const h = l.editor.getAttributes("link");
1075
- h.href ? (o.value = !0, a.value = h.href, n.value = h.target === "_blank") : (o.value = !1, a.value = "", n.value = !1), s.value = !0;
1076
- }, r = () => {
1077
- s.value = !1, a.value = "", o.value = !1, n.value = !1;
1078
- }, i = () => {
1079
- if (!l.editor || !a.value.trim()) return;
1080
- let h = a.value.trim();
1081
- h.match(/^https?:\/\//i) || (h = "https://" + h), l.editor.chain().focus().setLink({
1082
- href: h,
1083
- target: n.value ? "_blank" : null
1084
- }).run(), r();
1085
- }, b = () => {
1086
- l.editor && (l.editor.chain().focus().unsetLink().run(), r());
1087
- }, u = () => {
1088
- if (!a.value) return;
1089
- let h = a.value.trim();
1090
- h.match(/^https?:\/\//i) || (h = "https://" + h), window.open(h, "_blank", "noopener,noreferrer");
1091
- };
1092
- return (h, g) => (v(), w(re, null, [
1093
- d("button", {
1094
- title: k(e)("form.richtext.link") || "Посилання",
1095
- onClick: c,
1096
- class: T(["text-gray-500 w-[30px] h-[30px] flex items-center justify-center rounded-full hover:text-gray-900 hover:bg-gray-100 focus:outline-none", { "bg-gray-100 text-gray-900": t.editor?.isActive("link") }])
1097
- }, [
1098
- C(k(_t), { class: "h-4 w-4" })
1099
- ], 10, Gr),
1100
- C(Ye, {
1101
- title: o.value ? k(e)("form.richtext.editLink") || "Редагувати посилання" : k(e)("form.richtext.linkTitle") || "Додати посилання",
1102
- visible: s.value,
1103
- "onUpdate:visible": g[2] || (g[2] = (S) => s.value = S),
1104
- size: "small"
1105
- }, {
1106
- footer: D(() => [
1107
- d("div", lo, [
1108
- d("button", {
1109
- style: { border: "1px solid #000" },
1110
- onClick: r,
1111
- class: "py-2 px-3 inline-flex items-center gap-x-2 text-sm whitespace-nowrap text-black border-gray-200 rounded-lg !border-gray-200 hover:bg-gray-100 duration-300"
1112
- }, W(k(e)("form.richtext.cancel") || "Скасувати"), 1),
1113
- d("button", {
1114
- onClick: i,
1115
- class: "py-2 px-3 inline-flex items-center gap-x-2 text-[14px] font-[400] whitespace-nowrap text-white bg-blue-500 rounded-lg !border-gray-200 hover:bg-blue-700 duration-300"
1116
- }, W(o.value ? k(e)("form.richtext.update") || "Оновити" : k(e)("form.richtext.create") || "Створити"), 1)
1117
- ])
1118
- ]),
1119
- default: D(() => [
1120
- d("div", Yr, [
1121
- d("div", Qr, [
1122
- d("div", Zr, [
1123
- C(Qe, {
1124
- modelValue: a.value,
1125
- "onUpdate:modelValue": g[0] || (g[0] = (S) => a.value = S),
1126
- placeholder: k(e)("form.richtext.linkUrl") || "Введіть URL",
1127
- class: "w-full"
1128
- }, null, 8, ["modelValue", "placeholder"])
1129
- ]),
1130
- o.value ? (v(), w("div", Jr, [
1131
- d("button", {
1132
- onClick: u,
1133
- class: "text-gray-500 w-[30px] h-[30px] flex items-center justify-center rounded-full hover:text-gray-900 hover:bg-gray-100 focus:outline-none transition-colors",
1134
- title: k(e)("form.richtext.openLink") || "Відкрити посилання"
1135
- }, [
1136
- C(k($t), { class: "h-4 w-4" })
1137
- ], 8, eo),
1138
- d("button", {
1139
- onClick: b,
1140
- class: "text-gray-500 w-[30px] h-[30px] flex items-center justify-center rounded-full hover:text-red-600 hover:bg-red-50 focus:outline-none transition-colors",
1141
- title: k(e)("form.richtext.removeLink") || "Видалити посилання"
1142
- }, [
1143
- C(k(Ct), { class: "h-4 w-4" })
1144
- ], 8, to)
1145
- ])) : R("", !0)
1146
- ]),
1147
- d("div", ro, [
1148
- ie(d("input", {
1149
- type: "checkbox",
1150
- id: "openInNewTab",
1151
- "onUpdate:modelValue": g[1] || (g[1] = (S) => n.value = S),
1152
- class: "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
1153
- }, null, 512), [
1154
- [at, n.value]
1155
- ]),
1156
- d("label", oo, W(k(e)("form.richtext.openInNewTab") || "Відкривати в новій вкладці"), 1)
1157
- ])
1158
- ])
1159
- ]),
1160
- _: 1
1161
- }, 8, ["title", "visible"])
1162
- ], 64));
1163
- }
1164
- }), ge = async (t, e, l, s = 10) => {
1165
- if (!e || !l) return;
1166
- await be();
1167
- const a = await l?.getBoundingClientRect(), o = await e?.getBoundingClientRect();
1168
- if (!o || !a) return;
1169
- const n = await parseInt(e?.getBoundingClientRect()?.height), c = await parseInt(e?.getBoundingClientRect()?.width), r = await parseInt(l?.getBoundingClientRect()?.height), i = await parseInt(l?.getBoundingClientRect()?.width), b = await window.innerHeight, u = await window.innerWidth;
1170
- let h = 0, g = 0;
1171
- const S = o.bottom + s + r;
1172
- switch (t) {
1173
- case "top":
1174
- o.top - a.height - s < 0 ? h = o.top - a.height + s + r + n : h = o.top - a.height - s, u > i + o.right + 30 ? g = o.left - a.width / 2 + o.width / 2 : g = u - 30 - i;
1175
- break;
1176
- case "bottom":
1177
- b > S ? h = o.bottom + s : h = o.bottom - s - r - n, g = o.left - a.width / 2 + o.width / 2;
1178
- break;
1179
- case "left":
1180
- h = o.top - a.height / 2 + o.height / 2, o.left - a.width - s > 0 ? g = o.left - a.width - s : g = 10;
1181
- break;
1182
- case "right":
1183
- h = o.top - a.height / 2 + o.height / 2, u - c > i ? g = o.right + s : g = u - 30 - i;
1184
- break;
1185
- case "top-right":
1186
- o.top - a.height - s < 0 ? h = o.top - a.height + s + r + n : h = o.top - a.height - s, u - c > i ? g = o.right + s : g = u - 30 - i;
1187
- break;
1188
- case "top-left":
1189
- o.top - a.height - s < 0 ? h = o.top - a.height + s + r + n : h = o.top - a.height - s, o.left - a.width - s > 0 ? g = o.left - a.width - s : g = 10;
1190
- break;
1191
- case "top-start":
1192
- o.top - a.height - s < 0 ? h = o.top - a.height + s + r + n : h = o.top - a.height - s, o.left > 0 ? g = o.left : g = 10;
1193
- break;
1194
- case "bottom-right":
1195
- b > S ? h = o.bottom + s : h = o.bottom - s - r - n, u - c > i ? g = o.left : g = u - 30 - i;
1196
- break;
1197
- case "bottom-left":
1198
- b > S ? h = o.bottom + s : h = o.bottom - s - r - n, o.left > 0 ? g = o.right - i : g = 10;
1199
- break;
1200
- case "bottom-start":
1201
- b > S ? h = o.bottom + s : h = o.bottom - s - r - n, o.left > 0 ? g = o.left : g = 10;
1202
- break;
1203
- }
1204
- h + r > b ? h = b - r - s : h < 0 && (h = s), g + i > u ? g = u - i - s : g < 0 && (g = s), l instanceof HTMLElement && (l.style.top = `${h}px`, l.style.left = `${g}px`, l.style.position = "fixed");
1205
- }, so = { class: "text-center" }, no = { class: "py-2 px-4 w-full text-sm text-stone-800 bg-white shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] rounded-lg focus:outline-none focus:bg-stone-100 dark:bg-neutral-900 dark:text-neutral-200 dark:focus:bg-neutral-800 after:h-4 after:absolute after:-bottom-4 after:start-0 after:w-full before:h-4 before:absolute before:-top-4 before:start-0 before:w-full" }, ce = /* @__PURE__ */ Object.assign({
1206
- inheritAttrs: !1
1207
- }, {
1208
- __name: "vs-popover",
1209
- props: {
1210
- isOpen: { type: Boolean, default: () => !1 },
1211
- placement: { type: String, default: "top" },
1212
- gap: { type: Number, default: 8 },
1213
- width: { type: [String, Number], default: "" },
1214
- disabled: { type: Boolean, default: !1 },
1215
- trigger: { type: String, default: "click" },
1216
- teleport: { type: String, default: "body" }
1217
- },
1218
- emits: ["isvisible"],
1219
- setup(t, { expose: e, emit: l }) {
1220
- const s = t, a = l, o = $(!1), n = $([]), c = $(null), r = $(null), i = $(null);
1221
- ue(o, (L) => {
1222
- L ? (b(), window.addEventListener(
1223
- "resize",
1224
- () => ge(s.placement, r.value, i.value)
1225
- ), ge(s.placement, r.value, i.value)) : window.removeEventListener(
1226
- "resize",
1227
- () => ge(s.placement, r.value, i.value)
1228
- ), a("isvisible", L);
1229
- }), fe(() => {
1230
- window.addEventListener("click", H), window.addEventListener("popstate", z), window.addEventListener("scroll", q, !0), b();
1231
- }), Ue(() => {
1232
- window.removeEventListener("click", H), window.removeEventListener("popstate", z), u();
1233
- });
1234
- const b = () => {
1235
- let L = c.value;
1236
- for (; L && L !== document.body; )
1237
- (L.scrollHeight > L.clientHeight || L.scrollWidth > L.clientWidth) && (L.addEventListener("scroll", j), n.value.push(L)), L = L.parentElement;
1238
- document.body && (document.body.addEventListener("scroll", j), n.value.push(document.body));
1239
- }, u = () => {
1240
- n.value.forEach((L) => {
1241
- L.removeEventListener("scroll", j);
1242
- }), n.value = [];
1243
- }, h = () => {
1244
- o.value = !0, ge(s.placement, r.value, i.value);
1245
- }, g = () => {
1246
- o.value = !1;
1247
- }, S = async () => {
1248
- await ge(s.placement, r.value, i.value), o.value = !o.value;
1249
- }, j = () => {
1250
- o.value = !1;
1251
- }, H = (L) => {
1252
- if (!L) {
1253
- o.value = !1;
1254
- return;
1255
- }
1256
- r.value?.contains(L.target) || i.value?.contains(L.target) || (o.value = !1);
1257
- }, z = () => {
1258
- o.value && (o.value = !1);
1259
- }, q = (L) => {
1260
- o.value && i.value && !i.value.contains(L.target) && (o.value = !1);
1261
- };
1262
- return e({
1263
- togglePopover: S
1264
- }), (L, Y) => (v(), w("div", {
1265
- ref_key: "popover",
1266
- ref: c,
1267
- class: "vs-popover inline-block"
1268
- }, [
1269
- d("div", so, [
1270
- t.trigger === "click" ? (v(), w("div", {
1271
- key: 0,
1272
- ref_key: "popoverRef",
1273
- ref: r,
1274
- onClick: S,
1275
- class: T({ "pointer-events-none": t.disabled })
1276
- }, [
1277
- he(L.$slots, "reference", {}, () => [
1278
- Y[0] || (Y[0] = d("button", null, "Click me!", -1))
1279
- ])
1280
- ], 2)) : R("", !0),
1281
- t.trigger === "hover" ? (v(), w("div", {
1282
- key: 1,
1283
- ref_key: "popoverRef",
1284
- ref: r,
1285
- onMouseover: h,
1286
- onMouseleave: g,
1287
- class: T({ "pointer-events-none": t.disabled })
1288
- }, [
1289
- he(L.$slots, "reference", {}, () => [
1290
- Y[1] || (Y[1] = d("button", null, "Click me!", -1))
1291
- ])
1292
- ], 34)) : R("", !0),
1293
- (v(), K(Ve, { to: t.teleport }, [
1294
- C(Re, { name: "fade" }, {
1295
- default: D(() => [
1296
- ie(d("div", {
1297
- class: T(["vsTailwind vs-popover__content", t.placement]),
1298
- ref_key: "contentPop",
1299
- ref: i,
1300
- style: ae({
1301
- width: t.width ? t.width + "px" : "fit-content",
1302
- zIndex: 100001
1303
- })
1304
- }, [
1305
- d("div", no, [
1306
- he(L.$slots, "default", {}, () => [
1307
- Y[2] || (Y[2] = d("span", null, "Popover content", -1))
1308
- ])
1309
- ])
1310
- ], 6), [
1311
- [ye, o.value]
1312
- ])
1313
- ]),
1314
- _: 3
1315
- })
1316
- ], 8, ["to"]))
1317
- ])
1318
- ], 512));
1319
- }
1320
- }), io = { class: "flex flex-col gap-[2px] p-[2px]" }, co = ["onClick"], uo = {
1321
- __name: "vs-editor-table",
1322
- props: { editor: Object },
1323
- setup(t) {
1324
- const { t: e } = _e(), l = t, s = $(!1), a = $("popover"), o = () => {
1325
- l.editor && (l.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: !0 }).run(), a.value.togglePopover());
1326
- }, n = () => {
1327
- l.editor && (l.editor.chain().focus().addColumnAfter().run(), a.value.togglePopover());
1328
- }, c = () => {
1329
- l.editor && (l.editor.chain().focus().addRowAfter().run(), a.value.togglePopover());
1330
- }, r = () => {
1331
- l.editor && (l.editor.chain().focus().deleteColumn().run(), a.value.togglePopover());
1332
- }, i = () => {
1333
- l.editor && (l.editor.chain().focus().deleteRow().run(), a.value.togglePopover());
1334
- }, b = () => {
1335
- l.editor && (l.editor.chain().focus().deleteTable().run(), a.value.togglePopover());
1336
- }, u = () => {
1337
- l.editor && (l.editor.chain().focus().mergeCells().run(), a.value.togglePopover());
1338
- }, h = () => {
1339
- l.editor && (l.editor.chain().focus().splitCell().run(), a.value.togglePopover());
1340
- }, g = P(() => [
1341
- { text: e("form.richtext.createTable"), function: o },
1342
- { text: e("form.richtext.addColumn"), function: n },
1343
- { text: e("form.richtext.addRow"), function: c },
1344
- { text: e("form.richtext.deleteColumn"), function: r },
1345
- { text: e("form.richtext.deleteRow"), function: i },
1346
- { text: e("form.richtext.deleteTable"), function: b },
1347
- { text: e("form.richtext.mergeCells"), function: u },
1348
- { text: e("form.richtext.splitCells"), function: h }
1349
- ]);
1350
- return (S, j) => (v(), K(ce, {
1351
- ref_key: "popover",
1352
- ref: a,
1353
- placement: "bottom",
1354
- onIsvisible: j[0] || (j[0] = (H) => s.value = H)
1355
- }, {
1356
- reference: D(() => [
1357
- d("button", {
1358
- title: "Table",
1359
- class: T(["w-[30px] h-[30px] flex items-center justify-center text-gray-500 rounded-full hover:text-gray-900 hover:bg-gray-100", [s.value ? "bg-gray-100 text-gray-900" : "text-gray-500"]])
1360
- }, [
1361
- C(k(At), { class: "h-4 w-4" })
1362
- ], 2)
1363
- ]),
1364
- default: D(() => [
1365
- d("div", io, [
1366
- (v(!0), w(re, null, le(g.value, (H, z) => (v(), w("button", {
1367
- key: z,
1368
- onClick: H?.function,
1369
- class: "px-2 py-1 text-gray-500 text-start hover:text-gray-900 hover:bg-gray-100 rounded"
1370
- }, W(H.text), 9, co))), 128))
1371
- ])
1372
- ]),
1373
- _: 1
1374
- }, 512));
1375
- }
1376
- }, fo = { class: "flex gap-[4px] p-1" }, po = ["title", "onClick"], go = {
1377
- __name: "vs-editor-align",
1378
- props: { editor: Object },
1379
- setup(t) {
1380
- const e = t, l = {
1381
- left: Lt,
1382
- center: Tt,
1383
- right: St,
1384
- justify: Ft
1385
- }, s = $(!1), a = $("popover"), o = $("left"), n = P(() => e.editor ? e.editor.isActive("paragraph", { textAlign: "left" }) || e.editor.isActive("heading", { textAlign: "left" }) : !1), c = P(() => e.editor ? e.editor.isActive("paragraph", { textAlign: "right" }) || e.editor.isActive("heading", { textAlign: "right" }) : !1), r = P(() => e.editor ? e.editor.isActive("paragraph", { textAlign: "center" }) || e.editor.isActive("heading", { textAlign: "center" }) : !1), i = P(() => e.editor ? e.editor.isActive("paragraph", { textAlign: "justify" }) || e.editor.isActive("heading", { textAlign: "justify" }) : !1), b = P(() => n.value || c.value || r.value || i.value), u = () => {
1386
- c.value ? o.value = "right" : r.value ? o.value = "center" : i.value ? o.value = "justify" : o.value = "left";
1387
- };
1388
- ue([n, c, r, i], () => {
1389
- u();
1390
- }, { immediate: !0 }), fe(() => {
1391
- e.editor && (e.editor.on("selectionUpdate", u), e.editor.on("update", u));
1392
- }), ke(() => {
1393
- e.editor && (e.editor.off("selectionUpdate", u), e.editor.off("update", u));
1394
- });
1395
- const h = (S) => {
1396
- e.editor && (e.editor.chain().focus().setTextAlign(S).run(), o.value = S);
1397
- }, g = $([
1398
- { id: "left", isActive: n },
1399
- { id: "center", isActive: r },
1400
- { id: "right", isActive: c },
1401
- { id: "justify", isActive: i }
1402
- ]);
1403
- return (S, j) => (v(), K(ce, {
1404
- ref_key: "popover",
1405
- ref: a,
1406
- placement: "bottom",
1407
- onIsvisible: j[0] || (j[0] = (H) => s.value = H)
1408
- }, {
1409
- reference: D(() => [
1410
- d("button", {
1411
- title: "Text Align",
1412
- class: T(["w-[30px] h-[30px] flex items-center justify-center text-gray-500 rounded-full hover:text-gray-900 hover:bg-gray-100", [b.value ? "bg-gray-100 text-gray-900" : "text-gray-500"]])
1413
- }, [
1414
- (v(), K(Fe(l[o.value]), {
1415
- height: "16",
1416
- width: "16"
1417
- }))
1418
- ], 2)
1419
- ]),
1420
- default: D(() => [
1421
- d("div", fo, [
1422
- (v(!0), w(re, null, le(g.value, (H) => (v(), w("button", {
1423
- title: "Text align " + H?.id,
1424
- class: T(["w-[30px] h-[30px] flex items-center justify-center text-gray-500 rounded hover:text-gray-900 hover:bg-gray-100", { "bg-gray-100 text-gray-900": H?.isActive }]),
1425
- key: H?.id,
1426
- onClick: (z) => h(H?.id)
1427
- }, [
1428
- (v(), K(Fe(l[H?.id]), {
1429
- height: "16",
1430
- width: "16"
1431
- }))
1432
- ], 10, po))), 128))
1433
- ])
1434
- ]),
1435
- _: 1
1436
- }, 512));
1437
- }
1438
- }, ho = { class: "flex flex-col gap-[2px] p-[2px]" }, vo = ["onClick"], mo = {
1439
- __name: "vs-editor-type-tag",
1440
- props: { editor: Object },
1441
- setup(t) {
1442
- const { t: e } = _e(), l = t, s = $(!1), a = $("popover"), o = () => {
1443
- l.editor && (l.editor?.chain().focus().setParagraph().run(), a.value.togglePopover());
1444
- }, n = (r) => {
1445
- l.editor && (l.editor?.chain().focus().toggleHeading({ level: r }).run(), a.value.togglePopover());
1446
- }, c = P(() => [
1447
- { text: e("form.richtext.heading1"), id: 1, style: "font-[700] text-[30px]" },
1448
- { text: e("form.richtext.heading2"), id: 2, style: "font-[700] text-[26px]" },
1449
- { text: e("form.richtext.heading3"), id: 3, style: "font-[700] text-[22px]" },
1450
- { text: e("form.richtext.heading4"), id: 4, style: "font-[700] text-[18px]" },
1451
- { text: e("form.richtext.heading5"), id: 5, style: "font-[500] text-[16px]" },
1452
- { text: e("form.richtext.heading6"), id: 6, style: "font-[400] text-[14px]" }
1453
- ]);
1454
- return (r, i) => (v(), K(ce, {
1455
- ref_key: "popover",
1456
- ref: a,
1457
- placement: "bottom",
1458
- onIsvisible: i[0] || (i[0] = (b) => s.value = b)
1459
- }, {
1460
- reference: D(() => [
1461
- d("button", {
1462
- title: "Type Tag",
1463
- class: T(["w-[30px] h-[30px] flex items-center justify-center text-gray-500 rounded-full hover:text-gray-900 hover:bg-gray-100", [s.value ? "bg-gray-100 text-gray-900" : "text-gray-500"]])
1464
- }, [
1465
- C(k(Bt), { class: "h-4 w-4" })
1466
- ], 2)
1467
- ]),
1468
- default: D(() => [
1469
- d("div", ho, [
1470
- d("button", {
1471
- onClick: o,
1472
- class: T(["px-2 py-1 text-gray-500 text-start hover:text-gray-900 hover:bg-gray-100 rounded", [t.editor?.isActive("paragraph") ? "bg-gray-100" : ""]])
1473
- }, W(k(e)("form.richtext.paragraph")), 3),
1474
- (v(!0), w(re, null, le(c.value, (b, u) => (v(), w("button", {
1475
- key: u,
1476
- onClick: (h) => n(b?.id),
1477
- class: T(["px-2 py-1 text-gray-500 text-start hover:text-gray-900 hover:bg-gray-100 rounded leading-[100%]", [
1478
- b?.style,
1479
- t.editor?.isActive("heading", { level: b?.id }) ? "bg-gray-100" : ""
1480
- ]])
1481
- }, W(k(e)(`form.richtext.heading${b?.id}`)), 11, vo))), 128))
1482
- ])
1483
- ]),
1484
- _: 1
1485
- }, 512));
1486
- }
1487
- }, bo = {
1488
- components: { VsText: Qe },
1489
- inheritAttrs: !1,
1490
- events: ["update:modelValue"],
1491
- props: {
1492
- modelValue: { type: String },
1493
- disabled: { type: Boolean, default: () => !1 },
1494
- clearable: { type: Boolean, default: () => !1 },
1495
- isTextInputShown: { type: Boolean, default: () => !0 }
1496
- },
1497
- computed: {
1498
- value: {
1499
- get() {
1500
- return this.modelValue ?? "";
1501
- },
1502
- set(t) {
1503
- this.$emit("update:modelValue", t);
1504
- }
1505
- }
1506
- }
1507
- }, yo = { class: "flex items-center w-full max-w-[182px]" }, xo = ["disabled"];
1508
- function wo(t, e, l, s, a, o) {
1509
- const n = G("vs-text");
1510
- return v(), w("div", yo, [
1511
- ie(d("input", {
1512
- "onUpdate:modelValue": e[0] || (e[0] = (c) => o.value = c),
1513
- type: "color",
1514
- class: T(["w-[38px] h-[38px] min-h-[38px] min-w-[38px] py-[2px] px-[3px] -ml-1 dark:bg-neutral-800 border dark:border-neutral-700 border-stone-200 rounded-lg", l.disabled ? "cursor-not-allowed" : "cursor-pointer"]),
1515
- disabled: l.disabled
1516
- }, null, 10, xo), [
1517
- [st, o.value]
1518
- ]),
1519
- l.isTextInputShown ? (v(), K(n, {
1520
- key: 0,
1521
- modelValue: o.value,
1522
- "onUpdate:modelValue": e[1] || (e[1] = (c) => o.value = c),
1523
- class: "ml-2 w-full",
1524
- disabled: l.disabled,
1525
- clearable: l.clearable
1526
- }, null, 8, ["modelValue", "disabled", "clearable"])) : R("", !0)
1527
- ]);
1528
- }
1529
- const Ze = /* @__PURE__ */ X(bo, [["render", wo]]), ko = { class: "flex gap-[4px] mb-[8px]" }, _o = { class: "grid grid-rows-3 grid-cols-7" }, $o = { class: "w-full h-full rounded border border-gray-300 overflow-hidden" }, Co = ["onClick", "title"], Ao = {
1530
- __name: "vs-editor-color",
1531
- props: {
1532
- editor: Object
1533
- },
1534
- setup(t) {
1535
- const e = t, l = $(null), s = $("#000000"), a = P(() => e.editor && e.editor.getAttributes("textStyle").color || "#000000"), o = P(() => a.value !== "#000000"), n = () => {
1536
- e.editor && (s.value = a.value);
1537
- };
1538
- fe(() => {
1539
- e.editor && (e.editor.on("selectionUpdate", n), e.editor.on("update", n), n());
1540
- }), ke(() => {
1541
- e.editor && (e.editor.off("selectionUpdate", n), e.editor.off("update", n));
1542
- });
1543
- const c = $([
1544
- "#172B4D",
1545
- "#0747A6",
1546
- "#008DA6",
1547
- "#006644",
1548
- "#FF991F",
1549
- "#BF2600",
1550
- "#403294",
1551
- "#97A0AF",
1552
- "#4C9AFF",
1553
- "#00B8D9",
1554
- "#36B37E",
1555
- "#FFC400",
1556
- "#FF5630",
1557
- "#6554C0",
1558
- "#FFFFFF",
1559
- "#B3D4FF",
1560
- "#B3F5FF",
1561
- "#ABF5D1",
1562
- "#FFF0B3",
1563
- "#FFBDAD",
1564
- "#EAE6FF"
1565
- ]), r = (u) => {
1566
- e.editor && (e.editor.chain().focus().setColor(u).run(), s.value = u, l.value && l.value.togglePopover());
1567
- }, i = () => {
1568
- r(s.value);
1569
- }, b = (u) => ({
1570
- "#172B4D": "Default",
1571
- "#0747A6": "Bright blue",
1572
- "#008DA6": "Bright blue-green",
1573
- "#006644": "Bright green",
1574
- "#FF991F": "Bright orange",
1575
- "#BF2600": "Bright red",
1576
- "#403294": "Bright purple",
1577
- "#97A0AF": "Gray",
1578
- "#4C9AFF": "Blue",
1579
- "#00B8D9": "Blue-green",
1580
- "#36B37E": "Green",
1581
- "#FFC400": "Yellow",
1582
- "#FF5630": "Red",
1583
- "#6554C0": "Purple",
1584
- "#FFFFFF": "White",
1585
- "#B3D4FF": "Bright blue",
1586
- "#B3F5FF": "Bright blue-green",
1587
- "#ABF5D1": "Bright green",
1588
- "#FFF0B3": "Bright yellow",
1589
- "#FFBDAD": "Bright red",
1590
- "#EAE6FF": "Bright purple"
1591
- })[u] || u;
1592
- return (u, h) => (v(), K(ce, {
1593
- ref_key: "popover",
1594
- ref: l,
1595
- placement: "bottom"
1596
- }, {
1597
- reference: D(() => [
1598
- d("button", {
1599
- title: "Text Color",
1600
- class: T(["flex flex-col h-[30px] min-w-[30px] px-1 rounded-full hover:bg-gray-100 justify-center items-center relative flex", { "bg-gray-100": o.value }])
1601
- }, [
1602
- h[1] || (h[1] = d("span", { class: "leading-none" }, "A", -1)),
1603
- d("span", {
1604
- class: "block h-1 w-5",
1605
- style: ae({ backgroundColor: s.value })
1606
- }, null, 4)
1607
- ], 2)
1608
- ]),
1609
- default: D(() => [
1610
- d("div", null, [
1611
- d("div", ko, [
1612
- C(Ze, {
1613
- modelValue: s.value,
1614
- "onUpdate:modelValue": h[0] || (h[0] = (g) => s.value = g)
1615
- }, null, 8, ["modelValue"]),
1616
- d("button", {
1617
- onClick: i,
1618
- class: "h-[38px] w-[38px] bg-blue-500 shrink-0 border rounded-md flex items-center justify-center hover:bg-blue-700 duration-300"
1619
- }, [
1620
- C(k(ve), { class: "h-4 w-4 text-white" })
1621
- ])
1622
- ]),
1623
- d("div", _o, [
1624
- (v(!0), w(re, null, le(c.value, (g) => (v(), w("div", {
1625
- key: g,
1626
- class: "h-8 w-8 p-0.5 rounded border border-transparent hover:border-gray-200 transition-transform cursor-pointer"
1627
- }, [
1628
- d("div", $o, [
1629
- d("button", {
1630
- class: "flex items-center justify-center w-full h-full",
1631
- style: ae({ backgroundColor: g }),
1632
- onClick: (S) => r(g),
1633
- title: b(g)
1634
- }, [
1635
- s.value === g ? (v(), K(k(ve), {
1636
- key: 0,
1637
- class: "h-4 w-4 text-gray-500"
1638
- })) : R("", !0)
1639
- ], 12, Co)
1640
- ])
1641
- ]))), 128))
1642
- ])
1643
- ])
1644
- ]),
1645
- _: 1
1646
- }, 512));
1647
- }
1648
- }, Fo = { class: "flex gap-[4px] mb-[8px]" }, So = { class: "grid grid-rows-3 grid-cols-7" }, To = { class: "w-full h-full rounded border border-gray-300 overflow-hidden" }, Lo = ["onClick", "title"], Bo = ["onClick", "title"], Io = {
1649
- __name: "vs-editor-background-color",
1650
- props: {
1651
- editor: Object
1652
- },
1653
- setup(t) {
1654
- const e = t, l = $(null), s = $("transparent"), a = P(() => e.editor && e.editor.getAttributes("textStyle").backgroundColor || "transparent"), o = P(() => a.value !== "transparent" && a.value !== ""), n = () => {
1655
- e.editor && (s.value = a.value);
1656
- };
1657
- fe(() => {
1658
- e.editor && (e.editor.on("selectionUpdate", n), e.editor.on("update", n), n());
1659
- }), ke(() => {
1660
- e.editor && (e.editor.off("selectionUpdate", n), e.editor.off("update", n));
1661
- });
1662
- const c = $([
1663
- "#172B4D",
1664
- "#0747A6",
1665
- "#008DA6",
1666
- "#006644",
1667
- "#FF991F",
1668
- "#BF2600",
1669
- "#403294",
1670
- "#97A0AF",
1671
- "#4C9AFF",
1672
- "#00B8D9",
1673
- "#36B37E",
1674
- "#FFC400",
1675
- "#FF5630",
1676
- "#6554C0",
1677
- "#FFFFFF",
1678
- "#B3D4FF",
1679
- "#B3F5FF",
1680
- "#ABF5D1",
1681
- "#FFF0B3",
1682
- "#FFBDAD",
1683
- "#EAE6FF"
1684
- ]), r = (u) => {
1685
- e.editor && (e.editor.chain().focus().setBackgroundColor(u).run(), s.value = u, l.value && l.value.togglePopover());
1686
- }, i = () => {
1687
- r(s.value);
1688
- }, b = (u) => ({
1689
- "#172B4D": "Default",
1690
- "#0747A6": "Bright blue",
1691
- "#008DA6": "Bright blue-green",
1692
- "#006644": "Bright green",
1693
- "#FF991F": "Bright orange",
1694
- "#BF2600": "Bright red",
1695
- "#403294": "Bright purple",
1696
- "#97A0AF": "Gray",
1697
- "#4C9AFF": "Blue",
1698
- "#00B8D9": "Blue-green",
1699
- "#36B37E": "Green",
1700
- "#FFC400": "Yellow",
1701
- "#FF5630": "Red",
1702
- "#6554C0": "Purple",
1703
- transparent: "Transparent",
1704
- "#B3D4FF": "Bright blue",
1705
- "#B3F5FF": "Bright blue-green",
1706
- "#ABF5D1": "Bright green",
1707
- "#FFF0B3": "Bright yellow",
1708
- "#FFBDAD": "Bright red",
1709
- "#EAE6FF": "Bright purple"
1710
- })[u] || u;
1711
- return (u, h) => (v(), K(ce, {
1712
- ref_key: "popover",
1713
- ref: l,
1714
- placement: "bottom"
1715
- }, {
1716
- reference: D(() => [
1717
- d("button", {
1718
- title: "Background Color",
1719
- class: T(["flex flex-col h-[30px] px-1 rounded-full hover:bg-gray-100 justify-center items-center relative flex", { "bg-gray-100": o.value }])
1720
- }, [
1721
- C(k(Et), { class: "h-4 w-4" }),
1722
- d("span", {
1723
- class: "block h-1 w-5",
1724
- style: ae({ backgroundColor: s.value })
1725
- }, null, 4)
1726
- ], 2)
1727
- ]),
1728
- default: D(() => [
1729
- d("div", null, [
1730
- d("div", Fo, [
1731
- C(Ze, {
1732
- modelValue: s.value,
1733
- "onUpdate:modelValue": h[0] || (h[0] = (g) => s.value = g)
1734
- }, null, 8, ["modelValue"]),
1735
- d("button", {
1736
- onClick: i,
1737
- class: "h-[38px] w-[38px] bg-blue-500 shrink-0 border rounded-md flex items-center justify-center hover:bg-blue-700 duration-300"
1738
- }, [
1739
- C(k(ve), { class: "h-4 w-4 text-white" })
1740
- ])
1741
- ]),
1742
- d("div", So, [
1743
- d("button", {
1744
- onClick: h[1] || (h[1] = (g) => r("transparent")),
1745
- class: "col-span-7 flex items-center justify-center gap-2 bg-gray-100 rounded-md py-1 mb-2 hover:bg-gray-200"
1746
- }, [
1747
- C(k(It), { class: "h-4 w-4" }),
1748
- h[2] || (h[2] = d("p", null, "no color", -1))
1749
- ]),
1750
- (v(!0), w(re, null, le(c.value, (g) => (v(), w("div", {
1751
- key: g,
1752
- class: "h-8 w-8 p-0.5 rounded border border-transparent hover:border-gray-200 transition-transform cursor-pointer"
1753
- }, [
1754
- d("div", To, [
1755
- g !== "transparent" ? (v(), w("button", {
1756
- key: 0,
1757
- class: "flex items-center justify-center w-full h-full",
1758
- style: ae({ backgroundColor: g }),
1759
- onClick: (S) => r(g),
1760
- title: b(g)
1761
- }, [
1762
- s.value === g ? (v(), K(k(ve), {
1763
- key: 0,
1764
- class: "h-4 w-4 text-gray-500"
1765
- })) : R("", !0)
1766
- ], 12, Lo)) : R("", !0),
1767
- g === "transparent" ? (v(), w("button", {
1768
- key: 1,
1769
- class: "flex items-center justify-center w-full h-full",
1770
- onClick: (S) => r(g),
1771
- title: b(g)
1772
- }, [
1773
- s.value === g ? (v(), K(k(ve), {
1774
- key: 0,
1775
- class: "h-4 w-4 text-gray-500"
1776
- })) : R("", !0)
1777
- ], 8, Bo)) : R("", !0)
1778
- ])
1779
- ]))), 128))
1780
- ])
1781
- ])
1782
- ]),
1783
- _: 1
1784
- }, 512));
1785
- }
1786
- }, Eo = {
1787
- __name: "vs-editor-highlight",
1788
- props: {
1789
- editor: Object
1790
- },
1791
- setup(t) {
1792
- const e = t, l = P(() => e.editor?.isActive("highlight")), s = () => {
1793
- e.editor && e.editor.chain().focus().toggleHighlight().run();
1794
- };
1795
- return (a, o) => (v(), w("button", {
1796
- title: "Highlight",
1797
- onClick: s,
1798
- class: T(["flex flex-col h-[30px] px-1 rounded-full hover:bg-gray-100 justify-center items-center relative flex", { "bg-gray-200": l.value }])
1799
- }, [
1800
- C(k(jt), { class: "h-4 w-4" })
1801
- ], 2));
1802
- }
1803
- }, jo = { class: "truncate" }, Po = { class: "w-[200px]" }, Mo = { class: "max-h-[200px] overflow-y-auto" }, Ho = ["onClick"], No = {
1804
- __name: "vs-editor-font-family",
1805
- props: {
1806
- editor: Object
1807
- },
1808
- setup(t) {
1809
- const e = t, l = $("popover"), s = $(!1), a = $([
1810
- { label: "Arial", value: "Arial, sans-serif" },
1811
- { label: "Helvetica", value: "Helvetica, sans-serif" },
1812
- { label: "Times New Roman", value: "Times New Roman, serif" },
1813
- { label: "Georgia", value: "Georgia, serif" },
1814
- { label: "Verdana", value: "Verdana, sans-serif" },
1815
- { label: "Courier New", value: "Courier New, monospace" },
1816
- { label: "Comic Sans MS", value: "Comic Sans MS, cursive" },
1817
- { label: "Impact", value: "Impact, sans-serif" },
1818
- { label: "Trebuchet MS", value: "Trebuchet MS, sans-serif" },
1819
- { label: "Palatino", value: "Palatino, serif" }
1820
- ]), o = P(() => {
1821
- if (!e.editor) return "Arial, sans-serif";
1822
- for (const i of a.value)
1823
- if (e.editor.isActive("textStyle", { fontFamily: i.value }))
1824
- return i.value;
1825
- return "Arial, sans-serif";
1826
- }), n = P(() => a.value.find((b) => b.value === o.value)?.label || "Arial"), c = (i) => e.editor ? e.editor.isActive("textStyle", { fontFamily: i }) : !1, r = (i) => {
1827
- e.editor && (e.editor.chain().focus().setFontFamily(i).run(), l.value && l.value.togglePopover());
1828
- };
1829
- return (i, b) => (v(), K(ce, {
1830
- ref_key: "popover",
1831
- ref: l,
1832
- placement: "bottom",
1833
- onIsvisible: b[0] || (b[0] = (u) => s.value = u)
1834
- }, {
1835
- reference: D(() => [
1836
- d("button", {
1837
- title: "Font Family",
1838
- class: T(["h-[30px] px-2 rounded-full hover:bg-gray-100 justify-center items-center flex text-sm", [s.value ? "bg-gray-100 text-gray-900" : "text-gray-700"]]),
1839
- style: ae({ fontFamily: o.value })
1840
- }, [
1841
- d("span", jo, W(n.value), 1),
1842
- C(k(Le), { class: "ml-1 h-3 w-3 text-gray-400" })
1843
- ], 6)
1844
- ]),
1845
- default: D(() => [
1846
- d("div", Po, [
1847
- d("ul", Mo, [
1848
- (v(!0), w(re, null, le(a.value, (u) => (v(), w("li", {
1849
- key: u.value,
1850
- class: T(["px-3 py-2 hover:bg-gray-100 cursor-pointer text-sm", { "bg-gray-100": c(u.value) }]),
1851
- style: ae({ fontFamily: u.value }),
1852
- onClick: (h) => r(u.value)
1853
- }, W(u.label), 15, Ho))), 128))
1854
- ])
1855
- ])
1856
- ]),
1857
- _: 1
1858
- }, 512));
1859
- }
1860
- }, zo = { class: "w-[120px]" }, Do = { class: "max-h-[200px] overflow-y-auto" }, Oo = ["onClick"], Vo = {
1861
- __name: "vs-editor-font-size",
1862
- props: {
1863
- editor: Object
1864
- },
1865
- setup(t) {
1866
- const e = t, l = $("popover"), s = $("14px"), a = P(() => e.editor && e.editor.getAttributes("textStyle").fontSize || "14px"), o = P(() => a.value !== "14px"), n = () => {
1867
- e.editor && (s.value = a.value);
1868
- };
1869
- fe(() => {
1870
- e.editor && (e.editor.on("selectionUpdate", n), e.editor.on("update", n), n());
1871
- }), ke(() => {
1872
- e.editor && (e.editor.off("selectionUpdate", n), e.editor.off("update", n));
1873
- });
1874
- const c = $([
1875
- { label: "8px", value: "8px" },
1876
- { label: "9px", value: "9px" },
1877
- { label: "10px", value: "10px" },
1878
- { label: "11px", value: "11px" },
1879
- { label: "12px", value: "12px" },
1880
- { label: "14px", value: "14px" },
1881
- { label: "16px", value: "16px" },
1882
- { label: "18px", value: "18px" },
1883
- { label: "20px", value: "20px" },
1884
- { label: "24px", value: "24px" },
1885
- { label: "28px", value: "28px" },
1886
- { label: "32px", value: "32px" },
1887
- { label: "36px", value: "36px" },
1888
- { label: "48px", value: "48px" },
1889
- { label: "72px", value: "72px" }
1890
- ]), r = (i) => {
1891
- e.editor && (e.editor.chain().focus().setFontSize(i).run(), s.value = i, l.value && l.value.togglePopover());
1892
- };
1893
- return (i, b) => (v(), K(ce, {
1894
- ref_key: "popover",
1895
- ref: l,
1896
- placement: "bottom"
1897
- }, {
1898
- reference: D(() => [
1899
- d("button", {
1900
- title: "Font Size",
1901
- class: T(["h-[30px] px-2 min-w-[30px] rounded-full hover:bg-gray-100 justify-center items-center flex text-sm text-gray-700 space-x-1", { "bg-gray-100 text-gray-900": o.value }])
1902
- }, [
1903
- C(k(Pt), { class: "h-4 w-4" }),
1904
- C(k(Le), { class: "h-3 w-3 text-gray-400" })
1905
- ], 2)
1906
- ]),
1907
- default: D(() => [
1908
- d("div", zo, [
1909
- d("ul", Do, [
1910
- (v(!0), w(re, null, le(c.value, (u) => (v(), w("li", {
1911
- key: u.value,
1912
- class: "px-3 py-2 hover:bg-gray-100 cursor-pointer",
1913
- onClick: (h) => r(u.value)
1914
- }, W(u.label), 9, Oo))), 128))
1915
- ])
1916
- ])
1917
- ]),
1918
- _: 1
1919
- }, 512));
1920
- }
1921
- }, Ro = {
1922
- components: { Superscript: Mt },
1923
- props: {
1924
- editor: Object
1925
- },
1926
- methods: {
1927
- toggleSuperscript() {
1928
- this.editor && this.editor.commands.toggleSuperscript();
1929
- }
1930
- }
1931
- };
1932
- function Uo(t, e, l, s, a, o) {
1933
- const n = G("Superscript");
1934
- return v(), w("button", {
1935
- title: "Superscript",
1936
- onClick: e[0] || (e[0] = (...c) => o.toggleSuperscript && o.toggleSuperscript(...c)),
1937
- class: T(["h-[30px] w-[30px] flex items-center justify-center text-gray-500 rounded-full cursor-pointer hover:text-gray-900 hover:bg-gray-100", { "bg-gray-100 text-gray-900": l.editor?.isActive("superscript") }])
1938
- }, [
1939
- C(n, { class: "h-4 w-4" }),
1940
- e[1] || (e[1] = d("span", { class: "sr-only" }, "Superscript", -1))
1941
- ], 2);
1942
- }
1943
- const qo = /* @__PURE__ */ X(Ro, [["render", Uo]]), Ko = {
1944
- components: { Subscript: Ht },
1945
- props: {
1946
- editor: Object
1947
- },
1948
- methods: {
1949
- toggleSubscript() {
1950
- this.editor && this.editor.commands.toggleSubscript();
1951
- }
1952
- }
1953
- };
1954
- function Wo(t, e, l, s, a, o) {
1955
- const n = G("Subscript");
1956
- return v(), w("button", {
1957
- title: "Subscript",
1958
- onClick: e[0] || (e[0] = (...c) => o.toggleSubscript && o.toggleSubscript(...c)),
1959
- class: T(["h-[30px] w-[30px] flex items-center justify-center text-gray-500 rounded-full cursor-pointer hover:text-gray-900 hover:bg-gray-100", { "bg-gray-100 text-gray-900": l.editor?.isActive("subscript") }])
1960
- }, [
1961
- C(n, { class: "h-4 w-4" }),
1962
- e[1] || (e[1] = d("span", { class: "sr-only" }, "Subscript", -1))
1963
- ], 2);
1964
- }
1965
- const Xo = /* @__PURE__ */ X(Ko, [["render", Wo]]), Go = {
1966
- title: "Heading",
1967
- class: "h-[30px] px-2 rounded-full hover:bg-gray-100 justify-center items-center flex text-sm text-gray-700"
1968
- }, Yo = { class: "truncate" }, Qo = { class: "max-h-[200px] overflow-y-auto" }, Zo = ["onClick"], Jo = {
1969
- __name: "vs-editor-heading",
1970
- props: {
1971
- editor: Object
1972
- },
1973
- setup(t) {
1974
- const e = t, l = $("popover"), s = $([
1975
- { label: "Heading 1", value: 1 },
1976
- { label: "Heading 2", value: 2 },
1977
- { label: "Heading 3", value: 3 },
1978
- { label: "Heading 4", value: 4 },
1979
- { label: "Heading 5", value: 5 },
1980
- { label: "Heading 6", value: 6 }
1981
- ]), a = P(() => {
1982
- if (!e.editor) return "Paragraph";
1983
- for (let r = 1; r <= 6; r++)
1984
- if (e.editor.isActive("heading", { level: r }))
1985
- return `H ${r}`;
1986
- return "P";
1987
- }), o = (r) => ({
1988
- 1: "font-weight:700; font-size:30px;",
1989
- 2: "font-weight:700; font-size:26px;",
1990
- 3: "font-weight:700; font-size:22px;",
1991
- 4: "font-weight:700; font-size:18px;",
1992
- 5: "font-weight:500; font-size:16px;",
1993
- 6: "font-weight:400; font-size:14px;"
1994
- })[r] || "", n = (r) => {
1995
- e.editor && (e.editor.chain().focus().setHeading({ level: r }).run(), l.value && l.value.togglePopover());
1996
- }, c = () => {
1997
- e.editor && (e.editor.chain().focus().setParagraph().run(), l.value && l.value.togglePopover());
1998
- };
1999
- return (r, i) => (v(), K(ce, {
2000
- ref_key: "popover",
2001
- ref: l,
2002
- placement: "bottom"
2003
- }, {
2004
- reference: D(() => [
2005
- d("button", Go, [
2006
- d("span", Yo, W(a.value), 1),
2007
- C(k(Le), { class: "ml-1 h-3 w-3 text-gray-400" })
2008
- ])
2009
- ]),
2010
- default: D(() => [
2011
- d("div", null, [
2012
- d("ul", Qo, [
2013
- (v(!0), w(re, null, le(s.value, (b) => (v(), w("li", {
2014
- key: b.value,
2015
- class: T(["px-3 py-2 hover:bg-gray-100 cursor-pointer text-sm", `heading-level-${b.value}`]),
2016
- style: ae(o(b.value)),
2017
- onClick: (u) => n(b.value)
2018
- }, W(b.label), 15, Zo))), 128)),
2019
- d("li", {
2020
- class: "px-3 py-2 hover:bg-gray-100 cursor-pointer text-sm border-t border-gray-200 mt-1 pt-2",
2021
- onClick: c
2022
- }, " Paragraph ")
2023
- ])
2024
- ])
2025
- ]),
2026
- _: 1
2027
- }, 512));
2028
- }
2029
- }, el = /* @__PURE__ */ X(Jo, [["__scopeId", "data-v-96f02f2a"]]), tl = {
2030
- components: { RemoveFormatting: Nt },
2031
- props: {
2032
- editor: Object
2033
- },
2034
- methods: {
2035
- clearFormatting() {
2036
- this.editor && this.editor.commands.unsetAllMarks();
2037
- }
2038
- }
2039
- };
2040
- function rl(t, e, l, s, a, o) {
2041
- const n = G("RemoveFormatting");
2042
- return v(), w("button", {
2043
- title: "Clear Formatting",
2044
- onClick: e[0] || (e[0] = (...c) => o.clearFormatting && o.clearFormatting(...c)),
2045
- class: "h-[30px] w-[30px] flex items-center justify-center text-gray-500 rounded-full cursor-pointer hover:text-gray-900 hover:bg-gray-100"
2046
- }, [
2047
- C(n, { class: "h-4 w-4" }),
2048
- e[1] || (e[1] = d("span", { class: "sr-only" }, "Clear Formatting", -1))
2049
- ]);
2050
- }
2051
- const ol = /* @__PURE__ */ X(tl, [["render", rl]]), ll = { class: "relative" }, al = {
2052
- key: 0,
2053
- class: "mt-4"
2054
- }, sl = ["src", "alt", "title"], nl = {
2055
- key: 0,
2056
- class: "text-sm text-red-500"
2057
- }, il = {
2058
- key: 1,
2059
- class: "mt-4"
2060
- }, cl = { class: "text-sm text-gray-600 mb-2" }, dl = { class: "flex flex-wrap gap-2" }, ul = ["src", "alt", "onError"], fl = ["onClick"], pl = { class: "flex justify-end gap-x-2 p-[20px]" }, gl = /* @__PURE__ */ Object.assign({
2061
- inheritAttrs: !1
2062
- }, {
2063
- __name: "vs-editor-image",
2064
- props: {
2065
- editor: {
2066
- type: Object,
2067
- required: !0
2068
- }
2069
- },
2070
- setup(t) {
2071
- const e = t, l = $(!1), s = $(!1), a = $({}), o = $(!1), n = $([]), c = $(null), r = $({
2072
- src: "",
2073
- file: [],
2074
- // Завжди масив
2075
- alt: "",
2076
- title: "",
2077
- width: "",
2078
- height: "",
2079
- link: "",
2080
- openInNewTab: !1
2081
- }), i = P(() => {
2082
- if (Array.isArray(r.value.file)) {
2083
- const p = r.value.file.filter((_) => _ instanceof File), y = r.value.file.filter((_) => typeof _ == "string" && _.trim() !== "");
2084
- return p.length + y.length > 1;
2085
- }
2086
- return r.value.file instanceof FileList ? r.value.file.length > 1 : !1;
2087
- }), b = P(() => Array.isArray(r.value.file) ? r.value.file.filter((p) => p instanceof File).length === 1 : r.value.file instanceof FileList ? r.value.file.length === 1 : r.value.file instanceof File), u = P(() => {
2088
- if (i.value)
2089
- return "";
2090
- if (r.value.src)
2091
- return r.value.src;
2092
- if (b.value) {
2093
- let p = null;
2094
- if (Array.isArray(r.value.file) || r.value.file instanceof FileList ? p = r.value.file[0] : r.value.file instanceof File && (p = r.value.file), p instanceof File) {
2095
- const y = n.value.find((f) => f.file === p);
2096
- return y ? y.preview : "";
2097
- } else if (typeof p == "string")
2098
- return p;
2099
- }
2100
- return "";
2101
- }), h = P(() => [
2102
- {
2103
- name: "src",
2104
- label: "URL зображення",
2105
- type: "text",
2106
- required: !1,
2107
- placeholder: "https://example.com/image.png"
2108
- },
2109
- {
2110
- name: "file",
2111
- label: "Файл (можна вибрати кілька)",
2112
- type: "file",
2113
- multiple: !0,
2114
- required: !1,
2115
- placeholder: "Шлях до файлу зображення",
2116
- accept: "image/*"
2117
- },
2118
- {
2119
- name: "width",
2120
- label: "Ширина",
2121
- type: "number",
2122
- required: !1,
2123
- placeholder: "Ширина зображення",
2124
- clearable: !0,
2125
- min: 0
2126
- },
2127
- {
2128
- name: "height",
2129
- label: "Висота",
2130
- type: "number",
2131
- required: !1,
2132
- placeholder: "Висота зображення",
2133
- clearable: !0,
2134
- min: 0
2135
- },
2136
- {
2137
- name: "alt",
2138
- label: "Альтернативний текст",
2139
- type: "text",
2140
- required: !1,
2141
- placeholder: "Опис зображення"
2142
- },
2143
- {
2144
- name: "title",
2145
- label: "Заголовок (необов'язково)",
2146
- type: "text",
2147
- required: !1,
2148
- placeholder: "Заголовок зображення"
2149
- },
2150
- {
2151
- name: "link",
2152
- label: "Посилання",
2153
- type: "text",
2154
- required: !1,
2155
- placeholder: "https://example.com"
2156
- },
2157
- {
2158
- name: "openInNewTab",
2159
- label: "Відкривати у новій вкладці?",
2160
- type: "switcher",
2161
- required: !1
2162
- }
2163
- ]), g = () => {
2164
- if (!e.editor) return;
2165
- if (e.editor.isActive("image")) {
2166
- const { state: y } = e.editor, { selection: f } = y, { $from: _ } = f;
2167
- let x = null, B = null;
2168
- if (_.parent.type.name === "image")
2169
- x = _.before(_.depth), B = _.parent;
2170
- else
2171
- for (let M = _.depth; M > 0; M--) {
2172
- const Q = _.node(M), V = _.before(M);
2173
- Q.type.name === "paragraph" && Q.forEach((de, $e) => {
2174
- if (de.type.name === "image") {
2175
- const je = V + $e + 1;
2176
- (x === null || Math.abs(je - f.$from.pos) < Math.abs(x - f.$from.pos)) && (x = je, B = de);
2177
- }
2178
- });
2179
- }
2180
- if (x !== null && B) {
2181
- try {
2182
- e.editor.chain().focus().setNodeSelection(x).run();
2183
- } catch {
2184
- e.editor.chain().focus().setTextSelection(x).run();
2185
- }
2186
- c.value = x;
2187
- } else {
2188
- e.editor.chain().focus().selectParentNode().run();
2189
- const { state: M } = e.editor;
2190
- c.value = M.selection.$from.pos;
2191
- }
2192
- const m = B ? B.attrs : e.editor.getAttributes("image");
2193
- o.value = !0;
2194
- let A = "", I = !1;
2195
- const N = e.editor.getAttributes("link");
2196
- N && N.href && (A = N.href, I = N.target === "_blank");
2197
- const E = m.src || "", F = E ? [E] : [];
2198
- r.value = {
2199
- src: E,
2200
- file: F,
2201
- // Масив з поточним зображенням
2202
- alt: m.alt || "",
2203
- title: m.title || "",
2204
- width: m.width || "",
2205
- height: m.height || "",
2206
- link: A,
2207
- openInNewTab: I
2208
- };
2209
- } else
2210
- o.value = !1, r.value = {
2211
- src: "",
2212
- file: [],
2213
- // Завжди масив
2214
- alt: "",
2215
- title: "",
2216
- width: "",
2217
- height: "",
2218
- link: "",
2219
- openInNewTab: !1
2220
- };
2221
- s.value = !1, l.value = !0;
2222
- }, S = () => {
2223
- l.value = !1, s.value = !1, o.value = !1, n.value = [], c.value = null, r.value = {
2224
- src: "",
2225
- file: [],
2226
- // Завжди масив
2227
- alt: "",
2228
- title: "",
2229
- width: "",
2230
- height: "",
2231
- link: "",
2232
- openInNewTab: !1
2233
- };
2234
- }, j = async (p) => {
2235
- if (!p || p.length === 0)
2236
- return;
2237
- const y = [];
2238
- for (const f of p)
2239
- if (f && f.type && f.type.startsWith("image/") && !n.value.some((x) => x.file === f)) {
2240
- const x = new Promise((B, m) => {
2241
- const A = new FileReader();
2242
- A.onload = (I) => {
2243
- n.value.push({
2244
- file: f,
2245
- preview: I.target.result,
2246
- error: !1
2247
- }), B();
2248
- }, A.onerror = m, A.readAsDataURL(f);
2249
- });
2250
- y.push(x);
2251
- }
2252
- await Promise.all(y);
2253
- }, H = (p) => {
2254
- n.value.splice(p, 1), Array.isArray(r.value.file) && r.value.file.splice(p, 1);
2255
- }, z = () => {
2256
- const p = r.value.width !== null && r.value.width !== void 0 && r.value.width !== "" && String(r.value.width).trim() !== "" ? String(r.value.width).trim() : "", y = r.value.height !== null && r.value.height !== void 0 && r.value.height !== "" && String(r.value.height).trim() !== "" ? String(r.value.height).trim() : "", f = {};
2257
- return p && y ? (f.width = p, f.height = y, f.style = `width: ${p}px; height: ${y}px; object-fit: fill;`) : p ? (f.width = p, f.height = void 0) : y ? (f.height = y, f.width = void 0) : (f.width = void 0, f.height = void 0), f;
2258
- }, q = (p, y = null, f = 50) => {
2259
- const _ = () => {
2260
- const { view: m } = p;
2261
- if (!m || !m.dom) return;
2262
- m.dom.querySelectorAll("img.editor-image[width][height]").forEach((N) => {
2263
- if (N instanceof HTMLImageElement) {
2264
- const E = N.getAttribute("width"), F = N.getAttribute("height");
2265
- E && F && E !== "auto" && F !== "auto" && E !== "" && F !== "" && !isNaN(Number(E)) && !isNaN(Number(F)) && (N.style.cssText = `
2266
- width: ${E}px !important;
2267
- height: ${F}px !important;
2268
- max-width: none !important;
2269
- max-height: none !important;
2270
- min-width: auto !important;
2271
- min-height: auto !important;
2272
- object-fit: fill !important;
2273
- `.replace(/\s+/g, " ").trim());
2274
- }
2275
- });
2276
- }, x = r.value.width, B = r.value.height;
2277
- x && B && x !== "" && B !== "" ? [0, f, f * 2, f * 3, f * 4].forEach((A) => {
2278
- setTimeout(_, A);
2279
- }) : (_(), setTimeout(_, f));
2280
- }, L = async () => {
2281
- let p = [], y = [];
2282
- if (Array.isArray(r.value.file) ? (p = r.value.file.filter((m) => m instanceof File), y = r.value.file.filter((m) => typeof m == "string" && m.trim() !== "")) : r.value.file instanceof FileList ? p = Array.from(r.value.file) : r.value.file instanceof File ? p = [r.value.file] : typeof r.value.file == "string" && r.value.file.trim() !== "" && (y = [r.value.file]), p.length === 0 && y.length === 0 && a.value && a.value.file) {
2283
- const m = a.value.file;
2284
- Array.isArray(m) ? (p = m.filter((A) => A instanceof File), y = m.filter((A) => typeof A == "string" && A.trim() !== "")) : m instanceof FileList ? p = Array.from(m) : m instanceof File ? p = [m] : typeof m == "string" && m.trim() !== "" && (y = [m]);
2285
- }
2286
- if (y.length > 0 && !o.value) {
2287
- for (const m of y)
2288
- n.value.some((A) => A.url === m) || n.value.push({
2289
- url: m,
2290
- preview: m,
2291
- error: !1
2292
- });
2293
- if (p.length === 0 && n.value.length > 0) {
2294
- await oe();
2295
- return;
2296
- }
2297
- }
2298
- const f = p.length, _ = f + y.length;
2299
- if (!(o.value && f <= 1)) {
2300
- if (f > 0) {
2301
- const m = p.filter(
2302
- (A) => !n.value.some((I) => I.file === A)
2303
- );
2304
- m.length > 0 && await j(m);
2305
- }
2306
- }
2307
- if (!o.value) {
2308
- if (_ > 1 || i.value || n.value.length > 1) {
2309
- if (n.value.length > 0) {
2310
- await oe();
2311
- return;
2312
- } else if (f > 0) {
2313
- if (await j(p), n.value.length > 0) {
2314
- await oe();
2315
- return;
2316
- }
2317
- } else if (y.length > 0) {
2318
- await oe();
2319
- return;
2320
- }
2321
- } else if (n.value.length > 1) {
2322
- await oe();
2323
- return;
2324
- }
2325
- }
2326
- let x = r.value.src;
2327
- if (b.value) {
2328
- let m = null;
2329
- if (Array.isArray(r.value.file) || r.value.file instanceof FileList ? m = r.value.file[0] : (r.value.file instanceof File || typeof r.value.file == "string") && (m = r.value.file), m instanceof File)
2330
- try {
2331
- const A = new FileReader(), I = await new Promise((N, E) => {
2332
- A.onload = (F) => N(F.target.result), A.onerror = E, A.readAsDataURL(m);
2333
- });
2334
- x = I, o.value && (r.value.src = I);
2335
- } catch (A) {
2336
- console.error("Помилка при читанні файлу:", A), we({
2337
- type: "error",
2338
- title: "Помилка",
2339
- message: "Не вдалося прочитати файл"
2340
- });
2341
- return;
2342
- }
2343
- else typeof m == "string" && m.trim() !== "" && (x = m.trim(), o.value && m.trim() !== r.value.src && (r.value.src = m.trim(), x = m.trim()));
2344
- } else if (Array.isArray(r.value.file) && r.value.file.length === 1) {
2345
- const m = r.value.file[0];
2346
- typeof m == "string" && m.trim() !== "" && (x = m.trim(), (!r.value.src || r.value.src !== m.trim()) && (r.value.src = m.trim()));
2347
- } else typeof r.value.file == "string" && r.value.file.trim() !== "" && (x = r.value.file.trim(), (!r.value.src || r.value.src !== r.value.file.trim()) && (r.value.src = r.value.file.trim()));
2348
- const B = x || Array.isArray(r.value.file) && r.value.file.length > 0 && (r.value.file.some((m) => m instanceof File) || r.value.file.some((m) => typeof m == "string" && m.trim() !== "")) || r.value.file instanceof FileList && r.value.file.length > 0 || typeof r.value.file == "string" && r.value.file.trim() !== "";
2349
- if (!x && !B) {
2350
- we({
2351
- type: "warning",
2352
- title: "Попередження",
2353
- message: "Будь ласка, введіть URL зображення або виберіть файл"
2354
- });
2355
- return;
2356
- }
2357
- if (!i.value && !B && await a.value.validate()) {
2358
- we({
2359
- type: "warning",
2360
- title: "Попередження",
2361
- message: "Будь ласка, заповніть всі обов'язкові поля"
2362
- });
2363
- return;
2364
- }
2365
- if (e.editor && x)
2366
- if (o.value && c.value !== null) {
2367
- const { state: m } = e.editor;
2368
- try {
2369
- e.editor.chain().focus().setNodeSelection(c.value).run();
2370
- } catch {
2371
- e.editor.chain().focus().setTextSelection(c.value).run();
2372
- }
2373
- const A = e.editor.getAttributes("link"), I = A && A.href, N = z(), E = {
2374
- src: x,
2375
- alt: r.value.alt || "",
2376
- title: r.value.title || "",
2377
- ...N
2378
- };
2379
- if ((!r.value.width || r.value.width === "") && (E.width = void 0), (!r.value.height || r.value.height === "") && (E.height = void 0), e.editor.chain().focus().updateAttributes("image", E).run(), setTimeout(() => {
2380
- const { view: F } = e.editor;
2381
- if (!F || !F.dom) return;
2382
- F.dom.querySelectorAll("img.editor-image").forEach((V) => {
2383
- if (V instanceof HTMLImageElement) {
2384
- const de = V.getAttribute("src") || V.src;
2385
- (de === x || de.includes(x.split("/").pop())) && (r.value.width && r.value.height ? (V.style.setProperty("width", `${r.value.width}px`, "important"), V.style.setProperty("height", `${r.value.height}px`, "important"), V.style.setProperty("object-fit", "fill", "important"), V.style.setProperty("max-width", "none", "important"), V.style.setProperty("max-height", "none", "important")) : (V.style.removeProperty("width"), V.style.removeProperty("height"), V.style.removeProperty("object-fit"), V.style.removeProperty("max-width"), V.style.removeProperty("max-height")));
2386
- }
2387
- });
2388
- }, 20), r.value.link && r.value.link.trim() !== "") {
2389
- let F = r.value.link.trim();
2390
- F.match(/^https?:\/\//i) || (F = "https://" + F), I ? e.editor.chain().focus().extendMarkRange("link").setLink({
2391
- href: F,
2392
- target: r.value.openInNewTab ? "_blank" : null
2393
- }).run() : e.editor.chain().focus().selectParentNode().setLink({
2394
- href: F,
2395
- target: r.value.openInNewTab ? "_blank" : null
2396
- }).run();
2397
- } else I && e.editor.chain().focus().extendMarkRange("link").unsetLink().run();
2398
- } else {
2399
- const { state: m } = e.editor, { selection: A } = m, { $anchor: I } = A;
2400
- let N = null;
2401
- for (let F = I.depth; F > 0; F--) {
2402
- const M = I.node(F);
2403
- if (M && M.type.name === "paragraph") {
2404
- N = M;
2405
- break;
2406
- }
2407
- }
2408
- if (N && N.content.content.some(
2409
- (F) => F.type.name === "image"
2410
- )) {
2411
- const F = Y(N, I.before(I.depth));
2412
- if (F !== null) {
2413
- const M = z(), Q = m.schema.nodes.image.create({
2414
- src: x,
2415
- alt: r.value.alt || "",
2416
- title: r.value.title || "",
2417
- ...M
2418
- });
2419
- if (r.value.link && r.value.link.trim() !== "") {
2420
- let V = r.value.link.trim();
2421
- V.match(/^https?:\/\//i) || (V = "https://" + V);
2422
- const de = m.schema.marks.link.create({
2423
- href: V,
2424
- target: r.value.openInNewTab ? "_blank" : null
2425
- }), $e = Q.type.create(Q.attrs, Q.content, [de]);
2426
- e.editor.chain().focus().insertContentAt(F + 1, $e).run(), q(e.editor, x);
2427
- } else
2428
- e.editor.chain().focus().insertContentAt(F + 1, Q).run(), q(e.editor, x);
2429
- } else if (r.value.link && r.value.link.trim() !== "") {
2430
- const M = z();
2431
- e.editor.chain().focus().setImage({
2432
- src: x,
2433
- alt: r.value.alt || "",
2434
- title: r.value.title || "",
2435
- ...M
2436
- }).run(), setTimeout(() => {
2437
- let Q = r.value.link.trim();
2438
- Q.match(/^https?:\/\//i) || (Q = "https://" + Q), e.editor.chain().focus().selectParentNode().setLink({
2439
- href: Q,
2440
- target: r.value.openInNewTab ? "_blank" : null
2441
- }).run(), q(e.editor, x, 20);
2442
- }, 10);
2443
- } else {
2444
- const M = z();
2445
- e.editor.chain().focus().setImage({
2446
- src: x,
2447
- alt: r.value.alt || "",
2448
- title: r.value.title || "",
2449
- ...M
2450
- }).run(), q(e.editor, x);
2451
- }
2452
- } else if (r.value.link && r.value.link.trim() !== "") {
2453
- const F = z();
2454
- e.editor.chain().focus().setImage({
2455
- src: x,
2456
- alt: r.value.alt || "",
2457
- title: r.value.title || "",
2458
- ...F
2459
- }).run(), setTimeout(() => {
2460
- let M = r.value.link.trim();
2461
- M.match(/^https?:\/\//i) || (M = "https://" + M), e.editor.chain().focus().selectParentNode().setLink({
2462
- href: M,
2463
- target: r.value.openInNewTab ? "_blank" : null
2464
- }).run(), q(e.editor, x, 20);
2465
- }, 10);
2466
- } else {
2467
- const F = z();
2468
- e.editor.chain().focus().setImage({
2469
- src: x,
2470
- alt: r.value.alt || "",
2471
- title: r.value.title || "",
2472
- ...F
2473
- }).run(), q(e.editor, x);
2474
- }
2475
- }
2476
- S();
2477
- }, Y = (p, y) => {
2478
- let f = null;
2479
- return p.forEach((_, x) => {
2480
- _.type.name === "image" && (f = y + x + 1);
2481
- }), f;
2482
- }, oe = async () => {
2483
- if (e.editor) {
2484
- if (n.value.length === 0)
2485
- if (Array.isArray(r.value.file) && r.value.file.length > 0) {
2486
- const p = r.value.file.filter((f) => typeof f == "string" && f.trim() !== ""), y = r.value.file.filter((f) => f instanceof File);
2487
- for (const f of p)
2488
- n.value.some((_) => _.url === f || _.preview === f) || n.value.push({
2489
- url: f,
2490
- preview: f,
2491
- error: !1
2492
- });
2493
- y.length > 0 && await j(y);
2494
- } else i.value && await j(r.value.file);
2495
- if (n.value.length !== 0)
2496
- try {
2497
- const p = [], y = z();
2498
- for (const f of n.value) {
2499
- const _ = f.url || f.preview || "";
2500
- if (!_) continue;
2501
- const x = e.editor.schema.nodes.image.create({
2502
- src: _,
2503
- alt: r.value.alt || "",
2504
- title: r.value.title || "",
2505
- ...y
2506
- });
2507
- p.push(x);
2508
- }
2509
- p.length > 0 && (e.editor.chain().focus().command(({ tr: f, dispatch: _ }) => {
2510
- if (_) {
2511
- const { selection: x } = f, { $anchor: B } = x;
2512
- let m = x.$anchor.pos, A = null, I = null;
2513
- for (let E = B.depth; E > 0; E--) {
2514
- const F = B.node(E);
2515
- if (F && F.type.name === "paragraph") {
2516
- A = F, I = B.start(E);
2517
- break;
2518
- }
2519
- }
2520
- if (A) {
2521
- let E = null;
2522
- A.forEach((F, M) => {
2523
- F.type.name === "image" && (E = I + M + 1);
2524
- }), E !== null ? m = E + 1 : m = I + A.content.size;
2525
- }
2526
- let N = m;
2527
- return p.forEach((E) => {
2528
- f.insert(N, E), N += E.nodeSize;
2529
- }), !0;
2530
- }
2531
- return !1;
2532
- }).run(), r.value.width && r.value.height && setTimeout(() => {
2533
- const { view: f } = e.editor;
2534
- f && f.dom && f.dom.querySelectorAll("img.editor-image").forEach((B) => {
2535
- B instanceof HTMLImageElement && Array.from(n.value).some((A) => {
2536
- const I = A.url || A.preview || "", N = B.src || B.getAttribute("src") || "";
2537
- return N === I || N.includes(I.split("/").pop());
2538
- }) && (B.style.setProperty("width", `${r.value.width}px`, "important"), B.style.setProperty("height", `${r.value.height}px`, "important"), B.style.setProperty("object-fit", "fill", "important"), B.style.setProperty("max-width", "none", "important"), B.style.setProperty("max-height", "none", "important"));
2539
- });
2540
- }, 50)), S();
2541
- } catch (p) {
2542
- console.error("Помилка при додаванні зображень:", p), we({
2543
- type: "error",
2544
- title: "Помилка",
2545
- message: "Не вдалося додати зображення"
2546
- });
2547
- }
2548
- }
2549
- }, se = async () => {
2550
- await L();
2551
- }, O = () => {
2552
- S();
2553
- };
2554
- return ue(() => r.value.file, async (p, y) => {
2555
- if (s.value = !1, !(o.value && Array.isArray(p) && p.length === 1 && typeof p[0] == "string" && !p.some((_) => _ instanceof File)))
2556
- if (Array.isArray(p) && p.length > 0) {
2557
- const f = p.filter((x) => x instanceof File), _ = p.filter((x) => typeof x == "string" && x.trim() !== "");
2558
- if (f.length > 0 && (o.value ? o.value && f.length === 1 && _.length === 0 && (n.value = []) : n.value = [], (!o.value || f.length > 1 || _.length > 0) && await j(f), o.value && f.length === 1 && _.length === 0)) {
2559
- const x = new FileReader();
2560
- x.onload = (B) => {
2561
- r.value.src = B.target.result;
2562
- }, x.readAsDataURL(f[0]);
2563
- }
2564
- if (_.length > 0)
2565
- if (o.value)
2566
- o.value && _.length === 1 && f.length === 0 && (r.value.src = _[0]);
2567
- else {
2568
- f.length === 0 && (n.value = []);
2569
- for (const x of _)
2570
- n.value.some((B) => B.url === x || B.preview === x) || n.value.push({
2571
- url: x,
2572
- preview: x,
2573
- error: !1
2574
- });
2575
- }
2576
- } else p && typeof p == "object" && p instanceof FileList ? (o.value || (n.value = []), await j(Array.from(p))) : p && typeof p == "object" && !Array.isArray(p) && p instanceof File ? (o.value || (n.value = []), await j([p])) : o.value || (n.value = []);
2577
- }, { immediate: !1 }), ue(() => r.value.src, () => {
2578
- s.value = !1;
2579
- }), (p, y) => (v(), w("div", ll, [
2580
- d("button", {
2581
- onClick: g,
2582
- class: T([
2583
- "h-[30px] w-[30px] flex items-center justify-center text-gray-500 rounded-full cursor-pointer hover:text-gray-900 hover:bg-gray-100",
2584
- t.editor?.isActive("image") ? "bg-gray-200 text-gray-900" : ""
2585
- ]),
2586
- title: "Додати зображення"
2587
- }, [
2588
- C(k(zt), { class: "h-4 w-4" }),
2589
- y[4] || (y[4] = d("span", { class: "sr-only" }, "Додати зображення", -1))
2590
- ], 2),
2591
- C(Ye, {
2592
- modelValue: l.value,
2593
- "onUpdate:modelValue": y[3] || (y[3] = (f) => l.value = f),
2594
- title: o.value ? "Редагувати зображення" : "Додати зображення"
2595
- }, {
2596
- footer: D(() => [
2597
- d("div", pl, [
2598
- d("button", {
2599
- onClick: O,
2600
- type: "button",
2601
- class: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
2602
- }, " Скасувати "),
2603
- d("button", {
2604
- onClick: se,
2605
- type: "button",
2606
- class: "px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
2607
- }, W(o.value ? "Оновити зображення" : "Додати зображення"), 1)
2608
- ])
2609
- ]),
2610
- default: D(() => [
2611
- C(ut, {
2612
- modelValue: r.value,
2613
- "onUpdate:modelValue": y[0] || (y[0] = (f) => r.value = f),
2614
- schema: h.value,
2615
- form: a.value,
2616
- "onUpdate:form": y[1] || (y[1] = (f) => a.value = f)
2617
- }, null, 8, ["modelValue", "schema", "form"]),
2618
- u.value && !i.value ? (v(), w("div", al, [
2619
- y[5] || (y[5] = d("p", { class: "text-sm text-gray-600 mb-2" }, "Попередній перегляд:", -1)),
2620
- ie(d("img", {
2621
- src: u.value,
2622
- alt: r.value.alt || "Попередній перегляд зображення",
2623
- title: r.value.title,
2624
- class: "max-w-full h-auto max-h-32 rounded border",
2625
- onError: y[2] || (y[2] = (f) => s.value = !0)
2626
- }, null, 40, sl), [
2627
- [ye, !s.value]
2628
- ]),
2629
- s.value ? (v(), w("p", nl, " Не вдалося завантажити попередній перегляд зображення ")) : R("", !0)
2630
- ])) : R("", !0),
2631
- n.value.length > 0 ? (v(), w("div", il, [
2632
- d("p", cl, "Попередній перегляд (" + W(n.value.length) + " зображень):", 1),
2633
- y[6] || (y[6] = d("p", { class: "text-xs text-gray-500 mb-2" }, " Зображення будуть розміщені в ряд, якщо вони помістяться по ширині ", -1)),
2634
- d("div", dl, [
2635
- (v(!0), w(re, null, le(n.value, (f, _) => (v(), w("div", {
2636
- key: _,
2637
- class: "relative"
2638
- }, [
2639
- ie(d("img", {
2640
- src: f.preview,
2641
- alt: `Попередній перегляд ${_ + 1}`,
2642
- class: "max-w-[100px] max-h-[100px] rounded border object-contain",
2643
- onError: (x) => f.error = !0
2644
- }, null, 40, ul), [
2645
- [ye, !f.error]
2646
- ]),
2647
- d("button", {
2648
- onClick: (x) => H(_),
2649
- class: "absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs hover:bg-red-600",
2650
- type: "button"
2651
- }, " × ", 8, fl)
2652
- ]))), 128))
2653
- ])
2654
- ])) : R("", !0)
2655
- ]),
2656
- _: 1
2657
- }, 8, ["modelValue", "title"])
2658
- ]));
2659
- }
2660
- }), hl = { class: "flex items-center" }, vl = ["disabled"], ml = ["disabled"], bl = /* @__PURE__ */ Object.assign({
2661
- inheritAttrs: !1
2662
- }, {
2663
- __name: "vs-editor-history",
2664
- props: { editor: Object },
2665
- setup(t) {
2666
- const e = t, l = () => {
2667
- e.editor?.can().undo() && e.editor.chain().focus().undo().run();
2668
- }, s = () => {
2669
- e.editor?.can().redo() && e.editor.chain().focus().redo().run();
2670
- };
2671
- return (a, o) => (v(), w("div", hl, [
2672
- d("button", {
2673
- onClick: l,
2674
- class: T(["w-[30px] h-[30px] flex items-center justify-center rounded-l-full hover:text-gray-900 hover:bg-gray-100 border-r border-gray-200", [
2675
- t.editor?.can().undo() ? "text-gray-500" : "text-gray-300 cursor-not-allowed"
2676
- ]]),
2677
- disabled: !t.editor?.can().undo(),
2678
- title: "Undo (Ctrl+Z)"
2679
- }, [
2680
- C(k(Dt), { class: "h-4 w-4" })
2681
- ], 10, vl),
2682
- d("button", {
2683
- onClick: s,
2684
- class: T(["w-[30px] h-[30px] flex items-center justify-center rounded-r-full hover:text-gray-900 hover:bg-gray-100", [
2685
- t.editor?.can().redo() ? "text-gray-500" : "text-gray-300 cursor-not-allowed"
2686
- ]]),
2687
- disabled: !t.editor?.can().redo(),
2688
- title: "Redo (Ctrl+Y)"
2689
- }, [
2690
- C(k(Ot), { class: "h-4 w-4" })
2691
- ], 10, ml)
2692
- ]));
2693
- }
2694
- }), yl = /* @__PURE__ */ X(bl, [["__scopeId", "data-v-6a87fc55"]]), xl = { class: "relative" }, wl = { class: "p-6" }, kl = { class: "flex justify-between items-center mb-4" }, _l = /* @__PURE__ */ Object.assign({
2695
- inheritAttrs: !1
2696
- }, {
2697
- __name: "vs-editor-help",
2698
- props: { editor: Object },
2699
- setup(t) {
2700
- const e = $(!1), l = $(null), s = () => {
2701
- e.value = !e.value;
2702
- }, a = () => {
2703
- e.value = !1;
2704
- };
2705
- return (o, n) => (v(), w("div", xl, [
2706
- d("button", {
2707
- ref_key: "helpButton",
2708
- ref: l,
2709
- onClick: s,
2710
- class: T(["w-[30px] h-[30px] flex items-center justify-center rounded-full hover:text-gray-900 hover:bg-gray-100 text-gray-500", [e.value ? "bg-gray-100 text-gray-900" : "text-gray-500"]]),
2711
- title: "Markdown Shortcuts Help"
2712
- }, [
2713
- C(k(Vt), { class: "h-4 w-4" })
2714
- ], 2),
2715
- e.value ? (v(), w("div", {
2716
- key: 0,
2717
- class: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[100001]",
2718
- onClick: a
2719
- }, [
2720
- d("div", {
2721
- class: "bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto",
2722
- onClick: n[0] || (n[0] = nt(() => {
2723
- }, ["stop"]))
2724
- }, [
2725
- d("div", wl, [
2726
- d("div", kl, [
2727
- n[1] || (n[1] = d("h2", { class: "text-xl font-semibold text-gray-900" }, "Common Markdown Syntax & Shortcuts", -1)),
2728
- d("button", {
2729
- onClick: a,
2730
- class: "text-gray-400 hover:text-gray-600 transition-colors"
2731
- }, [
2732
- C(k(Te), { class: "h-6 w-6" })
2733
- ])
2734
- ]),
2735
- n[2] || (n[2] = it('<div class="space-y-6" data-v-92c21275><div data-v-92c21275><h3 class="text-lg font-medium text-gray-800 mb-3" data-v-92c21275>Markdown Syntax</h3><div class="overflow-x-auto" data-v-92c21275><table class="w-full border-collapse" data-v-92c21275><thead data-v-92c21275><tr class="bg-gray-50" data-v-92c21275><th class="border border-gray-200 px-3 py-2 text-left font-medium text-gray-700" data-v-92c21275>Element</th><th class="border border-gray-200 px-3 py-2 text-left font-medium text-gray-700" data-v-92c21275>Example</th></tr></thead><tbody class="text-sm" data-v-92c21275><tr data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275>Bold</td><td class="border border-gray-200 px-3 py-2" data-v-92c21275><code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>**bold text**</code> or <code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>__bold text__</code></td></tr><tr class="bg-gray-25" data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275>Italics</td><td class="border border-gray-200 px-3 py-2" data-v-92c21275><code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>*italic text*</code> or <code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>_italic text_</code></td></tr><tr data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275>Strikethrough</td><td class="border border-gray-200 px-3 py-2" data-v-92c21275><code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>~strikethrough text~</code></td></tr><tr class="bg-gray-25" data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275>Headings</td><td class="border border-gray-200 px-3 py-2" data-v-92c21275><code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275># Heading 1</code>, <code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>## Heading 2</code>, etc., up to <code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>###### Heading 6</code></td></tr><tr data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275>Unordered Lists</td><td class="border border-gray-200 px-3 py-2" data-v-92c21275> Use an asterisk (*), dash (-), or plus sign (+) followed by a space. </td></tr><tr class="bg-gray-25" data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275>Ordered Lists</td><td class="border border-gray-200 px-3 py-2" data-v-92c21275> Use a number followed by a period and a space (e.g., <code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>1. First item</code>). </td></tr><tr data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275>Blockquotes</td><td class="border border-gray-200 px-3 py-2" data-v-92c21275> Start with a greater-than sign (&gt;) followed by a space. </td></tr><tr class="bg-gray-25" data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275>Inline Code</td><td class="border border-gray-200 px-3 py-2" data-v-92c21275> Surround with backticks (<code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>`</code>). </td></tr><tr data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275>Code Blocks</td><td class="border border-gray-200 px-3 py-2" data-v-92c21275> Enclose with three backticks (<code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>```</code>) before and after the code. </td></tr><tr class="bg-gray-25" data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275>Images</td><td class="border border-gray-200 px-3 py-2" data-v-92c21275> Use <code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>![alt text](url)</code> syntax. </td></tr><tr data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275>Links</td><td class="border border-gray-200 px-3 py-2" data-v-92c21275> Use <code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>[Link Text](url)</code> syntax. </td></tr><tr class="bg-gray-25" data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275>Checklists</td><td class="border border-gray-200 px-3 py-2" data-v-92c21275> Create a list item with <code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>- [ ]</code> for an incomplete task or <code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>- [x]</code> for a completed one. </td></tr></tbody></table></div></div><div data-v-92c21275><h3 class="text-lg font-medium text-gray-800 mb-3" data-v-92c21275>Common Editing Shortcuts</h3><div class="overflow-x-auto" data-v-92c21275><table class="w-full border-collapse" data-v-92c21275><thead data-v-92c21275><tr class="bg-gray-50" data-v-92c21275><th class="border border-gray-200 px-3 py-2 text-left font-medium text-gray-700" data-v-92c21275>Shortcut</th><th class="border border-gray-200 px-3 py-2 text-left font-medium text-gray-700" data-v-92c21275>Action</th></tr></thead><tbody class="text-sm" data-v-92c21275><tr data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275><code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>Ctrl+A</code></td><td class="border border-gray-200 px-3 py-2" data-v-92c21275>Select all text</td></tr><tr class="bg-gray-25" data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275><code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>Ctrl+B</code></td><td class="border border-gray-200 px-3 py-2" data-v-92c21275>Apply bold formatting</td></tr><tr data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275><code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>Ctrl+C</code></td><td class="border border-gray-200 px-3 py-2" data-v-92c21275>Copy selected text</td></tr><tr class="bg-gray-25" data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275><code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>Ctrl+I</code></td><td class="border border-gray-200 px-3 py-2" data-v-92c21275>Apply italic formatting</td></tr><tr data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275><code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>Ctrl+K</code></td><td class="border border-gray-200 px-3 py-2" data-v-92c21275>Open the insert link dialog</td></tr><tr class="bg-gray-25" data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275><code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>Ctrl+S</code></td><td class="border border-gray-200 px-3 py-2" data-v-92c21275>Save the current document</td></tr><tr data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275><code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>Ctrl+V</code></td><td class="border border-gray-200 px-3 py-2" data-v-92c21275>Paste copied text</td></tr><tr class="bg-gray-25" data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275><code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>Ctrl+X</code></td><td class="border border-gray-200 px-3 py-2" data-v-92c21275>Cut selected text</td></tr><tr data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275><code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>Ctrl+Y</code></td><td class="border border-gray-200 px-3 py-2" data-v-92c21275>Redo the last action</td></tr><tr class="bg-gray-25" data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275><code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>Alt+Shift+Backspace</code></td><td class="border border-gray-200 px-3 py-2" data-v-92c21275>Redo the last action</td></tr><tr data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275><code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>Ctrl+Z</code></td><td class="border border-gray-200 px-3 py-2" data-v-92c21275>Undo the last action</td></tr><tr class="bg-gray-25" data-v-92c21275><td class="border border-gray-200 px-3 py-2 font-medium" data-v-92c21275><code class="bg-gray-100 px-2 py-1 rounded" data-v-92c21275>Alt+Backspace</code></td><td class="border border-gray-200 px-3 py-2" data-v-92c21275>Undo the last action</td></tr></tbody></table></div></div></div>', 1))
2736
- ])
2737
- ])
2738
- ])) : R("", !0)
2739
- ]));
2740
- }
2741
- }), $l = /* @__PURE__ */ X(_l, [["__scopeId", "data-v-92c21275"]]), Cl = {
2742
- __name: "vs-editor-horizontal-rule",
2743
- props: {
2744
- editor: Object
2745
- },
2746
- setup(t) {
2747
- const e = t, l = () => {
2748
- e.editor && e.editor.chain().focus().setHorizontalRule().run();
2749
- };
2750
- return (s, a) => (v(), w("button", {
2751
- title: "Horizontal Rule",
2752
- onClick: l,
2753
- class: "flex flex-col h-[30px] px-1 rounded-full hover:bg-gray-100 justify-center items-center relative flex"
2754
- }, [
2755
- C(k(Rt), { class: "h-4 w-4" })
2756
- ]));
2757
- }
2758
- }, Al = {
2759
- __name: "vs-editor-fullscreen",
2760
- props: {
2761
- editor: Object
2762
- },
2763
- emits: ["toggle-fullscreen"],
2764
- setup(t, { emit: e }) {
2765
- const l = e, s = () => {
2766
- l("toggle-fullscreen");
2767
- };
2768
- return (a, o) => (v(), w("button", {
2769
- title: "Fullscreen",
2770
- onClick: s,
2771
- class: "w-[30px] h-[30px] flex items-center justify-center text-gray-500 rounded-full hover:text-gray-900 hover:bg-gray-100"
2772
- }, [
2773
- C(k(Ut), { class: "h-4 w-4" })
2774
- ]));
2775
- }
2776
- }, Fl = /* @__PURE__ */ Object.assign({
2777
- inheritAttrs: !1
2778
- }, {
2779
- __name: "vs-editor-tab",
2780
- props: {
2781
- editor: {
2782
- type: Object,
2783
- required: !0
2784
- }
2785
- },
2786
- setup(t) {
2787
- const e = t, l = () => {
2788
- e.editor && (e.editor.isActive("bulletList") || e.editor.isActive("orderedList")) && e.editor.chain().focus().sinkListItem("listItem").run();
2789
- };
2790
- return (s, a) => (v(), w("button", {
2791
- title: "Tab (Increase List Indent)",
2792
- onClick: l,
2793
- class: "text-gray-500 w-[30px] h-[30px] flex items-center justify-center rounded-full hover:text-gray-900 hover:bg-gray-100 focus:outline-none"
2794
- }, [
2795
- C(k(qt), { class: "h-4 w-4" })
2796
- ]));
2797
- }
2798
- }), Sl = {
2799
- bold: Br,
2800
- italic: jr,
2801
- color: Ao,
2802
- background_color: Io,
2803
- highlight: Eo,
2804
- bullet_list: kr,
2805
- ordered_list: Cr,
2806
- blockquote: yr,
2807
- codeblock: Sr,
2808
- underline: Pr,
2809
- strike: Mr,
2810
- link: ao,
2811
- table: uo,
2812
- text_align: go,
2813
- type_tag: mo,
2814
- font_family: No,
2815
- font_size: Vo,
2816
- superscript: qo,
2817
- subscript: Xo,
2818
- heading: el,
2819
- clear_formatting: ol,
2820
- image: gl,
2821
- history: yl,
2822
- help: $l,
2823
- horizontal_rule: Cl,
2824
- fullscreen: Al,
2825
- tab: Fl
2826
- }, Oe = {
2827
- // Базовий набір - мінімальний функціонал
2828
- basic: [
2829
- "history",
2830
- "font_family",
2831
- "font_size",
2832
- "bold",
2833
- "italic",
2834
- "underline",
2835
- "strike",
2836
- "text_align",
2837
- "bullet_list",
2838
- "ordered_list",
2839
- "link",
2840
- "image",
2841
- "clear_formatting",
2842
- "help"
2843
- ],
2844
- // Стандартний набір - рекомендований для більшості випадків
2845
- default: [
2846
- "history",
2847
- "heading",
2848
- "font_family",
2849
- "font_size",
2850
- "bold",
2851
- "italic",
2852
- "underline",
2853
- "strike",
2854
- "superscript",
2855
- "subscript",
2856
- "color",
2857
- "background_color",
2858
- "highlight",
2859
- "text_align",
2860
- "bullet_list",
2861
- "ordered_list",
2862
- "blockquote",
2863
- "codeblock",
2864
- "table",
2865
- "link",
2866
- "image",
2867
- "horizontal_rule",
2868
- "clear_formatting",
2869
- "fullscreen",
2870
- "help"
2871
- ],
2872
- // Повний набір - всі доступні функції
2873
- full: [
2874
- "history",
2875
- "heading",
2876
- "font_family",
2877
- "font_size",
2878
- "bold",
2879
- "italic",
2880
- "underline",
2881
- "strike",
2882
- "color",
2883
- "background_color",
2884
- "highlight",
2885
- "text_align",
2886
- "bullet_list",
2887
- "ordered_list",
2888
- "blockquote",
2889
- "codeblock",
2890
- "table",
2891
- "link",
2892
- "image",
2893
- "horizontal_rule",
2894
- "superscript",
2895
- "subscript",
2896
- "clear_formatting",
2897
- "fullscreen",
2898
- "help"
2899
- ]
2900
- }, Tl = { class: "flex align-middle gap-x-0.5 border-b flex-wrap border-b-gray-200 px-[10px] py-[6px] border-solid border-transparent" }, Ll = { class: "rich-text-scroll-wrapper" }, Bl = {
2901
- key: 0,
2902
- class: "richtext-loading text-sm text-gray-500"
2903
- }, Il = {
2904
- key: 1,
2905
- class: "richtext-error text-sm text-red-600"
2906
- }, El = { class: "html-source-editor" }, jl = { class: "flex justify-end border-t border-[#e5e7eb] bg-[#f8fafc] px-4 min-h-[38px] items-start overflow-visible" }, Pl = { class: "inline-flex items-stretch -mt-px" }, Dl = /* @__PURE__ */ Object.assign({
2907
- inheritAttrs: !1
2908
- }, {
2909
- __name: "vs-richtext",
2910
- props: /* @__PURE__ */ Pe({
2911
- modelValue: { type: String, default: () => "" },
2912
- height: { type: String, default: () => "300px" },
2913
- format: { type: String, default: () => "html" },
2914
- toolbar: {
2915
- type: [Array, String],
2916
- default: () => "default"
2917
- }
2918
- }, {
2919
- modelValue: {},
2920
- modelModifiers: {}
2921
- }),
2922
- emits: /* @__PURE__ */ Pe(["update:modelValue"], ["update:modelValue"]),
2923
- setup(t) {
2924
- const e = t, l = ct(t, "modelValue"), s = $(null), { t: a } = _e(), o = P(() => e.format === "md" ? "markdown" : "html"), n = P(
2925
- () => e.format === "md" ? a("form.richtext.markdown") : a("form.richtext.html")
2926
- ), { editor: c, editorInstance: r, focusEditor: i, createEditor: b, destroyEditor: u, isLoading: h, loadError: g } = rr(e), { isHtmlMode: S, htmlContent: j, htmlTextarea: H, toggleHtmlMode: z } = or(
2927
- c,
2928
- e.format,
2929
- (O, p) => {
2930
- O === "update:modelValue" && (l.value = p);
2931
- },
2932
- {
2933
- toEditorContent: Ae,
2934
- toSourceContent: fr
2935
- }
2936
- ), { isFullscreen: q, toggleFullscreen: L } = lr(), Y = P(() => typeof e.toolbar == "string" ? Oe[e.toolbar] || Oe.default : e.toolbar), oe = P(() => Y.value.map((O) => Sl[O]).filter(Boolean));
2937
- ue(
2938
- () => e.modelValue,
2939
- async (O) => {
2940
- if (c.value) {
2941
- const p = await Ae(O || "", e.format), y = c.value.getHTML();
2942
- p !== y && p !== "<p></p>" && c.value.commands.setContent(p, !1);
2943
- }
2944
- },
2945
- { immediate: !0 }
2946
- );
2947
- const se = (O) => {
2948
- if (!O || !O.view || !O.view.dom) return;
2949
- O.view.dom.querySelectorAll("img.editor-image[width][height]").forEach((y) => {
2950
- if (y instanceof HTMLImageElement) {
2951
- const f = y.getAttribute("width"), _ = y.getAttribute("height");
2952
- f && _ && f !== "auto" && _ !== "auto" && f !== "" && _ !== "" && !isNaN(Number(f)) && !isNaN(Number(_)) && (y.style.cssText = `
2953
- width: ${f}px !important;
2954
- height: ${_}px !important;
2955
- max-width: none !important;
2956
- max-height: none !important;
2957
- min-width: auto !important;
2958
- min-height: auto !important;
2959
- object-fit: fill !important;
2960
- `.replace(/\s+/g, " ").trim());
2961
- }
2962
- });
2963
- };
2964
- return ue(c, (O) => {
2965
- O && (be(() => {
2966
- se(c.value);
2967
- }), c.value.on("update", async (p) => {
2968
- const y = p.editor.getHTML(), f = await pr(y, e.format);
2969
- f !== e.modelValue && y !== "<p></p>" && (l.value = f), setTimeout(() => {
2970
- se(p.editor);
2971
- }, 10);
2972
- }));
2973
- }), fe(async () => {
2974
- const O = await Ae(e.modelValue || "", e.format);
2975
- await b(s.value, O), be(() => {
2976
- c.value && setTimeout(() => {
2977
- se(c.value);
2978
- }, 100);
2979
- });
2980
- }), Ue(() => {
2981
- u();
2982
- }), (O, p) => (v(), w("div", {
2983
- class: T(["bg-white rounded-md w-full", { "fixed left-0 right-0 top-0 bottom-0 z-[100000]": k(q) }])
2984
- }, [
2985
- d("div", Tl, [
2986
- (v(!0), w(re, null, le(oe.value, (y) => (v(), w(re, { key: y }, [
2987
- k(c) ? (v(), K(Fe(y), {
2988
- key: 0,
2989
- editor: k(r),
2990
- onToggleFullscreen: k(L)
2991
- }, null, 40, ["editor", "onToggleFullscreen"])) : R("", !0)
2992
- ], 64))), 128))
2993
- ]),
2994
- d("div", {
2995
- onClick: p[1] || (p[1] = (...y) => k(i) && k(i)(...y)),
2996
- class: "relative w-full px-4 py-2 bg-white rounded-b-lg editor-content",
2997
- style: ae({ height: k(q) ? "calc(95vh - 44px)" : t.height })
2998
- }, [
2999
- ie(d("div", Ll, [
3000
- d("div", {
3001
- ref_key: "editorElement",
3002
- ref: s,
3003
- class: "relative w-full"
3004
- }, null, 512),
3005
- k(h) ? (v(), w("div", Bl, "Loading editor...")) : R("", !0),
3006
- k(g) ? (v(), w("div", Il, W(k(g)), 1)) : R("", !0)
3007
- ], 512), [
3008
- [ye, !k(S)]
3009
- ]),
3010
- ie(d("div", El, [
3011
- C(ft, {
3012
- ref_key: "htmlTextarea",
3013
- ref: H,
3014
- modelValue: k(j),
3015
- "onUpdate:modelValue": p[0] || (p[0] = (y) => dt(j) ? j.value = y : null),
3016
- height: "100%",
3017
- syntax: o.value,
3018
- theme: "vs-light"
3019
- }, null, 8, ["modelValue", "syntax"])
3020
- ], 512), [
3021
- [ye, k(S)]
3022
- ])
3023
- ], 4),
3024
- d("div", jl, [
3025
- d("div", Pl, [
3026
- d("button", {
3027
- type: "button",
3028
- class: T([
3029
- "min-w-[96px] h-[30px] px-[14px] border border-[#cfd6e0] bg-[#f3f5f8] text-[8px] font-bold uppercase tracking-[0.06em] leading-none cursor-pointer transition-colors duration-200 border-b-[1px] border-b-[#cfd6e0] rounded-none rounded-bl-[8px] hover:bg-[#eef1f5] hover:text-[#667284]",
3030
- k(S) ? "text-[#8f99aa]" : "!bg-white text-[#49556a] border-[#cfd6e0] border-t-transparent relative z-[1]"
3031
- ]),
3032
- onClick: p[2] || (p[2] = (y) => k(z)(!1))
3033
- }, W(k(a)("form.richtext.editor")), 3),
3034
- d("button", {
3035
- type: "button",
3036
- class: T([
3037
- "min-w-[96px] h-[30px] px-[14px] border border-[#cfd6e0] border-l-0 bg-[#f3f5f8] text-[8px] font-bold uppercase tracking-[0.06em] leading-none cursor-pointer transition-colors duration-200 border-b-[1px] border-b-[#cfd6e0] rounded-none rounded-br-[8px] hover:bg-[#eef1f5] hover:text-[#667284]",
3038
- k(S) ? "!bg-white text-[#49556a] border-[#cfd6e0] border-t-transparent relative z-[1]" : "text-[#8f99aa]"
3039
- ]),
3040
- onClick: p[3] || (p[3] = (y) => k(z)(!0))
3041
- }, W(n.value), 3)
3042
- ])
3043
- ])
3044
- ], 2));
3045
- }
3046
- });
3047
- export {
3048
- Dl as default
3049
- };